:root{color-scheme:dark;--paper:#e8dfcc;--gold:#c5a46a;--line:#c1a47438;--red:#dc765f;--safe:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body{margin:0;background:#080e14;color:var(--paper);font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif;min-height:100svh;position:relative}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #e5c98d;outline-offset:4px}button:disabled{cursor:wait;opacity:.5}a{color:inherit}[hidden]{display:none!important}
.backdrop{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,#080e1460,#080e14ed 74%),url('assets/hogwarts-letter.webp') left 45% center/cover no-repeat;filter:saturate(.72)}.dust{position:fixed;inset:0;pointer-events:none;opacity:.2;z-index:-1;background:radial-gradient(1px 1px at 12% 30%,#b6cae7,transparent),radial-gradient(1px 1px at 67% 18%,#ded7b5,transparent);background-size:230px 330px;animation:dust 35s linear infinite}@keyframes dust{to{background-position:0 -330px}}
.top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px 32px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:.2em;font-size:16px}.brand small{display:block;font:9px/2.2 Georgia,serif;letter-spacing:.23em;color:#acb6c1}.crest{border:1px solid #c5a46a80;width:36px;height:43px;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);background:#c5a46a12;color:var(--gold);font:23px Georgia}.top-actions{display:flex;align-items:center;gap:10px;font:11px system-ui,sans-serif;color:#aab4ba}.top-actions button{border:1px solid #ffffff28;color:#c8ced1;border-radius:3px;background:#0b121bab;padding:8px 10px;font:11px system-ui,sans-serif}
.desktop-intro{position:fixed;top:18%;left:7%;width:39%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.27em;color:#d6bd88}.desktop-intro h1{font-size:clamp(34px,4vw,64px);line-height:1.38;font-weight:400;letter-spacing:.08em;text-shadow:0 3px 35px #000;margin:22px 0}.desktop-intro p{color:#d1d2ce;line-height:2;font-size:15px;text-shadow:0 2px 8px #000}.side-caption{display:block;margin-top:32px;font-size:11px;letter-spacing:.2em;color:#b3b9bc}
main{width:min(500px,44vw);margin:0 7% 0 auto;padding:110px 0 68px;min-height:100svh;display:flex;align-items:center}.panel{width:100%;animation:arrive .35s ease both}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.kicker{font:10px/1.5 system-ui,sans-serif;letter-spacing:.24em;color:var(--gold)}.hero-title{font-size:38px;font-weight:400;letter-spacing:.08em;line-height:1.4;margin:13px 0 18px}.lede{font-size:15px;line-height:1.9;color:#c0c8ca;margin:0 0 20px}.hero-art{display:block;width:100%;height:250px;object-fit:cover;object-position:center 62%;border:1px solid var(--line);mask-image:linear-gradient(black 85%,transparent)}.rule-line{font:12px/1.7 system-ui,sans-serif;color:#a5afb7;margin:15px 0 22px}.rule-line strong{color:#ddc899;font-weight:500}
.primary,.secondary{width:100%;border:1px solid #c6a56b80;padding:15px 18px;min-height:49px;background:linear-gradient(135deg,#d3ba83,#b6975c);color:#201a11;border-radius:2px;font-weight:700;letter-spacing:.1em;transition:filter .2s,transform .2s}.primary:hover{filter:brightness(1.09)}.primary:active{transform:translateY(1px)}.secondary{margin-top:10px;background:#0e1825ad;color:#c8bd9e;border-color:#a4936b45;font-weight:400}.micro{font:11px/1.7 system-ui,sans-serif;color:#8a99a2;margin:13px 0 0;text-align:center}
.letter{background:linear-gradient(120deg,#ece2c8,#d8c8a2);color:#332b20;padding:30px 28px;box-shadow:0 15px 70px #0009;border:1px solid #f3e4c2;position:relative}.letter:before{position:absolute;content:"";inset:8px;border:1px solid #7358302b;pointer-events:none}.letter .kicker{color:#6b5733}.letter h2{font-weight:500;font-size:25px;line-height:1.5;margin:20px 0}.letter p{font-size:14px;line-height:1.95}.letter .sign{text-align:right;color:#557057;margin:23px 0}.letter .primary{background:#3b4c3f;color:#f1e6ca;border-color:#27382a}
.chapter-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font:11px system-ui,sans-serif;color:#b5bfc4}.chapter-top span:last-child{color:var(--gold)}.steps{display:flex;gap:5px;margin-bottom:16px}.steps i{height:2px;flex:1;background:#ffffff15}.steps i.done{background:#c3a46a}.steps i.current{background:#efe1bc}.film{position:relative;overflow:hidden;aspect-ratio:16/9;background:#03070b;border:1px solid #a8b6c529;box-shadow:0 10px 40px #0005}.film video,.film img{width:100%;height:100%;object-fit:cover;display:block}.film video{position:absolute;inset:0}.film:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 40px #0005}.scene-location{position:absolute;left:12px;bottom:10px;z-index:1;font:9px system-ui,sans-serif;letter-spacing:.16em;color:#e9e7de;text-shadow:0 1px 6px #000}.scene-copy{font-size:14px;line-height:1.95;color:#bdc8cd;margin:20px 0}.scene-title{font-size:26px;line-height:1.4;margin:14px 0 10px;font-weight:500}.inventory{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px}.inventory span{padding:5px 9px;border:1px solid #c5a46a24;background:#c5a46a09;font:10px system-ui,sans-serif;color:#baa982}
.choice-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:19px 0 14px}.choice-header h2{font-size:23px;font-weight:500;line-height:1.4;margin:0}.clock{flex:0 0 54px;width:54px;height:54px;position:relative;display:grid;place-items:center;font:20px Georgia;color:#e4c387}.clock svg{position:absolute;inset:0;transform:rotate(-90deg);width:54px;height:54px}.clock .track{stroke:#ffffff16}.clock .ring{stroke:#c5a46a;stroke-linecap:round}.clock.urgent{color:#f4a18c}.clock.urgent .ring{stroke:var(--red)}.pressure{height:2px;background:#ffffff10;margin-bottom:18px}.pressure i{display:block;height:100%;background:var(--gold);transform-origin:left}.pressure.urgent i{background:var(--red)}.choices{display:grid;gap:9px}.option{background:linear-gradient(90deg,#17202af5,#111924e0);border:1px solid #bfab7838;color:#e3dfd1;text-align:left;display:flex;align-items:center;gap:13px;padding:15px 14px;font-size:15px;min-height:54px;transition:border-color .2s,background .2s}.option:hover{border-color:#c5a46a;background:#27303d}.option span{font:11px Georgia;color:#c5a46a;display:grid;place-items:center;border:1px solid #c5a46a40;flex:0 0 25px;height:25px;border-radius:50%}.option.selected{border-color:#d9bf86;background:#3b3a30}.decision-hint{font:11px/1.8 system-ui,sans-serif;color:#82909a;margin:12px 0 0}.reaction{padding:25px 0 0}.reaction p{font-size:15px;line-height:1.95;color:#d9d5c7;margin:0 0 22px}.status{color:#c8ac76;font:11px system-ui,sans-serif;letter-spacing:.08em;display:block;margin-bottom:15px}
/* Footage remains unobscured: no added silhouette or frost layer. */
.guide{padding:26px 24px;border:1px solid var(--line);background:#111b26f2}.guide h2{font-size:25px;font-weight:500;margin:12px 0 14px}.guide p{font-size:14px;line-height:1.9;color:#c3cbd0}.guide ol{padding-left:22px;margin:22px 0;color:#c5cbd0;font:13px/2.4 system-ui,sans-serif}.retained{color:#bba572;font:11px/1.7 system-ui,sans-serif;margin-bottom:20px}.copy-url{width:100%;border:1px solid #ffffff20;border-radius:2px;background:#071018;color:#c2cccf;font:11px monospace;padding:10px;display:none;margin:10px 0}.copy-url.visible{display:block}.guide .notice{font:11px/1.8 system-ui,sans-serif;color:#8a9aa6;margin-bottom:0}
.death{background:radial-gradient(ellipse at center,#32181fbb,#0a1018ee 70%);padding:32px 25px;border:1px solid #8f504b55;text-align:center}.death-mark{font-size:45px;color:#b86f65;margin-bottom:13px}.death h2{font-weight:400;font-size:30px;margin:12px 0}.death .cause{color:#cc9d8c;font-size:12px;letter-spacing:.2em}.death p{font-size:15px;line-height:1.95;color:#bfb5b2}.death .primary{margin-top:15px;background:linear-gradient(120deg,#b6a387,#8e7a5c)}.death-small{font:11px system-ui,sans-serif;color:#7f8b92;margin:15px 0}
.ending{padding:28px 24px;background:#101c27f2;border:1px solid var(--line)}.ending-symbol{font-size:38px;color:#d9c390;margin:8px 0 18px}.ending h2{font-size:32px;font-weight:400;margin:12px 0 18px}.ending p{font-size:15px;line-height:1.95;color:#c2cbd1}.ending dl{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;padding:19px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}.ending dt{font:11px system-ui,sans-serif;color:#8d9ca5}.ending dd{margin:8px 0 0;color:#dbc799;font-size:17px}.ending .record{font-size:12px;color:#9daeb8;line-height:1.85;margin:20px 0}.site-foot{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font:10px system-ui,sans-serif;color:#687982;letter-spacing:.08em;pointer-events:none}.site-foot span{margin-left:12px;color:#8da29f}#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,10px);background:#e4dcc8;color:#222820;padding:11px 18px;font:12px system-ui,sans-serif;box-shadow:0 8px 30px #0008;z-index:50;opacity:0;pointer-events:none;transition:.2s;width:max-content;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.top{padding:16px 18px}.brand{font-size:13px;gap:9px}.crest{width:28px;height:35px;font-size:19px}.brand small{font-size:8px}.top-actions{gap:6px}.top-actions button{font-size:10px;padding:7px}.desktop-intro{display:none}.backdrop{background:linear-gradient(#070e1477,#080e14dd 60%,#080e14 95%),url('assets/hogwarts-letter.webp') center top/100% auto no-repeat}.hero-open .backdrop{background:linear-gradient(#080e1408 18%,#080e140a 57%,#080e14 88%),url('assets/hogwarts-letter.webp') center top/cover no-repeat;filter:none}main{width:100%;margin:0;padding:92px 20px calc(70px + var(--safe));min-height:100svh;align-items:center}.hero-open main{align-items:flex-end;padding-top:54svh}.hero-panel .hero-art{display:none}.hero-title{font-size:30px;text-shadow:0 2px 25px #000;line-height:1.4;margin-top:10px}.hero-panel .lede{font-size:13px;line-height:1.8;max-width:320px;margin-bottom:12px}.hero-panel .kicker{font-size:10px}.hero-panel .rule-line{font-size:11px;margin:12px 0 17px}.scene-title{font-size:24px}.scene-copy{font-size:14px;margin:16px 0}.film{margin-left:-20px;margin-right:-20px;border-left:0;border-right:0;aspect-ratio:16/9}.choice-header h2{font-size:22px}.letter{padding:27px 23px}.guide{padding:24px 20px}.ending{padding:25px 20px}.site-foot{bottom:17px;font-size:9px}.hero-open .site-foot{bottom:12px}.top-actions #modeLabel{display:none}}
@media(min-width:761px)and(max-height:780px){main{padding-top:88px;padding-bottom:48px}.hero-art{height:190px}.hero-title{font-size:31px}.film{max-height:220px}.scene-copy{margin:12px 0}.option{padding:12px 14px}.inventory{margin:10px 0}.scene-title{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:760px){.hero-open .backdrop{background-size:100% auto;background-color:#080e14}.hero-open main{padding-top:53svh}}