:root{color-scheme:light;--ink:#24202e;--muted:#665f74;--purple:#7145bf;--line:#ded7e8}*{box-sizing:border-box}body{margin:0;background:#f8f6fb;color:var(--ink);font:17px/1.5 system-ui,sans-serif;height:100svh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.3;cursor:default}:focus-visible{outline:3px solid #8959d8;outline-offset:4px}.stage-header{display:flex;align-items:center;gap:20px;padding:22px 4vw;flex-shrink:0}.stage-header>a:first-child{font-size:22px;font-weight:750;letter-spacing:-1px}.draft-label{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:20px}.stage-exit{margin-left:auto;font-size:14px;padding:8px}.stage-shell{display:flex;flex-direction:column;min-height:0;flex:1;padding:1vh 4vw 24px;max-width:1600px;width:100%;margin:auto}#stage-content{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;overflow:auto;touch-action:pan-y}.stage-copy{padding:2vh 1vw;max-width:680px}h1{font-size:clamp(32px,4.7vw,72px);line-height:1.05;letter-spacing:-.055em;font-weight:650;margin:0 0 24px}h1:focus{outline:none}.stage-lead{font-size:clamp(17px,1.8vw,26px);max-width:570px;margin:0}.stage-note{font-size:15px;color:var(--muted);max-width:480px;margin-top:24px}.stage-close{display:inline-block;font-size:clamp(20px,2.1vw,30px);font-weight:650;color:#6536ac;border-bottom:2px solid #b896eb;padding-bottom:8px}.story-placeholder{position:relative;isolation:isolate;overflow:hidden;margin:0;min-height:240px;height:92%;max-height:690px;border:1px solid #e4deec;border-radius:32px;background:radial-gradient(ellipse at 45% 38%,#ffffff 0%,#ece3f8 42%,#d4c6e8 100%);display:flex;align-items:flex-end;padding:26px}.story-horizon{position:absolute;inset:15% -30% -20%;border-radius:50%;border:1px solid #fff9;background:linear-gradient(170deg,#ffffff77,transparent 65%);transform:rotate(-12deg);z-index:-1}.story-placeholder figcaption{font-size:13px;color:#5b4b6b;max-width:310px}.stage-controls{display:flex;align-items:center;justify-content:space-between;padding-top:18px;flex-shrink:0;gap:16px}.stage-controls button{border:1px solid var(--line);border-radius:100px;background:#fff;padding:12px 23px;min-height:48px;min-width:108px}.stage-controls p{font-size:13px;color:var(--muted);margin:0}.stage-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.stage-choices button,.stage-link{border:1px solid var(--line);padding:12px 18px;border-radius:14px;background:#fff;min-height:48px}.stage-link{display:inline-block;background:#342541;color:#fff;margin-top:20px}.example-fragment{background:white;border:1px solid var(--line);border-radius:22px;padding:24px;margin-top:22px;box-shadow:0 12px 50px #39265608}.fragment-label{font-size:12px;color:var(--purple);margin:0 0 16px}.example-fragment h2{font-size:23px;line-height:1.2;letter-spacing:-.025em}.example-fragment p:last-child{font-size:17px}.stage-copy p{overflow-wrap:break-word}body[data-stage=showcase] #stage-content{display:flex;justify-content:center}body[data-stage=showcase] .stage-copy{width:100%;max-width:800px}body[data-stage=showcase] h1{font-size:clamp(34px,5vw,68px)}@media(max-width:680px){.stage-header{padding:16px 20px;gap:12px}.stage-header>a:first-child{font-size:20px}.draft-label{font-size:10px;padding-left:12px;max-width:155px}.stage-shell{padding:4px 20px 16px}#stage-content{display:flex;flex-direction:column;gap:20px;align-items:stretch;justify-content:center}.stage-copy{padding:0}h1{font-size:clamp(30px,8.5vw,46px);margin-bottom:18px}.stage-lead{font-size:18px;line-height:1.5}.story-placeholder{min-height:160px;height:32vh;max-height:330px;flex-shrink:1;border-radius:24px;padding:20px}.story-placeholder figcaption{font-size:11px}.stage-note{font-size:13px;margin-top:18px}.stage-close{font-size:22px;margin-bottom:0}.stage-controls{padding-top:16px}.stage-controls button{padding:10px 18px;min-width:94px}.example-fragment{padding:18px}.example-fragment h2{font-size:22px}.stage-choices{margin-top:20px}.stage-choices button{font-size:15px}}@media(max-height:600px){.stage-header{padding-top:10px;padding-bottom:10px}.stage-shell{padding-bottom:10px}#stage-content{justify-content:flex-start}.story-placeholder{min-height:100px;max-height:150px}.stage-controls{padding-top:8px}.stage-copy{padding-top:8px}.stage-lead{font-size:16px}.stage-note{font-size:12px;margin-top:12px}h1{font-size:32px;margin-bottom:14px}}@media(prefers-reduced-motion:no-preference){.stage-copy{animation:arrive .22s ease-out}@keyframes arrive{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}}

/* Keep the card and its controls in separate, fixed viewport rows. */
body{height:100dvh;overflow:hidden}
#stage-content{overflow:hidden;overscroll-behavior:none}
.stage-shell{padding-bottom:max(12px,env(safe-area-inset-bottom))}
.stage-controls p{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.stage-controls button{touch-action:manipulation}
.story-placeholder{min-height:0;flex:1 1 0}
@media(max-width:680px){
 #stage-content{justify-content:flex-start;gap:16px}
 .stage-copy{flex:0 0 auto}
 .story-placeholder{height:auto;max-height:32dvh}
}
@media(max-height:460px) and (max-width:420px){
 .stage-header{padding:8px 12px;gap:8px}
 .stage-header>a:first-child{font-size:18px}
 .draft-label{font-size:10px;padding-left:8px}
 .stage-exit{font-size:14px;padding:4px}
 .stage-shell{padding:0 12px 8px}
 .stage-copy{padding:2px 0}
 #stage-content{gap:0;align-items:center;justify-content:center}
 body[data-stage=showcase] h1,h1{font-size:24px;line-height:1.08;margin:0 0 8px}
 .stage-lead{font-size:15px;line-height:1.35}
 .stage-note{font-size:14px;line-height:1.3;margin:8px 0 0}
 .story-placeholder{display:none}
 .stage-close{font-size:20px;margin-top:12px}
 .stage-controls{padding-top:6px;gap:8px}
 .stage-controls button{min-height:40px;min-width:76px;padding:6px 12px;font-size:16px}
 .stage-choices{gap:6px;margin-top:8px}
 .stage-choices button,.stage-link{font-size:14px;min-height:36px;padding:6px 10px;border-radius:10px}
 .stage-link{margin-top:8px}
 .example-fragment{padding:10px;margin-top:8px;border-radius:12px}
 .fragment-label{font-size:12px;margin:0 0 4px}
 .example-fragment h2{font-size:17px;margin:4px 0;line-height:1.15}
 .example-fragment p:last-child{font-size:14px;line-height:1.3;margin:4px 0 0}
}

/* Follow the device, including changes while the card is open. */
:root{color-scheme:light;--stage-field:#fff;--stage-card:#fff;--stage-wordmark:#315e9b;--stage-link:#6536ac;--stage-link-field:#342541;--stage-link-ink:#fff}
body{background:var(--stage-field)}
.stage-header>a:first-child,body[data-stage-end=true] .stage-copy>h1{color:var(--stage-wordmark)}
.stage-controls button,.stage-choices button,.example-fragment{background:var(--stage-card)}
.stage-close{color:var(--stage-link)}
.stage-link{background:var(--stage-link-field);color:var(--stage-link-ink)}
@media(prefers-color-scheme:dark){
 :root{color-scheme:dark;--ink:#f1f4fb;--muted:#c2cad9;--purple:#cab3ff;--line:#465064;--stage-field:#12151c;--stage-card:#202631;--stage-wordmark:#e4efff;--stage-link:#cab3ff;--stage-link-field:#d6c2ff;--stage-link-ink:#20182e}
 .story-placeholder{border-color:var(--line);background:radial-gradient(ellipse at 45% 38%,#35314c,#25243a 45%,#191d29)}
 .story-placeholder figcaption{color:var(--muted)}
 .story-horizon{border-color:#ffffff22;background:linear-gradient(170deg,#ffffff11,transparent 65%)}
}