/* designforai.dev. Base: the approved lab design (lab/r4/j): nav bubble with scooped fillets, hero photo gallery
   with thumbnail radios, the In motion rail, uniform snippet tiles tinted from their specimen, painted style
   posters, Frontier browser windows, footer tab, the split Copy-prompt button. Then the rules the inner pages
   need (listing heads, toolbar, chips, pager, detail pages, code blocks, prompt panel, prose), on the same tokens.
   Rhythm on the home page: wash / ink / grey / white / wash / ink. */

:root {
  --blue: #0080ff;
  --blue-text: #0066ff;
  --blue-deep: #0050ff;
  --blue-tint: #5aa6ff;
  --ink: #101010;
  --ink-2: #191919;
  --tile-dark: #171717;
  --carbon: #222;
  --graphite: #636f7b;
  --pencil: #8c9baa;
  --label: #4b5259;
  --label-dark: #b3b9bf;
  --note-dark: #9aa4ad;
  --hair: #e2e4e8;
  --hair-dark: rgba(255, 255, 255, 0.13);
  --grey: #e9ecf1;
  --paper: #ffffff;
  --paper-2: #ededf0;
  --canvas: #f3f8ff;
  --mint: 198 239 230;
  --lilac: 226 210 255;
  --sky: 201 224 255;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 48px);
  --gutter: max(var(--gut), calc((100% - var(--wrap)) / 2));
  --sheen: radial-gradient(120% 90% at 50% -12%, rgba(255, 255, 255, 0.11), transparent 62%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }
.band ::selection { background: #fff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- nav: a bubble hanging from the top edge, corners scooped. Past the hero (body.is-scrolled, set by
   site.js at 120px) it stretches into a 52px white bar with a hairline under it; back at the top it is a bubble again. ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.bubble { pointer-events: auto; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; max-width: calc(100vw - 72px); padding: 9px 12px 11px 12px; background: var(--ink); color: #fff; border: 1px solid var(--hair-dark); border-top: 0; border-radius: 0 0 26px 26px; transition: min-width 0.25s ease, max-width 0.25s ease, padding 0.25s ease, border-radius 0.25s ease, background 0.2s, color 0.2s, border-color 0.2s; }
.bubble::before, .bubble::after { content: ""; position: absolute; top: 0; width: 26px; height: 26px; pointer-events: none; transition: opacity 0.15s; }
.bubble::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 24.5px, var(--hair-dark) 25px, var(--hair-dark) 25.6px, var(--ink) 26px); }
.bubble::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 24.5px, var(--hair-dark) 25px, var(--hair-dark) 25.6px, var(--ink) 26px); }
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; font: 600 15px/1 var(--sans); letter-spacing: -0.02em; border-radius: 999px; }
.brand img { width: 26px; height: 26px; }
.links { display: flex; align-items: center; gap: 2px; }
.links a { display: block; padding: 9px 12px; font: 500 14px/1 var(--sans); color: rgba(255, 255, 255, 0.8); border-radius: 999px; transition: background 0.15s, color 0.15s; }
.links a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* the language button, left of the brand: flag + code, its popover shares the tool-menu rules (.lang-menu below) */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 6px 9px 6px 7px; font: 600 11px/1 var(--mono); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); background: transparent; border: 1px solid var(--hair-dark); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.flag { flex: none; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }
.menu-btn { display: none; margin-left: auto; padding: 9px 12px; font: 500 14px/1 var(--sans); color: #fff; background: transparent; border: 1px solid var(--hair-dark); border-radius: 999px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
body.is-scrolled .bubble { min-width: 100%; max-width: 100%; min-height: 44px; justify-content: center; gap: 4px 28px; padding: 0 var(--gutter); background: var(--ink); color: #fff; border-radius: 0; border-bottom: 1px solid var(--hair-dark); }
body.is-scrolled .bubble::before, body.is-scrolled .bubble::after { opacity: 0; }
body.is-scrolled .brand { font-size: 14px; }
body.is-scrolled .brand img { width: 22px; height: 22px; }
body.is-scrolled .links a { padding: 7px 10px; font-size: 13px; }
body.is-scrolled .lang-btn { padding: 5px 8px 5px 6px; }

/* ---------- hero: split hero on three washes, rounded photo gallery with a thumbnail pill ---------- */
h1 { margin: 0; font-weight: 700; font-size: 68px; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.hero { position: relative; padding: 172px 0 96px; background:
  radial-gradient(38% 60% at 12% 82%, rgb(var(--mint) / .95) 0%, rgb(var(--mint) / 0) 72%),
  radial-gradient(34% 56% at 70% 96%, rgb(var(--lilac) / .85) 0%, rgb(var(--lilac) / 0) 72%),
  radial-gradient(42% 64% at 92% 4%, rgb(var(--sky) / .95) 0%, rgb(var(--sky) / 0) 72%),
  var(--canvas); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 56px; align-items: center; }
.hero-lead { margin: 24px 0 0; max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--graphite); }
.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 34px 0 0; }
.cta { display: inline-flex; align-items: center; height: 54px; padding: 0 32px; border-radius: 999px; background: var(--blue-text); color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 128, 255, .22); transition: background .15s, transform .15s; }
.cta:hover { background: var(--blue-deep); }
.cta:active { transform: translateY(1px); }
.gallery { position: relative; aspect-ratio: 620 / 420; border-radius: 28px; overflow: hidden; background: #dbe6f4; }
.gallery .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
#g1:checked ~ .s1, #g2:checked ~ .s2, #g3:checked ~ .s3 { opacity: 1; }
.thumbs { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; padding: 6px; background: var(--paper); border-radius: 999px; box-shadow: 0 6px 18px rgba(16, 16, 16, .12); }
.thumbs label { position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .15s, box-shadow .15s; }
.thumbs label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs label:hover { opacity: .85; }
#g1:checked ~ .thumbs .t1, #g2:checked ~ .thumbs .t2, #g3:checked ~ .thumbs .t3 { opacity: 1; box-shadow: inset 0 0 0 2px var(--blue); }
#g1:focus-visible ~ .thumbs .t1, #g2:focus-visible ~ .thumbs .t2, #g3:focus-visible ~ .thumbs .t3 { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- section heads: one system for the whole site ---------- */
.band { background: var(--ink); color: #fff; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
h2 { margin: 0; font: 700 clamp(34px, 3.8vw, 54px)/1 var(--sans); letter-spacing: -0.035em; }
.sec-note { max-width: 52em; margin: 0; font-size: 16px; line-height: 1.5; color: #5c6873; }
.sec-head .sec-note { margin-top: 16px; }
.band .sec-note { color: var(--note-dark); }
.sec-links { display: flex; gap: 20px; font: 500 14px/1 var(--sans); }
.sec-links a { padding-bottom: 3px; border-bottom: 1px solid var(--pencil); transition: border-color 0.15s; }
.sec-links a:hover { border-color: currentColor; }
.band .sec-links a { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.35); }
.band .sec-links a:hover { color: #fff; border-color: #fff; }
.live { display: inline-block; width: 9px; height: 9px; margin: 0 0 0 14px; vertical-align: 0.42em; border-radius: 50%; background: var(--blue); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.55); } 70% { box-shadow: 0 0 0 11px rgba(0, 128, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 128, 255, 0); } }

/* ---------- the dark specimen tile (used by the In motion rail) ---------- */
.tile { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--hair); border-radius: 12px; }
.stage { position: relative; display: grid; place-items: center; min-height: 236px; padding: 28px; overflow: hidden; color: #fff; background: var(--sheen), var(--tile-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.demo { position: absolute; top: 50%; left: 50%; width: max-content; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center; }
[data-href] > .stage { cursor: pointer; }
.label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 16px 0; font: 400 12px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--label); }
.label a { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; }
.label a > span:first-child { flex: none; }
.label .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.09em; text-align: right; }
.label a:hover .name { color: var(--ink); }
.acts { display: flex; gap: 8px; padding: 12px 16px 16px; }
.act { padding: 8px 12px; white-space: nowrap; font: 500 13px/1 var(--sans); letter-spacing: -0.005em; color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.act:hover { border-color: var(--ink); }
.act:active { transform: translateY(1px); }
.act.solid { color: #fff; background: var(--ink); border-color: var(--ink); }
.act.solid:hover { background: #2a2a2a; }
.act.is-done, .act.solid.is-done { color: #fff; background: var(--blue); border-color: var(--blue); }
.band .tile { background: var(--ink-2); border-color: var(--hair-dark); }
.band .stage { background: var(--sheen), #202020; }
.band .label { color: var(--label-dark); }
.band .label a:hover .name { color: #fff; }
.band .act { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.26); }
.band .act:hover { border-color: #fff; }
.band .act.solid { color: var(--ink); background: #fff; border-color: #fff; }
.band .act.solid:hover { background: #e6e6e6; }
.band .act.is-done, .band .act.solid.is-done { color: #fff; background: var(--blue); border-color: var(--blue); }

/* ---------- the split "Copy prompt" button: [glyph | Copy prompt | caret]; the caret opens the tool menu.
   It reads its colours from custom properties so the band, the dark tile and the posters can repaint it. ---------- */
.pbtn { position: relative; display: inline-flex; align-items: stretch; vertical-align: top; overflow: hidden; color: var(--pb-fg, #fff); background: var(--pb-bg, var(--ink)); border: var(--pb-border, 1px solid var(--pb-bg, var(--ink))); border-radius: var(--pb-r, 6px); box-shadow: var(--pb-shadow, none); transition: background 0.15s, border-color 0.15s; }
.pbtn-main { display: inline-flex; align-items: center; gap: 7px; height: 29px; margin: 0; padding: 0 10px 0 9px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; color: inherit; background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.pbtn-main:hover, .pbtn-sel:hover { background: var(--pb-hover, rgba(255, 255, 255, 0.14)); }
.pbtn-main:active { transform: translateY(1px); }
.pbtn-main:focus-visible { outline-offset: -3px; }
.pbtn .ai { flex: none; width: 14px; height: 14px; fill: currentColor; }
.pbtn-sel { display: grid; place-items: center; width: 24px; margin: 0; padding: 0; color: inherit; background: transparent; border: 0; border-left: 1px solid var(--pb-line, rgba(255, 255, 255, 0.22)); cursor: pointer; transition: background 0.15s; }
.pbtn-sel .caret { width: 12px; height: 12px; pointer-events: none; transition: transform 0.15s; }
.pbtn-sel[aria-expanded="true"] .caret { transform: rotate(180deg); }
.pbtn-sel:focus-visible { outline-offset: -3px; }
/* the tool menu: a popover anchored under the caret that opened it (anchor positioning where supported; site.js
   sets fixed coordinates elsewhere, and toggles .is-open where popover itself is missing) */
.tool-menu { position: fixed; inset: auto; z-index: 60; display: none; min-width: 168px; margin: 0; padding: 4px; color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; box-shadow: 0 12px 32px rgba(16, 16, 16, 0.16); }
.tool-menu:popover-open { display: block; }
.tool-menu.is-open { display: block; }
@supports (position-area: bottom) {
  .tool-menu { inset: auto; margin: 6px 0 0; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
.tool-menu button, .tool-menu a { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 8px 11px 8px 9px; font: 500 13px/1 var(--sans); letter-spacing: -0.005em; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.tool-menu button:hover, .tool-menu button:focus-visible, .tool-menu a:hover, .tool-menu a:focus-visible { background: rgba(16, 16, 16, 0.06); outline: 0; }
.tool-menu button[aria-checked="true"], .tool-menu a[aria-current="true"] { color: #fff; background: var(--ink); }
.tool-menu .ai { flex: none; width: 16px; height: 16px; fill: currentColor; }
/* the language menu opens under its button, left-aligned, dark like the bubble it hangs from */
.lang-menu { min-width: 150px; color: #fff; background: var(--ink); border-color: var(--hair-dark); }
.lang-menu a { color: rgba(255, 255, 255, 0.85); }
.lang-menu a:hover, .lang-menu a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); }
.lang-menu a[aria-current="true"] { color: var(--ink); background: #fff; }
@supports (position-area: bottom) {
  .lang-menu { position-area: bottom span-right; }
}
.pbtn.is-done { --pb-bg: var(--blue); --pb-fg: #fff; --pb-border: 1px solid var(--blue); }
.band .pbtn, .spec.dark .pbtn { --pb-bg: #fff; --pb-fg: var(--ink); --pb-line: rgba(16, 16, 16, 0.18); --pb-hover: rgba(16, 16, 16, 0.08); }

/* ---------- In motion: an endless rail of oversized dark tiles on the first ink band. The track holds the slides
   twice (the second set inert) and moves by half its width in 45s; it pauses under the pointer or keyboard focus.
   Under prefers-reduced-motion and on touch (no hover) the clones are dropped and the rail is a snap-scrolling strip.
   The prev/next buttons take over the track (site.js) and hand it back to the loop after a pause. ---------- */
.motion { padding: 100px 0 108px; }
.rail-ctl { display: flex; gap: 8px; }
.rail-ctl button { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.rail-ctl button:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.rail-ctl svg { width: 18px; height: 18px; }
.rail { --lip: max(var(--gut), (100% - var(--wrap)) / 2); --step: 20px; margin: 44px 0 0; padding: 0 var(--lip) 6px; overflow: clip; }
.rail-track { display: flex; width: max-content; animation: rail-run 45s linear infinite; will-change: transform; }
.rail-track > .slide { margin-right: var(--step); }
@keyframes rail-run { to { transform: translateX(-50%); } }
.rail:hover .rail-track, .rail:focus-within .rail-track { animation-play-state: paused; }
.rail.is-manual .rail-track { animation: none; transition: transform 0.45s ease; }
.slide { flex: 0 0 clamp(300px, 29vw, 420px); scroll-snap-align: start; border-radius: 26px; }
.slide .stage { min-height: 272px; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--lip); scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail-track { animation: none; will-change: auto; }
  .rail.is-manual .rail-track { transition: none; }
  .slide.is-clone { display: none; }
}

/* ---------- the shelf: one 4-column grid on a quiet grey band, every tile the same size, painted in its own
   specimen's tint, the catalog meta on a single hairline row. ---------- */
.shelf { padding: 100px 0 108px; background: var(--grey); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 44px 0 0; }
.spec { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; color: var(--ink); background: var(--tint, var(--paper)); border: 1px solid rgba(16, 16, 16, 0.07); }
.spec .stage { flex: 1 1 auto; min-height: 212px; padding: 24px; color: var(--ink); background: var(--tint, var(--paper)); box-shadow: none; }
.body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 12px; padding: 12px 16px 16px; border-top: 1px solid rgba(16, 16, 16, 0.09); }
.body .code { flex: none; font: 400 11.5px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--label); white-space: nowrap; }
.body .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-align: right; }
.body .name:hover { color: var(--blue); }
.body .acts { grid-column: 1 / -1; padding: 0; }
.spec .act { border-color: rgba(16, 16, 16, 0.14); }
.spec.dark { color: #fff; border-color: rgba(255, 255, 255, 0.08); }
.spec.dark .stage { color: #fff; background: var(--sheen), var(--tint); }
.spec.dark .body { border-color: rgba(255, 255, 255, 0.14); }
.spec.dark .body .code { color: var(--label-dark); }
.spec.dark .body .name { color: #fff; }
.spec.dark .act { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.26); }
.spec.dark .act:hover { border-color: #fff; }

/* ---------- styles: portrait posters, each painted in the style's own tokens (bg, fg, accent, radius, shadow,
   border, font); the meta row and even the Copy prompt button take the style. The generator derives --btn-fg,
   --p-line, --p-hover from the tokens and adds p-glass / p-glow / p-neu / p-warn when the seed declares
   --glass / --glow / --light+--dark / --warn. ---------- */
.styles { padding: 100px 0 108px; background: var(--paper); }
.posters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 44px 0 0; }
.poster { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; color: var(--p-fg, var(--fg, var(--ink))); background: var(--bg, var(--paper)); font-family: var(--font, var(--sans)); border: var(--border, 1px solid rgba(16, 16, 16, 0.1)); }
.poster .art { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 252px; padding: 20px 18px 18px; overflow: hidden; }
.poster .aa { display: block; font-size: 64px; line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; }
.poster .art small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; opacity: 0.78; }
.poster .panel { align-self: flex-start; max-width: 100%; padding: 16px 18px 14px; color: var(--p-panel-fg, inherit); background: var(--glass, var(--surface, var(--panel, var(--paper, transparent)))); border: var(--border, 1px solid var(--edge, var(--line, transparent))); border-radius: var(--radius, 8px); box-shadow: var(--shadow, none); }
.poster .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.poster .pb { padding: 10px 14px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--btn-fg, #fff); background: var(--accent, var(--fg)); border: var(--border, 0); border-radius: var(--radius, 8px); }
.poster .pt { padding: 7px 10px; font-size: 11px; font-weight: 500; line-height: 1; border: 1px solid currentColor; border-radius: var(--radius, 8px); opacity: 0.8; }
.poster .body { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 14px 16px 16px; border-top: var(--border, 1px solid var(--line, var(--p-line, rgba(16, 16, 16, 0.1)))); }
.poster .body .name { white-space: normal; text-align: left; font-size: 15px; line-height: 1.25; color: inherit; }
.poster .body .acts { margin-top: 8px; }
.poster .body .code { color: inherit; opacity: 0.62; }
.poster .body .name:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.poster .pbtn { --pb-bg: var(--accent, var(--fg)); --pb-fg: var(--btn-fg, #fff); --pb-r: var(--radius, 8px); --pb-border: var(--border, 1px solid var(--accent, var(--fg))); --pb-shadow: none; --pb-line: var(--p-pline, rgba(255, 255, 255, 0.25)); --pb-hover: var(--p-hover, rgba(255, 255, 255, 0.14)); }
/* glass: two accent blobs behind everything, a frosted panel with a light edge */
.p-glass .art { background: radial-gradient(circle at 18% 12%, var(--accent) 0, transparent 46%), radial-gradient(circle at 88% 84%, var(--accent2, var(--accent3, var(--accent))) 0, transparent 46%); }
.p-glass .panel { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
/* soft ui: one colour, two shadows; the button is the surface itself */
.p-neu .pb { color: var(--accent); background: var(--bg); box-shadow: 6px 6px 12px var(--dark), -6px -6px 12px var(--light); }
.p-neu .pbtn { --pb-bg: var(--bg); --pb-fg: var(--p-fg, var(--fg)); --pb-border: 1px solid var(--bg); --pb-shadow: 6px 6px 12px var(--dark), -6px -6px 12px var(--light); }
/* glow: the heading and the panel edge carry the style's glow */
.p-glow .aa { color: var(--accent2, var(--accent)); text-shadow: var(--glow); }
.p-glow .panel { border-color: var(--accent2, var(--accent)); box-shadow: var(--glow); }
.p-glow .pt { color: var(--accent2, var(--accent)); opacity: 1; }
.p-glow .pbtn { --pb-shadow: var(--glow); }
/* a warning colour in the seed becomes a hazard stripe along the top */
.p-warn .art::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--warn) 0 10px, var(--bg) 10px 20px); }
.poster-solo { max-width: 460px; margin: 0 auto; }
.poster-solo .art { min-height: 320px; }

/* ---------- frontier: browser windows on the wash, the meta as plain text under each ---------- */
.frontier { padding: 100px 0 120px; background:
  radial-gradient(40% 70% at 6% 12%, rgb(var(--mint) / .9) 0%, rgb(var(--mint) / 0) 72%),
  radial-gradient(36% 64% at 58% 100%, rgb(var(--lilac) / .8) 0%, rgb(var(--lilac) / 0) 72%),
  radial-gradient(40% 70% at 96% 0%, rgb(var(--sky) / .9) 0%, rgb(var(--sky) / 0) 72%),
  var(--canvas); }
.fx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; }
.fx { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 14px; background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; }
/* the window: light chrome, three faint dots, the token in a white address pill with a padlock */
.win { overflow: hidden; border-radius: 8px; background: var(--paper); border: 1px solid rgba(16, 16, 16, 0.12); }
.win-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 11px; background: #f2f4f7; border-bottom: 1px solid var(--hair); }
.dots { display: inline-flex; flex: none; gap: 5px; }
.dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #d3d8df; }
.addr { display: flex; flex: 1 1 auto; align-items: center; gap: 7px; min-width: 0; height: 23px; padding: 0 9px; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid rgba(16, 16, 16, 0.09); font: 500 11.5px/1 var(--mono); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; transition: color 0.15s, border-color 0.15s; }
.addr .lock { flex: none; width: 10px; height: 10px; color: var(--pencil); }
.addr:hover { color: var(--blue); border-color: rgba(0, 128, 255, 0.45); }
/* the page inside: a tinted mini page, context lines drawn in CSS, the demo zoomed in flow.
   zoom (Baseline 2024) scales layout too, so the rules around the demo keep their place; older engines show 1x. */
.win-page { position: relative; display: flex; flex-direction: column; height: 236px; padding: 22px 20px 0; overflow: hidden; color: var(--ink); background: var(--tint, var(--paper-2)); }
.pg { display: flex; flex-direction: column; gap: 7px; }
.pg i { display: block; width: var(--w, 100%); height: 4px; border-radius: 2px; background: rgba(16, 16, 16, 0.1); }
.pg i.h { height: 11px; border-radius: 3px; margin-bottom: 5px; background: rgba(16, 16, 16, 0.2); }
.win-demo { zoom: var(--z, 1.3); margin: 14px 0 12px; max-width: 100%; }
.win-demo :focus-visible { outline-offset: 2px; }
.win-demo fieldset { min-width: 0; margin: 0; }
.win-demo input:not([type=checkbox]):not([type=radio]) { max-width: 100%; box-sizing: border-box; }
/* meta under the window, plain text on the wash */
.fx-meta { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 14px 2px 0; }
.fx-what { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.compat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; font: 400 11.5px/1 var(--mono); letter-spacing: 0; color: var(--label); font-variant-numeric: tabular-nums; }
.compat > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.compat img { width: 16px; height: 16px; }
.compat .none { color: var(--pencil); }
.compat .none img { opacity: 0.35; filter: grayscale(1); }
.fx-meta .acts { align-items: center; margin-top: auto; padding: 2px 0 0; }
.fx-meta .act { border-color: rgba(16, 16, 16, 0.16); }

/* ---------- footer: the bubble returns as a tab ---------- */
.foot-site { position: relative; padding: 56px 0 32px; background: var(--ink); color: #fff; }
.foot-tab { position: absolute; top: -58px; left: var(--gutter); display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 26px 0 19px; background: var(--ink); border-radius: 24px 24px 0 0; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.foot-tab img { display: block; width: 34px; height: 34px; }
.foot-tab::before, .foot-tab::after { content: ""; position: absolute; bottom: 0; width: 16px; height: 16px; }
.foot-tab::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 16px, var(--ink) 16.6px); }
.foot-tab::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 16px, var(--ink) 16.6px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 48px; padding-bottom: 56px; border-bottom: 1px solid #2a2c30; }
.foot-about p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: #9aa4ae; }
.foot-title { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #fff; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.3; }
.foot-col a { color: #d6dbe0; text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-col .sub a { color: #8f99a3; font-size: 13px; }
.foot-bottom { margin: 0; padding-top: 24px; text-align: center; font: 400 11px/1.6 var(--mono); letter-spacing: .04em; color: #8a95a1; }
.foot-langs { display: block; margin-top: 6px; }
.foot-langs a { color: #8f99a3; }
.foot-langs a:hover { color: #fff; text-decoration: underline; }
.foot-langs a[aria-current="true"] { color: #d6dbe0; }
body.inner main { padding-top: 96px; }
body.inner .foot-site { margin-top: 58px; }

/* ---------- the recently-copied strip (home, hidden until something was copied) ---------- */
.recent { padding: 26px 0 0; background: var(--grey); }
.recent h2 { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.recent p { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 13px/1.6 var(--sans); }
.recent a { color: var(--carbon); }
.recent a b { font: 400 11.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--label); margin-right: 7px; }
.recent a:hover { color: var(--blue); }

/* ---------- inner pages: listing heads, toolbar, chips, pager ---------- */
.listing, .detail { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut) 96px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.listing h1, .detail h1 { font-size: clamp(38px, 4vw, 56px); }
.listing h1 small { display: inline-block; margin-left: 12px; font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); vertical-align: middle; }
.lead { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.hint { font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); }
.section-title { margin: 0; font: 700 clamp(26px, 2.8vw, 34px)/1.05 var(--sans); letter-spacing: -0.03em; }
.listing h2.section-title { margin: 56px 0 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 36px 0 0; }
.toolbar .filters { flex: 1 1 auto; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.toolbar + .filters { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; color: var(--label); font: 500 13px/1 var(--sans); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-box { flex: 0 0 280px; max-width: 100%; height: 36px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; color: var(--ink); font: 400 14px/1 var(--sans); }
.filter-box:focus { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.filter-empty, .empty { margin: 22px 0 0; padding: 28px; border: 1px dashed var(--hair); border-radius: 12px; color: var(--graphite); font-size: 14px; }
.filter-more { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; font-size: 14px; }
.filter-more-head { grid-column: 1 / -1; margin: 8px 0 4px; font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); }
.filter-more a { display: block; padding: 7px 0; color: var(--carbon); border-bottom: 1px solid var(--hair); }
.filter-more a span { margin-right: 8px; font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--pencil); }
.filter-more a:hover { color: var(--blue); }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.pager .chip { min-width: 38px; justify-content: center; }
.shelf-links { margin: 28px 0 0; font-size: 14px; color: var(--graphite); }
.shelf-links a, .more a { color: var(--ink); border-bottom: 1px solid var(--pencil); }
.shelf-links a:hover, .more a:hover { border-color: currentColor; }
.more { margin: 22px 0 0; font-size: 14px; color: var(--graphite); }
.grid { display: grid; gap: 12px; margin-top: 22px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- detail pages ---------- */
.crumbs { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--graphite); }
.crumbs a { color: var(--label); }
.crumbs a:hover { color: var(--ink); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin: 22px 0 24px; }
.detail-head > div { min-width: 0; flex: 1 1 520px; }
.detail h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.02; }
.detail-head .lead { margin-top: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.tags span, .tags a { display: inline-block; padding: 7px 11px; border: 1px solid var(--hair); border-radius: 999px; font: 400 11.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--label); }
.tags a { border-color: rgba(0, 128, 255, 0.5); color: var(--blue-deep); }
.tags a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.status { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--graphite); }
.detail-head .compat { margin-top: 14px; font-size: 12.5px; }
.what { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--carbon); }
.states { display: flex; gap: 6px; margin: 0 0 12px; }
.detail-stage { padding: 12px; background: var(--grey); border-radius: 14px; }
.stage-demo { display: flex; align-items: center; justify-content: center; min-height: 280px; max-width: 760px; margin: 0 auto; padding: 40px; border-radius: 8px; background: var(--tint, #fff); overflow: auto; contain: paint; }
.stage-demo.dark { color: #fff; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.codeblock, .prompt { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
.codeblock { --box: #1b1f24; --box-head: #23282e; --box-line: rgba(255, 255, 255, 0.1); --box-fg: #e6e9ed; --box-label: #9aa4ae; border-color: var(--box); background: var(--box); }
.prompt { --box: #10302c; --box-head: #17403a; --box-line: rgba(255, 255, 255, 0.12); --box-fg: #e9f4f1; --box-label: #93c5ba; border-color: var(--box); background: var(--box); }
.prompt:not(:last-child) { position: static; }
.codeblock .code-head, .prompt .code-head { background: var(--box-head); border-bottom-color: var(--box-line); color: var(--box-label); }
.codeblock .act { color: var(--box-fg); background: rgba(255, 255, 255, 0.08); border-color: var(--box-line); }
.codeblock .act:hover { background: rgba(255, 255, 255, 0.16); }
.code-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 10px; border-top: 1px solid var(--box-line); background: var(--box-head); }
.code-foot .acts { display: inline-flex; gap: 8px; }
.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.code-head .ic { margin-right: 7px; }
.act { display: inline-flex; align-items: center; gap: 6px; }
.act .ic-done, .act.is-done .ic-copy { display: none; }
.act.is-done .ic-done { display: inline; }
.crumbs .ic-sep { width: 12px; height: 12px; margin: 0 4px; vertical-align: -2px; opacity: 0.6; }
.cta .ic, .sec-links a .ic { width: 16px; height: 16px; margin-left: 6px; transition: transform 0.15s; }
.cta:hover .ic, .sec-links a:hover .ic { transform: translateX(3px); }
.sec-links a { display: inline-flex; align-items: center; }
.source .ic { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; }
.foot-langs .ic { margin-right: 6px; opacity: 0.8; }
.codeblock + .codeblock, .prompt + .codeblock { margin-top: 12px; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--hair); font: 400 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.code-head .acts { padding: 0; font-family: var(--sans); letter-spacing: normal; text-transform: none; }
.codeblock pre { margin: 0; padding: 14px 16px; overflow: auto; font: 400 12.5px/1.55 var(--mono); color: var(--box-fg); background: var(--box); tab-size: 2; }
.codeblock pre code.lang-md { white-space: pre-wrap; overflow-wrap: anywhere; }
.codeblock .rule { display: block; margin: 0 -16px; padding: 0 16px; border-left: 3px solid transparent; }
.codeblock .rule.is-lit { background: rgba(0, 128, 255, 0.18); border-left-color: var(--blue); }
.prompt { position: sticky; top: 84px; }
.prompt-pre { margin: 0; padding: 14px 16px 0; font-size: 13px; line-height: 1.55; color: var(--box-label); }
.prompt-text { margin: 0; padding: 16px; font-size: 15px; line-height: 1.65; color: var(--box-fg); }
.prompt-text:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.after-copy { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.55; color: var(--graphite); }
.after-copy a, .fallback a, .source a, .shelf-links a { color: var(--blue-deep); }
.fallback, .source, .known { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--graphite); }
.prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 14px; }
.prevnext a { color: var(--carbon); }
.prevnext a:hover { color: var(--blue); }
.related { margin-top: 56px; }
.related .grid { margin-top: 18px; }
.style-page h2 { margin: 24px 0 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.style-page h2:first-child { margin-top: 0; }
.style-page ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--carbon); }
.style-page p { font-size: 15px; line-height: 1.6; color: var(--carbon); }
.style-page .known { margin: 18px 0; }
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- prose pages ---------- */
.prose { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut) 80px; }
.prose h1 { margin: 0 0 10px; font-size: clamp(36px, 4vw, 52px); }
.prose .lede { margin: 0 0 34px; font-size: 19px; line-height: 1.5; color: var(--graphite); }
.prose h2 { margin: 42px 0 10px; font: 700 26px/1.2 var(--sans); letter-spacing: -0.025em; }
.prose h3 { margin: 26px 0 8px; font: 600 18px/1.3 var(--sans); }
.prose p, .prose li { font-size: 16px; line-height: 1.65; color: var(--carbon); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose pre { padding: 14px 16px; overflow: auto; color: #e6e9ed; background: #1b1f24; border: 1px solid #1b1f24; border-radius: 12px; font: 400 13px/1.55 var(--mono); }
.prose code { padding: 2px 5px; border-radius: 4px; background: var(--grey); font: 400 0.92em var(--mono); }
.prose pre code { padding: 0; background: none; }
.prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 80, 255, 0.4); }
.prose a:hover { text-decoration-color: currentColor; }
.inner main p a:not([class]), .inner main li a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { padding: 9px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.prose th { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.prose .guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.guide-list a { font: 600 18px/1.3 var(--sans); color: var(--ink); border: 0; }
.guide-list a:hover { color: var(--blue); }
.guide-list p { margin: 6px 0 0; font-size: 14px; }
.md-index { columns: 3; column-gap: 32px; font-size: 13px; line-height: 1.8; }
.md-index a { color: var(--carbon); border: 0; }
.md-index a:hover { color: var(--blue); }

/* ---------- motion budget ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live { animation: none; }
  .stage *, .stage *::before, .stage *::after, .art *, .art *::before, .art *::after, .win-demo *, .win-demo *::before, .win-demo *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  h1 { font-size: 52px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px; }
}
@media (max-width: 1100px) {
  .bento, .grid-4, .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posters { display: flex; gap: 12px; margin: 44px calc(-1 * var(--gut)) 0; padding: 0 var(--gut) 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: #c9d0d8 transparent; }
  .poster { flex: 0 0 244px; scroll-snap-align: start; }
  .fx-grid, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .win-page { height: 252px; padding: 24px 24px 0; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .foot-about { grid-column: 1 / -1; }
  .filter-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hero { padding: 150px 0 72px; }
  h1 { font-size: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gallery { max-width: 620px; }
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .prompt { position: static; }
  .md-index { columns: 2; }
}
@media (max-width: 860px) {
  .motion { padding-top: 112px; }
}
@media (max-width: 820px) {
  .shelf, .styles { padding: 80px 0; }
  .frontier { padding: 80px 0 112px; }
  .bento, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bubble { padding: 8px 10px 10px 10px; border-radius: 0 0 22px 22px; }
  .links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 4px; }
  .links a { padding: 11px 10px; font-size: 15px; border-radius: 10px; }
  .bubble.is-open .links { display: flex; }
  .menu-btn { display: inline-block; }
  .sec-head { align-items: flex-start; flex-direction: column; }
  .rail { --step: 14px; }
  .slide { flex-basis: min(300px, 78vw); }
  .tile.card { grid-column: span 2; }
  .tile.card .stage { min-height: 272px; }
  .cta { padding: 17px 26px; font-size: 17px; }
}
@media (max-width: 600px) {
  .hero { padding: 108px 0 56px; }
  h1 { font-size: 42px; letter-spacing: -0.035em; }
  h1 br { display: none; }
  .hero-lead { margin-top: 18px; font-size: 16px; }
  .cta-row { margin-top: 26px; gap: 16px; }
  .cta { height: 50px; padding: 0 26px; font-size: 16px; }
  .gallery { border-radius: 20px; }
  .thumbs { left: 12px; bottom: 12px; padding: 5px; }
  .thumbs label { width: 30px; height: 30px; }
  .motion { padding: 80px 0 72px; }
  .shelf, .styles { padding: 64px 0; }
  .frontier { padding: 64px 0 104px; }
  .fx-grid, .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 36px; }
  .grid-3 { gap: 16px; }
  .win-page { height: 236px; padding: 22px 20px 0; }
  .foot-site { padding-top: 48px; }
  .foot-tab { height: 52px; top: -52px; padding: 0 22px 0 16px; font-size: 16px; }
  .foot-tab img { width: 30px; height: 30px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  body.inner main { padding-top: 84px; }
  .listing, .detail { padding-bottom: 72px; }
  .listing h1, .detail h1 { font-size: 36px; }
  .toolbar { margin-top: 28px; }
  .filter-box { flex-basis: 100%; }
  .filter-more { grid-template-columns: minmax(0, 1fr); }
  .stage-demo { padding: 24px; min-height: 240px; }
  .prose { padding-bottom: 60px; }
  .prose h1 { font-size: 36px; }
  .dodont { grid-template-columns: 1fr; }
  .md-index { columns: 1; }
  .prevnext { flex-direction: column; }
  .code-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .bento, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
  .spec.card .stage { min-height: 236px; }
  .spec .stage { min-height: 196px; padding: 20px; }
  .body { padding: 12px 14px 14px; }
  .poster { flex-basis: 236px; }
}

/* ---------- style specimens: the same small page restyled per style ---------- */
.sp-thumb { position: relative; width: 100%; aspect-ratio: 9 / 7; overflow: hidden; background: #f3f4f6; }
.sp-thumb .sp-scale { position: absolute; left: 0; top: 0; width: 900px; transform-origin: top left; transform: scale(var(--k, 0.35)); pointer-events: none; }
.sp-thumb .sp { width: 900px; min-height: 700px; }
.poster .sp-thumb { flex: 1 1 auto; }
.sp-stage { position: relative; width: 100%; aspect-ratio: 900 / 720; max-height: 760px; overflow: hidden; border: 1px solid var(--hair); border-radius: 12px; background: #f3f4f6; }
.sp-stage .sp { position: absolute; left: 0; top: 0; width: 900px; transform-origin: top left; transform: scale(var(--k, 1)); }
@media (max-width: 600px) { .sp-thumb { aspect-ratio: 9 / 8; } }