/* ══════════════════════════════════════════════════
Easy Caption Pro – Website Styles
══════════════════════════════════════════════════ */
/* ── Theme tokens — exact defaults from ThemeManager.swift ── */
:root {
--hue: 219;
--bg-deep: #0F1624;
--bg-body: #0F1624;
--bg-panel: #1A212E;
--bg-controls: #171E2B;
--bg-surface: #1F2633;
--bg-button: #2A374F;
--bg-viewer: #0F151F;
--accent: #6B9FFF;
--accent-light: #98BDFF;
--accent-dim: #4778C8;
--text-title: #E0E0E0;
--text-body: #8899BA;
--text-muted: #7B8CAB;
--text-label: #AFB7C7;
--text-button: #CCCCCC;
--text-panel: #CCD0D9;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-card: 0 8px 32px rgba(0,0,0,.5);
--shadow-demo: 0 0 48px rgba(0,0,0,.38);
--shadow-btn: 0 4px 14px rgba(0,0,0,.35);
--ease-out-expo: cubic-bezier(.16,1,.3,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--max-w: 1200px;
}
/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Native scrolling (smooth for links to a section, clear of the fixed navbar). */
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg-body);color:var(--text-body);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.018;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:var(--accent-light);text-decoration:none;transition:color .25s}
a:hover{color:#fff}
/* ── Utility ── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.section-label{position:relative;z-index:2;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;font-weight:600;color:hsla(0,0%,100%,.85);text-align:center;margin-bottom:12px;width:fit-content;padding:6px 18px;border-radius:6px;background:hsla(220,70%,55%,.8);border:1px solid hsl(220,70%,55%);margin-left:auto;margin-right:auto}
.section-label.sl-a{background:hsla(220,70%,55%,.8);border-color:hsl(220,70%,55%)}
.section-label.sl-b{background:hsla(15,65%,50%,.8);border-color:hsl(15,65%,50%)}
.section-label.sl-c{background:hsla(140,50%,45%,.8);border-color:hsl(140,50%,45%)}
.section-label.sl-d{background:hsla(42,60%,48%,.8);border-color:hsl(42,60%,48%)}
.section-label.sl-e{background:hsla(260,55%,58%,.8);border-color:hsl(260,55%,58%)}
.section-label.sl-f{background:hsla(180,55%,45%,.8);border-color:hsl(180,55%,45%)}
.section-label.sl-g{background:hsla(340,60%,50%,.8);border-color:hsl(340,60%,50%)}
.section-label.sl-h{background:hsla(30,65%,50%,.8);border-color:hsl(30,65%,50%)}
.section-label.sl-i{background:hsla(280,55%,55%,.8);border-color:hsl(280,55%,55%)}
.section-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:var(--text-title);text-align:center;margin-bottom:16px}
.section-subtitle{text-align:center;max-width:600px;margin:0 auto 48px;color:var(--text-body);font-size:1.05rem}
/* ── Scroll-reveal ── */
/* Sections come in as they scroll into view: the label, the title and
its paragraph rise in turn, and the demo eases up and out to full size
a beat later. */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}
.showcase-text.reveal,.am-text.reveal,.flank-text.reveal{opacity:1;transform:none}
.showcase-text.reveal>*,.am-text.reveal>*,.flank-text.reveal>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.showcase-text.reveal.visible>*,.am-text.reveal.visible>*,.flank-text.reveal.visible>*{opacity:1;transform:none}
.showcase-text.reveal.visible>:nth-child(2),.am-text.reveal.visible>:nth-child(2),.flank-text.reveal.visible>:nth-child(2){transition-delay:.1s}
.showcase-text.reveal.visible>:nth-child(n+3),.am-text.reveal.visible>:nth-child(n+3),.flank-text.reveal.visible>:nth-child(n+3){transition-delay:.2s}
.showcase-demo.reveal,.am-demo.reveal,.flank-side.reveal{transform:translateY(48px) scale(.95);transition:opacity 1s var(--ease-out-expo) .15s,transform 1.1s var(--ease-out-expo) .15s}
.showcase-demo.reveal.visible,.am-demo.reveal.visible,.flank-side.reveal.visible{transform:none}
@media(prefers-reduced-motion:reduce){
.reveal,.reveal>*{transition:none!important}
}
/* ══════════════════════════════════════════════════
NAVBAR
══════════════════════════════════════════════════ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:hsla(var(--hue),57%,12%,.82);border-bottom:1px solid hsla(var(--hue),40%,24%,.5);transition:height .3s,background .3s,box-shadow .3s}
/* Scrolled, the bar is all but opaque, so it drops the blur (redrawn every frame of a scroll). */
.navbar.scrolled{background:hsla(var(--hue),57%,10%,.95);box-shadow:0 4px 30px rgba(0,0,0,.4);backdrop-filter:none;-webkit-backdrop-filter:none}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:64px;transition:height .3s}
.navbar.scrolled .container{height:52px}
.nav-brand{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;color:var(--text-title)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--text-body);position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px;transform:scaleX(0);transition:transform .3s var(--ease-spring)}
.nav-links a:hover{color:var(--text-title)}
.nav-links a.active{color:var(--text-title)}
.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{padding:8px 20px !important;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#fff !important;font-weight:600;box-shadow:var(--shadow-btn);transition:transform .25s,box-shadow .25s}
.nav-cta:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-title);border-radius:2px;transition:.25s}
/* ══════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════ */
.hero{padding:128px 0 96px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:max(1100px,120vw);height:max(1100px,120vw);background:radial-gradient(ellipse at 30% 40%,hsla(219,60%,42%,.2) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,hsla(260,60%,45%,.15) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,hsla(200,50%,40%,.1) 0%,transparent 70%);pointer-events:none;animation:auroraShift 8s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translateX(-50%) scale(1) rotate(0deg)}100%{transform:translateX(-50%) scale(1.08) rotate(3deg)}}
.hero.is-off::before,.hero.is-off .floating-word{animation-play-state:paused}
/* The app icon tucked behind the V, tilted like a sticker. It hangs off an empty
span just before the first word, so it follows the V wherever the line wraps.
The halo keeps the V clear of the bubble. */
.hero-tuck{position:relative}
/* app-icon-shadow.webp is the icon with its shadow baked in, padded 176px
a side (0.458 of the plate) so no browser clips the shadow's edge. */
.hero h1 .hero-icon{position:absolute;z-index:-1;max-width:none;left:-2.215em;top:-1.055em;width:2.99em;height:auto;transform:rotate(-19deg);pointer-events:none}
.hero h1 .hero-line1{filter:drop-shadow(0 .02em .08em rgba(9,13,22,.55))}
/* What the app is, in a label above the headline, as each section has above its title. */
.hero-label{margin-bottom:18px}
/* A big one-line headline: "Viral captions." in near-white, "Made easy."
in the accent's gradient, set tight. */
.hero h1{font-size:clamp(2rem,5vw,4.5rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;color:#E8EBF1;margin-bottom:24px;text-wrap:balance}
.hero h1 .hero-line1,.hero h1 .hero-line2{display:inline}
.hero h1 .hero-line2{padding-bottom:.08em;background:linear-gradient(165deg,#C4D7FF 0%,#80A8FF 42%,#5A89EF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Phones: one line, sized to the screen (it is 11.13 em wide), wrapping only if a font runs wider.
That leaves under 1 em beside the V, so the icon is smaller and further behind it, to stay on screen. */
@media(max-width:640px){.hero h1{font-size:min(2rem,calc((100vw - 48px) / 11.3))}.hero h1 .hero-icon{left:-1.125em;top:-.875em;width:1.85em}}
.hero-sub{max-width:610px;margin:0 auto 38px;font-size:1rem;line-height:1.65;color:var(--text-body)}
.hero-sub strong{font-weight:600;color:#fff}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;margin:34px auto 0}
.hero-cta-primary{display:inline-flex;align-items:center;gap:36px;padding:15px 22px 15px 26px;border-radius:12px;background:#7EA7FF;color:#0E1626;font-size:1rem;font-weight:600;box-shadow:0 12px 30px -12px rgba(107,159,255,.7);transition:transform .25s var(--ease-spring),background-color .25s}
.hero-cta-primary:hover{color:#0E1626;background:#96B8FF;transform:translateY(-2px)}
.hero-cta-secondary{display:inline-flex;align-items:center;gap:12px;font-size:1rem;font-weight:500;color:var(--text-title)}
.hero-cta-secondary svg{color:var(--accent)}
.hero-cta-secondary:hover{color:#fff}
.hero-actions{margin-top:36px}
.hero-note{margin-top:14px;font-size:.82rem;color:var(--text-muted)}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#fff;font-size:1rem;font-weight:600;box-shadow:var(--shadow-btn);transition:transform .3s var(--ease-spring),box-shadow .3s;position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--accent),#A855F7,var(--accent-light));opacity:0;z-index:-1;filter:blur(16px);transition:opacity .4s}
.btn-primary:hover{color:#fff;transform:scale(1.06) translateY(-2px);box-shadow:0 8px 28px rgba(107,159,255,.3),0 4px 14px rgba(0,0,0,.35)}
.btn-primary:hover::before{opacity:.6}
.btn-secondary{display:inline-block;width:100%;padding:14px 32px;border-radius:var(--radius-md);background:var(--bg-button);color:var(--text-title);font-size:1rem;font-weight:600;text-align:center;border:1px solid hsla(219,30%,30%,.4);transition:transform .3s var(--ease-spring),background .3s,border-color .3s}
.btn-secondary:hover{background:hsla(219,47%,38%,1);transform:scale(1.04) translateY(-2px);color:#fff;border-color:hsla(219,30%,40%,.6)}
/* ── Floating words ── */
.floating-words{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
/* Each word is placed by script.js (.fw); the word itself just wiggles. */
.fw{position:absolute;left:0;top:0;will-change:transform,opacity}
.floating-word{display:block;font-weight:700;color:#fff;padding:4px 10px;border-radius:5px;white-space:nowrap;animation:wiggle var(--wiggle-dur,2s) ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(var(--rot)) translateX(-2px)}50%{transform:rotate(var(--rot)) translateX(2px)}}
.hero .container{position:relative;z-index:1}
/* ══════════════════════════════════════════════════
APP MOCKUP (Hero)
══════════════════════════════════════════════════ */
.app-mockup{width:1060px;max-width:none;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.5),0 0 0 1px hsla(219,30%,24%,.6)}
/* Always render the hero mockup at the app's native 1060px minimum layout
(330pt editor + 400pt viewer + 330pt style panel) so that
wrapAndScale can scale a correctly-laid-out mockup on every viewport.
Narrowing the internal columns independently makes tabs and viewer
controls collide even when the outer mockup still appears to fit. */
.app-mockup .mockup-editor{grid-template-columns:330px minmax(400px,1fr) 330px;height:310px}
/* Chrome bar */
.mockup-chrome,.sd-chrome,.pc-chrome{display:flex;align-items:center;gap:8px;padding:0 14px;height:36px;background:hsl(219,50%,12%);border-bottom:1px solid hsla(219,30%,22%,.6)}
.chrome-dots{display:flex;gap:7px}
.cd-r,.cd-y,.cd-g{width:11px;height:11px;border-radius:50%}
.cd-r{background:#FF5F57}.cd-y{background:#FEBC2E}.cd-g{background:#28C840}
.chrome-title{font-size:.72rem;font-weight:600;color:var(--text-muted);margin-left:auto;margin-right:auto}
/* Editor layout */
.mockup-editor{display:grid;grid-template-columns:330px minmax(400px,1fr) 330px;height:310px;background:var(--bg-deep);position:relative}
/* Sidebar */
.me-sidebar{background:var(--bg-panel);border-right:1px solid hsla(219,30%,22%,.5);display:flex;flex-direction:column;overflow:hidden}
.me-sidebar-head{font-size:12px;font-weight:600;color:var(--text-panel);padding:6px 10px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-panel);border-bottom:1px solid hsla(219,30%,22%,.3)}
.me-detach-icon{opacity:.65;color:var(--text-body);flex-shrink:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.me-seg-nav{display:flex;align-items:center;justify-content:center;gap:6px;padding:3px 5px 4px;border-bottom:none}
.seg-arrow{display:flex;align-items:center;color:white;cursor:default;opacity:.65}
.seg-arrow.disabled{opacity:.25}
.seg-pill{font-size:12px;font-weight:700;color:#fff;background:hsla(220,70%,55%,.6);padding:3px 6px;border-radius:3px;transition:background .3s}
.me-script-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--text-button);background:var(--bg-button);margin:10px 12px 6px;padding:0 10px;height:28px;border-radius:6px;justify-content:center;border:none;cursor:default}
.me-script-btn svg{flex-shrink:0;opacity:.7}
.me-word-list{flex:1;overflow:hidden;padding:5px 5px 5px 5px;display:flex;flex-direction:column;gap:3px;position:relative}
.me-word-row{display:flex;align-items:center;gap:4px;padding:5px 5px;border-radius:6px;margin-bottom:0;transition:background .2s}
.me-add-word{color:#4CAF50;font-size:14px;font-weight:700;text-align:center;line-height:1;cursor:default;margin:2px 0}
.mw-del{font-size:11px;font-weight:700;color:rgba(255,77,77,.8);width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:default}
.mw-text{flex:1;font-size:10px;color:#fff;padding:2px 5px;border-radius:5px;background:var(--wc,hsla(220,70%,55%,.35));border:1px solid var(--wb,hsla(220,70%,55%,.5));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-time{width:52px;font-size:9px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,monospace;flex-shrink:0;padding:2px 4px;border-radius:3px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);text-align:right}
.mw-time::after{content:"s";font-size:7px;color:var(--text-muted);opacity:.6;margin-left:1px}
.me-word-row.active{background:var(--wbg,hsla(220,70%,55%,.3))}
/* Viewer */
.me-viewer{position:relative;display:flex;flex-direction:column;overflow:hidden}
.me-viewer-bg{flex:1;background:linear-gradient(135deg,hsl(219,50%,6%),hsl(219,40%,10%))}
.me-caption{position:absolute;bottom:50px;left:0;right:0;text-align:center;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 20px}
.me-caption span{font-size:1.1rem;font-weight:800;text-transform:uppercase;color:hsla(0,0%,100%,.3);transition:color .15s,text-shadow .15s,transform .15s}
.me-caption span.mc-active{color:#fff;text-shadow:0 0 20px hsla(219,60%,60%,.5);transform:scale(1.08)}
.me-caption span.mc-played{color:hsla(0,0%,100%,.6)}
.me-viewer-hud{display:flex;align-items:center;gap:6px;padding:8px 10px;background:rgba(23,30,43,.85);font-size:10px;color:var(--text-muted);position:relative}
.me-vol-icon{opacity:.7;flex-shrink:0;color:rgba(255,255,255,.7)}
.me-vol-slider{width:50px;height:10px;display:flex;align-items:center}
.me-vol-track{width:100%;height:3px;background:hsla(0,0%,100%,.12);border-radius:2px;position:relative}
.me-vol-fill{width:65%;height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.me-chip{display:flex;align-items:center;justify-content:center;padding:3px 5px;border-radius:4px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);flex-shrink:0;cursor:default}
.me-chip.active{background:rgba(107,159,255,.3);color:var(--accent)}
.me-play-btn{display:flex;align-items:center;justify-content:center;opacity:.8;position:absolute;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8)}
.me-hud-spacer{flex:1}
.me-time{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:rgba(255,255,255,.7);white-space:nowrap}
.me-zoom-pct{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:hsla(0,0%,100%,.5)}
.me-quality{font-size:10px;font-weight:500;color:rgba(255,255,255,.6);background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;white-space:nowrap}
/* Style Panel */
.me-panel{background:var(--bg-panel);border-left:1px solid hsla(219,30%,22%,.5);overflow:hidden;display:flex;flex-direction:column}
.me-panel-head{font-size:12px;font-weight:600;color:var(--text-panel);padding:6px 10px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-panel);border-bottom:1px solid hsla(219,30%,22%,.3)}
/* Scope picker (Whole Video | Current Segment) — matches panelTabPicker style */
.me-scope-picker{display:flex;gap:2px;padding:2px;margin:8px 12px;background:var(--bg-button);border-radius:6px;height:28px}
.me-scope-picker span{flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;padding:0 4px;border-radius:4px;color:var(--text-button);background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-scope-picker span.active{background:var(--accent);color:#fff;font-weight:600}
.me-panel-tabs{display:flex;gap:2px;padding:2px;margin:10px 12px 6px;height:28px;background:var(--bg-button);border-radius:6px}
.me-panel-tabs span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:500;color:var(--text-button);border-radius:4px;background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;padding:0}
.me-panel-tabs span.active{color:#fff;background:var(--accent)}
.me-panel-tabs svg{flex-shrink:0;opacity:.8;width:9px;height:9px}
.me-panel-divider{height:1px;background:var(--bg-button);margin:6px 0 0}
/* Render mode picker (2D | 3D) — matches renderModePicker: icon+text, bg buttonBackground, cornerRadius 7 */
.me-render-mode{display:flex;gap:2px;padding:2px;margin:8px 12px 6px;background:var(--bg-button);border-radius:7px;height:30px}
.me-render-mode span{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;padding:0 4px;border-radius:4px;color:var(--text-button);background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-render-mode span.active{background:var(--accent);color:#fff}
.me-render-mode svg{flex-shrink:0;opacity:.8}
.me-panel-body{padding:0;display:flex;flex-direction:column;gap:0;flex:1;overflow:hidden}
.me-section{border-bottom:1px solid hsla(219,30%,22%,.3)}
.me-section-head{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:default;background:var(--bg-panel);text-align:left}
.me-sec-icon{flex-shrink:0}
.me-sec-title{font-size:11px;font-weight:600;color:var(--text-title);flex:0 0 auto;white-space:nowrap}
.me-sec-sum{flex:1;min-width:0;margin-left:6px;text-align:right;font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-sec-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;display:none}
.me-sec-dot.active{display:block;background:var(--accent)}
.me-sec-chev{flex-shrink:0;color:var(--text-muted);opacity:.6;transition:transform .2s}
.me-section.expanded .me-sec-chev{transform:rotate(90deg)}
.me-section-content{padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.me-ctrl{display:flex;align-items:center;gap:6px;font-size:11px}
.mc-label{color:var(--text-muted);width:28px;flex-shrink:0;font-size:11px}
.mc-swatch{width:30px;height:20px;border-radius:3px;background:linear-gradient(135deg,#6B9FFF,#A855F7);border:1px solid rgba(128,128,128,.4);flex-shrink:0}
.mc-slider{flex:1;height:14px;display:flex;align-items:center}
.mc-track{width:100%;height:3px;background:hsla(219,30%,26%,.6);border-radius:2px;position:relative}
.mc-fill{height:100%;background:var(--accent);border-radius:2px;width:60%;transition:width .4s}
.mc-knob{position:absolute;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-radius:50%;left:60%;transition:left .4s;box-shadow:0 0.5px 2px rgba(0,0,0,.5),0 0 0 0.5px rgba(0,0,0,.1)}
.mc-val{color:var(--text-muted);font-variant-numeric:tabular-nums;width:40px;text-align:right;font-size:11px;font-family:ui-monospace,SFMono-Regular,monospace}
.mc-font{color:var(--text-body);font-size:11px}
/* Checkbox (macOS style) */
.me-check-row{gap:5px !important}
.me-check-row span:last-child{font-size:11px;color:var(--text-body)}
.mc-checkbox{width:14px;height:14px;border-radius:3px;border:1.5px solid hsla(219,30%,40%,.6);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.mc-checkbox.checked{background:var(--accent);border-color:var(--accent)}
.mc-checkbox.checked::after{content:"";display:block;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-0.5px,-0.5px)}
/* Scrub bar (between viewer and timeline, matching ControlsView) */
.me-scrub-bar{padding:6px 14px;background:var(--bg-viewer);display:flex;align-items:center}
.me-scrub-track{width:100%;height:4px;background:hsla(219,30%,26%,.5);border-radius:2px;position:relative}
.me-scrub-fill{height:100%;width:30%;background:var(--accent);border-radius:2px;transition:width .6s var(--ease-out-expo)}
.me-scrub-knob{position:absolute;top:50%;transform:translateY(-50%);left:30%;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .6s var(--ease-out-expo)}
/* Timeline strip — matches TimelineView.swift: 160px total, 50% word area / 50% waveform */
.me-timeline{height:auto;min-height:70px;background:var(--bg-viewer);border-top:1px solid hsla(219,30%,22%,.5);position:relative;overflow:visible;display:flex;flex-direction:column}
.me-timeline .me-tl-blocks,.me-timeline .me-tl-wave{will-change:transform}
.me-tl-blocks{display:flex;gap:0;padding:26px 8px 0;flex-shrink:0;position:relative;z-index:2}
.tl-b{height:20px;border-radius:5px;font-size:8px;font-weight:500;color:hsla(0,0%,100%,.8);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .15s;border:1px solid transparent}
.tl-b.tl-active{border-color:#6464FF;box-shadow:0 0 0 2px #6464FF;background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.2))}
.seg-a{background:hsla(220,70%,55%,.8);border-color:hsl(220,70%,55%);--seg:hsl(220,70%,55%)}.seg-b{background:hsla(15,65%,50%,.8);border-color:hsl(15,65%,50%);--seg:hsl(15,65%,50%)}.seg-c{background:hsla(140,50%,45%,.8);border-color:hsl(140,50%,45%);--seg:hsl(140,50%,45%)}.seg-d{background:hsla(42,60%,48%,.8);border-color:hsl(42,60%,48%);--seg:hsl(42,60%,48%)}
/* Timeline handles (stem + circle) — matching handleStemHeight=15, handleCircleRadius=5 */
.tl-b{position:relative;overflow:visible}
.tl-handle-l,.tl-handle-r{display:block;position:absolute;top:100%;width:2px;height:15px;background:var(--seg);font-style:normal;pointer-events:none}
.tl-handle-l{left:-1px}
.tl-handle-r{right:-1px}
.tl-handle-l::after,.tl-handle-r::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--seg)}
.tl-b:not(:last-child) .tl-handle-r{opacity:0}
.tl-b.tl-active .tl-handle-r{opacity:1}
.tl-b.tl-active + .tl-b .tl-handle-l{opacity:0}
.tl-b.tl-active .tl-handle-l,.tl-b.tl-active .tl-handle-r{z-index:3;background:#6464FF}
.tl-b.tl-active .tl-handle-l::after,.tl-b.tl-active .tl-handle-r::after{background:#6464FF}
.tl-b.locked-l .tl-handle-l::after{box-shadow:0 0 0 1.5px var(--bg-controls),0 0 0 3.5px #6464FF}
.me-tl-blocks{overflow:visible;padding-bottom:30px;transition:transform .6s var(--ease-out-expo)}
.me-tl-wave{height:28px;display:flex;align-items:center;gap:1px;padding:0 8px;overflow:visible;transition:transform .6s var(--ease-out-expo);position:relative;z-index:1}
.wv-bar{flex:1 1 0;border-radius:1px;background:hsla(219,40%,45%,.5);transition:background .2s}
.wv-bar.wv-active{background:hsla(219,55%,60%,.8)}
.me-tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:#EF4444;left:50%;z-index:2;pointer-events:none}
.me-tl-playhead::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #EF4444}
/* Timeline Interaction Animation */
.me-mouse{position:absolute;width:16px;height:16px;z-index:120;pointer-events:none;opacity:0;background:url('data:image/svg+xml;utf8,') no-repeat;background-size:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.me-mouse.clicking{transform:scale(0.85)}
/* The app's rubber band, as in the hero: a dashed outline over a faint fill. */
.me-rubber-band{position:absolute;z-index:50;pointer-events:none;display:none;background:repeating-linear-gradient(90deg,#6464FF 0 4px,transparent 4px 6px) top/100% 1px no-repeat,repeating-linear-gradient(90deg,#6464FF 0 4px,transparent 4px 6px) bottom/100% 1px no-repeat,repeating-linear-gradient(180deg,#6464FF 0 4px,transparent 4px 6px) left/1px 100% no-repeat,repeating-linear-gradient(180deg,#6464FF 0 4px,transparent 4px 6px) right/1px 100% no-repeat,rgba(100,100,255,.196)}
.me-context-menu{position:absolute;background:var(--bg-panel);border:1px solid hsla(219,30%,22%,.8);box-shadow:0 4px 12px rgba(0,0,0,0.5);border-radius:6px;padding:4px;z-index:110;display:none;flex-direction:column;min-width:170px}
.me-cm-item{padding:4px 8px;font-size:10px;color:var(--text-panel);border-radius:4px;cursor:default;font-weight:500;white-space:nowrap;text-align:left}
.me-cm-sub{display:flex;align-items:center;justify-content:space-between;gap:16px}
.me-cm-sub svg{opacity:.7}
.me-cm-item.hovered{background:var(--accent);color:#fff}
.me-cm-item.me-cm-destructive{color:#ef4444}
.me-cm-divider{height:1px;background:hsla(219,30%,22%,.5);margin:4px 0}
/* Timeline zoom bar */
.me-tl-zoom,.td-zoom{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:3px 10px;background:var(--bg-deep);border-top:1px solid hsla(219,30%,18%,.5)}
.tl-zoom-icon{flex-shrink:0;color:var(--text-muted);opacity:.6}
.tl-zoom-slider{width:70px;height:10px;display:flex;align-items:center;position:relative}
.tl-zoom-fill{height:3px;background:var(--accent);border-radius:2px;width:35%;position:absolute;left:0;top:50%;transform:translateY(-50%)}
.tl-zoom-knob{position:absolute;top:50%;transform:translateY(-50%);left:35%;width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tl-zoom-slider::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:3px;background:hsla(219,30%,26%,.5);border-radius:2px}
/* ══════════════════════════════════════════════════
SHOWCASE SECTIONS (Timeline / Script / Style)
══════════════════════════════════════════════════ */
.showcases{padding:0}
.showcase{padding:80px 0;position:relative}
.showcase:nth-child(odd){background:hsl(var(--hue),50%,12%)}
.showcase + .showcase{margin-top:0;border-top:1px solid hsla(219,30%,22%,.4)}
.showcase-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.showcase-split.reverse{direction:rtl}
.showcase-split.reverse > *{direction:ltr}
.showcase-text h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:var(--text-title);margin-bottom:16px;text-align:center;text-wrap:balance}
.showcase-text p{color:var(--text-body);font-size:1rem;line-height:1.7;margin-bottom:16px;text-align:center;text-wrap:balance}
.showcase-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.showcase-features li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--text-body)}
.showcase-features li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* ── Timeline Demo ── */
.timeline-demo{background:var(--bg-controls);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5);position:relative;padding:0}
.timeline-demo .td-blocks,.timeline-demo .td-wave{will-change:transform}
.td-blocks{display:flex;gap:0;padding:14px 16px 6px;flex-wrap:nowrap;position:relative;z-index:2;width:160%}
.td-b{border-radius:5px;font-size:.7rem;font-weight:600;color:hsla(0,0%,100%,.7);padding:6px 10px;flex:1;text-align:center;position:relative;transition:transform .15s;overflow:visible;border:1px solid transparent;min-width:0;display:flex;align-items:center;justify-content:center}
.td-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* Selected, as in the hero: a 1.5px ring either side of the block's edge. */
.td-b.td-active{z-index:1;border-color:#6363FF;box-shadow:inset 0 0 0 .5px #6363FF,0 0 0 1.5px #6363FF}
.td-b.td-scrub{z-index:2;border-color:#6363FF;box-shadow:inset 0 0 0 .5px #6363FF,0 0 0 1.5px #6363FF}
.td-blocks{overflow:visible;padding-bottom:30px;transition:transform .5s var(--ease-out-expo)}
.td-spacer{min-width:0}
/* Timeline demo handles (stem + circle) */
.td-handle-l,.td-handle-r{display:block;position:absolute;top:100%;width:2px;height:15px;background:var(--seg);font-style:normal;pointer-events:none;transition:transform 0.2s, opacity 0.2s}
.td-handle-l{left:-1px}
.td-handle-r{right:-1px}
.td-handle-l::after,.td-handle-r::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--seg);transition:box-shadow 0.2s, background 0.2s}
.td-b:not(:last-child):not(.spread-r):not(.handle-visible):not(.td-active):not(.td-scrub) .td-handle-r{opacity:0}
.td-b.td-active + .td-b .td-handle-l{opacity:0}
.td-b.spread-r .td-handle-r{opacity:1;transform:translateX(-6px)}
.td-b.spread-l .td-handle-l{transform:translateX(6px)}
.td-b.td-active .td-handle-l,.td-b.td-active .td-handle-r{z-index:3;background:#6464FF}
.td-b.td-active .td-handle-l::after,.td-b.td-active .td-handle-r::after{background:#6464FF}
.td-b.locked-l .td-handle-l::after{box-shadow:0 0 0 1.5px var(--bg-controls),0 0 0 3.5px #6464FF}
.td-wave{height:50px;display:flex;align-items:center;gap:1px;padding:0 16px;overflow:visible;transition:transform .5s var(--ease-out-expo);position:relative;z-index:1;width:160%}
.td-playhead{position:absolute;top:0;width:2px;background:#EF4444;pointer-events:none;opacity:0;z-index:5;transition:opacity .3s}
.td-playhead::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #EF4444}
/* ── Script Editor Demo ── */
.script-demo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5)}
.sd-chrome{position:relative}
.sd-chrome .chrome-title{position:absolute;left:0;right:0;text-align:center;font-size:.72rem;pointer-events:none}
.sd-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:hsl(0,0%,96%);border-bottom:1px solid hsl(0,0%,88%)}
.sd-font-picker{font-size:.68rem;font-weight:500;color:#444;background:#fff;border:1px solid #ddd;border-radius:4px;padding:2px 8px;display:flex;align-items:center;gap:4px;cursor:default}
.sd-size-group{display:flex;align-items:center;gap:0}
.sd-font-size{font-size:.68rem;font-weight:600;color:#444;background:#fff;border:1px solid #ddd;border-radius:4px 0 0 4px;padding:2px 8px;font-variant-numeric:tabular-nums;line-height:1}
.sd-stepper{display:flex;flex-direction:column;gap:0}
.sd-step{font-size:5px;color:#666;background:#fff;border:1px solid #ddd;border-left:0;padding:1px 4px;line-height:1;cursor:default;display:block}
.sd-step:first-child{border-radius:0 4px 0 0}
.sd-step:last-child{border-radius:0 0 4px 0;border-top:0}
.sd-tool-divider{width:1px;height:18px;background:#ddd;margin:0 2px}
.sd-tool-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:#666;cursor:default}
.sd-tool-btn:hover{background:hsla(0,0%,0%,.05)}
.sd-toolbar-spacer{flex:1}
.sd-toggle-group{display:flex;align-items:center;gap:5px;font-size:.62rem;color:#666}
.sd-toggle-track{width:26px;height:14px;border-radius:7px;background:#ccc;position:relative;cursor:default;flex-shrink:0}
.sd-toggle-knob{width:10px;height:10px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sd-toggle-label{white-space:nowrap}
.sd-body{background:hsl(0,0%,92%);height:220px;min-height:220px;overflow:hidden;padding:16px 20px;position:relative;box-sizing:border-box;font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif}
.sd-seg{display:flex;align-items:stretch;gap:10px;margin-bottom:8px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,margin .45s cubic-bezier(.4,0,.2,1)}
.sd-seg-bar{width:4px;border-radius:2px;flex-shrink:0;min-height:1em;transition:background .4s ease}
.sd-seg-text{font-size:.82rem;color:#222;line-height:1.6;padding:1px 0}
.sd-new-seg{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}
.sd-new-seg.visible{max-height:60px;opacity:1;margin-bottom:8px;pointer-events:auto}
#sdMove{transition:opacity .3s ease}
#sdMove.hidden{opacity:0}
#sdNewMove{transition:opacity .3s ease}
#sdNewMove.hidden{opacity:0}
#sdSeg3Move{transition:opacity .3s ease}
#sdSeg3Move.hidden{opacity:0}
.sd-cursor{display:inline-block;width:1.5px;height:14px;background:#6B9FFF;position:absolute;animation:cursorBlink 1s step-end infinite;opacity:0;transition:left .4s ease,top .4s ease;pointer-events:none}
.sd-cursor.active{opacity:1}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.sd-status{display:flex;align-items:center;gap:8px;padding:6px 12px;background:hsl(0,0%,96%);border-top:1px solid hsl(0,0%,88%);font-size:.62rem;color:#888}
.sd-sync{color:#22C55E;font-weight:500;margin-left:auto}
.sd-done-btn{color:#6B9FFF;font-weight:600;cursor:default;padding:2px 8px;border-radius:4px}
.sd-done-btn:hover{background:hsla(220,80%,60%,.1)}
/* ── Style Panel Demo ── */
.style-demo{width:100%;max-width:540px;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5)}
.sty-preview{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,hsl(219,50%,8%),hsl(219,40%,14%));padding:24px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
/* MAKE IT YOURS, said out loud (script.js): ANY over a word that changes as
it's named, shots pushing up and away. ?style=classic shows the earlier
demo. */
.ky{position:absolute;inset:0;container-type:size;overflow:hidden;color:#fff;text-align:center}
.ky-shot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqh}
.ky-any{font:700 4.2cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ky-word{position:relative;display:inline-block;padding:.06em .22em .1em;font:900 var(--size)/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.ky-word.ky-marker::before{content:"";position:absolute;z-index:-1;left:.04em;right:.04em;top:44%;bottom:.04em;background:var(--marker);transform:skew(-8deg) rotate(-1.5deg);border-radius:.06em}
.ky-word{isolation:isolate}
.ky-s-outline{color:#fff;-webkit-text-stroke:.09em #111;paint-order:stroke fill}
.ky-s-hollow{color:transparent;-webkit-text-stroke:.035em #fff}
.ky-s-shadow{color:#fff;text-shadow:.06em .08em 0 #FF5DA2}
.ky-s-glow{color:#fff;text-shadow:0 0 .1em #fff,0 0 .3em #9E7BFF,0 0 .6em #9E7BFF}
.ky-s-neon{color:#FFE7F4;text-shadow:0 0 .05em #fff,0 0 .18em #FF3FA8,0 0 .42em #FF3FA8,0 0 .8em #FF3FA8}
.ky-s-echo{color:#fff;text-shadow:.06em .06em 0 #FF2E63,.12em .12em 0 #FF9F1C,.18em .18em 0 #FFE14D,.24em .24em 0 #2EC4B6}
.ky-s-long{color:#FFE14D;-webkit-text-stroke:.05em #111;paint-order:stroke fill;text-shadow:.05em .05em 0 #111,.1em .1em 0 #111,.15em .15em 0 #111}
.ky-title .ky-line{font:900 15cqw/.98 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.ky-t{display:inline-block;margin:0 .07em}
.ky-finished .ky-t0{font-family:Anton,sans-serif;font-weight:400;padding:0 .12em;background:#FFE14D;color:#111;border-radius:.06em}
.ky-finished .ky-t1{font-family:Sacramento,cursive;font-weight:400;text-transform:none;font-size:1.3em;color:#FFE7F4;text-shadow:0 0 .18em #FF3FA8,0 0 .4em #FF3FA8}
.ky-finished .ky-t2{background:linear-gradient(100deg,#4CC1D9,#9E7BFF,#FF5DA2);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(.04em .05em 0 #111)}
.sty-caption{font-size:2.3rem;font-weight:800;text-transform:uppercase;background:linear-gradient(135deg,#6B9FFF,#A855F7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;transition:filter .6s,background .6s,padding .4s,border-radius .4s,-webkit-text-fill-color .4s,-webkit-text-stroke .4s;display:inline;padding:0;border-radius:0}
.sty-caption.sty-solid{-webkit-text-fill-color:currentColor;background:none !important;-webkit-background-clip:initial;background-clip:initial}
.sty-caption.sty-has-bg{padding:10px 20px;border-radius:10px}
.sty-word{transition:background .5s,padding .4s,border-radius .4s,box-decoration-break .3s}
.sty-word.sty-word-bg{padding:4px 10px;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sty-caption.sty-has-outline{-webkit-text-stroke:var(--sty-outline-w,1.5px) var(--sty-outline-c,#fff)}
.sty-caption.sty-has-glow{filter:drop-shadow(0 0 12px var(--sty-glow-c,hsla(260,70%,60%,.5))) drop-shadow(0 0 30px var(--sty-glow-c2,hsla(260,70%,60%,.25)))}
.sty-caption.sty-has-shadow{filter:drop-shadow(4px 6px 3px var(--sty-shadow-c,rgba(0,0,0,.7))) drop-shadow(6px 10px 16px var(--sty-shadow-c2,rgba(0,0,0,.4)))}
.sty-panel{background:var(--bg-panel)}
/* ══════════════════════════════════════════════════
ANIMATION: ENTRANCE, SPOKEN WORD, WHILE ON SCREEN
Live on the page: one caption over the app's three
tile grids for those parts of the Animation tab, in
their order. Each mix is assembled a step at a time:
the step's tiles light and the caption plays again
with everything chosen so far. Tiles as the app draws
them (AnimationEffectTile / SpokenStyleTile).
══════════════════════════════════════════════════ */
.am-showcase{padding:64px 0}
.am-flank{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:center;gap:52px;min-height:560px}
.am-text{text-align:left;max-width:440px}
.am-text h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;color:var(--text-title);margin-bottom:16px;text-align:center;text-wrap:balance}
.am-text p{color:var(--text-body);font-size:1rem;line-height:1.7;text-align:center;text-wrap:balance}
/* The demo sits in a box, like the other sections' demos: the caption over
the three menus, the steps beneath. */
.am-demo{display:flex;flex-direction:column;gap:18px;width:100%;max-width:720px;min-width:0;margin:0 auto;padding:24px 22px 20px;border:1px solid rgba(42,55,79,.85);border-radius:var(--radius-lg);background:var(--bg-viewer);box-shadow:0 14px 38px rgba(0,0,0,.34)}
.am-stage{display:flex;align-items:center;justify-content:center;min-height:200px;padding:0 6px}
.am-caption{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;column-gap:.32em;row-gap:.06em;max-width:400px;font:900 clamp(1.9rem,3.2vw,2.6rem)/1.08 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-align:center;transform-origin:50% 50%}
.am-caption .w{position:relative;display:inline-block;isolation:isolate;transform-origin:50% var(--bl,80%)}
.am-caption .wm{display:inline-block}
.am-caption b{display:inline-block;font-weight:inherit;transform-origin:50% calc(var(--bl,80%) - var(--mid,.35em))}
.am-caption b.untyped{opacity:0}
/* The cursor takes no room: a bar from the font's ascent to its descent,
0.08 em wide, centred on the typed edge. */
.am-cursor{position:relative;display:inline-block;width:0;height:0}
.am-cursor::before{content:"";position:absolute;left:-.04em;bottom:calc(-1 * var(--desc,.24em));width:.08em;height:calc(var(--asc,.95em) + var(--desc,.24em));background:#fff}
/* All three menus side by side, joined by plus signs, each a few of the
app's tiles and a tile saying there are more, with its step number
beneath: the step being added is ringed, the steps used so far stay
lit, the rest wait dimmed. Phones show one menu at a time with the
three numbers beneath. */
.am-steplist{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);gap:8px;margin:-6px 0 0;padding:0;list-style:none}
.am-steplist li:nth-child(2){grid-column:3}
.am-steplist li:nth-child(3){grid-column:5}
.am-steplist li{display:flex;justify-content:center}
.am-steplist i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--bg-button);font-size:11px;font-weight:700;font-style:normal;color:var(--text-body);transition:background-color .3s,color .3s,box-shadow .3s}
.am-steplist li.lit i{background:var(--accent);color:#fff}
.am-steplist li.now i{box-shadow:0 0 0 4px rgba(107,159,255,.22)}
.am-panels{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.am-plus{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid hsla(219,30%,30%,.7);color:var(--text-muted);transition:color .4s,border-color .4s}
.am-plus::before,.am-plus::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
.am-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.am-plus:has(+ .am-panel.lit){color:var(--accent);border-color:rgba(107,159,255,.5)}
.am-panel{border:1px solid hsla(219,30%,22%,.6);border-radius:11px;background:var(--bg-panel);box-shadow:var(--shadow-demo);padding:9px 9px 10px;opacity:.5;transition:opacity .4s,border-color .4s,box-shadow .4s}
.am-panel.lit{opacity:1}
.am-panel.now{border-color:rgba(107,159,255,.6);box-shadow:0 0 0 1px rgba(107,159,255,.25),0 0 28px -6px rgba(107,159,255,.35),var(--shadow-demo)}
.am-head{margin:1px 0 8px;font-size:11.5px;font-weight:600;line-height:16px;text-align:center;color:var(--text-title);white-space:nowrap}
.am-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.am-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px 5px;border:1.5px solid transparent;border-radius:6px;background:var(--bg-button);color:var(--text-body);transition:background-color .2s,border-color .2s,color .2s}
.am-tile.on{background:rgba(107,159,255,.6);border-color:var(--accent);color:#fff}
.am-aa{display:flex;align-items:center;height:22px;font-size:14px;font-weight:700;will-change:transform,opacity,filter,clip-path}
.am-name{font-size:9px;line-height:1.2;white-space:nowrap}
.am-tile.am-more{border:1px dashed hsla(219,30%,40%,.6);background:transparent;color:var(--text-muted)}
.am-more .am-aa{font-size:17px;font-weight:300}
.am-more .am-name{font-size:8px}
.am-tile.on .am-name{font-weight:600}
/* Spoken Word tile previews, as the app draws them. */
.am-w{position:relative;display:flex;align-items:center;justify-content:center;height:22px;font:700 12px/1 -apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;color:inherit}
.am-w-colour{color:#FFD94A}
.am-w-box{height:auto;margin:3px 0;padding:1px 4px;border-radius:3px;background:#E6B84D;color:#000;font-size:11px}
.am-w-underline{box-shadow:inset 0 -2px #E6B84D;height:16px;margin:3px 0}
.am-w-bigger{font-size:16px}
.am-w-glow{color:#fff;text-shadow:0 0 4px #FF8A6B,0 0 8px #FF8A6B}
.am-w-wave b{font-weight:700}
.am-w-wave b:nth-child(1){transform:translateY(-1px)}
.am-w-wave b:nth-child(2){transform:translateY(-4px)}
.am-w-wave b:nth-child(3){transform:translateY(-2px)}
.am-w-glitch{text-shadow:-1.5px 0 #00E6FF,1.5px 0 #FF294F}
.am-w-echo{text-shadow:2px 2px 0 #FF5A5A,4px 4px 0 #FFC24A,6px 6px 0 #4AD3FF}
/* While on Screen tiles at rest, as the app draws them; script.js plays
each preview once as it is picked. */
.am-tile[data-fx="float"] .am-aa b:first-child{transform:translateY(-1.4px)}
.am-tile[data-fx="float"] .am-aa b:last-child{transform:translateY(1.4px)}
.am-tile[data-fx="lettersway"] .am-aa b:first-child{transform:rotate(-9deg)}
.am-tile[data-fx="lettersway"] .am-aa b:last-child{transform:rotate(9deg)}
.am-aa b{display:inline-block}
/* The spoken word in the live caption, at Basic Recolour's values: Colour
#4FBEFF; Box half-opaque yellow, 0.04 em of padding and corner, from
the font's ascent to its descent; Underline white, 0.209 em thick,
centred 0.233 em (and 2 video px) under the baseline; Glow white at
60%, radius 0.1 em. Bigger, Wave, Echo (as Ripple) and the While on
Screen effects are drawn by script.js. */
.am-caption.fx-colour .w.said{color:#4FBEFF}
.am-caption.fx-box .w.said::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;top:calc(var(--bl) - var(--asc) - .04em);height:calc(var(--asc) + var(--desc) + .08em);border-radius:.04em;background:rgba(255,255,0,.5)}
.am-caption.fx-underline .w.said::after{content:"";position:absolute;left:0;right:0;top:calc(var(--bl) + .1577em);height:.209em;background:#fff}
.am-caption.fx-glow .w.said{text-shadow:0 0 .066em rgba(255,255,255,.6),0 0 .2em rgba(255,255,255,.6)}
@media(max-width:1180px){
.am-flank{grid-template-columns:1fr;gap:24px;min-height:0}
.am-text{text-align:center;max-width:620px;margin:0 auto}
}
@media(max-width:860px){
.am-panels{grid-template-columns:minmax(0,320px);justify-content:center}
.am-plus{display:none}
.am-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.am-panel.now{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s}
.am-steplist{display:flex;flex-direction:row;justify-content:center;margin-top:12px}
}
@media(max-width:860px){
.am-flank{grid-template-columns:1fr;gap:20px;min-height:0}
.am-text{text-align:center;max-width:none}
.am-demo{max-width:420px;width:100%;margin:0 auto;padding:18px 16px 16px}
.am-stage{min-height:140px}
.am-steplist{gap:14px}
}
@media(prefers-reduced-motion:reduce){.am-caption,.am-caption *,.am-tile .am-aa{animation:none!important;transition:none!important}}
/* ══════════════════════════════════════════════════
STYLE LAYERS DEMO
Captions on the whole-video style and on two layers,
each in its own look.
══════════════════════════════════════════════════ */
.layers-demo{width:100%;max-width:540px;margin-inline:auto}
.ly-frame{position:relative;aspect-ratio:16/9;border:1px solid hsla(219,30%,22%,.5);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);background:#0a0f17}
.ly-frame::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(4,7,12,.72));pointer-events:none}
/* The speaker's outline sits above the video and the frame's shade, round
corners matched to the frame's; the other side dims its video instead. */
/* Placed in the frame, not as grid cells: Safari on iOS 18 gave the cells of a grid sized by
aspect-ratio no height, since all they hold is absolutely placed, and the videos vanished. */
.ly-pane{position:absolute;top:0;bottom:0;width:calc(50% - 1.5px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ly-pane[data-layer="host"]{left:0;border-radius:11px 0 0 11px}
.ly-pane[data-layer="guest"]{right:0;border-radius:0 11px 11px 0}
.ly-pane .ly-video,.ly-pane .ly-tag{transition:opacity .4s}
.ly-pane:not(.on) .ly-video{opacity:.5}
.ly-pane:not(.on) .ly-tag{opacity:.55}
.ly-pane[data-layer="host"]{--key:#4CC1D9;background:radial-gradient(70% 60% at 50% 38%,rgba(76,193,217,.28),transparent 70%),linear-gradient(160deg,#16243a,#0e1626)}
.ly-pane[data-layer="guest"]{--key:#D94C98;background:radial-gradient(70% 60% at 50% 38%,rgba(217,76,152,.26),transparent 70%),linear-gradient(200deg,#2a1830,#140f1e)}
/* The speaking pane's ring sits over its video. */
.ly-pane::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--key);opacity:0;transition:opacity .4s;pointer-events:none}
.ly-pane.on::after{opacity:1}
.ly-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ly-tag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(0,0,0,.45);font-size:10px;font-weight:600;color:#fff}
.ly-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--key)}
.ly-pane.on .ly-tag::before{animation:lyTalk .7s ease-in-out infinite alternate}
@keyframes lyTalk{to{transform:scale(1.5);box-shadow:0 0 6px var(--key)}}
/* Both layers share one look, each glowing in its own colour; script.js
drifts the caption up (the app's Drift up) while it shows. */
.ly-caption{position:absolute;z-index:3;left:6%;right:6%;bottom:9%;text-align:center;line-height:1.25;font-size:1.5rem;font-weight:800;text-transform:uppercase;transition:opacity .35s ease,transform .35s ease}
.ly-caption.out{opacity:0;transform:translateY(8px)}
.ly-caption[data-layer="host"]{color:#E8FBFF;text-shadow:0 0 16px rgba(76,193,217,.9),0 2px 8px rgba(0,0,0,.6)}
.ly-caption[data-layer="guest"]{color:#FFD9EE;text-shadow:0 0 16px rgba(217,76,152,.95),0 2px 8px rgba(0,0,0,.6)}
.ly-legend{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:.8rem;color:var(--text-body)}
.ly-key{display:inline-flex;align-items:center;gap:7px;opacity:.45;transition:opacity .3s,color .3s}
.ly-key.on{opacity:1;color:var(--text-title)}
.ly-key i{width:9px;height:9px;border-radius:50%;background:var(--key)}
.ly-key[data-layer="host"]{--key:#4CC1D9}
.ly-key[data-layer="guest"]{--key:#D94C98}
/* Scope picker */
.sty-scope{display:flex;gap:2px;padding:2px;margin:8px 14px;background:var(--bg-button);border-radius:6px;height:28px}
.sty-scope span{flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;padding:0 4px;border-radius:4px;color:var(--text-button);background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sty-scope span.active{background:var(--accent);color:#fff;font-weight:600}
.sty-tabs{display:flex;gap:2px;padding:2px;margin:10px 14px 6px;background:var(--bg-button);border-radius:6px;height:28px}
.sty-tabs span{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:500;color:var(--text-button);border-radius:4px;background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;padding:0;overflow:hidden;text-overflow:ellipsis}
.sty-tabs span svg{width:9px;height:9px;flex:0 0 9px}
.sty-tabs span.active{color:#fff;background:var(--accent);font-weight:600}
/* Render mode (2D | 3D) */
.sty-render-mode{display:flex;gap:2px;padding:2px;margin:0 14px 8px;background:var(--bg-button);border-radius:6px;height:28px}
.sty-render-mode span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:600;padding:0 4px;border-radius:4px;color:var(--text-button);background:transparent;cursor:default;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sty-render-mode span.active{background:var(--accent);color:#fff}
.sty-render-mode svg{flex-shrink:0;opacity:.8}
.sty-body{padding:0;display:flex;flex-direction:column;gap:0;flex:1;overflow:hidden}
.sty-section-content{display:flex;flex-direction:column;gap:8px;padding:0 12px 10px;background:var(--bg-panel);height:250px;overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,padding .4s cubic-bezier(.4,0,.2,1);opacity:1;box-sizing:border-box}
.sty-section-content.sty-collapsed{height:0;opacity:0;padding-top:0;padding-bottom:0}
.sty-mini-toggle{display:flex;align-items:center;cursor:default}
.sty-mt-track{width:28px;height:16px;border-radius:8px;background:hsla(219,20%,30%,.6);position:relative;transition:background .3s}
.sty-mini-toggle.active .sty-mt-track{background:var(--accent)}
.sty-mt-knob{width:12px;height:12px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .3s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sty-mini-toggle.active .sty-mt-knob{left:14px}
.sty-swatch{width:28px;height:20px;border-radius:5px;border:2px solid hsla(0,0%,100%,.15);transition:background .5s}
.sty-label{font-size:11px;font-weight:500;color:var(--text-muted)}
.sty-gradient{display:flex;flex-direction:column;gap:8px}
.sty-grad-bar{height:24px;border-radius:6px;background:linear-gradient(135deg,#6B9FFF,#A855F7);transition:background .8s}
.sty-grad-stops{display:flex;gap:8px}
.sty-stop{width:24px;height:24px;border-radius:6px;border:2px solid hsla(0,0%,100%,.2);transition:background .8s}
#styStop1{background:#6B9FFF}
#styStop2{background:#A855F7}
.sty-row{display:flex;align-items:center;gap:10px}
.sty-font-picker{flex:1;display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--bg-button);border-radius:5px;font-size:11px;color:var(--text-button);font-weight:500;border:1px solid hsla(219,30%,22%,.5);transition:background .2s}
.sty-row .sty-label{width:60px;flex-shrink:0}
.sty-slider{flex:1;height:20px;display:flex;align-items:center}
.sty-slider-track{width:100%;height:4px;background:hsla(219,30%,26%,.6);border-radius:2px;position:relative}
.sty-slider-fill{height:100%;background:var(--accent);border-radius:2px;width:50%;transition:width .6s var(--ease-out-expo)}
.sty-slider-knob{position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;background:#fff;border-radius:50%;left:50%;transition:left .6s var(--ease-out-expo);box-shadow:0 0.5px 2px rgba(0,0,0,.5),0 0 0 0.5px rgba(0,0,0,.1)}
.sty-val{font-size:11px;font-weight:600;color:var(--text-body);font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,monospace;min-width:32px;text-align:right}
.sty-angle-wheel{width:40px;height:40px;border-radius:50%;border:1.5px solid hsla(219,30%,60%,.3);position:relative;background:hsla(220,70%,55%,.08);flex-shrink:0}
.sty-angle-pointer{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .6s var(--ease-out-expo);transform:rotate(135deg)}
.sty-angle-line{position:absolute;top:50%;left:50%;width:1.5px;height:16px;background:var(--accent);transform-origin:bottom center;transform:translate(-50%,-100%)}
.sty-angle-dot{position:absolute;top:4px;left:50%;width:8px;height:8px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%)}
.sty-checkboxes{display:flex;gap:16px;margin-top:4px}
.sty-check-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-body);cursor:default}
.sty-checkbox{width:16px;height:16px;border-radius:4px;border:1.5px solid hsla(219,30%,40%,.62);background:var(--bg-button);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;flex-shrink:0}
.sty-checkbox.checked{background:var(--accent);border-color:var(--accent)}
.sty-checkbox.checked::after{content:"";display:block;width:3.5px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-0.5px,-0.5px)}
/* Exact CaptionStylePanel.swift control geometry. */
.style-demo .sty-body{height:520px;min-height:520px;max-height:520px;overflow:hidden}
.style-demo #styContentFont{height:475px}
.style-demo .me-sec-spacer{flex:1}
.style-demo .me-sec-title{flex:0 1 auto}
.style-demo .sty-reset-icon{color:var(--text-muted);width:16px;height:16px;padding:3px;opacity:.78;flex:0 0 16px}
.style-demo .sty-render-mode{height:30px;border-radius:7px}
.style-demo .sty-render-mode span{font-size:12px;font-weight:500;border-radius:5px;gap:4px}
.style-demo .sty-render-mode span.active{font-weight:700}
.style-demo .sty-render-mode svg{width:10px;height:10px}
.sty-check-row{display:flex;align-items:center;gap:7px;min-height:16px;font-size:11px;color:var(--text-label)}
.sty-inline-checks{gap:18px}
.sty-inline-checks .sty-check-row{flex:0 0 auto}
.sty-field-label{font-size:10px;font-weight:500;color:var(--text-label)}
.sty-font-control{display:flex;flex-direction:column;gap:2px}
.sty-font-control-row{display:flex;align-items:center;gap:8px}
.sty-font-control-row .sty-font-picker{height:26px;padding:4px 8px;border:0;border-radius:4px;font-size:12px;font-weight:400}
.sty-choose-button{display:flex;align-items:center;justify-content:center;height:26px;padding:0 10px;border-radius:4px;background:var(--bg-button);color:var(--text-button);font-size:11px;white-space:nowrap}
.sty-colour-label{margin-top:2px}
.sty-fill-picker{display:flex;align-items:center;gap:4px;padding:3px;border-radius:7px;background:rgba(136,153,186,.08)}
.sty-fill-picker span{height:28px;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:5px;color:var(--text-button);font-size:10px}
.sty-fill-picker span.active{background:var(--accent);color:#fff;font-weight:600}
.sty-solid-dot,.sty-half-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:currentColor}
.sty-half-dot{background:linear-gradient(90deg,#fff 0 50%,transparent 50%);border:1px solid currentColor}
.sty-gradient-card{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:8px;background:rgba(136,153,186,.05);border:.5px solid rgba(136,153,186,.10)}
.sty-gradient-card .sty-gradient{gap:0}
.sty-gradient-card .sty-grad-bar{height:28px;position:relative;border-radius:6px;background:linear-gradient(90deg,#ff6b0a,#8f6b57);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.sty-grad-handle{position:absolute;top:-3px;width:10px;height:34px;border-radius:3px;border:1px solid rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(0,0,0,.28);transform:translateX(-50%);background:#8f6b57}
.sty-grad-handle.selected{left:5px;border:2px solid #fff;background:#ff6b0a}
.sty-grad-handle:not(.selected){left:calc(100% - 5px)}
.sty-grad-help{margin:0;font-size:9px;line-height:1.35;color:var(--text-muted)}
.sty-stop-editor{display:flex;align-items:center;gap:8px}
.sty-stop-swatch{width:38px;height:24px;border-radius:5px;background:#ff6b0a;border:.5px solid rgba(128,128,128,.4);flex:0 0 38px}
.sty-stop-copy{display:flex;flex-direction:column;gap:1px;min-width:68px;line-height:1.15}
.sty-stop-copy strong{font-size:10px;font-weight:500;color:var(--text-label);white-space:nowrap}
.sty-stop-copy small{font-size:9px;color:var(--text-muted)}
.sty-gradient-actions{display:flex;align-items:center;gap:6px}
.sty-gradient-actions span{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:5px;background:rgba(136,153,186,.07);color:var(--accent);font-size:9px;font-weight:500;white-space:nowrap}
.sty-gradient-actions b{font-size:12px;font-weight:500;line-height:1}
.sty-gradient-divider{height:1px;background:rgba(136,153,186,.22)}
.sty-direction-row{display:flex;align-items:center;gap:4px}
.sty-direction-row>span:not(.sty-val){height:28px;flex:1;display:flex;align-items:center;justify-content:center;border-radius:5px;background:var(--bg-button);color:var(--text-button);font-size:16px;line-height:1}
.sty-direction-row>span.active{background:var(--accent);color:#fff}
.sty-gradient-card .sty-angle-wheel{width:28px;height:28px}
.sty-gradient-card .sty-angle-line{height:10px}
.sty-gradient-card .sty-angle-dot{top:4px}
.sty-gradient-card .sty-val{min-width:38px;width:38px;font-size:10px;font-weight:400}
.sty-spread-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text-label)}
.sty-spread-head span:last-child{font-family:ui-monospace,SFMono-Regular,monospace;color:var(--text-body)}
.sty-slider{height:22px}
.sty-slider-track{height:4px;background:var(--bg-button)}
.sty-slider-knob{width:18px;height:18px}
.sty-spread-slider{width:100%}
.sty-seamless{font-size:10px;color:var(--text-body)}
/* ══════════════════════════════════════════════════
3D CAPTIONS DEMO
══════════════════════════════════════════════════ */
.threed-demo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5);background:var(--bg-panel);text-align:center}
.threed-stage{aspect-ratio:16/9;background:var(--bg-viewer);display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.td3-video{width:100%;height:auto;display:block}
/* Centred showcase: the text in the middle and its demos straight on the
page either side, as transparent videos rather than in cards. */
.flank{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);align-items:center;gap:24px}
.flank-text{text-align:center}
.flank-text h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;color:var(--text-title);margin-bottom:16px;text-wrap:balance}
.flank-text p{color:var(--text-body);font-size:1rem;line-height:1.7;text-wrap:pretty}
.flank-side{display:flex;justify-content:center;min-width:0}
.flank-video{display:block;width:100%;max-width:330px;aspect-ratio:3/4;object-fit:contain}
/* Triggers: Style Triggers looks playing one after another as captions on
the feature frames' own background (tools/presets-reel/make_triggers.py);
the trigger rows each uses light up underneath. */
.triggers-demo{width:100%;max-width:540px;margin-inline:auto}
.tg-stage{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid hsla(219,30%,22%,.5);background:#0E1420;box-shadow:var(--shadow-demo)}
.tg-stage video{display:block;width:100%;height:100%;object-fit:cover}
.tg-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:14px;font-size:.8rem;color:var(--text-body)}
.tg-keys span{display:inline-flex;align-items:center;gap:7px;opacity:.45;transition:opacity .3s,color .3s}
.tg-keys span.on{opacity:1;color:var(--text-title)}
.tg-keys i{width:9px;height:9px;border-radius:50%;background:#D97B4C}
@media(prefers-reduced-motion:reduce){.tg-keys span{transition:none}}
@media(max-width:860px){
.flank{grid-template-columns:1fr 1fr;gap:4px 8px}
.flank-text{grid-column:1/-1;grid-row:1;margin-bottom:8px}
.flank-side{grid-row:2}
.flank-video{max-width:240px}
}
/* ══════════════════════════════════════════════════
FEATURES
══════════════════════════════════════════════════ */
/* The features in five short chapters, each a band with one label and
headline and its two or three features side by side. Every feature's live
demo plays in the same 16:9 frame, the same size across its chapter, so the
rows balance: videos fill it, and the app panels sit inside it with their
own borders taken off, so it's never boxes in boxes (script.js "FEATURE
TILES" scales each). Below the frame are the feature's name, its title and
one line; the chapter's label is the band's only colour. */
/* the chapter's content sits as far below its title as above its bottom
edge (.showcase.chapter, as the narrow .showcase paddings come later) */
.showcase.chapter{padding:80px 0 72px}
.chapter-head{text-align:center;margin-bottom:72px}
.chapter-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--text-title);text-wrap:balance}
.bento{display:grid;gap:40px 48px}
.bento.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* a chapter with one tile lays it out as a row, centred as a pair: its demo
at a two-up column's size on the left, its words beside it */
.bento.one{grid-template-columns:minmax(0,1fr)}
.bento.one .tile{display:grid;grid-template-columns:minmax(0,552fr) minmax(0,400fr);gap:48px;align-items:center;width:100%;max-width:1000px;margin-inline:auto;text-align:left}
.bento.one .tile-text{align-items:flex-start;padding:0}
.bento.one h3{font-size:1.6rem;margin-bottom:10px}
.bento.one p{max-width:400px;font-size:1.02rem;line-height:1.6}
.tile{display:flex;flex-direction:column;min-width:0;text-align:center}
.tile-media{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:radial-gradient(90% 80% at 50% 0%,rgba(107,159,255,.06),transparent 70%),#0E1420;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.tile-media .tr-panel,.tile-media .timeline-demo,.tile-media .script-demo,.tile-media .style-demo,.tile-media .ly-frame,.tile-media .tg-stage,.tile-media .am-demo,.tile-media .sz-demo,.tile-media .prores-demo{border:0;border-radius:0;box-shadow:none}
.tile-media .tr-panel,.tile-media .am-demo,.tile-media .sz-demo,.tile-media .prores-demo{background:transparent}
.tile-media .ly-legend,.tile-media .tg-keys{display:none}
/* As a chapter scrolls in, its label and headline rise in turn, then its
features follow one after another (--d, from script.js): each frame
settles from a touch smaller as its text rises in under it. Opacity and
transform only, so it stays light. */
.chapter-head.reveal{opacity:1;transform:none}
.chapter-head.reveal>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.chapter-head.reveal.visible>*{opacity:1;transform:none}
.chapter-head.reveal.visible>:nth-child(2){transition-delay:.08s}
.tile.reveal{transform:translateY(36px);transition:opacity .9s var(--ease-out-expo) var(--d,0s),transform 1s var(--ease-out-expo) var(--d,0s)}
/* the rule above outranks .reveal.visible by coming later, so a shown tile
has to drop its offset here or it stays 36px low */
.tile.reveal.visible{transform:none}
.tile.reveal .tile-media{transform:scale(.965);transition:transform 1.2s var(--ease-out-expo) var(--d,0s)}
.tile.reveal.visible .tile-media{transform:none}
.tile.reveal .tile-text{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out-expo) calc(var(--d,0s) + .18s),transform .8s var(--ease-out-expo) calc(var(--d,0s) + .18s)}
.tile.reveal.visible .tile-text{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tile.reveal .tile-media,.tile.reveal .tile-text{transition:none!important;transform:none}}
/* Style Layers in a feature frame: no speaker ring, the caption's look says
who is talking. */
.tile-media .ly-pane{border-radius:0}
.tile-media .ly-pane::after{display:none}
.tile-fit{position:absolute;left:50%;top:50%;transform-origin:50% 50%}
.tile-text{display:flex;flex-direction:column;align-items:center;padding:20px 12px 0}
.tile-eyebrow{margin-bottom:8px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.tile h3{font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--text-title);margin-bottom:6px;text-wrap:balance}
.tile p{max-width:380px;font-size:.92rem;line-height:1.55;color:var(--text-body);text-wrap:balance}
@media(max-width:900px){.bento.three{grid-template-columns:repeat(2,minmax(0,1fr))}.bento.three .tile:last-child{grid-column:1/-1}}
@media(max-width:860px){.showcase.chapter{padding:56px 0}.chapter-head{margin-bottom:56px}}
@media(max-width:700px){.showcase.chapter{padding:48px 0}.chapter-head{margin-bottom:48px}.bento.one .tile{display:flex;gap:0;text-align:center}.bento.one .tile-text{align-items:center;padding:20px 12px 0}.bento.one h3{font-size:1.2rem;margin-bottom:6px}.bento.one p{max-width:380px;font-size:.92rem;line-height:1.55}.bento.two,.bento.three{grid-template-columns:minmax(0,1fr);gap:36px}.bento.three .tile:last-child{grid-column:auto}}
/* 3D Captions: one video of the app's 3D looks taking turns, on the feature
frames' own background (tools/3d-stacks-reel/compose_stage.py). */
.td3-stage{width:100%;aspect-ratio:16/9;background:#0E1420}
.td3-stage video{display:block;width:100%;height:100%;object-fit:cover}
/* ══════════════════════════════════════════════════
STACK ANIMATIONS DEMO
══════════════════════════════════════════════════ */
.stack-demo{width:320px;max-width:none;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5);background:var(--bg-panel)}
.stack-preview{background:var(--bg-viewer);padding:44px 24px 40px;display:flex;align-items:center;justify-content:center;min-height:150px;overflow:hidden}
.stack-text-wrap{display:flex;align-items:center;justify-content:center;gap:.35em;will-change:transform;position:relative;z-index:2}
.stack-tw-cursor{font-weight:300;color:#fff;animation:blink .6s step-end infinite;margin-left:-6px;display:none}
.stack-preview span{font-size:1.3rem;font-weight:900;text-transform:uppercase;color:#fff;letter-spacing:2px;display:inline-block;will-change:transform,opacity,filter,clip-path}
.stack-panel{padding:0;height:430px;overflow:hidden;display:flex;flex-direction:column}
.stack-panel-header{order:0;flex:0 0 auto;border-bottom:1px solid hsla(219,30%,22%,.4)}
.stack-panel .sty-tabs{margin:10px 12px 6px}
.stack-panel .sty-scope{margin:8px 12px}
.stack-panel .stack-chain-mode{margin-bottom:4px}
.stack-panel-help{margin:0 12px 8px;font-size:10px;line-height:1.35;color:var(--text-muted)}
#stackHlHead{order:1}
#stackHlBody{order:2}
#stackIntroHead{order:3}
#stackIntroBody{order:4}
#stackMidHead{order:5}
#stackMidBody{order:6}
#stackOutroHead{order:7}
/* Section header — matches app collapsibleSection */
.sa-section-head{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:default}
.sa-head-icon{color:var(--accent);flex-shrink:0}
.sa-head-title{font-size:.72rem;font-weight:600;color:var(--text-title)}
.sa-head-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .3s}
.sa-head-dot.visible{opacity:1}
.sa-head-spacer{flex:1}
.stack-slots-label{display:none}
.sa-head-chevron{color:var(--text-muted);flex-shrink:0;transform:rotate(90deg)}
/* Expanded body — matches app content inset */
.sa-body{padding:0 12px 10px}
.sa-type-label{display:block;font-size:.65rem;font-weight:400;color:var(--text-muted);margin-bottom:6px}
/* 3-column grid — matches LazyVGrid */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sg-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 6px;border-radius:4px;border:none;background:var(--bg-button);cursor:default;transition:all .2s;pointer-events:none}
.sg-btn.sg-active{background:rgba(107,159,255,.12);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.sg-btn.sg-active .sg-icon svg{stroke:var(--accent);fill:none}
.sg-icon{display:flex;align-items:center;justify-content:center;height:14px}
.sg-icon svg{stroke:var(--text-muted)}
.sg-label{font-size:.52rem;font-weight:500;color:var(--text-muted);line-height:1;white-space:nowrap}
.sg-btn.sg-active .sg-label{color:var(--accent)}
.stack-content-wrap{position:relative;display:inline-block}
.stack-hl-segment{position:absolute;background:rgba(255,230,0,.88);border-radius:6px;z-index:1;opacity:0;pointer-events:none;transition:opacity .35s}
.stack-hl-word{position:absolute;background:rgba(255,230,0,.88);border-radius:5px;z-index:1;opacity:0;pointer-events:none;transition:left .18s cubic-bezier(.22,1,.36,1),width .18s cubic-bezier(.22,1,.36,1),opacity .2s}
.stack-text-wrap{z-index:2}
/* Middle animation panel section */
.sa-mid-section,.sa-hl-section{border-top:1px solid hsla(219,30%,22%,.4)}
.sa-intro-body,.sa-mid-body,.sa-hl-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .3s,padding .3s;padding:0 12px}
.sa-intro-body.sa-visible,.sa-mid-body.sa-visible,.sa-hl-body.sa-visible{max-height:220px;opacity:1;padding:0 12px 10px}
.stack-grid-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* Spoken animation toggle list with bottom fade */
.sa-hl-fade{position:relative}
.sa-hl-fade::after{content:"";position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,var(--bg-panel));pointer-events:none;z-index:2}
.sa-spoken-list{display:flex;flex-direction:column;gap:5px}
.sa-spoken-row{display:flex;align-items:center;gap:8px;padding:1px 0}
.sa-spoken-toggle{width:14px;height:14px;border-radius:3px;border:1.5px solid hsla(219,30%,40%,.62);background:var(--bg-button);flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.sa-spoken-toggle::after{content:"";display:none;width:3.5px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-.5px,-.5px)}
.sa-spoken-toggle.sa-on{background:var(--accent);border-color:var(--accent)}
.sa-spoken-toggle.sa-on::after{display:block}
.sa-spoken-name{font-size:.62rem;color:var(--text-muted);font-weight:500;white-space:nowrap}
/* ══════════════════════════════════════════════════
PRORES 4444 TRANSPARENT DEMO
══════════════════════════════════════════════════ */
/* Export: an editing app taking the transparent captions (the pointer drags
the Transparent output onto V2, above the footage, and the caption plays
over it), and beneath it everything Export writes, each named as in the
Export menu, the same caption playing in all of them. */
.prores-demo{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius-lg);box-shadow:var(--shadow-demo);border:1px solid hsla(219,30%,22%,.5);background:var(--bg-panel)}
.ed{border:1px solid rgba(42,55,79,.85);border-radius:8px;overflow:hidden;background:#0B0F17}
.ed-bar{position:relative;display:flex;align-items:center;gap:5px;padding:7px 9px;background:#141A26;border-bottom:1px solid rgba(42,55,79,.6)}
.ed-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-size:10px;font-weight:600;line-height:1;color:var(--text-body);text-align:center;pointer-events:none}
.ed-bar i{width:7px;height:7px;border-radius:50%;background:#2A374F}
.ed-view{position:relative;width:60%;aspect-ratio:16/9;margin:10px auto;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:4px;container-type:inline-size;background:#000}
.ed-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ed-cap{opacity:0;transition:opacity .25s}
.ed-cap.on{opacity:1}
.ed-tl{position:relative;display:flex;flex-direction:column;gap:5px;padding:8px 10px 10px;background:#111722;border-top:1px solid rgba(42,55,79,.7)}
.ed-track{display:flex;align-items:center;gap:8px}
.ed-name{width:18px;font:600 9px/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--text-muted)}
.ed-lane{position:relative;flex:1;height:26px;border-radius:4px;background:#0C111A;transition:box-shadow .2s}
.ed-lane.over{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ed-clip{position:absolute;left:3%;right:21%;top:2px;bottom:2px;display:flex;align-items:center;padding:0 7px;overflow:hidden;border-radius:3px}
.ed-clip b{font-size:9px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ed-vid{background:url("videos/people/export-poster.webp?v=2") left center/auto 100% repeat-x;box-shadow:inset 0 0 0 1px rgba(107,159,255,.55)}
.ed-cc{opacity:0;transform:scaleY(.4);transition:opacity .2s,transform .25s var(--ease-spring);background-color:#1c1d30;background-image:linear-gradient(45deg,#2a2c48 25%,transparent 25%),linear-gradient(-45deg,#2a2c48 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2c48 75%),linear-gradient(-45deg,transparent 75%,#2a2c48 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;box-shadow:inset 0 0 0 1px #9E7BFF}
.ed-cc.in{opacity:1;transform:none}
.ed-head{position:absolute;top:4px;bottom:4px;left:36px;width:2px;margin-left:-1px;background:#EF4444}
.ex-out{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.ex-frame{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:7px;container-type:inline-size;background:#10131C}
.ex-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ex-cap{position:relative;z-index:1;display:flex;flex-shrink:0;gap:.3em;margin-bottom:8%;white-space:nowrap;font:800 7cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 .05em .16em rgba(0,0,0,.55)}
.ex-cap span{transition:color .12s}
.ex-cap span.on{color:#FFE14D}
.ex-alpha .ex-frame{background-color:#12121e;background-image:linear-gradient(45deg,#1f2033 25%,transparent 25%),linear-gradient(-45deg,#1f2033 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1f2033 75%),linear-gradient(-45deg,transparent 75%,#1f2033 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.ex-green .ex-frame{background:#00FF00}
.ex-blue .ex-frame{background:#0000FF}
.ex-out figcaption{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:500;line-height:1.3;color:var(--text-body);text-align:center}
.ex-out figcaption .nw{white-space:nowrap}
.ex-main figcaption{white-space:nowrap}
.ex-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
/* The Transparent output, lifted and dragged by the pointer: it keeps the
tile's size and is scaled as one piece, so nothing in it re-lays out. */
.ex-ghost{position:absolute;left:0;top:0;z-index:5;opacity:0;pointer-events:none;border-radius:7px;box-shadow:0 0 0 1.5px var(--accent),0 12px 30px rgba(0,0,0,.6);transform-origin:0 0}
.ex-mouse{position:absolute;left:0;top:0;z-index:6;width:16px;height:16px;opacity:0;transition:opacity .25s;pointer-events:none;background:url('data:image/svg+xml;utf8,') no-repeat;transform-origin:1px 1px}
/* ══════════════════════════════════════════════════
PRIVACY / OFFLINE DEMO
══════════════════════════════════════════════════ */
.transcribe-demo{width:310px;max-width:none;margin-inline:auto;display:flex;align-items:center;justify-content:center;min-height:320px}
.tr-panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px;background:var(--bg-panel);border:1px solid hsla(219,30%,22%,.5);border-radius:12px;box-shadow:var(--shadow-card);position:relative;min-width:310px;overflow:hidden}
.tr-icon-area{position:relative;width:160px;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;overflow:visible}
.tr-icon-glow{position:absolute;width:80px;height:80px;border-radius:50%;background:var(--accent);opacity:.12;filter:blur(12px)}
.tr-doc-icon{position:relative;z-index:1}
@keyframes trShake{0%,100%{transform:rotate(-2deg) translateX(-1.5px)}50%{transform:rotate(2deg) translateX(1.5px)}}
.tr-doc-icon.shaking{animation:trShake .8s ease-in-out infinite}
.tr-title{font-size:14px;font-weight:600;color:var(--text-title)}
.tr-bar-wrap{width:250px}
.tr-bar-labels{display:flex;justify-content:space-between;margin-bottom:4px}
.tr-bar-label{font-size:11px;color:var(--text-body)}
.tr-bar-pct{font-size:11px;font-family:ui-monospace,SFMono-Regular,monospace;color:var(--text-muted)}
.tr-bar{height:6px;border-radius:3px;background:var(--bg-button);overflow:hidden}
.tr-bar-fill{height:100%;width:0%;border-radius:3px;background:var(--accent);transition:width .3s ease-out}
.tr-cancel{font-size:12px;font-weight:500;color:var(--text-body);background:var(--bg-button);border:none;padding:6px 16px;border-radius:6px;cursor:pointer}
.tr-confetti{position:absolute;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:700;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transform:scale(.01);will-change:transform,opacity}
.tr-confetti.launched{opacity:1;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity 0s}
.tr-confetti.fading{opacity:0;transition:opacity .5s ease-out}
.priv-icon{display:flex;align-items:center;color:var(--text-muted)}
.priv-text{flex:1;font-size:.8rem;font-weight:500;color:var(--text-body)}
.priv-check{font-size:.85rem;font-weight:700;color:var(--accent)}
/* ══════════════════════════════════════════════════
FEATURES TIMELINE (along the foot of Pricing)
══════════════════════════════════════════════════ */
/* Features timeline: the features play under a centred playhead like
captions on the app's timeline: segment-coloured blocks with handles
over a waveform tinted to each block's bounds. script.js loops it. */
.ft{--ft-top:104px;--ft-block-h:50px;--ft-gap:30px;position:relative;z-index:1;height:180px;margin-top:14px}
.ft::before{content:"";position:absolute;left:0;right:0;top:var(--ft-top);bottom:0;background:var(--bg-panel);border-top:1px solid rgba(42,55,79,.7);border-bottom:1px solid rgba(42,55,79,.7)}
.ft-viewport{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ft-track{display:flex;height:100%;margin:0;padding:0;list-style:none;will-change:transform;-webkit-user-select:none;user-select:none}
.ft-item{position:relative;flex:none;height:100%;padding:26px var(--ft-gap) 0 0}
.ft-block{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;height:var(--ft-block-h);padding:0 22px;border:1px solid var(--seg);border-radius:10px;color:#fff;font-size:15px;font-weight:600;white-space:nowrap;box-shadow:0 14px 26px -16px rgba(0,0,0,.85);transition:transform .5s var(--ease-spring),box-shadow .35s}
.ft-item.is-sized .ft-block{width:calc(var(--w) + var(--grow,0px))}
.ft-block::before,.ft-block::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.ft-block::before{background:var(--seg)}
.ft-block::after{background:#fff;opacity:0;transition:opacity .3s}
.ft-block svg{flex:none}
.ft-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ft-item.is-live .ft-block{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 34px -12px var(--seg)}
.ft-item.is-live .ft-block::after{opacity:.16}
/* Handles: a stem and dot under each edge, as on the app's timeline. */
.ft-h{position:absolute;top:100%;width:2px;height:18px;background:var(--seg);font-style:normal}
.ft-h-l{left:-1px}
.ft-h-r{right:-1px}
.ft-h::after{content:"";position:absolute;bottom:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--seg)}
.ft-wave{position:absolute;left:0;right:0;top:calc(var(--ft-top) + 12px);bottom:12px;display:flex;align-items:center;gap:2px;overflow:hidden;pointer-events:none}
.ft-wave i{flex:none;width:3px;border-radius:2px;background:hsla(219,40%,45%,.35)}
.ft-wave i.t{background:var(--seg);opacity:.5;transition:opacity .3s}
.ft-item.is-live .ft-wave i.t{opacity:.95}
.ft-playhead{position:absolute;top:18px;bottom:0;left:50%;z-index:2;width:2px;margin-left:-1px;background:#EF4444;pointer-events:none}
.ft-playhead::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #EF4444}
/* ══════════════════════════════════════════════════
PRESETS
══════════════════════════════════════════════════ */
.presets{position:relative;padding:80px 0 100px}
.presets-top-row{display:flex;justify-content:center;gap:48px;margin-bottom:32px}
.presets-layout{display:grid;grid-template-columns:1fr 2fr 1fr;gap:28px;align-items:center}
.presets-banner{background:var(--bg-panel);border-radius:var(--radius-lg);padding:48px 36px;text-align:center;box-shadow:var(--shadow-card);border:1px solid hsla(var(--hue),30%,26%,.4);transition:transform .3s,box-shadow .3s}
.presets-banner:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.presets-banner h3{font-size:1.5rem;font-weight:700;color:var(--text-title);margin-bottom:12px}
.presets-banner p{max-width:520px;margin:0 auto 28px;color:var(--text-body);font-size:1rem}
.caption-examples{display:flex;flex-direction:column;gap:28px;justify-content:center}
.caption-examples-left{transform:rotate(3deg)}
.caption-examples-right{transform:rotate(-3deg)}
.caption-demo{padding:8px 0}
.demo-preview{display:flex;align-items:center;justify-content:center;min-height:48px}
/* Caption demo styles (shared by presets) */
.demo-stack-words{display:flex;flex-direction:column;gap:0;text-align:center;width:100%;padding:0 4px;transform:scale(.8);transform-origin:center}
.stack-line{display:flex;gap:.25em;justify-content:center;align-items:baseline;line-height:1.05;font-size:1rem;font-weight:800;text-transform:uppercase;white-space:nowrap;transform-origin:center}
.stack-word{color:hsla(0,0%,100%,.3);transition:color .2s var(--ease-spring),text-shadow .2s}
.stack-word.stack-played{color:hsla(0,0%,100%,.55)}
.stack-word.stack-active{color:hsl(45,90%,55%);text-shadow:0 0 12px hsla(45,90%,55%,.45)}
.demo-neon-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.neon-word{font-size:1.1rem;font-weight:800;text-transform:uppercase;color:hsla(280,80%,75%,.25);letter-spacing:1px;transition:all .4s var(--ease-out-expo);text-shadow:none}
.neon-word.neon-active{color:#fff;text-shadow:0 0 7px hsla(280,80%,60%,.9),0 0 20px hsla(280,80%,60%,.6),0 0 40px hsla(280,80%,50%,.4);transform:scale(1.12)}
.demo-subtitle-lines{display:flex;flex-direction:column;gap:3px;text-align:center}
.subtitle-bg{background:rgba(0,0,0,.75);color:hsla(0,0%,100%,.55);font-size:.85rem;font-weight:500;padding:4px 12px;border-radius:3px;line-height:1.4;white-space:nowrap;transition:all .3s}
.subtitle-bg.subtitle-highlight{color:#fff;background:rgba(0,0,0,.85)}
.subtitle-bg.subtitle-highlight strong{color:hsl(45,90%,60%)}
.demo-stomp-words{display:flex;gap:8px;justify-content:center}
.stomp-word{font-size:1.2rem;font-weight:900;color:hsla(0,0%,100%,.35);text-transform:uppercase;letter-spacing:1px;text-shadow:1px 1px 0 hsla(219,50%,30%,.4),2px 2px 0 hsla(219,50%,20%,.3);transition:all .15s var(--ease-spring)}
.stomp-word.stomp-active{font-size:1.5rem;color:#fff;transform:scale(1.2);text-shadow:2px 2px 0 hsla(219,50%,35%,1),4px 4px 0 hsla(219,50%,22%,1),6px 6px 0 hsla(219,50%,12%,.8)}
.demo-appear-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.appear-word{font-size:1.05rem;font-weight:700;color:transparent;text-transform:uppercase;transition:all .35s var(--ease-spring);transform:scale(.6) translateY(8px)}
.appear-word.appear-visible{color:hsl(219,58%,72%);transform:scale(1) translateY(0)}
.appear-word.appear-active{color:#fff;transform:scale(1.12) translateY(0);text-shadow:0 0 12px hsla(219,60%,60%,.5)}
.demo-typewriter-words{display:flex;gap:8px;justify-content:center}
.tw-word{font-size:1.3rem;font-weight:700;text-transform:uppercase;color:transparent;transition:color .05s}
.tw-word.tw-typed{color:#fff}
.tw-cursor{font-size:1.3rem;font-weight:300;color:#fff;animation:blink .6s step-end infinite;margin-left:-4px}
@keyframes blink{50%{opacity:0}}
.demo-underline-words{display:flex;gap:10px;justify-content:center}
.ul-word{font-size:1.3rem;font-weight:700;text-transform:uppercase;color:hsla(0,0%,100%,.45);position:relative;transition:color .2s}
.ul-word::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:4px;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .15s}
.ul-word.ul-active{color:#fff}
.ul-word.ul-active::after{transform:scaleX(1);transition:transform .25s var(--ease-spring)}
.demo-flip-3d{display:flex;gap:8px;justify-content:center;perspective:500px}
.flip3d-group{display:inline-block;position:relative;transform-style:preserve-3d;font-size:1.2rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;will-change:transform,opacity}
.flip3d-layer{display:block;white-space:nowrap;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit}
.flip3d-layer-side{position:absolute;left:0;top:0}
/* Background pill words */
.demo-bg-pill-words{display:flex;gap:6px;justify-content:center}
.bgp-word{font-size:1rem;font-weight:700;text-transform:uppercase;color:hsla(0,0%,100%,.8);padding:4px 12px;border-radius:6px;background:hsla(220,60%,50%,.25);transition:all .3s var(--ease-spring)}
.bgp-word.bgp-active{color:#fff;background:hsla(220,60%,55%,.6);transform:scale(1.08);box-shadow:0 0 12px hsla(220,60%,55%,.3)}
/* Frosted glass 3D — matches app preset */
.demo-frosted-glass{perspective:400px;display:flex;justify-content:center}
.frost-panel{display:inline-flex;gap:8px;justify-content:center;padding:12px 28px;border-radius:16px;background:hsla(0,0%,100%,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid hsla(0,0%,100%,.35);box-shadow:0 6px 28px rgba(0,0,0,.25),inset 0 1px 0 hsla(0,0%,100%,.15),inset 0 -1px 0 hsla(0,0%,100%,.05);transform:rotateY(-5deg) rotateX(3deg);transform-style:preserve-3d;overflow:hidden}
.frost-word{display:inline-block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.95rem;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:hsla(0,0%,100%,.92);text-shadow:0 0 6px hsla(0,0%,100%,.15),0 2px 4px rgba(0,0,0,.3);-webkit-text-stroke:.4px hsla(0,0%,100%,.5);transform:translateY(120%);opacity:0}
/* Highlight/marker words */
.demo-highlight-words{display:flex;gap:6px;justify-content:center}
.hl-word{font-size:1rem;font-weight:700;text-transform:uppercase;color:hsla(0,0%,100%,.4);position:relative;padding:3px 6px;transition:color .15s;--wipe:0%}
.hl-word::after{content:"";position:absolute;left:0;top:0;width:var(--wipe);height:100%;background:hsla(45,90%,55%,.35);border-radius:3px;z-index:-1}
.hl-word.hl-active{color:#fff}
.hl-word.hl-played{color:hsla(0,0%,100%,.75)}
.hl-word.hl-played::after{width:100%}
/* Simple Background — single white rounded panel */
.demo-simple-bg{display:flex;justify-content:center}
.sbg-panel{display:inline-flex;gap:8px;padding:10px 28px;border-radius:8px;background:hsla(0,0%,100%,.95)}
.sbg-word{font-size:1rem;font-weight:800;text-transform:uppercase;color:hsla(0,0%,60%,1);transition:color .25s var(--ease-spring)}
.sbg-word.sbg-active{color:hsla(0,0%,10%,1)}
/* Segment highlight — continuous yellow bar across all words */
.demo-segment-hl{display:flex;gap:6px;justify-content:center;position:relative;padding:3px 0}
.seg-hl-bar{position:absolute;left:0;top:0;height:100%;width:0;background:#FFD700;border-radius:0;z-index:0;pointer-events:none}
.seg-hl-word{font-size:1rem;font-weight:700;text-transform:uppercase;color:hsla(0,0%,100%,.4);position:relative;z-index:1;padding:0 4px;transition:color .15s}
.seg-hl-word.seg-lit{color:#000}
.preset-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.preset-tag{padding:6px 16px;border-radius:100px;font-size:.82rem;font-weight:500;background:hsla(219,47%,31%,.5);color:var(--text-body);border:1px solid hsla(219,30%,36%,.4)}
/* ══════════════════════════════════════════════════
PRICING
══════════════════════════════════════════════════ */
/* Pricing fills the screen like the hero, with the features playing along
its foot. In the middle, two groups: the icon and the headline, open;
then the two plans, the button and the App Store note in a card lit
from above. The plans are the app paywall's: Monthly and Lifetime, which
is marked best value and edged in the brand's blue to violet. */
.pricing{position:relative;display:flex;flex-direction:column;min-height:min(calc(100vh - 64px),760px);padding:84px 0 0;overflow:hidden}
.pay{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:36px}
/* A still pool of the hero's light behind the icon and the card, so the
closing screen is lit like the opening one; it fades out well inside the
section, which keeps its plain band. */
.pay::before{content:"";position:absolute;left:50%;top:56%;width:min(1100px,150vw);height:680px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(107,159,255,.16),rgba(107,159,255,.06) 48%,transparent),radial-gradient(closest-side at 66% 64%,hsla(262,70%,58%,.09),transparent 62%);pointer-events:none;z-index:-1}
/* app-icon-shadow.webp is padded 176px a side (its plate is 384 of 736):
the margins take the padding back, leaving the plate 24px over the title. */
.pay-icon{width:168px;height:auto;margin:-40px 0 -16px;pointer-events:none}
.pay-title{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;color:#E8EBF1;margin-bottom:36px;text-wrap:balance}
.pay-title span{padding-bottom:.08em;background:linear-gradient(165deg,#C4D7FF 0%,#80A8FF 42%,#5A89EF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pay-card{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;padding:24px 32px 20px;border:1px solid transparent;border-radius:16px;background:linear-gradient(180deg,#1D2537,#151C29) padding-box,linear-gradient(180deg,rgba(152,189,255,.34),rgba(152,189,255,.1) 34%,rgba(42,55,79,.6)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -32px rgba(0,0,0,.85),0 16px 32px -18px rgba(0,0,0,.6)}
.pay-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:14px}
.pay-plan{position:relative;display:flex;flex-direction:column;align-items:center;padding:15px 10px 10px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}
.pay-plan.best{border-color:var(--accent);background:rgba(107,159,255,.07)}
.pay-plan i{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:3px 10px;border-radius:999px;background:#D33A3A;box-shadow:0 2px 12px rgba(211,58,58,.45);color:#fff;font-style:normal;font-size:.6rem;font-weight:800;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pay-plan-name{font-size:.72rem;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.best .pay-plan-name{color:var(--accent-light)}
.pay-plan b{font-size:clamp(1.7rem,2.6vw,2.05rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:#F4F6FB;font-variant-numeric:tabular-nums}
/* the pound sign small and raised, as prices are set */
.pay-plan b small{position:relative;top:-.62em;margin-right:.06em;font-size:.52em;font-weight:700;color:rgba(244,246,251,.7)}
.pay-plan b s{margin-right:.32em;font-size:.46em;font-weight:600;letter-spacing:0;color:var(--text-muted);text-decoration-thickness:.09em;vertical-align:.32em}
.pay-plan-note{font-size:.82rem;line-height:1.4;color:var(--text-muted);text-wrap:balance}
.pay-cta{justify-content:center;width:100%;padding:13px 24px;font-size:1.05rem}
/* The site's flat accent button; on hover it lifts a little rather than
growing, and without the colour glow. */
.pay-card .pay-cta:hover{transform:translateY(-1px)}
.pay-card .pay-cta::before{display:none}
.pay-card .pay-cta:not([href]){pointer-events:none;cursor:default}
/* One block in the middle of the card, its ticks in a straight line */
.pay-points{display:grid;gap:7px;width:fit-content;margin:15px 0 0;padding:0;list-style:none;text-align:left;font-size:.82rem;line-height:1.35;color:var(--text-body)}
.pay-points li{position:relative;padding-left:21px}
.pay-points li::before{content:"";position:absolute;left:2px;top:.3em;width:10px;height:5px;border-left:2px solid var(--accent-light);border-bottom:2px solid var(--accent-light);transform:rotate(-45deg)}
.pricing-note{margin-top:12px;font-size:.8rem;color:var(--text-muted);text-wrap:balance}
.pricing-note svg{margin-right:6px;vertical-align:-1px;opacity:.85}
.pricing-req{margin-top:3px}
.pricing-req span{display:inline-block;max-width:100%}
.pricing .ft{margin-top:auto}
/* Pricing's hellos rise from just above the features strip (script.js). */
.pricing .floating-words{height:auto;bottom:180px}
.pricing.is-off .floating-word{animation-play-state:paused}
/* short windows: tighter, so the features strip still shows with the rest */
@media(max-height:920px){.pricing{padding-top:54px}.pay{padding-bottom:20px}.pay-icon{width:140px;margin:-34px 0 -13px}.pay-title{margin-bottom:21px}.pay-points{margin-top:12px;gap:5px}}
@media(max-height:760px){.pricing{padding-top:44px}.pay{padding-bottom:14px}.pay-icon{width:112px;margin:-27px 0 -11px}.pay-title{margin-bottom:17px}.pay-card{padding:18px 26px 14px}.pay-plans{margin-bottom:12px}.pay-plan{padding:13px 10px 9px}.pay-plan b{font-size:1.55rem}.pricing-note{margin-top:10px}}
@media(max-height:700px){.pay-points{margin-top:10px;font-size:.78rem}.pricing{padding-top:32px}.pay{padding-bottom:10px}.pay-icon{width:96px;margin:-23px 0 -9px}.pay-title{font-size:2.6rem;margin-bottom:14px}.pay-card{padding:16px 24px 12px}.pay-plan{padding:12px 10px 7px}.pay-plan b{font-size:1.45rem}}
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
.site-footer{border-top:1px solid hsla(219,40%,20%,.5);padding:40px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none}
.footer-links a{font-size:.85rem;color:var(--text-muted)}
.footer-copy{font-size:.82rem;color:var(--text-muted)}
/* ══════════════════════════════════════════════════
LEGAL PAGES (shared by privacy.html / terms.html)
══════════════════════════════════════════════════ */
.legal{padding:140px 0 80px;max-width:760px;margin:0 auto}
.legal h1{font-size:2rem;font-weight:700;color:var(--text-title);margin-bottom:8px}
.legal .last-updated{font-size:.88rem;color:var(--text-muted);margin-bottom:40px}
.legal h2{font-size:1.25rem;font-weight:600;color:var(--text-title);margin:36px 0 12px}
.legal p,.legal ul{margin-bottom:16px;font-size:.95rem;line-height:1.7}
.legal ul{padding-left:24px}
.legal li{margin-bottom:6px}
.legal .support-email{font-size:1.2rem;font-weight:600}
/* ══════════════════════════════════════════════════
BACK TO TOP BUTTON
══════════════════════════════════════════════════ */
.back-to-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(107,159,255,.35);opacity:0;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s var(--ease-spring),background .2s;z-index:90;pointer-events:none}
.back-to-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.back-to-top:hover{background:var(--accent-light);transform:translateY(-3px) scale(1.08);box-shadow:0 8px 28px rgba(107,159,255,.45)}
/* ══════════════════════════════════════════════════
SECTION DIVIDERS
══════════════════════════════════════════════════ */
.section-divider{height:1px;margin:0;background:hsla(219,30%,22%,.4)}
/* ══════════════════════════════════════════════════
SHOWCASE DEMO GLOW ORBS
══════════════════════════════════════════════════ */
.showcase-demo{position:relative}
.showcase-demo > :not(.demo-glow){position:relative;z-index:1}
.demo-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,hsla(219,60%,50%,.12) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:blur(40px)}
.demo-glow-purple{background:radial-gradient(circle,hsla(260,60%,50%,.12) 0%,transparent 70%)}
.demo-glow-teal{background:radial-gradient(circle,hsla(180,50%,45%,.12) 0%,transparent 70%)}
.demo-glow-amber{background:radial-gradient(circle,hsla(35,60%,50%,.12) 0%,transparent 70%)}
.demo-glow-pink{background:radial-gradient(circle,hsla(330,60%,50%,.12) 0%,transparent 70%)}
/* ══════════════════════════════════════════════════
SHOWCASE FEATURE LIST HOVER
══════════════════════════════════════════════════ */
.showcase-features li{transition:transform .2s,color .2s;padding:4px 0}
.showcase-features li:hover{transform:translateX(6px);color:var(--text-title)}
.showcase-features li::before{transition:transform .2s,box-shadow .2s}
.showcase-features li:hover::before{transform:scale(1.4);box-shadow:0 0 8px var(--accent)}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:1024px){
.mockup-editor{grid-template-columns:330px minmax(400px,1fr) 330px;height:260px}
.showcase-split{gap:40px}
}
/* ── Mockup / Demo Scaler wrapper ── */
/* The hero's 1280 × 758 app window: script.js moves it into a shell scaled
to fit. Until then the scaler holds the scaled height and the window is
hidden, so the page never shows it at full size. */
.mockup-scaler{width:100%;max-width:860px;margin:0 auto;overflow:hidden;aspect-ratio:1280/758}
.mockup-scaler>#heroMockup{visibility:hidden}
/* The window's own shadow would be clipped here, so the scaler casts it at
the window's scale. --s comes from the script once the window is fitted;
until then the var() is unset, so the empty box gets no frame or shadow. */
.mockup-scaler{border-radius:calc(12px * var(--s));box-shadow:0 calc(34px * var(--s)) calc(96px * var(--s)) rgba(0,0,0,.62),0 calc(10px * var(--s)) calc(28px * var(--s)) rgba(0,0,0,.34),0 0 0 1px rgba(42,55,79,.9)}
.scaled-demo{overflow:hidden}
/* ══════════════════════════════════════════════════
RESPONSIVE — Showcase stack (max 860px)
══════════════════════════════════════════════════ */
@media(max-width:860px){
.showcase{padding:56px 0}
.showcase-split{grid-template-columns:minmax(0,1fr);gap:28px}
.showcase-split.reverse{direction:ltr}
.showcase-text h2{text-align:center;white-space:normal!important}
.showcase-text p{text-align:center}
.showcase-features{max-width:520px;margin-left:auto;margin-right:auto}
.presets-layout{grid-template-columns:1fr;gap:20px}
.presets-banner{order:-1;padding:36px 24px}
.caption-examples{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
.caption-examples-left,.caption-examples-right{flex-direction:row;flex-wrap:wrap;transform:none;justify-content:center}
.presets-top-row{gap:24px}
}
/* ══════════════════════════════════════════════════
RESPONSIVE — Mobile nav (max 640px) — existing
══════════════════════════════════════════════════ */
@media(max-width:640px){
.nav-links{position:fixed;top:64px;left:0;right:0;background:hsla(var(--hue),57%,12%,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;padding:24px;gap:20px;transform:translateY(-120%);opacity:0;transition:transform .3s,opacity .3s;border-bottom:1px solid hsla(var(--hue),40%,24%,.5)}
.nav-links.open{transform:translateY(0);opacity:1}
.nav-toggle{display:flex}
}
/* ══════════════════════════════════════════════════
RESPONSIVE — Phone layout (max 640px)
══════════════════════════════════════════════════ */
@media(max-width:640px){
.hero{padding:118px 0 56px}
.hero-sub{font-size:1rem}
.presets{padding:60px 0 80px}
.section-subtitle{margin-bottom:32px}
.showcase{padding:44px 0}
.presets-top-row{gap:16px}
/* Script demo — hide overflow toolbar items */
.sd-toggle-group{display:none}
.sd-toolbar{overflow:hidden}
/* The whole app overlay is scaled as one 310pt surface. */
.tr-panel{min-width:310px;width:310px;padding:30px}
.tr-bar-wrap{width:250px;max-width:none}
.tr-icon-area{width:160px;height:120px}
}
/* ══════════════════════════════════════════════════
RESPONSIVE — Small phone (max 480px)
══════════════════════════════════════════════════ */
@media(max-width:480px){
.hero{padding:104px 0 40px}
.back-to-top{bottom:20px;right:16px;width:40px;height:40px}
.presets{padding:48px 0 60px}
.site-footer{padding:28px 0}
.footer-inner{flex-direction:column;align-items:center;text-align:center}
.footer-links{justify-content:center}
/* Two equal plans at any phone size: the same padding on short and tall screens, and
prices that scale so the old and new price fit on one line */
.pay-card{padding-inline:16px}
.pay-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pay-plan b{font-size:clamp(1.3rem,6.5vw,1.75rem)}
/* Room under the discount pill, and a short note centred in the height a two-line one takes */
.pay-plan{padding:19px 4px 12px}
.pay-plan-note{margin-block:auto}
}
/* ══════════════════════════════════════════════════
RESPONSIVE — Showcase Card + Description (max 768px)
Demo card with paragraph text beneath.
══════════════════════════════════════════════════ */
@media(max-width:768px){
/* ── The demo, under its title: no card round it, so it isn't framed
twice ── */
.showcase-demo-card{position:relative;text-align:center}
.showcase-title{margin:0 0 18px;font-size:clamp(1.4rem,6.2vw,1.75rem);font-weight:700;line-height:1.2;color:var(--text-title);text-align:center;text-wrap:balance}
.showcase-demo-card.threed-demo-card,
.showcase-demo-card.threed-demo-card .threed-demo,
.showcase-demo-card.threed-demo-card .threed-stage{
background:var(--bg-viewer);
}
.showcase-demo-card .showcase-demo{margin-bottom:0;position:relative}
/* ── Style demo: fixed-height scrolling panel ──
Shows ~4 sections at a time; animation scrolls to the active one. */
.style-demo .sty-body{
position:relative;
max-height:520px;
overflow:hidden;
}
/* ── Description paragraph beneath the card ── */
.showcase-desc{
color:var(--text-body);
font-size:.92rem;
line-height:1.7;
text-align:center;
margin:16px 0 0;
opacity:.85;
}
.hero .section-label,.showcases .section-label,.presets .section-label{font-size:.6rem;padding:4px 12px;letter-spacing:1.5px}
/* ── Section label above the title ── */
.showcase-section-label{
text-align:center;
margin:0 auto 14px;
display:block;
width:fit-content;
}
/* ── Presets section — restructured to match showcase cards ── */
.presets-demo-card{
overflow:hidden;
padding:12px 8px 16px;
}
.presets-demos-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:2px 4px;
padding:0;
}
.presets-demos-grid .caption-demo{
padding:6px 2px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
}
.presets-demos-grid .demo-preview{
transform:scale(.58);
transform-origin:center;
white-space:nowrap;
}
.presets-demos-grid .demo-stack-words{
transform:scale(.52);
}
.presets-demos-grid .demo-stomp-words .stomp-word{
font-size:.9rem;
}
.presets-demos-grid .demo-stomp-words .stomp-word.stomp-active{
font-size:1rem;
transform:scale(1.05);
}
.presets-demos-grid .demo-neon-words .neon-word.neon-active{
transform:scale(1.05);
}
.presets-demos-grid .caption-demo:last-child:nth-child(odd){
grid-column:1 / -1;
justify-self:center;
}
.presets-demos-grid .demo-frosted-glass .frost-panel{
padding:8px 16px;
border-radius:10px;
}
.presets-demos-grid .demo-frosted-glass .frost-word{
font-size:.8rem;
letter-spacing:1px;
}
.presets-tags-mobile{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin-top:16px;
}
.presets-tags-mobile .preset-tag{
padding:4px 12px;
font-size:.75rem;
}
/* ── 3D video: fix iOS Safari black-video-in-3D-transform bug ──
Safari can't composite