/* 参考 UI 的 973 × 1616 竖版画布。
   插画与 HTML 文本保持相同坐标比例；四个主题始终保持原图的一排四列。
   窄屏宽度适配，高度至少铺满可见视口；背景与文字共用画布坐标。
   桌面居中展示，不裁切场景；允许浏览器缩放阅读。 */
*{box-sizing:border-box}
html{background:#172c60;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:#454466;background:radial-gradient(ellipse at top,#698bd4,#172c60);min-height:100vh}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mystery-page{position:relative;width:min(100%,973px);margin:0 auto;aspect-ratio:973/1616;isolation:isolate;box-shadow:0 0 65px #11234c70}
.ui-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none}
.ui-home,.ui-logo,.ui-title,.ui-subtitle,.ui-heading,.ui-copy,.ui-themes,.ui-coming{position:absolute;margin:0}
.ui-home{left:2.35%;top:1.3%;width:20.3%;height:3.65%;padding-left:5.9%;display:flex;align-items:center;justify-content:center;padding-right:.7%;color:#fff7e9;font-weight:900;font-size:calc(var(--ui-unit, 1vw) * 2.67);letter-spacing:calc(var(--ui-unit, 1vw) * .12);border-radius:999px;text-shadow:0 calc(var(--ui-unit, 1vw) * .2) calc(var(--ui-unit, 1vw) * .2) #7a351c;white-space:nowrap}
.ui-logo{left:76.7%;top:1.25%;width:20.6%;height:3.8%;padding:calc(var(--ui-unit, 1vw) * 1.03) calc(var(--ui-unit, 1vw) * .9) calc(var(--ui-unit, 1vw) * .2) calc(var(--ui-unit, 1vw) * 7.5);font-size:calc(var(--ui-unit, 1vw) * 2.63);font-weight:1000;line-height:1.15;color:#74350e;border-radius:999px;white-space:nowrap}
.ui-logo small{display:block;font-size:calc(var(--ui-unit, 1vw) * .78);letter-spacing:calc(var(--ui-unit, 1vw) * .055);padding-top:calc(var(--ui-unit, 1vw) * .23);font-weight:700}
a:focus-visible{outline:calc(var(--ui-unit, 1vw) * .35) solid #fff6aa;outline-offset:calc(var(--ui-unit, 1vw) * .35);background:#fff29a22}
a:hover{filter:brightness(1.08)}
.ui-title{left:7.5%;top:17.3%;width:37.5%;text-align:center;font-size:calc(var(--ui-unit, 1vw) * 9.15);line-height:1.15;letter-spacing:calc(var(--ui-unit, 1vw) * -.45);font-weight:1000;white-space:nowrap;color:#c69cfc;background:linear-gradient(105deg,#8be8ff 5%,#9cbdff 27%,#e8b4ff 45%,#f0a3ed 68%,#a0ddff 88%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 calc(var(--ui-unit, 1vw) * -.18) 0 #fff1ff) drop-shadow(0 calc(var(--ui-unit, 1vw) * .42) 0 #633496) drop-shadow(0 calc(var(--ui-unit, 1vw) * .65) calc(var(--ui-unit, 1vw) * .3) #3c254aa0);transform:rotate(-1deg)}
.ui-subtitle{left:12.8%;top:24.55%;width:27.5%;color:#70300f;text-align:center;font-size:calc(var(--ui-unit, 1vw) * 2.63);line-height:1.4;font-weight:900;letter-spacing:calc(var(--ui-unit, 1vw) * .12);white-space:nowrap;transform:rotate(-2deg)}
.ui-heading{color:#fff8eb;font-weight:900;text-shadow:0 calc(var(--ui-unit, 1vw) * .17) calc(var(--ui-unit, 1vw) * .13) #8e4527;white-space:nowrap;line-height:1.3;letter-spacing:calc(var(--ui-unit, 1vw) * .11)}
.ui-heading small{display:block;font-weight:600;color:#ffeaa7;letter-spacing:calc(var(--ui-unit, 1vw) * .12);line-height:1.3;text-shadow:0 calc(var(--ui-unit, 1vw) * .1) calc(var(--ui-unit, 1vw) * .1) #984b28}
.about-heading{left:15.75%;top:42.7%;font-size:calc(var(--ui-unit, 1vw) * 3.62)}
.about-heading small{font-size:calc(var(--ui-unit, 1vw) * 1.48);letter-spacing:calc(var(--ui-unit, 1vw) * .11)}
.about-copy{left:6.9%;top:48.3%;width:40.5%;font-size:calc(var(--ui-unit, 1vw) * 2.05);line-height:1.61;font-weight:650;letter-spacing:calc(var(--ui-unit, 1vw) * .045)}
.themes-heading{left:14.6%;top:63.03%;font-size:calc(var(--ui-unit, 1vw) * 2.91)}
.themes-heading small{font-size:calc(var(--ui-unit, 1vw) * 1.31);letter-spacing:calc(var(--ui-unit, 1vw) * .055)}
.ui-themes{left:3.08%;top:76.93%;width:94.04%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(var(--ui-unit, 1vw) * 1.2);text-align:center}
.theme{min-width:0}.theme h3{font-size:calc(var(--ui-unit, 1vw) * 2.46);line-height:1.3;letter-spacing:calc(var(--ui-unit, 1vw) * .02);font-weight:900;margin:0 0 calc(var(--ui-unit, 1vw) * .53);color:#1d4093}.theme p{font-size:calc(var(--ui-unit, 1vw) * 1.9);line-height:1.5;letter-spacing:calc(var(--ui-unit, 1vw) * .015);font-weight:600;margin:0;color:#454270}.art h3{color:#45339d}.nature h3{color:#0d6088}.thinking h3{color:#ab4c17}
.ui-coming{left:44.1%;top:87.7%;width:45.8%;text-align:center;color:#fff2ff;text-shadow:0 calc(var(--ui-unit, 1vw) * .22) calc(var(--ui-unit, 1vw) * .23) #7740b0}
.ui-coming h2{font-size:calc(var(--ui-unit, 1vw) * 3.38);line-height:1.5;font-weight:900;margin:0 0 calc(var(--ui-unit, 1vw) * .9);white-space:nowrap;letter-spacing:calc(var(--ui-unit, 1vw) * .05)}
.ui-coming p{font-size:calc(var(--ui-unit, 1vw) * 2.7);line-height:1.5;font-weight:700;margin:0;text-shadow:0 calc(var(--ui-unit, 1vw) * .15) calc(var(--ui-unit, 1vw) * .2) #5950ac}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.image-error{position:absolute;top:5%;left:8%;width:84%;background:#fff6dc;padding:20px;border-radius:20px;font-size:16px;line-height:1.8;box-shadow:0 8px 30px #17264f60;z-index:5}
.image-error[hidden]{display:none}.image-error button{font:inherit;cursor:pointer;background:#ffe095;color:#643514;border:1px solid #b48437;border-radius:20px;padding:5px 15px;margin:10px}.image-error a{display:block;color:#4642a6;text-decoration:underline}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* 手机与微信 WebView：短画布延展到屏幕底部，背景和文案共用百分比坐标。 */
@media(max-width:973px){
  .mystery-page{min-height:var(--planet-viewport-height,100vh)}
  @supports(height:100dvh){.mystery-page{min-height:var(--planet-viewport-height,100dvh)}}
}

/* 微信可能强制小字号到 12–16px。先用原设计尺寸排版，再整体缩放，
   避免小字号被放大后与插画脱离；视口变化沿用共享高度同步脚本。 */
.ui-layout{position:absolute;inset:0;width:100%;height:100%;--ui-unit:1vw;-webkit-text-size-adjust:none;text-size-adjust:none}
.ui-layout.is-sized{inset:auto;top:0;left:0;width:973px;height:var(--ui-design-height,1616px);--ui-unit:9.73px;transform:scale(var(--ui-scale,1));transform-origin:0 0}
.ui-logo small{font-size:16px;line-height:1;transform:scale(.52);transform-origin:left top;width:192%;padding-top:0;margin-top:2px;letter-spacing:1px}
.about-copy{white-space:nowrap;line-height:1.58;font-size:calc(var(--ui-unit, 1vw) * 1.96)}
.theme h3,.theme p{white-space:nowrap}
.ui-heading small{font-size:16px;line-height:1.2}
.themes-heading small{font-size:16px;letter-spacing:0}