*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#ececdf;color:#354357;font:var(--game-body)/1.5 var(--game-font)}a{color:inherit;text-decoration:none}button,summary,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #9b5831;outline-offset:5px}header{position:absolute;z-index:5;top:26px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand,nav{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;font-size:var(--game-title);text-shadow:0 2px #fff8;min-height:48px}.brand-mark{color:#526d93;font-size:var(--game-title)}nav{display:flex;gap:8px;align-items:start}nav>button,summary{display:grid;place-items:center;width:46px;height:46px;border:1px solid #97835c66;border-radius:15px 13px 16px 12px;background:linear-gradient(155deg,#fdfcf8,#ecece8);box-shadow:0 3px 0 #99876470,inset 0 1px #fff9;color:#52634a;transition:transform .12s,box-shadow .12s}nav>button:active,summary:active{transform:translateY(2px);box-shadow:0 1px #99876470}nav>button[aria-pressed=true]{background:linear-gradient(155deg,#6681a4,#486482);color:#fffefb}nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#audio[aria-pressed=true] .muted{display:none}summary{cursor:pointer;list-style:none;font-size:var(--game-title)}summary::-webkit-details-marker{display:none}details>div{position:absolute;right:0;top:60px;padding:12px;background:#fcfaf5;border:1px solid #b4a17f;border-radius:12px;box-shadow:0 8px 25px #344a3320;min-width:180px}details button,details a{display:block;width:100%;min-height:44px;text-align:left;border:0;background:none;padding:8px;font-size:var(--game-hint)}main{height:100dvh;position:relative;isolation:isolate}#canvas,#places{position:absolute;inset:0}#canvas:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px 30px #f7f3dd60}canvas{display:block;width:100%;height:100%;touch-action:none}#places{pointer-events:none}.place{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;border:0;background:transparent;color:transparent;cursor:pointer;touch-action:none;border-radius:9px}.place:focus-visible{outline:3px dashed #9b5831;background:#fff5c020}.place .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#hint,#walk-status{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;pointer-events:none;font-size:var(--game-hint)}#hint{padding:11px 24px;background:#fcfaf5ef;border:1px solid #c8c5b8;border-radius:5px 9px 7px 4px;box-shadow:0 4px 0 #aba99c55;transition:opacity .55s,translate .55s}#hint span{color:#627e9f;margin-right:9px}#hint.gone{opacity:0;translate:0 8px}#walk-status{color:#465e4d;text-shadow:0 1px #fff9}#arrival{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;width:max-content;max-width:calc(100% - 32px);background:linear-gradient(100deg,#fffdf7,#eeece5);border:1px solid #c0bdae;border-radius:5px 13px 7px 12px;padding:15px 18px;box-shadow:0 5px 0 #9b855a66,0 12px 35px #4b5c4120;animation:arrive .28s ease-out}#arrival h1{font-size:var(--game-sign);font-weight:600;margin:0}#arrival p{font-size:var(--game-hint);margin:3px 0 0;color:#667258}.door-mark{font-size:var(--game-title);color:#9b7950}#enter{font-size:var(--game-button);border:1px solid #455d79;border-radius:9px 6px 10px 8px;padding:10px 22px;min-height:48px;white-space:nowrap;background:linear-gradient(150deg,#6681a4,#486482);color:#ffffff;box-shadow:0 4px 0 #344b66;transition:transform .12s,box-shadow .12s}#enter:active{transform:translateY(3px);box-shadow:0 1px #344b66}#enter span{margin-left:12px}#skip{position:absolute;bottom:35px;right:28px;min-height:44px;padding:8px 15px;color:#536749;background:#fff5ddc0;border:1px solid #b8b295;border-radius:8px;z-index:3;font-size:var(--game-hint)}#loading{position:absolute;inset:0;background:linear-gradient(#f5f2df,#e1e6d2);overflow:hidden;transition:opacity .8s;z-index:2;pointer-events:none}#loading.reveal{opacity:0}#loading>span{position:absolute;top:42%;left:0;right:0;text-align:center;font-size:var(--game-title);letter-spacing:.3em;color:#68816a}.mist-ridge{position:absolute;width:160%;height:50%;left:-30%;top:70%;border-radius:50% 55% 0 0;background:#b5c2a329;transform:rotate(-8deg)}.ridge-back{top:62%;transform:rotate(7deg);background:#b5c2a320}#fade{position:absolute;inset:0;background:#c39062;opacity:0;pointer-events:none;transition:opacity .45s;z-index:6}#fade.on{opacity:1}#fallback{position:absolute;inset:110px 20px auto;margin:auto;max-width:540px;padding:25px;background:#fcfaf5;border:1px solid #bfae87;border-radius:13px;box-shadow:0 5px #a08d6250}#fallback h1{font-size:var(--game-title);margin:0 0 10px}#fallback a{display:block;padding:18px 0;border-top:1px solid #d5c7a7;min-height:60px;font-size:var(--game-sign)}#fallback small{display:block;font-size:var(--game-hint);color:#78816a}@keyframes arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(max-width:600px){header{top:16px;left:15px;right:15px}.brand{gap:5px;font-size:var(--game-sign)}nav{gap:5px}nav>button,summary{width:44px;height:44px;border-radius:12px}.brand-mark{display:none}#hint{bottom:35px;padding:10px 17px}#arrival{bottom:28px;gap:10px;padding:13px 12px;max-width:calc(100% - 24px)}#arrival p{max-width:180px}.door-mark{display:none}#enter{padding:9px 14px}#enter span{margin-left:4px}#skip{right:15px;bottom:85px}#canvas:after{box-shadow:inset 0 0 70px 10px #f7f3dd50}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.reduced *,body.reduced *:before,body.reduced *:after{animation:none!important;transition:none!important}

#audio[aria-pressed=false] .sound-waves{display:none}#audio .muted{stroke-width:2}

/* 上线！: expressive display lettering, with quiet ink-blue controls. */
.brand{color:#34465c;gap:0}.launch-wordmark{display:flex;align-items:center;height:57px;font-family:"Launch Title",var(--game-font);font-weight:400;font-size:48px;letter-spacing:-.035em;line-height:1;transform:rotate(-3deg)}.launch-bang{display:inline-block;color:#d49a46;transform-origin:50% 85%;margin-left:2px;animation:bang-hello 6s ease-in-out 1.2s infinite}.brand:hover .launch-wordmark{transform:rotate(-5deg)}
@keyframes bang-hello{0%,82%,100%{transform:translateY(0) rotate(0)}87%{transform:translateY(-5px) rotate(8deg)}92%{transform:translateY(0) rotate(-4deg)}96%{transform:rotate(2deg)}}
nav>button,summary{border-radius:14px}#hint{border-radius:12px}#arrival{border-radius:16px}.opening-name{font-family:"Launch Title",var(--game-font);font-weight:400;letter-spacing:.08em!important}
@media(max-width:600px){.launch-wordmark{height:46px;font-size:39px}}

/* Playback indication follows actual media/context state, never just the desired preference. */
#audio{position:relative}#audio[data-audio-state=blocked] .muted,#audio[data-audio-state=loading] .muted{display:none}#audio[data-audio-state=blocked]:after{content:'';position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#b98232}

#settings #motion,#settings #flat{width:100%;display:flex;justify-content:space-between;gap:16px;padding:9px 12px}#settings svg{width:20px;height:20px;flex-shrink:0}
