@font-face { font-family: Hanken; src: url('/assets/hanken-grotesk.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0f0a08;
  --ground: #120b08;
  --well: #17100c;
  --ink: #f1ede7;
  --muted: #aaa29a;
  --dim: rgba(241, 237, 231, 0.58);
  --line: rgba(241, 237, 231, 0.13);
  /* Boundaries of controls (a slider track, a bordered button): >= 3:1 on
     every product ground and on the dialog (WCAG 1.4.11). --line stays the
     decorative hairline. */
  --control-line: rgba(241, 237, 231, 0.42);
  --accent: #ef9267;
  --hot: #ff7140;
  --glow: rgba(255, 100, 43, 0.24);
  --ring: rgba(255, 114, 48, 0.18);
  --header: 64px;
  --page: clamp(22px, 5.6vw, 88px);
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 0.72, 0.22, 1);
}
body[data-product=skin] { --bg: #0e100c; --ground: #10130f; --well: #14170f; --accent: #d5bc83; --hot: #d2b77c; --glow: rgba(212, 183, 120, 0.2); --ring: rgba(197, 169, 111, 0.16); }
/* The static shell, before app.js has routed: no product's colour. */
body:not([data-product]) { --accent: #aaa29a; --glow: rgba(241, 237, 231, 0.05); --ring: rgba(241, 237, 231, 0.08); }
body[data-product=unholy] { --bg: #0d0908; --ground: #0c0908; --well: #151009; --accent: #dca57f; --hot: #e7a06d; --glow: rgba(207, 120, 70, 0.18); --ring: rgba(231, 154, 102, 0.14); }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header) + 24px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Hanken, system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 420ms var(--ease); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
button:focus:not(:focus-visible) { outline: none; }
img { display: block; max-width: 100%; height: auto; }
figure, p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 300; }
.mono { font-family: var(--mono); }
.eyebrow { font: 12px/1.6 var(--mono); letter-spacing: .11em; color: var(--accent); text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 90; top: 12px; left: 12px; padding: 12px; background: var(--ink); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* ---- header: one bar ---- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  height: var(--header); padding: 0 var(--page);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 15, 13, 0.97), rgba(12, 11, 10, 0.94));
  backdrop-filter: blur(18px) saturate(120%);
}
.site-mark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 12px var(--mono); letter-spacing: .14em; white-space: nowrap; }
.site-mark__signal { width: 30px; height: 12px; display: block; filter: drop-shadow(0 0 10px rgba(255, 113, 55, 0.35)); }
.product-selector { display: flex; gap: 32px; align-items: stretch; height: 100%; }
.product-selector a { display: flex; align-items: center; position: relative; font: 13px var(--mono); letter-spacing: .12em; color: var(--muted); padding: 0 4px; transition: color 160ms ease; }
.product-selector a:hover { color: var(--ink); }
.product-selector a[aria-current=page] { color: var(--ink); }
/* A product named in the bar but not released (public-site.js, eluate.html): a name that goes nowhere. */
.product-selector a[aria-disabled=true], .free-strip a[aria-disabled=true] { opacity: .5; cursor: default; pointer-events: none; }
.product-selector a[aria-current=page]::after { content: ''; height: 1px; position: absolute; bottom: -1px; left: 0; right: 0; background: var(--accent); }
.info-button { min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info-button:hover { color: var(--ink); }
/* "Join the beta" (beta-modal.js): a pill, inside a button whose box is the 44 px target. */
.header-actions { display: flex; align-items: center; gap: 24px; }
.beta-button { display: inline-flex; align-items: center; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.beta-button[hidden] { display: none; }
.beta-button__pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px 0 calc(14px + .12em); border: 1px solid var(--accent); border-radius: 999px; transition: color 160ms ease, background-color 160ms ease; }
.beta-button:hover .beta-button__pill { color: var(--bg); background: var(--accent); }
.beta-button:focus-visible { outline: none; }
.beta-button:focus-visible .beta-button__pill { outline: 2px solid var(--accent); outline-offset: 3px; }
.beta-button__short { display: none; }

/* ---- hero ---- */
main { outline: none; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--header)); max-height: 1000px;
  display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.7fr); align-items: center; gap: clamp(28px, 5vw, 90px);
  padding: clamp(48px, 7vh, 76px) var(--page) clamp(56px, 8vh, 96px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 52%), radial-gradient(60% 80% at 74% 44%, var(--glow), transparent 72%), var(--ground);
  transition: background 420ms var(--ease);
}
.hero-ring { position: absolute; z-index: -1; right: -8vw; bottom: -28vh; width: 72vw; height: 60vh; border: 1px solid var(--ring); border-radius: 50%; transform: rotate(-8deg); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: end; padding-bottom: clamp(24px, 6vh, 64px); }
.hero h1 { font-size: clamp(58px, 7vw, 108px); font-weight: 260; line-height: .88; letter-spacing: .1em; margin: 20px 0 24px; }
.hero-line { font-size: clamp(22px, 2.2vw, 31px); font-weight: 320; line-height: 1.1; max-width: 360px; text-wrap: balance; }
.hero-proof { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 18px 0 0; max-width: 360px; }
.hero-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); transition: color 160ms ease; }
.hero-cue:hover { color: var(--ink); }
.hero-cue span { transition: transform 320ms var(--ease); }
.hero-cue:hover span { transform: translateY(3px); }
.hero-cue--manual { margin-left: 28px; }
.hero-cue--manual:hover span { transform: translate(2px, -2px); }
.hero-visual { position: relative; z-index: 1; min-width: 0; transform: perspective(1400px) rotateX(1.2deg) rotateY(-1.8deg); transform-origin: center; }
.frame-light { position: absolute; z-index: 0; inset: -12% -8%; background: radial-gradient(closest-side, var(--glow), transparent 74%); filter: blur(24px); pointer-events: none; }
.image-button { display: block; position: relative; z-index: 1; width: 100%; max-width: 100%; cursor: zoom-in; }
.hero-visual img { width: 100%; max-height: min(66vh, 620px); object-fit: contain; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58), 0 2px 8px rgba(0, 0, 0, 0.76), inset 0 1px rgba(255, 255, 255, 0.08); }
/* The hero's video loop (hero-video.js) sits exactly on the still: same box, same fit, same frame. */
.hero-visual .image-button img { display: block; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; opacity: 0; pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
.hero-visual figcaption { font: 12px var(--mono); letter-spacing: .08em; color: var(--dim); text-align: right; padding-top: 16px; }

/* Sinew's hero is the plugin's own knot (sinew-hero.js) replaying telemetry
   recorded from an offline render. Before the bundle and the sidecar arrive,
   and for good if they never do, the host is a hollow ring where the knot's
   ring will sit (the knot draws it at ~43% of its box). The hero is not an
   instrument: the stage takes no pointer events, so the page always scrolls. */
.hero-visual--knot { transform: none; }
.hero-visual--knot figcaption { text-align: center; }
.hero-knot { position: relative; z-index: 1; width: min(100%, 64vh, 560px); aspect-ratio: 1; margin-inline: auto; }
.hero-knot::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid var(--ring); background: radial-gradient(closest-side, transparent 58%, color-mix(in srgb, var(--accent) 7%, transparent) 86%, transparent 100%); pointer-events: none; }
/* The knot's echoes run well past its 560 viewBox, and an SVG clips to its own
   box, so left alone the hero shows its square. The halo is 10% larger than
   the host on every side, lets the SVG overflow into it, and fades radially:
   solid out past the knot's lobes (~44% of the host), gone before the halo's
   edge. --knot-fade is where it reaches zero, in % of the halo's closest side. */
.hero-knot__halo {
  --knot-fade: 96.7%;
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 73%, rgb(0 0 0 / .55) calc((73% + var(--knot-fade)) / 2), transparent var(--knot-fade));
  mask-image: radial-gradient(closest-side, #000 73%, rgb(0 0 0 / .55) calc((73% + var(--knot-fade)) / 2), transparent var(--knot-fade));
}
/* The knot strokes with Sinew's own tokens: the plugin's default ("Studio")
   theme, from its theme.js ladder at sinew-main 30799ff. The stage is the
   host's own square inside the halo (10 / 120 of the halo on each side). */
.hero-knot__stage {
  position: absolute; inset: 8.3333%; z-index: 1; pointer-events: none;
  --strand: oklch(0.719 0.106 51.8); --strand-hi: oklch(0.877 0.093 69.2);
  --core: oklch(0.620 0.160 40); --core-hi: oklch(0.840 0.100 60); --signal: oklch(0.672 0.176 40);
  --clay: oklch(0.620 0.120 46); --jade: oklch(0.700 0.090 166); --steel: oklch(0.640 0.052 248);
}
.hero-knot__stage svg { pointer-events: none; overflow: visible; }
/* The X / Y ticks mark the edges of the Knot page's rectangular well; the hero has no well. */
.hero-knot__stage [data-knot-tick] { display: none; }
/* Reduced motion: the knot runs hidden up to its representative frame, then holds it. */
.hero-knot.is-warming .hero-knot__stage { visibility: hidden; }
/* The entrance: glows first, lines and rings at scattered times, the core
   last. Scoped to .is-emerging, which sinew-hero.js sets for the first mount
   only and removes once the core has arrived. Never under reduced motion (see
   the end of file). */
@keyframes knot-fade { from { opacity: 0; } }
@keyframes knot-strand { from { opacity: 0; transform: scale(.9); } }
@keyframes knot-core { from { opacity: 0; transform: scale(.35); } }
.hero-knot.is-emerging svg > circle { animation: knot-fade .8s ease-out 1.65s both; }
.hero-knot.is-emerging svg > circle:nth-of-type(1) { animation-duration: 1.6s; animation-delay: .35s; }
.hero-knot.is-emerging svg > circle:nth-of-type(2) { animation-duration: .9s; animation-delay: .35s; }
.hero-knot.is-emerging svg > g > path { transform-box: view-box; transform-origin: 50% 50%; animation: knot-strand .9s var(--ease) both; }
.hero-knot.is-emerging svg > g > path:nth-of-type(5n+0) { animation-delay: 0.91s; }
.hero-knot.is-emerging svg > g > path:nth-of-type(5n+1) { animation-delay: 1.43s; }
.hero-knot.is-emerging svg > g > path:nth-of-type(5n+2) { animation-delay: 0.67s; }
.hero-knot.is-emerging svg > g > path:nth-of-type(5n+3) { animation-delay: 1.65s; }
.hero-knot.is-emerging svg > g > path:nth-of-type(5n+4) { animation-delay: 1.10s; }
.hero-knot.is-emerging svg > [data-knot-puck-ring], .hero-knot.is-emerging svg > [data-knot-core] { transform-box: fill-box; transform-origin: center; animation: knot-core .9s var(--ease) 1.9s both; }

/* ---- sections ---- */
#product-sections { padding: 0 var(--page); }
.section { max-width: 1424px; margin: 0 auto; padding: 72px 0 80px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.7fr); gap: clamp(32px, 5vw, 90px); }
.section-heading h2 { margin-top: 16px; }
.section-intro { max-width: 420px; color: var(--muted); line-height: 1.7; margin-top: 22px; }
.preview-note { font: 12px/1.6 var(--mono); color: var(--dim); border-left: 1px solid var(--accent); padding-left: 12px; margin-top: 26px; max-width: 360px; }

/* ---- surface ---- */
.surface { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.surface__canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(80% 90% at 50% 50%, var(--well), var(--bg) 100%); border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; user-select: none; }
.surface--pad .surface__canvas { aspect-ratio: 4 / 3; cursor: pointer; }
.surface__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.surface__control[hidden] { display: none; }
.surface__control { display: flex; align-items: center; gap: 12px; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.surface__control input { width: 120px; accent-color: var(--accent); height: 24px; margin: 0; cursor: pointer; }
.surface__control output { color: var(--ink); min-width: 4ch; font-size: 12px; }
.surface__hint { margin-left: auto; font-size: 12px; letter-spacing: .08em; color: var(--dim); }

/* ---- listen ---- */
.player { min-width: 0; }
.track-list { list-style: none; padding: 0; margin: 0 0 24px; }
.track-choice { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 15px; text-align: left; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line); transition: color 160ms ease; }
.track-choice:hover { color: var(--accent); }
.track-choice .track-number { font: 12px var(--mono); color: var(--muted); }
.track-choice strong { font-weight: 450; display: block; font-size: 17px; }
.track-choice small { color: var(--muted); display: block; margin-top: 2px; font-size: 14px; }
.track-choice .track-duration { font: 12px var(--mono); color: var(--muted); }
.track-choice[aria-pressed=true] { color: var(--accent); }
.track-choice[aria-pressed=true] .track-number { color: var(--accent); }
.waveform { height: 78px; display: block; width: 100%; color: var(--accent); opacity: .85; }
.waveform-wrap { position: relative; }
.waveform-progress { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); opacity: .1; pointer-events: none; }
.transport { display: flex; align-items: center; gap: 14px; margin-top: 15px; }
.play-button, .restart-button { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; transition: background-color 160ms ease, color 160ms ease; }
.play-button:hover { border-color: var(--ink); color: var(--ink); }
.play-button svg, .restart-button svg { width: 18px; height: 18px; fill: currentColor; }
.restart-button { color: var(--muted); border-color: var(--line); width: 40px; height: 40px; flex-basis: 40px; }
.transport-main { flex: 1; min-width: 0; }
.time-labels { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--muted); gap: 12px; }
.seek { display: block; width: 100%; height: 25px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.audio-status { font-size: 14px; color: var(--muted); min-height: 20px; margin-top: 12px; }
.audio-status.has-error { color: #f7b799; }
.player-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.volume { display: flex; align-items: center; gap: 10px; }
/* The volume slider draws its own track so the unfilled part meets 3:1 (the
   engine's dark native track is ~1.8:1). The input box is 24px tall, which is
   the hit target; the visible track stays a 4px line. --fill is set by
   audio-ui.js. */
.volume input { --fill: 75%; width: 76px; height: 24px; margin: 0; padding: 0; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
.volume input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--fill) 100% no-repeat, var(--control-line); }
.volume input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--accent); }
.volume input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--control-line); }
.volume input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.volume input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); }
.text-link { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent); }
.loop-button { padding: 8px 0; min-height: 44px; font-size: 14px; }

/* Unholy comparison player */
.comparison { display: block; }
.comparison .section-heading { max-width: 650px; margin-bottom: 32px; }
.comparison-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 42px; }
.mode-list { display: flex; flex-direction: column; gap: 0; }
.mode-button { padding: 14px 2px; border-bottom: 1px solid var(--line); text-align: left; min-height: 62px; transition: color 160ms ease; }
.mode-button:hover { color: var(--accent); }
.mode-button strong { font-size: 16px; font-weight: 450; display: block; }
.mode-button small { font-size: 14px; color: var(--muted); display: block; margin-top: 3px; }
.mode-button[aria-pressed=true] { color: var(--accent); }
.mode-button .mode-index { float: right; font: 12px var(--mono); margin-top: 5px; color: var(--muted); }
.stem-row { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; opacity: .4; transition: opacity .15s; }
.stem-row.is-audible { opacity: 1; }
.stem-label { font: 12px var(--mono); letter-spacing: .08em; }
.stem-row .waveform { height: 64px; }
.stem-row[data-stem=skin], .stem-row[data-stem=skin] .waveform { color: #d5bc83; }
.comparison-player { min-width: 0; }
.comparison-player .transport { margin-top: 28px; }

/* ---- skin pads ---- */
/* Sixteen SKIN voices on the Surface section. The pad geometry and lighting are
   the plug-in's own `.pad` / `.padcell` / `.padnum` / `.padname` / `.live`
   rules from drumbusmaximus/plugin/ui/index.html, re-expressed in this site's
   tokens: the plug-in's --s-key / --s-panel become --well / --ground, its
   --s-accent becomes the page's --accent, and every type size is lifted to the
   12px mono floor (the plug-in sets .padnum at 9px and .padname at 10-12px). */
.skin-pads { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.skin-pads__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.skin-pad {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  min-height: 72px; padding: 10px 12px 12px; text-align: left; min-width: 0;
  border: 1px solid var(--line); border-radius: 5px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .22)), var(--well);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 3px rgba(0, 0, 0, .35);
  transition: box-shadow 120ms var(--ease), border-color 120ms var(--ease);
}
.skin-pad:active { transform: translateY(1px); }
.skin-pad.is-live { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px var(--glow), 0 2px 3px rgba(0, 0, 0, .4); }
.skin-pad__num { font: 12px/1 var(--mono); letter-spacing: .08em; color: var(--dim); }
.skin-pad__name { font-size: 14px; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.skin-pads__well { display: grid; gap: 12px; justify-items: center; }
.skin-pads__skin { display: block; width: 100%; max-width: 262px; aspect-ratio: 1; }
.skin-pads__read { font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--dim); text-align: center; min-height: 20px; }
.skin-pads__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.skin-pads__volume { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.skin-pads__volume input { accent-color: var(--accent); width: 96px; }
.skin-pads__volume output { font: 12px var(--mono); color: var(--dim); min-width: 40px; }
.skin-experience { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:start; }
.skin-membrane,.skin-audition { min-width:0; }
.skin-experience .skin-pads { grid-template-columns: minmax(0,1fr); gap:12px; }
.skin-experience .surface__canvas { aspect-ratio:1; }
.skin-experience .surface__hint { margin-left:0; }
body[data-product="skin"] .surface-section { grid-template-columns:minmax(0,1fr); }
body[data-product="skin"] .surface-section .section-heading { max-width:680px; }
@media(max-width:760px) { .skin-experience { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 760px) {
  .skin-pads { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .skin-pads__grid { gap: 6px; }
  .skin-pad { min-height: 62px; padding: 8px 9px 10px; }
}

/* ---- skin editor (recorded) ---- */
/* SKIN's real editor, vendored whole into /vendor/skin-ui.html and driven by
   recorded state. The plug-in lays its window out to FILL it (one geometry
   function of the window size), so the frame is given one of SKIN's own window
   sizes in CSS pixels and scaled to the column, like a picture of the window:
   audio-ui.js sets the stage's aspect ratio, the frame's size and its scale
   (SKIN_UI_SIZES). The replay is inert; the caption says what it is. */
.skin-ui-block { display: block; margin-bottom: 28px; }
.skin-ui-block[hidden] { display: none; }
.skin-ui-stage { position: relative; width: 100%; aspect-ratio: 1440 / 1000; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #23231f; }
.skin-ui { position: absolute; top: 0; left: 0; display: block; width: 1440px; height: 1000px; border: 0; transform-origin: 0 0; pointer-events: none; color-scheme: dark; }
.skin-ui-caption { font: 12px/1.6 var(--mono); letter-spacing: .1em; color: var(--dim); margin-top: 10px; }
@media (max-width: 760px) {
  .skin-ui-block { margin-bottom: 20px; }
  .skin-ui-stage { border-radius: 8px; }
  .skin-ui-caption { letter-spacing: .06em; }
}

/* ---- unholy display ---- */
/* The real plugin display, mounted from /vendor/unholy-display.js and driven
   by recorded bridge frames. Hairlines only: the well, the border and the
   rounding all come from the plugin's own tokens, scoped to .unholy-display in
   /vendor/unholy-display.css so they cannot reach the rest of the page. */
.unholy-display-block { display: block; margin-top: 28px; }
.unholy-display-block[hidden] { display: none; }
.unholy-display { display: block; width: 100%; min-width: 0; }
.unholy-display-label { font: 12px/1.6 var(--mono); letter-spacing: .1em; color: var(--dim); margin-top: 10px; }
@media (max-width: 760px) {
  .unholy-display-block { margin-top: 20px; }
  .unholy-display-label { letter-spacing: .06em; }
}
/* ---- sinew knot ---- */
/* The plugin's own RadialKnot, mounted from /vendor/sinew-knot.js above the
   Sinew transport. The knot brings all of its own colour as inline SVG; the
   page contributes a hairline well and the proportion it has in the plugin's
   Simple page (420 x 440 in a 900 x 540 editor), capped so it never crowds the
   transport. Nothing here is a control. */
.sinew-knot-block { display: block; margin-top: 28px; }
.sinew-knot-block[hidden] { display: none; }
.sinew-knot {
  position: relative;
  width: min(320px, 68vw);
  aspect-ratio: 42 / 44;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--well);
  padding: 10px;
  min-width: 0;
}
.sinew-knot > * { display: block; width: 100%; height: 100%; }
.sinew-knot-label { font: 12px/1.6 var(--mono); letter-spacing: .1em; color: var(--dim); margin-top: 10px; text-align: center; }
@media (max-width: 760px) {
  .sinew-knot-block { margin-top: 20px; }
  .sinew-knot { width: min(260px, 72vw); }
  .sinew-knot-label { letter-spacing: .04em; }
}

.scene-select { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.scene-select button { padding: 12px 0; font: 13px var(--mono); letter-spacing: .06em; color: var(--muted); min-height: 44px; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.scene-select button[aria-pressed=true] { border-color: var(--accent); color: var(--ink); }
.comparison-explainer { font-size: 14px; color: var(--muted); margin: 18px 0 0; min-height: 42px; }
.signal-route { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; font: 12px var(--mono); color: var(--muted); }
.signal-route a { display: inline-flex; align-items: flex-end; min-height: 24px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; }

/* ---- explore ---- */
.gallery-tabs { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.gallery-tabs button { min-height: 46px; padding: 6px 0; font: 13px var(--mono); letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color 160ms ease; }
.gallery-tabs button:hover { color: var(--ink); }
.gallery-tabs button[aria-selected=true] { border-color: var(--accent); color: var(--ink); }
.gallery-caption { font-size: 14px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.gallery-caption strong { color: var(--ink); font-weight: 450; }
.manual-card { align-self: start; padding: 28px 32px; border: 1px solid var(--line); max-width: 560px; }
.manual-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); transition: color 160ms ease; }
.manual-link:hover { color: var(--dim); }
.manual-edition { margin-top: 16px; font: 12px var(--mono); letter-spacing: .06em; color: var(--dim); }
.manual-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.gallery-content { min-width: 0; }
.gallery-content img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.enlarge-label { display: flex; align-items: center; gap: 18px; position: absolute; bottom: 14px; right: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(17, 17, 17, 0.8); padding: 9px 12px; font: 12px var(--mono); opacity: 0; transition: opacity .18s; }
.image-button:hover .enlarge-label, .image-button:focus-visible .enlarge-label { opacity: 1; }

/* ---- suite (Sinew): the bundled FX modules, full width under the heading ---- */
.suite-section { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.suite-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(20px, 2.4vw, 36px); align-items: start; }
.suite-module img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.suite-module figure { margin: 0; display: flex; flex-direction: column; }
.suite-module figcaption { order: -1; font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
@media (max-width: 1050px) { .suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .suite-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* The band's heading is the link to the Suite page: the footer's in-site arrow, no words added.
   Padding and a matching negative margin give it a tap target without moving the band. */
.suite-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0; margin: -12px 0; transition: color 160ms ease; }
.suite-link:hover { color: var(--ink); }
.suite-link span { transition: transform 320ms var(--ease); }
.suite-link:hover span { transform: translateX(3px); }

/* ---- Suite page (#sinew/suite): no hero; a title, then one band-style section per group ---- */
.hero[hidden] { display: none; }
.suite-page__head { max-width: 1424px; margin: 0 auto; padding: clamp(36px, 6vh, 64px) 0 clamp(40px, 6vh, 64px); }
.suite-page__head h1 { font-size: clamp(58px, 7vw, 108px); font-weight: 260; line-height: .88; letter-spacing: .1em; text-transform: uppercase; margin: 28px 0 0; }
.suite-back { margin-top: 0; }
.suite-back:hover span { transform: translateX(-3px); }
@media (max-width: 760px) { .suite-page__head h1 { font-size: clamp(56px, 14vw, 84px); margin-top: 20px; } }

/* ---- beta sign-up (beta-form.js): a section-style band above the footer on every product page ---- */
.hero-cues { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 36px; }
.hero-cues .hero-cue { margin: 0; }
.beta-band { padding: 0 var(--page); }
.beta-band[hidden] { display: none; }
.beta-body { min-width: 0; max-width: 620px; }
.beta-form { display: grid; gap: 28px; }
.beta-form[hidden], .beta-done[hidden], .beta-error[hidden] { display: none; }
.beta-label { display: block; padding: 0; margin-bottom: 10px; font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.beta-input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; color: var(--ink); background: var(--well); border: 1px solid var(--control-line); border-radius: 4px; font-size: 17px; }
.beta-input:hover { border-color: var(--dim); }
.beta-input:focus-visible { outline-offset: 2px; border-color: var(--accent); }
.beta-input[aria-invalid=true] { border-color: #f7b799; }
.beta-products { margin: 0; padding: 0; border: 0; min-width: 0; }
.beta-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.beta-choice { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px solid var(--control-line); border-radius: 999px; font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.beta-choice:hover { color: var(--ink); }
.beta-choice:has(input:checked) { color: var(--ink); border-color: var(--accent); }
.beta-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.beta-choice input, .beta-consent input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--accent); cursor: pointer; }
.beta-choice input:focus-visible { outline: none; }
.beta-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--muted); }
.beta-consent input { margin-top: 3px; }
.beta-consent input:focus-visible { outline-offset: 3px; }
.beta-consent label { cursor: pointer; color: var(--ink); }
.beta-privacy { font-size: 14px; color: var(--muted); display: inline-block; margin-top: 4px; }
.beta-error { margin-top: 8px; font-size: 14px; color: #f7b799; }
.beta-challenge { min-height: 65px; max-width: 100%; overflow: hidden; }
.beta-challenge:empty { border: 1px dashed var(--line); border-radius: 4px; }
.beta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.beta-submit { min-height: 48px; padding: 0 26px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.beta-submit:hover { color: var(--bg); background: var(--accent); }
.beta-submit[aria-disabled=true] { cursor: wait; opacity: .6; background: none; color: var(--accent); }
.beta-status { flex: 1 1 220px; font-size: 14px; color: var(--muted); min-height: 21px; }
.beta-done { padding: 6px 0 6px 20px; border-left: 1px solid var(--accent); outline: none; }
.beta-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.beta-done__title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 320; line-height: 1.2; }
.beta-done__text { margin-top: 10px; color: var(--muted); }
/* Selects share the input's box; the native arrow is replaced by a CSS chevron (no image). */
button, input, select, textarea { font: inherit; }
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.beta-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; text-overflow: ellipsis; }
.beta-select option, .beta-select optgroup { background: #17100c; color: var(--ink); }
.beta-choice--small { min-height: 44px; padding: 6px 14px 6px 10px; font-size: 12px; }
/* The optional setup group: a native disclosure, so it opens with Enter/Space and nothing in it scrolls. */
.beta-setup { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.beta-setup__summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink); list-style: none; }
.beta-setup__summary::-webkit-details-marker { display: none; }
.beta-setup__summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--control-line); border-radius: 50%; color: var(--accent); font-size: 14px; line-height: 1; flex: 0 0 22px; }
.beta-setup[open] > .beta-setup__summary::before { content: '−'; }
.beta-setup__body { display: grid; gap: 24px; padding: 4px 0 28px; }
.beta-setup__why { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.setup-grid > [hidden], .report-module[hidden] { display: none; }
.setup-checks { margin: 0; padding: 0; border: 0; min-width: 0; }
@media (max-width: 560px) { .setup-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- beta report (#report, report-form.js): the privacy page's head, then the form ---- */
.report-intro { max-width: 560px; }
.report-section { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
.report-mount { max-width: 760px; min-width: 0; }
.report-group { margin: 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; display: grid; gap: 22px; }
.report-legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.report-legend + * { clear: both; }
.report-required { color: var(--accent); }
.report-optional { text-transform: none; letter-spacing: .02em; color: var(--dim); }
.report-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.report-form > .report-hint { margin: 0; }
.report-text { min-height: 120px; resize: vertical; line-height: 1.55; font-size: 16px; }
.report-another { font-size: 15px; }
.footer-report { display: inline-flex; align-items: center; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-report:hover { color: var(--ink); }
.footer-report[hidden] { display: none; }

/* ---- privacy note (#privacy): the Suite page's head, then one row per heading ---- */
.privacy-updated { margin-top: 20px; font: 12px var(--mono); letter-spacing: .06em; color: var(--dim); }
.privacy-section { padding: 36px 0 40px; align-items: baseline; }
.privacy-section h2.eyebrow { margin: 0; font-size: 12px; line-height: 1.6; letter-spacing: .11em; font-weight: 400; }
.privacy-section p { max-width: 640px; color: var(--muted); line-height: 1.7; }
.privacy-page .suite-page__head h1 { text-transform: none; letter-spacing: .02em; }

/* ---- footer ---- */
.site-footer { margin: 0 var(--page); padding: 30px 0 40px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-mark--footer { color: var(--muted); }
.site-mark--footer:hover { color: var(--ink); }
.footer-next { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-next:hover { color: var(--ink); }
.footer-next[hidden], .footer-privacy[hidden], .footer-report[hidden] { display: none; }
.site-footer__links { display: inline-flex; align-items: center; gap: 28px; }
.footer-privacy { display: inline-flex; align-items: center; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-privacy:hover { color: var(--ink); }

/* ---- dialog ---- */
.site-dialog { color: var(--ink); background: #151210; border: 1px solid #ffffff30; padding: 24px; max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100svh - 32px); width: 100%; overflow: auto; }
.site-dialog::backdrop { background: #050403e8; backdrop-filter: blur(6px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dialog-top h2 { font-size: 24px; letter-spacing: 0; overflow-wrap: anywhere; flex: 1; }
.dialog-close { border: 1px solid var(--control-line); padding: 10px 15px; min-height: 44px; white-space: nowrap; font-size: 14px; }
.zoom-button { border-bottom: 1px solid var(--line); padding: 10px 0; min-height: 44px; font-size: 14px; margin-left: auto; white-space: nowrap; }
.dialog-top .zoom-button[hidden] { display: none; }
.dialog-body > img { max-height: calc(100svh - 160px); width: auto; margin: auto; }
.dialog-body p { color: var(--muted); max-width: 560px; line-height: 1.7; }
.dialog-body p + p { margin-top: 14px; }
.image-dialog .dialog-body { overflow: auto; max-height: calc(100svh - 155px); }
.image-dialog.is-zoomed .dialog-body img { max-width: none; max-height: none; width: auto; margin: 0; }
.noscript { padding: 24px; color: var(--accent); }

/* ---- beta sign-up dialog (beta-modal.js). The dialog box covers the viewport and is the
   only scroll container; the panel inside flows like a page. Clicks on the box outside
   the panel are backdrop clicks. The page behind is locked while it is open. ---- */
html.has-modal { overflow: hidden; scrollbar-gutter: stable; }
.beta-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.beta-dialog::backdrop { background: #050403e8; backdrop-filter: blur(6px); }
.beta-panel { position: relative; width: min(760px, calc(100% - 48px)); margin: clamp(16px, 4vh, 56px) auto; padding: clamp(28px, 3.4vw, 44px); background: var(--ground); border: 1px solid #ffffff30; }
.beta-dialog[open] .beta-panel { animation: beta-panel-in 280ms var(--ease); }
@keyframes beta-panel-in { from { opacity: 0; transform: translateY(14px); } }
.beta-dialog .beta-section { display: block; max-width: none; margin: 0; padding: 0; border: 0; }
.beta-dialog .section-heading { padding-right: 52px; margin-bottom: 32px; }
.beta-dialog .beta-body { max-width: none; }
.beta-dialog__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--control-line); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); transition: color 160ms ease, border-color 160ms ease; }
.beta-dialog__close:hover { color: var(--ink); border-color: var(--ink); }
.beta-dialog__close:focus-visible { outline-offset: 3px; }

/* ---- responsive ---- */
@media (min-width: 1600px) { .hero h1 { font-size: 112px; } .hero-visual img { max-height: 600px; } }
@media (max-width: 1050px) {
  .hero { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.3fr); gap: 28px; }
  .hero h1 { font-size: 64px; }
  .section { grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 32px; }
  .comparison-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  :root { --header: 58px; --page: 22px; }
  .site-header { gap: 12px; }
  .site-mark__name { display: none; }
  .product-selector { gap: 18px; }
  .header-actions { gap: 14px; }
  .beta-button__long { display: none; }
  .beta-button__short { display: inline; }
  .beta-button__pill { min-height: 30px; padding: 0 10px 0 calc(10px + .12em); }
  /* Full screen: the panel is the page, the dialog box scrolls it. */
  .beta-dialog { background: var(--ground); }
  .beta-panel { width: 100%; min-height: 100%; margin: 0; border: 0; padding: 22px var(--page) 44px; }
  .beta-dialog__close { top: 12px; right: calc(var(--page) - 8px); }
  .beta-dialog .section-heading { margin-bottom: 28px; }
  .product-selector a { font-size: 12px; padding-inline: 0; }
  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; padding-top: 36px; padding-bottom: 48px; gap: 36px; align-content: start; }
  .hero-ring { right: -30vw; bottom: -10vh; width: 120vw; height: 40vh; }
  .hero-copy { align-self: start; padding-bottom: 0; }
  .hero h1 { font-size: clamp(56px, 14vw, 84px); margin: 16px 0 18px; }
  .hero-line { font-size: 26px; max-width: 420px; }
  .hero-proof { max-width: 100%; margin-top: 14px; }
  .hero-cue { margin-top: 26px; }
  .hero-cues { margin-top: 26px; column-gap: 24px; }
  .privacy-section { padding: 28px 0 32px; gap: 12px; }
  .hero-visual { transform: none; }
  .hero-visual img { max-height: 46vh; border-radius: 5px; }
  .hero-video { border-radius: 5px; }
  .hero-knot { width: min(100%, 46vh); }
  .hero-knot__halo { --knot-fade: 93%; }   /* the knot spans the viewport here: gone by the screen edge */
  .hero-visual figcaption { text-align: left; }
  .hero-visual--knot figcaption { text-align: center; }
  .enlarge-label { opacity: 1; font-size: 12px; bottom: 9px; right: 9px; padding: 7px 9px; }
  .section { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 48px; }
  .section-intro { margin-top: 16px; }
  .preview-note { margin-top: 18px; }
  .surface__hint { margin-left: 0; flex-basis: 100%; }
  .surface__control input { width: 100px; }
  .comparison-grid { grid-template-columns: 1fr; gap: 20px; }
  .mode-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .mode-button { padding: 12px 0; min-height: 70px; }
  .mode-button strong { font-size: 14px; }
  .stem-row { grid-template-columns: 60px 1fr; gap: 12px; }
  .stem-label { font-size: 12px; }
  .gallery-tabs { gap: 20px; }
  .site-footer { flex-wrap: wrap; gap: 8px 20px; }
  .site-footer__status { order: 3; flex-basis: 100%; }
  .site-footer__links { flex-wrap: wrap; gap: 0 22px; }
  .site-footer__links a { white-space: nowrap; }
  .dialog-top h2 { font-size: 22px; }
  .site-dialog { padding: 18px; }
  .player-foot { flex-wrap: wrap; }
  .comparison-explainer { min-height: 0; }
}
@media (max-width: 359px) {
  :root { --page: 16px; }
  .product-selector { gap: 14px; }
  .site-header, .header-actions { gap: 10px; }
  .hero-line { font-size: 24px; }
  .transport { gap: 9px; }
  .restart-button { width: 34px; flex-basis: 34px; }
  .mode-button .mode-index { display: none; }
}
@media (max-height: 660px) and (min-width: 761px) {
  .hero { padding-top: 34px; padding-bottom: 60px; }
  .hero-visual img { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .beta-dialog[open] .beta-panel { animation: none; }
}

/* Sinew recorded live (audio-ui.js): Sinew's own Morph orb (dist/vendor/sinew-morph-orb.js),
   replaying the clip's puck path. The orb styles itself inline with Sinew's tokens; they are
   set here on its host only, copied from the plugin's default theme (sinew-main @ c758a07,
   ui-web/src/sinew-theme.css :root), with the .tray and .val rules it relies on. The host is
   not a control: nothing in it takes a pointer. */
.sinew-orb-block { margin: 0 0 20px; }
.sinew-orb-block[hidden] { display: none; }
.sinew-orb {
  --paper: oklch(0.200 0.009 64); --paper-2: oklch(0.234 0.010 63); --well: oklch(0.182 0.009 61);
  --ink: oklch(0.935 0.012 76); --ink-soft: oklch(0.745 0.016 66); --ink-faint: oklch(0.600 0.016 60);
  --line: oklch(0.345 0.010 66); --line-soft: oklch(0.300 0.010 65);
  --signal: oklch(0.672 0.176 40); --chrome: oklch(0.720 0.105 52);
  --grid: oklch(0.315 0.010 66); --well-1: oklch(0.150 0.007 60); --knob-1: oklch(0.405 0.016 68);
  --tray: oklch(0.132 0.006 64);
  --tray-shadow: inset 0 5px 14px oklch(0 0 0 / 0.62), inset 0 1px 3px oklch(0 0 0 / 0.55), inset 0 -1px 0 oklch(1 0 0 / 0.045);
  --tray-lip: 0 1px 0 oklch(1 0 0 / 0.07);
  --r-tray: 12px;
  --font-ui: Hanken, system-ui, sans-serif; --font-mono: var(--mono);
  display: block; width: 100%; max-width: 540px; aspect-ratio: 540 / 470; margin: 0 auto;
  font-family: var(--font-ui); color: var(--ink); pointer-events: none; user-select: none; min-width: 0;
}
.sinew-orb .tray { background: var(--tray); border: 1px solid transparent; border-radius: var(--r-tray); box-shadow: var(--tray-shadow), var(--tray-lip); }
.sinew-orb .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sinew-orb-block .sinew-knot-label { margin-top: 10px; text-align: center; }

/* ---- Licence section (app.js SECTIONS.licence, licence-form.js) */
.licence-body { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.licence-card { padding: 28px 32px; border: 1px solid var(--line); }
.licence-price { font-size: clamp(26px, 2.6vw, 34px); font-weight: 320; line-height: 1.2; }
.licence-price__was { margin-left: 10px; font-size: .6em; color: var(--dim); }
.licence-status { font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.licence-buy { margin-top: 18px; }
.licence-buy[disabled], .licence-buy[aria-disabled=true] { opacity: .5; cursor: default; }
.licence-buy-note.has-error { color: var(--accent); }
.licence-note { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.licence-points { margin: 22px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.licence-points li + li { margin-top: 8px; }
.licence-legal { margin-top: 22px; font-size: 13px; color: var(--dim); }
.licence-resend { padding: 28px 32px; border: 1px solid var(--line); }
.licence-resend__title { font-size: clamp(20px, 2vw, 24px); font-weight: 320; line-height: 1.2; }
.licence-resend__text { margin-top: 10px; font-size: 14px; color: var(--muted); }
.licence-resend .beta-form { margin-top: 22px; gap: 20px; }
.licence-resend .beta-done { margin-top: 22px; }
.footer-legal { display: inline-flex; align-items: center; min-height: 44px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-legal:hover { color: var(--ink); }
@media (max-width: 820px) { .licence-body { grid-template-columns: minmax(0, 1fr); gap: 24px; } .licence-card, .licence-resend { padding: 22px 20px; } }