@font-face{font-family:DM;src:url('./type-fonts/dm-sans.ttf') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:Goth;src:url('./type-fonts/pirata-one.ttf') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#272822;--ink:#f0ead9;--muted:#b8b8ab;--lilac:#c3afd0;--blue:#aacddf;--red:#db928b;--accent:var(--lilac);font:15px/1.5 DM,Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,p{margin:0}h1{font:52px/1.02 Goth,serif;letter-spacing:-.012em}h1 em{font-style:normal;color:var(--accent)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#app{position:relative;isolation:isolate;max-width:500px;min-height:100svh;margin:auto;background:var(--bg)}#stage{position:relative;min-height:max(850px,100svh);isolation:isolate;overflow:clip}#scene-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}.site-header{position:absolute;inset:0 0 auto;z-index:20;padding:calc(18px + env(safe-area-inset-top,0px)) 25px 12px;display:flex;justify-content:space-between;align-items:center;height:84px;pointer-events:none}.site-header>*{pointer-events:auto}.brand{font:24px/1 Goth}.brand span{color:var(--lilac)}.quiet{font-size:11px;min-height:44px;padding:10px 0;color:var(--muted)}.quiet:hover{color:var(--ink)}#motion-toggle{display:flex;align-items:center;gap:8px;min-width:54px;font-size:10px}.pause-symbol{font-size:16px}.eyebrow{font-size:10px;letter-spacing:.08em;color:var(--accent)}
.welcome-screen,.cinema-screen{padding:111px 25px 70px;position:relative;min-height:max(850px,100svh)}.login-intro{position:relative;z-index:2;pointer-events:none}.login-intro h1{margin-top:19px;max-width:285px;font-size:clamp(43px,12.2vw,55px)}.reaction-line{display:block}.login-intro h1 em{font-size:1.15em;line-height:1.1}#login-aside{margin-top:18px;font-size:12px;color:var(--muted);max-width:160px}
/* One anchor for every close-up: choosing a drink never changes the stage. */
.character-slot,.cinema-character{position:absolute;top:230px;right:8px;width:186px;height:270px;pointer-events:none}.tiny-bat{position:absolute;top:146px;right:27px;width:32px;height:22px;stroke:var(--lilac);fill:none;opacity:.25;transform:rotate(12deg);pointer-events:none}
.login-panel{position:absolute;top:520px;left:25px;right:25px;z-index:3;visibility:hidden}#signin-form{position:relative}.fridge-form-heading{font-size:10px;color:var(--muted);margin-bottom:7px}.member-picker{padding:0;margin:0 0 18px;border:0;display:flex;gap:26px}.member-picker label{position:relative}.member-picker input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.member-picker span{display:flex;align-items:center;gap:9px;min-height:39px;color:#a8aa9f;font-size:14px}.member-picker span::before{content:'';width:15px;height:15px;border:1px solid #8c8f7e;border-radius:50%;box-shadow:inset 0 0 0 4px var(--bg)}.member-picker input:checked+span{color:var(--ink)}.member-picker input:checked+span::before{background:var(--lilac);border-color:var(--lilac)}.member-picker input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.password-field{display:block;font-size:11px;color:var(--lilac)}.password-wrap{display:flex;border-bottom:1px solid #a5aa925e;margin-top:5px}.password-wrap:focus-within{border-color:#ddc7e7}.password-wrap input{width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font-size:16px;min-height:45px;padding:5px 8px 8px 0;outline:none}.password-wrap input::placeholder{color:#969a8c;font-size:14px}#show-password{font-size:11px;min-width:44px;min-height:44px;color:#cbbbcc}.entry-submit{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:14px;min-height:53px;width:100%;background:#eee7d7;color:#272822;padding:14px 18px;font-size:14px;isolation:isolate;transform-style:preserve-3d}#signin-form .entry-submit{margin-top:24px}.entry-submit:hover{background:#f7edda}.button-arrow{font-size:23px;line-height:18px}#form-error{font-size:11px;line-height:1.4;color:#ffc9bf;margin:8px 0 0}.reaction-replay{position:absolute;bottom:28px;left:25px;color:#9fa492;font-size:10px}
.can-choices{position:absolute;top:533px;left:28px;right:28px;z-index:4;visibility:hidden;perspective:900px}.can-shelf{display:grid;grid-template-columns:1fr 1fr;gap:26px}.can-button{display:flex;flex-direction:column;align-items:center;padding:0;position:relative;min-width:0;transform-style:preserve-3d}.drawn-can{display:block;width:82px;height:145px;transform:rotate(-7deg);filter:drop-shadow(0 12px 7px #080e0b66)}.red .drawn-can{transform:rotate(7deg)}.drawn-can svg{width:100%;height:100%;overflow:visible}.can-body{stroke:#141b1b;stroke-width:1.5}.can-name{font:22px/1.1 Goth;color:var(--blue);margin-top:18px;min-height:26px;text-align:center}.can-name b{font:12px DM}.red .can-name{color:#dfaaa4}.can-caption{font-size:10px;color:#aeb4a4;margin-top:7px}.can-button:hover .drawn-can{filter:drop-shadow(0 15px 11px #afcbe526)}.can-button.red:hover .drawn-can{filter:drop-shadow(0 15px 11px #cf877f26)}.choice-heading{position:absolute;inset:113px 25px auto;max-width:285px;pointer-events:none}.choice-heading h1{font-size:52px;max-width:235px;margin:14px 0;line-height:1.06}.choice-heading p:last-child{font-size:12px;color:var(--muted);max-width:200px}.choice-hint{position:absolute;top:778px;left:25px;right:25px;font-size:10px;color:#b6bbaa;text-align:center}.button-ripple{position:absolute;z-index:3;top:710px;left:50%;width:100px;height:12px;border:1px solid #d7c6e1;border-radius:50%;opacity:0;pointer-events:none}
.flight-can{position:absolute;z-index:12;width:82px;height:145px;pointer-events:none;transform-origin:center}.flight-can svg{width:100%;height:100%;overflow:visible}#branch-caption{position:relative;z-index:2;pointer-events:none}#branch-heading{font-size:51px;margin-top:16px;max-width:260px}#branch-heading em{display:block}.entry-footer{position:absolute;inset:auto 25px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:10;font-size:9px;color:#a4aa98;min-height:44px}.entry-footer .quiet{font-size:10px}.entry-footer #scene-status{margin:auto}body[data-scene=signin] .entry-footer{top:54px;bottom:auto;left:auto}body[data-scene=signin] #scene-status{display:none}body[data-scene=choice] .entry-footer,body[data-scene=opening] .entry-footer{display:none}
body[data-scene=blue],body[data-scene=anniversary],body[data-scene=handoff]{--accent:var(--blue)}body[data-scene=red],body[data-scene=red-world]{--accent:var(--red)}#anniversary-copy{position:relative;z-index:2;pointer-events:none}#anniversary-heading{font-size:56px;margin:15px 0 20px}#love-lines p{font-size:13px;line-height:1.65;color:#d4d8cf;max-width:180px}#anniversary-actions{position:absolute;bottom:32px;left:25px;right:25px;text-align:center;z-index:5}body[data-scene=anniversary] .entry-footer,body[data-scene=handoff] .entry-footer{display:none}.landing-actions{position:absolute;left:25px;right:25px;bottom:32px;z-index:4}#red-landing{background:linear-gradient(transparent,#101729db 40%,#101729ed);left:0;right:0;bottom:0;padding:60px 27px 40px}#red-landing>p{font:32px/1 Goth;color:#efe4dc;margin:6px 0 9px}#red-landing .eyebrow{font-size:8px;color:#bcc9e7}#red-landing .game-status{font-size:10px;color:#c2c9d4;display:block;max-width:270px;margin-bottom:18px}#red-landing>div{display:flex;align-items:center;gap:15px}#red-landing .entry-submit{font-size:11px;min-height:46px;width:auto;flex:1;background:#ded6e4}#red-landing .quiet{font-size:10px;white-space:nowrap}body[data-scene=red-world] .entry-footer{display:none}body[data-scene=red-world] .site-header{background:linear-gradient(#101929a6,transparent)}
/* A brief portal flare hides the red prop edit. Blue uses its matching pose. */
#dream{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden}
#dream .haze{position:absolute;left:50%;top:58%;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;border-radius:50%;background:radial-gradient(circle,#f5f1ea 0%,#e9dff0 30%,#cfdbe8 55%,rgba(207,219,232,0) 70%);opacity:0;transform:scale(.18)}
#dream i{position:absolute;bottom:38%;width:14px;height:12px;background:#cbb6d5;opacity:0;clip-path:polygon(14.29% 0,42.86% 0,42.86% 16.67%,57.14% 16.67%,57.14% 0,85.71% 0,85.71% 16.67%,100% 16.67%,100% 50%,85.71% 50%,85.71% 66.67%,71.43% 66.67%,71.43% 83.33%,57.14% 83.33%,57.14% 100%,42.86% 100%,42.86% 83.33%,28.57% 83.33%,28.57% 66.67%,14.29% 66.67%,14.29% 50%,0 50%,0 16.67%,14.29% 16.67%)}
#dream i:nth-child(2){left:18%}#dream i:nth-child(3){left:30%;transform:scale(.7)}#dream i:nth-child(4){left:42%;transform:scale(1.3)}#dream i:nth-child(5){left:52%}#dream i:nth-child(6){left:61%;transform:scale(.8)}#dream i:nth-child(7){left:70%;transform:scale(1.15)}#dream i:nth-child(8){left:80%;transform:scale(.6)}#dream i:nth-child(9){left:88%}
#ink-veil{position:absolute;top:100px;left:-15%;right:-15%;height:540px;z-index:15;pointer-events:none;opacity:0;transform:scale(.8)}#ink-veil i{position:absolute;inset:10%;border-radius:43% 57% 54% 46%;background:#74383f}#ink-veil i:nth-child(2){inset:4%;border:8px solid #c7867e;background:#854b52;transform:rotate(22deg)}#ink-veil i:nth-child(3){inset:0;border:2px solid #e5a899;background:none;transform:rotate(-17deg)}
#world-wash{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:0;overflow:hidden;background:#adc8d4;clip-path:ellipse(0% 0% at 60% 65%)}#world-wash i{position:absolute;width:90vw;height:90vw;border-radius:46% 54% 64% 36%;border:1px solid #edf1db77;left:20%;top:35%;transform:rotate(30deg)}#world-wash i:nth-child(2){left:-30%;top:5%;background:#c4b8d14d}#world-wash i:nth-child(3){left:10%;top:60%;background:#e8e5ca33}#world-wash i:nth-child(4){left:65%;top:-30%;background:#dfeced33}
.arrival-loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:30px;text-align:center}.arrival-loader svg{width:206px;height:126px;stroke:#c6b696;stroke-width:1.5;fill:none;margin-bottom:15px}.capy-body,.capy-ear{fill:#675f47}.arrival-loader ellipse{fill:#d2bea1;stroke:none}.capy-rail{opacity:.4}.sleeping-capy{transform-origin:140px 100px;animation:capy-breathe 2.6s ease-in-out infinite}.sleep-mark{stroke:#c8b1d2;animation:capy-sleep 2.6s ease-in-out infinite}.arrival-loader p{font:25px/1.2 Goth;color:var(--lilac)}.arrival-loader>span{font-size:11px;color:var(--muted);margin:12px 0 25px}.media-loading{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);z-index:30;padding:10px 15px;border-radius:9px;background:#1a1d18ed;display:flex;align-items:center;gap:10px;width:max-content;max-width:90%;font-size:10px;box-shadow:0 0 0 1px #bbc0a623}.buffer-bead{width:5px;height:5px;background:var(--accent);border-radius:50%;animation:capy-sleep 1s ease infinite}#retry-media{min-height:28px;color:var(--accent);font-size:10px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;background:#e9e4d4;color:#25261f;border-radius:9px;padding:12px 18px;font-size:12px;max-width:90%}.noscript{position:fixed;z-index:100;inset:20px;background:#eee4d4;color:#222;padding:24px;height:max-content}body.motion-paused *{animation-play-state:paused!important}
@keyframes capy-breathe{50%{transform:scaleY(1.028)}}@keyframes capy-sleep{50%{opacity:.35}}
@media(min-width:601px){.login-intro h1{font-size:55px}}
@media(max-width:360px){.site-header{padding-left:20px;padding-right:20px}.brand{font-size:22px}.welcome-screen,.cinema-screen{padding-left:20px;padding-right:20px}.login-intro h1{font-size:44px}.character-slot,.cinema-character{top:220px;right:4px;width:166px;height:270px}.login-panel{left:20px;right:20px;top:500px}.can-choices{left:20px;right:20px;top:520px}.can-shelf{gap:14px}.choice-heading{left:20px;max-width:250px}.choice-heading h1{font-size:45px}.can-name{font-size:20px}#anniversary-heading{font-size:51px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}