/* with icons — Live icons: the library (live.html) and the per-icon studio pages (live/<name>.html).
   Generated pages: forge/tools/site-dynamic.mjs. Behaviour: js/live.js. Tokens only (css/tokens.css), dark mode automatic. */

.lv-page { --lv-card: var(--card); --lv-well: var(--paper-2); }
.lv-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* shared bits */
.lv-pill { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 7px 14px 7px 10px; border-radius: var(--pill);
  background: var(--card); border: 1px solid var(--rule); font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); box-shadow: var(--shadow-s); }
.lv-dots { display: inline-flex; gap: 3px; }
.lv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
/* phones: twenty dots fold into two rows of ten, so the pill's text stays on one line */
@media (max-width: 520px) { .lv-dots { display: inline-grid; grid-template-columns: repeat(10, 5px); gap: 3px 2px; } .lv-dots i { width: 5px; height: 5px; } .lv-pill { gap: 10px; } }
.lv-accent { color: var(--style-text); font-size: 1.12em; line-height: .8; }
.lv-npm { display: inline-block; font: 500 var(--step--1)/1.4 var(--font-sans); color: var(--muted); }
.slab-dark .lv-npm { color: var(--on-dark-2); }
.lv-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--style-text); text-decoration: none; }
.lv-link .arr { width: 16px; height: 16px; transition: transform .3s var(--e-out); }
.lv-link:hover .arr { transform: translateX(3px); }
.lv-mini { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--e-out); }
.lv-mini:hover { border-color: var(--ink); }
.lv-mini:active { transform: scale(.97); }
.lv-mini[hidden] { display: none; }
.lv-code pre { max-height: 360px; }
.lv-code code { white-space: pre; }
.js .lv-copy { visibility: visible; }
.lv-copy { visibility: hidden; }

/* ═════════════ library ═════════════ */
.lv-hero { position: relative; padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 80px); overflow: hidden; isolation: isolate; }
.lv-hero::before { content: ''; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 78% 42%, color-mix(in srgb, var(--c-luxe) 16%, transparent), transparent 70%),
    radial-gradient(30% 36% at 60% 80%, color-mix(in srgb, var(--c-kawaii) 14%, transparent), transparent 70%),
    radial-gradient(30% 40% at 96% 10%, color-mix(in srgb, var(--sun) 26%, transparent), transparent 70%); }
.lv-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lv-display { font: 800 clamp(2.6rem, 1.3rem + 4.4vw, 5.6rem)/.92 var(--font-display); letter-spacing: -.05em; margin: 0 0 24px; font-variation-settings: 'opsz' 96; }
.lv-yours { white-space: nowrap; }
.lv-yours .hand { display: inline-block; color: var(--c-luxe-text); font-size: 1.12em; transform: rotate(-4deg) translateY(.04em); margin-right: .06em; position: relative; }
.lv-yours .hand::after { content: ''; position: absolute; left: -2%; right: -4%; bottom: .02em; height: .14em; border-radius: 1em; background: var(--sun); z-index: -1; transform: rotate(2deg); }
.lv-hero .lede { margin-bottom: 30px; }
.lv-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.lv-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.lv-tile { margin: 0; position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 18px) 14px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-l); box-shadow: var(--shadow);
  transform: rotate(calc((var(--k) - 2.5) * .6deg)); transition: transform .5s var(--e-spring, var(--e-out)), box-shadow .3s; }
.lv-tile:nth-child(2n) { transform: rotate(calc((2.5 - var(--k)) * .5deg)) translateY(10px); }
.lv-tile:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-l); }
.lv-tile::before { content: ''; position: absolute; inset: 10px 10px auto; aspect-ratio: 1.3; border-radius: calc(var(--radius-l) - 8px); background: var(--style-soft); opacity: .7; }
.lv-tile-art { position: relative; aspect-ratio: 1.3; display: grid; place-items: center; }
.lv-tile-art .lv-svg { width: 68%; height: auto; aspect-ratio: 1; color: var(--ink); }
.lv-tile figcaption { display: grid; gap: 3px; }
.lv-tile-name { font: 700 14px/1.2 var(--font-sans); }
.lv-tile-val { font: 600 12px/1.3 var(--font-mono); color: var(--style-text); min-height: 1.3em; transition: opacity .3s; }
.lv-tile-style { position: absolute; top: 14px; right: 14px; padding: 4px 8px; border-radius: var(--pill); background: var(--style); color: var(--style-on); font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* the frame swap (cards and hero tiles): incoming drawing rises in, outgoing drops away; transform/opacity only */
.lv-flip { position: relative; }
.lv-flip > .lv-svg { transition: opacity .5s var(--e-out), transform .6s var(--e-out); }
.lv-flip > .lv-svg.is-out { position: absolute; inset: 0; margin: auto; opacity: 0; transform: translateY(-14%) scale(.9); }
.lv-flip > .lv-svg.is-in { opacity: 0; transform: translateY(14%) scale(.94); }

/* toolbar */
/* the filter bar scrolls with the page (a sticky bar with 20 styles + groups was too tall and covered the grid) */
.lv-bar { position: relative; z-index: 2; padding: 12px 0 10px; scroll-margin-top: var(--header-h); }
.lv-bar.is-stuck { border-bottom-color: var(--rule); }
.lv-bar-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lv-search { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 12px 0 46px; border-radius: var(--pill);
  background: var(--card); border: 1.5px solid var(--rule-strong); box-shadow: var(--shadow-s); transition: border-color .2s, box-shadow .2s; }
.lv-search:focus-within { border-color: var(--ink); box-shadow: var(--ring); }
.lv-search > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); }
.lv-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 16px/1 var(--font-sans); color: var(--ink); padding: 0; height: 48px; }
.lv-search input::placeholder { color: var(--muted); }
/* the pill owns the focus ring: no second ring over the clear button and the / key */
.lv-search input:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.lv-search input::-webkit-search-cancel-button { cursor: pointer; }
.lv-search kbd { flex: none; }

/* ─────────── style switcher: every style visible (same design as the icon library's) ───────────
   .lv-sb (container "lvsb") > .lv-sb-toggle (phones only) + .lv-sb-panel > .lv-sb-list[role=radiogroup] (.lv-sb-ink + .lv-sb-g
   groups > .lv-sb-gl label + .lv-sb-opts > .lv-sb-o radios: .lv-sb-ic mini live calendar + .lv-sb-t name).
   ≥ 940px of bar: one row · narrower: two balanced rows (Everyday + Crafted / Playful + Studio) · phones: a trigger
   that opens the same list as a panel. */
@property --lv-acc { syntax: '<color>'; inherits: true; initial-value: #2F5BFF; }
.lv-sb { position: relative; container: lvsb / inline-size; min-width: 0; --lv-acc: var(--style); transition: --lv-acc .45s var(--e-out); }
.lv-sb-toggle { display: none; }
.lv-sb-panel { display: flex; align-items: stretch; padding: 6px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 20px 40px -36px rgba(17, 19, 24, .55); }
.lv-sb-list { position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 3fr 4fr 5fr 3fr 5fr; row-gap: 4px; }
.lv-sb-g { display: flex; flex-direction: column; min-width: 0; padding: 0 3px; }
.lv-sb-g + .lv-sb-g { border-left: 1px solid var(--rule); }
.lv-sb-gl { display: flex; align-items: center; gap: 6px; height: 20px; margin: 0; padding: 2px 8px 0; overflow: hidden; white-space: nowrap;
  font: 700 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: height .3s var(--e-out), opacity .2s, padding .3s var(--e-out); }
.lv-sb-new { padding: 3px 5px 2px; border-radius: 5px; background: var(--sun); color: #111318; font: 800 8.5px/1 var(--font-mono); letter-spacing: .08em; }
.lv-sb-opts { display: flex; gap: 2px; min-width: 0; }
.lv-sb-o { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0 2px; border: 0; border-radius: 15px; background: none; color: var(--ink); cursor: pointer; font: 600 11.5px/1 var(--font-sans); letter-spacing: -.005em;
  -webkit-tap-highlight-color: transparent; transition: background-color .2s, height .3s var(--e-out); }
.lv-sb-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--sc, currentColor); transition: transform .45s var(--e-spring); }
.lv-sb-ic .lv-svg { width: 100%; height: 100%; }
.lv-sb-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--ink) 74%, transparent); transition: color .25s; }
.lv-sb-o:hover { background: color-mix(in srgb, var(--sc) 9%, transparent); }
.lv-sb-o:hover .lv-sb-t { color: var(--ink); }
.lv-sb-o:hover .lv-sb-ic { transform: translateY(-2px) scale(1.1) rotate(-5deg); }
.lv-sb-o:active .lv-sb-ic { transform: scale(.92); transition-duration: .1s; }
.lv-sb-o[aria-checked="true"] { background: none; }
.lv-sb-o[aria-checked="true"] .lv-sb-t { color: var(--sc-text, var(--ink)); font-weight: 750; }
.lv-sb-o[aria-checked="true"] .lv-sb-ic { transform: scale(1.14); }
.lv-sb-o:focus-visible { outline: 3px solid var(--sun); outline-offset: -1px; box-shadow: none; }
/* without JS the checked option wears the tint itself (the sliding ink is placed by js/live.js) */
html:not(.js) .lv-sb-o[aria-checked="true"] { background: color-mix(in srgb, var(--sc) 12%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--sc); }
/* the sliding selection: tinted, ringed in the style colour (it morphs as it moves), a tick of colour below */
.lv-sb-ink { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 15px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--lv-acc) 12%, var(--card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lv-acc) 78%, transparent), 0 12px 24px -16px var(--lv-acc);
  transition: transform .55s var(--e-spring), width .4s var(--e-out), height .3s var(--e-out), opacity .2s; }
.lv-sb-ink::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px 3px 0 0; background: var(--lv-acc); }
.lv-sb-ink.is-jump { transition: none; }
/* the bar gets shorter once stuck; scroll anchoring would then scroll back, unstick it, grow it… (a flip-flop) */
.lv-bar, .lv-lib { overflow-anchor: none; }
.lv-bar.is-stuck .lv-sb-gl { height: 0; padding-top: 0; opacity: 0; }
.lv-bar.is-stuck .lv-sb-o { height: 50px; gap: 5px; }
.lv-bar.is-stuck .lv-sb-ic { width: 23px; height: 23px; }

/* 20 styles in five groups (Everyday 3 · Crafted 4 · Playful 5 · Studio 3 · Storybook 5), the same layout as the library:
   one row when wide, smaller names when tight */
@container lvsb (max-width: 1439px) {
  .lv-sb-o { font-size: 10.5px; letter-spacing: -.01em; }
  .lv-sb-g { padding: 0 2px; }
}
/* two full-width rows: Everyday + Crafted + Playful (12) over Studio + Storybook (8); 120 columns, so every option in a
   row is the same width */
@container lvsb (max-width: 1279px) {
  .lv-sb-list { grid-template-columns: repeat(120, minmax(0, 1fr)); row-gap: 6px; }
  .lv-sb-g[data-group="everyday"] { grid-column: span 30; }
  .lv-sb-g[data-group="crafted"] { grid-column: span 40; }
  .lv-sb-g[data-group="playful"] { grid-column: span 50; }
  .lv-sb-g[data-group="studio"] { grid-column: span 45; border-left: 0; }
  .lv-sb-g[data-group="storybook"] { grid-column: span 75; }
  .lv-sb-g:nth-of-type(n+6) { grid-column: 1 / -1; border-left: 0; }
  .lv-sb-o { height: 54px; font-size: 11px; }
}
@container lvsb (max-width: 759px) {
  .lv-sb-o { font-size: 10.5px; letter-spacing: -.015em; padding-left: 1px; padding-right: 1px; }
  .lv-sb-g { padding: 0 1px; }
  .lv-sb-gl { padding-left: 6px; }
}

.lv-groups { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.lv-groups::-webkit-scrollbar { display: none; }
/* tablets and up: every group chip visible (they wrap); phones keep one swipeable row */
@media (min-width: 601px) { .lv-groups { flex-wrap: wrap; overflow: visible; } }
.lv-g { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: var(--pill); border: 1px solid var(--rule-strong);
  background: transparent; color: var(--ink); font: 600 13.5px/1 var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lv-g b { font: 600 11px/1 var(--font-mono); color: var(--muted); }
.lv-g:hover { border-color: var(--ink); }
.lv-g[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lv-g[aria-pressed="true"] b { color: inherit; opacity: .7; }

.lv-lib { padding-bottom: clamp(48px, 6vw, 96px); }
.lv-status { margin: 22px 0 6px; font: 500 var(--step--1)/1.4 var(--font-sans); color: var(--muted); }
.lv-status b { color: var(--ink); }
.lv-status [data-lv-style-name] { color: var(--style-text); font-weight: 700; }
.lv-group { padding-top: clamp(26px, 4vw, 48px); scroll-margin-top: calc(var(--header-h) + 150px); }
.lv-group[hidden] { display: none; }
.lv-group-head { display: flex; align-items: end; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.lv-group-title { margin: 0; font: 780 var(--step-3)/1 var(--font-display); letter-spacing: -.04em; display: flex; align-items: baseline; gap: 10px; }
.lv-group-title::before { content: ''; align-self: center; width: .34em; height: .34em; border-radius: 30%; background: var(--style); transform: rotate(45deg); }
.lv-group-title sup { align-self: flex-start; margin-top: .2em; margin-left: -4px; font: 600 13px/1 var(--font-mono); letter-spacing: 0; color: var(--muted); }
.lv-group-head p { margin: 0; max-width: 46ch; color: var(--ink-2); }

.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lv-card[hidden] { display: none; }
.lv-card-link { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; border-radius: var(--radius-l); background: var(--card);
  border: 1px solid var(--rule); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-s);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .2s; }
.lv-card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rule-strong); }
.lv-card-link:active { transform: translateY(-1px) scale(.99); }
.lv-card-link:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow); }
.lv-card-art { position: relative; display: grid; place-items: center; height: 140px; border-radius: calc(var(--radius-l) - 6px); background: var(--lv-well);
  margin-bottom: 14px; overflow: hidden; transition: background .4s; }
.lv-card-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, var(--style-soft), transparent 75%); opacity: 0; transition: opacity .4s; }
.lv-card-link:hover .lv-card-art::after { opacity: 1; }
.lv-card-art .lv-svg { position: relative; z-index: 1; width: 72px; height: 72px; color: var(--ink); }
.lv-card-title { padding: 0 6px; font: 700 15px/1.25 var(--font-sans); letter-spacing: -.01em; }
.lv-card-params { padding: 3px 6px 0; font: 500 12.5px/1.35 var(--font-sans); color: var(--muted); }
.lv-card.is-loading .lv-card-art .lv-svg { opacity: .35; }
.lv-empty { padding: 56px 0; text-align: center; }
.lv-empty[hidden] { display: none; }

.lv-how .lv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 32px 0 0; padding: 0; list-style: none; }
.lv-steps li { padding: 26px; border-radius: var(--radius-l); background: var(--card); border: 1px solid var(--rule); }
.lv-steps b { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sun); color: #111318; font: 800 16px/1 var(--font-sans); margin-bottom: 16px; }
.lv-steps h3 { margin: 0 0 6px; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -.02em; }
.lv-steps p { margin: 0; color: var(--ink-2); }
.lv-dev-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.lv-dev .eyebrow, .lv-dev .h2 { color: var(--on-dark); }
.lv-dev code { font-family: var(--font-mono); font-size: .9em; }
.lv-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* FAQ */
.lv-faq { display: grid; gap: 10px; }
.lv-q { border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); }
.lv-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; font: 650 var(--step-0)/1.35 var(--font-sans); border-radius: var(--radius); }
.lv-q summary::-webkit-details-marker { display: none; }
.lv-q summary svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--e-out); color: var(--muted); }
.lv-q[open] summary svg { transform: rotate(180deg); }
.lv-q summary:focus-visible { outline: none; box-shadow: var(--ring); }
.lv-a { padding: 0 18px 16px; color: var(--ink-2); }
.lv-a p { margin: 0; }
.lv-a code, .lv-ptable code { font: 500 .88em var(--font-mono); background: var(--paper-2); padding: .1em .35em; border-radius: 6px; }

/* ═════════════ icon page: live/<name>.html ═════════════
   .lv-make (#make) > .lv-make-grid: .lv-col-a (the stage, the one primary action, examples; sticky on desktop) +
   .lv-col-b (title, "Set what it shows" controls, the grouped style switcher, quick colours). Below: all styles,
   developers (folded), settings + questions, related. The studio sheet (.lv-sheet dialog) holds Colours + Download.
   Under 960px the two columns dissolve (display: contents) into one ordered flow with a compact sticky stage. */
.lv-icon-page { --lv-r: clamp(26px, 3vw, 36px); }
.lv-top { padding-top: clamp(16px, 2.4vw, 26px); }
.lv-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(14px, 2vw, 22px); padding: 0; list-style: none; font: 500 13.5px/1.4 var(--font-sans); color: var(--muted); }
.lv-crumbs li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.lv-crumbs a { color: inherit; text-decoration: none; }
.lv-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.lv-make { scroll-margin-top: calc(var(--header-h) + 12px); }
.lv-make-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'a head' 'a b'; column-gap: clamp(24px, 3.6vw, 56px); row-gap: 22px; align-items: start; }
.lv-head { grid-area: head; }
.lv-col-b { grid-area: b; }
.lv-col-a { grid-area: a; align-self: start; position: sticky; top: calc(var(--header-h) + 14px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.lv-col-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; padding-bottom: 8px; }

/* title */
.lv-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 12.5px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lv-eyebrow a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.lv-eyebrow a:hover { color: var(--ink); }
.lv-live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--style); box-shadow: 0 0 0 0 color-mix(in srgb, var(--style) 55%, transparent); animation: lv-live 2.4s ease-out infinite; transition: background .4s; }
@keyframes lv-live { 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.lv-title { margin: 0; font: 800 clamp(40px, 1.6rem + 2.8vw, 72px)/.95 var(--font-display); letter-spacing: -.045em; text-wrap: balance; }
.lv-title .lv-accent { display: inline-block; transform: rotate(-3deg); white-space: nowrap; transition: color .5s var(--e-out); }
.lv-lede { margin: 14px 0 0; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--ink-2); }

/* ── the stage ── */
.lv-stage { position: relative; aspect-ratio: 1 / .86; max-height: max(380px, calc(100dvh - var(--header-h) - 270px)); width: 100%; border-radius: var(--lv-r); border: 1px solid var(--rule); overflow: hidden; color: var(--ink); isolation: isolate;
  background: radial-gradient(70% 62% at 50% 46%, color-mix(in srgb, var(--style) 16%, transparent), transparent 72%), var(--dot-grid), var(--paper-2);
  box-shadow: var(--shadow); transition: background .45s var(--e-out), color .3s; }
:root[data-theme="dark"] .lv-stage[data-bg="paper"] { background: radial-gradient(70% 62% at 50% 46%, color-mix(in srgb, var(--style) 18%, transparent), transparent 72%), var(--dot-grid-dark), var(--paper-2); }
.lv-stage[data-bg="white"] { background: #fff; color: #111318; border-color: #E6DFD3; }
.lv-stage[data-bg="dark"] { background: radial-gradient(70% 62% at 50% 46%, color-mix(in srgb, var(--style) 22%, transparent), transparent 72%), #111318; color: #F7F3EC; border-color: #111318; }
.lv-stage[data-bg="grid"] { background: repeating-conic-gradient(#ECE6DA 0 25%, #FFFFFF 0 50%) 0 0 / 22px 22px; color: #111318; }
.lv-stage-tools { position: absolute; z-index: 3; inset: 14px 14px auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.lv-stage-tools > * { pointer-events: auto; }
.lv-stage-now { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 70%; margin: 0; padding: 7px 12px 7px 10px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--rule); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 12.5px/1 var(--font-mono); white-space: nowrap; }
.lv-stage-now [data-lv-now] { overflow: hidden; text-overflow: ellipsis; }
.lv-bgs { display: flex; gap: 4px; padding: 4px; border-radius: var(--pill); background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lv-bg { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule-strong); cursor: pointer; padding: 0; transition: transform .25s var(--e-spring), box-shadow .2s; }
.lv-bg-paper { background: #F3EEE5; } .lv-bg-white { background: #fff; } .lv-bg-dark { background: #111318; }
.lv-bg-grid { background: repeating-conic-gradient(#d9d2c4 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.lv-bg[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.lv-bg:hover { transform: scale(1.12); }
.lv-bg:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; }
.lv-stage-art { position: absolute; inset: 58px 20px 104px; display: grid; place-items: center; }
.lv-art { position: relative; width: min(60%, 360px); max-height: 100%; aspect-ratio: 1; border-radius: 26px; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--e-spring); outline: none; }
.lv-art .lv-svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--style) 26%, transparent)); transition: opacity .2s; }
.lv-stage[data-bg="grid"] .lv-art .lv-svg, .lv-stage[data-bg="white"] .lv-art .lv-svg { filter: none; }
.lv-art.is-busy .lv-svg { opacity: .82; }
.lv-art[data-g] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lv-art[data-g="scrub"], .lv-art[data-g="scrub-time"], .lv-art[data-g="pos-x"] { cursor: ew-resize; touch-action: pan-y; }
.lv-art[data-g="pos-y"] { cursor: ns-resize; }
.lv-art[data-g="roll"], .lv-art[data-g="cycle"], .lv-art[data-g="type"] { cursor: pointer; touch-action: manipulation; }
.lv-art[data-g]:hover { transform: scale(1.015); }
.lv-art.is-drag { transform: scale(1.03); cursor: grabbing; }
.lv-art[data-g="scrub"].is-drag, .lv-art[data-g="pos-x"].is-drag { cursor: ew-resize; }
.lv-art:focus-visible { box-shadow: 0 0 0 3px var(--card), 0 0 0 5.5px var(--focus-ring), 0 0 0 10px var(--focus-halo); }
.lv-art[data-g="roll"]:active, .lv-art[data-g="cycle"]:active { transform: scale(.96); }
.lv-stage-hint { position: absolute; z-index: 2; left: 50%; bottom: 68px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); margin: 0; padding: 6px 14px 6px 10px;
  border-radius: var(--pill); background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid color-mix(in srgb, var(--style) 30%, var(--rule)); color: var(--style-text);
  font: 700 19px/1.1 var(--font-hand); white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .4s, transform .5s var(--e-out); }
.lv-stage-hint span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.lv-stage-hint::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--style); opacity: .9;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--style) 22%, transparent); animation: lv-nudge 2.2s var(--e-out) infinite; }
@keyframes lv-nudge { 0%, 100% { transform: translateX(-3px); } 45% { transform: translateX(4px) scale(.86); } }
.lv-stage-hint.is-gone { opacity: 0; transform: translateX(-50%) translateY(8px); }
.lv-stage-hint[hidden] { display: none; }
.lv-stage[data-bg="dark"] .lv-stage-hint { background: rgba(17, 19, 24, .8); }
.lv-real { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: end; justify-content: center; gap: 16px; }
.lv-real span { display: grid; justify-items: center; gap: 4px; }
.lv-real .lv-svg { width: var(--px); height: var(--px); }
.lv-real i { font: 500 10px/1 var(--font-mono); font-style: normal; opacity: .55; }

/* ── the one primary action ── */
.lv-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-split { position: relative; display: flex; flex: 1 1 280px; min-width: 0; border-radius: 20px; background: var(--style-fill, var(--style)); color: var(--style-on, #fff);
  box-shadow: 0 22px 40px -24px var(--style), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .5s var(--e-out), box-shadow .3s, transform .3s var(--e-spring); }
.lv-split:hover { transform: translateY(-2px); box-shadow: 0 28px 46px -24px var(--style), inset 0 1px 0 rgba(255, 255, 255, .18); }
.lv-go, .lv-go-more { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.lv-go { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 66px; padding: 11px 10px 11px 18px; border-radius: 20px 0 0 20px; text-align: left; }
.lv-go > svg { width: 26px; height: 26px; transition: transform .35s var(--e-spring); }
.lv-go:hover > svg { transform: translateY(2px); }
.lv-go-t { min-width: 0; }
.lv-go b { display: block; font: 780 20px/1.1 var(--font-display); letter-spacing: -.015em; }
.lv-go small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 550 13px/1.3 var(--font-sans); opacity: .9; }
.lv-go-more { position: relative; display: grid; place-items: center; flex: none; width: 56px; border-radius: 0 20px 20px 0; }
.lv-go-more::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: currentColor; opacity: .3; }
.lv-go-more svg { width: 22px; height: 22px; transition: transform .35s var(--e-spring); }
.lv-go-more:hover svg { transform: translateY(2px); }
.lv-go:active, .lv-go-more:active { transform: scale(.97); }
.lv-go.is-busy > svg, .lv-ghost.is-busy svg { animation: lv-pulse 1s ease-in-out infinite; }
@keyframes lv-pulse { 50% { opacity: .35; } }
.lv-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 66px; padding: 0 20px 0 16px; border-radius: 20px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink);
  font: 720 16px/1.1 var(--font-display); cursor: pointer; transition: transform .3s var(--e-spring), border-color .2s; }
.lv-ghost svg { width: 22px; height: 22px; flex: none; }
.lv-ghost:hover { transform: translateY(-2px); border-color: var(--style); }
.lv-ghost:active { transform: scale(.97); }
.lv-go:focus-visible, .lv-go-more:focus-visible, .lv-ghost:focus-visible, .lv-minor :focus-visible, .lv-textbtn:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }
.lv-minor { display: flex; flex-wrap: wrap; gap: 0 18px; margin: -4px 0 0; font: 600 14px/1.2 var(--font-sans); }
.lv-minor > * { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0; border: 0; background: none; color: var(--muted); text-decoration: none; cursor: pointer; font: inherit; border-radius: 8px; transition: color .2s; }
.lv-minor svg { width: 17px; height: 17px; }
.lv-minor > *:hover { color: var(--ink); }
.lv-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sun-soft); font-size: 14px; }
html:not(.js) .lv-js-only { display: none !important; }
html:not(.js) .lv-js-inline { display: none; }

/* examples: a row of small cards drawn in the current style */
.lv-label { margin: 0; font: 700 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lv-examples .lv-label { margin: 4px 0 8px; }
.lv-ex-list { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 24px 4px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.lv-ex-list::-webkit-scrollbar { display: none; }
.lv-ex-list li { flex: none; scroll-snap-align: start; }
.lv-ex { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 14px 5px 5px; border-radius: 16px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink);
  font: 600 13px/1.1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color .2s, transform .25s var(--e-spring), background .2s; }
.lv-ex:hover { border-color: var(--ink); transform: translateY(-2px); }
.lv-ex[aria-pressed="true"] { border-color: var(--style); background: color-mix(in srgb, var(--style) 9%, var(--card)); box-shadow: inset 0 0 0 1px var(--style); }
.lv-ex:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-ex-art { width: 42px; height: 42px; padding: 5px; border-radius: 12px; background: var(--paper-2); flex: none; color: var(--ink); }

/* ── the controls card ── */
.lv-card { min-width: 0; border-radius: var(--lv-r); background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-s); }
.lv-set { padding: 18px clamp(16px, 2vw, 24px) 22px; }
.lv-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lv-sec-head .lv-label { margin-right: auto; }
.lv-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: border-color .2s, background .2s, transform .15s var(--e-out); }
.lv-mini svg { width: 15px; height: 15px; flex: none; }
.lv-ctrls { display: grid; gap: 22px; }
.lv-ctrls:empty { display: none; }
.lv-field { display: grid; gap: 10px; min-width: 0; }
.lv-field + .lv-field { padding-top: 20px; border-top: 1px dashed var(--rule); }
.lv-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.lv-field-label { font: 700 15px/1.3 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.lv-field-hint { margin: 0; font: 500 12.5px/1.4 var(--font-sans); color: var(--muted); }
.lv-field-hint.is-bad { color: var(--c-solid-text); font-weight: 600; }
.lv-out, .lv-cal-say { font: 650 13px/1 var(--font-mono); color: var(--style-text); letter-spacing: 0; white-space: nowrap; }
.lv-input { width: 100%; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink);
  font: 650 17px/1 var(--font-mono); outline: none; transition: border-color .2s, box-shadow .2s; }
.lv-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-halo); }
.lv-count { flex: none; font: 600 12px/1 var(--font-mono); color: var(--muted); }

/* a date: the month and its days */
.lv-cal { max-width: 440px; }
.lv-cal-mon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.lv-cal-mon b { font: 750 17px/1 var(--font-display); letter-spacing: -.01em; }
.lv-cal-nav { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-s); transition: transform .25s var(--e-spring); }
.lv-cal-nav svg { width: 18px; height: 18px; }
.lv-cal-nav:hover { transform: scale(1.06); }
.lv-cal-nav:active { transform: scale(.94); }
.lv-cal-wd, .lv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lv-cal-wd[hidden] { display: none; }
.lv-cal-wd i { font: 700 10.5px/1 var(--font-mono); font-style: normal; text-align: center; color: var(--muted); letter-spacing: .06em; }
.lv-cal-d { position: relative; height: 38px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--ink); font: 620 14.5px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .15s, color .15s, transform .2s var(--e-spring); }
.lv-cal-d:hover { background: var(--paper-2); }
.lv-cal-d:active { transform: scale(.9); }
.lv-cal-d[aria-checked="true"], .lv-cal-d.is-a, .lv-cal-d.is-b { background: var(--style-fill, var(--style)); color: var(--style-on, #fff); font-weight: 800; box-shadow: 0 8px 16px -10px var(--style); }
.lv-cal-d.is-in { background: color-mix(in srgb, var(--style) 16%, transparent); border-radius: 4px; }
.lv-cal-d:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 1px; z-index: 1; }
.lv-cal-tip { margin: -2px 0 0; font: 700 18px/1.1 var(--font-hand); color: var(--style-text); }

/* a time: the clock face */
.lv-tf-row { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); flex-wrap: wrap; }
.lv-dial { flex: none; width: 150px; height: 150px; cursor: grab; touch-action: none; border-radius: 50%; outline: none; -webkit-tap-highlight-color: transparent; }
.lv-dial.is-drag { cursor: grabbing; }
.lv-dial-face { fill: var(--paper-2); stroke: var(--rule-strong); stroke-width: 1.5; }
.lv-dial-ticks line { stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.lv-dial-ticks line.is-q { stroke: var(--ink); stroke-width: 2.6; opacity: 1; }
.lv-dial-h, .lv-dial-m { stroke-linecap: round; }
.lv-dial-h { stroke: var(--ink); stroke-width: 5; }
.lv-dial-m { stroke: var(--style); stroke-width: 3.5; transition: stroke .4s; }
.lv-dial-k { fill: var(--card); stroke: var(--style); stroke-width: 2.5; transition: r .2s var(--e-spring); }
.lv-dial-k.is-h { stroke: var(--ink); }
.lv-dial-c { fill: var(--ink); }
.lv-dial.is-m .lv-dial-k:not(.is-h), .lv-dial.is-h .lv-dial-k.is-h { r: 8; }
.lv-dial:focus-visible { box-shadow: 0 0 0 3px var(--card), 0 0 0 5.5px var(--focus-ring), 0 0 0 10px var(--focus-halo); }
.lv-tf-side { display: grid; gap: 6px; flex: 1 1 150px; min-width: 0; }
.lv-time { max-width: 190px; height: 52px; font-size: 22px; letter-spacing: 0; }
.lv-tf-ampm { margin: 0; font: 700 18px/1.1 var(--font-hand); color: var(--style-text); }
.lv-tf .lv-field-head .lv-mini svg { width: 15px; height: 15px; }

/* a level: the meter */
.lv-meter { position: relative; height: 46px; border-radius: 15px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--rule); overflow: hidden; --p: 50%; }
.lv-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 15px 6px 6px 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--style) 70%, var(--card)), var(--style)); transition: background .4s; }
.lv-meter-fill::after { content: ''; position: absolute; right: 5px; top: 9px; bottom: 9px; width: 5px; border-radius: 4px; background: var(--card); opacity: .92; box-shadow: 0 1px 3px rgba(17, 19, 24, .25); }
.lv-meter-ticks { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--ink) 14%, transparent) calc(10% - 1px) 10%); opacity: .7; }
.lv-meter-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.lv-meter:has(.lv-meter-in:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--rule), 0 0 0 2.5px var(--card), 0 0 0 5px var(--focus-ring), 0 0 0 9px var(--focus-halo); }
.lv-meter:hover .lv-meter-fill::after { transform: scaleY(1.15); }
.lv-lf.is-gated .lv-meter { opacity: .5; }
.lv-lf.is-gated .lv-out { color: var(--muted); }
.lv-linkbtn { padding: 0; border: 0; background: none; color: var(--style-text); font: 700 12.5px/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
.lv-linkbtn:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }

/* several levels: the equaliser */
.lv-eq { display: flex; gap: clamp(8px, 1.6vw, 14px); align-items: end; }
.lv-eq-b { display: grid; justify-items: center; gap: 6px; flex: 1 1 0; max-width: 64px; cursor: ns-resize; --p: 50%; }
.lv-eq-b[hidden] { display: none; }
.lv-eq-track { position: relative; width: 100%; height: 132px; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--rule); overflow: hidden; }
.lv-eq-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); border-radius: 6px 6px 14px 14px; background: linear-gradient(0deg, var(--style), color-mix(in srgb, var(--style) 66%, var(--card))); }
.lv-eq-fill::after { content: ''; position: absolute; left: 22%; right: 22%; top: 5px; height: 5px; border-radius: 4px; background: var(--card); opacity: .92; }
.lv-eq-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; touch-action: none; }
.lv-eq-track:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--rule), 0 0 0 2.5px var(--card), 0 0 0 5px var(--focus-ring), 0 0 0 9px var(--focus-halo); }
.lv-eq-b b { font: 650 12px/1 var(--font-mono); color: var(--muted); }

/* choices: picture tiles */
.lv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.lv-tiles-f.is-many .lv-tiles { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.lv-tiles-f:not(.is-many) .lv-tiles { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: calc(var(--n) * 112px); }
.lv-set { container: lvset / inline-size; }
@container lvset (max-width: 440px) { .lv-tiles-f:not(.is-many):not(.is-few) .lv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-to { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; padding: 10px 6px 9px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink);
  cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--e-spring); }
.lv-to:hover { transform: translateY(-2px); border-color: var(--rule-strong); background: var(--paper-2); }
.lv-to:active { transform: scale(.96); }
.lv-to[aria-checked="true"] { border-color: var(--style); background: color-mix(in srgb, var(--style) 10%, var(--card)); box-shadow: 0 10px 20px -16px var(--style); }
.lv-to:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-to-art { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.lv-tiles-f.is-many .lv-to-art { width: 34px; height: 34px; }
.lv-to-skel { width: 60%; height: 60%; border-radius: 10px; background: var(--paper-3); animation: lv-pulse 1.4s ease-in-out infinite; }
.lv-to-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 620 12.5px/1.1 var(--font-sans); }
.lv-to[aria-checked="true"] .lv-to-t { color: var(--style-text); font-weight: 750; }

/* a number: the stepper */
.lv-nf-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lv-nf-row .lv-range { flex: 1; min-width: 80px; }
.lv-step { display: inline-flex; align-items: center; flex: none; border-radius: 16px; border: 1.5px solid var(--rule-strong); background: var(--card); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.lv-step:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-halo); }
.lv-step button { display: grid; place-items: center; width: 44px; height: 50px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; transition: background .15s; touch-action: manipulation; }
.lv-step button svg { width: 18px; height: 18px; }
.lv-step button:hover { background: var(--paper-2); }
.lv-step button:active { background: var(--paper-3); }
.lv-step input { width: 78px; height: 50px; border: 0; background: none; text-align: center; font: 750 22px/1 var(--font-mono); color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.lv-step input::-webkit-inner-spin-button, .lv-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-chip { min-height: 34px; padding: 0 13px; border-radius: var(--pill); border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 650 13.5px/1 var(--font-mono); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--e-spring); }
.lv-chip:hover { border-color: var(--ink); }
.lv-chip:active { transform: scale(.95); }
.lv-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lv-chip:focus-visible, .lv-mini:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }

/* text: the label maker (one cell per character, monospaced so letters sit in their cells) */
.lv-type { position: relative; width: calc(var(--n) * 1.9ch + .2ch); max-width: 100%; height: 66px; font: 750 30px/1 var(--font-mono); }
.lv-type-cells { position: absolute; inset: 0; display: flex; pointer-events: none; }
.lv-type-cells i { flex: none; width: 1.9ch; margin: 0 .1ch 0 0; border-radius: 13px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--rule-strong); transition: box-shadow .2s, background .2s; }
.lv-type-in { position: relative; display: block; width: 100%; height: 100%; padding: 0 0 0 .45ch; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: 1ch; text-transform: uppercase; outline: none; caret-color: var(--style); }
.lv-type:focus-within .lv-type-cells i { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }
.lv-type.is-bad .lv-type-cells i { box-shadow: inset 0 0 0 2px var(--c-solid); }
.lv-type:focus-within { border-radius: 14px; box-shadow: 0 0 0 5px var(--focus-halo); }

/* switches */
.lv-opts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.lv-switch { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font: 600 14px/1.3 var(--font-sans); }
.lv-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lv-switch .lv-knob { position: relative; flex: none; width: 46px; height: 28px; border-radius: 28px; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule-strong); transition: background .25s; }
.lv-switch .lv-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-s); transition: transform .35s var(--e-spring); }
.lv-switch input:checked + .lv-knob { background: var(--style); box-shadow: none; }
.lv-switch input:checked + .lv-knob::after { transform: translateX(18px); }
.lv-switch input:focus-visible + .lv-knob { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }

/* the small slider (numbers with short ranges, code size) */
.lv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer; --p: 50%; }
.lv-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--style) var(--p), var(--paper-3) var(--p)); }
.lv-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--paper-3); }
.lv-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--style); }
.lv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow-s); transition: transform .15s var(--e-out); }
.lv-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.lv-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.lv-range:focus-visible { outline: none; }
.lv-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus-halo); }

/* style + colour rows */
.lv-pick-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.lv-pick-head b { font: 750 16px/1.1 var(--font-display); color: var(--style-text); transition: color .4s; }
.lv-pick-say { font: 500 13.5px/1.3 var(--font-sans); color: var(--muted); }
.lv-qc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.lv-qc { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-qb, .lv-swb { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .25s var(--e-spring); }
.lv-qb span, .lv-swb span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, transparent); }
.lv-qb.is-pal span { box-shadow: inset 0 0 0 2.5px var(--ring, #111318), inset 0 0 0 3.5px rgba(255, 255, 255, .5); }
.lv-qb.is-def span, .lv-swb.is-def span { background: conic-gradient(from 200deg, var(--style), var(--c-sketch), var(--sun), var(--c-gloss), var(--style)); }
.lv-qb:hover, .lv-swb:hover { transform: scale(1.1); }
.lv-qb[aria-checked="true"], .lv-swb[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.lv-qb:focus-visible, .lv-swb:focus-visible, .lv-swb.is-custom:focus-within { outline: 2.5px solid var(--focus-ring); outline-offset: 4px; }
.lv-textbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 680 15px/1.2 var(--font-sans); cursor: pointer; border-radius: 8px; }
.lv-textbtn span { text-decoration: underline; text-decoration-color: var(--style); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset .25s; }
.lv-textbtn svg { width: 20px; height: 20px; color: var(--style-text); }
.lv-textbtn:hover span { text-underline-offset: 7px; }
/* the switcher on an icon page: a card like the controls, no sticky-bar shrinking */
.lv-sb-page .lv-sb-panel { border-radius: 24px; }

/* ── sections below ── */
.lv-sec { margin-top: clamp(64px, 8vw, 112px); scroll-margin-top: calc(var(--header-h) + 16px); }
.lv-sec-h { display: flex; align-items: end; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.lv-sec-h .h2 { margin: 0; }
.lv-sec-h p { margin: 0; max-width: 42ch; color: var(--ink-2); }
.lv-sec .lv-accent { display: inline-block; transform: rotate(-2deg); }
.lv-all { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lv-as { position: relative; display: grid; width: 100%; height: 100%; gap: 0; padding: 8px 8px 14px; border-radius: 24px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
  font: inherit; transition: transform .35s var(--e-spring), box-shadow .3s, border-color .2s; }
.lv-as-art { display: grid; place-items: center; height: 132px; border-radius: 18px; margin-bottom: 12px; color: var(--ink);
  background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--sc) 18%, transparent), transparent 75%), var(--paper-2); }
.lv-as-art .lv-svg { width: 72px; height: 72px; transition: transform .45s var(--e-spring); }
.lv-as-t { display: grid; gap: 3px; padding: 0 6px; }
.lv-as-t b { font: 750 15px/1.2 var(--font-display); }
.lv-as-t small { font: 500 12.5px/1.35 var(--font-sans); color: var(--muted); }
.lv-as-use { position: absolute; top: 16px; right: 16px; padding: 5px 10px; border-radius: var(--pill); background: var(--ink); color: var(--paper); font: 700 11px/1 var(--font-sans); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--e-out); }
.lv-as:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rule-strong); }
.lv-as:hover .lv-as-art .lv-svg { transform: scale(1.08) rotate(-3deg); }
.lv-as:hover .lv-as-use { opacity: 1; transform: none; }
.lv-as[aria-pressed="true"] { border-color: var(--sc); box-shadow: inset 0 0 0 1px var(--sc), 0 14px 30px -22px var(--sc); }
.lv-as[aria-pressed="true"] .lv-as-t b { color: var(--sc-text); }
.lv-as[aria-pressed="true"] .lv-as-use { opacity: 1; transform: none; background: var(--sc); color: #fff; }
.lv-as[aria-pressed="true"] .lv-as-use::before { content: '✓ '; }
.lv-as:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; }
.js .lv-as[aria-pressed="true"] .lv-as-use { font-size: 0; }
.js .lv-as[aria-pressed="true"] .lv-as-use::before { content: '✓ In use'; font-size: 11px; }
html:not(.js) .lv-as { cursor: default; }
html:not(.js) .lv-as-use { display: none; }

/* developers: a dark folded card */
.lv-dev { border-radius: var(--lv-r); background: var(--dark); color: var(--on-dark); overflow: hidden; }
:root[data-theme="dark"] .lv-dev { background: var(--dark-2, #1A1D25); border: 1px solid var(--rule-strong); }
.lv-dev > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(22px, 3vw, 32px); cursor: pointer; border-radius: var(--lv-r); }
.lv-dev > summary::-webkit-details-marker { display: none; }
.lv-dev > summary:focus-visible { outline: 2.5px solid var(--sun); outline-offset: -4px; }
.lv-dev-t { display: grid; gap: 6px; }
.lv-dev-h { font: 750 var(--step-3)/1 var(--font-display); letter-spacing: -.035em; color: var(--on-dark); }
.lv-dev-t small { font: 500 14.5px/1.4 var(--font-sans); color: var(--on-dark-2, rgba(247, 243, 236, .72)); }
.lv-dev-plus { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--sun); transition: transform .4s var(--e-spring); }
.lv-dev-plus::before, .lv-dev-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; border-radius: 2px; background: #111318; }
.lv-dev-plus::after { transform: rotate(90deg); }
.lv-dev[open] .lv-dev-plus { transform: rotate(135deg); }
.lv-dev > summary:hover .lv-dev-plus { transform: scale(1.06); }
.lv-dev[open] > summary:hover .lv-dev-plus { transform: rotate(135deg) scale(1.06); }
.lv-dev-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px); }
.lv-dev .lv-npm { margin: 0; font: 500 15px/1.5 var(--font-sans); color: var(--on-dark-2, rgba(247, 243, 236, .75)); }
.lv-dev .lv-npm b { color: var(--on-dark); }
.lv-dev-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.lv-dev .lv-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); margin: 0; }
.lv-dev .lv-tabs button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 10px; background: none; font: 680 14.5px/1 var(--font-sans); color: rgba(247, 243, 236, .7); cursor: pointer; }
.lv-dev .lv-tabs button[aria-selected="true"] { background: var(--on-dark); color: #111318; }
.lv-dev .lv-tabs button:focus-visible { outline: 2.5px solid var(--sun); outline-offset: 2px; }
.lv-dev-size { display: flex; align-items: center; gap: 12px; min-width: min(320px, 100%); font: 600 13.5px/1 var(--font-sans); color: var(--on-dark-2, rgba(247, 243, 236, .75)); }
.lv-dev-size .lv-range { flex: 1; --style: var(--sun); }
.lv-dev-size .lv-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--sun) var(--p), rgba(255, 255, 255, .16) var(--p)); }
.lv-dev-size .lv-range::-webkit-slider-thumb { border-color: var(--sun); background: #111318; }
.lv-dev-size .lv-out { color: var(--on-dark); min-width: 52px; text-align: right; }
.lv-dev .code { border-color: rgba(255, 255, 255, .1); background: #07080B; }
.lv-dev-note { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--on-dark-2, rgba(247, 243, 236, .75)); }
.lv-dev-note code { font: 500 .9em var(--font-mono); background: rgba(255, 255, 255, .1); padding: .1em .4em; border-radius: 6px; color: var(--on-dark); }
.lv-code pre { max-height: 360px; }
.lv-code code { white-space: pre; }
.js .lv-copy { visibility: visible; }
.lv-copy { visibility: hidden; }
.js .lv-pane-off { display: none; }
html:not(.js) .lv-tabs { display: none; }
html:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: 12px; }

/* settings + questions */
.lv-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lv-more-col { min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.lv-ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.lv-ptable th, .lv-ptable td { text-align: left; vertical-align: top; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule); }
.lv-ptable thead th { font: 700 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-ptable tbody th { font-weight: 650; }
.lv-kind { display: block; margin-top: 3px; font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.lv-aka { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-aka b { margin-right: 4px; font-size: 14px; }

/* related */
.lv-related { margin: clamp(56px, 7vw, 96px) auto clamp(56px, 7vw, 104px); scroll-margin-top: calc(var(--header-h) + 16px); }
.lv-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lv-rel-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lv-rel { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); color: var(--ink);
  text-decoration: none; font: 650 13px/1.25 var(--font-sans); text-align: center; transition: transform .3s var(--e-out), box-shadow .3s; height: 100%; }
.lv-rel:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lv-rel:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-rel-art { width: 44px; height: 44px; }
.lv-rel-say { margin: -6px 0 14px; font-size: 14px; }
.lv-rel-statics { margin-bottom: clamp(32px, 4vw, 48px); }
.lv-rel-static { border-style: dashed; }
.lv-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.lv-pn a { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.lv-pn a:hover { border-color: var(--ink); }
.lv-pn a[rel="next"] { text-align: right; }
.lv-pn span { font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-pn b { font: 700 16px/1.2 var(--font-sans); }

/* ── "On this page": a floating pill + its section map (a plain disclosure without JS) ── */
.lv-map { position: relative; z-index: 60; }
html:not(.js) .lv-map { box-sizing: border-box; max-width: var(--maxw); margin: clamp(48px, 6vw, 72px) auto 0; padding-inline: var(--gutter); }
html:not(.js) .lv-map-l::after { content: ' +'; color: var(--muted); }
html:not(.js) .lv-map-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 700 16px/1.2 var(--font-display); color: var(--ink); }
html:not(.js) .lv-map-ic, html:not(.js) .lv-map-now { display: none; }
html:not(.js) .lv-map-card { margin-top: 10px; }
.lv-map-btn { position: relative; list-style: none; }
.lv-map-btn::-webkit-details-marker { display: none; }
.js .lv-map { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; transition: transform .55s var(--e-spring), opacity .3s; }
.js .lv-map.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.js .lv-map-btn { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; background: #111318; color: #F7F3EC; box-shadow: 0 18px 40px -16px rgba(17, 19, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .08); cursor: pointer; user-select: none; transition: transform .3s var(--e-spring), box-shadow .3s; }
.js[data-theme="dark"] .lv-map-btn { background: #F4F0E8; color: #111318; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.js .lv-map-btn:hover { transform: translateY(-2px); }
.js .lv-map-btn:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus-halo); }
.lv-map-ic { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.lv-map-ic svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lv-map-track { fill: none; stroke: currentColor; stroke-width: 2.5; opacity: .18; }
.lv-map-prog { fill: none; stroke: var(--style); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s linear, stroke .4s; }
.lv-map-ic i { position: absolute; left: 11px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--e-spring), opacity .2s; }
.lv-map-ic i:nth-of-type(1) { top: 12px; }
.lv-map-ic i:nth-of-type(2) { top: 17px; width: 10px; }
.lv-map-ic i:nth-of-type(3) { top: 22px; width: 12px; }
.lv-map[open] .lv-map-ic i:nth-of-type(1) { transform: translateY(5px) rotate(45deg); width: 14px; }
.lv-map[open] .lv-map-ic i:nth-of-type(2) { opacity: 0; }
.lv-map[open] .lv-map-ic i:nth-of-type(3) { transform: translateY(-5px) rotate(-45deg); width: 14px; }
.lv-map-l { font: 700 15px/1 var(--font-display); white-space: nowrap; }
.lv-map-now { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 13.5px/1 var(--font-sans); opacity: .72; transition: max-width .45s var(--e-out), opacity .3s; }
.lv-map-now:not(:empty) { max-width: 180px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.js .lv-map-card { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - var(--header-h, 72px) - 110px)); overflow: auto; overscroll-behavior: contain; padding: 10px; border-radius: 26px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-l); transform-origin: 100% 100%; }
.lv-map-k { margin: 6px 10px 8px; font: 650 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-map-card ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lv-map-card a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background .2s; }
.lv-map-n { font: 600 11.5px/1 var(--font-mono); color: var(--muted); text-align: center; }
.lv-map-t { min-width: 0; }
.lv-map-t b { display: block; font: 680 15px/1.2 var(--font-display); }
.lv-map-t small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.3 var(--font-sans); color: var(--muted); }
.lv-map-card a:hover { background: var(--paper-2); }
.lv-map-card a[aria-current] { background: color-mix(in srgb, var(--style) 12%, var(--card)); }
.lv-map-card a[aria-current]::before { content: ''; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--style); }
.lv-map-card a[aria-current] .lv-map-n { color: var(--style-text); font-weight: 700; }
.lv-map-card a:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: -2px; }

/* ── the studio sheet (Colours · Download) ── */
.lv-sheet { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.lv-sheet[open] { display: grid; place-items: center; }
.lv-sheet::backdrop { background: rgba(13, 15, 20, .46); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); animation: lv-fade .35s ease both; }
.lv-sheet.is-closing::backdrop { animation: lv-fade-out .3s ease both; }
@keyframes lv-fade { from { opacity: 0; } }
@keyframes lv-fade-out { to { opacity: 0; } }
html.lv-sheet-open { overflow: hidden; }
.lv-sheet-in { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1080px, 100%); height: min(780px, 100%); border-radius: 28px; background: var(--paper); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
.lv-sheet-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.lv-sheet-grab { display: none; }
.lv-sheet-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lv-sheet-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--style) 14%, var(--card)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--style) 30%, transparent); }
.lv-sheet-ic .lv-svg { width: 28px; height: 28px; }
.lv-sheet-id > div { min-width: 0; }
.lv-sheet-h { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 780 19px/1.15 var(--font-display); letter-spacing: -.015em; }
.lv-sheet-h span { font-family: var(--font-hand); font-weight: 700; font-size: 1.12em; letter-spacing: 0; color: var(--style-text); }
.lv-sheet-now { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--font-sans); color: var(--muted); }
.lv-sheet-modes { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--rule); }
.lv-sheet-modes button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 140px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 700 15px/1 var(--font-display); cursor: pointer; transition: color .25s; }
.lv-sheet-modes button svg { width: 18px; height: 18px; }
.lv-sheet-modes button:hover, .lv-sheet-modes button[aria-selected="true"] { color: var(--ink); }
.lv-sheet-modes button[aria-selected="true"] svg { color: var(--style-text); }
.lv-sheet-modes button:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 1px; }
.lv-sheet-ink { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(17, 19, 24, .1), 0 8px 18px -12px rgba(17, 19, 24, .45); transition: transform .5s var(--e-spring), width .4s var(--e-out); }
:root[data-theme="dark"] .lv-sheet-ink { background: #2B303C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lv-sheet-x { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; transition: transform .35s var(--e-spring), border-color .2s; }
.lv-sheet-x svg { width: 20px; height: 20px; }
.lv-sheet-x:hover { transform: rotate(90deg); border-color: var(--ink); }
.lv-sheet-x:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }
.lv-sheet-body { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 0; overflow: hidden; }
.lv-sheet-prev { position: relative; min-height: 0; padding: 18px; border-right: 1px solid var(--rule); }
.lv-sheet-stage { position: relative; height: 100%; min-height: 220px; display: grid; place-items: center; border-radius: 24px; color: var(--ink);
  background: radial-gradient(70% 60% at 50% 46%, color-mix(in srgb, var(--style) 16%, transparent), transparent 72%), var(--dot-grid), var(--paper-2); }
.lv-sheet-stage[data-bg="white"] { background: #fff; color: #111318; }
.lv-sheet-stage[data-bg="dark"] { background: #111318; color: #F7F3EC; }
.lv-sheet-stage[data-bg="grid"] { background: repeating-conic-gradient(#ECE6DA 0 25%, #FFFFFF 0 50%) 0 0 / 22px 22px; color: #111318; }
.lv-sheet-art { width: min(64%, 280px); aspect-ratio: 1; }
.lv-sheet-art .lv-svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--style) 24%, transparent)); }
.lv-sheet-pane { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px clamp(16px, 2.4vw, 28px) 28px; outline: none; display: grid; align-content: start; gap: 24px; }
.lv-sheet-pane[hidden] { display: none; }
.lv-sh-sec { display: grid; gap: 12px; min-width: 0; }
.lv-sh-sec[hidden] { display: none; }
.lv-sh-h { margin: 0; font: 750 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.lv-sh-h small { margin-left: 6px; font: 500 13px/1 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.lv-sh-row { grid-template-columns: minmax(0, 1fr); }
.lv-sh-reset { margin: 0; }
.lv-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lv-pal { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 7px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, transform .25s var(--e-spring); }
.lv-pal:hover { transform: translateY(-2px); border-color: var(--rule-strong); }
.lv-pal[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lv-pal:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-pal-art { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 6px; border-radius: 12px; background: var(--paper-2); }
.lv-pal-art .lv-svg { width: 100%; height: 100%; }
.lv-pal-t { display: grid; gap: 5px; min-width: 0; }
.lv-pal-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 13.5px/1.15 var(--font-sans); }
.lv-pal-dots { display: flex; gap: 3px; }
.lv-pal-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.lv-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-swb.is-custom { overflow: hidden; }
.lv-swb.is-custom span { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.lv-swb.is-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lv-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-color { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 13px 4px 4px; border-radius: var(--pill); border: 1px solid var(--rule-strong); background: var(--card); cursor: pointer; font: 600 13px/1 var(--font-sans); color: var(--ink); transition: border-color .2s; }
.lv-color:hover { border-color: var(--ink); }
.lv-color:focus-within { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.lv-color i { width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, transparent); }
.lv-dl-groups { display: grid; gap: 18px; }
.lv-dl-g { display: grid; gap: 8px; }
.lv-dl-gl { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lv-dl-gl svg { width: 16px; height: 16px; }
.lv-dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lv-fmt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 8px 14px 8px 8px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: border-color .2s, transform .25s var(--e-spring), box-shadow .2s; }
.lv-fmt:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.lv-fmt:active { transform: scale(.98); }
.lv-fmt:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.lv-fmt > svg { width: 20px; height: 20px; color: var(--muted); }
.lv-fmt-x { display: grid; place-items: center; width: 50px; height: 44px; border-radius: 12px; background: var(--paper-2); font: 750 11px/1 var(--font-mono); letter-spacing: .04em; }
.lv-fmt-t { display: grid; gap: 3px; min-width: 0; }
.lv-fmt-t b { font: 700 15px/1.15 var(--font-display); }
.lv-fmt-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.3 var(--font-sans); color: var(--muted); }
.lv-fmt.is-main { border-color: var(--style); background: color-mix(in srgb, var(--style) 8%, var(--card)); }
.lv-fmt.is-main .lv-fmt-x { background: var(--style-fill, var(--style)); color: var(--style-on, #fff); }
.lv-fmt.is-busy { opacity: .6; cursor: progress; }
.lv-seg { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper-2); max-width: 100%; }
.lv-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 620 14px/1 var(--font-sans); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lv-seg button:hover { color: var(--ink); }
.lv-seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-s); }
.lv-seg button:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 1px; }
.lv-px button { font-family: var(--font-mono); font-size: 13px; }
.lv-bgx-sw { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.lv-bgx-sw.is-none { background: repeating-conic-gradient(#d9d2c4 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.lv-bgx-in { width: 1px; height: 1px; opacity: 0; position: absolute; }
.lv-sheet-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px 12px 22px; border-top: 1px solid var(--rule); background: var(--paper); }
.lv-sheet-sum { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.4 var(--font-sans); color: var(--muted); }
.lv-sheet-sum b { color: var(--ink); font-weight: 700; }
.lv-sheet-acts { display: flex; gap: 8px; flex: none; }
.lv-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 15px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 720 15px/1 var(--font-display); cursor: pointer; transition: transform .3s var(--e-spring), border-color .2s, background .2s; }
.lv-btn2:hover { transform: translateY(-2px); border-color: var(--style); }
.lv-btn2:active { transform: scale(.97); }
.lv-btn2.is-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lv-btn2.is-go { background: var(--style-fill, var(--style)); border-color: transparent; color: var(--style-on, #fff); }
.lv-btn2:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }
.lv-btn2.is-busy { opacity: .6; cursor: progress; }

/* ── one column (tablets, phones): one ordered flow; the stage stays in view while you edit ── */
@media (max-width: 959px) {
  .lv-make-grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .lv-make-grid > *, .lv-col-a > *, .lv-col-b > * { min-width: 0; }
  .lv-col-a, .lv-col-b { display: contents; }
  .lv-head { order: 1; }
  .lv-stage { order: 2; }
  .lv-examples { order: 3; }
  .lv-set { order: 4; }
  .lv-pickwrap { order: 5; }
  .lv-qcwrap { order: 6; }
  .lv-cta { order: 7; }
  .lv-minor { order: 8; }
  .lv-make-grid > * > noscript, .lv-col-a > noscript { order: 9; }
  .js .lv-stage { position: sticky; top: calc(var(--header-h) + 8px); z-index: 20; aspect-ratio: auto; height: clamp(250px, 38vh, 380px); box-shadow: 0 0 0 10px var(--paper), 0 26px 40px -26px rgba(17, 19, 24, .55); }
  html:not(.js) .lv-stage { aspect-ratio: 1 / .8; }
  .lv-stage-art { inset: 50px 16px 46px; display: flex; align-items: center; justify-content: center; }
  .lv-art { width: auto; height: 100%; max-width: 100%; border-radius: 20px; }
  .lv-stage-hint { bottom: 10px; font-size: 17px; }
  .lv-real { bottom: 10px; gap: 12px; left: auto; right: 14px; }
  .lv-real span:nth-child(n+3) { display: none; }
  .lv-real i { display: none; }
  .lv-stage-hint:not(.is-gone):not([hidden]) ~ .lv-real { opacity: 0; }
  .lv-real { transition: opacity .3s; }
  .lv-examples .lv-label { margin-top: 0; }
  .lv-sheet-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lv-sheet-prev { border-right: 0; border-bottom: 1px solid var(--rule); padding: 12px 16px; }
  .lv-sheet-stage { height: 150px; min-height: 0; }
  .lv-sheet-art { width: auto; height: 120px; }
}
@media (max-width: 860px) {
  .lv-more { grid-template-columns: 1fr; }
  .lv-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv-rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lv-icon-page { --lv-r: 26px; }
  .lv-title { font-size: clamp(36px, 10.5vw, 48px); }
  .lv-eyebrow { font-size: 11.5px; gap: 6px; }
  .lv-lede { margin-top: 10px; font-size: 15.5px; }
  .js .lv-stage { height: clamp(220px, 34vh, 300px); }
  .lv-stage-now { font-size: 12px; padding: 6px 10px 6px 8px; }
  .lv-bg { width: 22px; height: 22px; }
  .lv-set { padding: 16px 14px 20px; }
  .lv-go b { font-size: 18px; }
  .lv-go-why { display: none; }
  .lv-ghost { flex: 1 1 auto; min-height: 56px; }
  .lv-cta .lv-split { flex-basis: 100%; }
  .lv-dial { width: 132px; height: 132px; }
  .lv-type { font-size: 26px; height: 58px; }
  .lv-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lv-as-art { height: 108px; }
  .lv-as-art .lv-svg { width: 60px; height: 60px; }
  .lv-rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-ptable .lv-attr { display: none; }
  .lv-dev-plus { width: 44px; height: 44px; }
  .js .lv-map { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .js .lv-map-btn { height: 48px; padding-right: 16px; }
  .lv-map-now:not(:empty) { max-width: 110px; }
  /* the sheet becomes a bottom sheet you can drag down */
  .lv-sheet { padding: 0; }
  .lv-sheet[open] { place-items: end stretch; }
  .lv-sheet-in { width: 100%; height: min(92dvh, 100%); border-radius: 26px 26px 0 0; }
  .lv-sheet-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id x' 'modes modes'; padding: 18px 14px 12px; gap: 12px; touch-action: none; }
  .lv-sheet-grab { display: block; position: absolute; left: 50%; top: 7px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--rule-strong); }
  .lv-sheet-id { grid-area: id; }
  .lv-sheet-x { grid-area: x; }
  .lv-sheet-modes { grid-area: modes; }
  .lv-sheet-modes button { flex: 1; min-width: 0; }
  .lv-sheet-prev { display: none; }
  .lv-sheet-body { grid-template-rows: minmax(0, 1fr); }
  .lv-sheet-pane { padding: 16px 14px 24px; }
  .lv-sheet-foot { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
  .lv-sheet-sum { display: none; }
  .lv-sheet-acts { flex: 1; }
  .lv-sheet-acts .lv-btn2 { flex: 1; }
  .lv-dl-list { grid-template-columns: minmax(0, 1fr); }
  .lv-pals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .lv-minor { gap: 0 12px; }
  .lv-tiles { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .lv-live-dot, .lv-stage-hint::before, .lv-to-skel { animation: none; }
  .lv-art, .lv-split, .lv-ghost, .lv-ex, .lv-to, .lv-as, .lv-as-art .lv-svg, .lv-cal-d, .lv-map, .lv-sheet-ink, .lv-dev-plus, .lv-pal, .lv-fmt, .lv-btn2, .lv-switch .lv-knob::after { transition: none !important; }
  .lv-art[data-g]:hover, .lv-art.is-drag, .lv-split:hover, .lv-as:hover, .lv-as:hover .lv-as-art .lv-svg { transform: none; }
}
@media (forced-colors: active) {
  .lv-cal-d[aria-checked="true"], .lv-to[aria-checked="true"], .lv-qb[aria-checked="true"], .lv-swb[aria-checked="true"], .lv-as[aria-pressed="true"], .lv-pal[aria-checked="true"], .lv-ex[aria-pressed="true"] { outline: 2px solid Highlight; }
  .lv-meter-fill, .lv-eq-fill { background: Highlight; }
  .lv-art .lv-svg, .lv-to-art, .lv-as-art, .lv-ex-art, .lv-pal-art, .lv-qb span, .lv-swb span { forced-color-adjust: none; }
}
@media print { .lv-map, .lv-sheet, .lv-cta, .lv-minor, .lv-stage-hint, .lv-bgs { display: none !important; } .lv-col-a { position: static; } }

/* ═════════════ dark ═════════════ */
:root[data-theme="dark"] .lv-page { --lv-well: var(--paper-2); }
:root[data-theme="dark"] .lv-tile::before { opacity: .5; }

/* ═════════════ responsive (library) ═════════════ */
@media (max-width: 1080px) {
  .lv-hero-in { grid-template-columns: 1fr; }
  .lv-board { max-width: 680px; }
}
@media (max-width: 860px) {
  .lv-dev-in, .lv-faq-in { grid-template-columns: 1fr; }
  .lv-how .lv-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-tile:nth-child(n+5) { display: none; }
  .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lv-card-art { height: 116px; }
  .lv-card-art .lv-svg { width: 54px; height: 54px; }
  .lv-search { min-height: 48px; }
  .lv-search input { height: 44px; font-size: 16px; }
  .lv-search kbd { display: none; }
  .lv-yours { white-space: normal; }
  .lv-tile { transform: none !important; }
}

/* ═════════════ reduced motion ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .lv-flip > .lv-svg, .lv-tile, .lv-card-link, .lv-sb-ink, .lv-sb-ic, .lv-sb-gl, .lv-stage-art .lv-svg { transition: none !important; }
  .lv-tile, .lv-tile:nth-child(2n) { transform: none; }
}

/* ═════════════ library: style switcher on phones ═════════════
   a trigger shows the current style (mini live calendar, group, name) + a dot for every style; it opens the full list */
@media (max-width: 600px) {
  .lv-sb { container-type: normal; }
  .lv-sb-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 14px 0 6px; border-radius: 16px;
    border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; text-align: left; font: inherit;
    box-shadow: 0 1px 0 var(--rule); -webkit-tap-highlight-color: transparent; transition: border-color .2s; }
  .lv-sb-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
  .lv-sb-cur-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--lv-acc);
    background: color-mix(in srgb, var(--lv-acc) 13%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lv-acc) 50%, transparent); }
  .lv-sb-cur-ic .lv-svg { width: 26px; height: 26px; }
  .lv-sb-cur { display: grid; gap: 4px; min-width: 0; }
  .lv-sb-cur small { font: 700 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .lv-sb-cur b { font: 750 15px/1 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lv-sb-dots { margin-left: auto; flex: none; display: grid; grid-template-columns: repeat(10, 5px); gap: 3px; }
  .lv-sb-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--sc); opacity: .55; transition: transform .3s var(--e-spring), opacity .3s; }
  .lv-sb-dots i.is-on { opacity: 1; transform: scale(1.5); box-shadow: 0 0 0 1px var(--card); }
  .lv-sb-chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .3s var(--e-out); }
  .lv-sb.is-open .lv-sb-chev { transform: rotate(180deg); }
  .lv-sb.is-open .lv-sb-toggle { border-color: color-mix(in srgb, var(--lv-acc) 45%, var(--rule)); }
  .lv-sb-panel { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; padding: 10px;
    max-height: calc(100dvh - var(--header-h, 64px) - 150px); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 34px 70px -26px rgba(17, 19, 24, .5), 0 1px 0 var(--rule);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 30% 0; transition: opacity .18s, transform .3s var(--e-out), visibility .18s; }
  .lv-sb.is-open .lv-sb-panel { opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .lv-sb-toggle { display: none; }
  html:not(.js) .lv-sb-panel { position: static; opacity: 1; visibility: visible; transform: none; }
  .lv-sb-list { grid-template-columns: 1fr; row-gap: 6px; }
  .lv-sb-g, .lv-sb-g[data-group] { grid-column: auto; border-left: 0; padding: 0; }
  .lv-sb-g + .lv-sb-g { border-left: 0; border-top: 1px solid var(--rule); padding-top: 4px; }
  .lv-sb-gl, .lv-bar.is-stuck .lv-sb-gl { padding: 4px 6px 2px; height: 20px; opacity: 1; }
  .lv-sb-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lv-sb-o, .lv-bar.is-stuck .lv-sb-o { height: 60px; font-size: 11.5px; gap: 6px; }
  .lv-sb-ic, .lv-bar.is-stuck .lv-sb-ic { width: 26px; height: 26px; }
}

/* ═════════════ library: hover card (.lv-peek, appended to <body>, role=tooltip) ═════════════
   .lvp-in > .lvp-stage (.lvp-art big live drawing, .lvp-style chip, .lvp-live tag, .lvp-val current values) + .lvp-body
   (.lvp-grp, .lvp-name, .lvp-desc, "You set" .lvp-params chips, "Examples" .lvp-ex renders) + .lvp-keys.
   Positioned by js/live.js (translate); data-side = r|l|t|b; --pk-ax/--pk-ay = where the caret meets the card. */
.lv-peek { position: fixed; left: 0; top: 0; z-index: 70; width: 340px; pointer-events: none; visibility: hidden; color: var(--ink); font-family: var(--font-sans);
  --sc: var(--c-line); --sc-text: var(--c-line-text); }
.lv-peek.is-on { visibility: visible; }
.lvp-in { position: relative; border-radius: 22px; background: var(--card); border: 1px solid color-mix(in srgb, var(--sc) 24%, var(--rule));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 30px 60px -26px rgba(17, 19, 24, .5), 0 14px 28px -20px color-mix(in srgb, var(--sc) 70%, transparent);
  opacity: 0; transform: scale(.94) translateX(-6px); transition: opacity .14s ease, transform .2s var(--e-out), border-color .3s; }
.lv-peek[data-side="r"] .lvp-in { transform-origin: 0 var(--pk-ay, 50%); }
.lv-peek[data-side="l"] .lvp-in { transform-origin: 100% var(--pk-ay, 50%); transform: scale(.94) translateX(6px); }
.lv-peek[data-side="b"] .lvp-in { transform-origin: var(--pk-ax, 50%) 0; transform: scale(.94) translateY(-6px); }
.lv-peek[data-side="t"] .lvp-in { transform-origin: var(--pk-ax, 50%) 100%; transform: scale(.94) translateY(6px); }
.lv-peek.is-on .lvp-in { opacity: 1; transform: none; transition: opacity .16s ease, transform .3s var(--e-spring), border-color .3s; }
.lv-peek.is-instant .lvp-in { transition: none; }
.lvp-in::before { content: ''; position: absolute; width: 12px; height: 12px; background: var(--card); border: 1px solid color-mix(in srgb, var(--sc) 24%, var(--rule)); border-right: 0; border-bottom: 0; }
.lv-peek[data-side="r"] .lvp-in::before { left: -7px; top: calc(var(--pk-ay, 50%) - 6px); transform: rotate(-45deg); }
.lv-peek[data-side="l"] .lvp-in::before { right: -7px; top: calc(var(--pk-ay, 50%) - 6px); transform: rotate(135deg); }
.lv-peek[data-side="b"] .lvp-in::before { top: -7px; left: calc(var(--pk-ax, 50%) - 6px); transform: rotate(45deg); background: color-mix(in srgb, var(--sc) 14%, var(--card)); }
.lv-peek[data-side="t"] .lvp-in::before { bottom: -7px; left: calc(var(--pk-ax, 50%) - 6px); transform: rotate(-135deg); }
/* the stage: the icon big, in the current style, on a tint of its colour with a fine dot grid; it plays its examples */
.lvp-stage { position: relative; height: 144px; display: grid; place-items: center; border-radius: 21px 21px 0 0; overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--card) 72%, transparent) 0 36px, transparent 76px),
    radial-gradient(color-mix(in srgb, var(--sc) 26%, transparent) .9px, transparent 1.3px) 0 0 / 12px 12px,
    linear-gradient(160deg, color-mix(in srgb, var(--sc) 15%, var(--card)), color-mix(in srgb, var(--sc) 6%, var(--paper-2)));
  border-bottom: 1px solid color-mix(in srgb, var(--sc) 16%, var(--rule)); }
.lvp-art { position: relative; width: 80px; height: 80px; margin-top: -10px; color: var(--ink); display: grid; place-items: center; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--sc) 22%, transparent)); }
.lvp-art > .lv-svg { width: 100%; height: 100%; }
.lvp-style, .lvp-live { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 24px; border-radius: 999px; }
.lvp-style { left: 10px; padding: 0 9px 0 7px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 22%, transparent);
  font: 700 11.5px/1 var(--font-sans); color: var(--sc-text, var(--ink)); }
.lvp-style i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.lvp-live { right: 10px; padding: 0 9px 0 8px; background: var(--ink); color: var(--paper); font: 700 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.lvp-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 60%, transparent); animation: lvp-pulse 1.6s ease-out infinite; }
@keyframes lvp-pulse { 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.lvp-val { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 18%, transparent);
  font: 600 11px/1 var(--font-mono); color: var(--sc-text, var(--ink)); }
.lvp-val:empty { display: none; }
.lvp-body { padding: 13px 16px 14px; display: grid; }
.lvp-grp { margin: 0; display: flex; align-items: center; gap: 7px; font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lvp-grp::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--sc); transform: rotate(45deg); }
.lvp-name { margin: 6px 0 0; font: 780 20px/1.1 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.lvp-desc { margin: 5px 0 0; font: 500 12.5px/1.4 var(--font-sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lvp-sec { margin-top: 12px; }
.lvp-sec[hidden] { display: none; }
.lvp-l { margin: 0 0 6px; font: 700 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lvp-params { display: flex; flex-wrap: wrap; gap: 5px; }
.lvp-p { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule); font: 650 12px/1 var(--font-sans); color: var(--ink); white-space: nowrap; }
.lvp-p svg { width: 14px; height: 14px; flex: none; color: var(--sc-text, var(--ink)); }
.lvp-p b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.lvp-p small { font: 600 10px/1 var(--font-mono); color: var(--muted); }
.lvp-more { color: var(--muted); padding: 0 9px; }
.lvp-ex { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.lvp-e { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 13px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule);
  transition: background-color .3s, box-shadow .3s; }
.lvp-e-ic { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); }
.lvp-e-ic .lv-svg { width: 100%; height: 100%; }
.lvp-e small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1 var(--font-mono); color: var(--muted); }
.lvp-e.is-on { background: color-mix(in srgb, var(--sc) 12%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--sc); }
.lvp-e.is-on small { color: var(--sc-text, var(--ink)); }
.lvp-skel { width: 14px; height: 14px; border-radius: 50%; background: var(--paper-3); }
.lvp-keys { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 16px 11px; border-top: 1px solid var(--rule); border-radius: 0 0 21px 21px;
  font: 500 11.5px/1 var(--font-sans); color: var(--muted); background: color-mix(in srgb, var(--paper-2) 55%, var(--card)); }
.lvp-keys > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lvp-keys kbd { font: 650 10px/1 var(--font-mono); height: auto; min-width: 0; padding: 3px 5px; border-radius: 5px; background: var(--card); border: 1px solid var(--rule-strong); box-shadow: 0 1px 0 var(--rule-strong); color: var(--ink); }
.lvp-click { font-weight: 700; color: var(--sc-text, var(--ink)); }
.lvp-click svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .lvp-in, .lv-peek.is-on .lvp-in { transition: opacity .12s linear; transform: none !important; }
  .lvp-live i { animation: none; }
  .lv-sb { transition: none; }
}
@media (forced-colors: active) {
  .lvp-in { border: 1px solid CanvasText; }
  .lvp-e.is-on { outline: 2px solid Highlight; }
  .lv-sb-ink { display: none; }
  .lv-sb-o[aria-checked="true"] { outline: 2px solid Highlight; }
  .lv-sb-ic { forced-color-adjust: none; }
}
@media print { .lv-peek { display: none; } }

/* ───────── the in-house pickers (css/ui-kit.css, js/ui-kit.js) dressed for the studio ─────────
   The time field, number stepper, sliders, month dropdown and colour popovers come from the kit; these rules only
   size and tint them so they match the studio. The meter and the equaliser keep their own drawings. */
.lv-tf-side .wk-time { inline-size: 100%; max-inline-size: 210px; min-block-size: 52px; border-width: 1.5px; border-radius: 14px;
  font: 650 22px/1 var(--font-mono); letter-spacing: 0; }
.lv-tf-side .wk-time-ic svg { inline-size: 20px; block-size: 20px; }
.lv-nf .wk-stepper { flex: none; block-size: 52px; border-width: 1.5px; border-radius: 16px; }
.lv-nf .wk-step { inline-size: 46px; }
.lv-nf .wk-step svg { inline-size: 18px; block-size: 18px; }
.lv-nf .wk-step-in { inline-size: 78px; font: 750 22px/1 var(--font-mono); }
.lv-nf-row .wk-slider { flex: 1; min-inline-size: 80px; --wk-accent: var(--style); }
.lv-dev-size .wk-slider { flex: 1; min-inline-size: 120px; --wk-accent: var(--sun); }
.lv-dev-size .wk-sld-track { background: rgba(255, 255, 255, .16); box-shadow: none; }
.lv-dev-size .wk-sld-thumb { background: #111318; border-color: var(--sun); }
.lv-cal-mon .wk-select { flex: 1; justify-content: center; gap: 6px; min-inline-size: 0; min-block-size: 38px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; font: 750 17px/1 var(--font-display); letter-spacing: -.01em; }
.lv-cal-mon .wk-select .wk-select-v { flex: 0 1 auto; }
.lv-cal-mon .wk-select:hover, .lv-cal-mon .wk-select[aria-expanded="true"] { background: var(--card); box-shadow: var(--shadow-s); }
.lv-bgx-in { pointer-events: none; }