:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#e5e9dc;background:#11232c;font-synthesis:none;--gold:#e6c483;--dim:#98aeae;--line:#78949333}*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:1px solid var(--line);background:#24404a;border-radius:10px;min-height:44px;padding:10px 16px}button:hover{border-color:#dfc088aa;background:#31505a}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.5}button.primary{background:var(--gold);color:#24333b;font-weight:700;border:0}button.primary:hover{background:#f1d6a5}.app{max-width:1600px;margin:auto}header{height:88px;display:flex;align-items:center;gap:14px;padding:0 38px;border-bottom:1px solid var(--line)}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;margin-right:auto}.brand-icon{font-size:42px;color:var(--gold)}.brand small{display:block;letter-spacing:4px;font-size:10px;color:var(--gold)}.brand b{font-size:21px;letter-spacing:4px}.quiet{background:transparent;font-size:12px}.weather{display:flex;align-items:center;gap:9px;margin-right:10px;color:#b4c3c3;font-size:12px}.weather i{width:6px;height:6px;background:#b9d0d7;border-radius:50%}.weather strong{color:var(--gold);font-variant-numeric:tabular-nums;font-size:16px;margin-left:6px}main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px;padding:28px 38px 18px}.exploration{min-width:0}.scene-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.scene-heading small{font-size:9px;color:#91aaa9;letter-spacing:2px}.scene-heading h1{font-size:29px;letter-spacing:3px;margin:8px 0 0;font-weight:500}.scene-heading>span{font-size:12px;color:var(--gold);border:1px solid var(--line);padding:8px 12px;border-radius:30px}.scene{position:relative;aspect-ratio:1.5;border-radius:14px;overflow:hidden;background:#172f39;box-shadow:0 22px 60px #07151c77;border:1px solid #7d9b9233}.scene svg{width:100%;height:100%;display:block}.hotspot{position:absolute;min-width:44px;min-height:44px;background:#152b31d9;border:1px solid #e1c48a8c;border-radius:50%;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 0 22px #efcc8230;color:#f4d494;font-size:20px}.hotspot .label{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#12272fe8;border-radius:4px;padding:4px 7px;color:#e6e7d7;font-size:11px;pointer-events:none}.hotspot.collected{display:none}.hotspot.moth{border:0;background:transparent;box-shadow:none;font-size:23px;color:#e8d2a4;text-shadow:0 0 12px #ffd78a}.caption{display:flex;gap:10px;align-items:center;min-height:62px}.caption p{font-size:12px;line-height:1.8;color:#b1c2bf;margin:10px 0}.pulse{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}nav{display:flex;gap:8px}nav button{flex:1;text-align:left;background:#19323b;font-size:13px;padding:12px;position:relative}nav button small{font-size:9px;display:block;color:#92aaa8;letter-spacing:2px;margin-bottom:5px}nav button.active{border-color:var(--gold);background:#31464a}nav button .lock{float:right;color:#bdc4b0;font-size:11px}aside{padding-top:6px}aside section{margin-bottom:25px}.objective{padding:20px;background:#20383e;border:1px solid #5a746a66;border-radius:12px}.objective>small{font-size:10px;letter-spacing:3px;color:var(--gold)}.objective h2{font-size:19px;font-weight:500;line-height:1.5;margin:12px 0}.objective p{color:var(--dim);font-size:12px;line-height:1.8;margin:12px 0 0}.steps{display:flex;gap:5px}.steps span{height:3px;background:#4b6263;flex:1}.steps span.done{background:var(--gold)}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-label h2{font-size:14px;letter-spacing:2px;margin:0;font-weight:500}.section-label>span{color:#91a7a5;font-size:10px}#inventory{display:flex;gap:8px;flex-wrap:wrap}.item{font-size:11px;display:flex;align-items:center;gap:8px;padding:10px}.item em{font-style:normal;font-size:24px;color:var(--gold)}.empty{font-size:12px;line-height:1.8;color:#809c9d}.clue{border-left:2px solid #bda376;padding:3px 0 3px 12px;margin-bottom:16px}.clue b{font-size:12px;font-weight:500;color:#e2d3b5}.clue p{font-size:12px;color:var(--dim);line-height:1.8;margin:6px 0 0}.restart{width:100%}.save-status{font-size:10px;display:block;text-align:center;color:#819b99;margin:12px 0}footer{display:flex;justify-content:space-between;margin:0 38px;padding:15px 0;border-top:1px solid var(--line);font-size:10px;color:#789697;letter-spacing:1px}.overlay{position:fixed;inset:0;z-index:10;background:#06121dcc;display:grid;place-items:center;padding:20px;backdrop-filter:blur(9px)}.overlay.hidden{display:none}#dialog{position:relative;max-width:540px;width:100%;max-height:90dvh;overflow:auto;background:linear-gradient(150deg,#29464c,#142e39);border:1px solid #85948477;border-radius:20px;padding:36px;box-shadow:0 30px 150px #0008}#close{position:absolute;right:10px;top:10px;background:transparent;border:0;font-size:24px}#dialog-kicker{font-size:9px;letter-spacing:3px;color:var(--gold);padding-right:32px;display:block}#dialog-title{font-weight:500;font-size:32px;letter-spacing:4px;margin:15px 0 20px}#dialog-body{color:#b9ceca;font-size:14px;line-height:1.9}#dialog-body p{margin:12px 0}.intro-art{height:130px;overflow:hidden;border-radius:10px;margin:10px 0 20px;background:#132832}.intro-art svg{width:100%;height:100%}.detail{padding:14px;background:#102a32;border-left:2px solid var(--gold);color:#dfd7bd;margin:16px 0}.muted{font-size:12px;color:#8fa9a6}#dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}#dialog-actions button{flex:1}.digits{display:flex;gap:12px;margin:18px 0}.digit{flex:1;text-align:center;background:#122a32;border-radius:10px;padding:8px}.digit button{display:block;width:100%;background:transparent;border:0;font-size:20px;padding:0}.digit output{font-family:Georgia,serif;color:#f0d79e;font-size:38px}.sequence{display:flex;gap:8px;margin:16px 0}.sequence button{flex:1;font-size:26px;padding:12px 4px}.sequence button span{display:block;font-size:11px}.slots{padding:10px;letter-spacing:10px;text-align:center;font-size:25px;min-height:55px;color:var(--gold)}.feedback{min-height:25px;color:#f0bca0;font-size:12px}.stats-grid{display:flex;gap:12px}.stats-grid div{flex:1;background:#142d35;padding:14px;border-radius:10px;font-size:11px}.stats-grid strong{display:block;font-size:25px;color:var(--gold)}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;background:#e3c68c;color:#20333a;padding:12px 22px;border-radius:10px;font-size:13px;z-index:15;pointer-events:none;transition:.2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 320px}}@media(max-width:900px){header{height:72px;padding:0 20px}main{padding:20px;gap:20px;grid-template-columns:minmax(0,1fr) 240px}.weather span{font-size:0}.weather strong{font-size:15px}.scene-heading h1{font-size:23px}.scene-heading small{letter-spacing:1px;font-size:8px}.hotspot .label{font-size:10px}.objective{padding:15px}footer{margin:0 20px}}@media(max-width:640px){header{height:66px;padding:0 14px;gap:7px}.brand{gap:7px}.brand-icon{font-size:29px}.brand small{font-size:8px;letter-spacing:2px}.brand b{font-size:17px;letter-spacing:2px}.weather{margin-right:0;gap:2px}.weather i{display:none}.weather strong{font-size:13px;margin-left:0}header button{padding:8px;font-size:11px}main{display:flex;flex-direction:column;padding:18px 14px;gap:24px}.scene-heading{margin-bottom:15px}.scene-heading h1{font-size:23px}.scene-heading small{font-size:7px;letter-spacing:1px}.scene-heading>span{font-size:10px;padding:7px 9px}.scene{aspect-ratio:1/1.08}.scene svg{object-fit:cover}.caption{min-height:64px}nav button{font-size:12px;padding:10px 8px}nav button small{font-size:8px;letter-spacing:1px}aside{display:grid;grid-template-columns:1fr;gap:0}aside section{margin-bottom:20px}.journal{max-height:220px;overflow:auto}.hotspot .label{font-size:10px;padding:3px 5px}.objective h2{font-size:18px;margin:8px 0}.objective p{margin:8px 0 0}.save-status{margin-bottom:0}footer{margin:0 14px;line-height:1.8;gap:20px;font-size:9px}#dialog{padding:28px 22px}#dialog-title{font-size:27px}.intro-art{height:100px}}@media(max-height:480px) and (min-width:641px){header{height:58px}main{padding-top:12px}.scene-heading{margin-bottom:12px}.scene{aspect-ratio:1.8}.scene-heading h1{font-size:21px}#dialog{padding:22px 30px;max-height:94dvh}#dialog-title{font-size:25px;margin:8px 0 10px}.intro-art{display:none}#dialog-actions{margin-top:14px}#dialog-body{font-size:13px}.digits{margin:8px 0}.digit output{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.content-puzzle{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.content-puzzle p{width:100%}.content-puzzle.route{display:grid;grid-template-columns:repeat(4,1fr)}.content-puzzle button{min-width:44px;min-height:44px;padding:9px}
/* Art pass: warm storybook controls; existing behavior untouched. */
:root{background:#172d43;color:#f1eddf;--gold:#f0cb91;--dim:#b7c7cc;--line:#98b5c044}header{background:#203c52;border-color:#7896a455}.brand-icon{color:#ffd89c}.weather strong{color:#ffdea6}button{background:#35586d;border-color:#8aa6ad66;box-shadow:0 2px 0 #0c253c44;border-radius:13px}button:hover{background:#446b7c;border-color:#e7c88d}button.primary{background:#f3cd91;color:#293f53;box-shadow:0 3px 0 #b28e6344}.scene{border:3px solid #789b9f88;border-radius:22px;box-shadow:0 12px 30px #0b1e333b}.hotspot{background:#f9dfa9;color:#39556a;border:2px solid #fff1cf;box-shadow:0 3px 0 #253f5355,0 0 0 5px #f6d99a19;width:44px;height:44px;font-size:22px}.hotspot:hover{background:#fff0c8;transform:translate(-50%,-50%) scale(1.06)}.hotspot .label{background:#243d52ee;color:#fff0d0;border:1px solid #9fbaa566;border-radius:8px;font-size:11px;padding:4px 8px}.hotspot.moth{background:transparent;border:0;box-shadow:none;color:#ffde9f;font-size:27px}.objective{background:#294a60;border-color:#7a9a9d77;border-radius:17px}.objective p{color:#b5cbd0}.steps span{background:#557685}.steps span.done{background:#efce95}.item{background:#304f63;border-color:#789a9d77}.clue{border-color:#e3bf89}.clue b{color:#eddbb9}.clue p{color:#b5cbd0}.empty{color:#a3bec2}nav button{background:#27495f;border:1px solid #789a9d66;border-radius:14px}nav button.active{background:#3c6170;border:2px solid #e8c890}nav button small{color:#a9c6c9}#dialog{background:linear-gradient(145deg,#355c70,#203d56);border:2px solid #96b3b288;border-radius:24px;box-shadow:0 25px 80px #07152499}#dialog-body{color:#d0dfe0}.detail{background:#243f55;border-radius:9px;border-left-color:#f0cd94}.digit{background:#203c53}.digit output{color:#ffe3ad}.overlay{background:#0b1d32bb;backdrop-filter:blur(7px)}#dialog-kicker{color:#efd49f}#toast{background:#f7dca8;border:1px solid #fff1ca;color:#28495b;box-shadow:0 8px 30px #0a203b44}footer{color:#98b6c0}.save-status{color:#9cb8bd}.scene-heading h1{color:#f2e9d8}.scene-heading small{color:#adcccf}.scene-heading>span{background:#2e4f60;color:#f4d496}#close{box-shadow:none;color:#f4dfb5}.content-puzzle button{border-width:2px}.content-puzzle.route button:disabled{background:#1e354b;color:#72919f;opacity:.75}.quiet{box-shadow:none}
@media(max-width:640px){.scene{border-radius:18px}main{padding-top:14px}.scene-heading{margin-bottom:12px}.hotspot .label{font-size:10px}}@media(max-height:480px) and (min-width:481px){header{height:56px}main{grid-template-columns:minmax(0,1fr) 210px;gap:16px;padding:12px 16px}.scene{aspect-ratio:1.5}.scene-heading{margin-bottom:10px}.scene-heading h1{font-size:21px}.scene-heading small{font-size:7px}.scene-heading>span{font-size:10px}.hotspot .label{font-size:9px;padding:3px 5px}#dialog{max-height:94dvh}.intro-art{display:none}}
.hotspot{border:0;background:radial-gradient(circle,#f5d59c 0 15px,#fff0ca 15px 17px,transparent 17px);box-shadow:none;font-size:19px}.hotspot:hover{background:radial-gradient(circle,#ffe8b7 0 15px,#fff5d9 15px 17px,transparent 17px)}.hotspot[data-object=diary],.hotspot[data-object=chart],.hotspot[data-object=poster],.hotspot[data-object=letter]{background:radial-gradient(circle,#c5dfd5 0 15px,#e7f1db 15px 17px,transparent 17px);color:#395e68}.hotspot .label{top:calc(100% - 1px)}.hotspot.moth,.hotspot.moth:hover{background:transparent;font-size:25px}
#dialog-body>svg{display:block;width:100%;height:130px;margin:0 0 18px;border-radius:12px;background:#203b50}@media(max-height:480px){#dialog-body>svg{display:none}#dialog{padding:18px 24px}#dialog-title{font-size:24px;margin:8px 0 10px}#dialog-body{font-size:12px;line-height:1.6}#dialog-body p{margin:8px 0}#dialog-actions{margin-top:12px}#dialog-kicker{font-size:8px}}
/* Compact landscape: scene stays visible; notes scroll independently. */
@media (max-height:480px) and (min-width:481px){
 body{height:100dvh;overflow:hidden}.app{height:100%;display:flex;flex-direction:column}header{height:48px;min-height:48px;padding:0 12px;gap:8px}.brand small{display:none}.brand b{font-size:17px}.brand-icon{font-size:27px}header button{min-height:40px;padding:6px 10px}
 main{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:10px;padding:6px 10px;flex:1;min-height:0;overflow:hidden}.exploration{display:grid;grid-template-rows:24px minmax(0,1fr) 44px;gap:5px;min-height:0}.scene-heading{margin:0;min-height:0}.scene-heading h1{font-size:16px;margin:0;letter-spacing:1px}.scene-heading small{display:none}.scene-heading>span{font-size:10px;padding:3px 7px}.scene{height:100%;width:100%;aspect-ratio:auto;min-height:0;border-width:2px;border-radius:13px}.caption{display:none}nav{gap:5px;min-height:0}nav button{min-height:44px;padding:5px;font-size:11px;text-align:center;border-radius:9px}nav button small,nav .lock{display:none}
 aside{height:100%;min-height:0;overflow-y:auto;padding:0 3px 4px 0;overscroll-behavior:contain}aside section{margin-bottom:14px}.objective{padding:10px}.objective>small{font-size:9px;letter-spacing:1px}.objective h2{font-size:14px;margin:7px 0}.objective p{font-size:11px;line-height:1.6}.section-label{gap:5px}.section-label h2{font-size:12px;letter-spacing:1px}.section-label>span{font-size:9px}.journal{max-height:none;overflow:visible}.item{padding:6px;font-size:10px}.item em{font-size:18px}footer{display:none}.hotspot{top:clamp(24px,var(--spot-y),calc(100% - 25px))!important}.hotspot .label{font-size:9px;padding:2px 4px;top:calc(100% - 5px)}.hotspot[data-object=letter] .label{top:50%;left:calc(100% - 2px);transform:translateY(-50%)}#toast{bottom:8px;font-size:11px;padding:8px 12px;max-width:80vw}
}
/* Keep the refined mechanisms visible beneath their hit markers. */ .hotspot[data-object=lens],.hotspot[data-object=crank],.hotspot[data-object=align],.hotspot[data-object=flower],.hotspot[data-object=drawer]{background:radial-gradient(circle,#ffe4ad22 0 14px,#fce4ae 14px 16px,transparent 16px);font-size:16px;color:#fff0c8;text-shadow:0 1px 2px #213c50}.hotspot[data-object=lens]:hover,.hotspot[data-object=crank]:hover,.hotspot[data-object=align]:hover,.hotspot[data-object=flower]:hover,.hotspot[data-object=drawer]:hover{background:radial-gradient(circle,#ffe4ad88 0 14px,#fff2cc 14px 16px,transparent 16px)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#language-control{display:inline-flex;flex-shrink:0;align-items:center}#language-select{width:68px;min-height:36px;border:1px solid #8aa99a;border-radius:9px;background:#e7eedc;color:#2c5054;font:inherit;font-size:11px;padding:3px;touch-action:manipulation}#language-select option{color:#243a44;background:#f3f3e6}button{overflow-wrap:anywhere}html:not([lang=zh-CN]) h1,html:not([lang=zh-CN]) b{letter-spacing:0}html:not([lang=zh-CN]) #hint{font-size:11px}
html:not([lang=zh-CN]) .hotspot .label{max-width:90px;white-space:normal;min-width:36px;font-size:9px;line-height:1.15}html:not([lang=zh-CN]) .scene-heading h1{font-size:22px;letter-spacing:0}html:not([lang=zh-CN]) .objective h2{font-size:16px}html:not([lang=zh-CN]) #dialog-title{font-size:25px;letter-spacing:0}html:not([lang=zh-CN]) nav button{font-size:11px}html:not([lang=zh-CN]) #dialog-actions button{min-width:80px;font-size:12px}@media(max-width:480px){header{height:auto;min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px;padding:5px 10px}.brand{grid-column:1;grid-row:1}.weather{grid-column:1;grid-row:2}#help{grid-column:2;grid-row:1/3}#pause{grid-column:3;grid-row:1/3}#language-control{grid-column:4;grid-row:1/3}#language-select{width:59px}.brand-icon{display:none}.brand b{font-size:16px}header button{padding:6px;font-size:10px}}@media(max-height:480px) and (min-width:481px){header{gap:5px}.brand b{font-size:15px}.weather{margin:0}#language-select{width:61px}html:not([lang=zh-CN]) .scene-heading h1{font-size:15px}html:not([lang=zh-CN]) .objective h2{font-size:13px}html:not([lang=zh-CN]) .hotspot .label{max-width:76px;font-size:8px}.scene-heading>span{font-size:9px}html:not([lang=zh-CN]) nav button{font-size:10px}}html:not([lang=zh-CN]) .hotspot .label{width:max-content;overflow-wrap:normal;word-break:normal}