@font-face{font-family:Studio;src:local('Helvetica Neue');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#10110f;color:#f2f2e7;font-family:Studio,Arial,sans-serif}button,a,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #d1fa88;outline-offset:5px}[hidden]{display:none!important}#screen{height:100dvh;min-height:560px;position:relative;overflow:hidden;background:#10110f}#stage{position:absolute;inset:0;background:#10110f;transition:opacity .22s}#stage iframe{position:absolute;inset:0;border:0;width:100%;height:100%;pointer-events:none}#stage iframe[data-active=false]{opacity:0;visibility:hidden}#stage iframe[data-active=true]{opacity:1;visibility:visible}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 38%,transparent 80%,rgba(0,0,0,.22))}#topline{position:absolute;z-index:4;top:max(28px,env(safe-area-inset-top));left:40px;right:40px;display:flex;align-items:center;gap:24px;font-size:12px;letter-spacing:.16em}.wordmark{color:inherit;text-decoration:none;font-size:13px;letter-spacing:.2em;font-weight:700;display:flex;gap:12px;align-items:center}.brand-dot{width:8px;height:8px;border-radius:50%;background:#c0ef87}#identity{margin-left:auto;letter-spacing:.08em}#rehearsal{border:1px solid #92968b80;border-radius:30px;padding:7px 11px;font-size:9px;color:#d0d0c6}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:600;color:#b9c3ae}#titleCard{position:absolute;left:9vw;top:19%;max-width:800px}h1,h2,p{margin:0}h1{font-size:clamp(60px,7.6vw,124px);line-height:.99;letter-spacing:-.065em;font-weight:500;margin:26px 0}em{font-style:normal;color:#c0ef87}#introCopy{font-size:clamp(18px,2vw,26px);line-height:1.5;color:#b8bdb1}#entry{position:absolute;left:9vw;bottom:8%;font-size:13px;max-width:680px}#readiness{color:#c9cdbf;margin-bottom:16px;line-height:1.5}.entry-actions{display:flex;gap:12px;flex-wrap:wrap}button,#waitlist{background:transparent;border:1px solid #606456;border-radius:5px;padding:15px 22px;color:#edf1e5}button.primary{background:#c0ef87;color:#192214;border-color:#c0ef87;font-weight:600;min-width:220px;text-align:left}button span,#waitlist span{padding-left:28px}.entry-note{color:#969e8e;line-height:1.6;margin:18px 0 8px}#entry a{color:#c7d0ba;text-decoration:none;font-size:12px}#captionArea{position:absolute;bottom:max(6%,30px);left:7vw;right:7vw;text-align:center;pointer-events:none;z-index:3}#beat{font-size:clamp(25px,3.2vw,52px);font-weight:500;letter-spacing:-.035em;text-shadow:0 2px 18px #0009}#subtitle{margin-top:16px;min-height:30px;font-size:clamp(16px,1.6vw,23px);line-height:1.35;text-shadow:0 1px 8px #000;white-space:pre-line}#subtitle:not(:empty){display:inline-block;background:#111b;padding:10px 18px;border-radius:4px}#questionCard{position:absolute;left:7vw;top:25%;width:min(440px,36vw);background:#f2f2e9;color:#192014;padding:26px;border-radius:8px;box-shadow:0 18px 70px #0002;z-index:3}.input-tabs{display:flex;justify-content:space-between;border-bottom:1px solid #d7dbcd;padding-bottom:14px;margin-bottom:22px;font-size:10px;letter-spacing:.12em;color:#65705d}#inputTab{color:#17240d;font-weight:700}#questionCard label{font-size:14px;display:block;margin-bottom:12px}textarea{font:inherit;resize:none;width:100%;border:0;border-bottom:1px solid #d2d7c6;background:transparent;font-size:20px;line-height:1.4;padding:0 0 14px;border-radius:0;color:#17200f}#submitText{margin-top:18px;padding:12px 16px;background:#213518;color:#fff;border:0;font-size:13px}#liveState{font-size:12px;line-height:1.5;color:#5c6b51;margin-top:14px}#timelineCard{position:absolute;top:22%;left:8vw;width:62%}#timelineCard h2{font-size:clamp(38px,5.9vw,94px);font-weight:500;letter-spacing:-.055em;line-height:1.03;margin-top:22px}.milestones{display:flex;gap:0;border-top:1px solid #5c6353;margin-top:45px;padding-top:24px}.milestones>div{flex:1;position:relative}.milestones>div:before{content:'';position:absolute;top:-29px;width:8px;height:8px;background:#c0ef87;border-radius:50%}.milestones span{font-size:10px;letter-spacing:.16em;color:#b1bd9e}.milestones p{font-size:15px;margin-top:14px;line-height:1.5}.provenance{font-size:11px;color:#89917e;margin-top:32px}#screen[data-kind=timeline] #stage{inset:auto 5vw 22% auto;width:24vw;height:31vw;max-height:50vh;border-radius:12px;overflow:hidden}#screen[data-kind=timeline] .shade{display:none}#screen[data-kind=type] #stage,#screen[data-kind=ask] #stage{left:34%}#screen[data-kind=type] #captionArea,#screen[data-kind=ask] #captionArea{left:40%}#ending{position:absolute;left:9vw;top:20%}#ending h2{font-weight:500;font-size:clamp(72px,11vw,164px);letter-spacing:-.07em;line-height:.88;margin:24px 0 32px}#ending>p{font-size:clamp(16px,2vw,25px);color:#bdc6b3}#waitlist{display:inline-block;text-decoration:none;background:#c0ef87;color:#1b2711;margin-top:30px}#waitlist[aria-disabled=true]{cursor:default}#siteAddress{margin-top:15px;font-size:13px!important}#replay{display:block;margin-top:22px;font-size:12px;padding:8px 12px}#progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#f0f6e315;z-index:6}#progress i{display:block;height:100%;width:0;background:#c0ef87;transition:width .12s linear}#keyboardHint{position:absolute;bottom:14px;right:24px;font-size:10px;color:#eaf2db90;display:none}.running #keyboardHint{display:block}.capture #rehearsal,.capture #keyboardHint,.capture #replay{display:none!important}#interruption{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#10110ff5;text-align:center;padding:36px;gap:18px}#interruption h2{font-size:36px;letter-spacing:-.04em}#stopMessage{max-width:550px;line-height:1.6;color:#bcc6b0}#interruption button{min-width:180px}#screen[data-kind=opening] .shade,#screen[data-kind=closing] .shade{display:none}
@media(max-height:740px) and (min-width:701px){#titleCard{top:16%}h1{font-size:min(8vw,86px)}#entry{bottom:6%}.entry-note{margin-top:12px}#introCopy{font-size:19px}#ending{top:17%}#ending h2{font-size:96px}#timelineCard{top:18%}}
@media(max-width:700px){#screen{min-height:480px}#topline{left:22px;right:22px;top:max(23px,env(safe-area-inset-top));gap:10px}.wordmark{font-size:11px}#identity{font-size:10px}#rehearsal{position:absolute;right:0;top:30px}#titleCard{left:8%;top:20%;right:8%}h1{font-size:clamp(52px,13vw,85px)}#entry{left:8%;right:8%;bottom:6%}.entry-note{font-size:11px}#entry a{font-size:11px}.entry-actions{gap:8px}.entry-actions button{font-size:12px;padding:12px 14px;min-width:0}#readiness{font-size:12px}#captionArea{left:6%;right:6%;bottom:max(7%,35px)}#beat{font-size:28px}#subtitle{font-size:15px}#questionCard{left:6%;top:auto;bottom:7%;width:88%;padding:18px}#screen[data-kind=type] #stage,#screen[data-kind=ask] #stage{left:0;bottom:26%}#screen[data-kind=type] #captionArea,#screen[data-kind=ask] #captionArea{left:6%;bottom:41%;right:6%}#screen[data-kind=type] #beat,#screen[data-kind=ask] #beat{font-size:21px}#questionCard label{display:none}textarea{font-size:18px}.input-tabs{margin-bottom:12px;padding-bottom:10px}#submitText{margin-top:10px}#liveState{font-size:10px;margin-top:8px}#timelineCard{left:8%;top:16%;width:84%}#timelineCard h2{font-size:46px}.milestones{margin-top:24px;padding-top:18px}.milestones>div:before{top:-23px}.milestones p{font-size:12px}.milestones span{font-size:9px}.provenance{max-width:190px;line-height:1.5}#screen[data-kind=timeline] #stage{width:34vw;height:44vw;right:7vw;bottom:18%}#screen[data-kind=timeline] #captionArea{right:44%;bottom:23%;text-align:left}#screen[data-kind=timeline] #beat{font-size:24px}#screen[data-kind=timeline] #subtitle{font-size:13px}#ending{left:8%;right:8%;top:23%}#ending h2{font-size:26vw}#ending>p{font-size:18px;max-width:270px}#keyboardHint{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#ending h2{font-size:clamp(68px,11vw,164px);white-space:nowrap}
@media(max-width:700px){#ending h2{font-size:18vw}#ending>p{font-size:22px}}

/* Movie v1.1: dissolve the complete composition, including captions. */
#titleCard{right:8vw;max-width:1100px}
#curtain{position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none;will-change:opacity}
.preparation{display:flex;align-items:center;gap:17px;margin-bottom:20px;max-width:510px}
#loadingLabel{font-size:14px;letter-spacing:.02em;margin-bottom:5px;color:#eff3e8}
.preparation #readiness{margin:0;font-size:12px;color:#aeb8a2}
.progress-ring{position:relative;flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;--progress:0}
.progress-ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring-track,.ring-value{fill:none;stroke-width:2.5}
.ring-track{stroke:#d5e4bf26}
.ring-value{stroke:#c0ef87;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress,0));transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .3s ease}
#loadingPercent{font-size:13px;font-variant-numeric:tabular-nums;color:#e5f6d2}
#storyProgress{position:absolute;z-index:6;right:24px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:1px solid #c0ef8722;border-radius:30px;background:#0d110bc9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#cbd9bc;--progress:0}
#storyProgress svg{width:25px;height:25px}#storyProgress span{font-size:8px;letter-spacing:.16em}#storyProgress b{font-size:11px;font-weight:500;min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
#keyboardHint{left:24px;right:auto}
@media(max-width:700px){
 .preparation{gap:12px;margin-bottom:16px}.progress-ring{flex-basis:52px;width:52px;height:52px}.preparation #readiness{font-size:11px}
 #storyProgress{right:16px;padding:3px 8px 3px 4px}#storyProgress svg{width:22px;height:22px}
 #screen[data-kind=type] #stage,#screen[data-kind=ask] #stage{top:70px;bottom:calc(var(--question-height,225px) + 7% + 18px)}
 #screen[data-kind=type] #captionArea,#screen[data-kind=ask] #captionArea{bottom:calc(var(--question-height,225px) + 7% + 25px)}
 #screen[data-kind=type] #beat,#screen[data-kind=ask] #beat{font-size:18px}
 #screen[data-kind=type] #subtitle,#screen[data-kind=ask] #subtitle{font-size:12px;margin-top:7px;padding:6px 9px;min-height:0}
}
@media(max-height:740px) and (min-width:701px){
 #titleCard{top:16%}h1{font-size:clamp(48px,7vw,74px);margin:15px 0}#introCopy{font-size:17px}.preparation{margin-bottom:12px}.progress-ring{width:48px;height:48px;flex-basis:48px}
}
@media(max-height:710px) and (max-width:700px){
 #titleCard{top:15%}h1{font-size:11vw;margin:18px 0}#introCopy{font-size:16px}#entry{bottom:7%}.preparation{margin-bottom:12px}.entry-note{margin-top:12px}
}

/* v1.3: timeline text, captions and live avatar share layout tracks.
   Never move the iframe in the DOM: Safari would reload its renderer. */
#preview{min-height:48px;text-align:center}
#screen[data-kind=timeline]{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,28%);grid-template-rows:auto minmax(0,1fr);gap:24px 5vw;padding:clamp(90px,13dvh,140px) 8vw max(70px,8dvh);align-content:center}
#screen[data-kind=timeline] #timelineCard{position:static;grid-column:1;grid-row:1;width:auto;min-width:0;align-self:end}
#screen[data-kind=timeline] #captionArea{position:static;grid-column:1;grid-row:2;min-width:0;align-self:start;text-align:left}
#screen[data-kind=timeline] #stage{position:relative;inset:auto;grid-column:2;grid-row:1 / 3;align-self:center;width:100%;height:min(50dvh,500px);max-height:none;border-radius:12px;overflow:hidden}
#screen[data-kind=timeline] #beat{font-size:clamp(23px,2.6vw,38px);line-height:1.16;text-shadow:none;text-wrap:pretty}
#screen[data-kind=timeline] #subtitle{display:block;font-size:clamp(14px,1.4vw,19px);line-height:1.4;margin-top:14px;min-height:0;padding:0;background:none;text-shadow:none;color:#d1d8c8}
#screen[data-kind=timeline] .provenance{max-width:none;line-height:1.4;margin-top:18px}
@media(max-width:700px){
 #screen[data-kind=timeline]{grid-template-columns:minmax(0,1fr) 36%;grid-template-rows:auto minmax(0,1fr);padding:94px 7vw max(60px,env(safe-area-inset-bottom));gap:22px 5vw}
 #screen[data-kind=timeline] #timelineCard{grid-column:1 / 3;align-self:start}
 #screen[data-kind=timeline] #timelineCard h2{font-size:clamp(32px,10.5vw,46px);margin-top:14px;line-height:1.03}
 #screen[data-kind=timeline] .milestones{margin-top:24px;padding-top:16px}
 #screen[data-kind=timeline] .milestones>div:before{top:-21px}
 #screen[data-kind=timeline] .milestones p{font-size:11px;margin-top:10px;line-height:1.4;padding-right:8px}
 #screen[data-kind=timeline] .provenance{font-size:10px;margin-top:16px}
 #screen[data-kind=timeline] #stage{grid-column:2;grid-row:2;align-self:start;height:auto;aspect-ratio:3 / 4;max-height:100%;min-height:0}
 #screen[data-kind=timeline] #captionArea{grid-column:1;grid-row:2}
 #screen[data-kind=timeline] #beat{font-size:clamp(20px,5.7vw,25px)}
 #screen[data-kind=timeline] #subtitle{font-size:12px;margin-top:12px}
}
@media(max-width:700px) and (max-height:650px){
 #screen[data-kind=timeline]{padding-top:86px;gap:16px 5vw;padding-bottom:54px}
 #screen[data-kind=timeline] #timelineCard h2{font-size:34px;margin-top:10px}
 #screen[data-kind=timeline] .milestones{margin-top:20px;padding-top:14px}
 #screen[data-kind=timeline] .milestones>div:before{top:-19px}
 #screen[data-kind=timeline] .milestones p{margin-top:7px;font-size:10px}
 #screen[data-kind=timeline] .provenance{margin-top:12px;font-size:9px}
 #screen[data-kind=timeline] #beat{font-size:20px}
}
@media(max-height:550px) and (min-aspect-ratio:6/5){
 #screen[data-kind=timeline]{min-height:0;grid-template-columns:minmax(0,1fr) minmax(110px,24%);grid-template-rows:auto minmax(0,1fr);padding:64px 6vw 46px;gap:10px 4vw}
 #screen[data-kind=timeline] #rehearsal{position:static}
 #screen[data-kind=timeline] #timelineCard{grid-column:1;grid-row:1}
 #screen[data-kind=timeline] #timelineCard .eyebrow{font-size:9px}
 #screen[data-kind=timeline] #timelineCard h2{font-size:clamp(24px,8dvh,36px);margin-top:8px}
 #screen[data-kind=timeline] .milestones{margin-top:16px;padding-top:10px}
 #screen[data-kind=timeline] .milestones>div:before{top:-15px}
 #screen[data-kind=timeline] .milestones span{font-size:8px}
 #screen[data-kind=timeline] .milestones p{font-size:10px;margin-top:5px;line-height:1.2}
 #screen[data-kind=timeline] .provenance{font-size:9px;margin-top:8px}
 #screen[data-kind=timeline] #stage{grid-column:2;grid-row:1 / 3;align-self:center;height:calc(100dvh - 130px);aspect-ratio:auto}
 #screen[data-kind=timeline] #captionArea{grid-column:1;grid-row:2}
 #screen[data-kind=timeline] #beat{font-size:19px;line-height:1.12}
 #screen[data-kind=timeline] #subtitle{font-size:12px;margin-top:8px;line-height:1.25}
}
