/* antelier.co public pages (home, setup, Unreal guide). Dark first; data-theme="light" swaps the tokens.
   style.css stays as it was for the legal, sign-in, region and not-found pages. */
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans.woff2') format('woff2'),url('/fonts/dm-sans.ttf') format('truetype');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/manrope.woff2') format('woff2'),url('/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}

:root{
 color-scheme:dark;
 --bg:#11151b;--surface-1:#161b22;--surface-2:#1c222b;--surface-3:#242b35;
 --border:#262d37;--border-strong:#353d49;
 --text:#e9edf2;--text-2:#a7b0bc;--text-3:#8b95a3;
 --accent:#f0b46a;--accent-strong:#ffc98a;--accent-ink:#1d1308;--accent-soft:rgb(240 180 106/.12);
 --pass:#3fb950;--pass-soft:rgb(63 185 80/.14);--danger:#ff8a80;
 --btn-bg:#eef1f5;--btn-fg:#11151b;--btn-hover:#fafbfc;
 --field:#0e1217;--focus:#f0b46a;
 --glow:rgb(240 172 90/.22);--frame-edge:rgb(255 255 255/.06);
 --scrim:rgb(9 11 15/.86);
 --ease:cubic-bezier(.22,1,.36,1);
 --font-display:'Manrope',ui-sans-serif,system-ui,sans-serif;
 --font-body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
 --font-mono:ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;
 --wrap:1200px;--gutter:clamp(16px,4vw,40px);
}
:root[data-theme=light]{
 color-scheme:light;
 --bg:#f6f7f9;--surface-1:#fdfdfe;--surface-2:#eff1f4;--surface-3:#e5e8ed;
 --border:#dfe3e9;--border-strong:#c9d0d9;
 --text:#151a21;--text-2:#465261;--text-3:#5d6875;
 --accent:#a35404;--accent-strong:#8a4602;--accent-ink:#fdfdfe;--accent-soft:rgb(163 84 4/.09);
 --pass:#1a7f37;--pass-soft:rgb(26 127 55/.11);--danger:#b42318;
 --btn-bg:#151a21;--btn-fg:#f6f7f9;--btn-hover:#262d37;
 --field:#fdfdfe;--focus:#a35404;
 --glow:rgb(163 84 4/.12);--frame-edge:rgb(0 0 0/.04);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,picture{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--accent-ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 14px;border-radius:8px;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.no-script{margin:0;padding:12px var(--gutter);background:var(--surface-2);color:var(--text-2);font-size:14px}

/* Type */
h1,h2,h3{font-family:var(--font-display);color:var(--text);font-weight:650;text-wrap:balance}
h1{font-size:clamp(44px,7.1vw,92px);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(31px,4.3vw,52px);line-height:1.04;letter-spacing:-.035em}
h3{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.eyebrow{font:600 13px/1.2 var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section-lede{font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--text-2);max-width:60ch}
.fine{font-size:13px;line-height:1.55;color:var(--text-3)}
.text-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:5px;transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:var(--accent)}
.text-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.text-link:hover svg{transform:translateX(3px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:10px;font:600 15px/1 var(--font-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,transform .2s var(--ease),color .2s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-hover);transform:translateY(-1px)}
.btn-primary:hover svg{transform:translateX(2px)}
.btn-primary svg{transition:transform .25s var(--ease)}
.btn-ghost{background:var(--surface-1);border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--text-3);background:var(--surface-2)}
.btn-ghost .dim{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:9px}
.btn-block{width:100%}
.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--text-2);transition:background-color .2s,color .2s,border-color .2s}
.icon-button:hover{background:var(--surface-2);color:var(--text)}
.icon-button svg{width:19px;height:19px}

/* Navigation */
.site-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s}
.site-nav.is-scrolled{border-bottom-color:var(--border)}
.nav-inner{display:flex;align-items:center;gap:28px;height:64px;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font:700 21px/1 var(--font-display);letter-spacing:-.04em}
.brand .mark{width:21px;height:21px;color:var(--accent);transition:transform .6s var(--ease)}
.brand:hover .mark{transform:translateY(-1px)}
.nav-links{display:flex;gap:4px;margin-right:auto}
.nav-links a,.nav-signin{padding:8px 11px;border-radius:8px;color:var(--text-2);font-size:14.5px;text-decoration:none;transition:color .2s,background-color .2s}
.nav-links a:hover,.nav-signin:hover{color:var(--text);background:var(--surface-2)}
.nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-actions .btn{margin-left:6px}
.theme-toggle .icon-moon{display:none}
:root[data-theme=light] .theme-toggle .icon-sun{display:none}
:root[data-theme=light] .theme-toggle .icon-moon{display:block}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;display:grid;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1);box-shadow:0 24px 60px -20px rgb(0 0 0/.5)}
.nav-menu nav a{padding:11px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:15px}
.nav-menu nav a:hover{background:var(--surface-2)}

/* Hero */
.hero{padding-top:clamp(36px,4vw,64px)}
.hero h1{max-width:13ch;font-size:clamp(46px,6vw,84px);line-height:.96}
.hero-side{max-width:640px;margin-top:26px}
.hero-lede{font-size:clamp(17px,1.45vw,19.5px);line-height:1.6;color:var(--text-2);max-width:58ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-meta{margin-top:16px;font-size:13.5px;color:var(--text-3)}
/* Entrance: the headline and the before/after only settle into place (never hidden, so they paint at once);
   the smaller pieces fade in around them. */
.hero-head>.hero-side{animation:rise .8s var(--ease) .12s both}
.hero-head>h1{animation:settle .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes settle{from{transform:translateY(10px)}}

/* The turn: the River boat starter, the one message, and Lantern River after it. Two equal frames, so the 720p
   recording is never shown larger than the starter still beside it. */
.turn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px;margin-top:clamp(32px,3vw,44px);animation:settle 1.1s var(--ease) both}
.turn-frame{position:relative;min-width:0}
.turn-before img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1px solid var(--border-strong);background:#0a0d11}
.turn-label{position:absolute;left:14px;bottom:14px;padding:5px 10px;border-radius:8px;background:rgb(8 10 14/.62);color:#eef1f5;font-size:13px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.turn-ask{grid-column:1/-1;display:grid;gap:8px;padding:18px 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface-1)}
.turn-key{font:600 11.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.turn-ask q{quotes:'\201C' '\201D';font:500 clamp(17px,1.6vw,21px)/1.45 var(--font-display);letter-spacing:-.01em;color:var(--text);max-width:78ch}
.turn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13.5px;color:var(--text-3)}
.turn-meta .text-link{font-size:13.5px}
.turn-meta .dim{color:var(--text-3);font-weight:500}
/* The recording sits in the right-hand frame; its poster paints first (a phone gets the 640 px one). */
.stage-frame{position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:16px;background:#0a0d11 url('/welcome/hero-poster-640.webp') center/cover no-repeat;border:1px solid var(--border-strong);box-shadow:0 40px 100px -50px var(--glow)}
@media(min-width:700px){.stage-frame{background-image:url('/welcome/hero-poster.webp')}}
.stage-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:15px}
.stage[data-mode=demo] .stage-frame video{background:#0a0d11}
.stage-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:40px 12px 12px 14px;border-radius:0 0 15px 15px;background:linear-gradient(to top,rgb(8 10 14/.62),rgb(8 10 14/0));color:#eef1f5;pointer-events:none}
.stage-label{padding:5px 10px;border-radius:8px;background:rgb(8 10 14/.5);font-size:13px;font-weight:500}
.stage-toggle{pointer-events:auto;width:38px;height:38px;border-radius:50%;background:rgb(14 18 24/.62);border-color:rgb(255 255 255/.2);color:#f3f5f8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stage-toggle:hover{background:rgb(14 18 24/.82);color:#fff}
.stage-toggle svg{width:16px;height:16px}
.stage-toggle .icon-pause{display:none}
.stage[data-playing] .stage-toggle .icon-pause{display:block}
.stage[data-playing] .stage-toggle .icon-play{display:none}
.stage[data-mode=demo] .stage-controls{display:none}
/* Watching the whole 46 s turn widens the recording across both frames. */
.turn:has(.stage[data-mode=demo]) .turn-before{display:none}
.turn:has(.stage[data-mode=demo]) .turn-after{grid-column:1/-1}

/* Sections */
.section{padding-block:clamp(64px,8.5vw,112px)}
.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.section-head.split{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 56px;align-items:end}
.section-head.split .section-lede{padding-bottom:6px}

/* Play with friends */
.play-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:center}
.play-copy .section-lede{margin-top:18px}
.play-copy .fine{margin-top:16px}
.play-shot img{width:100%;border-radius:16px;border:1px solid var(--border-strong);box-shadow:0 40px 110px -50px rgb(0 0 0/.6)}
.play-shot figcaption{margin-top:14px;font-size:14px;color:var(--text-3)}

/* How it works */
.how .section-lede{margin-top:18px}
.steps{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:clamp(24px,4vw,48px);align-items:start}
.step-list{display:grid;gap:6px}
.step{position:relative;display:grid;grid-template-columns:32px 1fr;gap:4px;width:100%;padding:18px 18px 20px 14px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text-2);text-align:left;overflow:hidden;transition:background-color .25s,border-color .25s}
.step:hover{background:color-mix(in srgb,var(--surface-1) 60%,transparent)}
.step[aria-selected=true]{background:var(--surface-1);border-color:var(--border)}
.step-num{padding-top:2px;font:500 12.5px/1.4 var(--font-mono);color:var(--text-3)}
.step[aria-selected=true] .step-num{color:var(--accent)}
.step-text{display:grid;gap:6px}
.step-text strong{font:650 17.5px/1.3 var(--font-display);letter-spacing:-.015em;color:var(--text)}
.step-text span{font-size:14.5px;line-height:1.55}
.step-bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.step-bar::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.steps.is-timed .step[aria-selected=true] .step-bar{background:var(--border)}
.steps.is-timed .step[aria-selected=true] .step-bar::after{animation:fill var(--step-ms,6500ms) linear forwards}
.steps.is-timed:hover .step-bar::after,.steps.is-timed:focus-within .step-bar::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.step-stage{display:grid}
.step-panel{grid-area:1/1;opacity:0;transition:opacity .5s var(--ease)}
.step-panel.is-active{opacity:1}
.step-panel img{width:100%;border-radius:14px;border:1px solid var(--border-strong);background:var(--surface-1);box-shadow:0 30px 80px -40px rgb(0 0 0/.55)}
.step-caption{margin-top:14px;font-size:14px;color:var(--text-3)}

/* Small labels (pricing.html). */
.tag{margin-bottom:6px;padding:4px 9px;border-radius:999px;background:rgb(255 255 255/.14);color:#f1f3f6;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tag-accent{background:#f0b46a;color:#1d1308}

/* Play first: the three starters that run in the browser. */
.play-cards{list-style:none;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.play-card-lead{grid-row:span 2}
.play-card a{position:relative;display:block;height:100%;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:#0a0d11;color:#f1f3f6;text-decoration:none}
.play-card img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease)}
.play-card-text{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;justify-items:start;padding:56px 18px 16px;background:linear-gradient(to top,rgb(8 10 14/.86) 10%,rgb(8 10 14/0))}
.play-card-text strong{font:650 18px/1.2 var(--font-display);letter-spacing:-.01em;color:#f5f7fa}
.play-card-lead .play-card-text strong{font-size:clamp(22px,2.4vw,30px)}
.play-card-text span:not(.play-chip){font-size:14px;line-height:1.45;color:rgb(241 243 246/.84)}
.play-chip{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:6px 12px 6px 10px;border-radius:999px;background:#f3f5f8;color:#11151b;font-size:13px;font-weight:600}
.play-chip svg{width:13px;height:13px}
.play-first .fine{margin-top:16px}

/* Starters: picture, kind, name, one real suggested change and the way in. */
.starter-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,36px) 18px}
.starter{display:grid;align-content:start;gap:14px;min-width:0}
.starter img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
.starter-text{display:grid;justify-items:start;gap:6px}
.starter-kind{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.starter h3{font-size:19px}
.starter-ask{margin:2px 0 6px;font-size:15px;line-height:1.5;color:var(--text-2);max-width:40ch}
.starter-actions{display:flex;flex-wrap:wrap;gap:6px 18px}
.text-link.quiet{color:var(--text-2);font-weight:500}
.starter-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:clamp(28px,4vw,40px);padding-top:22px;border-top:1px solid var(--border)}
.starter-more p{font-size:14px;color:var(--text-3)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chip,.idea{display:inline-block;padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:14px;line-height:1.35;text-align:left;text-decoration:none;transition:border-color .2s,background-color .2s}
.chip:hover,.idea:hover{border-color:var(--accent);background:var(--surface-3)}
.own-idea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vw,80px);padding:clamp(22px,4vw,44px);border:1px solid var(--border);border-radius:22px;background:radial-gradient(120% 90% at 0% 0%,var(--accent-soft),transparent 60%),var(--surface-1)}
:root[data-theme=light] .own-idea{background:var(--surface-1)}
.own-idea h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.025em}
.own-idea-copy>p{margin-top:12px;color:var(--text-2);line-height:1.6;max-width:52ch}
.ideas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.own-idea-form{align-self:center}
.own-idea-form textarea{min-height:120px}
.own-idea-form .fine{margin-top:12px}

/* It stays yours: versions picture and the three plain facts. */
.yours-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.facts{display:grid}
.facts>div{padding:18px 0;border-top:1px solid var(--border)}
.facts>div:last-child{border-bottom:1px solid var(--border)}
.facts dt{font-weight:600;color:var(--text);font-size:16.5px}
.facts dd{margin-top:5px;color:var(--text-2);font-size:15px;line-height:1.6}
.wide-shot img{width:100%;border-radius:16px;border:1px solid var(--border-strong);box-shadow:0 40px 110px -50px rgb(0 0 0/.6)}
.wide-shot figcaption{margin-top:14px;font-size:14px;color:var(--text-3)}

/* Unreal */
.unreal{border-top:1px solid var(--border);background:linear-gradient(to bottom,var(--surface-1),var(--bg) 70%)}
.unreal-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:center}
.unreal-shot{margin-bottom:24px}
.unreal-media{position:relative}
.unreal-scene{width:100%;border-radius:14px;border:1px solid var(--border-strong)}
.unreal-panel{position:absolute;right:-3%;bottom:-56px;width:31%;border-radius:10px;border:1px solid var(--border-strong);box-shadow:0 30px 60px -20px rgb(0 0 0/.6)}
.unreal-shot figcaption{max-width:62%;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--text-3)}
.unreal-copy .section-lede{margin-top:18px}
.ticks{list-style:none;display:grid;gap:12px;margin:26px 0 22px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--text);font-size:15.5px;line-height:1.5}
.ticks svg{width:18px;height:18px;margin-top:2px;color:var(--pass)}
.unreal-copy .fine{margin-bottom:20px}

/* Start */
.start{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);padding:clamp(24px,5vw,56px) clamp(18px,5vw,56px);border:1px solid var(--border);border-radius:22px;background:var(--surface-1)}
.start-steps{list-style:none;counter-reset:step;display:grid;gap:16px;margin:26px 0 22px}
.start-steps li{counter-increment:step;position:relative;padding-left:40px;color:var(--text-2);font-size:15.5px;line-height:1.55}
.start-steps li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-2);color:var(--accent);font:600 13px/1 var(--font-body)}
.start-steps b{color:var(--text);font-weight:600}
.start-needs{font-size:14px;line-height:1.6;color:var(--text-3)}
.start-needs a{color:var(--text-2)}
.start-actions{align-self:center}
.start-actions>.fine{margin-top:10px;text-align:center}
.join-form{position:relative;margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.join-anchor{position:absolute;top:-96px}
.join-form h3{font-size:17px;margin-bottom:6px}
.join-form h3+.fine{margin-bottom:18px}
label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--text)}
label>span{font-weight:400;color:var(--text-3);font-size:13px}
input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea{display:block;width:100%;min-height:46px;margin-bottom:18px;padding:11px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--field);color:var(--text);font-size:15.5px;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select,textarea:focus{outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
textarea{resize:vertical;line-height:1.55}
.google-signup{gap:12px}
.google-signup .google-mark{width:15px;height:15px;padding:2px;border-radius:50%;background:#fff;box-sizing:content-box}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.agreement{margin-top:14px}
.agreement a,.join-form>.fine{color:var(--text-2)}
#join-status:empty{display:none}
#join-status{margin:14px 0 10px;font-size:14px;line-height:1.55;color:var(--text-2)}
#leave-list{display:block;margin-bottom:12px;font-size:13.5px}
.error{color:var(--danger)!important}

/* Notes from our own testing: plain, bounded, below the invitation. */
.evidence{border-top:1px solid var(--border)}
.evidence-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,80px)}
.evidence .section-lede{margin-top:16px}
.evidence-list{display:grid;gap:28px}
.evidence-item h3{margin-bottom:12px}
.evidence-item p{color:var(--text-2);font-size:15px;line-height:1.65;max-width:68ch}
.evidence-item p+p{margin-top:10px}
.evidence-item b{color:var(--text);font-weight:600}
.receipt-stats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.receipt-stats li{padding:6px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-1);color:var(--text-2);font-size:13.5px;white-space:nowrap}
.receipt-stats b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* Questions */
.questions-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,80px)}
.questions-grid .section-lede{margin-top:16px}
.questions-grid .section-lede a{color:var(--text)}
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-child{border-top:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:11px;height:11px;border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq details p{padding:0 2px 20px;color:var(--text-2);font-size:15.5px;line-height:1.7;max-width:68ch}
.faq details p+p{margin-top:-6px}
.faq details a{color:var(--text)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:56px 0 32px;background:var(--bg)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand p{margin-top:14px;color:var(--text-3);font-size:14.5px}
.footer-col{display:grid;align-content:start;gap:2px}
.footer-col h3{margin-bottom:8px;font:600 12.5px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.footer-col a{padding:5px 0;color:var(--text-2);font-size:14.5px;text-decoration:none}
.footer-col a:hover{color:var(--text)}
.footer-base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:22px;color:var(--text-3);font-size:13.5px}
.footer-base::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--border)}
.footer-base a{color:var(--text-2);text-decoration:none}
.footer-base a:hover{color:var(--text)}

/* Invitation dialog (preview.antelier.co/welcome/#invite=...) */
dialog{width:min(480px,calc(100% - 32px));max-height:90dvh;padding:32px;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface-1);color:var(--text);box-shadow:0 40px 120px rgb(0 0 0/.55)}
dialog::backdrop{background:rgb(5 7 10/.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog .dialog-mark{width:26px;height:26px;margin-bottom:22px;color:var(--accent)}
dialog h2{font-size:32px;margin-bottom:12px}
dialog p{font-size:15px;line-height:1.6;color:var(--text-2);margin-bottom:14px}
dialog .fine{font-size:13px}
dialog .btn{margin-top:4px}
dialog .btn+.btn{margin-top:10px}
.close{position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font-size:24px}
.close:hover{background:var(--surface-2);color:var(--text)}
#access-status{color:var(--danger)}
#decline-invite{margin-top:18px;font-size:13px;color:var(--text-2)}
#recovery-upload input{font-size:13px;margin-bottom:16px}

/* Notices injected by main.js and measurement.js */
.private-link-notice{margin:24px auto 0;max-width:var(--wrap);padding:22px 24px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-1)}
.private-link-notice p{margin:8px 0 14px;color:var(--text-2)}
.private-link-notice .button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;background:var(--btn-bg);color:var(--btn-fg);font-weight:600;text-decoration:none}
.private-link-notice .text-link{margin-left:14px}
html body .measurement-choice{max-width:var(--wrap);margin:0 auto 28px;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1);color:var(--text-2);font-family:var(--font-body)}
html body .measurement-choice.measurement-compact{margin:0 auto 24px;padding:8px 14px;border:1px solid var(--border)}
html body .measurement-choice button,html body .measurement-choice a{border-color:var(--border-strong);border-radius:9px;background:var(--surface-2);color:var(--text)}
html body .measurement-choice button:hover,html body .measurement-choice a:hover{background:var(--surface-3)}
html body .measurement-choice button:focus-visible,html body .measurement-choice a:focus-visible{outline-color:var(--focus)}
@media(max-width:1260px){html body .measurement-choice{margin-inline:var(--gutter)}}

/* Setup and guide pages */
.doc-hero{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,44px)}
.doc-hero h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02}
.doc-hero .section-lede{margin-top:20px}
.doc-callout{display:grid;gap:6px;margin:28px 0 0;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1);color:var(--text-2);font-size:15px;line-height:1.6}
.doc-callout strong{color:var(--text)}
.doc-callout a{color:var(--text)}
.doc-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);padding-block:clamp(48px,7vw,80px);border-top:1px solid var(--border);scroll-margin-top:72px}
.doc-section h2{font-size:clamp(28px,3.4vw,40px)}
.doc-section>div>p{margin-top:16px;color:var(--text-2);line-height:1.65}
.doc-steps{list-style:none;counter-reset:doc;display:grid;gap:30px}
.doc-steps>li{counter-increment:doc;position:relative;padding-left:46px}
.doc-steps>li::before{content:counter(doc);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-1);font:600 13.5px/1 var(--font-body);color:var(--accent)}
.doc-steps h3{margin-bottom:8px;font-size:19px}
.doc-steps p{color:var(--text-2);line-height:1.65;font-size:15.5px}
.doc-steps p+p{margin-top:10px}
.doc-steps a:not(.btn),.doc-section a:not(.btn){color:var(--text)}
.doc-steps strong{color:var(--text);font-weight:600}
code,kbd{font-family:var(--font-mono);font-size:.88em;overflow-wrap:anywhere}
pre{margin:12px 0;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--field);overflow-x:auto}
pre code{font-size:14px;color:var(--text)}
:not(pre)>code{padding:1px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text)}
.doc-help{padding-block:clamp(48px,7vw,80px);border-top:1px solid var(--border)}
.doc-help h2{margin-bottom:24px;font-size:clamp(28px,3.4vw,40px)}

/* Guide: side contents and long-form article */
.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,6vw,88px);padding-block:clamp(36px,5vw,64px)}
.doc-aside{position:sticky;top:88px;align-self:start}
.doc-aside nav{display:grid;gap:2px}
.doc-aside nav a{padding:6px 10px;margin-left:-10px;border-radius:8px;color:var(--text-2);font-size:14.5px;text-decoration:none}
.doc-aside nav a:hover{color:var(--text);background:var(--surface-2)}
.doc-aside .edition{margin-top:24px;font-size:13px;color:var(--text-3)}
.article{min-width:0;max-width:820px}
.article section{padding:0 0 56px;margin-bottom:56px;border-bottom:1px solid var(--border);scroll-margin-top:84px}
.article section:last-child{border-bottom:0}
.article h1{font-size:clamp(42px,5.6vw,72px);line-height:1.02;margin:6px 0 26px}
.article h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 22px}
.article h3{margin:26px 0 10px}
.article p,.article li{color:var(--text-2);line-height:1.7;font-size:16px;max-width:72ch}
.article p{margin:16px 0}
.article b,.article strong{color:var(--text);font-weight:600}
.article a{color:var(--text)}
.article ol,.article ul{padding-left:22px}
.article li{margin:12px 0;padding-left:4px}
.article li::marker{color:var(--text-3)}
.article p.eyebrow{margin:0 0 14px;color:var(--accent);font-size:13px;line-height:1.2}
.article .lead{font-size:clamp(18px,1.6vw,20px);color:var(--text)}
.article .notice{margin:28px 0;padding:18px 22px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1)}
.article .notice p{margin:6px 0 0}
.article blockquote{margin:24px 0;padding:20px 24px;border:1px solid var(--border);border-radius:14px;background:var(--surface-1);color:var(--text);font-size:17px;line-height:1.6}
.table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--border);border-radius:14px}
.article table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.article th,.article td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.article tr:last-child>*{border-bottom:0}
.article thead th{background:var(--surface-1);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.article tbody th{width:22%;color:var(--text);font-weight:600}
.article td{color:var(--text-2)}
.article td:nth-child(2){width:24%}
.article figure{margin:0}
.article .examples{display:grid;gap:26px;margin-top:20px}
.article figure img{width:100%;border-radius:12px;border:1px solid var(--border-strong)}
.article figcaption{margin-top:10px;font-size:14px;color:var(--text-3)}
.article details{border-bottom:1px solid var(--border)}
.article details summary{padding:16px 0;cursor:pointer;font-weight:600;color:var(--text)}
.article details p{margin:0 0 16px;padding-left:18px}
.article .back{display:inline-block;margin-top:20px}

/* Play a starter (/welcome/play). The world is always dark night-or-dusk art, so this page keeps light text over the
   picture in both themes; the Make it yours panel follows the theme. Once playing, the starter's own canvas (appended
   to body by the kit) fills the window and the page keeps only its bar. */
.play-page{min-height:100dvh;background:#0a0d11;color:#eef1f5}
.play-bar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);pointer-events:none}
.play-bar>*{pointer-events:auto}
.play-bar .brand{color:#f3f5f8;text-shadow:0 1px 12px rgb(0 0 0/.5)}
.play-bar .brand .mark{color:#f0b46a}
.play-yours-toggle{background:rgb(14 18 24/.72);border-color:rgb(255 255 255/.22);color:#f3f5f8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.play-yours-toggle:hover,.play-yours-toggle[aria-expanded=true]{background:rgb(14 18 24/.9);border-color:#f0b46a}
.play-yours-toggle svg{color:#f0b46a}
.play-main{position:relative;min-height:100dvh;display:grid;align-items:end;isolation:isolate}
.play-poster{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.play-main::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(7 9 13/.86) 0,rgb(7 9 13/.62) 34%,rgb(7 9 13/0) 68%),linear-gradient(0deg,rgb(7 9 13/.7) 0,rgb(7 9 13/0) 45%)}
.play-intro{width:min(560px,100%);padding:110px var(--gutter) clamp(28px,6vh,64px)}
.play-intro .eyebrow{color:#f0b46a}
.play-intro h1{color:#f6f7f9;font-size:clamp(46px,6vw,84px);line-height:.98;letter-spacing:-.045em}
.play-line{margin-top:18px;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#eef1f5;max-width:46ch}
.play-truth{margin-top:12px;font-size:15px;line-height:1.6;color:rgb(238 241 245/.78);max-width:50ch}
.play-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.play-page .btn-primary{background:#f3f5f8;color:#11151b}
.play-page .btn-primary:hover{background:#fff}
.play-page .play-actions .btn-ghost{background:rgb(14 18 24/.6);border-color:rgb(255 255 255/.28);color:#f3f5f8}
.play-needs{margin-top:14px;font-size:13.5px;line-height:1.55;color:rgb(238 241 245/.78);max-width:52ch}
.play-status{margin-top:8px;min-height:1.5em;font-size:14px;color:#ffc98a}
.play-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgb(255 255 255/.16)}
.play-switch p{flex-basis:100%;font-size:13px;color:rgb(238 241 245/.72)}
.play-switch a{display:grid;gap:6px;width:116px;color:#eef1f5;font-size:13.5px;text-decoration:none}
.play-switch img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid rgb(255 255 255/.2);transition:border-color .2s,transform .25s var(--ease)}
.play-switch a:hover img{border-color:#f0b46a;transform:translateY(-2px)}
.play-switch a[aria-current=page] img{border-color:#f0b46a;box-shadow:0 0 0 2px #f0b46a}
.play-page.is-loading .play-intro{opacity:.7}
.play-page.is-playing .play-poster,.play-page.is-playing .play-main::before{display:none}
.play-page.is-playing>canvas{position:fixed;inset:0;z-index:1}
.play-page.is-playing>canvas:focus{outline:none}
/* Leave room for the site's 64px bar above the starter's top HUD. Bottom-anchored panels keep their position. */
.play-page.is-playing .ah-panel{margin-top:64px}
.play-yours{position:fixed;z-index:25;top:64px;right:var(--gutter);width:min(400px,calc(100% - 2*var(--gutter)));max-height:calc(100dvh - 84px);overflow:auto;padding:22px;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface-1);color:var(--text);box-shadow:0 30px 80px -20px rgb(0 0 0/.6)}
.play-yours h2{font-size:24px;line-height:1.15;letter-spacing:-.02em}
.play-yours>p:not(.eyebrow){margin-top:10px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.play-yours .fine{margin-top:12px}
.yours-ideas{list-style:none;display:grid;gap:8px;margin:16px 0 18px}
.yours-idea{display:block;padding:11px 13px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface-2);color:var(--text);font-size:14.5px;line-height:1.45;text-decoration:none;transition:border-color .2s,background-color .2s}
.yours-idea:hover{border-color:var(--accent);background:var(--surface-3)}
.play-yours textarea{min-height:0}
.play-noscript{position:fixed;left:var(--gutter);bottom:24px;color:#ffc98a}
@media(max-width:700px){
 .play-main::before{background:linear-gradient(0deg,rgb(7 9 13/.92) 0,rgb(7 9 13/.7) 55%,rgb(7 9 13/.1) 100%)}
 .play-poster{object-position:58% 75%}
 .play-intro{padding-top:42vh}
 .play-switch a{width:calc((100% - 20px)/3)}
}

/* Home motion. Everything here applies only to the home page (body.home or markup only it has). Continuous and
   scroll motion is transform and opacity only; colour and shadow change only on hover and focus.
   The sky: three washes of light cross-fade through dusk amber, night indigo with a moon glow, and rose dawn (8 s
   each) while lanterns rise and sway behind the hero, the lanterns of the river below it.
   site.js stills all of it (.hero[data-still]) when the tab is hidden or the hero is off screen. */
/* Motion timing, named once. One sky phase lasts --sky-phase; the cycle is three phases and each phase starts one phase
   after the previous (sky-phase's keyframes assume three). --reveal-stagger is the settle-in step (site.js caps the index). */
:root{--sky-phase:8s;--sky-cycle:calc(var(--sky-phase)*3);--sky-drift:37s;--reveal-stagger:75ms}
:root{--sky-dusk-1:rgb(242 160 72/.5);--sky-dusk-2:rgb(226 110 120/.24);--sky-night-1:rgb(78 84 210/.46);--sky-night-2:rgb(214 224 255/.3);--sky-dawn-1:rgb(240 120 150/.42);--sky-dawn-2:rgb(255 190 130/.26);
 --mote:rgb(255 190 110);--mote-core:rgb(255 238 205);--lift:rgb(240 172 90/.38);--card-shadow:rgb(0 0 0/.7)}
:root[data-theme=light]{--sky-dusk-1:rgb(240 150 60/.42);--sky-dusk-2:rgb(226 110 130/.22);--sky-night-1:rgb(90 96 220/.3);--sky-night-2:rgb(150 160 240/.28);--sky-dawn-1:rgb(236 110 140/.34);--sky-dawn-2:rgb(250 170 100/.28);
 --mote:rgb(222 128 34);--mote-core:rgb(236 150 50);--lift:rgb(21 26 33/.28);--card-shadow:rgb(21 26 33/.28)}
/* The sky has a fixed height, not the hero's: when the web fonts arrive and the headline rewraps, the hero's height
   changes, and a sky sized from it would move every light and lantern (a layout shift). Lights end by 70% of it and
   lanterns start above its lowest fifth, so the part that can reach past a short hero is empty. */
.home .hero{position:relative;isolation:isolate}
.sky{position:absolute;z-index:-1;inset:-64px 0 auto;height:1640px;overflow:hidden;pointer-events:none;contain:strict}
.sky-light{position:absolute;inset:-8% -6% 30%;opacity:0;will-change:opacity,transform;animation:sky-phase var(--sky-cycle) ease-in-out infinite,sky-drift var(--sky-drift) ease-in-out infinite alternate;
 /* Two pools of light per phase; the stops ease out so no pool shows an edge. */
 background:radial-gradient(var(--a-size) at var(--a-at),var(--a),color-mix(in srgb,var(--a) 55%,transparent) 30%,color-mix(in srgb,var(--a) 22%,transparent) 55%,color-mix(in srgb,var(--a) 6%,transparent) 76%,transparent 94%),
  radial-gradient(var(--b-size) at var(--b-at),var(--b),color-mix(in srgb,var(--b) 55%,transparent) 30%,color-mix(in srgb,var(--b) 22%,transparent) 55%,color-mix(in srgb,var(--b) 6%,transparent) 76%,transparent 94%)}
.sky-dusk{--a:var(--sky-dusk-1);--a-size:54% 62%;--a-at:80% 24%;--b:var(--sky-dusk-2);--b-size:44% 50%;--b-at:8% 10%}
.sky-night{--a:var(--sky-night-1);--a-size:60% 64%;--a-at:24% 22%;--b:var(--sky-night-2);--b-size:24% 30%;--b-at:58% 24%;animation-delay:calc(var(--sky-phase)*-2),calc(var(--sky-drift)/-3)}
.sky-dawn{--a:var(--sky-dawn-1);--a-size:68% 56%;--a-at:50% 2%;--b:var(--sky-dawn-2);--b-size:40% 46%;--b-at:90% 40%;animation-delay:calc(var(--sky-phase)*-1),calc(var(--sky-drift)*-2/3)}
@keyframes sky-phase{0%{opacity:0}12%,33%{opacity:1}45%,100%{opacity:0}}
@keyframes sky-drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
/* Lanterns: a bright core in a soft glow; .far ones are dimmer and blurred by their gradient alone. They rise on the
   translate property and sway on transform, so the two motions combine without extra elements. */
.mote{position:absolute;left:var(--x);bottom:var(--y);width:calc(var(--s)*3);height:calc(var(--s)*3);margin-left:calc(var(--s)*-1.5);border-radius:50%;opacity:0;will-change:translate,transform,opacity;
 background:radial-gradient(circle,var(--mote-core) 0 15%,color-mix(in srgb,var(--mote) 55%,transparent) 30%,color-mix(in srgb,var(--mote) 14%,transparent) 50%,transparent 70%);
 animation:mote-rise var(--d) linear var(--t) infinite,mote-sway 4.2s ease-in-out var(--t) infinite alternate}
.mote.far{background:radial-gradient(circle,color-mix(in srgb,var(--mote) 60%,transparent) 0,color-mix(in srgb,var(--mote) 26%,transparent) 32%,transparent 68%)}
.mote:nth-of-type(even){animation-name:mote-rise,mote-sway-left;animation-duration:var(--d),5.4s}
@keyframes mote-rise{0%{translate:0 0;opacity:0}14%,64%{opacity:1}100%{translate:0 -760px;opacity:0}}
@keyframes mote-sway{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
@keyframes mote-sway-left{from{transform:translateX(8px)}to{transform:translateX(-8px)}}
@media(max-width:560px){.sky{height:1300px}.mote:nth-of-type(even){display:none}}
.hero[data-still] .sky *{animation-play-state:paused}

/* Primary actions and cards lift toward the pointer and keyboard focus; the focus outline stays. */
.home .btn{transition:background-color .2s,border-color .2s,transform .25s var(--ease),color .2s,box-shadow .25s var(--ease)}
.home .btn-primary:hover,.home .btn-primary:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--lift)}
.home .btn-ghost:hover,.home .btn-ghost:focus-visible,.home .idea:hover,.home .idea:focus-visible,.home .chip:hover,.home .chip:focus-visible{transform:translateY(-1px)}
.home .btn:active,.home .idea:active,.home .chip:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.home .idea,.home .chip{transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
.home .play-card{transition:transform .45s var(--ease)}
.home .play-card a{transition:border-color .3s,box-shadow .45s var(--ease)}
.home .play-card:hover,.home .play-card:focus-within{transform:translateY(-5px)}
.home .play-card:hover a,.home .play-card:focus-within a{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 34px 64px -28px var(--card-shadow),0 0 52px -16px var(--glow)}
.home .play-card:hover img,.home .play-card:focus-within img{transform:scale(1.025)}

/* Below the fold, sections and figures settle in once as they reach the viewport. site.js adds .reveal only when motion
   is allowed and the element starts off screen, so without script the page is simply all there.
   After the lifts so a settling card fades and staggers instead of taking the card's own transition. */
.home .reveal{transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*var(--reveal-stagger))}
.home .reveal:not(.is-in){opacity:0;transform:translate3d(0,22px,0) scale(.98)}

@media(prefers-reduced-motion:reduce){
 .sky-light{animation:none}
 .sky-dusk{opacity:1}
 .mote{display:none}
 .home .btn-primary:hover,.home .btn-primary:focus-visible,.home .btn-ghost:hover,.home .btn-ghost:focus-visible,.home .idea:hover,.home .idea:focus-visible,.home .chip:hover,.home .chip:focus-visible,.home .btn:active,.home .idea:active,.home .chip:active,.home .play-card:hover,.home .play-card:focus-within,.home .play-card:hover img,.home .play-card:focus-within img{transform:none}
}

/* Responsive */
@media(max-width:1080px){
 .nav-links{display:none}
 .nav-menu{display:block}
 .nav-inner{gap:12px}
}
@media(max-width:960px){
 .hero-side{margin-top:22px}
 .steps{grid-template-columns:1fr}
 .step-stage{order:-1}
 .section-head.split,.play-grid,.yours-grid,.unreal-grid,.start,.own-idea,.evidence-grid,.questions-grid,.doc-section{grid-template-columns:1fr}
 .starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .footer-brand{grid-column:1/-1}
 .doc-layout{grid-template-columns:minmax(0,1fr)}
 .doc-aside{position:static}
 .doc-aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
 .turn{grid-template-columns:1fr}
 .play-cards{grid-template-columns:1fr 1fr}
 .play-card-lead{grid-column:1/-1;grid-row:auto}
}
@media(max-width:720px){
 .unreal-panel{width:36%;right:-2%;bottom:-44px}
 .unreal-shot figcaption{max-width:60%}
}
@media(max-width:560px){
 .nav-signin{display:none}
 .nav-actions .btn{margin-left:2px;padding:0 12px}
 .hero-actions .btn{flex:1 1 auto}
 .turn-ask{padding:16px}
 .stage-label,.turn-label{font-size:12px}
 .stage-toggle{width:34px;height:34px}
 .play-cards,.starter-grid{grid-template-columns:1fr}
 .play-card-text span:not(.play-chip){display:none}
 .play-card-lead .play-card-text span:not(.play-chip){display:block}
 .receipt-stats li{font-size:12.5px;padding:6px 10px}
 .step{padding:14px 12px 16px 10px;grid-template-columns:28px 1fr}
 .step-text span{font-size:14px}
 .tag{font-size:10.5px;padding:3px 8px}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .doc-steps>li{padding-left:42px}
 dialog{padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
 .btn-primary:hover{transform:none}
}
@media print{.sky,.site-nav,.nav-menu,.stage-controls,.site-footer,.skip,.doc-aside,.play-bar{display:none}body{background:#fff;color:#000}}

/* Long unbroken paths and URLs (e.g. %LOCALAPPDATA%\...) wrap instead of widening the page on phones. */
.article p,.article li,.article td{overflow-wrap:break-word}