/* sournd.com: an immersive, dark-first ecosystem. Colours and type come from tokens.css (sournd/assets). */
:root {
  color-scheme: dark;
  --bg: #07080b;
  --bg-2: #0d1014;
  --panel: rgba(20, 24, 30, .72);
  --panel-solid: #12161b;
  --line: rgba(237, 240, 238, .12);
  --line-2: rgba(237, 240, 238, .22);
  --text: #EDF0EE;
  --muted: #A7B1B3;
  --petrol: #6BBCC6;
  --petrol-deep: #3A97A3;
  --rasp: #E0577F;
  --amber: #F4A340;
  --code: #0b0e12;
  --link: var(--petrol);
  --gutter: clamp(16px, 3vw, 44px);
  --read: 760px;
  --display: var(--sournd-font-display, 'Bricolage Grotesque', sans-serif);
  --ui: var(--sournd-font-ui, 'Instrument Sans', sans-serif);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(224, 87, 127, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(107, 188, 198, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--ui);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 1.4em 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(40px, 7vw, 104px); margin-top: .2em; }
h2 { font-size: clamp(30px, 4.4vw, 64px); }
h3 { font-size: 22px; letter-spacing: -.01em; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
code { font-family: var(--ui); font-weight: 600; font-size: .92em; background: rgba(237, 240, 238, .08); padding: .08em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.kicker { font: 700 13px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px; }
.lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); max-width: 46ch; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(7, 8, 11, .86), rgba(7, 8, 11, .55));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand img { display: block; height: 28px; width: auto; }
.mark-light { display: none !important; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.top nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid transparent;
  color: #d7dcdc; text-decoration: none; font: 700 15px/1 var(--ui); transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.top nav a i { width: 8px; height: 8px; border-radius: 50%; background: var(--nc); opacity: .75; transition: transform .25s var(--ease), box-shadow .25s; }
.top nav a:hover { color: var(--text); background: color-mix(in srgb, var(--nc) 14%, transparent); border-color: color-mix(in srgb, var(--nc) 45%, transparent); transform: translateY(-1px); }
.top nav a:hover i { transform: scale(1.3); box-shadow: 0 0 10px var(--nc); opacity: 1; }
.top nav a[aria-current] { color: #0b0e12; background: var(--nc); border-color: var(--nc); }
.top nav a[aria-current] i { background: #0b0e12; opacity: 1; }
.try {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 38px; padding: 0 18px 0 14px; border-radius: 99px;
  background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; text-decoration: none; font: 800 15px/1 var(--ui);
  box-shadow: 0 8px 30px -10px rgba(224, 87, 127, .8); transition: transform .2s var(--ease), box-shadow .2s;
}
.try span { font-size: 11px; }
.try:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 40px -10px rgba(244, 163, 64, .9); }
.try[aria-current="page"] { outline: 2px solid var(--text); outline-offset: 2px; }
.me { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 38px; padding: 0 14px 0 10px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font: 700 14px/1 var(--ui); transition: border-color .2s, background .2s; }
.me:hover, .me[aria-current] { border-color: var(--petrol); background: rgba(107, 188, 198, .12); }
.me-icon { width: 18px; height: 18px; background: linear-gradient(135deg, var(--petrol), #B388FF);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3.6'/%3E%3Cpath d='M2 17c0-4 3.1-6.4 7-6.4s7 2.4 7 6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3.6'/%3E%3Cpath d='M2 17c0-4 3.1-6.4 7-6.4s7 2.4 7 6.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sound {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  background: rgba(237, 240, 238, .06); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 99px; padding: 7px 14px 7px 12px; font: 600 14px/1 var(--ui); cursor: pointer; transition: background .2s, border-color .2s;
}
.sound:hover { border-color: var(--text); }
.sound[aria-pressed="true"] { background: rgba(224, 87, 127, .18); border-color: var(--rasp); }
.sound-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.sound-bars i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.sound-bars i:nth-child(2) { height: 9px; } .sound-bars i:nth-child(3) { height: 12px; } .sound-bars i:nth-child(4) { height: 6px; }
.sound[aria-pressed="true"] .sound-bars i { animation: bars 0.9s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bars { 0%, 100% { height: 3px; } 50% { height: 14px; } }

main { display: block; }
.kind-doc main, .doc-wrap { padding: 0 var(--gutter); }

/* ---------- buttons and chips ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 99px; font: 700 16px/1 var(--ui); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s var(--ease), background .2s, border-color .2s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; box-shadow: 0 10px 40px -10px rgba(224, 87, 127, .7); }
.btn.primary:hover { box-shadow: 0 16px 50px -10px rgba(244, 163, 64, .8); }
.btn.secondary, .btn.glass { background: rgba(237, 240, 238, .07); color: var(--text); border-color: var(--line-2); backdrop-filter: blur(8px); }
.btn.secondary:hover, .btn.glass:hover { border-color: var(--text); background: rgba(237, 240, 238, .12); }
button.btn { font-family: var(--ui); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); font: 600 14px/1 var(--ui); cursor: pointer; transition: all .2s;
}
.chip:hover { color: var(--text); border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.count { color: var(--muted); font-size: 14px; margin: 0; }
.tier { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: rgba(7, 8, 11, .55); border: 1px solid var(--line-2); white-space: nowrap; }
.tier-free { color: #9fe6c4; border-color: rgba(159, 230, 196, .5); }
.tier-email { color: #9fe6c4; border-color: rgba(159, 230, 196, .5); } /* closed free engines: shown as Free */
.tier-paid { color: var(--amber); border-color: rgba(244, 163, 64, .5); }

/* ---------- the field (lit tile hero) ---------- */
.field { position: relative; height: min(78vh, 860px); min-height: 520px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.field-tall { height: min(calc(100vh - 57px), 1040px); min-height: 640px; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.field::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--bg) 0%, transparent 28%), linear-gradient(to right, rgba(7, 8, 11, .82) 0%, rgba(7, 8, 11, .35) 42%, transparent 70%); }
.field-copy { position: absolute; left: var(--gutter); bottom: clamp(40px, 9vh, 110px); z-index: 2; max-width: min(760px, 90vw); pointer-events: none; }
.field-copy .cta-row, .field-copy a { pointer-events: auto; }
.field-copy h1 { margin: 0; font-size: clamp(42px, 6.4vw, 104px); line-height: .94; max-width: 13ch; text-shadow: 0 6px 40px rgba(0, 0, 0, .5); }
.field-copy .lede { color: #d7dcdc; margin: 22px 0 0; }
.field-sub { margin: 18px 0 0; font: 700 clamp(22px, 2.6vw, 38px)/1.1 var(--display); background: linear-gradient(100deg, #6BBCC6, #F4A340 60%, #E0577F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.field-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; width: 250px; padding: 12px 14px; border-radius: 14px; background: rgba(10, 12, 16, .82); border: 1px solid var(--line-2); backdrop-filter: blur(10px); transition: transform .08s linear; }
.field-tip strong { display: block; font: 700 20px/1.1 var(--display); }
.field-tip span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.field-hint { position: absolute; right: var(--gutter); bottom: 22px; z-index: 2; margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; pointer-events: none; }

/* ---------- engines page head and the featured engine of the day ---------- */
.eco-head { padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(20px, 3vw, 36px); }
.eco-head h1 { margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .9; }
.eco-head .lede { margin-top: 18px; max-width: 60ch; }
.featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; margin: 0 var(--gutter) clamp(30px, 4vw, 56px); border-radius: 26px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel-solid); box-shadow: 0 50px 120px -60px rgba(107, 188, 198, .45); }
.featured-art { position: relative; min-height: clamp(300px, 34vw, 520px); }
.featured-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.featured-copy { padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 10px; background: linear-gradient(160deg, rgba(107, 188, 198, .08), transparent 60%); }
.featured-copy .kicker { margin: 0; color: var(--petrol); }
.featured-tags { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.featured-copy h2 { margin: 0; font-size: clamp(40px, 5vw, 84px); line-height: .92; }
.featured-story { margin: 0; font: 600 clamp(18px, 1.7vw, 24px)/1.25 var(--display); }
.featured-desc { margin: 0; color: #cfd5d6; max-width: 52ch; }
.featured-meta { margin: 0; color: var(--muted); font-size: 14px; }
.featured .cta-row { margin-top: 10px; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .featured-art { min-height: 62vw; } }

/* ---------- category accents ---------- */
.cat-distortion { --acc: #ff6a3d; } .cat-dynamics { --acc: #f4a340; } .cat-eq { --acc: #ffd166; }
.cat-filter { --acc: #9be564; } .cat-modulation { --acc: #6bbcc6; } .cat-delay { --acc: #7aa2ff; }
.cat-reverb { --acc: #b388ff; } .cat-pitch { --acc: #e0577f; } .cat-performance { --acc: #ff7ac6; }
.cat-utility { --acc: #c3cbcd; } .cat-analysis { --acc: #5ee6c1; }

/* ---------- strips, categories and the bento of covers ---------- */
.strip { padding: clamp(56px, 9vw, 130px) var(--gutter) 20px; }
.strip-head { max-width: 1000px; margin: 0 0 clamp(24px, 3vw, 44px); transform: translateY(calc(var(--d, 0) * 24px)); }
.strip-head h2 { margin: 0; font-size: clamp(44px, 7vw, 110px); line-height: .9; }
.strip-head p:last-child { color: var(--muted); font-size: 19px; max-width: 60ch; }
.strip-more { margin: 32px 0 0; }

.biome { position: relative; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(32px, 4vw, 60px); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.biome::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, var(--acc), transparent 70%); }
.biome::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%); }
.biome-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 420px); gap: 8px 28px; align-items: start; margin: 0 0 clamp(22px, 3vw, 40px); }
.biome-n { margin: 0; font: 800 clamp(20px, 2vw, 28px)/1 var(--display); color: var(--acc); padding-top: .35em; }
.biome-head h2 { margin: 0; font-size: clamp(40px, 5.6vw, 92px); line-height: .92; }
.biome-blurb { margin: 10px 0 0; color: var(--muted); font-size: 18px; max-width: 46ch; }
.biome-facts { margin: 0; display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.biome-facts div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.biome-facts dt { color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 2px; }
.biome-facts dd { margin: 0; font-size: 15px; }
.biome-facts div:first-child dd { font: 800 22px/1 var(--display); color: var(--acc); }
@media (max-width: 900px) { .biome-head { grid-template-columns: auto 1fr; } .biome-facts { grid-column: 1 / -1; } }

.bento {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(10px, 1vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 19vw, 360px), 1fr));
  grid-auto-rows: clamp(330px, 26vw, 450px);
  grid-auto-flow: dense;
}
.size-xl { grid-column: span 2; grid-row: span 2; }
.size-wide { grid-column: span 2; }
.size-tall { grid-row: span 2; }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 400px; }
  .size-xl, .size-wide { grid-column: auto; }
  .size-xl, .size-tall { grid-row: span 1; }
}

.cover {
  position: relative; border-radius: 20px; perspective: 900px;
  opacity: 0; transform: translateY(40px) scale(.97);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.cover.in { opacity: 1; transform: none; }
.cover-link {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; color: var(--text); text-decoration: none;
  background: var(--panel-solid); border: 1px solid var(--line);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
  will-change: transform;
}
.cover.is-hot { z-index: 5; }
.cover.is-hot .cover-link { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.025); transition: transform .12s linear, box-shadow .5s var(--ease); border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 50px -14px var(--acc); }
.cover-art { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; display: block; }
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 1.2s var(--ease), filter .6s; }
.cover.is-hot canvas { transform: scale(1.06); filter: saturate(1.2) contrast(1.05); }
.cover-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.cover-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .2), transparent 40%); mix-blend-mode: overlay; }
.cover.is-hot .cover-glare { opacity: 1; }
.cover-story { position: absolute; left: 14px; right: 60px; bottom: 12px; font: 600 14px/1.3 var(--display); color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); opacity: .92; }
.size-xl .cover-story { font-size: clamp(16px, 1.5vw, 22px); }
.cover-info { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; background: #0f1317; border-top: 2px solid var(--acc); }
.cover-tags { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.cover-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-name { margin: 0; font-size: clamp(22px, 1.9vw, 30px); line-height: 1; }
.size-xl .cover-name { font-size: clamp(30px, 3vw, 48px); }
.cover-desc { font-size: 14px; color: #c9d0d1; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.size-xl .cover-desc, .size-tall .cover-desc { -webkit-line-clamp: 3; font-size: 15px; }
.cover-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cover-price { color: var(--text); font-weight: 600; }
.cover-play {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(7, 8, 11, .45); backdrop-filter: blur(6px); cursor: pointer;
  display: grid; place-items: center; transition: transform .25s var(--ease), background .2s;
  flex: none; padding: 0; aspect-ratio: 1; /* a circle wherever it sits: a flex row must not squeeze it */
}
.cover-play:hover { transform: scale(1.1); background: var(--acc, var(--rasp)); }
.cover-play span { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.cover-play[aria-pressed="true"] { background: var(--rasp); border-color: var(--rasp); }
.cover-play[aria-pressed="true"] span { width: 12px; height: 12px; border: 0; background: #fff; border-radius: 2px; margin: 0; }
.cover.is-playing .cover-link { box-shadow: 0 0 0 2px var(--acc), 0 0 80px -10px var(--acc); }

/* ---------- the ecosystem bar: jump to a category, search, licence ---------- */
.eco-bar { position: sticky; top: 57px; z-index: 40; padding: 10px var(--gutter); background: rgba(7, 8, 11, .85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.jumps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.jumps::-webkit-scrollbar { display: none; }
.jump { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 34px; padding: 0 14px 0 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); text-decoration: none; font: 600 14px/1 var(--ui); transition: all .2s; }
.jump i { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.jump span { color: var(--muted); font-weight: 500; opacity: .8; }
.jump:hover { color: var(--text); border-color: var(--acc); }
.jump[aria-current="true"] { color: var(--bg); background: var(--acc); border-color: var(--acc); }
.jump[aria-current="true"] i { background: var(--bg); }
.jump[aria-current="true"] span { color: var(--bg); }
.eco-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.search input {
  width: min(320px, 80vw); min-height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2);
  background: rgba(237, 240, 238, .06); color: var(--text); font: 500 15px/1 var(--ui);
}
.search input::placeholder { color: var(--muted); }
.eco-tools .count { margin-left: auto; }

/* ---------- PLAY ---------- */
.play { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: start; }
.play-head h2, .play-head h1 { margin: 0; font-size: clamp(28px, 2.8vw, 44px); line-height: 1; }
.play-head .kicker { margin-bottom: 8px; }
.play-head [data-play-title] { background: linear-gradient(110deg, var(--rasp), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.play-side { position: sticky; top: 64px; display: grid; gap: 12px; padding: 16px var(--gutter) 16px 0; min-width: 0; }
.play-picker { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.play-pick-head, .play-pick-tools, .play-kinds { min-width: 0; }
.play-engines { align-content: start; grid-auto-rows: max-content; }
.play-engines[data-view="grid"] .play-engine { aspect-ratio: auto; height: 92px; }
.play-picker { display: grid; gap: 8px; }
.play-side .play-engines { max-height: calc(100vh - 64px - 16px - min(38vh, 380px) - 120px); min-height: 180px; }
.play-stage { position: relative; overflow: hidden; height: min(38vh, 380px); border-radius: 18px; border: 1px solid var(--line); }
.play-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.play-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 8, 11, .9), transparent 55%); pointer-events: none; }
.play-stage-copy { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; font-size: 14px; }
.play-stage-copy p { margin: 4px 0 0; }
.play-stage-copy h2, .play-stage-copy h1 { margin: 0; font-size: clamp(36px, 4.6vw, 76px); line-height: .95; max-width: 14ch; }
.play-stage-copy [data-play-title] { background: linear-gradient(110deg, var(--rasp), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.play-stage-copy p { color: #d7dcdc; max-width: 48ch; }
.play-desk { padding: clamp(18px, 2.4vw, 32px) var(--gutter); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.play-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.play-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px 0 22px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; font: 800 22px/1 var(--display); letter-spacing: .02em;
  box-shadow: 0 14px 50px -12px rgba(224, 87, 127, .8); transition: transform .2s var(--ease);
}
.play-go:hover { transform: scale(1.04); }
.play-go-icon { width: 0; height: 0; border-left: 16px solid #12060b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.play-go[aria-pressed="true"] .play-go-icon { width: 14px; height: 14px; border: 0; background: #12060b; border-radius: 2px; }
.is-playing .play-go { animation: beat 0.6s ease-in-out infinite alternate; }
@keyframes beat { to { box-shadow: 0 14px 70px -6px rgba(244, 163, 64, .95); } }
.play-bpm { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.play-bpm input { width: 130px; accent-color: var(--rasp); }
.play-bpm-out { color: var(--text); min-width: 64px; }
.play-chip { min-height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 600 14px/1 var(--ui); cursor: pointer; }
.play-chip:hover { color: var(--text); border-color: var(--text); }
.play-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.play-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.play-preset { display: inline-flex; align-items: center; gap: 7px; }
.play-preset i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.play-preset[aria-pressed="true"] { background: var(--pc); border-color: var(--pc); color: #0b0e12; }
.play-preset[aria-pressed="true"] i { background: #0b0e12; }
.dice { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; border-radius: 4px; border: 1.5px solid currentColor;
  background: radial-gradient(circle at 30% 30%, currentColor 1.4px, transparent 1.6px), radial-gradient(circle at 70% 70%, currentColor 1.4px, transparent 1.6px), radial-gradient(circle at 50% 50%, currentColor 1.4px, transparent 1.6px), radial-gradient(circle at 70% 30%, currentColor 1.4px, transparent 1.6px), radial-gradient(circle at 30% 70%, currentColor 1.4px, transparent 1.6px); }
.play-grid { display: grid; gap: 6px; }
.play-grid { --pc: var(--rasp); }
.play-row { display: grid; grid-template-columns: 92px repeat(16, minmax(0, 1fr)); gap: 4px; align-items: center; transition: opacity .2s; }
.play-lane {
  display: flex; align-items: center; gap: 8px; height: 100%; min-height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text); font: 700 16px/1 var(--display); cursor: pointer; text-align: left;
}
.play-lane i { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 10px var(--lc); flex: none; }
.play-lane:hover { border-color: var(--line-2); }
.play-lane[aria-pressed="true"] { color: var(--muted); text-decoration: line-through; }
.play-lane[aria-pressed="true"] i { background: transparent; box-shadow: none; border: 2px solid var(--muted); }
.play-row.muted .play-cell { opacity: .3; }
.play-cell { aspect-ratio: 1; min-height: 22px; border-radius: 6px; border: 1px solid var(--line); background: rgba(237, 240, 238, .04); cursor: pointer; padding: 0; transition: background .1s, transform .1s; }
.play-cell.beat { background: rgba(237, 240, 238, .08); }
.play-cell:hover { border-color: var(--line-2); }
.play-cell[aria-pressed="true"] { background: var(--pc); border-color: var(--pc); box-shadow: 0 0 16px -2px var(--pc); }
.play-cell[data-level="2"] { background: color-mix(in srgb, var(--pc) 55%, #fff); border-color: color-mix(in srgb, var(--pc) 55%, #fff); }
.play-cell[data-level="3"] { background: color-mix(in srgb, var(--pc) 45%, #0b0e12); border-color: var(--pc); }
/* the playhead: a lit column that stays inside each cell, never spilling into its neighbours */
.play-cell.now { background-color: rgba(237, 240, 238, .16); border-color: rgba(237, 240, 238, .55); }
.play-cell.now[aria-pressed="true"] { filter: brightness(1.35) saturate(1.1); border-color: #fff; }
.play-note, .play-status { margin: 0; color: var(--muted); font-size: 14px; }
.play-status { color: var(--text); }
.play-controls { display: grid; gap: 12px; }
.play-surface-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.play-dice { color: var(--text); border-color: var(--amber); }
.play-dice:hover { background: var(--amber); color: var(--bg); }
.play-surface-name { color: var(--muted); font-size: 13px; }
.surface-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 18px; }
.surface-knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 10px; }
.rk { display: grid; justify-items: center; gap: 4px; text-align: center; }
.rk-name { font-size: 12.5px; color: var(--muted); line-height: 1.2; }
.rk output { font-size: 12.5px; font-weight: 600; }
.rk-dial {
  --u: 0.5; position: relative; width: 58px; height: 58px; border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: conic-gradient(from 225deg, var(--amber) calc(var(--u) * 270deg), rgba(237, 240, 238, .1) 0 270deg, transparent 0);
}
.rk-dial::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a3036, #12161a); box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .6); }
.rk-dial::after { content: ""; position: absolute; left: 50%; top: 9px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #fff; transform-origin: 50% 20px; transform: rotate(calc(-135deg + var(--u) * 270deg)); }
.rk-dial:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.xy-pad {
  position: relative; height: 230px; border-radius: 16px; cursor: crosshair; touch-action: none; overflow: hidden;
  background: linear-gradient(rgba(237, 240, 238, .05) 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, rgba(237, 240, 238, .05) 1px, transparent 1px) 0 0 / 12.5% 100%, radial-gradient(circle at 70% 30%, rgba(224, 87, 127, .25), transparent 60%), #0c0f13;
  border: 1px solid var(--line-2);
}
.xy-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--rasp) 55%, transparent 72%); box-shadow: 0 0 30px 6px rgba(224, 87, 127, .6); pointer-events: none; }
.xy-x, .xy-y { position: absolute; font-size: 12.5px; color: var(--muted); pointer-events: none; }
.xy-x { left: 12px; bottom: 8px; }
.xy-y { left: 12px; top: 8px; }
.macro { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.macro-dial { width: 132px; height: 132px; background: conic-gradient(from 225deg, var(--rasp), var(--amber) calc(var(--u) * 270deg), rgba(237, 240, 238, .1) 0 270deg, transparent 0); }
.macro-dial::before { inset: 10px; }
.macro-dial::after { top: 16px; height: 26px; width: 4px; margin-left: -2px; transform-origin: 50% 50px; }
.macro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; font-size: 13px; color: var(--muted); }
.macro-list li { display: flex; justify-content: space-between; gap: 8px; margin: 0; border-bottom: 1px solid var(--line); padding: 3px 0; }
.macro-list output { color: var(--text); font-weight: 600; }
.play-knob { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.play-knob input { grid-column: span 2; accent-color: var(--amber); }
.play-knob output { color: var(--text); font-weight: 600; }
.play-pick-head { display: grid; gap: 10px; margin-top: 8px; }
.play-pick-h { margin: 0; font-size: 20px; }
.play-pick-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.play-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.play-kinds .play-chip { flex: none; }
.play-views { display: flex; gap: 4px; }
.play-view { width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.play-view[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.play-engines { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding: 2px; }
.play-engines[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.play-engines[data-view="list"] { grid-template-columns: 1fr; gap: 4px; }
.play-engine { position: relative; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; padding: 0; cursor: pointer; background: #111; color: var(--text); text-align: left; transition: transform .2s var(--ease), border-color .2s; }
.play-engine:hover { border-color: var(--line-2); }
.play-engine[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.pe-art { display: block; position: relative; }
.pe-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pe-text { display: flex; flex-direction: column; gap: 2px; }
.pe-text strong { font: 700 15px/1.1 var(--display); }
.pe-text small { color: var(--muted); font-size: 12px; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-text em { font-style: normal; align-self: flex-start; }
.play-engines[data-view="grid"] .play-engine { aspect-ratio: 1.1; }
.play-engines[data-view="grid"] .pe-art { position: absolute; inset: 0; }
.play-engines[data-view="grid"] .pe-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; background: linear-gradient(to top, rgba(4, 5, 8, .9), transparent); }
.play-engines[data-view="grid"] .pe-text em { display: none; }
.play-engines[data-view="list"] .play-engine { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-left: 3px solid var(--acc); }
.play-engines[data-view="list"] .pe-art { width: 64px; height: 44px; border-radius: 8px; overflow: hidden; }
.play-engines[data-view="list"] .pe-text { flex-direction: row; align-items: center; gap: 12px; }
.play-engines[data-view="list"] .pe-text small { flex: 1; }
@media (max-width: 980px) { .play { grid-template-columns: minmax(0, 1fr); } .play-side { position: static; padding: 0 var(--gutter) 20px; order: -1; } .play-side .play-picker { order: 2; } .play-stage { height: 46vw; } .play-side .play-engines { max-height: 420px; } }

/* ---------- builders strip ---------- */
.build { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(24px, 4vw, 80px); padding: clamp(56px, 9vw, 130px) var(--gutter); }
.build h2 { margin-top: 0; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.facts li { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.facts strong { display: block; font: 800 34px/1 var(--display); color: var(--text); margin-bottom: 6px; }

/* ---------- engine page ---------- */
.engine-world { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(56vh, 540px); overflow: hidden; border-bottom: 1px solid var(--line); }
.engine-world canvas { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: min(56vh, 540px); display: block; }
.engine-world::after { content: ""; position: absolute; top: 0; bottom: 0; left: 46%; width: 18%; pointer-events: none; background: linear-gradient(to right, var(--bg), transparent); }
.engine-world-copy { grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 2; padding: clamp(28px, 4vw, 56px) var(--gutter) 32px; }
.engine-world-copy h1 { margin: 0; font-size: clamp(48px, 7vw, 120px); line-height: .9; }
.engine-story { font: 600 clamp(20px, 2vw, 28px)/1.2 var(--display); margin: 14px 0 0; }
.engine-world .lede { color: #d7dcdc; max-width: 52ch; font-size: clamp(16px, 1.25vw, 19px); }
@media (max-width: 860px) {
  .engine-world { grid-template-columns: 1fr; }
  .engine-world canvas { grid-column: 1; grid-row: 1; min-height: 52vw; height: 52vw; }
  .engine-world-copy { grid-column: 1; grid-row: 2; padding-top: 20px; }
  .engine-world::after { display: none; }
}
.engine-world .cover-play.hero-play { position: static; width: 52px; height: 52px; }
.crumbs { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.crumbs a { color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
.badges .tier { font-size: 13px; padding: 5px 12px; }
.id { background: rgba(7, 8, 11, .5); }
.engine { padding: 0 var(--gutter) 60px; }
.engine-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.engine-side { position: sticky; top: 110px; margin-top: 96px; }
.engine-main { min-width: 0; }
@media (max-width: 900px) { .engine-cols { grid-template-columns: 1fr; } .engine-side { position: static; order: -1; margin-top: 28px; } }
.hear h2 { margin-top: 1.2em; }
.hear .demo { display: grid; gap: 8px; color: var(--muted); }
.hear audio { width: 100%; }
.sournd-preview .sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sournd-preview .sp-act { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; }
.sournd-preview .sp-act:hover { border-color: var(--sp-text); }
.sournd-preview .sp-act svg { opacity: .85; }
.sournd-preview .sp-locked { margin-left: 4px; color: var(--sp-muted); font-size: 0.85rem; }
.sournd-preview { --card: var(--panel-solid); --sp-text: var(--text); --sp-muted: var(--muted); --sp-divider: var(--line-2); --sp-border: var(--line-2); --sp-primary: var(--petrol); --sp-accent: var(--rasp); }

/* ---------- spec sheet ---------- */
.specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.specs div { background: var(--panel-solid); padding: 14px 16px; min-width: 0; }
.specs dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.specs dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.specs code { font-size: 14px; }

/* ---------- cart ---------- */
.cart-icon { display: inline-block; width: 18px; height: 16px; vertical-align: -3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 1h2.4l2 9.2h8.8L16 4H4.4' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='6.6' cy='13.6' r='1.4'/%3E%3Ccircle cx='13' cy='13.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 1h2.4l2 9.2h8.8L16 4H4.4' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='6.6' cy='13.6' r='1.4'/%3E%3Ccircle cx='13' cy='13.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--amber); background: rgba(244, 163, 64, .12); color: var(--text); font: 700 14px/1 var(--ui); cursor: pointer; flex: none; }
.cart-btn.bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.18); } }
.cart-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--amber); color: #12060b; display: inline-grid; place-items: center; font-size: 12px; }
.cart-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .55); }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: min(440px, 100vw); display: flex; flex-direction: column; gap: 14px;
  padding: 22px; background: #0e1216; border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .8);
  transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto;
}
.cart.in { transform: none; }
html.cart-open { overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; }
.cart-head h2 { margin: 0; font-size: 30px; }
.cart-close, .cart-remove { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; position: relative; flex: none; }
.cart-close::before, .cart-close::after, .cart-remove::before, .cart-remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--text); transform: translate(-50%, -50%) rotate(45deg); }
.cart-close::after, .cart-remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cart-remove { width: 30px; height: 30px; border: 0; opacity: .6; }
.cart-remove:hover { opacity: 1; }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cart-list li { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; margin: 0; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.cart-thumb { display: block; width: 56px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--panel-solid); }
.cart-thumb canvas { width: 100%; height: 100%; display: block; }
.cart-item { display: grid; min-width: 0; }
.cart-item a { color: var(--text); font: 700 16px/1.2 var(--display); text-decoration: none; }
.cart-item small { color: var(--muted); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-price { font-weight: 700; }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px; border-top: 1px solid var(--line-2); font-size: 18px; }
.cart-total { font: 800 30px/1 var(--display); }
.cart-nudge { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(159, 230, 196, .1); border: 1px solid rgba(159, 230, 196, .35); font-size: 14px; }
.cart-form { display: grid; gap: 8px; }
.cart-form label { font-size: 14px; font-weight: 600; color: var(--muted); }
.cart-form input, .cart-form select { min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); color: var(--text); font: 500 16px var(--ui); }
.cart-empty { color: var(--muted); }
.cart-clear { align-self: flex-start; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: 500 14px var(--ui); padding: 0; }
.cover-add {
  position: absolute; top: 14px; right: 64px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(7, 8, 11, .45); backdrop-filter: blur(6px); color: #fff; cursor: pointer;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--ease), background .2s;
}
.cover.is-hot .cover-add, .cover-add.in-cart, .cover-add:focus-visible { opacity: 1; transform: none; }
.cover-add:hover { background: var(--amber); color: #12060b; }
.cover-add.in-cart { background: var(--amber); border-color: var(--amber); color: #12060b; }
@media (hover: none) { .cover-add { opacity: 1; transform: none; } }
.buy-card { gap: 12px; }
.buy-price { margin: 0; font: 800 44px/1 var(--display); }
.buy-price span { font: 500 15px var(--ui); color: var(--muted); }
.buy-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: #cfd5d6; font-size: 15px; }
.buy-points li { margin: 0; padding-left: 20px; position: relative; }
.buy-points li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 5px; border-left: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: rotate(-45deg); }
.buy-add { width: 100%; gap: 8px; min-height: 52px; font-size: 17px; }
.buy-add.in-cart { background: var(--panel-solid); color: var(--text); border: 1px solid var(--amber); box-shadow: none; }
.buy-now summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.buy-now form { display: grid; gap: 8px; margin-top: 10px; }
.buy-sub { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- knobs (Box Of Rules plugin style) ---------- */
.knob { display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.knob-cap-label { font: 700 11px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #EDE7DA; max-width: calc(var(--size) + 40px); }
.knob-face { width: var(--size); height: var(--size); cursor: ns-resize; touch-action: none; overflow: visible; }
.knob-ring { fill: none; stroke: #2A2C30; stroke-width: 2; }
.knob-arc { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.knob-ptr { stroke: #EDE7DA; stroke-width: 2; stroke-linecap: round; }
.knob-halo circle { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0; transition: opacity .2s; }
.knob:hover .knob-halo circle:nth-child(1), .knob.drag .knob-halo circle:nth-child(1), .knob:focus-within .knob-halo circle:nth-child(1) { opacity: .26; }
.knob:hover .knob-halo circle:nth-child(2), .knob.drag .knob-halo circle:nth-child(2), .knob:focus-within .knob-halo circle:nth-child(2) { opacity: .16; }
.knob:hover .knob-halo circle:nth-child(3), .knob.drag .knob-halo circle:nth-child(3), .knob:focus-within .knob-halo circle:nth-child(3) { opacity: .08; }
.knob-value { font: 600 14px/1 var(--ui); color: #EDE7DA; font-variant-numeric: tabular-nums; min-height: 1em; }
/* the range input stays for keyboard and assistive tech, drawn as the knob */
.knob-input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.knob:focus-within .knob-face { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }
.sournd-preview .sp-params:has(.has-knob) { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 10px; }
.sournd-preview .sp-param.has-knob { display: block; }
.sournd-preview .sp-param.has-knob > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.surface-knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 8px; }
.surface-knobs .play-knob { display: block; }
.surface-knobs .play-knob > span:first-child { display: none; }

/* ---------- tabs and the bottom drawer ---------- */
.tabs { margin: 40px 0 0; }
.tab-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-2); }
.tabs:not(.tabs-on) .tab-list { display: none; }
.tab-list [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: 700 16px/1 var(--display); cursor: pointer; }
.tab-list [role="tab"] i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); opacity: .6; }
.tab-list [role="tab"]:hover { color: var(--text); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--tc); }
.tab-list [role="tab"][aria-selected="true"] i { opacity: 1; box-shadow: 0 0 10px var(--tc); }
.tab-panel { padding: 18px 0 0; }
.tabs-on .tab-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tab-panel > ul { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.tab-panel > ul li { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(10, 13, 17, .97); backdrop-filter: blur(16px); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8); }
.drawer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #6BBCC6, #F4A340, #E0577F, #B388FF); }
.drawer-bar { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 var(--gutter); background: none; border: 0; color: var(--text); cursor: pointer; text-align: left; }
.drawer-badge { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 8px; background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; font: 800 13px/1 var(--ui); }
.drawer-title { font: 700 17px/1 var(--display); }
.drawer-hint { color: var(--muted); font-size: 14px; }
.drawer-chev { margin-left: auto; width: 12px; height: 12px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-135deg); transition: transform .3s var(--ease); }
.drawer.open .drawer-chev { transform: rotate(45deg); }
.drawer-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.drawer.open .drawer-body { max-height: min(64vh, 580px); overflow-y: auto; }
.drawer-tabs { margin: 0; padding: 4px var(--gutter) 22px; }
.drawer-tabs .tab-list { border: 0; gap: 8px; padding: 4px 0 10px; }
.drawer-tabs .tab-list [role="tab"] { padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 99px; margin: 0; font-size: 15px; color: var(--text); }
.drawer-tabs .tab-list [role="tab"]:hover { background: color-mix(in srgb, var(--tc) 14%, transparent); }
.drawer-tabs .tab-list [role="tab"][aria-selected="true"] { background: var(--tc); border-color: var(--tc); color: #0b0e12; }
.drawer-tabs .tab-list [role="tab"][aria-selected="true"] i { background: #0b0e12; box-shadow: none; }
.drawer-tabs .tab-panel { padding-top: 6px; }
.drawer-tabs .code { margin-top: 4px; border-color: color-mix(in srgb, var(--tc) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 8%, #0b0e12), #0b0e12 70%); box-shadow: 0 20px 50px -30px var(--tc); }
.drawer-tabs .code-bar { color: var(--tc); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; border-bottom-color: color-mix(in srgb, var(--tc) 25%, transparent); }
.drawer-tabs .copy { --cc: var(--tc); }
.drawer-tabs pre { font-size: 15px; line-height: 1.7; }
/* syntax colours (static/world/site-world.js tags the tokens) */
.tk-fn { color: #6BBCC6; font-weight: 700; }
.tk-str { color: #9BE564; }
.tk-num { color: #F4A340; }
.tk-com { color: #7f8a8e; font-style: italic; }
.tk-kw { color: #E0577F; font-weight: 700; }
.tk-ty { color: #B388FF; }
.tk-path { color: #FFD166; }
body.has-drawer { padding-bottom: 56px; }
@media (max-width: 600px) { .drawer-hint { display: none; } }

/* ---------- forms, plans ---------- */
.buy { display: grid; gap: 8px; padding: 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2); backdrop-filter: blur(10px); }
.buy label { font-weight: 600; font-size: 14px; color: var(--muted); }
.buy input[type="email"], .buy select { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); color: var(--text); font: 500 16px var(--ui); }
.buy .cta-row { margin-top: 8px; }
.buy > button { margin-top: 8px; }
.buy .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.buy .count { font-size: 13px; }
.notice { padding: 12px 16px; border-radius: 12px; background: rgba(107, 188, 198, .12); border: 1px solid rgba(107, 188, 198, .4); }
.page-head { padding: clamp(40px, 7vw, 100px) 0 10px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; align-items: stretch; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 12%, #11151a), #0e1216 55%); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); }
.plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc); }
.plan.plan-hl { border: 2px solid var(--pc); box-shadow: 0 40px 90px -40px var(--pc); transform: translateY(-8px); }
.plan-tag { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pc); display: flex; align-items: center; gap: 8px; }
.plan-reco { align-self: flex-start; padding: 5px 12px; border-radius: 99px; background: var(--pc); color: #12060b; }
.plan h2 { margin: 0; font-size: 28px; }
.price { margin: 0; font: 800 clamp(40px, 3.4vw, 54px)/1 var(--display); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price span { font: 500 16px var(--ui); color: var(--muted); }
/* A plan on offer: the usual price struck through, the offer price big beside it. */
.price-offer s { font-size: .5em; font-weight: 600; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--rasp); }
.price-offer b { color: var(--pc); font-weight: 800; }
.price-offer span.visually-hidden { font-size: 1px; }
.plan-what { margin: 0; color: #dfe4e4; font-size: 15.5px; }
.plan-sell { margin: 28px 0 20px; }
.plan-sell .plan-what, .plan-note { max-width: 64ch; }
.plan-note { margin: 0; color: var(--muted); font-size: 14.5px; }
.plan-sell .plan-btn { align-self: flex-start; margin-top: 4px; }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--muted); font-size: 14.5px; }
.page-links .jump { --acc: var(--link); color: var(--text); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 8px; font-size: 15px; color: #cfd5d6; flex: 1; }
.plan li { margin: 0; padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--pc); border-bottom: 2px solid var(--pc); transform: rotate(-45deg); }
.plan .buy { padding: 0; background: none; border: 0; backdrop-filter: none; margin-top: 4px; }
.plan-btn { background: transparent; color: var(--text); border: 1px solid var(--pc); }
.plan-btn:hover { background: var(--pc); color: #0b0e12; }
.save { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.plan-offer { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 16%, transparent); color: #f3e6d4; font-size: 14.5px; }
.plan-offer b { color: var(--pc); }
.plan .save { background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }

/* ---------- docs ---------- */
.doc { max-width: var(--read); margin: 0 auto; padding: 40px 0 80px; }
.doc h1 { font-size: clamp(44px, 6vw, 84px); }
.engine-main h2 { font-size: clamp(28px, 3vw, 44px); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.code { position: relative; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--code); overflow: hidden; }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.copy { --cc: var(--petrol); display: inline-flex; align-items: center; gap: 7px; background: var(--cc); color: #0b0e12; border: 1px solid var(--cc); border-radius: 99px; padding: 7px 14px; font: 700 13px var(--ui); cursor: pointer; }
.copy::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--copy-ico) center / contain no-repeat; mask: var(--copy-ico) center / contain no-repeat; --copy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Cpath d='M8 1.75H2.5a.75.75 0 0 0-.75.75V8'/%3E%3C/svg%3E"); }
.copy:hover { background: var(--text); border-color: var(--text); }
.copy:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.copy.done { background: transparent; color: var(--cc); }
.copy.done::before { --copy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1.5 6.5l3 3 6-7'/%3E%3C/svg%3E"); }
.code-prompt { cursor: copy; border-color: var(--line-2); }
.code-prompt:hover, .code-prompt.done { border-color: var(--petrol); }
.code-prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
pre code { background: none; padding: 0; font-weight: 500; }
ul, ol { padding-left: 1.3em; }
li { margin: .25em 0; }

/* ---------- What are sOURnd engines? (scrolling story) ---------- */
.explain-hero { min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px var(--gutter) 70px; background: radial-gradient(900px 500px at 75% 30%, rgba(224, 87, 127, .18), transparent 60%), radial-gradient(700px 500px at 20% 80%, rgba(107, 188, 198, .12), transparent 60%); }
.explain-hero h1 { margin: 0; font-size: clamp(52px, 9vw, 150px); line-height: .9; max-width: 11ch; }
.explain-hero .lede { margin-top: 24px; max-width: 52ch; }
.scroll-cue { margin: 40px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(8px); opacity: .5; } }
.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(20px, 4vw, 70px); padding: 0 var(--gutter); }
.story-stage { position: sticky; top: 57px; height: calc(100vh - 57px); display: grid; place-items: center; }
.story-frame { position: relative; width: 100%; max-width: 900px; aspect-ratio: 4 / 3; border-radius: 28px; background: radial-gradient(circle at 50% 40%, #151a22, #090b0e 70%); border: 1px solid var(--line); box-shadow: 0 50px 120px -60px rgba(224, 87, 127, .5); overflow: hidden; }
.story-svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--ui); }
.story-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; }
.story-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(237, 240, 238, .2); transition: all .4s; }
.story-steps { padding: 20vh 0 30vh; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s; }
.step.on { opacity: 1; }
.step-n { margin: 0; font: 800 18px/1 var(--display); color: var(--rasp); }
.step h2 { margin: 12px 0 16px; font-size: clamp(32px, 3.6vw, 60px); line-height: .98; }
.step p:last-child { color: #cfd5d6; font-size: clamp(17px, 1.3vw, 20px); max-width: 44ch; margin: 0; }
.explain-end { padding: clamp(60px, 10vw, 150px) var(--gutter); text-align: center; border-top: 1px solid var(--line); background: radial-gradient(800px 400px at 50% 100%, rgba(244, 163, 64, .14), transparent 70%); }
.explain-end h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(40px, 6vw, 100px); line-height: .95; }
.explain-end .cta-row { justify-content: center; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-stage { top: 96px; height: auto; padding: 10px 0; z-index: 2; background: var(--bg); }
  .story-frame { max-width: 520px; }
  .story-steps { padding: 6vh 0 20vh; }
  .step { min-height: 60vh; }
}

/* the diagram */
.story-svg .sc { opacity: 0; transform: translateY(16px) scale(.98); transform-origin: 400px 300px; transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
.story-stage[data-step="1"] [data-s="1"], .story-stage[data-step="2"] [data-s="2"], .story-stage[data-step="3"] [data-s="3"],
.story-stage[data-step="4"] [data-s="4"], .story-stage[data-step="5"] [data-s="5"], .story-stage[data-step="6"] [data-s="6"],
.story-stage[data-step="7"] [data-s="7"] { opacity: 1; transform: none; }
.story-stage[data-step="1"] [data-dot="1"], .story-stage[data-step="2"] [data-dot="2"], .story-stage[data-step="3"] [data-dot="3"],
.story-stage[data-step="4"] [data-dot="4"], .story-stage[data-step="5"] [data-dot="5"], .story-stage[data-step="6"] [data-dot="6"],
.story-stage[data-step="7"] [data-dot="7"] { background: var(--amber); width: 24px; border-radius: 4px; }
.story-svg text { fill: var(--text); font-size: 17px; }
.story-svg .cap { fill: var(--muted); font-size: 16px; letter-spacing: .04em; }
.story-svg .cap.big { fill: var(--text); font: 700 34px var(--display); letter-spacing: 0; }
.story-svg .wave { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.story-svg .wave.in { stroke: url(#cool); }
.story-svg .wave.out { stroke: url(#hot); }
.story-svg .flow { fill: none; stroke: rgba(237, 240, 238, .35); stroke-width: 2; stroke-dasharray: 4 10; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.story-svg .eng-box { fill: #141920; stroke: url(#hot); stroke-width: 3; }
.story-svg .eng-glow { fill: url(#hot); opacity: .16; animation: breathe 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { opacity: .34; transform: scale(1.04); } }
.story-svg .eng-label { font: 800 28px var(--display); fill: var(--text); }
.story-svg .ring { fill: none; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.story-svg .r1 { stroke: #6BBCC6; fill: rgba(107, 188, 198, .05); }
.story-svg .r2 { stroke: #B388FF; fill: rgba(179, 136, 255, .06); }
.story-svg .r3 { stroke: url(#hot); fill: rgba(224, 87, 127, .14); animation: breathe 2s ease-in-out infinite; }
.story-svg .ring-t { font-size: 18px; font-weight: 600; }
.story-svg .ring-t.core { font: 800 22px var(--display); }
.story-svg .wire { fill: none; stroke: url(#hot); stroke-width: 2.5; stroke-dasharray: 260; stroke-dashoffset: 260; }
.story-stage[data-step="3"] .wire { animation: draw 1s var(--ease) forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.story-svg .port circle { fill: var(--amber); }
.story-svg .pid { fill: var(--amber); font-weight: 800; }
.story-svg .pname { font-weight: 700; }
.story-svg .prange { fill: var(--muted); font-size: 15px; }
.story-svg .ctl { opacity: 0; animation: cyc 9s infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes cyc { 0% { opacity: 0; } 3%, 15% { opacity: 1; } 18%, 100% { opacity: 0; } }
.story-svg .kb { fill: #1b2129; stroke: var(--amber); stroke-width: 4; }
.story-svg .kb-i { stroke: #fff; stroke-width: 6; stroke-linecap: round; transform-origin: 590px 300px; animation: twist 3s ease-in-out infinite alternate; }
@keyframes twist { from { transform: rotate(-120deg); } to { transform: rotate(120deg); } }
.story-svg .fd { fill: rgba(237, 240, 238, .15); }
.story-svg .fd-h { fill: var(--amber); }
.story-svg .xy { fill: #10141a; stroke: var(--line-2); stroke-width: 2; }
.story-svg .xy-d { fill: var(--rasp); animation: orbit 3s ease-in-out infinite; }
@keyframes orbit { 25% { transform: translate(-90px, 40px); } 50% { transform: translate(-40px, 120px); } 75% { transform: translate(20px, 60px); } }
.story-svg .pd { fill: #1b2129; stroke: var(--amber); stroke-width: 3; transform-origin: 590px 380px; animation: rock 1.6s ease-in-out infinite alternate; }
@keyframes rock { to { transform: rotate(-6deg); } }
.story-svg .pd-b { fill: #2a3038; }
.story-svg .pad { fill: rgba(237, 240, 238, .1); animation: hitp 1.8s infinite; animation-delay: calc(var(--p) * .2s); }
@keyframes hitp { 0%, 10% { fill: var(--rasp); } 30%, 100% { fill: rgba(237, 240, 238, .1); } }
.story-svg .bub { fill: #1b2129; stroke: var(--line-2); stroke-width: 2; }
.story-svg .bub-t { font-size: 21px; font-weight: 600; }
.story-svg .win { fill: #11151b; stroke: var(--line-2); stroke-width: 2; }
.story-svg .win-bar { fill: #191e25; }
.story-svg .dot { fill: rgba(237, 240, 238, .25); }
.story-svg .chip-e rect { fill: #1b2129; stroke: url(#hot); stroke-width: 2; }
.story-svg .chip-e text { font: 700 19px var(--display); }
.story-svg .mini-k { fill: #1b2129; stroke: var(--amber); stroke-width: 3; }
.story-svg .mini-k.big { stroke: url(#hot); stroke-width: 5; }
.story-svg .code rect { fill: #0b0e12; stroke: var(--line); }
.story-svg .type { font-size: 16px; fill: #9fe6c4; clip-path: inset(0 100% 0 0); }
.story-stage[data-step="5"] .type { animation: typed 1.1s steps(40) forwards; }
.story-stage[data-step="5"] .t2 { animation-delay: 1.1s; }
.story-stage[data-step="5"] .t3 { animation-delay: 2.2s; }
@keyframes typed { to { clip-path: inset(0 0 0 0); } }
.story-svg .ai circle { fill: url(#hot); animation: breathe 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.story-svg .ai path { fill: #fff; }
.story-svg .pop { opacity: 0; }
.story-stage[data-step="6"] .pop { animation: popin .5s var(--ease) forwards; }
.story-stage[data-step="6"] .p2 { animation-delay: .25s; }
.story-stage[data-step="6"] .p3 { animation-delay: .5s; }
@keyframes popin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.story-svg .src rect, .story-svg .spk rect { fill: #1b2129; stroke: var(--line-2); stroke-width: 2; }
.story-svg .spk circle { fill: none; stroke: var(--amber); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .story-svg * { animation: none !important; } .story-svg .type, .story-svg .pop, .story-svg .wire { clip-path: none; opacity: 1; stroke-dashoffset: 0; } .story-svg .ctl { opacity: 0; } .story-svg .ctl[style="--k:0"] { opacity: 1; } }


/* ---------- mobile first: menu sheet, touch wording ---------- */
.menu { display: none; }
.on-touch { display: none; }
@media (hover: none) { .on-mouse { display: none; } .on-touch { display: inline; } }

/* ---------- newsletter ---------- */
.news { display: grid; gap: 10px; }
.news-h { margin: 0; font: 800 22px/1.15 var(--display); }
.news-blurb { margin: 4px 0 0; color: #cfd5d6; font-size: 15px; }
.news-row { display: flex; gap: 8px; flex-wrap: wrap; }
.news-row input { flex: 1 1 220px; min-height: 46px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); color: var(--text); font: 500 16px var(--ui); }
.news-row input:focus { border-color: var(--petrol); outline: none; box-shadow: 0 0 0 3px rgba(107, 188, 198, .25); }
.news-consent { display: flex; align-items: flex-start; gap: 10px; color: #cfd5d6; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.news-consent[hidden] { display: none; }
.news-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--petrol); cursor: pointer; }
.news-done { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(159, 230, 196, .1); border: 1px solid rgba(159, 230, 196, .35); color: #dff7ea; }
.news-band { padding: clamp(40px, 6vw, 80px) var(--gutter); }
.news-band .news { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 14px 40px; padding: clamp(24px, 3vw, 40px); border-radius: 26px; border: 1px solid rgba(107, 188, 198, .35);
  background: radial-gradient(600px 300px at 0% 0%, rgba(107, 188, 198, .18), transparent 70%), radial-gradient(600px 300px at 100% 100%, rgba(224, 87, 127, .16), transparent 70%), #0e1216; }
.news-band .news-h { font-size: clamp(28px, 3.4vw, 46px); line-height: 1; }
.news-band .news-copy { grid-row: span 3; }
@media (max-width: 860px) { .news-band .news { grid-template-columns: 1fr; } .news-band .news-copy { grid-row: auto; } }
.news-side { margin-top: 16px; padding: 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2); }
.news-side .news-h { font-size: 18px; }
.news-inline { padding: 16px; border-radius: 16px; border: 1px dashed var(--line-2); }
.news-inline .news-h { font-size: 18px; }
.news-foot { max-width: 620px; margin: 0 0 28px; }
.explain-end .news { max-width: 620px; margin: 40px auto 0; text-align: left; }

/* ---------- consent card, FAQ ---------- */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 97; max-width: 380px; padding: 16px 18px; border-radius: 18px; background: rgba(14, 18, 22, .97); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.has-drawer .consent { bottom: 72px; }
.consent p { margin: 0 0 12px; font-size: 14.5px; color: #cfd5d6; }
.consent div { display: flex; gap: 8px; }
.consent .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
/* phones: the card spans the width and tightens, so it stops short of the buttons at the top of a page
   (it sat over both of the home page's main buttons; 202px down to 145px on a 375 by 812 screen) */
@media (max-width: 600px) {
  .consent { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 12px 14px; border-radius: 14px; }
  .consent p { margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
  .consent .btn { min-height: 36px; }
}
.faq { max-width: 860px; margin: 60px 0 20px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font: 700 19px/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber); font-size: 24px; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: #cfd5d6; max-width: 70ch; }

/* ---------- footer, cursor light ---------- */
.foot { padding: clamp(44px, 6vw, 72px) var(--gutter) 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.foot a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--text); }
.foot .news-foot { margin: 0 0 clamp(36px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 40px; align-items: center; }
.foot .news-foot .news-copy { grid-row: span 3; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.foot-brand { max-width: 320px; }
.foot-mark { display: inline-block; margin-bottom: 14px; }
.foot-mark img { display: block; height: 28px; width: auto; }
.foot-tag { margin: 0 0 6px; color: var(--text); font: 700 16px/1.35 var(--display); }
.foot-mission { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; }
.foot-social { display: flex; gap: 8px; }
.foot-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); }
.foot-social a:hover, .foot-social a:focus-visible { border-color: var(--text); }
.foot-h { margin: 0 0 12px; color: var(--text); font: 700 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: clamp(36px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.foot-base p { margin: 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; max-width: 440px; } }
@media (max-width: 860px) { .foot .news-foot { grid-template-columns: 1fr; } .foot .news-foot .news-copy { grid-row: auto; } }
@media (max-width: 620px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-base { flex-direction: column; align-items: flex-start; } }
.cursor-glow { position: fixed; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 60; background: radial-gradient(circle, rgba(244, 163, 64, .07), rgba(224, 87, 127, .04) 35%, transparent 65%); mix-blend-mode: screen; }

@media (max-width: 1100px) {
  /* no backdrop-filter here: it would trap the fixed menu sheet inside the header */
  .top { gap: 10px; padding-top: 10px; padding-bottom: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 8, 11, .94); }
  .top nav {
    position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 28px 40px;
    background: rgba(7, 8, 11, .97); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .top.nav-open nav { opacity: 1; visibility: visible; transform: none; }
  .top nav a { font: 800 clamp(28px, 7.5vw, 42px)/1.1 var(--display); color: var(--text); padding: 10px 18px; align-self: flex-start; }
  .top nav a i { width: 12px; height: 12px; }
  .me-label { display: none; }
  .me { padding: 0 9px; }
  .try { margin-left: auto; }
  .sound { padding: 7px 10px; }
  .sound-bars + span { display: none; }
  .menu { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(237, 240, 238, .06); cursor: pointer; position: relative; z-index: 90; }
  .menu-bars { display: grid; gap: 5px; }
  .menu-bars i { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }
  .nav-open .menu-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .menu-bars i:nth-child(2) { opacity: 0; }
  .nav-open .menu-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .brand, .try, .sound { position: relative; z-index: 90; }
  .eco-bar { top: 63px; }
  .field-hint { left: var(--gutter); right: auto; bottom: 14px; }
}
@media (max-width: 520px) {
  .try { padding: 0 12px; min-height: 36px; font-size: 13.5px; }
  .brand img { height: 24px; }
  .field-copy { bottom: 54px; }
  .field-copy .cta-row .btn { flex: 1 1 auto; }
  .play-grid { overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .play-row { min-width: 600px; grid-template-columns: 80px repeat(16, minmax(0, 1fr)); }
  .play-cell { min-height: 28px; }
  .play-desk { gap: 14px; }
  .play-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .play-presets .play-chip { flex: none; }
  .play-bpm input { width: 96px; }
  .play-go { min-height: 52px; font-size: 19px; }
  .kicker { letter-spacing: .1em; }
  .play-engines[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .engine-world { height: auto; min-height: 78vh; }
  .biome-head h2 { font-size: 44px; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover { opacity: 1; transform: none; transition: none; }
  .cover-link, .cover canvas { transition: none; }
}

/* pricing: new blocks every day */
.plan-new { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 12px; font-weight: 700; font-size: 14.5px; color: var(--text); }
.plan-new i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, var(--amber)); box-shadow: 0 0 0 0 var(--pc, var(--amber)); animation: newdot 1.8s ease-out infinite; }
.plan-new a { color: var(--pc, var(--amber)); font-weight: 600; }
@keyframes newdot { 70% { box-shadow: 0 0 0 9px transparent; } }

/* contact form */
.contact-form input:not([type=checkbox]), .contact-form select, .contact-form textarea { min-height: 44px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); color: var(--text); font: 500 16px var(--ui); width: 100%; }
.contact-form textarea { min-height: 180px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Upcoming: one a day, fading into the future ---------- */
.up-head { padding-left: var(--gutter); padding-right: var(--gutter); }
.up { padding: 0 var(--gutter) 80px; }
.up-bar { position: sticky; top: 64px; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; background: linear-gradient(var(--bg) 70%, transparent); }
.up-toggle { display: inline-flex; padding: 4px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(237, 240, 238, .05); }
.up-toggle button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 700 14px/1 var(--ui); cursor: pointer; }
.up-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.up-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.up-row {
  --fade: clamp(.18, calc(1 - var(--i) * .045), 1);
  display: grid; grid-template-columns: 132px 140px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0;
  padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--acc); opacity: var(--fade); filter: grayscale(calc((1 - var(--fade)) * 1.2)); transition: opacity .3s, transform .3s var(--ease);
}
.up-row.up-open:hover { opacity: 1; filter: none; transform: translateX(4px); }
.up-art { position: relative; display: block; width: 132px; height: 84px; border-radius: 12px; overflow: hidden; background: #0c1014; }
.up-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.up-lock { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(237, 240, 238, .04) 0 8px, transparent 8px 16px); }
.up-lock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 13px; margin: -4px 0 0 -8px; border-radius: 3px; background: var(--muted); box-shadow: 0 -9px 0 -4px transparent; }
.up-lock::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -13px 0 0 -6px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 7px 7px 0 0; }
.up-when time { font: 800 20px/1.1 var(--display); color: var(--acc); }
.up-main { display: grid; gap: 2px; min-width: 0; }
.up-main strong { font: 800 24px/1.1 var(--display); }
.up-type { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.up-story { color: #cfd5d6; font-size: 15px; }
.up-peek { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--text); font: 700 14px/1 var(--ui); cursor: pointer; }
.up-peek:hover { background: var(--acc); color: #0b0e12; }
.up-locked { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .up-row { grid-template-columns: 96px 1fr; gap: 6px 14px; }
  .up-art { width: 96px; height: 70px; grid-row: span 3; }
  .up-act { grid-column: 2; }
  .up-main strong { font-size: 20px; }
}
.up-modal { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.up-sheet { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 24px; background: #0e1216; border: 1px solid var(--line-2); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); }
.up-sheet .cart-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(7, 8, 11, .6); }
.up-m-art { position: relative; min-height: 320px; }
.up-m-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.up-m-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.up-m-body h2 { margin: 0; font-size: 42px; }
.up-m-body p { margin: 0; color: #cfd5d6; }
.up-m-when { font: 700 16px var(--display); color: var(--amber) !important; }
.up-m-body .btn:disabled { opacity: .5; cursor: default; transform: none; }
@media (max-width: 760px) { .up-sheet { grid-template-columns: 1fr; } .up-m-art { min-height: 220px; } }

/* ---------- header icons: search and Ask ---------- */
.hdr-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 38px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(237, 240, 238, .04); color: var(--text); cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.hdr-ico:hover { border-color: var(--petrol); background: rgba(107, 188, 198, .12); transform: translateY(-1px); }
.hdr-ask:hover { border-color: #B388FF; background: rgba(179, 136, 255, .14); }
.hdr-ico[aria-current="page"] { color: #0b0e12; background: #B388FF; border-color: #B388FF; }

/* ---------- search sheet ---------- */
html.search-open { overflow: hidden; }
.search-sheet { position: fixed; inset: 0; z-index: 200; display: grid; justify-items: center; align-items: start; padding: clamp(12px, 9vh, 110px) 16px 16px; background: rgba(4, 5, 7, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search-sheet[hidden] { display: none; }
.search-box { width: min(680px, 100%); max-height: min(78vh, 720px); display: grid; grid-template-rows: auto 1fr auto; border-radius: 18px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(107, 188, 198, .08); overflow: hidden; animation: search-in .22s var(--ease); }
@keyframes search-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.search-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--petrol); }
.search-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 18px/1.3 var(--ui); }
.search-row input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--muted); font: 700 12px/1 var(--ui); padding: 6px 8px; cursor: pointer; }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.search-results li a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; }
.search-results li[aria-selected="true"] a { background: rgba(107, 188, 198, .12); box-shadow: inset 0 0 0 1px rgba(107, 188, 198, .35); }
.search-kind { grid-row: span 2; align-self: center; min-width: 74px; text-align: center; padding: 4px 8px; border-radius: 99px; font: 800 11px/1 var(--ui); letter-spacing: .02em; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kc) 40%, transparent); }
.search-t { font: 800 16px/1.25 var(--ui); }
.search-d { color: var(--muted); font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-none { padding: 18px 12px; color: var(--muted); }
.search-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
@media (max-width: 860px) {
  .hdr-ico { width: 38px; }
  .search-sheet { padding-top: 10px; }
  .search-box { max-height: calc(100dvh - 20px); }
  .search-kind { min-width: 0; }
}
@media (max-width: 420px) {
  .try { padding: 0 12px 0 10px; font-size: 14px; }
}

/* ---------- Ask sOURnd ---------- */
.ask { width: min(780px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--gutter) 48px; display: grid; gap: 18px; }
.ask-head h1 { margin: 4px 0 6px; font-size: clamp(40px, 6vw, 72px); line-height: .95; }
.ask .eyebrow { margin: 0; color: #B388FF; font: 800 15px/1 var(--ui); }
.ask .lede { margin: 0; color: var(--muted); max-width: 58ch; }
.ask-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ask-log:empty { display: none; }
.ask-msg { display: grid; gap: 6px; }
.ask-me { justify-items: end; }
.ask-bubble { max-width: min(640px, 92%); padding: 12px 16px; border-radius: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.ask-me .ask-bubble { background: linear-gradient(120deg, rgba(179, 136, 255, .22), rgba(107, 188, 198, .18)); border: 1px solid rgba(179, 136, 255, .35); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.ask-bot .ask-bubble { background: var(--panel-solid); border: 1px solid var(--line-2); border-bottom-left-radius: 6px; }
.ask-bot .ask-bubble p { margin: 0 0 .6em; }
.ask-bot .ask-bubble p:last-child, .ask-bot .ask-bubble ul:last-child, .ask-bot .ask-bubble ol:last-child { margin-bottom: 0; }
.ask-bot .ask-bubble ul, .ask-bot .ask-bubble ol { margin: 0 0 .6em; padding-left: 1.2em; }
.ask-bot .ask-bubble a { color: var(--petrol); }
.ask-error .ask-bubble { border-color: rgba(224, 87, 127, .5); color: #f1c3cf; }
.ask-thinking .ask-bubble { color: var(--muted); animation: ask-pulse 1s ease-in-out infinite alternate; }
@keyframes ask-pulse { from { opacity: .45; } to { opacity: 1; } }
.ask-sources { margin: 0 4px; color: var(--muted); font-size: 12.5px; }
.ask-sources a { color: var(--muted); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chip { border: 1px solid var(--line-2); border-radius: 99px; background: rgba(237, 240, 238, .04); color: var(--text); font: 600 14px/1.2 var(--ui); padding: 9px 14px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.ask-chip:hover { border-color: #B388FF; background: rgba(179, 136, 255, .12); }
.ask-form { position: sticky; bottom: 12px; display: flex; gap: 10px; align-items: flex-end; padding: 10px; border-radius: 20px; background: rgba(18, 22, 27, .92); border: 1px solid var(--line-2); box-shadow: 0 20px 60px -24px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ask-form textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 16px/1.45 var(--ui); padding: 8px 6px; max-height: 40vh; }
.ask-form .btn { flex: none; }
.ask-form .btn:disabled { opacity: .5; }
.ask-human { min-height: 0; }
.ask-human-show { min-height: 70px; }
.ask-note { margin: 0; color: var(--muted); font-size: 12.5px; }

/* Room for the search and Ask icons: the sound toggle drops its label before the nav wraps. */
@media (min-width: 861px) and (max-width: 1440px) {
  .top .sound .sound-bars + span { display: none; }
  .top .sound { padding: 7px 11px; }
}
@media (min-width: 861px) and (max-width: 1380px) {
  .top .me-label { display: none; }
  .top .me { padding: 0 11px; }
}

/* Phones: the Ask bubble and the sound toggle move out of the bar (Ask is in the menu). */
.top nav a.nav-ask { display: none; }
@media (max-width: 560px) {
  .top { gap: 8px; }
  .top .hdr-ask, .top .sound { display: none; }
  .top.nav-open nav a.nav-ask, .top nav a.nav-ask { display: inline-flex; }
}
@media (min-width: 561px) { .top nav a.nav-ask { display: none !important; } }
@media (max-width: 400px) {
  .top .brand img { width: 96px; height: auto; }
}
@media (max-width: 380px) {
  .top { gap: 6px; }
  .try { padding: 0 10px; font-size: 13px; gap: 6px; }
  .top .hdr-ico, .top .me { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 340px) { .top .me { display: none; } }

/* ---------- field tip: the engine's world, its type and licence, and the hold-to-hear ring ---------- */
.field-tip { width: 264px; padding: 10px 10px 12px; display: grid; gap: 6px; }
.field-tip .ft-scene { margin: 0 0 4px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1013; }
.field-tip .ft-canvas { display: block; width: 100%; height: 100%; }
.field-tip .ft-meta { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.field-tip .ft-type { color: var(--petrol); font: 800 11px/1 var(--ui); letter-spacing: .03em; text-transform: lowercase; }
.field-tip .ft-tier { margin-left: auto; padding: 3px 7px; border-radius: 99px; font: 800 10.5px/1 var(--ui); color: #9BE564; background: rgba(155, 229, 100, .12); border: 1px solid rgba(155, 229, 100, .35); }
.field-tip .ft-tier[data-tier="paid"] { color: var(--amber); background: rgba(244, 163, 64, .12); border-color: rgba(244, 163, 64, .4); }
.field-tip .ft-name { font: 700 20px/1.1 var(--display); }
.field-tip .ft-story { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.field-tip .ft-hear { pointer-events: auto; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 3px 12px 3px 3px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(237, 240, 238, .05); color: var(--text); font: 700 13px/1 var(--ui); cursor: pointer; }
.field-tip .ft-hear svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.field-tip .ft-ring-bg { fill: none; stroke: rgba(237, 240, 238, .14); stroke-width: 3; }
.field-tip .ft-ring { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.field-tip .ft-note { fill: var(--text); transform: rotate(90deg); transform-origin: 18px 18px; opacity: .85; }
.field-tip[data-ring="playing"] .ft-ring { stroke: #9BE564; animation: ft-pulse .9s ease-in-out infinite alternate; }
.field-tip[data-ring="off"] .ft-hear, .field-tip[data-ring="idle"] .ft-hear { display: none; }
@keyframes ft-pulse { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 560px) { .field-tip { width: 220px; } .field-tip .ft-name { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .field-tip[data-ring="playing"] .ft-ring { animation: none; } }
.field-tip[hidden] { display: none; }
@media (hover: none) { .field-tip { display: none !important; } } /* touch: no tile popup over the title */
.field .field-tip .ft-canvas { position: static; inset: auto; width: 100%; height: 100%; min-height: 0; z-index: auto; }

/* ---------- the Sound menu: one test sound for every engine, or that sound raw ---------- */
.sound-wrap { position: relative; flex: none; }
.sound-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 236px; padding: 8px; display: grid; gap: 2px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility .15s; }
.sound-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* bridge the gap so hover holds */
.sound-wrap:hover .sound-menu, .sound-wrap:focus-within .sound-menu, .sound-wrap.open .sound-menu { opacity: 1; visibility: visible; transform: none; }
.sound-menu-h { margin: 2px 8px 6px; color: var(--muted); font: 700 11.5px/1 var(--ui); }
.sound-menu button { display: grid; gap: 2px; text-align: left; padding: 9px 10px 9px 30px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: 700 14px/1.2 var(--ui); cursor: pointer; position: relative; }
.sound-menu button:hover, .sound-menu button:focus-visible { background: rgba(107, 188, 198, .12); }
.sound-menu button::before { content: ""; position: absolute; left: 10px; top: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); }
.sound-menu button[aria-checked="true"]::before { border-color: var(--petrol); background: radial-gradient(circle, var(--petrol) 0 3px, transparent 4px); }
.sound-menu .sound-raw { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; padding-top: 11px; }
.sound-menu .sound-raw::before { border-radius: 4px; top: 14px; }
.sound-menu .sound-raw[aria-checked="true"]::before { border-color: var(--amber); background: var(--amber); }
.sound-menu .sound-raw span { color: var(--muted); font: 500 12px/1.2 var(--ui); }
@media (max-width: 560px) { .top .sound-wrap { display: none; } }

/* Sound menu: a lede, then grouped sounds that scroll when the list grows, then Raw. */
.sound-menu-lede { margin: 2px 8px 8px; color: var(--muted); font: 500 12px/1.35 var(--ui); }
.sound-menu-list { display: grid; gap: 2px; max-height: min(52vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.sound-menu-list .sound-menu-h { margin: 8px 8px 4px; }
.sound-menu-list .sound-menu-h:first-child { margin-top: 0; }

/* Phones: Sound sits at the top of the menu sheet, with big touch targets. */
.top nav .nav-sound { display: none; }
@media (max-width: 560px) {
  .top.nav-open nav .nav-sound { display: grid; gap: 10px; width: 100%; padding: 4px 18px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .nav-sound-toggle { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 48px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(237, 240, 238, .05); color: var(--text); font: 800 17px/1 var(--ui); cursor: pointer; }
  .nav-sound-toggle[aria-pressed="true"] { background: rgba(224, 87, 127, .18); border-color: var(--rasp); }
  .nav-sound-toggle[aria-pressed="true"] .sound-bars i { animation: bars 0.9s ease-in-out infinite; }
  .nav-sound-list .sound-menu-lede { margin: 0 0 6px; font-size: 13px; }
  .nav-sound-list .sound-menu-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 34vh; }
  .nav-sound-list .sound-menu-list .sound-menu-h { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font: 700 12px/1 var(--ui); }
  .nav-sound-list button { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 700 15px/1 var(--ui); cursor: pointer; }
  .nav-sound-list button[aria-checked="true"] { border-color: var(--petrol); background: rgba(107, 188, 198, .16); }
  .nav-sound-list .sound-raw { display: inline-flex; flex-direction: column; justify-content: center; margin-top: 10px; padding: 8px 16px; text-align: left; }
  .nav-sound-list .sound-raw[aria-checked="true"] { border-color: var(--amber); background: rgba(244, 163, 64, .14); }
  .nav-sound-list .sound-raw span { color: var(--muted); font: 500 12px/1.2 var(--ui); margin-top: 3px; }
}
.ask-rate { display: flex; align-items: center; gap: 6px; margin: 0 4px; color: var(--muted); font-size: 12.5px; }
.ask-rate button { min-width: 36px; min-height: 32px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 15px; }
.ask-rate button[aria-pressed="true"] { border-color: var(--petrol); background: rgba(107, 188, 198, .16); }
.ask-rate button:disabled:not([aria-pressed="true"]) { opacity: .35; }

/* No layout shift when the tabs script runs: with JavaScript on (the html.js class is set in the
   head, before the page paints) the tabbed layout is there from the first frame. */
.js .tabs:not(.tabs-on) .tab-list { display: flex; }
.js .tabs:not(.tabs-on) .tab-panel:not(:first-of-type) { display: none; }
.js .tabs .tab-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* The hero canvas takes the row's height, never sets it: its pixel size changing must not move the page. */
.engine-world canvas { contain: size; }
/* The live-meter copy over the hero (static/preview/viz.css styles it): out of the flow from the
   first frame, so it cannot push the page while its own stylesheet loads. */
.sv-hero { position: absolute; opacity: 0; pointer-events: none; }
/* Play: reserve the picker and the engine blurb before the script fills them (no layout shift). */
@media (max-width: 900px) { .js .play-side .play-engines:empty { min-height: 420px; } }
.js .play-stage-copy [data-play-desc]:empty { min-height: 4.2em; }

/* ---------- your engines (the library, resources/views/store/library.blade.php) ---------- */
main.wide { padding: 28px var(--gutter) 80px; max-width: none; }
main.wide > .notice { margin: 0 0 20px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.ghost:hover { border-color: var(--text); }
.btn.danger { background: #c8323f; color: #fff; border: 1px solid #e0505c; box-shadow: 0 10px 40px -14px rgba(224, 80, 92, .8); }
.btn.danger:hover { background: #dc3b49; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lib-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.lib-head h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.lib-who { margin: 10px 0 0; color: var(--muted); }
.lib-who strong { color: var(--text); }
.lib-account { display: flex; gap: 10px; flex-wrap: wrap; }
.lib-account form { margin: 0; }
.lib-block { margin: 0 0 40px; }
.lib-block h2 { margin: 0 0 12px; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.lib-n { font: 700 14px/1 var(--ui); padding: 5px 10px; border-radius: 99px; background: rgba(237, 240, 238, .08); color: var(--muted); }
.lib-sub, .lib-note { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; max-width: 110ch; }
.lib-note { margin-top: 14px; }
.lib-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 14px; }
.lib-bar h2 { margin: 0; }
.lib-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.lib-sel { font-weight: 700; color: var(--text); font-size: 14.5px; }
.lib-consent { font-size: 13.5px; color: var(--muted); display: block; margin: 0; }
.lib-platform { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.lib-platform select { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); color: var(--text); font: 600 14.5px var(--ui); }
.lib-plat { white-space: nowrap; }
.lib-consent input { vertical-align: -3px; margin-right: 6px; }
.lib-err { color: #ff8a95; margin: 0 0 12px; }
.lib-empty { color: var(--muted); }
.lib-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 15, 19, .6); }
.lib-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lib-table th { text-align: left; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lib-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lib-table tbody tr:last-child td { border-bottom: 0; }
.lib-row { transition: background .15s; }
.lib-row:hover { background: rgba(237, 240, 238, .035); }
.lib-row.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--acc, var(--amber)); }
.lib-row.is-playing { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.lib-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--amber); cursor: pointer; }
.c-check { width: 44px; }
.c-prev { width: 132px; }
.lib-thumb { position: relative; display: block; width: 112px; height: 64px; border-radius: 12px; overflow: hidden; background: #0b0e12; box-shadow: 0 0 0 1px var(--line); }
.lib-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lib-thumb .cover-play { top: 50%; right: auto; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); }
.lib-thumb .cover-play:hover { transform: translate(-50%, -50%) scale(1.1); }
.lib-thumb .cover-play span { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
.lib-row.is-playing .lib-thumb { box-shadow: 0 0 0 2px var(--acc), 0 0 30px -6px var(--acc); }
.c-name a { font: 700 18px/1.2 var(--display); color: var(--text); text-decoration: none; display: block; }
.c-name a:hover { color: var(--acc); }
.c-name code { font-size: 12px; color: var(--muted); background: none; padding: 0; }
.c-type { color: var(--text); }
.c-type span { display: block; color: var(--acc, var(--muted)); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.lib-pill { display: inline-block; font: 700 12px/1 var(--ui); padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.lib-pill.own { background: rgba(155, 229, 100, .14); color: #9BE564; }
.lib-pill.plan { background: rgba(107, 188, 198, .14); color: #6BBCC6; }
.lib-dialog { max-width: 440px; padding: 24px 24px 20px; border-radius: 20px; border: 1px solid var(--line-2); background: #0e1216; color: var(--text); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); }
.lib-dialog::backdrop { background: rgba(5, 7, 9, .6); }
.lib-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.lib-dialog p { margin: 0 0 18px; color: #cfd5d6; font-size: 15px; }
.lib-dialog div { display: flex; gap: 10px; flex-wrap: wrap; }
.lib-pill.fail { background: rgba(244, 163, 64, .14); color: #F4A340; }
.lib-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.lib-status small { font-size: 13.5px; color: var(--muted); }
.lib-building { display: inline-flex; align-items: center; gap: 7px; }
.lib-building i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lib-spin .9s linear infinite; }
@keyframes lib-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lib-building i { animation: none; } }
/* the consent card sits over the bottom of the page until answered: leave room for it */
body:has(.consent:not([hidden])) main { padding-bottom: 200px; }
.lib-tier { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.c-key { min-width: 200px; }
.lib-key { padding: 9px 14px; font-size: 13.5px; }
.lib-key.is-done { border-color: #9BE564; color: #9BE564; }
.lib-key-state { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.c-open { width: 40px; text-align: right; }
.lib-open { color: var(--muted); text-decoration: none; font-size: 20px; }
.lib-open:hover { color: var(--text); }
.lib-builds td:first-child { white-space: nowrap; }
.lib-names { color: var(--muted); }
.c-act { text-align: right; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 40px; }
.lib-list { list-style: none; margin: 0; padding: 0; }
.lib-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lib-list form { margin: 0; }
.lib-list span { color: var(--muted); font-size: 14px; }
.lib-sub-block { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.lib-plan { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--line-2); background: rgba(12, 15, 19, .6); }
.lib-plan p { margin: 0 0 8px; }
.lib-plan-name { font: 700 22px/1.2 var(--display); display: flex; gap: 10px; align-items: center; }
.lib-renew { font-size: 16px; }
.lib-renew strong { color: var(--amber); }
.lib-plan form { margin: 0; }
@media (max-width: 760px) {
  .lib-table thead { display: none; }
  .lib-table:not(.lib-builds) tr { display: grid; grid-template-columns: 34px 96px minmax(0, 1fr); gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .lib-table:not(.lib-builds) td { padding: 0; border: 0; }
  .lib-table:not(.lib-builds) .c-check { grid-row: span 2; align-self: center; }
  .lib-table:not(.lib-builds) .c-prev { grid-row: span 2; width: auto; }
  .lib-thumb { width: 96px; height: 60px; }
  .lib-table:not(.lib-builds) .c-type, .lib-table:not(.lib-builds) .c-open { display: none; }
  .lib-table:not(.lib-builds) .c-access { grid-column: 3; }
  .lib-table:not(.lib-builds) .c-key { grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .lib-key-state { margin: 0; }
  .lib-builds td { display: block; border: 0; padding: 4px 14px; }
  .lib-builds tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .lib-plan { padding: 20px; }
}
.lib-free { margin-bottom: 14px; border-color: rgba(155, 229, 100, .4); }

/* ---------- Sounds: "Synths coming soon" while synths are parked (tools/synths_soon.py) ---------- */
.soon-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(30px, 4vw, 60px);
  background: radial-gradient(900px 500px at 80% 30%, rgba(255, 122, 198, .16), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(107, 188, 198, .12), transparent 60%); }
.soon-h { margin: 0; font-size: clamp(52px, 8.4vw, 136px); line-height: .9; text-transform: uppercase; letter-spacing: -.01em; max-width: 9ch; }
.soon-hero .lede { margin-top: 22px; max-width: 48ch; }
.soon-hero .kicker, .soon-offer .kicker { color: #FF7AC6; }
.soon-svg { display: block; width: 100%; height: auto; border-radius: 26px; background: #0c0f13; border: 1px solid var(--line); }
.soon-sec { padding: clamp(40px, 6vw, 90px) var(--gutter) 0; }
.soon-sec h2 { margin: 0 0 14px; line-height: .95; }
.soon-intro { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 62ch; }
.soon-fams { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.soon-fam { padding: 24px 22px; border-radius: 22px; background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 14%, #11151a), #0e1216 60%); border: 1px solid color-mix(in srgb, var(--fc) 38%, transparent); border-top: 4px solid var(--fc); }
.soon-fam h3 { margin: 0 0 8px; color: var(--fc); }
.soon-fam p { margin: 0; color: var(--muted); }
.soon-places { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.soon-places li { padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.soon-places strong { display: block; color: var(--text); margin-bottom: 4px; }
.soon-why { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.soon-why-i { padding: 24px 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.soon-why-i h3 { margin: 12px 0 8px; }
.soon-why-i p { margin: 0; color: var(--muted); }
.soon-offer { margin: clamp(50px, 7vw, 100px) var(--gutter) 0; padding: clamp(30px, 5vw, 70px); border-radius: 30px; text-align: center; border: 2px solid #F4A340;
  background: radial-gradient(700px 360px at 50% 100%, rgba(244, 163, 64, .18), transparent 70%), #0e1216; }
.soon-offer h2 { margin: 0 auto; max-width: 20ch; font-size: clamp(30px, 4.2vw, 60px); line-height: 1; }
.soon-offer .soon-intro { margin: 18px auto 0; }
.soon-offer .cta-row { justify-content: center; }
@media (max-width: 1000px) { .soon-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soon-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .soon-hero { grid-template-columns: 1fr; } .soon-places { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .soon-fams, .soon-why { grid-template-columns: 1fr; } }
.up-main strong .tier { margin-left: 8px; vertical-align: 4px; font-family: var(--ui); }

/* Product Hunt badge (timed, see product_hunt_html in tools/build.py) */
.ph-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.ph-badge[hidden] { display: none; }
.ph-badge img { display: block; width: 250px; max-width: 100%; height: auto; }
.ph-hero { margin-top: 18px; }
.ph-foot { margin-top: 18px; }
.ph-foot img { width: 200px; }

/* Free engine download card (engine pages) */
.buy-free .count { margin: 8px 0 14px; }
.buy-free .cta-row + .cta-row { margin-top: 10px; }

/* The About page's closing line on what sOURnd is for, linking to /ethics/. */
.explain-ethic { max-width: 62ch; margin: 28px auto 0; color: #c9d0d1; font-size: 16px; line-height: 1.5; }
.explain-ethic strong { color: var(--text); }

/* Home: hear one engine, then build it in (tools/build.py hear_build_html). Two steps side by side,
   then the three facts a developer needs before going further. */
.hearbuild { padding: clamp(48px, 7vw, 110px) var(--gutter) clamp(24px, 3vw, 44px); scroll-margin-top: 70px; }
.hearbuild .strip-head h2 { font-size: clamp(40px, 6vw, 92px); }
/* The engine's scene, a still, behind the heading: off to the right and faded into the page. */
.hearbuild { position: relative; isolation: isolate; }
.hb-art { position: absolute; z-index: -1; top: 0; right: 0; width: min(62%, 1180px); height: clamp(300px, 36vw, 520px); object-fit: cover; pointer-events: none; opacity: .9;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%), linear-gradient(to bottom, #000 62%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 42%), linear-gradient(to bottom, #000 62%, transparent); mask-composite: intersect; }
@media (max-width: 800px) { .hb-art { width: 100%; height: 300px; opacity: .38; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); } }
.hearbuild-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.hearbuild-col { min-width: 0; padding: clamp(18px, 2vw, 28px); border-radius: 22px; border: 1px solid var(--line); background: var(--panel); }
.hearbuild-col > p { color: #c9d0d1; }
.hb-step { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 800 clamp(22px, 2.2vw, 30px)/1 var(--display); color: var(--text) !important; }
.hb-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; font: 800 17px/1 var(--ui); }
.hearbuild-col .cta-row { margin-top: 18px; }
.hearbuild-col .count { margin-top: 12px; }
.proceed { list-style: none; margin: clamp(18px, 2.4vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.proceed li { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(237, 240, 238, .03); color: #c9d0d1; font-size: 15px; line-height: 1.5; }
.proceed strong { display: block; margin-bottom: 6px; font: 700 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.agent-list { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; color: #c9d0d1; }
/* The build prompt reads as a paragraph: wrap it, so nobody has to scroll sideways to read what they are copying. */
.hearbuild-col pre, .hearbuild-col pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The handshake that opens /ethics/: an eight-bit sprite on a small canvas, scaled up with hard pixels
   (static/ethics-clasp.js). No words on it (James, 10 Nov 2026: "Drop the words"). */
.clasp { position: relative; max-width: 860px; margin: clamp(8px, 2vw, 28px) auto 0; padding: 0; cursor: pointer; container-type: inline-size; }
.clasp canvas { display: block; width: 100%; height: auto; aspect-ratio: 200 / 113; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 10px; }
.clasp + .doc { padding-top: 16px; }
@media (max-width: 900px) { .clasp { margin-left: var(--gutter); margin-right: var(--gutter); } }

/* The sign-off that closes /ethics/: James's icon beside his name, both one link to his site. */
.doc .signoff a { display: inline-flex; align-items: center; gap: 12px; }
.doc .signoff img { display: block; width: 48px; height: 48px; border-radius: 50%; }

/* Home: the switch between today's effect and the synth of the week (tools/build.py hear_build_html). */
.hb-switch { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.hb-switch button { padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: #c9d0d1; font: 700 15px/1 var(--ui); cursor: pointer; }
.hb-switch button[aria-pressed="true"] { background: linear-gradient(120deg, var(--rasp), var(--amber)); color: #12060b; }
.hb-name { margin: 0; font: 800 clamp(28px, 3.4vw, 48px)/1 var(--display); }
.hb-synth { list-style: none; margin: 14px 0; padding: 0; display: block; }
.hb-synth .cover { display: block; width: 100%; max-width: 560px; opacity: 1; transform: none; }
.hb-synth .cover-link { position: relative; display: flex; flex-direction: column; }
.hb-synth .cover-art { display: block; position: relative; min-height: clamp(200px, 24vw, 300px); }
@media (max-width: 600px) { .hb-switch { border-radius: 18px; } .hb-switch button { flex: 1 1 100%; } }

/* Your engines: the change of email form at the bottom (resources/views/store/library.blade.php). */
.lib-email { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.lib-email-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.lib-email-form label { font: 700 13px/1 var(--ui); color: var(--muted); }
.lib-email-form input { flex: 1 1 260px; max-width: 380px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(237, 240, 238, .04); color: var(--text); font: 500 16px var(--ui); }

/* Price estimates (static/currency.js): the "Show prices in" menu, its note, and the corner label. */
.fx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; font: 500 14px var(--ui); color: var(--muted); }
.fx select { margin-left: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0d1014; color: var(--text); font: 600 14px var(--ui); }
.fx-note { margin: 0; color: var(--amber); }
/* An estimate is the same text in another currency: it must look exactly like the price it replaces,
   whatever rule styles spans around it. */
span.fx-p { white-space: nowrap; font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: none; }
.fx-pill { position: fixed; left: 14px; bottom: 14px; z-index: 60; margin: 0; padding: 8px 12px; border-radius: 999px; background: #1b1408; border: 1px solid var(--amber); color: var(--amber); font: 700 12px/1 var(--ui); letter-spacing: .02em; pointer-events: none; }
.has-drawer .fx-pill { bottom: 72px; }
@media print { .fx, .fx-pill { display: none; } }

/* ---------- docs: their own header, a sidebar and flow diagrams (11 Nov 2026) ---------- */
.brand-docs { flex: none; margin-left: -12px; padding-left: 12px; border-left: 1px solid var(--line-2); color: var(--text); text-decoration: none; font: 700 19px/1.5 var(--display); letter-spacing: -.01em; }
.brand-docs:hover { color: var(--petrol); }
.kind-docs main { padding: 0; }
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
/* The sidebar is docked to the left edge, full height, in the page's colour (James, 11 Nov 2026:
   "it's just A LOT of black", then "far left and make it not float"). */
.docs-side { position: sticky; top: 67px; height: calc(100vh - 67px); overflow-y: auto; padding: 26px 14px 24px; display: grid; align-content: start; gap: 18px; font-size: 15px;
  border-right: 1px solid color-mix(in srgb, var(--pc) 40%, var(--line-2));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 15%, var(--panel-solid)), color-mix(in srgb, var(--pc) 4%, var(--panel-solid)) 320px);
  box-shadow: inset 0 4px 0 var(--pc); }
.docs-side nav + nav { padding-top: 16px; border-top: 1px solid var(--line-2); }
.docs-side .docs-h { padding-left: 12px; }
.docs-pages > li[style] > a { display: flex; align-items: baseline; gap: 9px; }
.docs-pages > li[style] > a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nc); transform: translateY(-1px); }
.docs-h { margin: 0 0 10px; color: var(--muted); font: 700 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.docs-pages, .docs-toc { list-style: none; margin: 0; padding: 0; }
.docs-pages li { margin: 0; }
.docs-pages a { display: block; padding: 7px 12px; border-radius: 9px; color: #d7dcdc; text-decoration: none; font-weight: 600; line-height: 1.3; }
.docs-pages a:hover { color: var(--text); background: rgba(237, 240, 238, .06); }
.docs-pages > li > a[aria-current] { color: var(--text); background: color-mix(in srgb, var(--nc, var(--petrol)) 16%, transparent); box-shadow: inset 3px 0 0 var(--nc, var(--petrol)); }
.docs-toc { margin: 4px 0 8px 16px; border-left: 1px solid var(--line); }
.docs-toc a { margin-left: -1px; padding: 5px 12px; border-left: 1px solid transparent; border-radius: 0; color: var(--muted); font-weight: 500; font-size: 14px; }
.docs-toc a:hover { background: none; }
.docs-toc a.on { color: var(--text); border-left-color: var(--nc, var(--petrol)); }
.docs-machine a { color: var(--muted); font-weight: 500; font-size: 14px; padding: 5px 12px; }
.docs-main { min-width: 0; width: 100%; max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: 34px var(--gutter) 80px; }
.docs .doc { max-width: 800px; margin: 0; padding: 0; }
.docs .doc h1 { font-size: clamp(36px, 4.4vw, 58px); margin-top: 0; }
.docs .doc h2 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; margin-top: 2em; padding-top: .9em; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.docs .doc h3 { scroll-margin-top: 86px; }
.docs .doc .lede { max-width: 56ch; }
.docs-toc-m { display: none; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); }
.docs-toc-m summary { padding: 11px 14px; font-weight: 700; cursor: pointer; }
.docs-toc-m ol { margin: 0; padding: 0 14px 12px 34px; }
.docs-toc-m a { color: var(--text); text-decoration: none; }
.docs-pager { display: flex; justify-content: space-between; gap: 14px; max-width: 800px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.docs-pager a { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 700; }
.docs-pager a:hover { border-color: var(--petrol); background: rgba(107, 188, 198, .08); }
.docs-pager a span { color: var(--muted); font: 600 12px/1 var(--ui); }
.docs-next { text-align: right; margin-left: auto; }
.docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 8px; }
.docs-card { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: color-mix(in srgb, var(--nc) 6%, var(--panel-solid)); color: var(--text); text-decoration: none; box-shadow: inset 0 3px 0 var(--nc); }
.docs-card:hover { border-color: var(--nc); }
.docs-card b { font: 700 20px/1.15 var(--display); }
.docs-card span { color: var(--muted); font-size: 14.5px; line-height: 1.4; }

.flow { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--code); }
.flow-row + .flow-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.flow-lane { margin: 0 0 8px; color: var(--fc); font: 700 12px/1.2 var(--ui); letter-spacing: .07em; text-transform: uppercase; }
.flow-lane code { background: none; padding: 0; font-size: 1em; text-transform: none; letter-spacing: 0; }
.flow ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.flow li { position: relative; flex: 1 1 120px; margin: 0; padding: 10px 12px; display: grid; gap: 3px; align-content: center; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fc) 42%, transparent); background: color-mix(in srgb, var(--fc) 9%, transparent); }
.flow li b { font: 700 14.5px/1.25 var(--ui); }
.flow li b code, .flow li span code { background: none; padding: 0; }
.flow li span { color: var(--muted); font-size: 13px; line-height: 1.3; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 7px); top: 50%; width: 12px; height: 10px; transform: translateY(-50%); background: var(--fc); clip-path: polygon(0 40%, 55% 40%, 55% 0, 100% 50%, 55% 100%, 55% 60%, 0 60%); }

@media (min-width: 1101px) and (max-width: 1280px) { .top-docs nav a { padding: 8px 10px; } }
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-side { display: none; }
  .docs-toc-m { display: block; }
  .docs-main { padding-top: 22px; }
}
@media (max-width: 620px) {
  .docs-cards { grid-template-columns: 1fr; }
  .flow ol { flex-direction: column; gap: 22px; }
  .flow li { flex: none; }
  .flow li:not(:last-child)::after { left: 50%; top: calc(100% + 6px); transform: translateX(-50%) rotate(90deg); }
  .brand-docs { font-size: 17px; margin-left: -4px; padding-left: 8px; }
}

/* Games page: 8-bit artwork (tools/pixel.py). Every motion is stepped, none eased. */
.px { image-rendering: pixelated; }
.px-fig { margin: 32px 0 8px; }
.px-scene { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); }
.px-h { display: flex; align-items: center; gap: .35em; }
.px-ico { flex: none; width: 1em; height: 1em; }
.px-m8 { animation: px-m8 .8s steps(8) infinite; }
.px-m24 { animation: px-m24 2.4s steps(24) infinite; }
.px-bob { animation: px-bob 1.2s steps(1) infinite; }
.px-tw { animation: px-tw 2.4s steps(1) infinite; }
.px-lid { opacity: 0; animation: px-lid 3.6s steps(1) infinite; }
.px-f2 { animation: px-f2 .4s steps(1) infinite; }
.px-f2.px-slow { animation-duration: .6s; }
.px-f4 { animation: px-f4 .8s steps(1) infinite; }
@keyframes px-m8 { from { transform: translateX(-8px); } to { transform: none; } }
@keyframes px-m24 { from { transform: translateX(-24px); } to { transform: none; } }
@keyframes px-bob { 0% { transform: none; } 50% { transform: translateY(-1px); } }
@keyframes px-tw { 0% { opacity: 1; } 70% { opacity: .2; } }
@keyframes px-lid { 0% { opacity: 0; } 94% { opacity: 1; } }
@keyframes px-f2 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes px-f4 { 0% { opacity: 1; } 25% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .px * { animation: none !important; }
  .px-f:not(.px-f0) { opacity: 0; }
}

/* Reading measure (James, 11 Nov 2026): a text section may be 800px or so wide, but a line of running
   text stops at about 700px (60 to 75 characters). Add new prose containers here. */
:root { --measure: 700px; }
.doc :is(p, li, dd), .docs .doc .lede, .strip-head p:last-child, .play-note, .eco-head .lede, .explain-hero .lede, .hear > p, .faq details p { max-width: var(--measure); }

/* Docs on a wide screen: the sidebar lists the pages, so the header does not repeat them (James, 11 Nov
   2026). Below 1101px the header nav is the menu sheet, which is how phones reach the pages. */
@media (min-width: 1101px) { .top-docs nav a { display: none; } }