/* Vander Labs design system. Dark only: the darkest black and the darkest graphite, faded
   white type, and one accent, a light bright maroon. Never a rainbow: no hue outside black,
   graphite, maroon and white. Depth comes from frosted dark glass, soft shadows and a few
   maroon embers, never from bevels or 3D. */

@font-face{font-family:"Open Sauce Sans";src:url(/fonts/OpenSauceSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url(/fonts/OpenSauceSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url(/fonts/OpenSauceSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url(/fonts/OpenSauceOne-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url(/fonts/OpenSauceOne-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url(/fonts/OpenSauceOne-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Sauce One";src:url(/fonts/OpenSauceOne-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#09090B; --ink:#EEEAE4; --ink-2:#BDB8B1; --ink-3:#8C8882;
  --surface:#111114; --surface-2:#17171B; --surface-3:#1F1F24;
  --line:rgba(238,234,228,.08); --line-2:rgba(238,234,228,.14);
  --glass:rgba(17,17,20,.66); --glass-border:rgba(238,234,228,.08);
  --glass-shadow:inset 0 1px 0 rgba(238,234,228,.05),0 1px 2px rgba(0,0,0,.5),0 30px 70px -40px rgba(0,0,0,.9);
  --soft:rgba(238,234,228,.045); --soft-2:rgba(238,234,228,.035); --soft-3:rgba(238,234,228,.075);
  --on-ink:#0B0B0D; --code:#0E0E11; --menu-bg:#141417;
  /* The accent: a light, bright maroon. maroon fills buttons (5.6:1 with faded white type);
     maroon-hi draws lines, focus rings, dots and small accent text (5:1 on black). */
  --maroon:#A8324A; --maroon-hi:#D2566C; --maroon-deep:#5E1726;
  /* Older names stay so components keep working; each one now maps into black, graphite,
     maroon or faded white. */
  --lilac:var(--maroon-hi); --sky:var(--ink); --blush:var(--maroon);
  --iri-violet:var(--maroon-hi); --iri-blue:var(--ink); --iri-pink:var(--maroon);
  --violet-ink:var(--maroon-hi);
  --iri:linear-gradient(100deg,var(--maroon),var(--maroon-hi));
  --iri-soft:linear-gradient(100deg,var(--maroon-deep),var(--maroon));
  /* Category accents keep their names (they are data); all of them are maroon, white or grey. */
  --iris:#D2566C; --aqua:#EEEAE4; --rose:#B8404F; --peach:#C9C4BD; --lime:#8C8882;
  --amber:#D2566C; --teal:#EEEAE4; --cobalt:#B8404F; --mint:#C9C4BD; --violet:#D2566C;
  --accent:var(--maroon-hi); --focus:var(--maroon-hi);
  --ok:#E3DED7; --warn:var(--maroon-hi); --bad:#E26D80;
  --sans:"Open Sauce Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --one:"Open Sauce One",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-panel:24px; --r-tile:16px; --r-ctl:12px;
  --gutter:24px; --aurora-alpha:1;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:only dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Open Sauce defaults to tabular figures; running text reads better with proportional ones.
   Stats, tables and facts set tabular-nums where numbers need to line up. Kerning is forced
   on because some browsers skip it at small sizes. */
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 16px/1.55 var(--one);font-variant-numeric:proportional-nums;font-kerning:normal;-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--sans);font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
p,figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0}
code,pre,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:rgba(210,86,108,.38);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-48px;z-index:50;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:var(--r-ctl);font-weight:500}
.skip:focus{top:12px}

/* Aurora field and grain: the whole depth system sits here. */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:var(--aurora-alpha)}
.aurora-drift{position:absolute;inset:-12%;will-change:transform}
.au{position:absolute;border-radius:50%}
/* Embers on black: a maroon glow top right, a faint graphite light down the right, a trace of
   white through the middle, a deep maroon mass bottom left and a small maroon glint top left. */
.au-1{width:64vw;height:64vw;right:-18vw;top:-30vw;--c:168,50,74;--o:.34}
.au-2{width:46vw;height:46vw;right:4vw;top:14vw;--c:238,234,228;--o:.045}
.au-3{width:40vw;height:40vw;left:20vw;top:34vh;--c:238,234,228;--o:.03}
.au-4{width:58vw;height:58vw;left:-24vw;bottom:-28vw;--c:94,23,38;--o:.55}
.au-5{width:30vw;height:30vw;left:2vw;top:-10vw;--c:210,86,108;--o:.1}
/* Soft by construction (a long eased falloff), so the masses need no blur filter: they are
   painted once and the drift only moves them. */
.au{background:radial-gradient(closest-side,rgba(var(--c),var(--o)) 0%,rgba(var(--c),calc(var(--o) * .86)) 22%,rgba(var(--c),calc(var(--o) * .6)) 42%,rgba(var(--c),calc(var(--o) * .32)) 62%,rgba(var(--c),calc(var(--o) * .11)) 82%,rgba(var(--c),0) 100%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
@media (max-width:720px){:root{--gutter:16px}}

/* Layout */
.wrap{width:100%;max-width:1288px;margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
main{flex:1;outline:none}
.view{padding:28px 0 72px}
.view > .wrap + .wrap{margin-top:48px}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.panel{border-radius:var(--r-panel);padding:28px}
.soft{background:var(--soft-2);border:1px solid var(--line)}
.panel > h2:first-child,.panel > h3:first-child{margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.stack > * + *{margin-top:16px}
.stack-lg > * + *{margin-top:32px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.row-between .search{flex:1 1 320px}
.cluster{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Type */
.display{font:700 clamp(40px,6vw,64px)/1.02 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.display-sm{font:600 clamp(34px,4.6vw,48px)/1.04 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.h1{font-size:36px;letter-spacing:-.02em}
.h2{font-size:28px}
.h3{font-size:22px}
.lede{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:60ch}
.small{font-size:14px}
.tiny{font-size:12.5px}
.muted{color:var(--ink-3)}
.strong{color:var(--ink);font-weight:500}
.measure{max-width:68ch}
.num{font-variant-numeric:lining-nums tabular-nums}
.page-head{padding:16px 0 32px;max-width:860px}
.page-head .lede{margin-top:16px}
.page-head .display-sm + .lede{margin-top:18px}

/* Controls */
/* Buttons are dark frosted glass over a light layer (::before, three buttons wide). At rest
   the layer is still. On hover, keyboard focus or press it flows back and forth, so the button
   looks alive the moment you reach for it. The motion is a transform: it runs on the
   compositor and repaints nothing. Leaving the button pauses it where it is, no snap back. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);font:500 15px/1 var(--one);color:var(--ink);white-space:nowrap;background:rgba(238,234,228,.05);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(238,234,228,.12);box-shadow:inset 0 1px 0 rgba(238,234,228,.06),0 1px 2px rgba(0,0,0,.4),0 10px 24px -16px rgba(0,0,0,.8);transition:box-shadow .2s,transform .15s,opacity .15s,color .15s,border-color .2s}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:300%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(238,234,228,.03) 0%,rgba(238,234,228,.1) 17%,rgba(238,234,228,.02) 33%,rgba(210,86,108,.16) 50%,rgba(238,234,228,.02) 67%,rgba(238,234,228,.09) 83%,rgba(238,234,228,.03) 100%);animation:flow 2.8s cubic-bezier(.45,0,.55,1) infinite alternate paused}
.btn:hover,.btn:focus-visible{text-decoration:none;border-color:rgba(210,86,108,.45);box-shadow:inset 0 1px 0 rgba(238,234,228,.08),0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(168,50,74,.55)}
.btn:hover::before,.btn:focus-visible::before,.btn:active::before{animation-play-state:running}
.btn:active{transform:scale(.98)}
@keyframes flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-66.667%,0,0)}}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn:disabled::before{animation-play-state:paused}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Primary: maroon. Darker and brighter maroons run through it on hover; the brightest stop
   keeps faded white type above 4.5:1. */
.btn-primary{color:#F4F1EC;background:var(--maroon);border-color:rgba(238,234,228,.14);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(168,50,74,.75)}
.btn-primary::before{background:linear-gradient(110deg,#A8324A 0%,#B23A50 13%,#B8404F 24%,#962B42 33%,#7E2236 41%,#A8324A 49%,#B23A50 57%,#B8404F 65%,#A8324A 72%,#8A2639 81%,#B23A50 89%,#A8324A 100%)}
.btn-primary:hover,.btn-primary:focus-visible{color:#fff;border-color:rgba(238,234,228,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4),0 16px 36px -14px rgba(210,86,108,.7)}
/* Signature call to action (Sign up, Pro): faded white with black type, the strongest
   contrast on the page, and a soft maroon light that crosses it every few seconds. */
.btn-iri{color:#0B0B0D;background:#EEEAE4;border-color:rgba(238,234,228,.6);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(238,234,228,.35)}
.btn-iri::before{background:linear-gradient(110deg,#EEEAE4 0%,#F6F3EE 18%,#E2DDD6 36%,#F3E3E6 52%,#E8E3DC 68%,#F6F3EE 84%,#EEEAE4 100%)}
.btn-iri::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(210,86,108,.28),transparent);transform:translateX(-160%) skewX(-18deg);animation:sheen 5.5s var(--ease-out) infinite}
@keyframes sheen{0%,55%{transform:translateX(-160%) skewX(-18deg)}85%,100%{transform:translateX(340%) skewX(-18deg)}}
.btn-iri:hover,.btn-iri:focus-visible{color:#000;border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.4),0 16px 34px -14px rgba(210,86,108,.6)}
.btn-text{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 8px;color:var(--ink-2)}
.btn-text::before{display:none}
.btn-text:hover,.btn-text:focus-visible{background:var(--soft-3);border-color:transparent;box-shadow:none;color:var(--ink)}
.btn-danger{color:var(--bad)}
.btn-danger:hover,.btn-danger:focus-visible{border-color:rgba(226,109,128,.45);box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(226,109,128,.4)}
.btn-text.btn-danger:hover{background:rgba(226,109,128,.1);box-shadow:none}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
/* Saved: a quiet maroon-lit graphite, so "in your library" reads as kept, not as an alert. */
.btn.is-saved{color:var(--ink);border-color:rgba(210,86,108,.45);box-shadow:inset 0 1px 0 rgba(238,234,228,.06),0 10px 24px -16px rgba(168,50,74,.5)}
.btn.is-saved::before{background:linear-gradient(110deg,rgba(210,86,108,.2) 0%,rgba(238,234,228,.05) 25%,rgba(210,86,108,.2) 50%,rgba(238,234,228,.05) 75%,rgba(210,86,108,.2) 100%)}
.btn.is-saved svg{stroke:var(--maroon-hi)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink)}
.icon-btn:hover{background:rgba(238,234,228,.08);text-decoration:none}
.icon-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(238,234,228,.1);background:rgba(238,234,228,.04);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;color:var(--ink-2);font:500 14px/1 var(--one);white-space:nowrap;transition:background .15s,box-shadow .15s,color .15s}
.chip:hover{text-decoration:none;background:rgba(238,234,228,.08);color:var(--ink);border-color:rgba(210,86,108,.45)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);box-shadow:0 8px 20px -12px rgba(0,0,0,.8)}
.chip[aria-pressed="true"] i{background:var(--maroon);}
.chip .n{color:var(--ink-3);font-weight:400}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.chip:focus-visible{outline-color:var(--accent)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter);padding-bottom:4px;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.input,.textarea,.select{width:100%;min-height:44px;padding:10px 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--soft);color:var(--ink);font:400 16px/1.4 var(--one);transition:border-color .15s}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.textarea{min-height:120px;resize:vertical;line-height:1.5}
.textarea.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;min-height:320px;tab-size:2}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8882' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.field{display:block}
.field > span,.field > .label{display:block;font-weight:500;color:var(--ink);font-size:14px;margin-bottom:6px}
.field .hint{display:block;font-size:13px;color:var(--ink-3);margin-top:6px;font-weight:400}
.field + .field,.field + .two,.two + .field{margin-top:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.check input{margin:4px 0 0;accent-color:var(--maroon-hi)}
.form-error{color:var(--bad);font-size:14px;min-height:1.4em;margin-top:12px}
.form-error:empty{display:none}
.counter{font-size:13px;color:var(--ink-3);text-align:right;margin-top:6px}
.counter.is-over{color:var(--bad)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--soft)}
.seg button{min-height:32px;padding:0 14px;border-radius:999px;font:500 14px/1 var(--one);color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;height:60px;isolation:isolate;border-bottom:1px solid var(--line)}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,9,11,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.topbar-in{max-width:1288px;margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));height:60px;display:flex;align-items:center;gap:24px}
/* The brand is the name itself: "Vander" in Sans Bold, "Labs" a step lighter, and one
   maroon square as its full stop, which breathes slowly. */
.wordmark{display:inline-flex;align-items:flex-end;gap:3px;font:700 27px/.8 var(--sans);letter-spacing:-.045em;color:var(--ink);padding:4px 0;white-space:nowrap}
.wm-labs{font-weight:500;margin-left:.2em}
.wm-dot{position:relative;width:8px;height:8px;border-radius:2px;background:var(--maroon-hi);flex:none;margin-bottom:1px}
/* The ember: a glow that fades in and out. The glow is painted once and only its opacity
   moves, so it runs on the compositor (an animated box-shadow would restyle and repaint the
   page every frame). */
.wm-dot::after,.footer-word i::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 12px 2px rgba(210,86,108,.6);opacity:0;animation:ember 4.8s ease-in-out infinite}
@keyframes ember{50%{opacity:1}}
.wordmark:hover{text-decoration:none}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 12px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav a:hover{text-decoration:none;background:var(--soft-3);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--soft-3)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu-btn{display:none}
.account{position:relative;display:flex;align-items:center}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface-3);color:var(--maroon-hi);box-shadow:inset 0 0 0 1px rgba(210,86,108,.45);font:600 13px/1 var(--sans);letter-spacing:0;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:64px;height:64px;font-size:22px}
.avatar-btn{border-radius:50%;padding:2px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;padding:8px;border-radius:var(--r-tile);z-index:40;background:var(--menu-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line-2);box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
.menu[hidden]{display:none}
[hidden]{display:none !important}
.menu a,.menu button.item{display:flex;align-items:center;width:100%;padding:10px 12px;border-radius:10px;font-size:15px;color:var(--ink);text-align:left}
.menu a:hover,.menu button.item:hover{background:var(--soft-3);text-decoration:none}
.menu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .who b{display:block;font-weight:600;color:var(--ink)}
.menu .who span{font-size:13px;color:var(--ink-3)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* Search */
.search{display:flex;align-items:center;gap:12px;height:56px;padding:0 10px 0 18px;border-radius:999px;max-width:640px}
.search svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:400 17px var(--one);outline:none}
.search input::placeholder{color:var(--ink-3)}
.search kbd{font:500 12px/1 var(--one);color:var(--ink-3);border:1px solid var(--line-2);border-radius:6px;padding:5px 7px}
.search .clear{display:none;width:34px;height:34px;border-radius:50%;color:var(--ink-3)}
.search .clear svg{width:16px;height:16px;stroke:currentColor}
.search.has-value .clear{display:inline-flex}
.search.has-value kbd{display:none}
.search .clear:hover{background:var(--soft-3);color:var(--ink)}

/* Tiles and shelves */
.tile{position:relative;display:block;min-width:0;color:inherit}
.tile:hover{text-decoration:none}
.tile-cover{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:4/3;background:var(--surface);isolation:isolate;box-shadow:inset 0 0 0 1px rgba(238,234,228,.06)}
.tile-cover svg{width:100%;height:100%}
.tile:hover .tile-title{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.tile-body{position:relative;padding:12px 2px 0}
/* The whole text block opens the skill, not only the title line. */
.tile-body > a::after{content:"";position:absolute;inset:0}
.tile-title{font:600 16px/1.25 var(--sans);color:var(--ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-sub{margin-top:4px;font-size:14px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta{margin-top:8px;display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-3)}
.tile-meta b{font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta span{font-variant-numeric:tabular-nums;white-space:nowrap}
.tile-save{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(9,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(238,234,228,.16);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,border-color .15s;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.tile:hover .tile-save,.tile-save:focus-visible,.tile-save[aria-pressed="true"]{opacity:1}
.tile-save:hover{background:#000;border-color:rgba(210,86,108,.6)}
.tile-save[aria-pressed="true"]{background:var(--maroon);color:#F4F1EC;border-color:rgba(238,234,228,.2)}
.tile-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.tile-save{opacity:1}}
.shelf{margin-top:48px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.shelf-head h2{font-size:22px}
.shelf-head a{font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;flex:none}
.shelf-head p{margin-top:4px;font-size:14px;color:var(--ink-3)}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(236px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;padding:0 var(--gutter) 8px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-row .tile{scroll-snap-align:start}
@media (min-width:1289px){.shelf-row{grid-auto-columns:calc((1240px - 80px) / 5)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:24px 20px}

/* Home */
.hero{position:relative;isolation:isolate;padding:40px 0 8px}
.hero h1{max-width:980px}
.hero .lede{margin-top:20px}
.hero .search{margin-top:28px}
.hero .chips{margin-top:16px}
.featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;padding:20px;border-radius:var(--r-panel);margin-top:40px;align-items:center}
.featured-text{padding:8px 12px 8px 0;min-width:0}
.featured-text h2{font-size:clamp(28px,3vw,36px);letter-spacing:-.02em;margin-top:14px}
.featured-text .sub{margin-top:8px;font-size:18px;color:var(--ink-2)}
.featured-text .learns{margin-top:20px}
.featured-text .byline{margin-top:20px}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.featured-text .btn-row{margin-top:24px}
.byline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3)}
.byline .avatar{width:28px;height:28px;font-size:11px}
.byline b{font-weight:500;color:var(--ink-2)}
.learns{list-style:none;display:grid;gap:10px}
.learns li{position:relative;padding-left:22px;color:var(--ink-2)}
.learns li::before{content:"";position:absolute;left:1px;top:.6em;width:8px;height:8px;border-radius:1.5px;background:var(--maroon-hi);transform:rotate(45deg);box-shadow:0 0 0 3px rgba(210,86,108,.16)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.strip li{list-style:none;display:grid;grid-template-columns:40px 1fr;gap:14px}
.strip .n{width:40px;height:40px;border-radius:50%;background:var(--surface-3);color:var(--maroon-hi);box-shadow:inset 0 0 0 1px rgba(210,86,108,.5);display:inline-flex;align-items:center;justify-content:center;font:600 15px var(--sans)}
.strip h3{font-size:18px}
.strip p{margin-top:6px;font-size:15px;color:var(--ink-2)}
.band{margin-top:64px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px;align-items:center}
.band h2{font-size:28px;letter-spacing:-.02em}
.band p{margin-top:10px;max-width:56ch}
.results{margin-top:40px}

/* Lite YouTube */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-tile);overflow:hidden;background:#0B0B0C;isolation:isolate}
.yt > svg{position:absolute;inset:0;width:100%;height:100%}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;color:#fff;background:linear-gradient(to top,rgba(9,9,11,.6),rgba(9,9,11,0) 55%)}
.yt-play span{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 8px;border-radius:999px;background:rgba(9,9,11,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(238,234,228,.16);color:var(--ink);font:500 14px var(--one);transition:background .15s,border-color .15s}
.yt-play:hover span{background:rgba(9,9,11,.92);border-color:rgba(210,86,108,.6)}
.yt-play i{width:30px;height:30px;border-radius:50%;background:var(--maroon);display:inline-flex;align-items:center;justify-content:center}
.yt-play i svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.yt-play:focus-visible{outline-offset:-4px;outline-color:#fff}
.yt-credit{margin-top:10px;font-size:13px;color:var(--ink-3)}
.yt-credit a{text-decoration:underline;text-underline-offset:.15em}

/* Skill page */
.skill-head{padding:12px 0 32px;max-width:900px}
.skill-head .chip{margin-bottom:18px}
.skill-head .sub{margin-top:12px;font-size:22px;line-height:1.3;color:var(--ink-2);font-family:var(--sans);font-weight:500;letter-spacing:-.01em}
.skill-head .byline{margin-top:18px;font-size:15px}
.head-save{display:none;margin-top:22px}
.skill-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.skill-main > section + section{margin-top:44px}
.skill-main h2{font-size:22px;margin-bottom:14px}
.side{position:sticky;top:84px;border-radius:var(--r-panel);padding:24px}
.side .btn{width:100%}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:22px 0 0;font-size:14px}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.facts dd a{text-decoration:underline;text-underline-offset:.15em}
.side .tags{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--soft-3);font-size:13px;color:var(--ink-2)}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:rgba(210,86,108,0.14);color:var(--violet-ink);display:inline-flex;align-items:center;justify-content:center;font:600 14px var(--sans)}
.steps h3{font-size:17px}
.steps p{margin-top:4px;font-size:15px;color:var(--ink-2)}
.safety{list-style:none;display:grid;gap:10px}
.safety li{padding:12px 16px;border-radius:var(--r-ctl);background:var(--soft-2);font-size:15px}
.code{border-radius:var(--r-tile);background:var(--code);border:1px solid var(--line);overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.code pre{margin:0;padding:16px;overflow:auto;max-height:560px;font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.code.is-teaser pre{max-height:220px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
.code-foot{padding:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.url-field{display:flex;gap:10px;align-items:center}
.url-field .input{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.snippet{position:relative;margin-top:12px;padding:12px 100px 12px 14px;border-radius:var(--r-ctl);background:var(--code);border:1px solid var(--line);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.snippet .btn{position:absolute;right:8px;top:8px}

/* Tabs, status, bars, rows */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:28px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.tab{position:relative;padding:12px 14px;font:500 15px var(--one);color:var(--ink-3);white-space:nowrap;border-radius:8px 8px 0 0}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--iri);border-radius:2px}
.tabpanel{padding-top:20px}
.how{list-style:none;counter-reset:h;display:grid;gap:12px;max-width:62ch}
.how li{counter-increment:h;display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:15px;color:var(--ink-2)}
.how li::before{content:counter(h);width:28px;height:28px;border-radius:50%;background:rgba(210,86,108,0.14);color:var(--violet-ink);display:inline-flex;align-items:center;justify-content:center;font:600 13px var(--sans)}
.how code{font-size:13px;background:var(--code);padding:2px 6px;border-radius:6px;color:var(--ink)}
.note{margin-top:16px;font-size:14px;color:var(--ink-3);max-width:62ch}
.status{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-3);opacity:.5;flex:none}
.dot.live{background:var(--ok);opacity:1;box-shadow:0 0 0 4px rgba(227,222,215,.14)}
.bars{list-style:none;display:grid;gap:14px}
.bar-top{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2)}
.bar-top b{font-weight:500;color:var(--ink)}
.bar-top span{font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:8px;border-radius:999px;background:var(--soft-3);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--iri)}
.stat{display:grid;gap:4px}
.stat b{font:600 36px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}
.rows{list-style:none;display:grid}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row-thumb{width:72px;border-radius:10px;overflow:hidden;aspect-ratio:4/3;flex:none}
.row-thumb svg{width:100%;height:100%}
.row-title{font-weight:600;color:var(--ink);font-family:var(--sans)}
.row-meta{font-size:14px;color:var(--ink-3);margin-top:2px}
.row-end{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.feed{list-style:none;display:grid}
.feed li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.feed li time{color:var(--ink-3);font-size:14px;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:500;background:var(--soft-3);color:var(--ink-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pill.published::before{background:var(--ok)}
.pill.in_review::before{background:var(--maroon-hi)}
.pill.rejected::before{background:var(--bad)}
.pill.pro{background:rgba(210,86,108,.16);color:var(--ink)}
.pill.pro::before{background:var(--maroon-hi)}
.meter{height:6px;border-radius:999px;background:var(--soft-3);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:var(--iri);border-radius:999px}

/* States */
.toast{position:fixed;z-index:60;left:50%;bottom:20px;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:#16161A;box-shadow:inset 0 0 0 1px rgba(238,234,228,.12),0 20px 40px -20px rgba(0,0,0,.9);color:var(--ink);padding:12px 18px;border-radius:var(--r-ctl);font-size:15px;max-width:calc(100% - 32px);display:flex;gap:14px;align-items:center;transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{text-decoration:underline;text-underline-offset:.15em;font-weight:500;color:var(--maroon-hi)}
@media (min-width:721px){.toast{left:auto;right:24px;bottom:24px;transform:translateY(16px)}.toast.show{transform:none}}
.skel{position:relative;overflow:hidden;background:var(--soft-3);border-radius:10px;color:transparent}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(238,234,228,.07),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel-tile .tile-cover{background:var(--soft-3)}
.skel-tile .tile-title{height:18px;width:80%;margin-top:14px}
.skel-tile .tile-sub{height:14px;width:60%}
.empty{padding:40px 0;max-width:56ch}
.empty h2,.empty h3{font-size:22px}
.empty p{margin-top:10px;color:var(--ink-2)}
.empty .btn-row{margin-top:20px}
.notice{padding:14px 16px;border-radius:var(--r-ctl);background:var(--soft-2);border:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.notice.bad{border-color:rgba(226,109,128,.35);background:rgba(226,109,128,.08)}
.notice.good{border-color:rgba(238,234,228,.2);background:rgba(238,234,228,.05)}
.notice a{text-decoration:underline;text-underline-offset:.15em}
.notice + *{margin-top:16px}
.reveal{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* The field settles in once and then holds still: a moving field would force every frosted
   panel above it to re-blur on every frame. The life is in the content, not the backdrop. */
.aurora-drift{animation:settle 1.6s ease-out 1}
@keyframes settle{from{opacity:0}to{opacity:1}}

/* Prose (static pages, markdown) */
.prose{max-width:68ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.prose h2{font-size:28px;margin:44px 0 14px;letter-spacing:-.02em}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:.15em;color:var(--ink)}
.prose code{font-size:14px;background:var(--code);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose pre.code-block{margin:0 0 20px;padding:16px 18px;border-radius:var(--r-tile);background:var(--code);border:1px solid var(--line);overflow:auto;font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.prose pre.code-block code{background:none;padding:0;border-radius:0;font-size:inherit}
.prose .notice{margin:0 0 16px}
.crumb{display:inline-flex;gap:6px;align-items:center;margin-bottom:14px;font-size:14px;color:var(--ink-3)}
.crumb a{color:var(--ink-2)}
.more-help{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);max-width:68ch}
.more-help h2{font-size:18px;margin-bottom:12px}
.more-help ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 24px}
.more-help a{display:block;padding:6px 0;color:var(--ink-2)}
.more-help a:hover{color:var(--ink)}
.faq{list-style:none;max-width:72ch;display:grid}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font:600 18px/1.3 var(--sans);color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s;flex:none;margin-right:6px}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .prose{padding-bottom:18px;font-size:16px}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.billing{margin:8px 0 20px}
.estimator{margin-top:56px;border-radius:var(--r-panel);padding:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.estimator h2{font-size:28px;letter-spacing:-.02em}
.est-text p{margin-top:10px;max-width:46ch;color:var(--ink-2)}
.est-form{display:grid;gap:20px}
.est-form input[type=range]{width:100%;accent-color:var(--maroon-hi);margin-top:10px}
.est-form b[data-members-out]{color:var(--ink);font-variant-numeric:tabular-nums}
.est-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.est-result span{color:var(--ink-3);font-size:15px}
.est-result b{font:600 40px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.price-faq{margin-top:64px}
.price-faq h2{font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.plan{border-radius:var(--r-panel);padding:28px;display:flex;flex-direction:column}
.plan h2{font-size:22px}
.plan .price{margin-top:18px;display:flex;align-items:baseline;gap:6px}
.plan .price b{font:600 48px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.plan .price span{color:var(--ink-3);font-size:15px}
.plan .blurb{margin-top:8px;font-size:15px;color:var(--ink-2)}
.plan ul{list-style:none;margin:22px 0 28px;display:grid;gap:10px;flex:1;align-content:start}
.plan li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:1.8px solid var(--violet-ink);border-bottom:1.8px solid var(--violet-ink);transform:rotate(-45deg)}
.plan.is-pro{--accent:var(--maroon-hi);box-shadow:inset 0 1px 0 rgba(238,234,228,.06),0 32px 70px -40px rgba(168,50,74,.6)}
.plan .btn{width:100%}

/* Auth, onboarding, studio, settings */
.narrow{max-width:460px}
.narrow .panel{padding:32px}
.narrow h1{font-size:28px;letter-spacing:-.02em}
.narrow .lede{font-size:16px;margin-top:8px}
.narrow .notice{margin-top:16px}
.narrow form{margin-top:24px}
.narrow .btn-primary{width:100%;margin-top:20px}
.alt{margin-top:20px;font-size:14px;color:var(--ink-3);text-align:left}
.alt a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
.provider{width:100%;margin-top:10px}
.wizard{max-width:860px}
.wizard-steps{display:flex;gap:8px;margin-bottom:28px;font-size:14px;color:var(--ink-3)}
.wizard-steps span{display:inline-flex;align-items:center;gap:8px}
.wizard-steps span::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--line-2)}
.wizard-steps span.done::before,.wizard-steps span.now::before{background:var(--iri)}
.wizard-steps span.now{color:var(--ink);font-weight:500}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:24px}
.pick button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-tile);border:1px solid var(--line);background:var(--soft);text-align:left;font:500 15px var(--one);color:var(--ink);transition:border-color .15s,background .15s}
.pick button i{width:14px;height:14px;border-radius:4px;background:var(--accent);flex:none}
.pick button[aria-pressed="true"]{border-color:var(--ink);background:var(--soft-3)}
.pick button[aria-pressed="true"]::after{content:"";margin-left:auto;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.studio-list .row{grid-template-columns:auto 1fr auto}
.fig{display:grid;grid-template-columns:repeat(4,max-content);gap:16px 32px;font-size:14px;color:var(--ink-3)}
.row .notice{display:inline-block;max-width:60ch}
.fig b{display:block;font:600 18px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.list-edit{display:grid;gap:10px}
.list-edit .item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.list-edit .item.step{grid-template-columns:1fr 1fr auto}
.actions{margin-top:24px;padding-top:8px}
.danger{border-color:rgba(226,109,128,0.3)}
.yt-preview{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:14px;color:var(--ink-2)}
.yt-preview img{width:120px;border-radius:8px;aspect-ratio:16/9;object-fit:cover}
.review-tools{display:flex;gap:8px;flex-wrap:wrap}
.preview-body{margin-top:20px}
.counts{display:flex;gap:32px;flex-wrap:wrap}
.creator-head{display:flex;gap:20px;align-items:flex-start;padding:16px 0 32px}
.creator-head .bio{margin-top:8px;max-width:60ch}
.creator-head .web{margin-top:8px;font-size:14px}
.creator-head .web a{text-decoration:underline;text-underline-offset:.15em}

/* Footer */
.footer{margin-top:auto;border-top:1px solid var(--line);padding:40px 0 0;font-size:14px;color:var(--ink-3);overflow:hidden}
.footer-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px}
.footer-brand{display:flex;flex-direction:column;gap:6px;justify-content:center;color:var(--ink-2)}
.footer-brand .by{font-size:13px;color:var(--ink-3)}
.footer-brand .by b{font:700 13px/1 var(--sans);letter-spacing:.02em;color:var(--ink)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(120px,auto));gap:32px}
.footer-cols h2{font:500 14px var(--one);color:var(--ink);margin-bottom:10px}
.footer-cols a{display:block;padding:4px 0;color:var(--ink-3)}
.footer-cols a:hover{color:var(--ink)}
/* The footer signs off with the wordmark at poster size, its foot cropped by the page edge. */
.footer-word{display:flex;align-items:baseline;margin:56px 0 -.02em -.04em;font:700 clamp(44px,15vw,210px)/.8 var(--sans);letter-spacing:-.06em;color:var(--ink);user-select:none;white-space:nowrap}
.footer-word span{font-weight:500;margin-left:.18em}
.footer-word i{position:relative;width:.085em;height:.085em;border-radius:.02em;background:var(--maroon-hi);margin-left:.04em;flex:none}
.footer-word i::after{box-shadow:0 0 .14em .02em rgba(210,86,108,.6)}

/* ---- Living motion ----
   Motion graphics everywhere, calm: things drift, flow, pulse and catch the light. Every loop is a
   transform or opacity change (the comet ring and the flow lines repaint thin strokes),
   loops pause while their section is off screen (.is-idle), and all of it stops under
   prefers-reduced-motion. */

/* Cover band: two rows of skill covers drifting in opposite directions across the full width
   under the hero, faded out at both edges. */
.cover-wall{position:relative;margin:56px calc(50% - 50vw) 0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cw-inner{display:grid;gap:14px}
.cw-track{display:flex;gap:14px;width:max-content;animation:wall-run 110s linear infinite}
.cw-row:nth-child(2) .cw-track{animation-duration:132s;animation-direction:reverse;margin-left:-95px}
.cw-track img{width:176px;height:132px;border-radius:14px;flex:none;box-shadow:0 18px 36px -20px rgba(0,0,0,.9),0 0 0 1px rgba(238,234,228,.07)}
@keyframes wall-run{to{transform:translate3d(-50%,0,0)}}
.is-idle .cw-track,.is-idle.cw-track{animation-play-state:paused}

/* Comet ring: a 1px maroon light with a faded white head that travels slowly round the border. */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
.iri-ring{position:relative}
.iri-ring::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--spin),rgba(210,86,108,0) 0deg,rgba(210,86,108,0) 190deg,rgba(210,86,108,.55) 290deg,#D2566C 335deg,#EEEAE4 352deg,rgba(210,86,108,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin-ring 9s steps(270) infinite;opacity:.9;will-change:transform}
@keyframes spin-ring{to{--spin:360deg}}
.iri-ring.is-idle::after{animation-play-state:paused}
.feat-wrap{position:relative}
.iri-glow{position:absolute;z-index:-1;inset:-6% -14px -12%;pointer-events:none;background:radial-gradient(42% 62% at 24% 54%,rgba(168,50,74,.5),rgba(168,50,74,0) 100%),radial-gradient(40% 60% at 80% 44%,rgba(94,23,38,.6),rgba(94,23,38,0) 100%);opacity:.75}

/* Skill flow hub: library on the left, Vander Labs in the middle, your AIs on the right. */
.flow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.flow h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em}
.flow-lede{margin-top:12px;max-width:46ch;color:var(--ink-2)}
.flow .strip{grid-template-columns:1fr;margin-top:28px;padding-top:0;border-top:0;gap:18px}
.hub{position:relative;aspect-ratio:1/.82;width:100%}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-lines line{vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
.hub-base line{stroke:rgba(238,234,228,.12);stroke-width:1.2}
.hub-flow line{stroke-width:2.2;stroke-dasharray:9 91;stroke-dashoffset:100;animation:hub-flow 3.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i) * .45s)}
.hub-flow line:nth-child(3n+1){stroke:var(--iri-violet)}
.hub-flow line:nth-child(3n+2){stroke:var(--iri-blue)}
.hub-flow line:nth-child(3n){stroke:var(--iri-pink)}
@keyframes hub-flow{0%{stroke-dashoffset:100;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.hub-node{position:absolute;left:var(--x);top:var(--y);transform:translate(var(--tx,-50%),-50%);max-width:46%;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;background:rgba(20,20,23,.94);border:1px solid rgba(238,234,228,.1);box-shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.9);font:500 13.5px/1.2 var(--one);color:var(--ink);white-space:nowrap;animation:float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.hub-node img{width:40px;height:30px;border-radius:7px;flex:none}
.hub-node span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hub-node.lib{--tx:0%}
.hub-node.ai{--tx:-100%}
.hub-node.ai{padding:9px 14px;gap:8px}
.hub-node.ai i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;padding:20px 26px;border-radius:18px;background:#141417;box-shadow:0 24px 50px -24px rgba(168,50,74,.7);text-align:center}
.hub-core b{font:700 30px/.8 var(--sans);color:var(--ink);letter-spacing:-.045em;padding-top:4px;white-space:nowrap}
.hub-core b span{font-size:inherit;color:inherit;font-weight:500}
.hub-core span{font-size:12.5px;color:var(--ink-3)}
.hub-pulse{position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--iri-violet);opacity:0;pointer-events:none;animation:hub-ring 3.2s ease-out infinite}
.hub-pulse + .hub-pulse{border-color:var(--iri-pink);animation-delay:1.6s}
@keyframes hub-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5,1.8);opacity:0}}
.hub.is-idle *,.hub.is-idle *::after{animation-play-state:paused !important}

/* Category marquee: the subjects on the shelves drift past in large graphite type, each one
   marked with a maroon diamond. Decorative; the chips above carry the links. */
.marquee{margin:72px calc(50% - 50vw) 0;overflow:hidden;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:wall-run 70s linear infinite}
.mq-track span{font:700 clamp(44px,7.4vw,104px)/1.1 var(--sans);letter-spacing:-.04em;color:#1E1E23;white-space:nowrap;padding:0 .32em}
.mq-track span:nth-of-type(3n+2){color:#2A2A30}
.mq-track i{flex:none;width:12px;height:12px;border-radius:2px;background:var(--maroon-hi);transform:rotate(45deg);box-shadow:0 0 18px rgba(210,86,108,.6)}
.marquee.is-idle .mq-track{animation-play-state:paused}

/* Headings draw a short maroon rule as they arrive: shelves as they scroll in, page titles
   as the page opens. */
.shelf-head h2::before{content:"";display:block;width:28px;height:2px;margin-bottom:12px;border-radius:2px;background:var(--iri);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease-out) .2s}
.shelf-head.is-in h2::before,.shelf-head:not(.pop) h2::before{transform:none}
.page-head .display-sm::after{content:"";display:block;width:44px;height:2px;margin-top:20px;border-radius:2px;background:var(--iri);transform-origin:left;animation:draw-in 1.1s var(--ease-out) .2s both}
@keyframes draw-in{from{transform:scaleX(0)}}

/* Entrances: content rises in as it scrolls into view, staggered within its row. */
.pop{opacity:0;transform:translateY(14px)}
.pop.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(var(--i,0) * 70ms),transform .8s var(--ease-out) calc(var(--i,0) * 70ms)}

/* Tiles catch the light: the cover leans in and a soft maroon-white sheen crosses it. */
.tile-cover > svg,.tile-cover > img{transition:transform .8s var(--ease-out)}
@media (hover:hover){.tile:hover .tile-cover > svg{transform:scale(1.045)}}
.tile-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(238,234,228,.12) 44%,rgba(210,86,108,.16) 50%,rgba(238,234,228,.06) 56%,transparent 68%);transform:translateX(-130%)}
@media (hover:hover){.tile:hover .tile-cover::after{transform:translateX(130%);transition:transform 1s var(--ease-out)}}

/* Saving pops: the check springs in and a maroon ring ripples out. */
@keyframes save-pop{0%{transform:scale(.55)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes save-ring{0%{box-shadow:0 0 0 0 rgba(210,86,108,0.55)}100%{box-shadow:0 0 0 16px rgba(210,86,108,0)}}
.just-saved svg{animation:save-pop .5s var(--ease-out)}
.tile-save.just-saved{animation:save-ring .8s ease-out}
.btn.just-saved{animation:save-ring .8s ease-out}

/* Live status: connected pulses, waiting breathes. */
.dot.live{position:relative}
.dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(227,222,215,.5);animation:live-pulse 2.4s ease-out infinite}
@keyframes live-pulse{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(2.6);opacity:0}}
.dot:not(.live){animation:wait-breathe 2.6s ease-in-out infinite}
@keyframes wait-breathe{50%{opacity:.18}}

/* Links grow a maroon underline; the search field glows when focused. */
.shelf-head a,.more-help a{position:relative}
.shelf-head a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;background:var(--iri);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.shelf-head a:hover{text-decoration:none}
.shelf-head a:hover::after{transform:scaleX(1)}
.search{transition:box-shadow .3s}
.search:focus-within{box-shadow:inset 0 0 0 1px rgba(210,86,108,0.45),0 18px 44px -22px rgba(168,50,74,0.55)}
.chip i{transition:transform .3s var(--ease-out)}
@media (hover:hover){.chip:hover i{transform:scale(1.5)}}
.feed-demo li{animation:in-pop .5s var(--ease-out)}
@keyframes in-pop{from{opacity:0;transform:translateY(8px)}}

@media (max-width:860px){
  .cover-wall{margin-top:40px}
  .cw-inner,.cw-track{gap:10px}
  .cw-track img{width:120px;height:90px;border-radius:12px}
  .flow{grid-template-columns:1fr;gap:28px;margin-top:56px}
  .hub{aspect-ratio:1/.95}
  .hub-node{font-size:12px;padding:6px 9px 6px 6px;gap:7px}
  .hub-node img{width:30px;height:22px}
  .hub-node.lib{max-width:34%}
  .hub-node.ai{max-width:34%}
  .hub-node.ai{padding:7px 10px}
  .hub-core{padding:14px 16px}
  .hub-core b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .cw-track,.mq-track,.page-head .display-sm::after,.wm-dot::after,.footer-word i::after,.dot.live::after,.iri-ring::after,.hub-flow line,.hub-node,.hub-pulse,.btn-iri::after,.dot,.feed-demo li,.just-saved,.just-saved svg{animation:none !important}
  .hub-flow line{stroke-dasharray:none;opacity:.5}
  .pop{opacity:1;transform:none}
}

/* Responsive */
@media (max-width:980px){
  .skill-grid{grid-template-columns:1fr}
  /* On phones the facts follow the content; the save button moves up into the header. */
  .side{position:static}
  .head-save{display:block}
  .side .btn{width:auto}
  .editor{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:520px}
  .estimator{grid-template-columns:1fr;gap:24px;padding:24px}
  .split{grid-template-columns:minmax(0,1fr)}
  .featured{grid-template-columns:1fr;gap:20px;padding:14px}
  .featured-text{padding:8px 8px 10px}
  .footer-in{grid-template-columns:1fr}
}
@media (max-width:720px){
  .topbar-in{gap:12px}
  .wordmark{font-size:23px}
  .wm-dot{width:7px;height:7px}
  .view{padding:16px 0 56px}
  .hero{padding:24px 0 0}
  .hero .search{height:52px}
  .search kbd{display:none}
  .two{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr;gap:20px;margin-top:48px}
  .band{grid-template-columns:1fr;margin-top:48px}
  .band h2{font-size:24px}
  .shelf{margin-top:36px}
  .shelf-row{grid-auto-columns:minmax(200px,62vw)}
  .grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .tile-title{font-size:15px}
  .panel{padding:20px;border-radius:20px}
  .side{padding:20px}
  .skill-head .sub{font-size:19px}
  .skill-main h2{font-size:20px}
  .url-field{flex-direction:column;align-items:stretch}
  .fig{grid-template-columns:repeat(2,1fr)}
  .list-edit .item.step{grid-template-columns:1fr auto}
  .list-edit .item.step .textarea{grid-column:1 / -1}
  .footer-cols{grid-template-columns:1fr 1fr;gap:20px}
  .stat b{font-size:28px}
  .row{grid-template-columns:auto 1fr;}
  .row .row-end{grid-column:1 / -1;justify-content:flex-start}
  .creator-head{flex-direction:column;gap:14px}
  .counts{gap:20px}
}
/* Narrow phones, signed out: Sign in moves into the menu so the header fits at 360 to 400px. */
.nav-auth{display:none}
@media (max-width:480px){
  .account .acct-signin{display:none}
  .nav .nav-auth{display:block}
  .topbar-end{gap:2px}
}
@media (max-width:400px){.grid{grid-template-columns:1fr 1fr;gap:16px 10px}.tile-meta{flex-direction:column;gap:2px}}

@media (prefers-reduced-motion:reduce){
  .aurora-drift,.reveal,.skel::after,.btn::before{animation:none}
  *{transition-duration:0s !important}
  html{scroll-behavior:auto}
}

/* ---- Phones: an app-shaped shell ----
   Under 720px the main sections move to a tab bar at the bottom, in reach of the thumb, and
   the secondary links open as a sheet above it (More). Touch targets are at least 40px, the
   bars respect the notch and the home indicator, and the bar steps aside while typing. */
.tabbar,.scrim,.nav .nav-sheet{display:none}
@media (max-width:720px){
  :root{--tabbar-h:60px}
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .tabbar{position:fixed;z-index:35;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));border-top:1px solid var(--line);isolation:isolate;transition:transform .28s var(--ease-out)}
  .tabbar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,9,11,.82);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:0;border:0;background:none;font:500 12px/1 var(--one);color:var(--ink-3);text-decoration:none;cursor:pointer}
  .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.88)}
  .tabbar [aria-current="page"],.tabbar [aria-expanded="true"]{color:var(--ink)}
  .tabbar [aria-current="page"] svg{stroke-width:2.1}
  .tabbar [aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:var(--iri)}
  .tabbar a:focus-visible,.tabbar button:focus-visible{outline-offset:-6px;border-radius:14px}
  /* Typing: the bar slides away so the keyboard and the field have the room. */
  body:has(:is(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):focus) .tabbar{transform:translateY(calc(100% + 2px));transition-delay:0s}
  /* It comes back only after a short pause, so a tap on a button just above it (Save,
     Search) lands on the button rather than on the bar sliding into place. */
  .tabbar{transition-delay:.4s}

  /* More: the topbar links as a sheet over the tab bar. */
  .nav{display:none;position:fixed;z-index:45;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);margin:0;flex-direction:column;gap:2px;padding:8px;border-radius:22px;background:var(--menu-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),0 24px 60px -24px rgba(0,0,0,.9)}
  .nav.is-open{display:flex;animation:sheet-up .28s var(--ease-out)}
  .nav a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;font-size:16px}
  .nav a[data-nav="skills"]{display:none}
  .nav .nav-sheet{display:flex}
  .scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s}
  body:has(#nav.is-open) .scrim{opacity:1;pointer-events:auto}
  body:has(#nav.is-open){overflow:hidden}

  .toast{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px)}

  /* Home: one row of drifting covers, and the hub shows the skills as covers only. */
  .cw-row:nth-child(2){display:none}
  .cover-wall{margin-top:32px}
  .hub-node.lib{padding:5px;max-width:none}
  .hub-node.lib span{display:none}
  .hub-node.lib img{width:52px;height:39px;border-radius:9px}

  /* Client tabs: share the width so all four fit at 390px; they still scroll on smaller phones. */
  .tabs{gap:0}
  .tab{flex:1 0 auto;padding:12px 8px;font-size:14px;text-align:center}
}
@keyframes sheet-up{from{opacity:0;transform:translateY(14px)}}
@media (max-width:380px){
  .tab{padding:12px 7px}
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}

/* Touch: fingers need bigger targets than a cursor, and no grey flash on tap. */
a,button,summary,label,[role=tab]{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,summary,label{touch-action:manipulation}
@media (pointer:coarse){
  .chip{min-height:40px}
  .btn-sm{min-height:40px}
  .seg button{min-height:40px}
  .tag{padding:7px 12px}
  .tile-save{width:40px;height:40px}
  .tab{min-height:44px}
  .footer-cols a{padding:9px 0}
  .shelf-head a{padding:10px 0 10px 14px;margin:-10px 0}
  .shelf-head a::after{left:14px;bottom:7px}
  .menu a,.menu button.item{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.nav.is-open{animation:none}.tabbar{transition:none}}
@media (max-width:720px){.nav .nav-auth{display:none}}
@media (max-width:480px){.nav .nav-auth{display:flex}}

/* ---- Tutorial simulation ----
   How Vander Labs is used, played as one motion graphic: find a skill, save it, connect your AI
   once, ask as usual, the skill loads, the creator is paid. A single 20-second timeline (--T)
   drives every part; each element holds its keyframes at the same percentages, so the scenes,
   the cursor, the clicks and the captions stay in step. Only transform and opacity move. The
   stage is sized in container units, so it scales like a video. It pauses off screen
   (.is-idle) and, under reduced motion, stands still on the first scene with the steps listed. */
.sim{--T:20s;--se:cubic-bezier(.65,0,.3,1);position:relative;display:grid;gap:16px;min-width:0}
.sim-frame{border-radius:22px;background:#0D0D10;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(210,86,108,.32),0 40px 80px -40px rgba(0,0,0,.95),0 30px 80px -50px rgba(168,50,74,.6)}
.sim-top{position:relative;display:flex;align-items:center;gap:6px 20px;padding:13px 18px;border-bottom:1px solid var(--line);font:500 12.5px/1 var(--one);color:var(--ink-2)}
.sim-step{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;opacity:.4;animation:var(--T) linear infinite}
.sim-step::before{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--maroon-hi);transform:rotate(45deg)}
.sim-step:nth-child(1){animation-name:sim-s0}
.sim-step:nth-child(2){animation-name:sim-s1}
.sim-step:nth-child(3){animation-name:sim-s2}
.sim-step:nth-child(4){animation-name:sim-s3}
@keyframes sim-s0{0%,18%{opacity:1}20%,98%{opacity:.4}100%{opacity:1}}
@keyframes sim-s1{0%,18%{opacity:.4}20%,39%{opacity:1}41%,100%{opacity:.4}}
@keyframes sim-s2{0%,40%{opacity:.4}42%,61%{opacity:1}63%,100%{opacity:.4}}
@keyframes sim-s3{0%,61%{opacity:.4}63%,98%{opacity:1}100%{opacity:.4}}
.sim-progress{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:linear-gradient(90deg,var(--maroon-deep),var(--maroon-hi) 85%,var(--ink));transform-origin:left;transform:scaleX(0);animation:sim-prog var(--T) linear infinite}
@keyframes sim-prog{to{transform:scaleX(1)}}

.sim-stage{position:relative;aspect-ratio:16/11;container-type:inline-size;contain:paint;overflow:hidden;border-radius:0 0 21px 21px;background:radial-gradient(circle at 1px 1px,rgba(238,234,228,.05) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(180deg,#101013,#0A0A0C)}
.sim-stage *{animation-duration:var(--T);animation-iteration-count:infinite;animation-timing-function:var(--se);animation-fill-mode:both}
.sim-stage svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sim-scene{position:absolute;inset:0;font:500 2.2cqw/1.3 var(--one);color:var(--ink-2);opacity:0}
.sim-browse{animation-name:sim-browse}
.sim-connect{animation-name:sim-connect}
.sim-chat{animation-name:sim-chat}
@keyframes sim-browse{0%{opacity:0;transform:scale(1.03)}2.5%,38.5%{opacity:1;transform:none}41%,100%{opacity:0;transform:scale(.97)}}
@keyframes sim-connect{0%,39.5%{opacity:0;transform:translateX(5%)}42%,60.5%{opacity:1;transform:none}63%,100%{opacity:0;transform:translateX(-5%)}}
@keyframes sim-chat{0%,61%{opacity:0;transform:translateX(5%)}63.5%,97.5%{opacity:1;transform:none}100%{opacity:0;transform:scale(.97)}}
.sim-label{display:block;font-size:1.8cqw;color:var(--ink-3)}
.sim-stage code{font:500 2.2cqw/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}

/* Scene 1: find a skill and save it. */
.sim-bar{position:absolute;left:4%;right:4%;top:4.5%;height:11%;display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.sim-search,.sim-lib{height:100%;display:flex;align-items:center;border-radius:99px;background:rgba(238,234,228,.05);border:1px solid rgba(238,234,228,.09)}
.sim-search{flex:0 1 52cqw;gap:1.4cqw;padding:0 2.4cqw;color:var(--ink-3)}
.sim-search i{width:2.2cqw;height:2.2cqw;border:.3cqw solid currentColor;border-radius:50%;flex:none}
.sim-lib{position:relative;gap:1.4cqw;padding:0 1.1cqw 0 2.4cqw;color:var(--ink);animation-name:sim-lib}
.sim-lib::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--maroon-hi),0 0 3.4cqw -.4cqw rgba(210,86,108,.7);opacity:0;animation:sim-lib-lit var(--T) var(--se) infinite}
@keyframes sim-lib{0%,26.2%{transform:none}27.6%{transform:scale(1.1)}29.5%,100%{transform:none}}
@keyframes sim-lib-lit{0%,26%{opacity:0}27%{opacity:1}36%,100%{opacity:0}}
.sim-count{display:block;height:1.4em;overflow:hidden;border-radius:99px;background:var(--maroon);color:#F4F1EC;text-align:center}
.sim-count b{display:block;height:1.4em;line-height:1.4em;padding:0 1.1cqw;font-weight:600;animation-name:sim-odo}
@keyframes sim-odo{0%,26.4%{transform:none}27.6%,44%{transform:translateY(-100%)}46%,100%{transform:none}}
.sim-grid{position:absolute;left:4%;right:4%;top:20%;bottom:4%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2.4cqw}
.sim-card{position:relative;display:flex;flex-direction:column;gap:1.1cqw;min-width:0;min-height:0;padding:1cqw;border-radius:1.8cqw;background:rgba(238,234,228,.035);border:1px solid rgba(238,234,228,.07);animation-name:sim-card;animation-delay:calc(var(--k) * .12s)}
@keyframes sim-card{0%{opacity:0;transform:translateY(12%)}4.5%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.sim-cover{flex:1;min-height:0;border-radius:1.2cqw;overflow:hidden;background:linear-gradient(135deg,#1D1D22,#121215)}
.sim-cover img,.sim-fly img{width:100%;height:100%;object-fit:cover}
.sim-t{font-size:1.85cqw;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .4cqw .3cqw}
.sim-target{animation-name:sim-card,sim-lift;animation-delay:calc(var(--k) * .12s),0s}
@keyframes sim-lift{0%,9%{translate:0 0}11.5%,24%{translate:0 -3%}28.5%,100%{translate:0 0}}
.sim-ring{position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--maroon-hi),0 0 0 .7cqw rgba(210,86,108,.12),0 3cqw 6cqw -2cqw rgba(168,50,74,.65);opacity:0;pointer-events:none;animation-name:sim-ring}
@keyframes sim-ring{0%,9.5%{opacity:0}11.5%,25%{opacity:1}29%,100%{opacity:0}}
.sim-save{position:absolute;z-index:1;right:2.1cqw;top:2.1cqw;width:4.6cqw;height:4.6cqw;border-radius:50%;background:rgba(9,9,11,.72);border:1px solid rgba(238,234,228,.18);display:grid;place-items:center;color:#F4F1EC;animation-name:sim-save}
.sim-save::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--maroon);opacity:0;animation:sim-save-fill var(--T) var(--se) infinite}
.sim-save b{grid-area:1/1;position:relative;width:2.6cqw;height:2.6cqw}
.sim-save svg{stroke-width:2.6}
.sim-plus{animation-name:sim-plus}
.sim-done{opacity:0;animation-name:sim-done}
@keyframes sim-save{0%,18.6%{transform:none}19.2%{transform:scale(.84)}20.4%,100%{transform:none}}
@keyframes sim-save-fill{0%,18.8%{opacity:0}19.6%,96%{opacity:1}100%{opacity:0}}
@keyframes sim-plus{0%,18.8%{opacity:1;transform:none}19.6%,96%{opacity:0;transform:rotate(90deg) scale(.3)}100%{opacity:1;transform:none}}
@keyframes sim-done{0%,19%{opacity:0;transform:scale(.3)}20.2%{opacity:1;transform:scale(1.3)}21.8%,96%{opacity:1;transform:none}100%{opacity:0;transform:scale(.3)}}
/* The saved cover flies to the library on an arc: across eases in, up eases out. */
.sim-fly{position:absolute;z-index:3;left:36.63%;top:21.7%;width:26.73%;height:27.34%;border-radius:1.2cqw;overflow:hidden;opacity:0;background:#1A1A1F;box-shadow:0 0 0 1px rgba(210,86,108,.85),0 2cqw 4cqw -1cqw rgba(0,0,0,.85);pointer-events:none;animation-name:sim-fly-x,sim-fly-y;animation-timing-function:cubic-bezier(.55,0,.85,.55),cubic-bezier(.15,.6,.35,1)}
@keyframes sim-fly-x{0%,19.8%{translate:0 0;opacity:0}20.4%{translate:0 0;opacity:.95}25.6%{opacity:.7}26.4%{translate:160% 0;opacity:0}100%{translate:160% 0;opacity:0}}
@keyframes sim-fly-y{0%,20.4%{transform:none}26.4%,100%{transform:translateY(-93%) scale(.1)}}

/* Scene 2: connect your AI once. */
.sim-url{position:absolute;left:6%;right:6%;top:8%;height:24%;overflow:hidden;padding:0 3cqw;border-radius:2cqw;background:rgba(238,234,228,.04);border:1px solid rgba(238,234,228,.09);display:flex;flex-direction:column;justify-content:center;gap:1.3cqw}
.sim-url code{font-size:2.5cqw}
.sim-url code i{font-style:normal;color:var(--maroon-hi)}
.sim-url::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(210,86,108,.2) 50%,transparent 70%);transform:translateX(-100%);animation:sim-sweep var(--T) linear infinite}
@keyframes sim-sweep{0%,47.6%{transform:translateX(-100%)}51%,100%{transform:translateX(100%)}}
.sim-copy{position:absolute;z-index:1;right:2.6cqw;top:50%;height:5.4cqw;margin-top:-2.7cqw;min-width:13cqw;padding:0 2.2cqw;border-radius:99px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;overflow:hidden;animation-name:sim-copy}
.sim-copy b{grid-area:1/1;font-weight:600}
.sim-copy b:first-child{animation-name:sim-copy-a}
.sim-copy b + b{opacity:0;animation-name:sim-copy-b}
@keyframes sim-copy{0%,47%{transform:none}47.7%{transform:scale(.9)}48.8%,100%{transform:none}}
@keyframes sim-copy-a{0%,47.4%{opacity:1;transform:none}48.2%,99%{opacity:0;transform:translateY(-80%)}100%{opacity:1;transform:none}}
@keyframes sim-copy-b{0%,47.6%{opacity:0;transform:translateY(80%)}48.6%,98%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.sim-app{position:absolute;left:12%;right:12%;top:39%;bottom:6%;border-radius:2cqw;background:#141417;border:1px solid rgba(238,234,228,.1);box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.9);padding:0 3cqw 2.6cqw;display:flex;flex-direction:column;gap:1.3cqw}
.sim-app-head{display:flex;align-items:center;gap:.9cqw;flex:none;height:5.6cqw;margin:0 -3cqw .4cqw;padding:0 2.4cqw;border-bottom:1px solid rgba(238,234,228,.07);font-size:1.8cqw;color:var(--ink-3)}
.sim-app-head i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:rgba(238,234,228,.16)}
.sim-app-head span{margin-left:1.2cqw}
.sim-field{position:relative;flex:none;height:6.2cqw;border-radius:1.4cqw;background:#0B0B0D;border:1px solid rgba(238,234,228,.12);display:flex;align-items:center;padding:0 2cqw;overflow:hidden}
.sim-field::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--maroon-hi);opacity:0;animation:sim-focus var(--T) var(--se) infinite}
@keyframes sim-focus{0%,52.6%{opacity:0}53.4%,57.4%{opacity:1}59.5%,100%{opacity:0}}
.sim-ph{position:absolute;left:2cqw;color:var(--ink-3);animation-name:sim-ph}
@keyframes sim-ph{0%,53%{opacity:1}53.5%,99%{opacity:0}100%{opacity:1}}
.sim-field code{opacity:0;animation-name:sim-paste}
@keyframes sim-paste{0%,53.2%{opacity:0}53.5%,99%{opacity:1}100%{opacity:0}}
.sim-wipe{position:absolute;top:0;bottom:0;left:1.6cqw;right:0;background:#0B0B0D;border-left:.3cqw solid var(--maroon-hi);box-shadow:-1.4cqw 0 2.4cqw -.4cqw rgba(210,86,108,.55);opacity:0;animation-name:sim-wipe}
@keyframes sim-wipe{0%,53.2%{opacity:0;transform:none}53.4%{opacity:1;transform:none}55.8%{opacity:1;transform:translateX(100%)}56.2%,100%{opacity:0;transform:translateX(100%)}}
.sim-status{display:flex;align-items:center;gap:1.4cqw;margin-top:auto;font-size:2cqw}
.sim-led{position:relative;flex:none;width:1.8cqw;height:1.8cqw;border-radius:50%;background:rgba(238,234,228,.18)}
.sim-led i{position:absolute;inset:0;border-radius:50%;background:var(--ok);box-shadow:0 0 1.8cqw rgba(227,222,215,.75);opacity:0;animation-name:sim-led}
.sim-led::after{content:"";position:absolute;inset:0;border-radius:50%;border:.3cqw solid var(--maroon-hi);opacity:0;animation:sim-led-ring var(--T) ease-out infinite}
@keyframes sim-led{0%,55.8%{opacity:0;transform:scale(.4)}56.6%{opacity:1;transform:scale(1.35)}57.8%,99%{opacity:1;transform:none}100%{opacity:0;transform:scale(.4)}}
@keyframes sim-led-ring{0%,56%{opacity:0;transform:none}56.4%{opacity:.9;transform:none}60.5%,100%{opacity:0;transform:scale(3.4)}}
.sim-st{display:grid}
.sim-st b{grid-area:1/1;font-weight:500;white-space:nowrap}
.sim-st b:first-child{color:var(--ink-3);animation-name:sim-st-a}
.sim-st b + b{color:var(--ink);opacity:0;animation-name:sim-st-b}
@keyframes sim-st-a{0%,56%{opacity:1;transform:none}56.8%,99%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:none}}
@keyframes sim-st-b{0%,56.4%{opacity:0;transform:translateY(60%)}57.4%,98.5%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* Scene 3: ask as usual; the skill loads; the creator is paid. */
.sim-window{position:absolute;inset:0;background:linear-gradient(180deg,#121215,#0C0C0F)}
.sim-chat > .sim-app-head{position:absolute;left:0;right:0;top:0;height:9.5%;margin:0;padding:0 3.2cqw}
.sim-hello{position:absolute;left:0;right:0;top:38%;text-align:center;font:600 3.4cqw/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink-3);animation-name:sim-hello}
@keyframes sim-hello{0%,69.6%{opacity:1;transform:none}71.4%,100%{opacity:0;transform:translateY(-30%)}}
.sim-bubble{position:absolute;right:5%;top:15%;max-width:62%;padding:1.8cqw 2.6cqw;border-radius:2.4cqw 2.4cqw .8cqw 2.4cqw;background:var(--surface-3);border:1px solid rgba(238,234,228,.08);color:var(--ink);transform-origin:100% 100%;opacity:0;animation-name:sim-bubble}
@keyframes sim-bubble{0%,70.2%{opacity:0;transform:translateY(40%) scale(.9)}72%,97%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.sim-chip{position:absolute;left:5%;top:33%;max-width:80%;display:flex;align-items:center;gap:1.4cqw;height:5.4cqw;padding:0 2.4cqw 0 1.3cqw;border-radius:99px;background:rgba(238,234,228,.04);border:1px solid rgba(238,234,228,.1);font-size:1.9cqw;color:var(--ink-2);opacity:0;animation-name:sim-chip}
.sim-chip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--maroon-hi),0 0 3cqw -.6cqw rgba(210,86,108,.7);opacity:0;animation:sim-chip-lit var(--T) var(--se) infinite}
@keyframes sim-chip{0%,72.8%{opacity:0;transform:translateY(40%)}74.2%,97%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes sim-chip-lit{0%,77.6%{opacity:0}78.8%,96%{opacity:1}100%{opacity:0}}
.sim-ic{position:relative;flex:none;width:2.9cqw;height:2.9cqw}
.sim-spin{position:absolute;inset:0;border-radius:50%;border:.34cqw solid rgba(238,234,228,.16);border-top-color:var(--maroon-hi);animation:sim-rot .8s linear infinite,sim-spin-out var(--T) var(--se) infinite}
@keyframes sim-rot{to{transform:rotate(360deg)}}
@keyframes sim-spin-out{0%,77.6%{opacity:1}78.4%,99%{opacity:0}100%{opacity:1}}
.sim-ok{position:absolute;inset:0;border-radius:50%;background:var(--maroon);color:#F4F1EC;padding:.5cqw;opacity:0;animation-name:sim-ok}
.sim-ok svg{stroke-width:3.2}
@keyframes sim-ok{0%,77.8%{opacity:0;transform:scale(.3)}79%{opacity:1;transform:scale(1.3)}80.4%,97%{opacity:1;transform:none}100%{opacity:0;transform:scale(.3)}}
.sim-cl{display:grid;min-width:0}
.sim-cl b{grid-area:1/1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-cl b:first-child{animation-name:sim-cl-a}
.sim-cl b + b{color:var(--ink);opacity:0;animation-name:sim-cl-b}
@keyframes sim-cl-a{0%,77.8%{opacity:1}78.6%,99%{opacity:0}100%{opacity:1}}
@keyframes sim-cl-b{0%,78.2%{opacity:0}79.2%,97%{opacity:1}100%{opacity:0}}
.sim-answer{position:absolute;left:5%;top:47%;width:72%;display:grid;gap:1.7cqw}
.sim-answer i{display:block;height:1.9cqw;border-radius:99px;background:rgba(238,234,228,.13);transform-origin:left;transform:scaleX(0);animation-name:sim-line;animation-delay:calc(var(--j) * .34s)}
.sim-answer i:nth-child(1){width:96%;background:rgba(238,234,228,.22)}
.sim-answer i:nth-child(2){width:88%}
.sim-answer i:nth-child(3){width:100%}
.sim-answer i:nth-child(4){width:58%}
@keyframes sim-line{0%,79.4%{transform:scaleX(0);opacity:0}79.8%{opacity:1}82.6%,95%{transform:scaleX(1);opacity:1}97.5%,100%{transform:scaleX(1);opacity:0}}
.sim-paid{position:absolute;right:6%;top:68%;padding:1.3cqw 2.4cqw;border-radius:99px;background:var(--maroon);color:#F4F1EC;font-weight:600;font-size:2cqw;white-space:nowrap;box-shadow:0 2cqw 4cqw -1.6cqw rgba(168,50,74,.95);opacity:0;animation-name:sim-paid}
@keyframes sim-paid{0%,84.4%{opacity:0;transform:translateY(50%) scale(.9)}86%{opacity:1;transform:none}93%{opacity:1;transform:translateY(-35%)}96%,100%{opacity:0;transform:translateY(-80%)}}
.sim-input{position:absolute;left:5%;right:5%;bottom:5%;height:12%;display:flex;align-items:center;padding:0 1.2cqw 0 2.6cqw;border-radius:2.4cqw;background:#18181C;border:1px solid rgba(238,234,228,.12);overflow:hidden;color:var(--ink)}
/* Typing: a cover the colour of the field steps off the text one letter at a time; its left
   edge is the caret. */
.sim-typed{position:relative;white-space:nowrap;animation-name:sim-typed}
.sim-type{position:absolute;top:-.4em;bottom:-.4em;left:0;width:100%;background:#18181C;animation-name:sim-type;animation-timing-function:steps(var(--n,36),end)}
.sim-type::before{content:"";position:absolute;left:0;top:.45em;bottom:.45em;width:.24cqw;border-radius:1px;background:var(--maroon-hi);animation:sim-blink 1s steps(1,end) infinite}
@keyframes sim-blink{50%{opacity:0}}
@keyframes sim-type{0%,65%{transform:none}68.6%,100%{transform:translateX(100%)}}
@keyframes sim-typed{0%,69.8%{opacity:1}70.4%,100%{opacity:0}}
.sim-send{position:relative;z-index:1;flex:none;margin-left:auto;width:6.4cqw;height:6.4cqw;border-radius:50%;background:rgba(238,234,228,.1);display:grid;place-items:center;color:#F4F1EC;animation-name:sim-send}
.sim-send::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--maroon);opacity:0;animation:sim-send-on var(--T) var(--se) infinite}
.sim-send svg{position:relative;width:3.2cqw;height:3.2cqw;stroke-width:2.6}
@keyframes sim-send{0%,69.6%{transform:none}70.2%{transform:scale(.84)}71.2%,100%{transform:none}}
@keyframes sim-send-on{0%,67.8%{opacity:0}68.8%,70.6%{opacity:1}72.4%,100%{opacity:0}}

/* The cursor: one box the size of the stage, moved by percentages of the stage, with the
   arrow's tip at its top left corner. Each click presses the arrow and ripples a maroon ring. */
.sim-cursor{position:absolute;z-index:6;inset:0;pointer-events:none;animation-name:sim-cursor}
.sim-arrow{position:absolute;left:0;top:0;width:4.6cqw;height:4.6cqw;translate:-17% -12%;transform-origin:17% 12%;animation-name:sim-press}
.sim-arrow svg{fill:#F4F1EC;stroke:#09090B;stroke-width:1.3;filter:drop-shadow(0 .5cqw .8cqw rgba(0,0,0,.65))}
.sim-tap{position:absolute;left:-3.6cqw;top:-3.6cqw;width:7.2cqw;height:7.2cqw;border-radius:50%;border:.34cqw solid var(--maroon-hi);opacity:0;animation-name:sim-tap;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
@keyframes sim-cursor{
  0%{transform:translate(82%,88%);opacity:0}
  3%{transform:translate(76%,80%);opacity:1}
  6.5%{transform:translate(28%,64%)}
  10%,14%{transform:translate(52%,42%)}
  18%,20.6%{transform:translate(60%,26.6%)}
  25.8%,29.5%{transform:translate(91.5%,11%)}
  35.5%{transform:translate(72%,58%);opacity:1}
  38.5%{transform:translate(70%,62%);opacity:0}
  41%{transform:translate(62%,72%);opacity:0}
  43.5%{transform:translate(66%,60%);opacity:1}
  46.8%,48.6%{transform:translate(84.7%,20%)}
  52.4%,54.2%{transform:translate(44%,60.5%)}
  58%{transform:translate(64%,84%);opacity:1}
  60.5%{transform:translate(66%,88%);opacity:0}
  62.5%{transform:translate(60%,76%);opacity:0}
  64.5%{transform:translate(56%,74%);opacity:1}
  69.6%,71%{transform:translate(90.4%,89%)}
  74%{transform:translate(80%,66%);opacity:1}
  77%,100%{transform:translate(80%,66%);opacity:0}
}
@keyframes sim-press{0%,18.6%{scale:1}19.2%{scale:.8}20%,47%{scale:1}47.6%{scale:.8}48.4%,52.6%{scale:1}53.2%{scale:.8}54%,69.6%{scale:1}70.2%{scale:.8}71%,100%{scale:1}}
@keyframes sim-tap{
  0%,19%{opacity:0;transform:scale(.2)}19.2%{opacity:.95;transform:scale(.3)}22.4%{opacity:0;transform:scale(1.5)}
  22.5%,47.4%{opacity:0;transform:scale(.2)}47.6%{opacity:.95;transform:scale(.3)}50.8%{opacity:0;transform:scale(1.5)}
  50.9%,53%{opacity:0;transform:scale(.2)}53.2%{opacity:.95;transform:scale(.3)}56.4%{opacity:0;transform:scale(1.5)}
  56.5%,70%{opacity:0;transform:scale(.2)}70.2%{opacity:.95;transform:scale(.3)}73.4%{opacity:0;transform:scale(1.5)}
  73.5%,100%{opacity:0;transform:scale(.2)}
}

/* Captions: one line per step, in time with the stage. The ordered list carries the same
   steps for screen readers and becomes the visible fallback under reduced motion. */
.sim-captions{display:grid;min-height:2.9em;padding:0 4px;font:500 15.5px/1.45 var(--one);color:var(--ink-2)}
.sim-captions span{grid-area:1/1;opacity:0;animation:var(--T) var(--se) infinite both}
.sim-captions span:nth-child(1){animation-name:sim-c0}
.sim-captions span:nth-child(2){animation-name:sim-c1}
.sim-captions span:nth-child(3){animation-name:sim-c2}
.sim-captions span:nth-child(4){animation-name:sim-c3}
.sim-captions span:nth-child(5){animation-name:sim-c4}
@keyframes sim-c0{0%{opacity:0;transform:translateY(40%)}1.5%,17.6%{opacity:1;transform:none}19%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes sim-c1{0%,19%{opacity:0;transform:translateY(40%)}20.5%,38.6%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes sim-c2{0%,40.5%{opacity:0;transform:translateY(40%)}42%,60.6%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes sim-c3{0%,62%{opacity:0;transform:translateY(40%)}63.5%,83%{opacity:1;transform:none}84.5%,100%{opacity:0;transform:translateY(-40%)}}
@keyframes sim-c4{0%,84.5%{opacity:0;transform:translateY(40%)}86%,97.6%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:translateY(-40%)}}
.sim-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;list-style:none}
.sim.is-idle *,.sim.is-idle *::before,.sim.is-idle *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .sim *,.sim *::before,.sim *::after{animation:none !important}
  .sim-browse{opacity:1}
  .sim-cursor,.sim-fly,.sim-captions{display:none}
  .sim-step{opacity:1}
  .sim-progress{transform:scaleX(.25)}
  .sim-steps{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:grid;gap:8px;font-size:15px}
  .sim-steps b{color:var(--ink);font-weight:500}
}

/* Home hero: the words on the left, the tutorial playing on the right; stacked on phones. */
.hero-copy{min-width:0}
.hero .sim{margin-top:36px}
@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:center;padding-top:32px}
  .hero .display{font-size:clamp(44px,4.5vw,60px)}
  .hero .sim{margin-top:0}
}
/* How it works: the tutorial leads the page. */
.page-sim{max-width:760px;margin:36px 0 8px}

/* Server-rendered content: what crawlers read, and what shows for a moment before the app
   takes over (or for good when JavaScript is off). Plain, readable, in the house style. */
[data-ssr] section{margin-top:40px}
[data-ssr] section:first-child{margin-top:0}
[data-ssr] h2{font-size:24px;margin:28px 0 12px}
[data-ssr] ol,[data-ssr] ul{display:grid;gap:8px;padding-left:22px;max-width:76ch}
[data-ssr] li::marker{color:var(--maroon-hi)}
[data-ssr] a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(210,86,108,.6);text-underline-offset:.18em}
[data-ssr] article > p{margin-top:12px;max-width:68ch}
[data-ssr] .crumb{margin-bottom:12px;color:var(--ink-3);font-size:14px}