:root{--gold:#ecd3a0;--gold2:#bb8d44;--ink:#f5ead1;--dark:#0b171f;--line:#d6b57848;--muted:#d8d4c6}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111b24;color:var(--ink);font-family:"Noto Serif CJK KR","Noto Serif CJK SC","Malgun Gothic",serif}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f3d185;outline-offset:3px}[hidden]{display:none!important}#stage{position:fixed;inset:0}canvas{width:100%;height:100%;display:block;touch-action:none}#veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,#02080e24 100%)}#loader{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#111b24;z-index:20}#loader span{font-size:44px;letter-spacing:.1em;color:var(--gold)}#loader p{font-size:14px;color:#bfcacb}progress{height:4px;width:240px;accent-color:var(--gold);margin:auto}header{position:fixed;left:0;right:0;top:0;z-index:5;padding:17px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;pointer-events:none;background:linear-gradient(#0a121b55,transparent)}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;text-shadow:0 2px 10px #000a}.moon{display:grid;place-items:center;width:38px;height:43px;border:1px solid var(--line);border-radius:18px 18px 5px 5px;color:var(--gold);font-size:24px;background:#09182080}.brand b{font-size:24px;font-weight:500;letter-spacing:.12em}.brand small{display:block;font:9px system-ui,sans-serif;letter-spacing:.18em;color:#efe3c9b0;margin-top:4px}.top-controls{display:flex;gap:8px;align-items:center}.languages{display:flex;gap:0;padding:3px;background:#1123319c;border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(10px)}.languages button{background:none;border:0;color:#d5d8d1;padding:7px 11px;font-size:13px;white-space:nowrap;border-radius:20px}.languages .selected{background:#d8b77d29;color:#ffebbc}.circle{border:1px solid var(--line);width:38px;height:38px;border-radius:50%;background:#122432aa;backdrop-filter:blur(10px);color:#f4dfb7;font:20px system-ui,sans-serif;flex-shrink:0}.pill{border:1px solid var(--line);padding:9px 13px;border-radius:22px;background:#11212baa;color:var(--ink);font-size:13px;white-space:nowrap}select{max-width:180px;border:1px solid var(--line);background:#122432b8;color:#efe2bf;border-radius:22px;padding:10px 12px;font-size:12px}option{background:#182630}#cover{position:fixed;z-index:4;left:50%;bottom:max(32px,env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center;width:min(94vw,640px);text-shadow:0 2px 16px #000;pointer-events:none}#cover p{font-size:15px;letter-spacing:.03em;margin:0 0 7px}#freeGuide{display:block;margin:0 0 13px;font:11px/1.35 system-ui,sans-serif;color:#f0e5cdbd;white-space:nowrap}#cover button{pointer-events:auto}.gold{border:1px solid #f3d79b;border-radius:28px;background:linear-gradient(#f1dbaa,#c6974e);color:#342410;box-shadow:0 6px 28px #211a0940;padding:12px 24px;font-weight:600;font-size:15px;white-space:nowrap}.gold:disabled{opacity:.4;cursor:wait}#begin{min-width:194px;min-height:48px}#begin span{margin-left:12px}#rotateHint{display:block;margin-top:8px;font-size:11px}#touchMove{position:fixed;z-index:7;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,48px);gap:7px;padding:8px;border:1px solid var(--line);border-radius:18px;background:#0b1a27a8;backdrop-filter:blur(10px)}#touchMove button{width:48px;height:48px;border:1px solid #e7ca8b66;border-radius:14px;background:#183041dc;color:#f5ddb0;font:22px system-ui,sans-serif}#touchMove button.pressed{background:#d4ad6852;transform:scale(.96)}#dock{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:9px;align-items:center;background:#0b1a27b8;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:35px;padding:9px 12px;max-width:calc(100vw - 20px);box-shadow:0 8px 26px #0002}.route{width:310px;min-width:120px;text-align:center}.route>span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:#ead9b6;padding:0 8px}.dots{display:flex;justify-content:center;gap:9px;margin-top:7px}.dots button{width:7px;height:7px;border:0;padding:0;background:#e4d1b044;border-radius:50%}.dots button.active{background:#eac885;box-shadow:0 0 6px #d7b27466}#toast{position:fixed;z-index:30;bottom:96px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:20px;background:#122b36dd;color:#e6e9df;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s;max-width:92vw;text-align:center}#toast.visible{opacity:1}#recipientForm{position:fixed;z-index:12;left:50%;top:57%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr auto;gap:9px;width:min(460px,82vw);padding:0;text-align:center}#recipientForm label{grid-column:1/-1;color:#473019;text-shadow:0 1px #fff7;font-size:14px;margin:0 0 5px}#recipientForm input{width:100%;min-width:0;padding:11px 15px;background:#fff6dfa8;color:#3a2918;border:1px solid #8c65264d;border-radius:22px;font-size:15px}#recipientForm .gold{padding:10px 19px;font-size:14px}#letterDialog,#creditsDialog{position:fixed;inset:0;z-index:22;background:#08111add;backdrop-filter:blur(5px);display:grid;place-items:center;overflow:auto;padding:20px}#letterDialog{align-items:start}.letter-scroll{width:min(660px,92vw);margin:auto;padding:10px 0 20px}.letter-paper{position:relative;width:100%;box-shadow:0 24px 75px #0008;border-radius:10px;overflow:hidden;background:#efe6d2}.letter-paper>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}.letter-copy{position:absolute;top:6%;left:8%;right:9%;height:57%;overflow:auto;color:#4e3823}.letter-kicker{letter-spacing:.16em;font-size:15px;color:#90703e}.letter-copy h1{font-size:clamp(19px,3vw,28px);line-height:1.35;margin:8px 0 23px}.letter-copy p{font-size:clamp(13px,2.2vw,18px);line-height:1.9;margin:0 0 15px;overflow-wrap:anywhere}.salutation{font-weight:600}.letter-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:15px}.outline{border:1px solid #f3dba15c;background:transparent;padding:12px 24px;border-radius:28px;color:#f0dfb9;font-size:15px}#creditsDialog article{width:min(640px,94vw);background:#101e29;border:1px solid var(--line);border-radius:18px;padding:30px;max-height:90vh;overflow:auto}.eyebrow{font:10px system-ui,sans-serif;letter-spacing:.21em;color:#d3b67e}#creditsDialog h1{font-size:31px;color:#f0ddba;margin:9px 0 20px}.credit{padding:12px 0;border-top:1px solid #e0c5901a}.credit strong{font-size:13px;color:#d1b078;font-weight:500}.credit p{font-size:14px;color:#cfdbdb;margin:7px 0 0;line-height:1.7}#replayFromCredits{margin-top:24px}
@media(max-width:760px){header{padding:11px 13px}.brand b{font-size:19px}.brand small{font-size:7px}.moon{display:none}.top-controls{gap:4px}.top-controls .circle{width:32px;height:32px;font-size:16px}#track{max-width:120px;font-size:10px;padding:8px}#qualityBtn{display:none}.languages button{font-size:11px;padding:6px 8px}#dock{gap:6px;padding:8px}.route{width:200px}.route>span{font-size:10px}.dots{gap:9px}.pill{font-size:11px;padding:8px 10px}#dock .circle{width:32px;height:32px}#home{display:none}#cover p{font-size:13px}#recipientForm{grid-template-columns:1fr;gap:6px}#recipientForm .gold{justify-self:center}#recipientForm input{font-size:13px;padding:9px 13px}.letter-copy{height:58%}.letter-copy h1{margin-bottom:14px}.letter-copy p{margin-bottom:11px}#creditsDialog article{padding:24px}}
@media(max-aspect-ratio:4/3){#stage{top:50%;bottom:auto;transform:translateY(-50%);height:56.25vw;min-height:0}#cover{bottom:calc(50% - 28.125vw - 112px)}#dock{bottom:calc(50% - 28.125vw - 80px)}header{background:transparent}#veil{background:none}.top-controls{flex-wrap:wrap;justify-content:flex-end;max-width:62%}#recipientForm{width:min(420px,76vw)}#recipientForm label{font-size:11px}#recipientForm input{padding:6px 12px;font-size:12px}.letter-paper{border-radius:8px}#toast{bottom:25px}}
@media(hover:hover) and (pointer:fine){#touchMove{display:none!important}}
@media(pointer:coarse){#cover{left:auto;right:12px;transform:none;width:calc(100vw - 178px);text-align:right}#cover p{display:none}#freeGuide{white-space:normal;font-size:10px}#touchMove{grid-template-columns:repeat(2,48px)}}
@media(prefers-reduced-motion:reduce){#toast{transition:none}#touchMove button{transition:none}}

/* Letter fits as a whole sheet; only unusually long messages scroll inside the blank region. */
.letter-scroll{width:min(660px,92vw,calc((100dvh - 125px)*.75));padding:0 0 12px}.letter-copy h1{margin-bottom:16px}.letter-copy p{font-size:clamp(12px,1.25vw,16px);line-height:1.78;margin-bottom:12px}

/* Final build: readable long-form letter and a static WebGL fallback. */
#fallback{position:absolute;inset:0;z-index:40;display:grid;place-content:center;text-align:center;padding:28px;background:radial-gradient(circle at 50% 35%,#18334a,#071018 74%);color:#f4e5c4}#fallback b{font-size:clamp(34px,8vw,64px);font-weight:500;letter-spacing:.12em;color:var(--gold)}#fallback p{max-width:620px;margin:22px auto 8px;font-size:16px;line-height:1.8}#fallback small{color:#c8d1d2;font-size:14px;line-height:1.7}
.letter-copy{top:5%;height:61%;scrollbar-color:#a88454 transparent}.letter-copy h1{font-size:clamp(18px,2.7vw,27px);margin:7px 0 16px}.letter-copy p{font-size:clamp(12px,1.45vw,16px);line-height:1.72;margin-bottom:12px}#letterSign{white-space:pre-line;text-align:right;margin-top:18px}
html[lang=zh] .letter-copy{height:65%}html[lang=zh] .letter-copy h1{font-size:clamp(18px,2.35vw,25px);margin-bottom:12px}html[lang=zh] .letter-copy p{font-size:clamp(11px,1.1vw,13px);line-height:1.52;margin-bottom:7px}html[lang=zh] #letterSign{margin-top:10px}

/* Touch movement remains compact while every hit target is at least 44px. */
#touchMove{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:6px}
#touchMove button{width:44px;height:44px;border-radius:13px;font-size:21px}
#touchMove button[data-move=forward]{grid-column:2;grid-row:1}
#touchMove button[data-move=left]{grid-column:1;grid-row:2}
#touchMove button[data-move=back]{grid-column:2;grid-row:2}
#touchMove button[data-move=right]{grid-column:3;grid-row:2}
@media(pointer:coarse){#touchMove{grid-template-columns:repeat(3,44px)}}
@media(max-width:760px){#home{display:block!important}#dock{gap:4px;padding:6px}.route{width:min(145px,30vw);min-width:86px}.dots{gap:4px}.dots button{width:6px;height:6px}}
@media(max-aspect-ratio:4/3){body.free-explore #stage{inset:0;top:0;bottom:0;width:100vw;height:100dvh;min-height:100dvh;transform:none}body.free-explore #cover{bottom:max(16px,env(safe-area-inset-bottom))}body.free-explore #freeGuide{white-space:nowrap;font-size:10px}body.free-explore #rotateHint{display:none!important}body.free-explore #veil{background:radial-gradient(ellipse at 50% 45%,transparent 55%,#02080e24 100%)}}
@media(pointer:coarse){body.free-explore #cover{left:auto;right:12px;width:calc(100vw - 194px);min-width:120px}body.free-explore #begin{width:100%;min-width:0;padding-left:10px;padding-right:10px}}

/* Entry cover and compact live appearance controls. */
#loader{background:linear-gradient(#07121ba8,#07121b80),url('assets/ui/cover-gallery-original-v1.png') center/cover no-repeat}
#loader span,#loader p,#loader progress{filter:drop-shadow(0 2px 8px #000)}
#coverVisual{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(#07121b12,#07121b30),url('assets/ui/cover-gallery-original-v1.png') center/cover no-repeat;opacity:1;transition:opacity 1.15s ease}
#coverVisual.departing{opacity:0}
#coverVisual[hidden]{display:none}
html[lang=ko] #coverVisual{background-image:linear-gradient(#07121b12,#07121b30),url('assets/ui/cover-gallery-ko-title-v1.png')}
.brand{gap:0}.brand b{letter-spacing:.09em}
#appearancePanel{position:fixed;z-index:9;right:18px;top:68px;width:min(260px,calc(100vw - 28px));padding:12px;border:1px solid var(--line);border-radius:15px;background:#112331eb;backdrop-filter:blur(14px);box-shadow:0 12px 32px #0007;font:12px system-ui,sans-serif}
#appearancePresets{display:flex;gap:5px;margin-bottom:10px}
#appearancePresets button{flex:1;border:1px solid #c6a36477;border-radius:17px;padding:7px 3px;background:#263b47;color:#f0dfbe;font-size:11px}
#appearancePresets button.selected{background:#cfa763;color:#221b14}
#appearancePanel label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0}
#appearancePanel input[type=range]{width:154px;accent-color:#d5ac64}
#appearanceReset{width:100%;padding:7px;margin-top:4px;font-size:11px}
#freeDock{position:fixed;z-index:7;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#0b1a27d9;border:1px solid var(--line);border-radius:22px;padding:7px 12px;font:11px system-ui,sans-serif;white-space:nowrap}
#creditsDialog #freeFromCredits{margin-top:24px;margin-right:8px}
@media(max-width:760px){#appearancePanel{top:92px;right:8px}#appearanceToggle{font-size:11px;padding:7px 9px}#freeDock{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));transform:none;max-width:calc(100vw - 190px);white-space:normal}#freeDockLabel{display:none}}
@media(prefers-reduced-motion:reduce){#coverVisual{transition:none}}
/* The film supplies all cover copy; only the entrance remains interactive. */
body.cover-active header,body.cover-active #appearancePanel{display:none!important}
#coverVisual{background:linear-gradient(#07121b12,#07121b30),url('assets/ui/cover-gallery-original-v1.png') center/cover no-repeat}
#coverVisual video{display:block;width:100%;height:100%;object-fit:cover}
#coverHint,#freeGuide,#rotateHint{display:none!important}
#loader{background:transparent;pointer-events:none}
#loader span,#loader p,#loader progress{display:none}
body.cover-active #cover{left:50%;right:auto;bottom:max(36px,env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;min-width:0;text-align:center}
@media(max-aspect-ratio:4/3){body.cover-active #stage{inset:0;top:0;bottom:0;width:100vw;height:100dvh;min-height:100dvh;transform:none}}
/* Public controls are intentionally compact; device quality still auto-selects. */
.languages button{min-width:35px;padding:7px 8px;font-weight:600}
#appearanceToggle,#appearancePanel,#qualityBtn{display:none!important}
#begin{display:grid;place-items:center;width:78px;height:78px;min-width:78px;min-height:78px;padding:0;border-radius:50%;box-shadow:0 0 0 6px #f6d7972b,0 8px 34px #211a0980}
#begin::before{content:"";display:block;width:0;height:0;margin-left:5px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:19px solid #4b3010}
#begin:disabled::before{opacity:.55}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.cinematic header,body.cinematic #dock{opacity:.13;transition:opacity .35s ease}
body.cinematic header:hover,body.cinematic header:focus-within,body.cinematic #dock:hover,body.cinematic #dock:focus-within{opacity:1}
#creditsDialog .credit-group{margin:26px 0 7px;color:#efdab0;font-size:15px;font-weight:500;letter-spacing:.12em}
#creditsDialog .credit-group:first-child{margin-top:0}
#creditsDialog .credit{display:grid;grid-template-columns:minmax(120px,42%) 1fr;gap:14px;align-items:start;padding:9px 0}
#creditsDialog .credit strong,#creditsDialog .credit p{margin:0;line-height:1.5}
@media(max-width:520px){#creditsDialog .credit{grid-template-columns:1fr;gap:3px}}
.letter-copy strong{font-weight:700;color:#53351d}
#letterSign{white-space:pre-line}
#photoOpen{position:fixed;z-index:8;transform:translate(-50%,33px);padding:6px 12px;background:#102431dc;box-shadow:0 3px 15px #0008;font-size:12px}
body.cover-active #photoOpen{display:none!important}
#photoDialog{border:0;padding:16px;background:transparent;color:var(--ink);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:visible}
#photoDialog:not([open]){display:none}
#photoDialog::backdrop{background:#071019e8;backdrop-filter:blur(12px)}
#photoFull{display:block;width:auto;height:auto;max-width:min(94vw,1672px);max-height:calc(100dvh - 52px);object-fit:contain;border:5px solid #a77c39;box-shadow:0 24px 80px #000c}
#photoClose{position:absolute;z-index:1;right:4px;top:4px;width:42px;height:42px;border:1px solid #f0dbab;border-radius:50%;background:#102431ed;color:#fff3d6;font:30px/1 system-ui,sans-serif}
@media(max-width:520px){#photoOpen{font-size:11px;padding:5px 9px}#photoDialog{padding:8px}#photoFull{border-width:3px;max-height:calc(100dvh - 30px)}#photoClose{right:-2px;top:-2px;width:38px;height:38px}}