/* ── TOKENS — two levels: ink (primary), mid (secondary); one line value ── */
:root {
  --ink:  #1A1714;
  --mid:  #8C8880;
  --bg:   #F0EDE7;
  --role-kick: #a84832;
  --role-chord: #4f63c7;
  --role-lead: #c99212;
  --role-hat: #2a9d8f;
  --line: var(--mid);
  --font: 'PPRadioGrotesk', system-ui, -apple-system, sans-serif;
  --bar-h:  48px;
  --nav-size: clamp(15px, 1.2vw, 18px);
  --body-size: clamp(16px, 1.2vw, 18px);
  --bio-size: clamp(17px, 1.4vw, 21px);
  --pad-x:  clamp(20px, 4vw, 64px);
  --space-xl: clamp(56px, 7vw, 96px);
  --space-lg: clamp(40px, 5vw, 80px);
  --space-md: clamp(20px, 3vw, 36px);
  --space-sm: clamp(16px, 2vw, 24px);
}
html.dark {
  --ink:  #DEDAD4;
  --mid:  #5E5B58;
  --bg:   #0F0D09;
  --line: var(--mid);
  --role-kick: #e07a5f;
  --role-chord: #7b8ee8;
  --role-lead: #f0c040;
  --role-hat: #5ecfbc;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* ── LINKS — underline appears on hover, offset + thin ── */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
}
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

/* ── TOOLBAR ── */
#toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  /* anchor for centered waveform */
  isolation: isolate;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  padding: 0 var(--pad-x);
  background: var(--bg);
  border-bottom: .5px solid var(--line);
  transition: background .3s, color .3s;
}
#toolbar-name {
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
  flex-shrink: 0;
  max-width: min(42vw, 16em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
#nav-vibe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 22vw, 260px);
  height: 22px;
  pointer-events: none;
  z-index: 1;
}
.nav-vibe-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-vibe-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .2;
  transition: opacity .5s ease;
}
#nav-vibe.active .nav-vibe-path {
  opacity: .92;
  stroke-width: 3;
}
@media (prefers-reduced-motion: reduce) {
  #nav-vibe { display: none; }
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
#toolbar-export { margin-left: auto; gap: 8px; }
#btn-nav-back { color: var(--ink); }
#btn-one-page { opacity: 0.7; }
#btn-one-page:hover { opacity: 1; text-decoration: underline; }
html.a4-one-page #btn-one-page { opacity: 1; background: var(--ink); color: var(--bg); border-color: var(--ink); }
#btn-eave { opacity: 0.7; }
#btn-eave:hover { opacity: 1; text-decoration: underline; }
#btn-eave.active { opacity: 1; background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* EAVE page is invisible unless EAVE print mode is active */
#a4-eave-page { display: none !important; }
html.a4-eave.a4-mode #a4-eave-page { display: flex !important; }
.toolbar-sound {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  flex-shrink: 0;
}
/* Toolbar buttons as plain text links */
.tb-btn {
  font-family: var(--font);
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
  transition: color .15s;
}
.tb-btn:hover { text-decoration: underline; }
.tb-btn.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  text-decoration: none;
}
.tb-icon-btn:hover { text-decoration: none; }
.tb-icon-btn:hover .tb-icon { opacity: .55; }
.tb-icon {
  display: block;
  fill: none;
}
#btn-dark { letter-spacing: 0; }
#btn-hover-settings {
  color: var(--mid);
  padding-left: 0 !important;
}
#btn-hover-settings .tb-menu-icon {
  transform: rotate(90deg);
  transition: transform .2s ease;
}
#btn-hover-settings.panel-open .tb-menu-icon {
  transform: rotate(0deg);
}
#btn-studio:hover,
#btn-hover-settings:hover { color: var(--ink); text-decoration: underline; }
#btn-studio.panel-open,
#btn-hover-settings.panel-open {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#btn-studio.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
html.beat-studio-loading .beat-studio-inner::after {
  content: 'Loading studio…';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  z-index: 12;
  pointer-events: none;
}
#btn-dark:hover { text-decoration: underline; }

/* ── HERO ── */
#hero {
  position: relative;
  display: grid;
  grid-template-columns: 46% 1fr;
  min-height: 100vh;
  padding-top: var(--bar-h);
}
#hero-text,
#hero-photo {
  transition: opacity .45s cubic-bezier(.22, 1, .32, 1), visibility .45s;
}
body.hover-panel-open {
  overflow-x: hidden;
}
@media (min-width: 900px) {
  body.hover-panel-open #print-work {
    margin-right: min(400px, 38vw);
    transition: margin-right .42s cubic-bezier(.22, 1, .32, 1);
  }
}
#hero-text {
  padding: var(--space-xl) var(--pad-x) var(--space-lg);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0;
}
#hero-photo {
  position: sticky; top: var(--bar-h);
  height: calc(100vh - var(--bar-h));
  overflow: hidden;
}
#cv-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 36%;
  filter: grayscale(100%);
  display: block;
}

/* Match column width to portrait aspect at viewport height — prevents side crop with object-fit: cover */
@media screen and (min-width: 769px) {
  #hero {
    grid-template-columns: minmax(0, 1.2fr) min(40vw, calc((100vh - var(--bar-h)) * 0.667));
  }
}

/* ── NAME ── */
#cv-name {
  font-size: clamp(48px, 5.8vw, 88px);
  font-weight: 400; line-height: .93;
  letter-spacing: -.03em;
  margin-bottom: clamp(16px, 2vw, 28px);
}

/* ── SUBTITLE ── */
#cv-subtitle {
  font-size: var(--nav-size);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid);
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ── BIO ── */
#cv-bio {
  max-width: none;
}
#cv-bio p {
  font-size: var(--bio-size);
  line-height: 1.75;
  color: var(--ink);
  max-width: 100%;
  margin-bottom: 1.05em;
}
#cv-bio p:last-child { margin-bottom: 0; }
#cv-bio em { font-style: italic; }
@media screen and (min-width: 769px) {
  #cv-bio p { max-width: 74ch; }
}

/* Scroll cue — sits below bio in text column */
#hero-scroll {
  display: none;
  margin-top: var(--space-lg);
  flex-shrink: 0;
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--mid);
}
#hero-scroll a { color: inherit; }
#hero-scroll a:hover { color: var(--ink); text-decoration: underline; }
@media screen and (min-width: 769px) { #hero-scroll { display: block; } }

/* ── SECTIONS ── */
#cv-sections {
  padding: var(--space-xl) var(--pad-x);
  border-top: .5px solid var(--line);
}
.cv-section { margin-bottom: var(--space-lg); }
.cv-section:last-child { margin-bottom: 0; }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: var(--space-sm);
}
.sec-label {
  font-size: var(--nav-size); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid); font-weight: 400; line-height: 1.2;
  min-width: 0;
  transition: color 0.5s ease;
}

/* Toggle as plain text link */
.sec-toggle {
  font-family: var(--font);
  font-size: var(--nav-size); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid); background: none; border: none; cursor: pointer;
  padding: 0; line-height: 1.2; flex-shrink: 0;
  text-underline-offset: 3px; text-decoration-thickness: .5px;
  transition: color 0.35s ease;
}
.sec-toggle:hover { color: var(--ink); text-decoration: underline; }
.cv-section.sec-hidden .sec-toggle { color: var(--ink); }

/* Section show/hide — soft animated collapse */
.sec-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.85s cubic-bezier(0.33, 1, 0.45, 1);
}
.cv-section.sec-hidden .sec-body {
  grid-template-rows: 0fr;
  transition-delay: 0.2s;
}
.sec-body-inner {
  overflow: hidden;
  min-height: 0;
  transition: opacity 0.65s cubic-bezier(0.33, 1, 0.45, 1);
}
.cv-section:not(.sec-hidden) .sec-body-inner {
  transition-delay: 0.25s;
}
.cv-section.sec-hidden .sec-body-inner {
  opacity: 0;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .sec-body, .sec-body-inner { transition: none; }
  .cv-section.sec-hidden .sec-body { grid-template-rows: 0fr; }
}

/* ── TABLES — editorial list, not spreadsheet grid ── */
.table-wrap { overflow-x: auto; }

.cv-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--body-size);
  line-height: 1.6;
}
.col-status     { width: 3%; }
.col-entity     { width: 22%; }
.col-role       { width: 12%; }
.col-premiere   { width: 13%; }
.col-festivals  { width: 26%; }
.col-awards     { width: 13%; }
.col-support    { width: 11%; }

/* Hairline rule above header only */
.cv-table thead tr {
  border-top: .5px solid var(--line);
}

.cv-table th {
  font-size: var(--nav-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
  text-align: left;
  padding: 0 24px 14px 0;
  border-bottom: .5px solid var(--line);
}
.cv-table th:last-child { padding-right: 0; }

.cv-table td {
  padding: clamp(16px, 2.2vw, 22px) 24px clamp(16px, 2.2vw, 22px) 0;
  vertical-align: top;
  border-bottom: none;
}
.cv-table td:last-child { padding-right: 0; }
.cv-table tbody tr:not(:first-child) td {
  border-top: .5px solid var(--line);
}

/* Row hover — subtle bg */
.cv-table tbody tr {
  transition: background .15s ease, color .15s ease;
}
.cv-table tbody tr:hover {
  background: color-mix(in srgb, var(--mid) 8%, var(--bg));
}

/* Sound mode — rows are pads; table DOM stays valid (no positioning on <tr>) */
html.browse-mode:not(.a4-mode) .table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}
html.browse-mode:not(.a4-mode) .cv-section:not(.sec-hidden) .sec-body-inner,
html.beat-overlay:not(.a4-mode) .sec-body-inner {
  overflow: visible;
}
html.browse-mode:not(.a4-mode) .cv-table tbody tr.row-pad {
  cursor: crosshair;
}
html.browse-mode:not(.a4-mode) .cv-table tbody tr.row-pad:hover {
  background: color-mix(in srgb, var(--mid) 6%, var(--bg));
}
html.browse-mode:not(.a4-mode) .cv-table tbody tr.row-pad.influence-active {
  background: color-mix(in srgb, var(--mid) 10%, var(--bg));
}
html.browse-mode:not(.a4-mode) .table-sound-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
html.browse-mode:not(.a4-mode) .kaoss-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  pointer-events: none;
}
html.a4-mode .table-sound-overlay,
html.a4-mode .kaoss-dot,
html.a4-mode .sound-marker,
html.a4-mode .sound-marker-preview {
  display: none !important;
}

html.browse-mode:not(.a4-mode) .sound-marker,
html.browse-mode:not(.a4-mode) .sound-marker-preview {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 9;
}
html.browse-mode:not(.a4-mode) .sound-marker-preview {
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 70%, transparent);
  opacity: .8;
  z-index: 11;
  transition: none;
}
html.browse-mode:not(.beat-studio):not(.a4-mode) .sound-marker,
html.browse-mode:not(.beat-studio):not(.a4-mode) .sound-marker-preview {
  pointer-events: none;
}
html.browse-mode:not(.a4-mode) .sound-marker {
  background: color-mix(in srgb, var(--ink) 65%, var(--bg));
  box-shadow: 0 0 0 var(--marker-border, 2px) color-mix(in srgb, var(--bg) 88%, transparent);
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
  transition: width .08s ease-out, height .08s ease-out, opacity .15s ease, box-shadow .08s ease-out;
}
html.browse-mode:not(.a4-mode) .sound-marker-chip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: .5px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.15;
  opacity: .82;
  transition: opacity .15s ease, transform .15s ease;
}
html.browse-mode:not(.a4-mode) .sound-marker.is-selected .sound-marker-chip,
html.browse-mode:not(.a4-mode) .sound-marker:hover .sound-marker-chip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
html.browse-mode:not(.a4-mode) .sound-marker-role {
  font-weight: 600;
  letter-spacing: .12em;
}
html.browse-mode:not(.a4-mode) .sound-marker-meta {
  color: var(--mid);
  font-size: 6px;
}
html.browse-mode:not(.a4-mode) .sound-marker-note {
  font-size: 6px;
  letter-spacing: .04em;
  text-transform: none;
}
html.browse-mode:not(.a4-mode) .sound-marker.is-selected .sound-marker-note {
  display: block;
}
html.browse-mode:not(.a4-mode) .sound-marker:not(.is-selected) .sound-marker-note {
  display: none;
}
html.browse-mode:not(.a4-mode) .sound-marker.is-playing {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bg) 75%, transparent),
    0 0 calc(6px + var(--marker-glow, 0) * 14px) color-mix(in srgb, var(--ink) 18%, transparent);
}
html.browse-mode:not(.a4-mode) .sound-marker.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
html.browse-mode:not(.a4-mode) .sound-marker {
  background: hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%) / var(--dot-alpha, 0.92));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 var(--dot-border-w, 2px) color-mix(in srgb, var(--bg) 70%, transparent),
    0 0 0 calc(var(--dot-border-w, 2px) + 1px) color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 40%, transparent);
}
html.browse-mode:not(.a4-mode) .sound-marker.viz-density-8 {
  outline: 2px solid color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 60%, transparent);
  outline-offset: 3px;
}
html.browse-mode:not(.a4-mode) .sound-marker.viz-density-4 {
  outline: 2px dashed color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 50%, transparent);
  outline-offset: 4px;
}
html.browse-mode:not(.a4-mode) .sound-marker.viz-density-2 {
  outline: 2px dotted color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 70%, transparent);
  outline-offset: 5px;
  filter: saturate(1.12);
}
html.browse-mode:not(.a4-mode) .sound-marker.is-beat {
  transform: translate(-50%, -50%) scale(1.22);
  filter: brightness(1.12) saturate(1.08);
}
html.browse-mode:not(.a4-mode) .sound-marker.is-playing.is-beat {
  box-shadow:
    0 0 0 var(--marker-border, 2px) color-mix(in srgb, var(--bg) 65%, transparent),
    0 0 calc(10px + var(--marker-glow, 0) * 16px) color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 55%, transparent);
}
.sl-role-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.sl-role-seg .sp-seg-btn {
  padding: 8px 6px !important;
  font-size: 8px !important;
  letter-spacing: .06em;
  border-left: 4px solid transparent;
}
.sl-role-seg .sp-seg-btn[data-loop-role="kick"] { border-left-color: var(--role-kick); }
.sl-role-seg .sp-seg-btn[data-loop-role="chord"] { border-left-color: var(--role-chord); }
.sl-role-seg .sp-seg-btn[data-loop-role="lead"] { border-left-color: var(--role-lead); }
.sl-role-seg .sp-seg-btn[data-loop-role="hat"] { border-left-color: var(--role-hat); }
.sl-role-seg .sp-seg-btn.active[data-loop-role="kick"] {
  background: color-mix(in srgb, var(--role-kick) 22%, var(--bg));
}
.sl-role-seg .sp-seg-btn.active[data-loop-role="chord"] {
  background: color-mix(in srgb, var(--role-chord) 22%, var(--bg));
}
.sl-role-seg .sp-seg-btn.active[data-loop-role="lead"] {
  background: color-mix(in srgb, var(--role-lead) 22%, var(--bg));
}
.sl-role-seg .sp-seg-btn.active[data-loop-role="hat"] {
  background: color-mix(in srgb, var(--role-hat) 22%, var(--bg));
}

/* Beat studio — 6 musical layers */
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-extra {
  display: none;
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active {
  position: relative;
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active td:first-child::before {
  content: attr(data-layer-label);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
  z-index: 2;
  visibility: visible !important;
  -webkit-text-fill-color: var(--ink);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Kick"] {
  box-shadow: inset 4px 0 0 hsl(14 72% 48%);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Hat"] {
  box-shadow: inset 4px 0 0 hsl(192 48% 46%);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Bass"] {
  box-shadow: inset 4px 0 0 hsl(268 50% 48%);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Clap"] {
  box-shadow: inset 4px 0 0 hsl(38 65% 50%);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Lead"] {
  box-shadow: inset 4px 0 0 hsl(88 62% 44%);
}
html.beat-overlay:not(.a4-mode) tr.row-pad.beat-layer-active[data-beat-layer="Soft"] {
  box-shadow: inset 4px 0 0 hsl(215 28% 52%);
}

/* Beat studio — lane pads only (no CV text) */
html.beat-overlay:not(.a4-mode) .cv-table tbody tr.row-pad td {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
html.beat-overlay:not(.a4-mode) .cv-table tbody tr.row-pad td * {
  visibility: hidden;
  pointer-events: none;
}
html.beat-overlay:not(.a4-mode) .cv-table tbody tr.row-pad td a {
  color: transparent !important;
}
html.beat-overlay:not(.a4-mode) .cv-table tbody tr.row-pad {
  height: clamp(60px, 8.5vw, 88px);
  min-height: clamp(60px, 8.5vw, 88px);
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 35%, transparent) calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 35%, transparent) calc(100% / 16)
    ),
    color-mix(in srgb, var(--mid) 4%, var(--bg));
}
html.beat-overlay:not(.a4-mode) .cv-table tbody tr.row-pad.influence-active {
  background: color-mix(in srgb, var(--mid) 11%, var(--bg));
}
html.beat-overlay:not(.a4-mode) .cv-section {
  margin-bottom: 0;
}
html.beat-overlay:not(.a4-mode) .sec-head {
  opacity: .72;
  margin-bottom: 4px;
}
html.beat-overlay:not(.a4-mode) .sec-label,
html.beat-overlay:not(.a4-mode) .sec-toggle {
  font-size: 7px;
}
html.beat-overlay:not(.a4-mode) .sec-body-inner > p {
  display: none;
}
html.beat-overlay:not(.a4-mode) .cv-section.sec-hidden .sec-body {
  grid-template-rows: 1fr;
}
html.beat-overlay:not(.a4-mode) .cv-section.sec-hidden .sec-body-inner {
  opacity: 1;
}
html.beat-overlay:not(.a4-mode) .cv-table thead {
  display: none;
}
html.beat-overlay:not(.a4-mode) .cv-table td {
  padding-top: clamp(16px, 2.2vw, 24px);
  padding-bottom: clamp(16px, 2.2vw, 24px);
}
html.beat-overlay:not(.a4-mode) .cv-section .cv-table thead tr {
  border-top: none;
}
html.beat-overlay:not(.a4-mode) .cv-section + .cv-section .cv-table tbody tr:first-child td {
  border-top: .5px solid var(--line);
}
#beat-transport {
  display: none;
}
html.beat-overlay:not(.a4-mode) #beat-transport {
  display: block;
  padding: 0 0 var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: .5px solid var(--line);
}
html.beat-overlay:not(.a4-mode) #cv-sections {
  padding-top: var(--space-md);
}
.beat-ruler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.beat-ruler-meta {
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}
.beat-ruler-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  align-items: end;
  height: 18px;
}
.beat-ruler-step {
  display: block;
  height: 6px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--mid) 28%, transparent);
  transform-origin: bottom center;
  transition: background .08s ease, height .08s ease, filter .08s ease, transform .08s ease;
}
.beat-ruler-step.is-downbeat {
  height: 10px;
  background: color-mix(in srgb, var(--mid) 42%, transparent);
}
.beat-ruler-step.is-active {
  background: var(--ink);
  height: 14px;
}
.beat-ruler-step.is-active.is-hit {
  height: 16px;
}
.beat-ruler-step.is-active.is-hit.is-pulse {
  filter: brightness(1.18);
  transform: scaleY(1.12);
}
@media screen and (max-width: 768px) {
  .beat-ruler-grid { gap: 2px; }
  .beat-ruler-step.is-active { height: 12px; }
}

.beat-guide {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(360px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border: .5px solid var(--line);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.beat-guide--anchored {
  bottom: auto;
  transform: translateX(-50%);
}
.beat-guide-text {
  margin: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}
.beat-guide-dismiss {
  flex-shrink: 0;
  border: .5px solid var(--line);
  background: transparent;
  color: var(--mid);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.beat-guide-dismiss:hover { color: var(--ink); border-color: var(--ink); }

.sl-pad-context { margin: 0; min-height: 2.2em; }
.sl-pad.sl-pad--layer {
  outline: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset: 2px;
}
html.a4-mode .beat-guide {
  display: none !important;
}
html.browse-mode:not(.a4-mode) .sound-marker:hover,
html.browse-mode:not(.a4-mode) .sound-marker:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}
.sp-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--mid);
}
#sp-marker-count {
  min-height: 1.2em;
  margin-top: -4px;
}

/* ── SOUND ON: MIDI controller layout ── */
html.sound-on:not(.a4-mode) #hero,
html.sound-on:not(.a4-mode) #cv-footer,
html.sound-on:not(.a4-mode) .cv-section:not(.midi-bank) {
  display: none !important;
}
html.sound-on:not(.a4-mode) #print-work {
  padding-top: var(--bar-h);
  min-height: 100vh;
}
html.sound-on:not(.a4-mode) #cv-sections {
  padding: clamp(10px, 2vw, 18px) var(--pad-x) clamp(20px, 3vw, 32px);
  border-top: none;
  max-width: none;
  min-height: calc(100vh - var(--bar-h));
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
}
html.sound-on:not(.a4-mode) .cv-section.midi-bank {
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}
html.sound-on:not(.a4-mode) .sec-head,
html.sound-on:not(.a4-mode) .sec-body-inner > p {
  display: none !important;
}
html.sound-on:not(.a4-mode) .midi-bank .table-wrap {
  overflow: visible;
}
html.sound-on:not(.a4-mode) .cv-table thead {
  display: none;
}
html.sound-on:not(.a4-mode) .cv-table tbody tr.has-track-lane {
  position: relative;
  height: clamp(44px, 5.5vw, 56px);
  background: transparent;
}
html.sound-on:not(.a4-mode) .cv-table tbody tr.has-track-lane:hover {
  background: transparent;
}
html.sound-on:not(.a4-mode) .cv-table tbody tr.has-track-lane td {
  visibility: hidden;
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}
html.sound-on:not(.a4-mode) .cv-table tbody tr.has-track-lane td {
  border-top: none;
}
html.sound-on:not(.a4-mode) .cv-section.midi-bank[data-bank="film-immersive-work"] .track-lane {
  --bank-tint: color-mix(in srgb, var(--ink) 4%, transparent);
}
html.sound-on:not(.a4-mode) .cv-section.midi-bank[data-bank="commercial-production"] .track-lane {
  --bank-tint: color-mix(in srgb, var(--mid) 10%, transparent);
}
.track-lane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.2vw, 14px);
  padding: 6px 0;
  border-top: .5px solid var(--line);
  box-sizing: border-box;
  background: var(--bank-tint, transparent);
}
.track-head {
  width: 52px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  align-self: center;
}
.track-label {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-underline-offset: 3px;
}
.track-label:hover {
  color: var(--ink);
  text-decoration: underline;
}
.track-controls {
  display: flex;
  gap: 2px;
}
.track-mute,
.track-solo,
.track-lock {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: .06em;
  line-height: 1;
  padding: 2px 3px;
  background: none;
  border: .5px solid var(--line);
  color: var(--mid);
  cursor: pointer;
}
.track-mute:hover,
.track-solo:hover,
.track-lock:hover { color: var(--ink); border-color: var(--ink); }
.track-mute.active,
.track-solo.active,
.track-lock.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.track-module-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
  padding: 4px;
  background: var(--bg);
  border: .5px solid var(--line);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
}
.track-module-opt {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 5px 8px;
  background: none;
  border: none;
  color: var(--mid);
  cursor: pointer;
}
.track-module-opt:hover,
.track-module-opt.active {
  color: var(--ink);
  background: color-mix(in srgb, var(--mid) 10%, transparent);
}
.track-lane.is-locked .track-label {
  cursor: default;
  opacity: .72;
}
.track-lane.is-muted { opacity: .42; }
.track-lane.is-muted .track-grid { pointer-events: auto; }
.track-lane.is-solo .track-label {
  color: var(--ink);
  font-weight: 500;
}
.track-grid {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
  align-items: stretch;
}
.track-grid.steps-16 { grid-template-columns: repeat(16, 1fr); }
.track-grid.steps-8  { grid-template-columns: repeat(8, 1fr); }
.track-step {
  appearance: none;
  -webkit-appearance: none;
  border: .5px solid var(--line);
  background: color-mix(in srgb, var(--mid) 7%, transparent);
  padding: 0;
  min-height: 24px;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s ease, box-shadow .1s ease;
}
html.sound-on:not(.a4-mode) .track-step {
  min-height: clamp(36px, 4.8vw, 48px);
}
.track-step:hover {
  background: color-mix(in srgb, var(--mid) 18%, transparent);
}
.track-step.on {
  background: var(--ink);
  border-color: var(--ink);
}
.track-step.on.soft {
  background: color-mix(in srgb, var(--ink) 42%, var(--bg));
  border-color: color-mix(in srgb, var(--ink) 55%, var(--line));
}
.track-step.on:hover { background: var(--ink); }
.track-step.on.soft:hover {
  background: color-mix(in srgb, var(--ink) 55%, var(--bg));
}
.track-step.playhead {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 50%, var(--bg));
}
.track-step.on.playhead {
  box-shadow: inset 0 0 0 2px var(--bg);
}
.track-step.hit {
  box-shadow: 0 0 0 2px var(--ink);
  filter: brightness(1.15);
}
.track-step.on.hit {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink);
}
.track-drums .track-step.on {
  background: color-mix(in srgb, var(--ink) 70%, var(--mid));
}
.track-kick .track-step.on {
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
}
.track-bass .track-step.on {
  background: color-mix(in srgb, var(--mid) 40%, var(--ink));
}
.track-clap .track-step.on {
  background: color-mix(in srgb, var(--mid) 55%, var(--ink));
}
.track-note .track-step.on { background: var(--ink); }
.track-drums .track-label { letter-spacing: .08em; }
.track-lane.has-notes .track-label {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.sound-loop .track-grid {
  opacity: 1;
}

/* Status dot */
.col-status th, .col-status td {
  width: 18px; padding-right: 10px;
}
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-top: 4px;
}
.dot-done { background: var(--ink); }
.dot-wip  { border: 1px solid var(--mid); }

/* Awards marked {wip}: visible on site, hidden in any print/export view */
.award-wip { color: var(--mid); }
html.a4-mode .award-wip { display: none !important; }
@media print { .award-wip { display: none !important; } }

/* Entity title + sub */
.ent-title {
  display: block;
  font-size: 1.05em;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.ent-sub {
  display: block;
  font-size: .92em;
  color: var(--mid);
  margin-top: 4px;
  line-height: 1.45;
}

/* ── TABLES: stacked cards below 700px ── */
@media screen and (max-width: 699px) {
  .table-wrap { overflow-x: visible; }

  .cv-table,
  .cv-table tbody { display: block; width: 100%; }

  .cv-table thead { display: none; }

  .cv-table tbody {
    border-top: .5px solid var(--line);
  }

  .cv-table tbody tr {
    display: block;
    position: relative;
    padding: clamp(14px, 3.5vw, 20px) 0;
    border-bottom: .5px solid var(--line);
  }
  .cv-table tbody tr:last-child { border-bottom: none; }

  .cv-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: none;
  }
  .cv-table td.hide-mobile { display: block; }
  .cv-table td.col-status-empty { display: none !important; }

  /* Status dot — top-right of card */
  .cv-table td.col-status:not(.col-status-empty) {
    position: absolute;
    top: clamp(14px, 3.5vw, 20px);
    right: 0;
    width: auto;
    padding: 0;
  }

  /* Primary entity: title + meta, no field label */
  .cv-table td.col-entity {
    padding-right: 22px;
    margin-bottom: clamp(10px, 2.5vw, 14px);
  }
  .cv-table td.col-entity::before { display: none; }
  .cv-table td.col-entity .ent-title {
    font-size: clamp(16px, 4vw, 18px);
    letter-spacing: -.01em;
    line-height: 1.35;
  }
  .cv-table td.col-entity .ent-sub {
    font-size: clamp(14px, 3.2vw, 16px);
    margin-top: 4px;
  }

  /* Remaining columns: label + value pairs */
  .cv-table td:not(.col-status):not(.col-entity) {
    margin-top: clamp(10px, 2.5vw, 14px);
    font-size: var(--body-size);
    line-height: 1.55;
  }
  .cv-table td:not(.col-status):not(.col-entity)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--nav-size);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--mid);
    font-weight: 400;
    margin-bottom: 3px;
  }

  html.sound-on:not(.a4-mode) .cv-table tbody tr.has-track-lane {
    display: block;
    height: auto;
    min-height: 52px;
    padding: 0;
  }
  html.sound-on:not(.a4-mode) .track-lane {
    position: relative;
    inset: auto;
    flex-direction: row;
    gap: 8px;
    padding: 8px 0;
  }
  html.sound-on:not(.a4-mode) .track-head {
    width: 48px;
  }
  html.sound-on:not(.a4-mode) .track-grid {
    width: 100%;
  }
  html.sound-on:not(.a4-mode) .track-step {
    min-height: 40px;
  }
}

/* ── FOOTER ── */
#cv-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) clamp(20px, 4vw, 48px);
  padding: var(--space-xl) var(--pad-x);
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
  border-top: .5px solid var(--line);
}
.footer-left { flex-shrink: 0; }
.footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: clamp(16px, 3vw, 36px);
  margin-left: auto;
  text-align: right;
}
.footer-plain { text-decoration: none; }
#cv-footer a {
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
}
#cv-footer a:hover { text-decoration: underline; }
.footer-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  flex-shrink: 0;
}
#footer-export-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}
.footer-btn {
  font-family: var(--font);
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
  transition: color .15s;
}
.footer-btn:hover { text-decoration: underline; }
.footer-icon-btn:hover { text-decoration: none; }
.footer-icon-btn:hover .footer-icon { opacity: .55; }
.footer-icon {
  display: block;
  fill: none;
}

/* ── LEGAL (privacy.html) ── */
.legal {
  width: 100%;
  padding: var(--space-xl) var(--pad-x) var(--space-lg);
}
html.nav-simple-page .legal {
  padding-top: calc(var(--bar-h) + var(--space-lg));
}
.legal-inner {
  max-width: 65ch;
}
.legal h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.legal p {
  font-size: var(--body-size);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: .85em;
}
.legal p:last-child { margin-bottom: 0; }
.legal a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: .5px;
}
.legal a:hover { text-decoration: underline; }

/* ── MOBILE ── */
@media screen and (max-width: 768px) {
  :root {
    --nav-size: clamp(14px, 3.8vw, 17px);
    --body-size: clamp(15px, 3.8vw, 17px);
    --bio-size: clamp(16px, 4.2vw, 19px);
    --bar-h: 44px;
  }
  #toolbar { gap: clamp(6px, 1.5vw, 10px); }
  #hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  #hero-photo {
    position: relative; top: 0;
    height: clamp(300px, 150vw, 640px);
    order: -1;
  }
  #hero-text {
    justify-content: flex-start;
    padding: var(--space-lg) var(--pad-x) var(--space-xl);
  }
  #cv-bio p { max-width: 100%; }
  #cv-name {
    font-size: clamp(36px, 11vw, 56px);
    margin-bottom: clamp(12px, 3vw, 20px);
  }
  #cv-subtitle {
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  .hide-mobile { display: none; }

  /* Footer — stack vertically, left-aligned */
  #cv-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-right {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 0;
    gap: 6px;
    text-align: left;
  }
  .footer-actions {
    margin-top: 2px;
  }
}

/* Table — horizontal scroll in landscape */
@media screen and (max-width: 900px) and (orientation: landscape) {
  .cv-table { min-width: 700px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Print page-2 wrapper — block on screen so CV sections layout reliably */
#print-work {
  display: block;
  width: 100%;
}

/* ── A4 MODE (inline preview, screen only) ── */
#a4-stage { display: none; }
html.a4-mode {
  background: #d5d1ca;
  scroll-behavior: auto;
}
html.a4-mode body {
  background: #d5d1ca !important;
}
html.a4-mode #toolbar {
  z-index: 500;
}
html.a4-mode #a4-stage {
  display: block;
  padding: 0 16px 32px;
  box-sizing: border-box;
}
html.a4-mode #a4-pages {
  width: 210mm;
  margin: 0 auto;
  transform-origin: top center;
}
html.a4-mode .a4-page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 20px;
  padding: 10mm;
  box-sizing: border-box;
  background: #fff;
  color: #1A1714;
  --ink: #1A1714;
  --mid: #8C8880;
  --line: #8C8880;
  --bg: #fff;
  box-shadow: 0 1px 3px rgba(26, 23, 20, .06), 0 10px 32px rgba(26, 23, 20, .1);
}
html.a4-mode #hover-panel { display: none !important; }

/* ── SCROLL REVEAL — CV must stay visible (opacity 0 broke table + dots) ── */
.cv-section {
  opacity: 1;
  transform: none;
}

/* ── Hover settings drawer (beat studio drawer → studio.css) ── */
#hover-panel {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  z-index: 110;
  background: var(--bg);
  border-left: .5px solid var(--line);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .44s cubic-bezier(.22, 1, .32, 1),
    visibility .44s;
}
#hover-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 768px) {
  #hover-panel {
    top: var(--bar-h);
    right: 0;
    bottom: unset;
    left: 0;
    width: auto;
    max-height: calc(100vh - var(--bar-h));
    border-left: none;
    border-bottom: .5px solid var(--line);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 8%, transparent);
    transform: translateY(-8px);
    opacity: 0;
    transition:
      transform .32s cubic-bezier(.22, 1, .32, 1),
      opacity .32s cubic-bezier(.22, 1, .32, 1),
      visibility .32s;
  }
  #hover-panel.open {
    transform: translateY(0);
    opacity: 1;
  }
}
.sl-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--pad-x) var(--space-lg);
}
@media (prefers-reduced-motion: reduce) {
  #hover-panel,
  #hero-text,
  #hero-photo {
    transition-duration: .01ms;
  }
}

#hover-panel .sl-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--pad-x); border-bottom: .5px solid var(--line);
  flex-shrink: 0;
}
.sl-mode-note {
  margin: 0 0 0 auto;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
}
.sl-title {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin: 0; font-weight: 400;
  flex: 1;
  min-width: 0;
}
.sl-mode-switch { margin-left: auto; }
.sl-close {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--mid);
  cursor: pointer;
  transition: color .12s;
}
.sl-close:hover { color: var(--ink); }
.sl-close-icon { display: block; }

.sl-settings { margin-top: var(--space-md); }
.sl-knob-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}
.sl-knob-grid-global { margin-bottom: 4px; }
.sl-knob-grid .sl-field {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  text-align: center;
}
.sl-knob-grid .sl-field-label { width: auto; }
.sl-knob-grid .sp-val { font-size: 9px; min-height: 1.2em; }
.sp-knob-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sp-knob-track {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: .5px solid var(--line);
  background: color-mix(in srgb, var(--mid) 6%, var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
}
.sp-knob-dial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: .5px solid color-mix(in srgb, var(--ink) 25%, var(--line));
  background: var(--bg);
  transform: rotate(var(--knob-angle, -135deg));
  position: relative;
}
.sp-knob-dial::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
}
.sp-knob-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sl-wave-picker {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: .5px solid var(--line);
}
.sl-wave-picker-global {
  margin-top: 0;
  padding-top: 0;
}
.sl-wave-picker .sl-field-label {
  display: block;
  margin-bottom: 8px;
}
.sl-wave-picker .sl-wave-grid { margin-bottom: 0; }
.sp-test-full { width: 100%; margin-top: 4px; }
.sl-block {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: .5px solid var(--line);
}
.sl-block-title {
  margin: 0 0 6px;
  font-size: var(--nav-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
}
.sl-subtitle {
  margin: var(--space-sm) 0 8px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
}
.sl-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.sl-field-span { grid-column: 1 / -1; }
.sl-block-layer {
  background: color-mix(in srgb, var(--mid) 4%, var(--bg));
  padding: 12px;
  margin-top: 8px;
  border: .5px solid var(--line);
}
.sl-dot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.sl-dot-head .sl-block-title { margin: 0; }

/* Shared drawer form controls (hover + studio panels) */
.sl-field {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.sl-field-block { flex-direction: column; align-items: stretch; }
.sl-field-block .sp-seg { margin-top: 4px; }
.sl-field-label {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid); width: 88px; flex-shrink: 0;
}
.sl-field-block .sl-field-label { width: auto; }
.sl-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-actions-row .sp-test { flex: 1; min-width: 140px; }
.sp-range {
  flex: 1; height: 1px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--line); outline: none; border-radius: 0;
}
.sp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
}
.sp-range::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); border: none; cursor: pointer;
}
.sp-val {
  font-size: 9px; color: var(--mid); width: 52px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sp-seg { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sp-seg-btn {
  font-family: var(--font); font-size: 9px; letter-spacing: .07em;
  background: none; border: .5px solid var(--line);
  color: var(--mid); padding: 5px 10px; cursor: pointer;
  transition: all .12s;
}
.sp-seg-btn:hover { color: var(--ink); }
.sp-seg-btn.active { background: var(--ink); color: var(--bg); border-color: var(--line); }
.sp-test {
  font-family: var(--font); font-size: 9px; letter-spacing: .10em; text-transform: uppercase;
  background: none; border: .5px solid var(--line);
  color: var(--mid); padding: 10px 14px; cursor: pointer;
  transition: all .12s; width: 100%;
}
.sp-test:hover { background: var(--ink); color: var(--bg); }
.sl-actions-row .sp-test { width: auto; }