:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;--accent:#c6ffae;--line:#ffffff29;background:#121614;color:#f3f4e9}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(16px,3vw,44px)}
header{min-height:64px;border-bottom:1px solid var(--line);background:#151a17;z-index:2}
.brand{font-weight:650}.brand span{color:var(--accent);margin-right:7px}.brand small{color:#a8b3a8;font-size:inherit;font-weight:400}
button,.action{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:9px 13px;background:#1d2520;color:inherit;text-decoration:none}
button:hover,button[aria-pressed=true],button[aria-current=true]{border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,#tour:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.room{position:relative;flex:1;min-height:0;isolation:isolate;background:radial-gradient(ellipse at 65% 40%,#313d35,#141916 76%)}
#viewport,.veil,#tour,#markers{position:absolute;inset:0}
#viewport canvas{display:block;width:100%;height:100%}
.veil{pointer-events:none;background:linear-gradient(90deg,#101511f2,#10151190 19%,#10151100 54%),linear-gradient(0deg,#101511f5,#10151100 20%)}
#tour{overflow:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}
#tour section{height:100%}
#markers{pointer-events:none}
.marker{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);width:23px;height:23px;padding:0;border:0;border-radius:50%;background:none}
.marker::after{content:'';position:absolute;inset:8px;border:1px solid #f3f9f0b0;border-radius:50%;background:#1827254d;box-shadow:0 0 6px #0006;transition:transform .16s,background .16s}
.marker:hover::after,.marker:focus-visible::after{transform:scale(1.55);background:#d4efe0}
[hidden]{display:none!important}
.story{position:absolute;left:clamp(16px,4vw,64px);top:50%;transform:translateY(-50%);width:min(30vw,390px);pointer-events:none}
.story button{pointer-events:auto}#counter,#file-kind{color:var(--accent);font:600 .78rem ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase}
h1{font-size:clamp(2.1rem,4vw,4.5rem);line-height:1;letter-spacing:-.06em;margin:.26em 0}
p{line-height:1.55;color:#c6cec3}.action{display:inline-block;background:var(--accent);color:#122017;border-color:var(--accent);font-weight:650}.action:hover{color:#122017;background:#e5ffdb}
footer{position:absolute;inset:auto 0 0;font-size:.87rem;pointer-events:none}
#hint{color:#d4dfd2}nav{display:flex;gap:5px;pointer-events:auto}nav button{font-size:.82rem}#load{position:absolute;top:14px;right:16px;background:#161d18;padding:8px 12px;border-radius:7px;pointer-events:none}
.orbit #tour{visibility:hidden}.orbit .story{display:none}.orbit .veil{background:linear-gradient(0deg,#101511d9,transparent 15%)}
@media(max-width:730px){
  header{min-height:54px}.brand small{display:none}.story{top:auto;bottom:79px;transform:none;width:calc(100% - 32px)}
  .story p{margin:6px 0 9px;font-size:.88rem}.story h1{margin:.18em 0}.veil{background:linear-gradient(0deg,#101511 8%,#101511c9 28%,transparent 62%)}
  footer{flex-direction:column;align-items:flex-start;gap:5px;padding-block:8px}#hint{font-size:.72rem}
}
#viewport{overflow:hidden;touch-action:none}
.veil,.story,footer,#markers,#load{transition:opacity .24s ease}
.screen-focus #tour,.screen-focus .story,.screen-focus footer,.screen-focus #markers,.screen-focus #load{opacity:0;pointer-events:none}
.screen-focus .story button{pointer-events:none}
.screen-focus .veil{opacity:.08}
#viewport:focus-visible{outline:0}
#focus-controls{position:absolute;z-index:5;bottom:clamp(14px,3vw,34px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;border-radius:12px;background:#262923d9;white-space:nowrap;box-shadow:0 4px 20px #30201328}
#focus-controls[hidden],#paper-link[hidden]{display:none}
#focus-controls span{font-size:.75rem;padding-inline:5px;color:#e7e1d7}
#back{background:#343c35;border-color:#ffffff3b}
#paper-link{font-weight:600;font-size:.85rem}
@media(max-width:580px){#focus-controls span{display:none}}
#load{font-size:.73rem;color:#c8d2c9;background:#1e2926d9}
@media(prefers-reduced-motion:reduce){.veil,.story,footer,#markers,#load{transition:none}}
.room{background:radial-gradient(ellipse at 48% 26%,#faf9f7,#e6e5e3 76%)}
.veil{background:linear-gradient(90deg,#efeeebee,#efeeebba 17%,transparent 42%),linear-gradient(0deg,#e6e5e2ef,transparent 15%)}
.story{color:#252c2c}
.story p,#hint{color:#384341}
#counter{color:#425d56}
.story .action{background:#2d4640;color:#fff;border-color:#2d4640}
nav button{background:#f8f5f1;color:#333d3b;border-color:#aeb8b4}
nav button:hover,nav button[aria-current=true]{background:#2d4640;color:#fff;border-color:#2d4640}
.marker::after{border-color:#e4f1ebd9;background:#131d1caa}
.orbit .veil{background:linear-gradient(0deg,#e6e5e2da,transparent 15%)}
@media(max-width:730px){.veil{background:linear-gradient(0deg,#efeeeb 8%,#efeeebd4 29%,transparent 60%)}}
.asset-credits{position:absolute;z-index:3;top:73px;left:clamp(16px,4vw,64px);max-width:min(85vw,320px);font-size:.75rem;color:#384341}
.asset-credits summary{cursor:pointer;width:max-content}
.asset-credits[open]{padding:.55rem .75rem;border:1px solid #aeb8b4;border-radius:6px;background:#f8f5f1}
.asset-credits p{color:inherit;margin:.55rem 0 0}
.asset-credits a{color:#274d49}
body:has(.screen-focus) .asset-credits{display:none}

#paper-pages{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.monitor-window{position:absolute;top:0;left:0;z-index:4;transform-origin:0 0;display:grid;grid-template-rows:45px 1fr;overflow:hidden;background:#11151d;border:2px solid #181c23;box-shadow:inset 0 0 0 1px #e5eff02c;color:white}
.monitor-window[hidden],#paper-turn[hidden]{display:none}
.monitor-window nav{display:flex;align-items:center;padding:0 10px;background:#2b2731;font-size:18px;gap:12px}
.monitor-window nav span{margin-right:auto}
.monitor-window nav a{color:#eee}
.monitor-window nav button{padding:2px 10px}
.monitor-window iframe{border:0;width:100%;height:100%;background:#fff}
#paper-turn{display:flex;align-items:center;gap:8px}
#paper-turn button{padding:5px 10px}
#paper-count{font-size:.78rem}
@media(max-width:600px){#focus-controls{max-width:96vw;flex-wrap:wrap}}

.monitor-aperture{position:absolute;inset:0;z-index:4;pointer-events:none}
.monitor-window{pointer-events:auto;border-color:#191c20;border-width:1px;box-shadow:none}
.monitor-window nav{background:#22242b}

.monitor-window{padding-block:var(--glass-bleed,0px)}

header .portfolio-link{order:2;color:inherit;font-size:.85rem}