:root{--bg:#050b0c;--fg:#ecf1e9;--muted:#8daba1;--accent:#84edbd;--line:rgba(167,212,191,.16);color-scheme:dark;font-family:Inter,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}body>canvas{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:1}.atmosphere{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 67% 40%,transparent 20%,rgba(5,11,12,.08) 60%,rgba(5,11,12,.5)),linear-gradient(90deg,rgba(5,11,12,.9),transparent 50%)}
.masthead{position:fixed;z-index:4;left:4.5%;right:4.5%;top:4.3vh;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--fg);font-size:19px;font-weight:650;letter-spacing:.13em}.brand img{width:38px;height:38px;object-fit:contain}.brand-sub{display:block;font-size:7px;letter-spacing:.26em;font-weight:400;color:var(--muted);margin-top:6px}.edition{display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.19em;color:var(--muted)}#title{color:var(--fg)}.edition-line{height:13px;width:1px;background:var(--line)}.connection{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.06em;color:var(--muted)}#dot{width:5px;height:5px;border-radius:50%;background:#cba976}#dot.ok{background:var(--accent);box-shadow:0 0 9px #84edbd60}
.story{position:fixed;z-index:3;top:29%;left:7%;width:35%;pointer-events:none;transition:opacity .5s}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:9px;letter-spacing:.20em;font-weight:500}.small-line{width:23px;height:1px;background:var(--accent)}h1{font-size:clamp(44px,4.6vw,94px);font-weight:400;letter-spacing:-.055em;line-height:1.05;margin:26px 0 24px}h1>span{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:#a7e8c5;letter-spacing:-.045em}.story p{font-size:clamp(13px,1.03vw,18px);font-weight:300;line-height:1.8;max-width:290px;color:var(--muted);margin:0}.story-rule{height:1px;background:var(--line);width:50px;margin:28px 0 23px}.chapter{display:flex;gap:17px;align-items:center}.chapter>span{font:italic 25px Georgia,serif;color:#7ba68f}.chapter>div{display:flex;flex-direction:column;gap:7px}.chapter strong{font-size:10px;font-weight:400;letter-spacing:.02em}.chapter div>span{font-size:9px;color:var(--muted);letter-spacing:.04em}
.scene-label{position:fixed;z-index:3;top:18%;left:49%;right:10%;display:flex;gap:14px;align-items:center;color:var(--muted);font-size:8px;letter-spacing:.15em;pointer-events:none}.cross{font:300 18px monospace;color:#67937d}.scene-line{height:1px;flex:1;background:var(--line)}.scene-bottom{position:fixed;z-index:3;bottom:22%;left:49%;display:flex;align-items:center;gap:14px;font-size:7px;color:#618476;letter-spacing:.16em;pointer-events:none}.scene-status{position:fixed;right:5%;top:45%;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.scene-status>span{font-size:7px;color:var(--muted);letter-spacing:.12em}.scene-status strong{font-size:25px;font-weight:300;letter-spacing:-.05em}.scene-status .status-tick{height:22px;border-left:1px solid #598b75;margin-bottom:8px}#tracking-state{max-width:100px;line-height:1.8;text-align:right}
.invitation{position:fixed;z-index:3;bottom:12%;left:49%;display:flex;align-items:center;gap:15px;transition:opacity .5s}.invite-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #345849;border-radius:50%;font-size:20px;color:var(--accent)}.invitation>div{display:flex;flex-direction:column;gap:8px}.invitation strong{font-size:13px;font-weight:400}.invitation div>span{font-size:10px;color:var(--muted)}#guide{position:fixed;bottom:12%;left:49%;z-index:3;display:flex;gap:25px;transition:opacity .5s}#guide>span{display:flex;align-items:flex-start;gap:10px;max-width:205px;transition:color .4s}#guide .step{font:italic 19px Georgia;color:#668c78}#guide em{display:block;font-size:10px;line-height:1.5;font-weight:400;font-style:normal}#guide small{display:block;font-size:9px;color:var(--muted);line-height:1.65;margin-top:5px}#guide .on em{color:var(--accent)}#guide .on .step{color:var(--accent)}.hidden{opacity:0!important;pointer-events:none!important}
.footer{position:fixed;bottom:4.8vh;left:4.5%;right:4.5%;display:flex;justify-content:space-between;z-index:3;font-size:8px;letter-spacing:.17em;color:#678176;pointer-events:none}.footer-slash{padding:0 12px;color:#365046}.controls{position:fixed;z-index:5;bottom:3.5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:7px;padding:5px;background:rgba(9,19,17,.9);backdrop-filter:blur(14px);transition:opacity .4s}.controls button{display:flex;gap:7px;align-items:center;justify-content:center;background:transparent;border:0;border-radius:4px;color:#9eb5a9;font-size:10px;padding:9px 10px;cursor:pointer;white-space:nowrap}.controls button:hover{background:#ffffff09;color:var(--fg)}.controls button[aria-pressed=true]{color:var(--accent);background:#84edbd08}.controls svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;stroke-width:1.3}.control-divider{height:16px;width:1px;background:var(--line);margin:0 3px}.controls .icon-button{width:30px;padding:8px;font-size:13px}.controls.idle{opacity:0;pointer-events:none}.controls:focus-within{opacity:1;pointer-events:auto}
#toast{position:fixed;z-index:5;top:12vh;left:50%;transform:translate(-50%,-6px);opacity:0;transition:opacity .3s,transform .3s;border:1px solid var(--line);background:#091610ee;padding:12px 22px;border-radius:5px;font-size:12px;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#debug{display:none;position:fixed;z-index:6;right:16px;bottom:80px;font:11px/1.7 monospace;white-space:pre;color:#c9e9d6;background:#081a11e8;border:1px solid #3d6951;padding:14px}.debug #debug{display:block}.clean .story,.clean .masthead,.clean .scene-label,.clean .scene-bottom,.clean .scene-status,.clean .invitation,.clean #guide,.clean .footer,.clean .controls{opacity:0;pointer-events:none}.clean .controls:focus-within{opacity:1;pointer-events:auto}
dialog{background:#0b1613;color:var(--fg);border:1px solid #345045;border-radius:12px;padding:35px;max-width:470px;width:calc(100% - 40px)}dialog::backdrop{background:#010807b8;backdrop-filter:blur(8px)}dialog h2{font-size:28px;font-weight:400;letter-spacing:-.035em;margin:22px 0 16px}dialog p{color:var(--muted);font-size:13px;line-height:1.7}dialog .close-help{position:absolute;right:15px;top:10px;color:var(--muted);border:0;background:none;font-size:25px;cursor:pointer}dl{display:grid;grid-template-columns:30px 1fr;gap:13px 15px;padding:20px 0;border-block:1px solid var(--line);margin:25px 0}dt{font:11px monospace;text-align:center;color:var(--accent)}dd{margin:0;font-size:12px;color:#c0d1c7}dialog .help-note{font-size:11px}#fatal{position:fixed;z-index:10;inset:25% 25%;background:#101c17f5;border:1px solid #557663;padding:35px;border-radius:12px}#fatal p{line-height:1.7;color:var(--muted)}#fatal button{padding:12px;border:1px solid #689982;border-radius:5px;background:#193429;color:var(--fg);cursor:pointer}
@media(min-width:1800px){.story p{max-width:380px}.eyebrow,.edition{font-size:11px}.scene-label{font-size:10px}.chapter strong{font-size:13px}.chapter div>span{font-size:11px}.scene-bottom{font-size:9px}#guide em{font-size:12px}#guide small{font-size:11px}#guide>span{max-width:240px}.invitation strong{font-size:16px}.invitation div>span{font-size:12px}}
@media(max-width:1050px){.edition>span:last-child,.edition-line{display:none}.story{left:5%;width:37%}h1{font-size:5.6vw}.scene-status{right:3%}.scene-label{left:47%;right:8%}.scene-bottom{left:47%;font-size:6px}#invite,#guide{left:47%}#guide{gap:15px;right:5%}#guide>span{max-width:160px}.footer>span:last-child{display:none}.controls{left:auto;right:4%;transform:none}.story p{max-width:230px}.eyebrow{font-size:7px}}
@media(max-width:700px){.masthead{top:25px;left:6%;right:6%}.brand{font-size:15px;gap:9px}.brand img{width:30px;height:30px}.brand-sub{font-size:6px}.edition{display:none}.connection{font-size:9px}.story{top:15%;left:7%;width:85%}.eyebrow{font-size:7px}h1{font-size:34px;line-height:1.04;margin:15px 0}h1 br{display:none}h1 br:after{content:' '}.story p{font-size:11px;max-width:80%;line-height:1.65}.story-rule,.chapter,.scene-label,.scene-bottom,.scene-status{display:none}#invite,#guide{left:8%;right:8%;bottom:15%;justify-content:center}#guide{gap:20px}#guide em{font-size:9px}#guide small{font-size:8px}.footer{bottom:3%;justify-content:center;font-size:6px}.controls{left:50%;right:auto;transform:translateX(-50%);bottom:7%;gap:0;padding:4px}.controls button{font-size:9px;padding:8px}#quality-button{display:none}#fatal{inset:20px;max-height:60vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}} 

/* Keep the portrait composition readable without cropping long words. */
@media(max-width:700px){h1{font-size:29px;line-height:1.1;letter-spacing:-.045em}h1 br{display:block}h1 br:after{content:none}.story{top:13%}.story p{font-size:10px;max-width:95%}#guide{display:none}.invitation{bottom:16%}#toast{top:10%;max-width:90%;font-size:10px}body.clean .atmosphere{opacity:.35}}

@media(min-width:701px){#guide{bottom:8.3%}}

#appearance-dialog{max-width:510px}fieldset{border:0;padding:0;margin:23px 0}legend{font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:11px}.choices{display:flex;gap:8px}.choices button{flex:1;background:#11221c;border:1px solid #294437;color:#b3c6ba;padding:12px 8px;border-radius:5px;font-size:12px;cursor:pointer}.choices button[aria-pressed=true]{border-color:#99c8a8;color:#e7f3e8;background:#213d2d}.choices button:hover{border-color:#92c3a4}.skin-choices button{flex:none;width:34px;height:34px;border-radius:50%;background:var(--swatch)!important;border:3px solid #0b1613}.skin-choices button[aria-pressed=true]{outline:1px solid #d7e6d3;outline-offset:2px}.apply-style{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 17px;color:#e9f5df;background:#294b38;border:1px solid #598366;border-radius:5px;cursor:pointer;font-size:12px}#skin-options[hidden]{display:none}
@media(max-width:700px){.controls #motion-button,.controls #quality-button{display:none}.controls button{padding:8px 6px;font-size:9px}}