/* StarShaper — product page styles for xionia.audio/products/starshaper.
   The carbon look from the StarShaper prototype (near-black stage, charcoal hardware, recessed
   wells and amber LED light), followed by the layout classes for the production pages. Its text is in
   Urbanist, Xionia's own (xionia.css), as on the stars' pages, and its headings in Archivo, widened
   to answer the wide STARSHAPER logo. */

/* As in xionia.css, the ranges leave ™ (U+2122) to the system font's raised mark. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2?v=e3a28eade2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2?v=5717f37059") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- From the prototype ---------- */
/* Carbon (the default): a near-black stage, charcoal hardware, recessed wells and amber LED light. */
:root {
  --abyss: #121214; --abyss-rgb: 18, 18, 20;
  --deep: #0A0A0B;
  --trench: #1D1D20; --trench-rgb: 29, 29, 32;
  --ridge: #26262A; --ridge-rgb: 38, 38, 42;
  --band: #101012;
  --orb-hi: #161618;
  --glass: #ECECEE; --glass-rgb: 236, 236, 238;
  --soft: #CFCFD3;
  --mist: #A8A8AE; --mist-rgb: 168, 168, 174;
  --hint: #9E9EA4;
  --dim: #95959B;
  --placeholder: #7A7A80;
  --line: rgba(0, 0, 0, 0.55);
  --line-2: rgba(0, 0, 0, 0.72);
  --glow-a: rgba(206, 214, 230, 0.075); --glow-b: rgba(255, 255, 255, 0.02); --glow-c: rgba(150, 160, 182, 0.06);
  --fl-glow: rgba(214, 220, 234, 0.055);
  --signal-ink: #1A1206;
  --sel-rgb: 255, 184, 77;
  --copper: #E59A66; --copper-rgb: 229, 154, 102;
  --aqua: #ECD7AE; --aqua-rgb: 236, 215, 174;
  --violet: #BEC6D6; --violet-rgb: 190, 198, 214;
}
html { scroll-behavior: smooth; background: var(--abyss); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--abyss); color: var(--glass); font-family: var(--x-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: var(--glass); }
a:hover { color: var(--signal, #FFB84D); }
::selection { background: rgba(var(--sel-rgb), 0.32); color: #ffffff; }
.ss { --signal: #FFB84D; --signal-rgb: 255, 184, 77; }
:where(.ss) *, :where(.ss) *::before, :where(.ss) *::after { box-sizing: border-box; }
:where(.ss) :where(h1, h2, h3, p, ol, ul, figure, fieldset) { margin: 0; }
:where(.ss) :where(button, input) { font: inherit; color: inherit; }
:where(.ss) button { cursor: pointer; }
.ss :focus-visible { outline: 2px solid var(--signal); outline-offset: 0.1875rem; }
/* The page keeps the measure of the Xionia pages (.x-wrap in xionia.css) at every window size, so its
   text never grows with the window and its edges line up with the group footer's. */
.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: max(var(--x-gutter), env(safe-area-inset-left)) max(var(--x-gutter), env(safe-area-inset-right)); }
.sec { padding-block: clamp(2.75rem, 4.8vw, 4.25rem); scroll-margin-top: 4.5rem; }
/* StarShaper's headings, and its name in the header, are set in Archivo; everything else is Urbanist. */
:is(.display, .h2, .layer-name, .recipes-title, .dev-band-title, .share-strong, .nav-product) { font-family: "Archivo", var(--x-sans); }
.display { font-stretch: 116%; font-weight: 300; letter-spacing: -0.026em; line-height: 0.98; }
.h1line { display: block; }
.h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); font-stretch: 114%; font-weight: 340; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.h3 { font-size: clamp(1.25rem, 1.7vw, 1.4375rem); font-weight: 520; letter-spacing: -0.008em; line-height: 1.22; }
.lede { font-size: clamp(1.125rem, 1.45vw, 1.2812rem); line-height: 1.58; color: var(--mist); max-width: 33em; text-wrap: pretty; }
.body { color: var(--mist); text-wrap: pretty; }
.small { font-size: 0.9062rem; line-height: 1.55; color: var(--dim); }
.label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.004em; color: var(--mist); }
.num { font-variant-numeric: tabular-nums; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26.25rem, 100%), 1fr)); gap: 1.5rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
@media (min-width: 960px) {
  .sticky-col { position: sticky; top: 7rem; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.375rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--glass); font-size: 0.9688rem; font-weight: 560; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s, filter 0.2s; }
.btn:hover { border-color: rgba(var(--glass-rgb), 0.7); color: var(--glass); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { filter: brightness(1.12); border-color: var(--signal); color: var(--signal-ink); }
.textlink { color: var(--glass); font-weight: 560; text-decoration: underline; text-decoration-color: rgba(var(--glass-rgb), 0.35); text-underline-offset: 0.3125rem; }
.textlink:hover { color: var(--signal); text-decoration-color: currentColor; }

.nav { position: sticky; top: 0; z-index: 40; background: rgba(var(--abyss-rgb), 0.74); -webkit-backdrop-filter: saturate(140%) blur(0.875rem); backdrop-filter: saturate(140%) blur(0.875rem); border-bottom: 1px solid var(--line); }
.navlink { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.8125rem; border-radius: 999px; color: var(--mist); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.navlink:hover { color: var(--glass); background: rgba(var(--glass-rgb), 0.06); }
.menu-btn { display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--glass); font-size: 0.9375rem; font-weight: 520; }
.mobile-menu a { display: flex; align-items: center; min-height: 3.375rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--glass); font-size: 1.1875rem; }
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .menu-btn { display: inline-flex; }
}
.hero { position: relative; min-height: min(52rem, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; margin-top: calc(-4.5rem - 1px); padding-top: calc(4.5rem + 1px); }
@media (max-width: 700px) {
  .hero { min-height: 43.75rem; }
}
.hero-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0.45; will-change: opacity; background: radial-gradient(60% 80% at 72% 30%, var(--glow-a) 0%, var(--glow-b) 50%, rgba(var(--abyss-rgb), 0) 100%), radial-gradient(42% 62% at 14% 88%, var(--glow-c) 0%, rgba(var(--abyss-rgb), 0) 100%); }
.power { --lvl: 0; display: inline-flex; align-items: center; gap: 0.875rem; min-height: 3.75rem; min-width: 15.75rem; padding: 0.375rem 1.5rem 0.375rem 0.375rem; border-radius: 999px; border: 1px solid rgba(var(--signal-rgb), 0.5); background: rgba(var(--abyss-rgb), 0.4); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); color: var(--glass); font-size: 1rem; font-weight: 560; transition: border-color 0.2s, background-color 0.2s; }
.power:hover { border-color: var(--signal); background: rgba(var(--abyss-rgb), 0.6); }
.power-ring { width: 3rem; height: 3rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 calc(0.5rem + var(--lvl) * 2.875rem) calc(var(--lvl) * 0.625rem) rgba(var(--signal-rgb), 0.5); }
.power.is-on .power-ring { background: var(--glass); }
.power svg, .play svg { width: 1rem; height: 1rem; display: block; }

.play { width: 3rem; height: 3rem; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(var(--abyss-rgb), 0.45); display: inline-grid; place-items: center; color: var(--glass); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.play:hover { border-color: var(--glass); }
.play.is-on { background: var(--glass); border-color: var(--glass); color: var(--abyss); }

.console { background: linear-gradient(180deg, rgba(var(--ridge-rgb), 0.6), rgba(var(--trench-rgb), 0.92)); border: 1px solid var(--line); border-radius: 1.75rem; overflow: hidden; }
.toggle { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--mist); font-size: 0.9062rem; font-weight: 540; }
.toggle:hover { color: var(--glass); }
.toggle[aria-pressed="true"] { color: var(--glass); border-color: var(--signal); background: rgba(var(--signal-rgb), 0.12); }

.fader { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; --c: var(--signal); --c-rgb: var(--signal-rgb); --p: 50%; }
.fader::-webkit-slider-runnable-track { height: 0.25rem; border-radius: 0.25rem; background: linear-gradient(90deg, var(--c) 0 var(--p), rgba(var(--mist-rgb), 0.24) var(--p) 100%); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.375rem; height: 1.375rem; margin-top: -0.5625rem; border-radius: 50%; background: var(--abyss); border: 2px solid var(--c); box-shadow: 0 0 0 0.3125rem rgba(var(--abyss-rgb), 0.55); }
.fader::-moz-range-track { height: 0.25rem; border-radius: 0.25rem; background: rgba(var(--mist-rgb), 0.24); }
.fader::-moz-range-progress { height: 0.25rem; border-radius: 0.25rem; background: var(--c); }
.fader::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--abyss); border: 2px solid var(--c); }
.fader:focus-visible { outline: none; }
.fader:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.3125rem rgba(var(--signal-rgb), 0.5); }
.fader:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 0.3125rem rgba(var(--signal-rgb), 0.5); }


.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--mist); font-size: 0.9375rem; font-weight: 540; }
.chip:hover { color: var(--glass); }
.chip[aria-pressed="true"] { color: var(--abyss); background: var(--glass); border-color: var(--glass); }
.prompt-box { display: flex; gap: 1rem; align-items: flex-start; padding: 1.375rem 1.5rem; border-radius: 1.125rem; background: var(--deep); border: 1px solid var(--line-2); min-height: 7.25rem; }
.prompt-text { font-size: clamp(1.1875rem, 2vw, 1.625rem); line-height: 1.38; font-weight: 450; color: var(--glass); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 0.25rem; vertical-align: -0.16em; background: var(--signal); animation: ssblink 1s steps(1) infinite; }
@keyframes ssblink { 50% { opacity: 0; } }

.panel { border-radius: 1.625rem; border: 1px solid var(--line); background: var(--trench); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; }
.panel svg { width: 100%; height: auto; display: block; margin-bottom: 0.625rem; }

.steps { list-style: none; padding: 0; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.125rem; padding: 1.375rem 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 0.875rem; font-weight: 600; color: var(--glass); }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10.625rem, 100%), 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.readout div { background: var(--trench); padding: 0.875rem 1.25rem; display: flex; flex-direction: column; gap: 2px; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; padding: 1.125rem 0; cursor: pointer; font-size: 1.1562rem; font-weight: 540; color: var(--glass); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-right: 1.5px solid var(--mist); border-bottom: 1.5px solid var(--mist); transform: translateY(-0.1875rem) rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover { color: var(--signal); }
.faq details p { padding: 0 0 1.5rem; color: var(--mist); max-width: 40em; }

.field { width: 100%; min-height: 3.375rem; padding: 0 1.125rem; border-radius: 0.875rem; border: 1px solid var(--line-2); background: var(--deep); color: var(--glass); font-size: 1.0312rem; }
.field::placeholder { color: var(--placeholder); }
.field:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 0.1875rem rgba(var(--signal-rgb), 0.25); }
.field[aria-invalid="true"] { border-color: var(--copper); }
/* Safari paints a field it autofills pale yellow with black text, whatever the page's colours (WebKit
   bug 250896), so an inset shadow paints the field's ground back over it, under its own edge and
   shading, the yellow stays out from under its border, and the text and caret keep their colour. */
.field:-webkit-autofill { -webkit-text-fill-color: var(--glass); caret-color: var(--glass); background-clip: padding-box; box-shadow: inset 0 0 0 100vmax var(--deep); }
.field:-webkit-autofill:focus { box-shadow: 0 0 0 0.1875rem rgba(var(--signal-rgb), 0.25), inset 0 0 0 100vmax var(--deep); }
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio > span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mist); font-size: 0.9375rem; font-weight: 520; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.chip-radio:hover > span { color: var(--glass); }
.chip-radio input:checked + span { background: var(--glass); color: var(--abyss); border-color: var(--glass); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 0.1875rem; }
.check { -webkit-appearance: none; appearance: none; width: 1.375rem; height: 1.375rem; margin: 1px 0 0; flex: none; border-radius: 0.4375rem; border: 1.5px solid rgba(var(--mist-rgb), 0.55); background: var(--deep); display: inline-grid; place-items: center; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.check::after { content: ""; width: 0.375rem; height: 0.6875rem; border: solid var(--signal-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
.check:checked { background: var(--signal); border-color: var(--signal); }
.check:checked::after { opacity: 1; }

.np { position: fixed; left: 50%; bottom: 1.125rem; bottom: calc(1.125rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 0.75rem; padding: 0.4375rem 0.4375rem 0.4375rem 1.125rem; border-radius: 999px; background: rgba(var(--trench-rgb), 0.92); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); border: 1px solid var(--line-2); box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.4); max-width: calc(100% - 1.5rem); }
.eq { display: inline-flex; align-items: flex-end; gap: 0.1875rem; height: 0.875rem; flex: none; }
.eq i { width: 0.1875rem; height: 100%; background: var(--signal); border-radius: 2px; transform-origin: bottom; transform: scaleY(0.2); transition: transform 0.09s linear; }
.led { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--signal); }
.plate, .sheet { border: 1px solid var(--line); background: var(--trench); }
.hero-logo { display: block; height: clamp(4rem, 7.2vw, 6.25rem); width: auto; max-width: 100%; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.plate-ok { border-color: rgba(var(--signal-rgb), 0.45); }
.ro-v { font-size: 0.9688rem; color: var(--glass); font-weight: 520; }
/* ---------- Section compositions ---------- */
.sec-head { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
.sec-head .lede { max-width: 36em; }
.sec-head.is-center { align-items: center; text-align: center; margin-inline: auto; }
.sec-head.is-center .lede { max-width: 40em; text-wrap: balance; }
.closer { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: clamp(1.75rem, 3.1vw, 2.75rem); max-width: 18em; }
/* Questions in two columns. */
@media (min-width: 760px) {
  .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .faq-grid details:nth-child(2) { border-top: 1px solid var(--line); }
}
.power-cap { display: contents; }
.power .power-dots { display: none; }
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rows li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }

/* ---------- Neumorphic carbon, the default look: raised plates and keys, recessed wells, amber LEDs ---------- */
.ss {
  --plate: linear-gradient(180deg, #252528 0%, #1C1C1F 100%);
  --key: linear-gradient(180deg, #2F2F33 0%, #222225 100%);
  --key-hover: linear-gradient(180deg, #36363A 0%, #27272A 100%);
  --key-in: linear-gradient(180deg, #161618 0%, #1D1D20 100%);
  --well: linear-gradient(180deg, #09090A 0%, #0F0F11 100%);
  --flat: rgba(255, 255, 255, 0.022);
  --hair: rgba(255, 255, 255, 0.075);
  --knob: radial-gradient(circle at 50% 28%, #3E3E42 0%, #2B2B2E 42%, #1C1C1E 100%);
  --raise: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.7), 0 1.25rem 2.5rem -1rem rgba(0, 0, 0, 0.9);
  --raise-sm: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.7), 0 0.5rem 1rem -0.375rem rgba(0, 0, 0, 0.85);
  --press: inset 0 0.125rem 0.375rem rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.05);
  --inset: inset 0 0.25rem 0.75rem rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06);
  --inset-sm: inset 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.055);
  /* A form field's edge, inside its well: at least 3:1 against the sheet around it (WCAG 1.4.11). */
  --field-edge: inset 0 0 0 1px rgba(226, 228, 232, 0.44);
  --groove: rgba(0, 0, 0, 0.6);
  --groove-hi: rgba(255, 255, 255, 0.05);
  --led: radial-gradient(circle at 50% 42%, #FFF8E6 0 16%, var(--signal) 54%, rgba(var(--signal-rgb), 0.72) 100%);
  --led-glow: 0 0 0.25rem rgba(var(--signal-rgb), 0.95), 0 0 0.75rem rgba(var(--signal-rgb), 0.5), 0 0 1.5rem rgba(var(--signal-rgb), 0.2);
  --led-off: radial-gradient(circle at 50% 35%, #3B352B 0%, #191713 78%);
  --led-off-sh: inset 0 1px 0.125rem rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Matte grain and a soft overhead light across the whole page. */
.ss::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url("grain.png") 0 0 / 128px 128px repeat, radial-gradient(120% 75% at 50% -12%, rgba(236, 240, 248, 0.035) 0%, rgba(236, 240, 248, 0) 62%), radial-gradient(160% 120% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.3) 100%); }

.ss .label { font-size: 0.75rem; font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; }
.ss .display .h1line { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, #FCFCFD 0%, #E9E9EC 42%, #A9A9B0 100%); background-size: 100% 1lh; background-repeat: repeat-y; -webkit-background-clip: text; background-clip: text; }
.ss .led { background: var(--led); box-shadow: var(--led-glow); }
.ss .hero-logo { filter: drop-shadow(0 0.375rem 1.25rem rgba(0, 0, 0, 0.55)); }

.ss :is(.btn, .menu-btn, .toggle, .chip, .chip-radio > span) { border: 0; background: var(--key); box-shadow: var(--raise-sm); color: var(--soft); transition: box-shadow 0.18s, color 0.18s, transform 0.12s; }
.ss :is(.btn, .menu-btn, .toggle, .chip):hover, .ss .chip-radio:hover > span { background: var(--key-hover); color: var(--glass); }
.ss :is(.btn, .menu-btn, .toggle, .chip):active, .ss .chip-radio:active > span { box-shadow: var(--press); transform: translateY(1px); }
.ss .btn-primary, .ss .btn-primary:hover { color: var(--glass); filter: none; }
.ss .btn-primary::before { content: ""; width: 0.4375rem; height: 0.4375rem; flex: none; border-radius: 50%; background: var(--led); box-shadow: var(--led-glow); transition: box-shadow 0.2s; }
.ss .btn-primary:hover::before { box-shadow: 0 0 0.3125rem rgba(var(--signal-rgb), 1), 0 0 1rem rgba(var(--signal-rgb), 0.65), 0 0 2rem rgba(var(--signal-rgb), 0.3); }
.ss .menu-btn[aria-expanded="true"] { background: var(--key-in); box-shadow: var(--press); color: var(--glass); }
.ss .toggle::before { content: ""; width: 0.375rem; height: 0.375rem; flex: none; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); transition: box-shadow 0.2s; }
.ss :is(.toggle, .chip)[aria-pressed="true"], .ss .chip-radio input:checked + span { background: var(--key-in); box-shadow: var(--press); color: var(--glass); }
.ss .toggle[aria-pressed="true"]::before { background: var(--led); box-shadow: var(--led-glow); }

.ss .nav { background: rgba(var(--abyss-rgb), 0.8); border-bottom-color: var(--groove); box-shadow: 0 1px 0 var(--groove-hi), 0 0.875rem 2rem -1rem rgba(0, 0, 0, 0.55); }
.ss .navlink:hover { background: rgba(0, 0, 0, 0.16); box-shadow: inset 0.0625rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.55), 0 1px 0 var(--groove-hi); }
.ss .mobile-menu a { border-bottom-color: var(--groove); box-shadow: 0 1px 0 var(--groove-hi); }
/* The page you're on: its key in the header pressed in, and its line in the menu lit */
.ss .navlink[aria-current="page"] { color: var(--glass); background: rgba(0, 0, 0, 0.16); box-shadow: inset 0.0625rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.55), 0 1px 0 var(--groove-hi); }
.ss .mobile-menu a[aria-current="page"] { color: var(--signal); }

/* The hero control: a machined knob inside a ring of LEDs that meters the music. */
.ss .power { gap: 1.25rem; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 1.0625rem; }
.ss .power:hover, .ss .power.is-on { background: none; box-shadow: none; }
.ss .power-ring, .ss .power.is-on .power-ring { position: relative; width: 8.5rem; height: 8.5rem; background: none; box-shadow: none; color: var(--signal); }
.ss .power-dots { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss .power-dots .h { fill: #070708; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.45; }
.ss .power-dots .l { fill: var(--signal); opacity: clamp(0, calc(var(--lvl, 0) * 28 - var(--i)), 1); }
.ss .power-dots .g { fill: var(--signal); opacity: calc(clamp(0, calc(var(--lvl, 0) * 28 - var(--i)), 1) * 0.28); }
.ss .power-dots .l.s0 { opacity: 1; }
.ss .power-dots .g.s0 { opacity: 0.3; }
.ss .power-cap { display: grid; place-items: center; position: absolute; inset: 1.3125rem; border-radius: 50%; background: radial-gradient(circle at 50% 22%, #48484D 0%, #2D2D31 36%, #1A1A1D 72%, #121214 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.55), 0 0.5rem 1rem rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.65); transition: transform 0.12s; }
.ss .power-cap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 1.5deg, rgba(0, 0, 0, 0.22) 1.5deg 3deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.4375rem), #000 calc(100% - 0.40625rem)); mask: radial-gradient(farthest-side, transparent calc(100% - 0.4375rem), #000 calc(100% - 0.40625rem)); }
.ss .power-cap::after { content: ""; position: absolute; inset: 0.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #3B3B40 0%, #232327 62%, #1B1B1E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0.125rem rgba(0, 0, 0, 0.7); }
.ss .power:hover .power-cap::after { background: radial-gradient(circle at 50% 28%, #44444A 0%, #28282C 62%, #1E1E21 100%); }
.ss .power:active .power-cap { transform: scale(0.97); }
.ss .power.is-on .power-cap::after { background: radial-gradient(circle at 50% 70%, #2A2A2E 0%, #1A1A1D 70%); box-shadow: inset 0 0.125rem 0.375rem rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06); }
.ss .power-cap svg { position: relative; z-index: 1; width: 1.375rem; height: 1.375rem; filter: drop-shadow(0 0 0.375rem rgba(var(--signal-rgb), 0.9)); }
/* Keyboard focus lights a ring round the knob, not an outline round the whole control. The outline
   stays, transparent, because forced-colours modes drop shadows but draw outlines. */
.ss .power:focus-visible { outline-color: transparent; }
.ss .power:focus-visible .power-cap { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.55), 0 0.5rem 1rem rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.65), 0 0 0 0.1875rem rgba(var(--signal-rgb), 0.85), 0 0 1rem rgba(var(--signal-rgb), 0.35); }
@media (max-width: 700px) {
  .ss .power-ring, .ss .power.is-on .power-ring { width: 6.5rem; height: 6.5rem; }
  .ss .power-cap { inset: 1rem; }
}
.ss .play.is-on svg { filter: drop-shadow(0 0 0.25rem rgba(var(--signal-rgb), 0.85)); }
.ss .play { border: 0; background: var(--knob); box-shadow: var(--raise-sm); color: var(--soft); }
.ss .play:hover { color: var(--glass); }
.ss .play.is-on { background: radial-gradient(circle at 50% 70%, #2B2B2E 0%, #1B1B1D 75%); box-shadow: var(--press), 0 0 0 0.125rem rgba(var(--signal-rgb), 0.55), 0 0 1.125rem rgba(var(--signal-rgb), 0.28); color: var(--signal); }

/* Faders: a recessed slot with a lit groove and a knob carrying an LED. */
.ss .fader::-webkit-slider-runnable-track { height: 0.875rem; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--c-rgb), 0.95) 0 var(--p), rgba(0, 0, 0, 0) 0) 0.5rem 50% / calc(100% - 1rem) 0.125rem no-repeat, linear-gradient(90deg, rgba(var(--c-rgb), 0.2) 0 var(--p), rgba(0, 0, 0, 0) 0) 0.5rem 50% / calc(100% - 1rem) 0.5rem no-repeat, linear-gradient(#050506, #050506) 0.5rem 50% / calc(100% - 1rem) 0.1875rem no-repeat, var(--well); box-shadow: var(--inset-sm); }
.ss .fader::-webkit-slider-thumb { width: 1.75rem; height: 1.75rem; margin-top: -0.4375rem; border: 0; background: radial-gradient(circle, #FFF8E8 0 0.07rem, rgb(var(--c-rgb)) 0.14rem, rgba(var(--c-rgb), 0.5) 0.2rem, rgba(var(--c-rgb), 0) 0.5rem), var(--knob); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.45), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.6), 0 1px 0.125rem rgba(0, 0, 0, 0.7); }
.ss .fader::-moz-range-track { height: 0.875rem; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--c-rgb), 0.95) 0 var(--p), rgba(0, 0, 0, 0) 0) 0.5rem 50% / calc(100% - 1rem) 0.125rem no-repeat, linear-gradient(90deg, rgba(var(--c-rgb), 0.2) 0 var(--p), rgba(0, 0, 0, 0) 0) 0.5rem 50% / calc(100% - 1rem) 0.5rem no-repeat, linear-gradient(#050506, #050506) 0.5rem 50% / calc(100% - 1rem) 0.1875rem no-repeat, var(--well); box-shadow: var(--inset-sm); }
.ss .fader::-moz-range-progress { background: transparent; }
.ss .fader::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: radial-gradient(circle, #FFF8E8 0 0.07rem, rgb(var(--c-rgb)) 0.14rem, rgba(var(--c-rgb), 0.5) 0.2rem, rgba(var(--c-rgb), 0) 0.5rem), var(--knob); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.45), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.6), 0 1px 0.125rem rgba(0, 0, 0, 0.7); }
.ss .fader:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.6), 0 0 0 0.1875rem rgba(var(--c-rgb), 0.6); }
.ss .fader:focus-visible::-moz-range-thumb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.6), 0 0 0 0.1875rem rgba(var(--c-rgb), 0.6); }

.ss :is(.groove-t, .rows) { border-top-color: var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi); }
.ss .groove-b { box-shadow: 0 1px 0 var(--groove-hi); }
.ss .rows li { border-bottom-color: var(--groove); box-shadow: 0 1px 0 var(--groove-hi); }

.ss :is(.console, .plate) { border: 0; border-radius: 1rem !important; background: var(--plate); box-shadow: var(--raise); }
.ss :is(.sheet, .panel) { border: 1px solid var(--hair); border-radius: 1rem !important; background: var(--flat); box-shadow: none; }
@media (min-width: 760px) {
  .ss .faq-grid details:nth-child(2) { border-top-color: var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi), 0 1px 0 var(--groove-hi); }
}
.ss .plate-ok { border-color: rgba(var(--signal-rgb), 0.4); }
.ss .prompt-box { border: 0; border-radius: 0.625rem; background: var(--well); box-shadow: var(--inset); }
.ss .caret { box-shadow: 0 0 0.375rem rgba(var(--signal-rgb), 0.85); }
.ss .steps li { border-top-color: var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi); }
.ss .steps li:last-child { border-bottom-color: var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi), 0 1px 0 var(--groove-hi); }
.ss .step-n { border: 0; background: var(--knob); box-shadow: var(--raise-sm); color: var(--soft); }
.ss .readout { margin: 0.25rem 1.125rem 1.125rem; border: 0; border-radius: 0.625rem; background: var(--well); box-shadow: var(--inset-sm); gap: 0; overflow: hidden; }
.ss .readout div { background: transparent; }
.ss .ro-v { color: var(--signal); text-shadow: 0 0 0.625rem rgba(var(--signal-rgb), 0.45); }
.ss .faq details { border-bottom-color: var(--groove); box-shadow: 0 1px 0 var(--groove-hi); }
.ss .faq details:first-child { border-top-color: var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi), 0 1px 0 var(--groove-hi); }
.ss .field { border: 0; border-radius: 0.625rem; background: var(--well); box-shadow: var(--field-edge), var(--inset-sm); }
.ss .field:focus { box-shadow: var(--inset-sm), 0 0 0 0.125rem rgba(var(--signal-rgb), 0.6), 0 0 1rem rgba(var(--signal-rgb), 0.22); }
.ss .field[aria-invalid="true"] { box-shadow: var(--inset-sm), 0 0 0 0.125rem rgba(var(--copper-rgb), 0.7); }
/* An autofilled field (see .field): its ground is #0C0C0E, the middle of the well's gradient. */
.ss .field:-webkit-autofill { box-shadow: var(--field-edge), var(--inset-sm), inset 0 0 0 100vmax #0C0C0E; }
.ss .field:-webkit-autofill:focus { box-shadow: var(--inset-sm), 0 0 0 0.125rem rgba(var(--signal-rgb), 0.6), 0 0 1rem rgba(var(--signal-rgb), 0.22), inset 0 0 0 100vmax #0C0C0E; }
.ss .field[aria-invalid="true"]:-webkit-autofill { box-shadow: var(--inset-sm), 0 0 0 0.125rem rgba(var(--copper-rgb), 0.7), inset 0 0 0 100vmax #0C0C0E; }
.ss .check { border: 0; background: var(--well); box-shadow: var(--field-edge), var(--inset-sm); }
.ss .check:checked { background: var(--well); box-shadow: var(--inset-sm), 0 0 0 1px rgba(var(--signal-rgb), 0.5), 0 0 0.625rem rgba(var(--signal-rgb), 0.2); }
.ss .check::after { border-color: var(--signal); filter: drop-shadow(0 0 0.1875rem rgba(var(--signal-rgb), 0.9)); }
.ss .np { border: 0; background: linear-gradient(180deg, rgba(50, 50, 53, 0.95) 0%, rgba(37, 37, 40, 0.95) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.875rem 2.5rem rgba(0, 0, 0, 0.6), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); }
.ss .eq i { box-shadow: 0 0 0.375rem rgba(var(--signal-rgb), 0.7); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .eq i { transition: none; }
  .cue.is-queued::before, .gc-secs li.is-next::before { animation: none; }
}

/* ---------- Production page layout ---------- */
/* These replace the prototype's inline styles, so the page runs under a strict Content Security Policy. */
.ss-body { background: var(--abyss); }
.ss { position: relative; min-height: 100%; background: var(--abyss); color: var(--glass); overflow-x: clip; font-family: var(--x-sans); }
:where(.ss) :where(dl, dd, blockquote) { margin: 0; }
.ss .x-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.groove-t { border-top: 1px solid var(--line); }
.groove-b { border-bottom: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 1.375rem; }
.demo-note { color: var(--hint); }
.demo-note::before { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-right: 0.5rem; vertical-align: 0.12em; border-radius: 50%; background: var(--led); box-shadow: var(--led-glow); }
.ss .i-stop { display: none; }
.ss .is-on .i-stop { display: block; }
.ss .is-on .i-play { display: none; }

/* Header: the Xionia Audio lockup, then the product. The lockup is the size .x-logo draws it in
   xionia.css at every width, so it doesn't change between StarShaper's pages and the rest of the site. */
.nav-bar { display: flex; align-items: center; gap: 1rem; height: 4.5rem; }
.nav-brand { display: flex; align-items: center; flex: none; }
.nav-brand img { display: block; height: 2.25rem; width: auto; }
.nav-sep { width: 1px; height: 1.5rem; background: rgba(var(--glass-rgb), 0.18); flex: none; }
.nav-product { margin-right: auto; color: var(--glass); font-size: 1rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.nav-product:hover { color: var(--signal); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-cta { min-height: 2.625rem; padding: 0 1.125rem; font-size: 0.9062rem; }
.menu-btn svg { width: 1.125rem; height: 1.125rem; }
.mobile-menu { padding-bottom: 1.125rem; }
@media (max-width: 560px) {
  .nav-sep, .nav-product { display: none; }
  .nav-brand { margin-right: auto; }
}
@media (max-width: 480px) {
  .nav-brand img { height: 1.875rem; }
}
/* Five product links need more room than the prototype's three, so the menu takes over sooner. */
@media (max-width: 1080px) {
  .nav-links { display: none !important; }
  .menu-btn { display: inline-flex; }
}
/* Phones keep Join First Light, as wider screens do: the menu button shows its icon alone (its name
   stays for screen readers) and the bar draws closer, in the same steps as xionia.css, so the lockup
   stays the size the rest of the site draws it. */
@media (max-width: 480px) {
  .nav-bar { gap: 0.5rem; }
  .nav-brand { padding-right: 0.5rem; }
  .nav-cta { padding: 0 0.75rem; font-size: 0.8125rem; }
  .menu-btn { flex: none; width: 2.75rem; padding: 0; justify-content: center; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 400px) {
  .nav-brand img { height: 1.625rem; }
  .nav-cta { padding: 0 0.625rem; font-size: 0.75rem; }
}
@media (max-width: 340px) {
  .nav-cta { display: none !important; }
}

/* Hero */
/* The waves start once the page has painted (starshaper.js), and fade in briefly with their first frame (.is-drawn, from the hero's view). */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; opacity: 0; transition: opacity 0.3s ease-out; }
.hero-canvas.is-drawn { opacity: 1; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; background: linear-gradient(180deg, rgba(var(--abyss-rgb), 0) 0%, rgba(var(--abyss-rgb), 0.82) 70%, var(--abyss) 100%); }
.hero-inner { padding-top: clamp(3.5rem, 7vw, 6.25rem); padding-bottom: clamp(1.75rem, 4vw, 3.5rem); }
.hero-kicker { display: flex; align-items: center; gap: 0.625rem; margin-bottom: clamp(1.125rem, 2vw, 1.5rem); color: var(--mist); }
/* The lockup is long (about 8.3:1), so it is sized by width and keeps its shape on narrow screens. */
.hero-logo { width: min(100%, 35rem); height: auto; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero-title { font-size: clamp(2.5rem, 5.6vw, 5.375rem); margin-bottom: 2.25rem; }
/* The developers page's kicker as its heading's first line, with the line height it had above it
   (StarShaper's logo needs nothing: it's a block of its own). */
.hero-title > .hero-kicker { line-height: 1.6; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.25rem 4rem; }
/* The product hero: the intro, the play column, then the quote and the platforms. On wider screens the
   column stands to the right of all the text, starting level with it (the top of its LED ring meets
   the capitals of the text's first line), and the text narrows before the column moves below it, so
   the two stay side by side on laptop screens. The column keeps one width, so a status line can't
   widen it. On phones and tablets it follows the intro, before the quote. */
.hero-row--top { display: grid; grid-template-columns: minmax(0, 34rem) 22rem; grid-template-rows: auto 1fr; grid-template-areas: "intro actions" "more actions"; justify-content: space-between; align-items: start; gap: 0.875rem 4rem; }
.hero-row--top .hero-intro { grid-area: intro; }
.hero-row--top .hero-actions { grid-area: actions; margin-top: 0.5rem; }
.hero-row--top .hero-more { grid-area: more; }
@media (max-width: 900px) {
  .hero-row--top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "actions" "more"; gap: 0; }
  .hero-row--top .hero-actions { margin-top: 2rem; }
}
.hero-copy { display: flex; flex-direction: column; gap: 0.875rem; max-width: 34rem; }
.hero-lede { color: var(--soft); max-width: 29em; }
.hero-body { max-width: 31em; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.hero-join { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; max-width: 22rem; margin-top: 0.25rem; }
.hero-join .btn { margin-top: 0.5rem; }
.hero-invite { color: var(--glass); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.hero-hint { max-width: 30em; min-height: 2.875rem; color: var(--hint); }
.fader-field { display: flex; flex-direction: column; }
.fader-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.fader-head .num { color: var(--glass); }
.hero-sub { min-height: 38rem; }
.dev-title { max-width: 14em; }
.hero-sub .hero-lede { max-width: 32em; }
/* The platforms and formats in development, under the hero's quote: "Coming soon to" and the platforms, then the formats on a row of their own. */
.hero-copy .platforms { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 0.625rem; }
.plat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.plat-soon { color: var(--soft); font-size: 0.875rem; font-weight: 560; }
/* The founder's quote after the hero's intro, on an amber rule. */
.hero-quote { margin: 1rem 0 0; padding-left: 1.125rem; border-left: 2px solid rgba(var(--signal-rgb), 0.65); max-width: 31em; }
.hero-quote p { color: var(--glass); font-size: 1.0625rem; line-height: 1.5; }
.hero-quote figcaption { margin-top: 0.625rem; color: var(--hint); font-size: 0.8125rem; }
.hero-copy .platforms .fmt-list { padding-left: 0; border-left: 0; box-shadow: none; }
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; }
.plat-list, .fmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.platforms .fmt-list { padding-left: 0.875rem; border-left: 1px solid var(--groove); box-shadow: inset 1px 0 0 var(--groove-hi); }
.plat { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.125rem; padding: 0 0.875rem 0 0.75rem; border-radius: 999px; border: 1px solid var(--hair); background: rgba(var(--abyss-rgb), 0.55); color: var(--glass); font-size: 0.875rem; font-weight: 560; }
.plat-logo { width: 0.9375rem; height: 0.9375rem; flex: none; }
.fmt { display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 0.625rem; border-radius: 0.375rem; background: var(--well); box-shadow: var(--inset-sm); color: var(--soft); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.08em; }
/* On a phone the formats take a row of their own, so they lose the divider. */
@media (max-width: 560px) {
  .platforms .fmt-list { padding-left: 0; border-left: 0; box-shadow: none; }
  .platforms .fmt { padding: 0 0.5rem; }
}

/* Sections */
.sec-first { padding-top: clamp(3rem, 5.6vw, 4.75rem); }
.split-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
/* What StarShaper adds: two levels of creative scope, as one table on a raised plate, the
   StarShaper column lit faintly. On a phone each row's title takes the full width, with its two
   answers side by side beneath it (the table's roles are explicit, so it stays a table to assistive
   technology when its rows become grids). */
.scope-wrap { margin-top: clamp(2.5rem, 4.6vw, 3.75rem); }
.scope-plate { margin-top: 1.25rem; padding: 0.375rem clamp(0.5rem, 2vw, 1.5rem) 0.5rem; }
.scope { width: 100%; border-collapse: collapse; }
.scope :is(th, td) { padding: 0.875rem 1rem; text-align: left; vertical-align: top; font-weight: inherit; border-bottom: 1px solid var(--groove); }
.scope tbody tr:last-child > * { border-bottom: 0; }
.scope :is(th, td):last-child { background: rgba(var(--signal-rgb), 0.035); }
.scope thead :is(th, td) { padding-top: 1.25rem; padding-bottom: 1.125rem; vertical-align: bottom; }
.scope thead .label { display: block; }
.scope thead th:last-child .label { color: var(--signal); }
.scope-line { display: block; margin-top: 0.5rem; color: var(--glass); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 460; line-height: 1.3; text-wrap: balance; }
.scope tbody th { width: 40%; color: var(--glass); font-weight: 520; }
.scope td { width: 30%; color: var(--mist); }
.scope-yes { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--glass); }
.scope-led { width: 0.4375rem; height: 0.4375rem; flex: none; border-radius: 50%; background: var(--led); box-shadow: var(--led-glow); }
.scope-no { color: var(--placeholder); }
@media (max-width: 640px) {
  .scope, .scope :is(thead, tbody, th, td) { display: block; }
  .scope tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope thead td { display: none; }
  .scope :is(th, td) { width: auto; padding: 0.625rem 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
  .scope thead th { padding-top: 1rem; }
  .scope tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0.125rem; border-bottom: 0; }
  .scope tbody td { padding-top: 0.375rem; }
  .scope-line { font-size: 1rem; }
}
/* StarShaper's three capabilities. */
.layers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); gap: 1rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.layer { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.625rem 1.625rem 1.875rem; }
.ss .layer-q { color: var(--signal); }
.layer-name { font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-stretch: 116%; font-weight: 380; line-height: 1.1; }
.layer-more { margin-top: auto; padding-top: 0.5rem; }
/* The summaries of StarShaper's pages of its own (DETAILS in starshaper.mjs), on the capabilities'
   plates: on the product page two by two on wider screens, and at the end of each of those pages the
   other three in a row. Each opens on a still of its page's diagram, a picture drawn by the diagram's
   own code (DIAGRAMS in tools/og/card.html) that fills a well, and the whole plate opens the page. */
.glimpses { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .glimpses--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .glimpses--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.glimpse { position: relative; }
.glimpse-still { position: relative; margin: -0.5rem -0.5rem 0.625rem; border-radius: 0.75rem; overflow: hidden; background: var(--well); box-shadow: var(--inset-sm); }
.glimpse-still::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--inset-sm); pointer-events: none; }
/* At rest the stills are in silver, so the four diagrams side by side read as one calm set (as the
   hero's waves stay silver until the music brings in the stars' colours). A plate that's hovered or
   focused lights its edge, lifts and brings its diagram's colours in; its page shows them in full.
   Hover isn't gated on (hover: hover): Chromium browsers on touchscreen PCs, such as a Surface, report
   no hover even with a touchpad or mouse, and a tap opens the page anyway. */
.glimpse-still img { display: block; width: 100%; height: auto; filter: grayscale(1); transition: filter 0.45s ease; }
.glimpse-link::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
.ss .glimpse { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.ss .glimpse:hover { box-shadow: var(--raise), 0 0 0 1px rgba(var(--signal-rgb), 0.5), 0 0 2rem -0.25rem rgba(var(--signal-rgb), 0.22); transform: translateY(-0.125rem); }
.glimpse:hover .glimpse-link { color: var(--signal); text-decoration-color: currentColor; }
.glimpse:hover .glimpse-still img { filter: none; }
.ss .glimpse:has(.glimpse-link:focus-visible) { box-shadow: var(--raise), 0 0 0 2px var(--signal); }
.glimpse:has(.glimpse-link:focus-visible) .glimpse-still img { filter: none; }
@media (prefers-reduced-motion: reduce) { .ss .glimpse:hover { transform: none; } }
.explore-head { align-items: center; }
.explore-head + .glimpses { margin-top: 1.25rem; }
/* A page of its own: its breadcrumb, where its section's label was */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.625em; list-style: none; padding: 0; }
.is-center .crumbs ol { justify-content: center; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.625em; color: var(--dim); }
.crumbs a { color: var(--mist); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs [aria-current] { color: var(--glass); }
/* Stellar Awakening's place in its section, and the line that closes it. */
.path-wrap { margin-top: clamp(2.5rem, 4.6vw, 3.75rem); }
.path-closer { margin-top: clamp(1.75rem, 3.2vw, 2.75rem); }
/* The living musical system: five stars and the relationships between them, drawn beside their list.
   The relationship being drawn lights its LED; one the visitor picks stays pressed. */
.sys-wrap { margin-top: clamp(2.75rem, 4.6vw, 4rem); }
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "well head" "well body"; gap: 1.5rem clamp(2.5rem, 6vw, 6rem); }
.sys-head { grid-area: head; align-self: end; }
.sys-body { grid-area: body; }
.sys-well { grid-area: well; position: relative; min-height: 30rem; border-radius: 1rem; overflow: hidden; background: radial-gradient(110% 85% at 50% 50%, #1C1C1E 0%, #0C0C0D 78%); }
/* On narrower screens the heading comes first, then the drawing, then the relationships it draws. */
@media (max-width: 900px) { .sys-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "well" "body"; } }
.sys-well::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--inset); pointer-events: none; z-index: 1; }
.sys-well canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sys-cap { position: absolute; left: 1.5rem; top: 1.25rem; z-index: 2; color: var(--hint); }
.sys-list { list-style: none; padding: 0; margin: 0.25rem 0; display: flex; flex-direction: column; gap: 0.375rem; }
.sys-rel { display: grid; grid-template-columns: 0.4375rem minmax(0, 1fr); gap: 0.875rem; align-items: start; width: 100%; padding: 0.75rem 1rem; border: 0; border-radius: 0.75rem; background: transparent; color: var(--mist); text-align: left; font-size: 1rem; line-height: 1.5; transition: background-color 0.2s, color 0.3s, box-shadow 0.2s; }
.sys-rel:hover { color: var(--glass); background: rgba(255, 255, 255, 0.025); }
.sys-led { width: 0.4375rem; height: 0.4375rem; margin-top: 0.5625rem; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); }
.sys-rel.is-now { color: var(--glass); }
.sys-rel.is-now .sys-led { background: var(--led); box-shadow: var(--led-glow); }
.sys-rel[aria-pressed="true"] { color: var(--glass); background: var(--key-in); box-shadow: var(--press); }
@media (max-width: 760px) { .sys-well { min-height: 25rem; } }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.principle-list { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--groove); box-shadow: inset 0 1px 0 var(--groove-hi); }
.principle-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--groove); box-shadow: 0 1px 0 var(--groove-hi); }
.principle-list .body { margin-top: 0.5rem; }
.principle-n { font-size: 0.8125rem; font-weight: 620; letter-spacing: 0.16em; color: var(--signal); font-variant-numeric: tabular-nums; }
.recipes-wrap { margin-top: clamp(2.75rem, 4.6vw, 4rem); }
.recipes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2.5rem; margin-bottom: 0.75rem; }
.recipes-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-stretch: 114%; font-weight: 380; }
.recipes-intro { max-width: 46em; }
/* The six kinds of connection, a plain list under the living system's drawing: three to a row on wide
   screens, two below that and one on a phone. */
.uses.kinds-list { list-style: none; padding: 0; margin-top: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .uses.kinds-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .uses.kinds-list { grid-template-columns: minmax(0, 1fr); } }

/* Patch strips (patch() in starshaper.mjs): keys in a recessed well, each with an icon in its kind's
   colour, joined by cables that run from one key's colour to the next. A light travels along each
   cable in turn, the key it leaves brightening and the key it reaches lighting up, so along a chain
   one thing visibly moves the next. The stars keep their own colours (The Plasma Star's copper for
   its filter, The Particle Star's pink, The Kinetic Star's red for rhythm and The Resonant Star's gold
   for notes), effects are silver and an instrument is StarShaper's amber. */
.k-va, .k-filter { --k: 232, 132, 74; }
.k-granular { --k: 240, 124, 192; }
.k-rhythm { --k: 255, 90, 106; }
.k-notes { --k: 230, 191, 92; }
.k-reverb, .k-gate { --k: 207, 207, 211; }
.k-instrument { --k: var(--signal-rgb); }
.patch { display: flex; align-items: center; gap: 0.4375rem; padding: 0.375rem; border-radius: 999px; background: var(--well); box-shadow: var(--inset-sm); }
.node { position: relative; display: inline-flex; align-items: center; gap: 0.4375rem; flex: none; min-height: 2.125rem; padding: 0 0.8125rem 0 0.5625rem; border-radius: 999px; background: linear-gradient(180deg, rgba(var(--k), 0.15) 0%, rgba(var(--k), 0.04) 100%), var(--plate); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(var(--k), 0.24), 0 1px 2px rgba(0, 0, 0, 0.7); color: var(--glass); font-size: 0.8125rem; font-weight: 560; line-height: 1.2; white-space: nowrap; }
.node svg { width: 1rem; height: 1rem; flex: none; color: rgb(var(--k)); filter: drop-shadow(0 0 0.25rem rgba(var(--k), 0.6)); }
.node::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--k), 0.75), 0 0 0.875rem rgba(var(--k), 0.5); opacity: 0; pointer-events: none; animation: node-hit 4.8s ease-out var(--d, 0s) infinite; }
.patch .node:first-child::after { animation-name: node-send; }
.cable { position: relative; flex: 1 1 2.5rem; min-width: 1.75rem; height: 0.875rem; overflow: hidden; isolation: isolate; }
.cable i { position: absolute; left: 0; right: 0.375rem; top: calc(50% - 0.75px); height: 1.5px; background: linear-gradient(90deg, rgba(var(--k), 0.9), rgba(var(--k), 0)); }
.cable i + i { background: linear-gradient(90deg, rgba(var(--k), 0), rgba(var(--k), 0.9)); mix-blend-mode: plus-lighter; }
.cable::before { content: ''; position: absolute; right: 0; top: calc(50% - 0.25rem); width: 0.4375rem; height: 0.5rem; background: rgb(var(--k)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cable::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0.4375rem 50%, #FFF9EF 0 0.09rem, rgba(var(--k), 0.8) 0.2rem, rgba(var(--k), 0) 0.4375rem) no-repeat; transform: translateX(-0.875rem); animation: cable-flow 4.8s cubic-bezier(0.45, 0, 0.55, 1) var(--d, 0s) infinite; }
@keyframes cable-flow { 0% { transform: translateX(-0.875rem); } 24%, 100% { transform: translateX(100%); } }
@keyframes node-send { 0% { opacity: 0.85; } 14%, 100% { opacity: 0; } }
@keyframes node-hit { 0%, 21% { opacity: 0; } 25% { opacity: 1; } 46%, 100% { opacity: 0; } }
/* Along the chain each link starts as the light reaches its first key. */
.chain { margin: 1.25rem 0 1rem; max-width: 56rem; }
.chain .cable ~ .cable, .chain .cable ~ .cable ~ .node { --d: 1.2s; }
.chain .cable ~ .cable ~ .cable, .chain .cable ~ .cable ~ .cable ~ .node { --d: 2.4s; }
.chain .cable ~ .cable ~ .cable ~ .cable, .chain .cable ~ .cable ~ .cable ~ .cable ~ .node { --d: 3.6s; }
.chain-long { max-width: 66rem; }
/* Where a chain no longer fits on one line it runs down the page, its cables turned to point down
   from one key's icon to the next: below 860px, or 1040px for the effects chain's five keys. */
@media (max-width: 860px) {
  .chain { flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; border-radius: 1.5rem; padding: 0.5rem; }
  .chain .cable { flex: none; width: 2rem; min-width: 0; margin: 0.5625rem 0 0.5625rem 0.0625rem; transform: rotate(90deg); }
}
@media (max-width: 1040px) {
  .chain-long { flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; border-radius: 1.5rem; padding: 0.5rem; }
  .chain-long .cable { flex: none; width: 2rem; min-width: 0; margin: 0.5625rem 0 0.5625rem 0.0625rem; transform: rotate(90deg); }
}
/* With room beside it, the effects chain's text stands next to it rather than under it. */
@media (min-width: 601px) and (max-width: 1040px) {
  .fx-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 1.25rem; }
  .fx-row .chain { margin: 0; }
}
/* The smallest phones draw the keys a little smaller, so a pair still fits on one line. */
@media (max-width: 374px) {
  .node { gap: 0.375rem; padding: 0 0.6875rem 0 0.5rem; font-size: 0.75rem; }
  .node svg { width: 0.875rem; height: 0.875rem; }
  .cable { min-width: 1.25rem; }
}
/* The lights keep still under Pause motion (.is-still, from starshaper.js) and for reduced motion. */
.ss.is-still .patch :is(.cable, .node)::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ss .patch :is(.cable, .node)::after { animation: none; opacity: 0; }
}

.h3-sm { font-size: 1.125rem; }

/* The demos' consoles: a head with the title and controls, over the demo itself. */
.console-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.625rem; }
.console-title { display: flex; align-items: center; gap: 1rem; }
.sec-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.625rem 2.5rem; margin-top: 1.375rem; }
.sec-foot > p:first-child { max-width: 44em; }

/* The three demos that make no sound share one look: the Motion Waves demo (movement() in
   starshaper.mjs), Stellar Awakening (music()) and instruments within instruments (nested()). Each has
   its title and status beside its controls (the Pull fader or Bloom, the hold button and the
   autopilot); its lanes beside the orbits or the harmony wheel (which come first on narrower screens),
   or the instruments one inside another; then the six things the waves do, the six moments or the six
   steps, each moment and step with the part of its capability it shows above its name. The one
   showing lights its LED, and while the autopilot plays, an amber line fills across it (--p, from
   starshaper.js); one a visitor picks stays pressed. In the draw scene the Motion Waves lanes take a
   pen. */
:is(.aw, .nest) { margin-top: clamp(1.75rem, 3.2vw, 2.5rem); }
:is(.mw-title, .aw-title, .nest-title) { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
:is(.mw-status, .aw-status, .nest-status) { min-height: 3.1em; max-width: 40em; color: var(--glass); }
:is(.mw-ctl, .aw-ctl, .nest-ctl) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.125rem; }
.mw-pull { width: 13rem; }
.mw-pull .fader { margin-top: -0.25rem; }
:is(.mw-press, .aw-press) { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
:is(.mw-press, .aw-press)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--signal); box-shadow: 0 0 0.375rem rgba(var(--signal-rgb), 0.8); transform: scaleX(var(--p, 0)); transform-origin: left; }
:is(.mw-press, .aw-press).is-on { color: var(--glass); }
:is(.mw-press, .aw-press).is-on::before { background: var(--led); box-shadow: var(--led-glow); }
:is(.mw-press, .aw-press)[aria-pressed="true"] { background: var(--key-in); box-shadow: var(--press); }
:is(.mw-body, .aw-body) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); gap: 1.125rem; padding: 1.125rem 1.375rem; }
:is(.mw-lanes, .mw-orbits, .aw-lanes, .aw-wheel) { position: relative; border-radius: 0.625rem; overflow: hidden; }
:is(.mw-lanes, .aw-lanes) { min-height: 21rem; background: var(--well); box-shadow: var(--inset-sm); }
.aw-lanes { min-height: 23rem; }
:is(.mw-orbits, .aw-wheel) { aspect-ratio: 0.92; background: radial-gradient(75% 70% at 50% 45%, #19191B 0%, #0B0B0C 100%); }
:is(.mw-orbits, .aw-wheel)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--inset); pointer-events: none; }
:is(.mw-lanes, .aw-lanes) canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:is(.mw-orbits, .aw-wheel) canvas { position: absolute; left: 0; right: 0; top: 0; bottom: 2.5rem; width: 100%; height: calc(100% - 2.5rem); display: block; }
:is(.mw-cap, .aw-cap) { position: absolute; left: 1rem; right: 1rem; bottom: 0.875rem; color: var(--hint); font-size: 0.8125rem; line-height: 1.4; text-align: center; }
.nest-body { padding: 1.125rem 1.375rem; }
.nest-view { position: relative; height: clamp(23rem, 37vw, 29rem); border-radius: 0.625rem; overflow: hidden; background: var(--well); box-shadow: var(--inset-sm); }
.nest-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mw-lanes.is-drawable canvas { cursor: crosshair; }
.mw-lanes.takes-touch canvas { touch-action: none; }
:is(.mw-feats, .aw-moments, .nest-steps) { list-style: none; margin: 0; padding: 0.625rem 1rem 1rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
:is(.mw-feat, .aw-moment, .nest-step) { position: relative; display: grid; grid-template-columns: 0.4375rem minmax(0, 1fr); align-content: start; gap: 0.3125rem 0.625rem; width: 100%; height: 100%; padding: 0.875rem 0.875rem 1rem; border: 0; border-radius: 0.75rem; background: transparent; color: var(--mist); text-align: left; transition: background-color 0.2s, box-shadow 0.2s, color 0.3s; }
:is(.mw-feat, .aw-moment, .nest-step):hover { background: rgba(255, 255, 255, 0.025); }
:is(.mw-led, .aw-led, .nest-led) { width: 0.4375rem; height: 0.4375rem; margin-top: 0.4375rem; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); }
:is(.aw-led, .nest-led) { margin-top: 0.25rem; }
:is(.mw-name, .aw-name, .nest-name) { color: var(--soft); font-weight: 600; line-height: 1.4; transition: color 0.3s; }
:is(.aw-moment > :not(.aw-led), .nest-step > :not(.nest-led)) { grid-column: 2; }
.ss :is(.aw-part, .nest-part) { color: var(--hint); font-size: 0.6875rem; line-height: 1.35; transition: color 0.3s; }
:is(.mw-feat, .aw-moment, .nest-step) .small { grid-column: 2; font-size: 0.8438rem; line-height: 1.5; }
:is(.mw-feat, .aw-moment, .nest-step).is-now :is(.mw-led, .aw-led, .nest-led) { background: var(--led); box-shadow: var(--led-glow); }
:is(.mw-feat, .aw-moment, .nest-step).is-now :is(.mw-name, .aw-name, .nest-name) { color: var(--glass); }
.ss :is(.aw-moment, .nest-step).is-now :is(.aw-part, .nest-part) { color: var(--signal); }
:is(.mw-feat, .aw-moment, .nest-step).is-now .small { color: var(--mist); }
:is(.mw-feat, .aw-moment, .nest-step)[aria-pressed="true"] { background: var(--key-in); box-shadow: var(--press); }
:is(.mw-feat, .aw-moment, .nest-step)::after { content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: 0; height: 2px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 0.375rem rgba(var(--signal-rgb), 0.6); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity 0.3s; }
:is(.mw-feat, .aw-moment, .nest-step).is-touring::after { opacity: 1; }
@media (max-width: 1100px) {
  :is(.mw-feats, .aw-moments, .nest-steps) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :is(.mw-body, .aw-body) { grid-template-columns: minmax(0, 1fr); }
  :is(.mw-orbits, .aw-wheel) { order: -1; aspect-ratio: auto; height: min(27rem, 96vw); }
}
@media (max-width: 640px) {
  :is(.mw, .aw, .nest) .console-head { padding: 1.125rem; }
  :is(.mw-status, .aw-status, .nest-status) { min-height: 6.2em; }
  :is(.mw-body, .aw-body, .nest-body) { padding: 0.875rem; gap: 0.875rem; }
  .nest-view { height: min(35rem, 118vw); }
  :is(.mw-feats, .aw-moments, .nest-steps) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.5rem 0.625rem 0.75rem; }
  :is(.mw-feat, .aw-moment, .nest-step) { padding: 0.75rem 0.625rem 0.875rem; }
  :is(.mw-lanes, .aw-lanes) { min-height: 23rem; }
  .aw-lanes { min-height: 25rem; }
  :is(.mw-ctl, .aw-ctl, .nest-ctl) { width: 100%; }
  .mw-pull { flex: 1 1 100%; width: auto; }
}

/* A line set apart inside a section's text. */
.share-strong { color: var(--glass); font-size: clamp(1.375rem, 2vw, 1.75rem); font-stretch: 112%; font-weight: 420; }

/* Optional assistance */
.assist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.assist-panel { padding: clamp(1.25rem, 2.6vw, 2rem); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prompt-box img { width: 1.625rem; height: auto; margin-top: 0.25rem; flex: none; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem 2rem; }
.ai-col { display: flex; flex-direction: column; gap: 0.375rem; }
/* Every example request is in the page; the one picked shows, laid out as if it sat in the panel alone. */
.ai-example { display: contents; }
.ai-example[hidden] { display: none; }

/* Formats and platforms, and what comes with StarShaper */
.os-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.25rem; }
.os { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.375rem, 2.6vw, 1.875rem); }
.os-head { display: flex; align-items: center; gap: 1rem; }
.os-head .small { margin-top: 0.125rem; }
.os-logo { width: 2.5rem; height: 2.5rem; flex: none; color: var(--glass); }
.os .fmt { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; }
/* The licence runs the full width under the platforms, its terms beside the heading. */
.os-licence { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
/* Four points, such as the commitments that come with StarShaper: in one row on wide screens, two by
   two below, one column on a phone. */
.uses:is(.promise-list, .play-list) { list-style: none; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .uses:is(.promise-list, .play-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .uses:is(.promise-list, .play-list) { grid-template-columns: minmax(0, 1fr); } }

/* First Light and developer interest */
.fl-sec { position: relative; overflow: hidden; background: radial-gradient(56% 44% at 50% 34%, var(--fl-glow) 0%, rgba(var(--abyss-rgb), 0) 100%), var(--abyss); }
.fl-wrap { max-width: 55rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.375rem; }
.fl-mark { width: 4rem; height: auto; display: block; }
.fl-title { font-size: clamp(2.375rem, 5.2vw, 4.75rem); }
.fl-lede { text-align: center; text-wrap: balance; }
.fl-offer { max-width: 40rem; text-align: center; text-wrap: balance; color: var(--mist); }
.fl-form { width: 100%; margin-top: 1.25rem; text-align: left; border-radius: 1.625rem; padding: clamp(1.375rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.375rem; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-group { display: flex; flex-direction: column; gap: 0.625rem; }
.field-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.field-row .field { flex: 1 1 16.25rem; width: auto; }
.field-row .btn { min-height: 3.375rem; padding: 0 1.625rem; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.125rem; }
select.field { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%), var(--well); background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%, 0 0; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem, 100% 100%; background-repeat: no-repeat; cursor: pointer; }
select.field option { background: #1D1D20; color: var(--glass); }
.opt { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--hint); }
.consent { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.consent span { font-size: 0.9062rem; line-height: 1.55; color: var(--mist); }
.form-error { color: var(--copper); min-height: 1.5em; }
.form-error:empty { min-height: 0; margin-top: -1.375rem; }
.form-note { margin-top: -0.75rem; }
.fl-form [aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.fl-done { width: 100%; margin-top: 1.25rem; border-radius: 1.625rem; padding: clamp(1.625rem, 3vw, 2.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.fl-done:focus { outline: none; }

/* The developers band, status band and footer */
.sec-band { padding-block: clamp(2rem, 4vw, 3rem); background: var(--band); }
.dev-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.dev-band .stack { gap: 0.625rem; max-width: 40rem; }
.dev-band-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-stretch: 114%; font-weight: 380; }
.ss-footer { padding-block: 2.5rem 3.25rem; }
.ss-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.ss-footer-logo { width: min(100%, 16.5rem); height: auto; }
.ss-footer-line { color: var(--mist); }
.ss-footer-line strong { color: var(--glass); font-weight: 600; }
.ss-footer-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ss-footer-actions .btn { min-height: 2.75rem; font-size: 0.9062rem; }
.ss-footer-meta { margin-top: 1.875rem; align-items: flex-start; }
.ss-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.ss-footer-links a { color: var(--mist); font-size: 0.9375rem; text-decoration: none; }
.ss-footer-links a:hover { color: var(--signal); }
.ss-footer-note { max-width: 52em; }

/* Now playing */
.np-ok, .np-warn { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; }
.np-name { color: var(--glass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-warn .small { color: var(--copper); }
.np .btn { min-height: 2.375rem; padding: 0 1rem; font-size: 0.875rem; }

/* Developers page */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.step-body { display: flex; flex-direction: column; gap: 0.375rem; }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); gap: 0.5rem 3rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.use { padding-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rows-note { margin-top: 1.5rem; }

/* The adaptive score console: from your software (inputs), the scene view, the director, then your code and the score. */
.gc { border-radius: 1rem; background: var(--plate); box-shadow: var(--raise); overflow: hidden; }
.gc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem 1.625rem; }
.gc-head .console-title .small { max-width: 34em; }
.gc-transport { display: flex; align-items: center; gap: 1.25rem; }
.gc-clock { display: flex; align-items: center; gap: 0.625rem; }
.gc-bar { min-width: 2.25ch; color: var(--glass); font-weight: 600; }
.gc-beats { display: inline-flex; gap: 0.375rem; }
.gc-beats i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); }
.gc-beats i.on { background: var(--led); box-shadow: var(--led-glow); }
.gc-body { display: grid; grid-template-columns: minmax(16.5rem, 0.95fr) minmax(0, 1.45fr) minmax(17rem, 1fr); gap: 1.125rem 1.5rem; padding: 1.125rem 1.375rem; }
.gc-foot { display: grid; grid-template-columns: minmax(16.5rem, 0.95fr) minmax(0, 2.45fr); gap: 1.125rem 1.5rem; padding: 0.25rem 1.375rem 1.375rem; }
.gc-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.gc-cap { display: flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hint); }
.gc-tag { padding: 0.125rem 0.5rem; border-radius: 999px; border: 1px solid var(--hair); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--mist); }
.gc-in { gap: 0.875rem; }
.gc-fader .fader { margin-top: -0.25rem; }
/* The marks sit where the knob's centre travels: half a knob (0.875rem) in from either end. */
.gc-marks { position: relative; height: 0.5rem; margin: -0.625rem 0.875rem 0.125rem; }
.gc-marks i { position: absolute; left: var(--at, 0); top: 0; width: 2px; height: 0.5rem; margin-left: -1px; border-radius: 1px; background: rgba(var(--mist-rgb), 0.35); }
.gc-marks i.is-in { background: var(--signal); box-shadow: 0 0 0.375rem rgba(var(--signal-rgb), 0.6); }
.gc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.8125rem; color: var(--hint); }
.gc-key { width: 2px; height: 0.625rem; border-radius: 1px; background: rgba(var(--mist-rgb), 0.45); }
.gc-key.is-in { background: var(--signal); }
.gc-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.gc-set legend { padding: 0; margin-bottom: 0.5rem; }
.gc-set .chips { gap: 0.375rem; }
.gc-set .chip-radio > span { min-height: 2.5rem; padding: 0 0.875rem; font-size: 0.875rem; }
.cue { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.875rem; border-radius: 999px; border: 0; background: var(--key); box-shadow: var(--raise-sm); color: var(--soft); font-size: 0.875rem; font-weight: 540; transition: box-shadow 0.18s, color 0.18s, transform 0.12s; }
.cue::before { content: ""; width: 0.375rem; height: 0.375rem; flex: none; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); }
.cue:hover { background: var(--key-hover); color: var(--glass); }
.cue:active { box-shadow: var(--press); transform: translateY(1px); }
.cue.is-queued::before { background: var(--led); box-shadow: var(--led-glow); animation: ssblink 0.24s steps(1) infinite; }
.cue.is-fired { color: var(--glass); }
.cue.is-fired::before { background: var(--led); box-shadow: var(--led-glow); }
.gc-view { position: relative; min-height: 27rem; border-radius: 0.625rem; overflow: hidden; background: radial-gradient(85% 75% at 50% 52%, #19191B 0%, #0B0B0C 100%); }
.gc-view::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--inset); pointer-events: none; }
.gc-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gc-scene { position: absolute; left: 1rem; top: 0.875rem; z-index: 2; margin-right: 6rem; color: var(--glass); font-weight: 520; }
.gc-flag { position: absolute; right: 1rem; top: 0.875rem; z-index: 2; color: var(--hint); }
.gc-secs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.gc-secs li { position: relative; padding: 0.5rem 0.25rem 0.4375rem; border-radius: 0.5rem; background: var(--well); box-shadow: var(--inset-sm); text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--dim); transition: color 0.2s; }
.gc-secs li::before { content: ""; display: block; width: 0.375rem; height: 0.375rem; margin: 0 auto 0.3125rem; border-radius: 50%; background: var(--led-off); box-shadow: var(--led-off-sh); }
.gc-secs li.is-on { color: var(--glass); }
.gc-secs li.is-on::before { background: var(--led); box-shadow: var(--led-glow); }
.gc-secs li.is-next::before { background: var(--led); box-shadow: var(--led-glow); animation: ssblink 0.5s steps(1) infinite; }
.gc-next { min-height: 1.55em; color: var(--glass); }
.gc-well { position: relative; border-radius: 0.625rem; background: var(--well); box-shadow: var(--inset-sm); }
.gc-log-well { flex: 1; min-height: 17rem; }
.gc-log { list-style: none; margin: 0; padding: 0.75rem 0.875rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; height: 100%; }
.gc-log:empty::before, .gc-api:empty::before { content: "Nothing yet. Press play."; font-size: 0.8125rem; color: var(--placeholder); }
.gc-log li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--mist); }
.gc-log li:nth-last-child(n+4) { opacity: 0.55; }
.gc-log li.is-act { color: var(--glass); }
.gc-stamp { color: var(--signal); font-size: 0.75rem; font-weight: 600; padding-top: 0.0625rem; }
.gc-log li.is-plan .gc-stamp { color: var(--dim); }
.gc-api { list-style: none; margin: 0; padding: 0.75rem 0.875rem; min-height: 12.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3125rem; overflow: hidden; }
.gc-api li, .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.78rem; line-height: 1.55; color: var(--soft); }
.gc-api li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-api li.is-in { color: var(--signal); }
.tk-f { color: var(--signal); }
.tk-s { color: var(--aqua); }
.tk-n { color: var(--copper); }
.tk-k { color: var(--violet); }
.tk-c { color: var(--dim); }
.gc-api li.is-in .tk-c { color: var(--signal); }
.gc-arr-well { height: 11.5rem; overflow: hidden; }
.gc-arr-well canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss .gc-read { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .ss .gc-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-read div { padding: 0.75rem 1rem; }
}
@media (max-width: 1100px) {
  .gc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gc-view { grid-column: 1 / -1; order: -1; min-height: 24rem; }
  .gc-foot { grid-template-columns: minmax(0, 1fr); }
  .gc-arr { order: -1; }
}
@media (max-width: 760px) {
  .gc-head { padding: 1.125rem; }
  .gc-body { grid-template-columns: minmax(0, 1fr); padding: 0.875rem; }
  .gc-foot { padding: 0.25rem 0.875rem 0.875rem; }
  .gc-view { min-height: 20rem; }
  .gc-log-well { min-height: 0; }
}
.dir-wrap { margin-top: clamp(3rem, 6vw, 4.5rem); }
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); column-gap: 3rem; margin-top: 1.25rem; }
.routes div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: baseline; padding: 0.875rem 0; border-bottom: 1px solid var(--groove); box-shadow: 0 1px 0 var(--groove-hi); }
.routes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.8125rem; color: var(--soft); white-space: nowrap; }
.routes dd { margin: 0; color: var(--mist); }
@media (max-width: 560px) {
  .routes div { grid-template-columns: minmax(0, 1fr); }
}
.dir-list { list-style: none; padding: 0; margin-top: 1.25rem; }
.dir-note { margin-top: 1.5rem; max-width: 52em; }

/* The code example beside How it works */
.code-plate { margin: 0; padding: 1.25rem 1.375rem 1.375rem; display: flex; flex-direction: column; gap: 0.875rem; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.code { margin: 0; padding: 1rem 1.125rem; border-radius: 0.625rem; background: var(--well); box-shadow: var(--inset-sm); overflow-x: auto; white-space: pre; }
.code-cap { color: var(--hint); }

/* The group footer below the product carries Xionia's own type. */
.ss-body .x-footer { font-size: 0.9375rem; }