/* === NOCTURNE POLISH + APPEARANCE LAYER v0.3.0 ==============================
   Global safeguards, curated room tokens, and profile-specific layout polish.
   Audio behavior and scene artwork remain outside this presentation layer.
   ========================================================================== */

/* Local type: the product no longer contacts a font CDN. Latin subsets keep
   the package small; ordinary system fallbacks cover characters outside them. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Curated appearance tokens. Scene artwork and per-channel themes keep their
   own colors; these tokens light the shared room around them. */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --accent-rgb: 232 169 111;
  --accent-soft-rgb: 240 188 203;
  --ambient-rgb: 217 154 168;
  --mood-deep: #100b0d;
  --text: #eee8de;
  --text-muted: #ada59c;
  --text-faint: #81786f;
  --surface-1: rgb(15 13 13 / 0.90);
  --surface-2: rgb(25 20 19 / 0.88);
  --surface-soft: rgb(255 248 235 / 0.045);
  --surface-hover: rgb(var(--accent-rgb) / 0.10);
  --appearance-border: rgb(var(--accent-rgb) / 0.20);
  --appearance-border-strong: rgb(var(--accent-rgb) / 0.38);
  --appearance-glow: rgb(var(--ambient-rgb) / 0.28);
  --appearance-glow-soft: rgb(var(--accent-rgb) / 0.12);
  --radius-instrument: 3px;
  --radius-well: 10px;
  --radius-panel: 14px;
  --radius-overlay: 20px;
}

html[data-appearance-enabled="true"][data-mood="moonwater"] {
  --accent-rgb: 140 207 224;
  --accent-soft-rgb: 200 198 242;
  --ambient-rgb: 93 127 163;
  --mood-deep: #080d14;
}
html[data-appearance-enabled="true"][data-mood="cedar-steam"] {
  --accent-rgb: 157 181 143;
  --accent-soft-rgb: 224 209 170;
  --ambient-rgb: 77 102 85;
  --mood-deep: #0a0f0c;
}
html[data-appearance-enabled="true"][data-mood="ember-room"] {
  --accent-rgb: 228 138 98;
  --accent-soft-rgb: 216 160 168;
  --ambient-rgb: 125 72 81;
  --mood-deep: #130b09;
}
html[data-appearance-enabled="false"] {
  --accent-rgb: 232 169 111;
  --accent-soft-rgb: 240 188 203;
  --ambient-rgb: 217 154 168;
  --mood-deep: #090a0d;
}

html[data-light="soft"] {
  --surface-1: rgb(12 11 12 / 0.86);
  --surface-2: rgb(21 18 18 / 0.82);
  --surface-soft: rgb(255 248 235 / 0.035);
  --surface-hover: rgb(var(--accent-rgb) / 0.07);
  --appearance-border: rgb(var(--accent-rgb) / 0.15);
  --appearance-border-strong: rgb(var(--accent-rgb) / 0.28);
  --appearance-glow: rgb(var(--ambient-rgb) / 0.18);
  --appearance-glow-soft: rgb(var(--accent-rgb) / 0.08);
}
html[data-light="clear"] {
  --text: #f4eee5;
  --text-muted: #cbc3b9;
  --text-faint: #a9a097;
  --surface-1: rgb(17 15 15 / 0.96);
  --surface-2: rgb(29 24 22 / 0.94);
  --surface-soft: rgb(255 248 235 / 0.065);
  --surface-hover: rgb(var(--accent-rgb) / 0.14);
  --appearance-border: rgb(var(--accent-rgb) / 0.28);
  --appearance-border-strong: rgb(var(--accent-rgb) / 0.48);
  --appearance-glow: rgb(var(--ambient-rgb) / 0.34);
  --appearance-glow-soft: rgb(var(--accent-rgb) / 0.17);
}

html[data-type="quiet"] {
  --font-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[data-type="clear"] {
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-type="quiet"] :where(.serif-italic, .brand-sub, .mixer-head h2, .channel .name, .master .name, .btn, .settings-head h2),
html[data-type="clear"] :where(.serif-italic, .brand-sub, .mixer-head h2, .channel .name, .master .name, .btn, .settings-head h2) {
  font-style: normal;
  letter-spacing: -0.01em;
}
html[data-type="clear"] body { font-weight: 400; }

body {
  background:
    radial-gradient(ellipse 80% 42% at 50% 0%, var(--appearance-glow-soft), transparent 62%),
    radial-gradient(ellipse 72% 56% at 50% 100%, rgb(var(--ambient-rgb) / 0.08), transparent 72%),
    radial-gradient(ellipse 100% 84% at 50% 50%, #100f11 0%, var(--mood-deep) 82%);
}

/* Feed the existing component language from the curated mood. */
html[data-appearance-enabled="true"] {
  --text-muted: #bcb4aa;
  --text-faint: #968d83;
  --lantern: rgb(var(--accent-rgb));
  --lantern-soft: rgb(var(--accent-soft-rgb));
  --lantern-deep: rgb(var(--accent-rgb) / 0.72);
  --sakura: rgb(var(--ambient-rgb));
  --sakura-soft: rgb(var(--accent-soft-rgb));
  --sakura-deep: rgb(var(--ambient-rgb) / 0.62);
  --hairline: rgb(238 232 222 / 0.11);
  --hairline-warm: var(--appearance-border);
  --nocturne-focus: rgb(var(--accent-soft-rgb));
}

:where(button, input, select, textarea) {
  font: inherit;
}

/* Mixer look selectors share the same centered label treatment as Change.
   text-align-last covers the closed native select; option alignment keeps the
   expanded menu consistent where the platform allows it. */
.slot-theme {
  padding: 0.52rem 0.68rem;
  text-align: center;
  text-align-last: center;
}
.slot-theme option { text-align: center; }

:where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href]) {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], a[href], input, select, textarea, [tabindex]):focus-visible,
.nocturne-focus-return {
  outline: 2px solid var(--nocturne-focus, currentColor);
  outline-offset: 3px;
}

:where(button, [role="button"])[aria-disabled="true"],
:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

html {
  color-scheme: dark;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 10000;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--appearance-border, rgb(238 232 222 / 0.25));
  border-radius: 0.5rem;
  color: var(--text, #f0e8dc);
  background: #0c0a0d;
  transform: translateY(-180%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

main:focus {
  outline: 2px solid transparent;
  outline-offset: 4px;
}

.brand {
  color: inherit;
  text-decoration: none;
}

.web-only {
  display: none !important;
}

html[data-deployment="web"] .web-only {
  display: flex !important;
}

html[data-deployment="web"] p.web-only {
  display: block !important;
}

html[data-deployment="web"] span.web-only {
  display: inline !important;
}

html[data-deployment="web"] .local-only {
  display: none !important;
}

.web-links {
  align-items: center;
  gap: 0.6rem;
  padding-inline-start: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.web-links a {
  min-block-size: 36px;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.62rem;
  border: 1px solid var(--hairline-warm);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
}

.web-links a:hover {
  color: var(--text);
  border-color: var(--appearance-border-strong);
}

.radio-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 40px;
  margin-block-start: 0.35rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--hairline-warm);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgb(8 7 9 / 0.52);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.radio-file-actions {
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.7rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--hairline-warm);
}

.radio-file-actions .radio-file-button {
  flex: 0 0 auto;
  margin-block-start: 0;
}

.radio-file-actions .playlist-empty-hint {
  text-align: end;
}

.radio-file-button:has(input:focus-visible) {
  outline: 2px solid var(--nocturne-focus, currentColor);
  outline-offset: 3px;
}

.radio-file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.radio-status {
  min-block-size: 1.3em;
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.radio-status.error {
  color: #efb5a6;
}

.radio-status.success {
  color: #b9d9c5;
}

.video-stage.profile-static,
.video-stage.video-failed {
  background-image:
    linear-gradient(rgb(5 6 8 / 0.14), rgb(5 6 8 / 0.38)),
    url('/rain-still.webp') !important;
  background-position: center;
  background-size: cover !important;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li) {
  text-wrap: pretty;
}

.nocturne-visually-hidden,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (pointer: coarse) {
  :where(button, [role="button"], a[href], input, select) {
    min-block-size: 44px;
  }
}

@media (max-width: 860px) {
  .web-links {
    inline-size: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(button, [role="button"], a[href], input, select, textarea):focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* Keep the modal stationary on touch devices and undo the late compact-deck
   override that otherwise compresses four mixer channels into a phone width. */
body.sound-picker-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .mixer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .channel .name {
    font-size: 0.74rem !important;
  }
}

@media (max-width: 340px) {
  .mixer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* alpha.10 product pass: local scenes and honest platform-state cards */
.scene-shelf {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(11rem, 0.72fr) auto;
  gap: 0.8rem 1rem;
  align-items: end;
  margin: 1.1rem 0 1.6rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(232,169,111,0.035), rgba(217,154,168,0.025));
}
.scene-copy p {
  max-inline-size: 54ch;
  color: var(--text-muted);
  font-size: 0.77rem;
  line-height: 1.55;
}
.scene-field select {
  inline-size: 100%;
  min-block-size: 38px;
  border: 1px solid var(--hairline-warm);
  border-radius: 2px;
  background: rgba(6,7,10,0.72);
  color: var(--text);
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  font: inherit;
}
.scene-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.scene-status {
  grid-column: 1 / -1;
  min-block-size: 1.2em;
  color: rgba(232,169,111,0.82);
  font-size: 0.72rem;
  letter-spacing: 0.025em;
}
.session-notice {
  flex-basis: 100%;
  margin-top: 0.45rem;
  color: rgba(240,210,160,0.9);
  font-size: 0.75rem;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.65rem 0 0.8rem;
}
.platform-card {
  display: grid;
  gap: 0.2rem;
  min-block-size: 64px;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--hairline);
  background: rgba(5,4,4,0.28);
}
.platform-card strong {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 400;
}
.platform-card span { color: var(--text-muted); font-size: 0.7rem; line-height: 1.4; }
.platform-card[data-state="available"] { border-color: rgba(150,220,160,0.22); }
.platform-card[data-state="limited"] { border-color: rgba(240,190,120,0.24); }
.platform-card[data-state="unavailable"] { border-color: rgba(255,145,125,0.2); }
@media (max-width: 760px) {
  .scene-shelf { grid-template-columns: 1fr; align-items: stretch; }
  .scene-actions { justify-content: flex-start; }
  .platform-grid { grid-template-columns: 1fr; }
}

/* Shared surfaces now respond to the selected room light without tinting the
   footage itself. */
.brand-mark {
  background: radial-gradient(circle at 38% 34%, rgb(255 255 255 / 0.92), rgb(var(--accent-soft-rgb)) 42%, rgb(var(--ambient-rgb) / 0.55) 72%, transparent 74%);
  box-shadow: 0 0 18px var(--appearance-glow), 0 0 0 1px var(--appearance-border);
}
.mode-switcher,
.settings-open,
.scene-shelf,
.master,
.channel,
.radio-deck,
.sky-panel {
  border-color: var(--appearance-border);
}
.mode-switcher,
.settings-open {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.mode-btn[aria-pressed="true"] {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--surface-hover), transparent 72%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.mode-btn[aria-pressed="true"] .mode-glyph,
.channel.active .value,
.master-slider .value,
.timer-status {
  color: rgb(var(--accent-soft-rgb));
}
.settings-overlay {
  background: radial-gradient(70% 70% at 50% 30%, var(--appearance-glow-soft), transparent 66%), rgb(2 2 3 / 0.76);
}
.settings-dialog,
.sound-picker-panel {
  border-radius: var(--radius-overlay);
  border-color: var(--appearance-border-strong);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: 0 28px 110px rgb(0 0 0 / 0.74), inset 0 1px 0 rgb(255 245 225 / 0.07);
}
.settings-check,
.appearance-option,
.settings-field input,
.settings-field select,
.location-result,
.scene-shelf,
.master {
  background-color: var(--surface-soft);
}
.settings-action:hover,
.location-result:hover,
.appearance-option:has(input:checked) {
  background: var(--surface-hover);
  border-color: var(--appearance-border-strong);
}

/* Appearance chooser */
.appearance-settings {
  display: grid;
  gap: 1rem;
}
.appearance-settings[hidden] { display: none !important; }
.appearance-group {
  min-inline-size: 0;
  border: 0;
  padding: 0;
}
.appearance-group legend {
  margin-bottom: 0.48rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.appearance-type-options,
.appearance-light-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.appearance-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 62px;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  cursor: pointer;
  transition: border-color 180ms var(--ease-soft), background 180ms var(--ease-soft), transform 180ms var(--ease-soft);
}
.appearance-option:hover { transform: translateY(-1px); }
.appearance-option input {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: rgb(var(--accent-rgb));
}
.appearance-option strong,
.appearance-option small { display: block; }
.appearance-option strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
}
.appearance-option small {
  margin-top: 0.1rem;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.35;
}
.appearance-swatch {
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  box-shadow: 0 0 15px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.appearance-option:has(.appearance-swatch) {
  grid-template-columns: auto auto minmax(0, 1fr);
}
.appearance-swatch[data-swatch="rain-lantern"] { background: linear-gradient(135deg, #e8a96f 12%, #f0bccb 55%, #5a3140); }
.appearance-swatch[data-swatch="moonwater"] { background: linear-gradient(135deg, #8ccfe0 12%, #c8c6f2 55%, #28445f); }
.appearance-swatch[data-swatch="cedar-steam"] { background: linear-gradient(135deg, #9db58f 12%, #e0d1aa 55%, #304a39); }
.appearance-swatch[data-swatch="ember-room"] { background: linear-gradient(135deg, #e48a62 12%, #d8a0a8 55%, #63343a); }
.appearance-type-sample[data-type-sample="poetic"] { font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.appearance-type-sample[data-type-sample="quiet"] { font-family: 'Manrope', system-ui, sans-serif; }
.appearance-type-sample[data-type-sample="clear"] { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Full Nocturne design-director pass: one hierarchy across three distinct rooms. */
body[data-profile="nocturne"] .shell {
  max-width: min(1320px, calc(100vw - 2rem)) !important;
  padding-top: clamp(0.75rem, 1.8vw, 1.35rem) !important;
}
body[data-profile="nocturne"] .topbar {
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
body[data-profile="nocturne"] .brand-name { color: var(--text); }
body[data-profile="nocturne"] :where(.brand-sub, .mixer-head .help, .scene-copy p, .settings-copy) {
  color: var(--text-muted);
}
body[data-profile="nocturne"] :where(.meta-row, .master-slider .label .meta, .sleep-timer .label .meta) {
  color: var(--text-faint);
  font-size: 0.62rem;
}
body[data-profile="nocturne"] .platform-card span {
  font-size: 0.72rem;
  line-height: 1.45;
}
body[data-profile="nocturne"] .mode-btn,
body[data-profile="nocturne"] .settings-open {
  min-height: 42px;
}
body[data-profile="nocturne"] .mode-btn[aria-pressed="true"] {
  border-color: rgb(var(--accent-soft-rgb) / 0.42);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 7px 22px -16px var(--appearance-glow);
}
body[data-profile="nocturne"] .mode-btn[aria-pressed="true"] .mode-label {
  color: rgb(var(--accent-soft-rgb));
}
body[data-profile="nocturne"][data-mode="sky"] :where(.ambient-rain, .ambient-petals),
body[data-profile="nocturne"][data-mode="radio"] :where(.ambient-rain, .ambient-petals) {
  display: none;
}
body[data-profile="nocturne"] :where(.hero, .master, .mixer-section) {
  transition: opacity 240ms var(--ease-soft), transform 240ms var(--ease-soft);
}
body[data-profile="nocturne"] :where(.sky-hero, .radio-hero) {
  animation: none;
}

/* Onsen keeps its cinematic width; the master rail follows the hero. */
body[data-profile="nocturne"] .video-stage {
  width: 100%;
  max-width: 1320px !important;
  height: clamp(320px, 50vh, 560px);
  max-height: none !important;
  aspect-ratio: auto;
  box-shadow:
    0 34px 110px -54px var(--appearance-glow),
    0 18px 68px -44px var(--appearance-glow-soft),
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.72) !important;
}
body[data-profile="nocturne"] .video-stage::after {
  content: "";
  position: absolute;
  inset: auto 10% -32px;
  height: 64px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--appearance-glow), transparent 72%);
  filter: blur(22px);
}
body[data-profile="nocturne"] .master {
  margin-top: clamp(0.75rem, 1.5vw, 1.1rem) !important;
  padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.6rem);
  background: linear-gradient(180deg, rgb(255 246 230 / 0.05), rgb(255 246 230 / 0.03));
  border-color: var(--hairline);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 rgb(255 246 230 / 0.045);
}
body[data-profile="nocturne"] .master :where(.btn, .timer-btn) { min-height: 40px; }
body[data-profile="nocturne"] .mixer-section { margin-top: clamp(1.5rem, 3vw, 2.3rem) !important; }

/* Local Scenes is a compact mix utility, not a second content section. */
body[data-profile="nocturne"] .scene-shelf {
  grid-template-columns: minmax(11rem, 0.9fr) minmax(12rem, 1fr) auto;
  align-items: center;
  margin: 0.8rem 0 1.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-panel);
}
body[data-profile="nocturne"] .scene-copy p {
  margin: 0.18rem 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
}
body[data-profile="nocturne"] .scene-shelf :where(select, .btn) { min-height: 40px; }

/* Legible 4×2 instrument deck with tactile active feedback. */
body[data-profile="nocturne"] .mixer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.75rem, 1.25vw, 1rem) !important;
}
body[data-profile="nocturne"] .channel {
  min-height: 232px !important;
  background: var(--surface-1);
}
body[data-profile="nocturne"] .channel.active {
  border-color: var(--appearance-border-strong);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.08), 0 18px 44px -32px var(--appearance-glow);
}
body[data-profile="nocturne"] .channel .stage {
  height: 124px !important;
  min-height: 124px !important;
  aspect-ratio: auto;
  opacity: 0.84 !important;
}
body[data-profile="nocturne"] .channel .stage .layer { opacity: 0.82 !important; }
body[data-profile="nocturne"] .channel .controls { padding: 0.78rem 0.88rem 0.9rem !important; }
body[data-profile="nocturne"] .channel .meta-row {
  display: flex !important;
  font-size: 0.6rem !important;
}
body[data-profile="nocturne"] .channel .name {
  min-width: 0;
  font-size: 1rem !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body[data-profile="nocturne"] .channel .value {
  color: var(--text-muted);
  font-size: 0.7rem !important;
  font-variant-numeric: tabular-nums;
}
body[data-profile="nocturne"] .slot-change,
body[data-profile="nocturne"] .slot-theme {
  min-height: 40px;
  border-color: var(--appearance-border);
  background: rgb(6 6 8 / 0.42);
  font-size: 0.72rem;
}
body[data-profile="nocturne"] .channel input[type="range"] { min-height: 28px; }
body[data-profile="nocturne"] .channel input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}
body[data-profile="nocturne"] .channel input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
}

@media (max-width: 1100px) {
  body[data-profile="nocturne"] .mixer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .appearance-options,
  .appearance-type-options,
  .appearance-light-options { grid-template-columns: 1fr; }
  body[data-profile="nocturne"] .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  body[data-profile="nocturne"] .topbar-tools { display: contents; }
  body[data-profile="nocturne"] .settings-open { grid-column: 2; grid-row: 1; }
  body[data-profile="nocturne"] .mode-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-radius: 18px;
  }
  body[data-profile="nocturne"] .mode-btn { justify-content: center; padding-inline: 0.5rem; }
  body[data-profile="nocturne"] .video-stage {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  body[data-profile="nocturne"] .master { grid-template-columns: 1fr; gap: 1rem; }
  body[data-profile="nocturne"] .master-actions { justify-content: flex-start; }
  body[data-profile="nocturne"] .scene-shelf { grid-template-columns: 1fr; align-items: stretch; }
  body[data-profile="nocturne"] .channel { min-height: 210px !important; }
  body[data-profile="nocturne"] .channel .stage { height: 102px !important; min-height: 102px !important; }
}
@media (max-width: 360px) {
  body[data-profile="nocturne"] .mixer-grid { grid-template-columns: 1fr !important; }
}

/* Sky is an observing room: a free moon, clipped halo, and readable card. */
body[data-profile="nocturne"] .sky-stage {
  height: clamp(420px, 48vw, 620px);
  aspect-ratio: auto;
  border: 1px solid var(--appearance-border);
  background: #070912;
  box-shadow: 0 32px 100px -58px rgb(95 130 175 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
body[data-profile="nocturne"] .moon-cradle {
  top: 11%;
  left: 63%;
  width: clamp(220px, 27vw, 350px);
  max-width: none;
  border-radius: 50%;
  isolation: isolate;
}
body[data-profile="nocturne"] .moon-cradle::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(240 216 160 / 0.26) 0 18%, rgb(168 188 220 / 0.12) 40%, transparent 68%);
  clip-path: circle(49% at 50% 50%);
  filter: blur(7px);
}
body[data-profile="nocturne"] .moon-cradle .moon {
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 0 28px rgb(240 220 170 / 0.28));
}
body[data-profile="nocturne"] .moon-cradle .moon-glow { display: none; }
body[data-profile="nocturne"] .sky-readout {
  left: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  width: min(340px, 38%);
  gap: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(205 220 240 / 0.14);
  border-radius: var(--radius-panel);
  background: linear-gradient(145deg, rgb(13 18 30 / 0.82), rgb(7 9 16 / 0.72));
  box-shadow: 0 18px 48px -32px rgb(0 0 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.045);
  text-shadow: none;
  backdrop-filter: blur(8px);
}
body[data-profile="nocturne"] .sky-readout .readout-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  padding: 0.48rem 0;
}
body[data-profile="nocturne"] .sky-readout .readout-row + .readout-row { border-top: 1px solid rgb(220 230 245 / 0.08); }
body[data-profile="nocturne"] .sky-readout .readout-label { color: #8c95a6; }
body[data-profile="nocturne"] .sky-readout .readout-value {
  min-width: 0;
  color: #e8e9e8;
  line-height: 1.4;
  overflow-wrap: break-word;
}
body[data-profile="nocturne"] .sky-readout #sky-moon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  color: rgb(var(--accent-soft-rgb));
}
body[data-profile="nocturne"] .sky-readout .readout-where .readout-value {
  color: var(--text-faint);
  font-size: 0.72rem;
}

/* Radio is a compact tactile deck with clear empty/selected/playing states. */
.deck-slider {
  grid-template-columns: 6.4em minmax(0, 1fr) 3.2em;
}
.deck-slider .deck-slider-label {
  white-space: nowrap;
  letter-spacing: 0.1em;
}
body[data-profile="nocturne"] .radio-stage {
  min-height: 500px;
  height: auto;
  aspect-ratio: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  padding: clamp(0.9rem, 1.7vw, 1.35rem);
  border: 1px solid var(--appearance-border);
}
body[data-profile="nocturne"] .deck {
  gap: 0.7rem;
  padding: clamp(0.9rem, 1.5vw, 1.15rem);
  border-radius: var(--radius-well);
}
body[data-profile="nocturne"] .deck-playlist { border-radius: var(--radius-well); min-height: 0; }
body[data-profile="nocturne"] .deck-display { min-height: 76px; border-radius: var(--radius-instrument); }
body[data-profile="nocturne"] .deck-reels { padding: 0.15rem 0; }
body[data-profile="nocturne"] .reel { width: 56px; height: 56px; }
body[data-profile="nocturne"] .deck-btn { width: 44px; height: 44px; }
body[data-profile="nocturne"] .deck-btn-primary { width: 54px; height: 54px; }
body[data-profile="nocturne"] .deck-slider { min-height: 36px; }
body[data-profile="nocturne"] .deck-slider input[type="range"] { min-height: 28px; }
body[data-profile="nocturne"] .playlist-entry { display: block; }
body[data-profile="nocturne"] .playlist-item {
  appearance: none;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
}
body[data-profile="nocturne"] .playlist-item.selected {
  color: var(--lantern-soft);
  background: rgb(var(--accent-rgb) / 0.07);
  border-left-color: rgb(var(--accent-rgb) / 0.54);
}
body[data-profile="nocturne"] .playlist-item.playing {
  color: #f5e6c8;
  background: rgb(var(--accent-rgb) / 0.12);
  border-left-color: var(--lantern);
}
.playlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: auto;
  max-width: 34ch;
  padding: 2rem 1.4rem;
  line-height: 1.5;
}
.playlist-empty[hidden] { display: none; }
.playlist-empty-glyph {
  font-size: 1.15rem;
  line-height: 1;
  color: rgb(var(--accent-rgb) / 0.5);
  text-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.35);
}
.playlist-empty-line {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text-muted);
}
.playlist-empty-hint {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.playlist-empty-hint code {
  font-size: 0.66rem;
  color: var(--lantern-soft);
}
body[data-profile="nocturne"] .radio-stage[data-track-count="1"] .deck-playlist { align-self: center; min-height: 160px; }
body[data-profile="nocturne"] .radio-stage[data-state="empty"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr); }
body[data-profile="nocturne"] .radio-stage[data-state="empty"] :where(.deck-reels, .deck-controls, .deck-slider) { opacity: 0.42; }
body[data-profile="nocturne"] .radio-stage[data-state="playing"] .deck {
  border-color: var(--appearance-border-strong);
  box-shadow: inset 0 1px 0 rgb(255 220 180 / 0.09), 0 18px 56px -34px var(--appearance-glow);
}

/* Settings: two ephemeral tabs, one contained scroll surface, one focus boundary. */
body.settings-modal-open { overflow: hidden; }
.settings-dialog { scrollbar-gutter: stable; }
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  margin: 0.85rem 0 0.35rem;
  border: 1px solid var(--appearance-border);
  border-radius: 999px;
  background: rgb(2 2 3 / 0.28);
}
.settings-tab {
  appearance: none;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: 500 0.76rem var(--font-body);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.settings-tab[aria-selected="true"] {
  color: var(--text);
  border-color: var(--appearance-border);
  background: var(--surface-hover);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.settings-tab[hidden], .settings-panel[hidden] { display: none !important; }
.settings-panel { min-width: 0; }
.settings-panel > .settings-section:first-child { margin-top: 0.8rem; }
body[data-profile="nocturne"] .settings-dialog { width: min(680px, 100%); }
body[data-profile="nocturne-pi"] .settings-tabs { grid-template-columns: 1fr; }
body[data-profile="nocturne-pi"] #settings-tab-setup { cursor: default; }

/* Picker hierarchy stays catalog-compatible while gaining contrast and containment. */
body[data-profile="nocturne"] .sound-picker { padding: clamp(0.65rem, 2vw, 1.5rem); }
body[data-profile="nocturne"] .sound-picker-panel {
  width: min(920px, 100%);
  max-height: calc(100dvh - clamp(1.3rem, 4vw, 3rem));
  border-radius: var(--radius-overlay);
}
body[data-profile="nocturne"] .sound-picker-head p { color: var(--text-muted); line-height: 1.45; }
body[data-profile="nocturne"] .sound-search input {
  min-height: 44px;
  border-color: var(--appearance-border);
  background: rgb(3 3 5 / 0.62);
}
body[data-profile="nocturne"] .sound-chip {
  min-height: 38px;
  color: var(--text-muted);
  font-size: 0.68rem;
}
body[data-profile="nocturne"] .sound-chip.active { color: #100d0b; background: rgb(var(--accent-soft-rgb)); }
body[data-profile="nocturne"] .sound-option {
  border-radius: var(--radius-panel);
  border-color: rgb(255 255 255 / 0.11);
  background: rgb(7 7 9 / 0.58);
}
body[data-profile="nocturne"] .sound-option-name { color: var(--text); font-size: 1.12rem; }
body[data-profile="nocturne"] .sound-option-meta { color: var(--text-muted); line-height: 1.45; }
body[data-profile="nocturne"] .sound-option-path { color: var(--text-faint); }
body[data-profile="nocturne"] .sound-option-actions button { min-height: 40px; padding-inline: 0.78rem; }

/* Optional Utility remains disabled and route-hidden by default. When enabled,
   keep its supporting copy in the same quiet-but-readable hierarchy. */
body[data-profile="nocturne"] :where(
  .utility-subtitle,
  .utility-song-card .artist,
  .utility-song-card .meta,
  .utility-empty,
  .utility-status,
  .utility-help
) {
  color: var(--text-muted);
}
body[data-profile="nocturne"] .utility-editor-frame::before { color: rgb(var(--accent-rgb) / 0.72); }

@media (max-width: 760px) {
  body[data-profile="nocturne"] .sky-stage { height: 610px; }
  body[data-profile="nocturne"] .moon-cradle {
    top: 3.2rem;
    left: 50%;
    width: clamp(190px, 58vw, 245px);
  }
  body[data-profile="nocturne"] .sky-readout {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
  }
  body[data-profile="nocturne"] .radio-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  body[data-profile="nocturne"] .deck-playlist { min-height: 210px; max-height: 340px; }
  body[data-profile="nocturne"] .radio-stage[data-state="empty"] { grid-template-columns: 1fr; }
  body[data-profile="nocturne"] .sound-picker-panel { border-radius: var(--radius-overlay); }
  body[data-profile="nocturne"] .sound-picker-head,
  body[data-profile="nocturne"] .sound-picker-tools,
  body[data-profile="nocturne"] .sound-list { padding: 0.85rem; }
}

/* Nocturne Pi: same controls and audio, lower continuous rendering cost. */
body[data-profile="nocturne-pi"] .ambient-rain,
body[data-profile="nocturne-pi"] .ambient-petals,
body[data-profile="nocturne-pi"] .grain {
  display: none !important;
}
body[data-profile="nocturne-pi"] .layer,
body[data-profile="nocturne-pi"] .scene-bloom,
body[data-profile="nocturne-pi"] .live-dot,
body[data-profile="nocturne-pi"] .radio-glow,
body[data-profile="nocturne-pi"] .reel {
  animation: none !important;
  translate: none !important;
  transform: none !important;
}
body[data-profile="nocturne-pi"] #bg-video {
  display: none !important;
}
body[data-profile="nocturne-pi"] .video-stage {
  background: #090a0d url('/rain-still.webp') center / cover no-repeat !important;
}
body[data-profile="nocturne-pi"] .scene {
  opacity: 0.34;
}
body[data-profile="nocturne-pi"] .settings-dialog,
body[data-profile="nocturne-pi"] .sound-picker-panel,
body[data-profile="nocturne-pi"] .channel,
body[data-profile="nocturne-pi"] .local-scenes {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Preserve the existing compact Pi deck; the richer layout belongs only to
   the full presentation profile. */
body[data-profile="nocturne-pi"] .shell {
  max-width: min(1500px, calc(100vw - 2rem)) !important;
  padding-top: 0.75rem !important;
}
body[data-profile="nocturne-pi"] .video-stage { max-height: 68vh !important; }
body[data-profile="nocturne-pi"] .mixer-section { margin-top: 0.75rem !important; }
body[data-profile="nocturne-pi"] .mixer-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
}
body[data-profile="nocturne-pi"] .channel { min-height: 128px !important; aspect-ratio: auto !important; }
body[data-profile="nocturne-pi"] .channel .stage { height: 58px !important; min-height: 58px !important; opacity: 0.42 !important; }
body[data-profile="nocturne-pi"] .channel .stage .layer { opacity: 0.55 !important; }
body[data-profile="nocturne-pi"] .channel .controls { padding: 0.55rem 0.65rem 0.65rem !important; }
body[data-profile="nocturne-pi"] .channel .meta-row { display: none !important; }
body[data-profile="nocturne-pi"] .channel .name {
  font-size: 0.68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-profile="nocturne-pi"] .master { margin-top: 0.75rem !important; padding: 0.85rem 1.15rem !important; }
@media (max-width: 1000px) {
  body[data-profile="nocturne-pi"] .mixer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  body[data-profile="nocturne-pi"] .mixer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 340px) {
  body[data-profile="nocturne-pi"] .mixer-grid { grid-template-columns: 1fr !important; }
}

@media (pointer: coarse) {
  :where(button, a[href], input:not([type="range"]), select, textarea),
  .radio-file-button {
    min-block-size: 44px !important;
  }

  input[type="range"] {
    min-block-size: 44px !important;
    block-size: 44px !important;
  }

  :where(.settings-dialog, .sound-picker-panel) :where(input, select, textarea) {
    font-size: 16px !important;
  }

  .settings-dialog {
    max-block-size: calc(100dvh - 1rem) !important;
  }
}