/* 原始设计尺寸：973 × 1617。cqw 为画布宽度百分比。
   所有文字都来自 pages/about.html；本文件只控制字体和排版。
   保持竖版 UI 的完整构图，手机与桌面均按同一比例缩放。
   若大幅增加文案长度，可同时调整下方字号或该段位置。 */
*{box-sizing:border-box}
html{background:#d4e6c5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:#434360;font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
a{-webkit-tap-highlight-color:transparent}
.planet-explanation{width:min(100%,973px);margin:0 auto;position:relative;container-type:inline-size;aspect-ratio:973/1617;box-shadow:0 0 55px #37573a25}
.ui-artwork{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.ui-logo,.ui-hero,.ui-heading,.ui-copy,.ui-features,.ui-privacy-link,.ui-home-link,.ui-wechat-title,.ui-wechat-name{position:absolute;margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #226c80;outline-offset:4px;border-radius:10px}
.ui-logo{left:23.1%;top:4.25%;width:15.4%;color:#79370d;font-size:calc(var(--ui-unit, 1vw) * 3.1);font-weight:900;line-height:1.18;white-space:nowrap}
.ui-logo small{display:block;font-size:calc(var(--ui-unit, 1vw) * .99);letter-spacing:calc(var(--ui-unit, 1vw) * .04);font-weight:800;margin-top:calc(var(--ui-unit, 1vw) * .1)}
.ui-hero{inset:0;pointer-events:none;color:#fff2d0}
.ui-hero h1{position:absolute;left:16.7%;top:11.25%;width:33%;margin:0;font-size:calc(var(--ui-unit, 1vw) * 7.95);letter-spacing:calc(var(--ui-unit, 1vw) * .25);line-height:1.12;font-weight:900;white-space:nowrap;text-shadow:0 calc(var(--ui-unit, 1vw) * .32) calc(var(--ui-unit, 1vw) * .08) #8c4c25,0 -calc(var(--ui-unit, 1vw) * .1) #fff8e7}
.ui-hero p{position:absolute;left:21.4%;top:17.6%;margin:0;color:#5d2a0d;font-size:calc(var(--ui-unit, 1vw) * 2.25);letter-spacing:calc(var(--ui-unit, 1vw) * .12);font-weight:900;white-space:nowrap;line-height:1.3}
.ui-heading{font-size:calc(var(--ui-unit, 1vw) * 3.25);letter-spacing:calc(var(--ui-unit, 1vw) * .2);line-height:1.2;font-weight:900;color:#fffdf3;text-shadow:0 calc(var(--ui-unit, 1vw) * .25) calc(var(--ui-unit, 1vw) * .12) #854720;white-space:nowrap}
.ui-heading small{display:block;margin-top:calc(var(--ui-unit, 1vw) * .35);font-size:calc(var(--ui-unit, 1vw) * 1.32);letter-spacing:calc(var(--ui-unit, 1vw) * .12);color:#ffdda0;font-weight:500;text-shadow:none;line-height:1.2}
.intro-heading{left:15.25%;top:28.78%}
.privacy-heading{left:15.6%;top:64.45%}
.contact-heading{left:16.65%;top:85.02%}
.ui-copy{font-size:calc(var(--ui-unit, 1vw) * 1.97);line-height:1.47;font-weight:550;letter-spacing:calc(var(--ui-unit, 1vw) * .015);overflow-wrap:break-word}
.intro-copy{left:7.05%;top:34.01%;width:43.1%}
.privacy-copy{left:7.1%;top:69.24%;width:42.1%;font-size:calc(var(--ui-unit, 1vw) * 1.88);line-height:1.39}
.contact-copy{left:7.05%;top:90.25%;width:41.5%;font-size:calc(var(--ui-unit, 1vw) * 1.87);line-height:1.5}
.ui-features{inset:0;text-align:center;pointer-events:none}
.ui-feature{position:absolute;top:53%;pointer-events:auto}
.learning{left:5.45%;width:21.65%}.fun{left:29.95%;width:19.55%}.grow{left:52.2%;width:18.8%}.heart{left:74.6%;width:20.1%}
.ui-feature h3{margin:0;line-height:1.5;font-size:calc(var(--ui-unit, 1vw) * 2.23);font-weight:900;white-space:nowrap;letter-spacing:calc(var(--ui-unit, 1vw) * .035);color:#b84b0b}
.ui-feature p{margin:calc(var(--ui-unit, 1vw) * 1.85) calc(var(--ui-unit, 1vw) * .55) 0;font-size:calc(var(--ui-unit, 1vw) * 1.65);line-height:1.5;font-weight:550}
.fun h3{color:#05699f}.grow h3{color:#437715}.heart h3{color:#d52453}
.ui-privacy-link{left:7.05%;top:79.18%;width:26.7%;height:3.15%;padding-right:calc(var(--ui-unit, 1vw) * 3.6);display:flex;align-items:center;justify-content:center;color:#b34a0b;font-size:calc(var(--ui-unit, 1vw) * 1.98);font-weight:900;letter-spacing:calc(var(--ui-unit, 1vw) * .04);border-radius:40px}
.ui-home-link{left:4.25%;top:95.44%;width:21.6%;height:3.65%;padding-left:calc(var(--ui-unit, 1vw) * 6.8);display:flex;align-items:center;justify-content:center;font-size:calc(var(--ui-unit, 1vw) * 2.48);letter-spacing:calc(var(--ui-unit, 1vw) * .1);font-weight:800;color:#fff6de;text-shadow:0 calc(var(--ui-unit, 1vw) * .18) #874014;border-radius:40px}
.ui-wechat-title{left:75.75%;top:87.65%;font-size:calc(var(--ui-unit, 1vw) * 3.12);color:white;line-height:1.2;white-space:nowrap}
.ui-wechat-name{left:74.55%;top:91.75%;font-size:calc(var(--ui-unit, 1vw) * 2.5);color:#292929;line-height:1.2;white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.planet-explanation{width:973px;box-shadow:none}}

/* 独立的有效二维码图片，保留完整白色边距；点击可查看大图。 */
.ui-qr{position:absolute;left:52.46%;top:86.52%;width:14.15%;height:8.1%;display:grid;place-items:center;background:white;border-radius:calc(var(--ui-unit, 1vw) * .8);box-shadow:0 0 0 calc(var(--ui-unit, 1vw) * .1) white}
.ui-qr img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10%}

/* Fit tall mobile viewports. Artwork and text positions use the same canvas. */
.planet-explanation{min-height:var(--planet-viewport-height,100vh)}
@supports(height:100dvh){.planet-explanation{min-height:var(--planet-viewport-height,100dvh)}}

/* Render typography on the original design canvas, then scale the entire layer.
   WeChat may impose a minimum font size on very small CSS text. Scaling a
   readable design-sized font avoids mismatched artwork/text proportions. */
.planet-explanation{overflow:hidden}
.ui-layout{position:absolute;inset:0;width:100%;height:100%;--ui-unit:1vw}
.ui-layout.is-sized{inset:auto;top:0;left:0;width:973px;height:var(--ui-design-height,1617px);--ui-unit:9.73px;transform:scale(var(--ui-scale,1));transform-origin:0 0}
.ui-layout.is-sized .ui-logo small{font-size:12px;letter-spacing:.15px}
.ui-heading small{white-space:nowrap}
.ui-feature p{font-size:calc(var(--ui-unit, 1vw) * 1.58);line-height:1.4;margin-top:calc(var(--ui-unit, 1vw) * 1.5)}
.ui-logo{width:17%}