@font-face{font-family:Bricolage;src:url(assets/BricolageGrotesque.ttf);font-display:swap;font-weight:100 900}:root{color-scheme:dark;--night:#13323a;--panel:#23444b;--line:#49626a;--text:#f2ecdf;--muted:#b7cdca;--accent:#f2ecdf;--action:#13323a;--status:#a6d8bf}:root[data-theme=light]{color-scheme:light;--night:#f2ecdf;--panel:#e6ddcc;--line:#c5bca9;--text:#30372f;--muted:#65705f;--accent:#13323a;--action:#f2ecdf;--status:#28634f}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--text);font:17px/1.5 Bricolage,Arial,sans-serif;transition:background .25s,color .25s}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}header,footer{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px 4vw}header{height:76px}.small{font-size:12px;letter-spacing:1.6px;color:var(--muted)}.settings{display:flex;gap:10px;align-items:center}.settings button{height:38px;min-width:40px;padding:6px 11px;border:1px solid var(--line);border-radius:5px;font-size:14px}.settings svg{display:block}.stage{position:relative;min-height:630px;height:calc(100svh - 131px);isolation:isolate;overflow:hidden}.title{text-align:center;position:absolute;top:12px;width:100%;z-index:2;pointer-events:none;transition:opacity .4s,transform .6s}.title p{font-size:12px;letter-spacing:3px;color:var(--muted);margin:0 0 5px}h1{font-size:clamp(65px,9vw,134px);line-height:1;letter-spacing:-.035em;margin:0;font-weight:850}h1 span{color:var(--accent)}.cast{position:absolute;inset:100px 0 115px;transition:top .7s,bottom .7s}#scene{display:block;width:100%;height:100%;opacity:0;transition:opacity .4s}.scene-ready #scene{opacity:1}.fallback{position:absolute;height:100%;width:100%;object-fit:contain;transition:opacity .3s}.scene-ready .fallback{opacity:0;pointer-events:none}.monkey-target{position:absolute;top:13%;height:70%;width:18%;border-radius:38%;touch-action:manipulation}.monkey-target:nth-child(1){left:23%}.monkey-target:nth-child(2){left:41%}.monkey-target:nth-child(3){left:59%}.monkey-target:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}.monkey-target:hover{background:transparent}.bottom{text-align:center;position:absolute;z-index:3;bottom:15px;left:0;right:0;transition:opacity .3s,transform .5s}.bottom p{font-size:18px;margin:0 0 16px}.bottom nav{display:flex;gap:14px;justify-content:center;margin-bottom:20px}.bottom nav button{padding:10px 26px;border:1px solid var(--accent);border-radius:4px;font-weight:750;background:var(--accent);color:var(--action)}.bottom nav button+button{background:transparent;color:var(--text);border-color:var(--line)}.bottom nav button:hover{transform:translateY(-2px)}footer{font-size:12px;color:var(--muted);height:55px}.fly{position:absolute;top:39%;left:61%;width:13px;height:12px;pointer-events:none;display:flex;align-items:center;z-index:4;animation:flight 22s infinite linear}.fly b{background:#17211f;width:4px;height:7px;border-radius:50%;position:absolute;left:5px;z-index:2}.fly i{background:#f6f1e780;width:7px;height:4px;border-radius:50%;transform-origin:right;animation:wing .06s infinite alternate}.fly i:last-child{transform-origin:left}@keyframes wing{to{transform:scaleY(.25)}}@keyframes flight{0%,100%{transform:translate(0,0)}18%{transform:translate(-135px,40px)}31%{transform:translate(-110px,-18px)}46%{transform:translate(50px,65px)}65%{transform:translate(95px,-35px)}83%{transform:translate(-40px,-55px)}}.portrait-copy{position:absolute;left:57%;top:50%;width:min(36%,430px);transform:translateY(-50%);z-index:4;animation:copy-in .65s .15s both}.portrait-copy[hidden]{display:none}.portrait-copy h2{font-size:clamp(35px,4.2vw,64px);letter-spacing:-.025em;line-height:1.06;margin:14px 0 22px;text-wrap:balance}.portrait-copy>p:not(.small){color:var(--muted);font-size:19px;line-height:1.65}.portrait-copy button{font-size:15px;border-bottom:1px solid var(--line);padding:8px 0;margin-top:18px}.is-selected .title,.is-selected .bottom{opacity:0;pointer-events:none;transform:translateY(15px)}.is-selected .cast{top:0;bottom:0}.is-selected .fly{opacity:0}.is-selected #cast-targets{visibility:hidden}@keyframes copy-in{from{opacity:0;translate:20px 0}to{opacity:1;translate:0 0}}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;max-width:720px;width:calc(100% - 32px);padding:42px;max-height:85svh}dialog::backdrop{background:#05120cbd}.close{position:absolute;right:12px;top:8px;font-size:30px;line-height:1;padding:7px}dialog h2{font-size:38px;line-height:1.1;margin:0 0 22px;letter-spacing:-1px}dialog p{color:var(--muted)}dialog .label{color:var(--accent);letter-spacing:2px;font-size:12px}dialog img{width:100%;border-radius:5px}body:has(dialog[open]){overflow:hidden}@media(max-width:650px){header{padding:16px 5vw;height:68px}.small{font-size:11px;letter-spacing:1px}.title{top:23px}.title p{font-size:10px;letter-spacing:1.6px}h1{font-size:15.5vw}.stage{height:calc(100svh - 123px);min-height:570px}.cast{inset:90px -8% 140px}.bottom{bottom:18px}.bottom p{font-size:16px}.bottom nav button{font-size:15px;padding:10px 18px}footer{padding-inline:5vw}.fly{top:37%}.is-selected .cast{inset:-4% 0 35%}.portrait-copy{left:7%;top:auto;bottom:22px;width:86%;transform:none;animation-duration:.4s}.portrait-copy h2{font-size:35px;margin:8px 0 12px}.portrait-copy>p:not(.small){font-size:16px;line-height:1.5;margin-block:8px}.portrait-copy button{margin-top:5px}.portrait-copy .small{margin:0}dialog{padding:37px 24px}dialog h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.scene-ready .fallback{visibility:hidden}.scene-fallback.is-selected .fallback{opacity:.3}

/* Reveal the live cast only after its final initial framing is rendered. */
.fallback{visibility:hidden}
.scene-fallback .fallback{visibility:visible}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 48% 55% at 50% 48%,rgba(166,216,191,.14) 0%,rgba(166,216,191,.055) 45%,transparent 78%)}
:root[data-theme=light] .stage::before{background:radial-gradient(ellipse 48% 55% at 50% 48%,rgba(19,50,58,.16) 0%,rgba(19,50,58,.065) 45%,rgba(19,50,58,0) 78%)}

.crew-navigation{display:flex;align-items:center;gap:18px;margin-top:22px}.portrait-copy .crew-navigation button{margin:0;padding:8px 0}.portrait-copy #back{margin-top:16px}.steam-note{display:block;font-size:12px;color:var(--muted);margin-top:4px}.bottom>p{padding-inline:20px;font-size:clamp(14px,1.4vw,18px)}.first-job{border-block:1px solid var(--line);padding:24px 0;margin-top:28px}.first-job h3{font-size:30px;margin:6px 0 16px;letter-spacing:-.025em}.first-job .job-punchline{color:var(--text);font-weight:650;margin-bottom:0}.next-stop{font-size:15px}@media(max-width:650px){.crew-navigation{margin-top:12px;gap:16px}.portrait-copy #back{margin-top:8px}.bottom nav{margin-bottom:14px}}

/* The tiny guest keeps its original silhouette, with a reachable invisible hit area. */
.fly{width:44px;height:44px;margin:-16px 0 0 -16px;padding:0;pointer-events:auto;display:grid;place-items:center;border-radius:50%;touch-action:manipulation}
.fly:focus-visible{animation-play-state:paused}
.fly-mark{position:relative;width:13px;height:12px;display:flex;align-items:center}
.fly-portrait{position:absolute;left:calc(30% - 150px);top:calc(46% - 150px);width:300px;height:300px;display:grid;place-items:center;pointer-events:none;z-index:3}
.fly-portrait[hidden],.crew-navigation[hidden]{display:none}
.is-selected .fly{pointer-events:none}
.is-fly-selected .cast{opacity:0;pointer-events:none}
.cast{transition:top .7s,bottom .7s,opacity .35s}
@media(max-width:650px){.fly-portrait{left:calc(50% - 150px);top:calc(31% - 150px)}}

.fly{cursor:default}.fly-portrait img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(-8deg)}