:root{color:#f4f0e9;background:#080b15;font-family:Georgia,Times New Roman,serif;font-synthesis:none;text-rendering:optimizeLegibility;--gold: #e9c88b;--rose: #c88da4;--lavender: #ada5d6;--ivory: #f4f0e9;--night: #080b15}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px;background:radial-gradient(circle at 50% 35%,rgba(70,56,94,.15),transparent 46%),linear-gradient(155deg,#101427,#080b15 55%,#050710)}button{font:inherit}#stage{position:fixed;inset:0;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(2,3,9,.38) 76%,rgba(1,2,7,.72));box-shadow:inset 0 0 12vw #00000073}.start-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 48%,#10142775,#080b15d4 74%);transition:opacity 1.2s ease,visibility 1.2s}.start-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.eyebrow,.scene-kicker,.final-number,.sound-note,.controls,.portrait-note{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.25em}.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px;color:#e9c88bb8;font-size:10px}.eyebrow span{width:26px;height:1px;background:currentColor;opacity:.45}.start-overlay h1{margin:0;max-width:800px;font-weight:400;font-size:clamp(38px,7vw,82px);line-height:.98;letter-spacing:-.035em;text-shadow:0 0 45px rgba(173,165,214,.12)}.start-overlay h1 em{color:var(--gold);font-weight:400}.start-overlay>p{margin:28px 0 34px;color:#f4f0e98f;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.primary-button,.ghost-button{position:relative;border:1px solid rgba(233,200,139,.48);color:var(--ivory);background:#e9c88b0a;cursor:pointer;transition:background .35s,border-color .35s,transform .35s,box-shadow .35s}.primary-button{min-width:164px;padding:15px 24px;border-radius:100px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase}.button-star{position:absolute;right:18px;color:var(--gold)}.primary-button:hover,.primary-button:focus-visible,.ghost-button:hover,.ghost-button:focus-visible{transform:translateY(-2px);border-color:var(--gold);background:#e9c88b1c;box-shadow:0 10px 38px #e9c88b1a,inset 0 0 20px #e9c88b0a;outline:none}.sound-note{margin-top:19px;color:#f4f0e947;font-size:8px}.scene-copy{position:absolute;z-index:3;inset:auto 20px 15vh;text-align:center;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity 1.1s ease,transform 1.1s ease}.scene-copy.is-visible{opacity:1;transform:none}.scene-kicker{margin:0 0 12px;color:var(--gold);font-size:9px}.scene-copy h2{margin:0;font-size:clamp(34px,6vw,68px);font-weight:400;line-height:1;letter-spacing:-.025em;text-shadow:0 0 38px rgba(233,200,139,.18)}.scene-subtitle{margin:14px 0 0;color:#f4f0e994;font-size:15px;font-style:italic}.finale{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity 1.4s ease,transform 1.4s ease,visibility 1.4s;pointer-events:none}.finale.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}.final-number{margin:0 0 20px;color:var(--gold);font-size:10px}.finale h2{margin:0;font-size:clamp(42px,7.5vw,88px);font-weight:400;letter-spacing:-.04em}.finale>p:not(.final-number):not(.signature){margin:15px 0 0;color:#f4f0e9b3;font-size:clamp(18px,3vw,29px);font-style:italic;line-height:1.35}.final-rule{display:flex;align-items:center;width:min(260px,55vw);gap:10px;margin:27px 0 18px;color:var(--gold)}.final-rule:before,.final-rule:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(233,200,139,.5))}.final-rule:after{transform:scaleX(-1)}.signature{margin:0 0 28px;color:var(--gold);font-size:15px;letter-spacing:.06em}.ghost-button{padding:11px 18px;border-radius:100px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.14em}.ghost-button span{margin-left:8px;color:var(--gold)}.controls{position:absolute;z-index:8;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s;color:#f4f0e975;font-size:8px}.controls.is-visible{opacity:1;visibility:visible}.controls button{width:34px;height:34px;padding:0;border:1px solid rgba(244,240,233,.15);border-radius:50%;background:#080b1566;color:var(--gold);cursor:pointer}.sound-off,.controls.is-muted .sound-on{display:none}.controls.is-muted .sound-off{display:inline}.progress-track{flex:1;height:1px;overflow:hidden;background:#f4f0e924}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--lavender),var(--gold));box-shadow:0 0 8px var(--gold)}.portrait-note{position:absolute;z-index:6;left:50%;bottom:12vh;transform:translate(-50%,8px);width:min(88vw,500px);padding:11px 14px;border:1px solid rgba(233,200,139,.18);border-radius:4px;background:#080b159e;color:#f4f0e98a;text-align:center;font-size:8px;line-height:1.7;opacity:0;visibility:hidden;transition:opacity .8s,transform .8s,visibility .8s}.portrait-note.is-visible{opacity:1;visibility:visible;transform:translate(-50%)}.portrait-note code{color:var(--gold);text-transform:none;letter-spacing:0}@media(max-width:600px){.scene-copy{bottom:14vh}.finale{justify-content:flex-start;padding-top:13vh}.finale h2{font-size:clamp(42px,15vw,64px)}.portrait-note{bottom:10vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.2s!important;animation-duration:.01ms!important}}