/* Norlay Atmosphere
   A warm, quiet surface for a clock and a small sound mixer. The palettes are
   deliberately low-chroma: sea-glass, aged brass and ink, with Norlay violet
   used only as a rare accent. */

:root {
  color-scheme: light;

  --bg: #f3eee5;
  --bg-soft: #e8e0d3;
  --ink: #17231f;
  --ink-soft: #3f4f49;
  --muted: #5d6b65;
  --line: rgba(23, 35, 31, 0.14);
  --line-strong: rgba(23, 35, 31, 0.24);
  --card: rgba(255, 251, 243, 0.72);
  --card-solid: #fbf6ec;
  --brass: #9a6b2f;
  --brass-bright: #b98745;
  --sea: #2f6f6a;
  --sea-soft: rgba(47, 111, 106, 0.13);
  --violet: #6d28d9;
  --danger: #a33b2f;
  --face: #fbf6ec;
  --face-light: #fffdf8;
  --face-shade: #e4d8c5;
  --face-ink: #26322e;
  --face-muted: #7d8a83;
  --hand: #22302c;
  --second: #a8552f;
  --shadow-color: #2a2118;
  --shadow: 0 26px 70px rgba(51, 40, 28, 0.18), 0 4px 18px rgba(51, 40, 28, 0.08);
  --focus: #2f6f6a;
  --radius: 18px;

  --scene-1: #f5e8d2;
  --scene-2: #dfc9aa;
  --scene-3: #7aa6a0;
  --scene-glow: #ffdfae;
  --scene-ink: #4a5d55;
}

/* Explicit light choice. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Explicit dark choice, and the OS default when no choice is stored. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1315;
  --bg-soft: #101d20;
  --ink: #eef2ea;
  --ink-soft: #c3d0ca;
  --muted: #93a39d;
  --line: rgba(238, 242, 234, 0.15);
  --line-strong: rgba(238, 242, 234, 0.26);
  --card: rgba(14, 24, 26, 0.7);
  --card-solid: #0f1a1c;
  --brass: #d2a15b;
  --brass-bright: #e3ba7e;
  --sea: #7cc4ba;
  --sea-soft: rgba(124, 196, 186, 0.14);
  --violet: #b49dfb;
  --danger: #f0a096;
  --face: #0e191b;
  --face-light: #18282b;
  --face-shade: #081012;
  --face-ink: #eef2ea;
  --face-muted: #84958e;
  --hand: #e9efe6;
  --second: #e2a06c;
  --shadow-color: #000000;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.3);
  --focus: #7cc4ba;

  --scene-1: #0e1c1f;
  --scene-2: #14282b;
  --scene-3: #2d5a58;
  --scene-glow: #7a5a35;
  --scene-ink: #9eb6ae;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #0b1315;
    --bg-soft: #101d20;
    --ink: #eef2ea;
    --ink-soft: #c3d0ca;
    --muted: #93a39d;
    --line: rgba(238, 242, 234, 0.15);
    --line-strong: rgba(238, 242, 234, 0.26);
    --card: rgba(14, 24, 26, 0.7);
    --card-solid: #0f1a1c;
    --brass: #d2a15b;
    --brass-bright: #e3ba7e;
    --sea: #7cc4ba;
    --sea-soft: rgba(124, 196, 186, 0.14);
    --violet: #b49dfb;
    --danger: #f0a096;
    --face: #0e191b;
    --face-light: #18282b;
    --face-shade: #081012;
    --face-ink: #eef2ea;
    --face-muted: #84958e;
    --hand: #e9efe6;
    --second: #e2a06c;
    --shadow-color: #000000;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.3);
    --focus: #7cc4ba;

    --scene-1: #0e1c1f;
    --scene-2: #14282b;
    --scene-3: #2d5a58;
    --scene-glow: #7a5a35;
    --scene-ink: #9eb6ae;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color 300ms ease, color 300ms ease;
}

body:has(dialog[open]) {
  overflow: hidden;
}

h1,
h2,
h3 {
  line-height: 1.18;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--sea);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr-only {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: -120px;
  left: 14px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 140ms ease;
}

.skip-link:focus {
  top: 14px;
  color: var(--bg);
}

/* ------------------------------------------------------------- backdrop --- */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.scene-base,
.scene-glow,
.scene-horizon,
.scene-waves,
.scene-rain,
.scene-canopy,
.scene-rings,
.scene-vignette,
.scene-grain {
  position: absolute;
  inset: 0;
}

.scene-base {
  background:
    linear-gradient(178deg, var(--scene-1) 0%, var(--scene-2) 62%, var(--scene-2) 100%);
}

.scene-glow {
  background:
    radial-gradient(52% 44% at 76% 6%, var(--scene-glow) 0%, transparent 68%),
    radial-gradient(40% 34% at 22% 18%, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
  opacity: 0.72;
  animation: glow-drift 38s ease-in-out infinite alternate;
}

.scene-horizon {
  top: auto;
  bottom: 0;
  height: 46%;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--scene-3) 55%, transparent) 100%);
  opacity: 0.5;
  filter: blur(2px);
}

.scene-waves {
  display: none;
  top: auto;
  bottom: -6%;
  left: -20%;
  width: 140%;
  height: 38%;
  border-radius: 48% 52% 0 0 / 30% 26% 0 0;
  background:
    radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--scene-3) 70%, transparent) 0%, transparent 72%);
  opacity: 0.6;
  filter: blur(10px);
  animation: wave-sway 18s ease-in-out infinite alternate;
}

.scene-waves-b {
  bottom: -12%;
  height: 44%;
  opacity: 0.4;
  animation-duration: 25s;
  animation-direction: alternate-reverse;
}

body[data-scene="beach"] .scene-waves,
body[data-scene="ocean"] .scene-waves,
body[data-scene="dusk"] .scene-waves {
  display: block;
}

body[data-scene="beach"] {
  --scene-1: #f6e9d4;
  --scene-2: #e0c9a9;
  --scene-3: #7aa6a0;
  --scene-glow: #ffdfae;
}

body[data-scene="ocean"] {
  --scene-1: #e7ece7;
  --scene-2: #c8d6d0;
  --scene-3: #6b9a97;
  --scene-glow: #f7e3b9;
}

body[data-scene="rain"] {
  --scene-1: #dfe6e3;
  --scene-2: #b8c6c3;
  --scene-3: #5f7c7d;
  --scene-glow: #d9d4c4;
}

body[data-scene="forest"] {
  --scene-1: #e7ead9;
  --scene-2: #c2cdb0;
  --scene-3: #5f8265;
  --scene-glow: #efe3b1;
}

body[data-scene="clock"] {
  --scene-1: #f2e5cf;
  --scene-2: #dcc7a9;
  --scene-3: #8c7249;
  --scene-glow: #ffd99a;
}

body[data-scene="dusk"] {
  --scene-1: #e6dfe6;
  --scene-2: #c4bfd1;
  --scene-3: #767a9b;
  --scene-glow: #f1c9a5;
}

:root[data-theme="dark"] body[data-scene="beach"] {
  --scene-1: #101c1d;
  --scene-2: #1a2b29;
  --scene-3: #38625f;
  --scene-glow: #6b4f2f;
}

:root[data-theme="dark"] body[data-scene="ocean"] {
  --scene-1: #0d181c;
  --scene-2: #14262b;
  --scene-3: #2f5b60;
  --scene-glow: #5d5140;
}

:root[data-theme="dark"] body[data-scene="rain"] {
  --scene-1: #0d1517;
  --scene-2: #172326;
  --scene-3: #354e52;
  --scene-glow: #4b4a41;
}

:root[data-theme="dark"] body[data-scene="forest"] {
  --scene-1: #0e1713;
  --scene-2: #18251c;
  --scene-3: #365a40;
  --scene-glow: #5b4f2e;
}

:root[data-theme="dark"] body[data-scene="clock"] {
  --scene-1: #17130e;
  --scene-2: #261e14;
  --scene-3: #5c472c;
  --scene-glow: #6f4a22;
}

:root[data-theme="dark"] body[data-scene="dusk"] {
  --scene-1: #121020;
  --scene-2: #1b1930;
  --scene-3: #3f3d63;
  --scene-glow: #5a3d55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body[data-scene="beach"] {
    --scene-1: #101c1d;
    --scene-2: #1a2b29;
    --scene-3: #38625f;
    --scene-glow: #6b4f2f;
  }

  :root:not([data-theme]) body[data-scene="ocean"] {
    --scene-1: #0d181c;
    --scene-2: #14262b;
    --scene-3: #2f5b60;
    --scene-glow: #5d5140;
  }

  :root:not([data-theme]) body[data-scene="rain"] {
    --scene-1: #0d1517;
    --scene-2: #172326;
    --scene-3: #354e52;
    --scene-glow: #4b4a41;
  }

  :root:not([data-theme]) body[data-scene="forest"] {
    --scene-1: #0e1713;
    --scene-2: #18251c;
    --scene-3: #365a40;
    --scene-glow: #5b4f2e;
  }

  :root:not([data-theme]) body[data-scene="clock"] {
    --scene-1: #17130e;
    --scene-2: #261e14;
    --scene-3: #5c472c;
    --scene-glow: #6f4a22;
  }

  :root:not([data-theme]) body[data-scene="dusk"] {
    --scene-1: #121020;
    --scene-2: #1b1930;
    --scene-3: #3f3d63;
    --scene-glow: #5a3d55;
  }
}

.scene-rain {
  display: none;
  inset: -20% -10%;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0 13px,
    rgba(226, 240, 240, 0.2) 13px 14px,
    transparent 14px 28px
  );
  opacity: 0.45;
  animation: rain-fall 1.6s linear infinite;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), #000 45%, #000 100%);
}

body[data-scene="rain"] .scene-rain {
  display: block;
}

.scene-canopy {
  display: none;
  inset: -20% -30% auto -30%;
  height: 72%;
  background:
    radial-gradient(42% 55% at 18% 18%, color-mix(in srgb, var(--scene-3) 48%, transparent) 0%, transparent 70%),
    radial-gradient(48% 62% at 82% 8%, color-mix(in srgb, var(--scene-3) 38%, transparent) 0%, transparent 74%);
  filter: blur(26px);
  opacity: 0.62;
  animation: canopy-drift 46s ease-in-out infinite alternate;
}

.scene-canopy-b {
  inset: auto -20% -24% -20%;
  height: 58%;
  opacity: 0.4;
  animation-direction: alternate-reverse;
}

body[data-scene="forest"] .scene-canopy {
  display: block;
}

.scene-rings {
  display: none;
  background:
    repeating-radial-gradient(circle at 50% 46%, transparent 0 58px, color-mix(in srgb, var(--scene-3) 12%, transparent) 58px 59px);
  opacity: 0.32;
  animation: ring-turn 180s linear infinite;
}

body[data-scene="clock"] .scene-rings {
  display: block;
}

body.no-scene .scene {
  display: none;
}

.scene-vignette {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(20, 20, 18, 0.16) 100%);
  opacity: 0.9;
}

.scene-grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .scene-grain {
  mix-blend-mode: screen;
  opacity: 0.025;
}

@keyframes glow-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

@keyframes wave-sway {
  from { transform: translate3d(-2%, 1.5%, 0) scaleX(1.04); }
  to { transform: translate3d(2%, -1%, 0) scaleX(0.97); }
}

@keyframes rain-fall {
  from { transform: translate3d(0, -8%, 0); }
  to { transform: translate3d(-3%, 8%, 0); }
}

@keyframes canopy-drift {
  from { transform: translate3d(-1%, 0, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

@keyframes ring-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html[data-motion="reduce"] .scene-glow,
html[data-motion="reduce"] .scene-waves,
html[data-motion="reduce"] .scene-canopy,
html[data-motion="reduce"] .scene-rings,
html[data-motion="reduce"] .scene-rain {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .scene-glow,
  html:not([data-motion="full"]) .scene-waves,
  html:not([data-motion="full"]) .scene-canopy,
  html:not([data-motion="full"]) .scene-rings,
  html:not([data-motion="full"]) .scene-rain {
    animation: none !important;
  }
}

/* -------------------------------------------------------------- chrome --- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(16px, 2.6vw, 28px) clamp(18px, 4vw, 44px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  display: inline-flex;
  color: var(--brass);
}

.brand-mark svg {
  display: block;
}

.brand-text {
  white-space: nowrap;
}

.brand-text strong {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.55em 1.05em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.button:hover {
  border-color: var(--sea);
  background: color-mix(in srgb, var(--card) 70%, var(--sea-soft));
}

.button:active {
  transform: translateY(1px);
}

.button.quiet {
  background: transparent;
}

.button.small {
  min-height: 38px;
  padding: 0.4em 0.8em;
  font-size: 0.84rem;
}

.button.danger {
  color: var(--danger);
}

.button[disabled] {
  opacity: 0.62;
  cursor: progress;
}

/* ---------------------------------------------------------------- clock --- */

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vh, 28px);
  padding: clamp(10px, 2vh, 28px) 20px clamp(18px, 3vh, 36px);
}

.clock {
  position: relative;
  width: min(78vw, 46vh, 460px);
  min-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.clock-face {
  width: 100%;
  height: auto;
  overflow: visible;
}

.clock-drop {
  fill: var(--shadow-color);
  opacity: 0.2;
  filter: blur(12px);
}

.clock-rim {
  fill: var(--brass);
  opacity: 0.86;
}

.clock-inner-rim {
  fill: var(--face-shade);
  opacity: 0.9;
}

.clock-dial {
  fill: url(#face-warm);
  stroke: color-mix(in srgb, var(--brass) 30%, transparent);
  stroke-width: 0.8;
}

.tick {
  stroke: var(--face-muted);
  stroke-width: 1.1;
  opacity: 0.55;
}

.tick-major {
  stroke: var(--face-ink);
  stroke-width: 2.6;
  opacity: 0.8;
  stroke-linecap: round;
}

.numeral {
  fill: var(--face-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 25px;
  font-weight: 500;
}

.numeral-roman {
  font-size: 22px;
  letter-spacing: 0.02em;
}

.hand {
  fill: var(--hand);
}

.hand-second {
  fill: var(--second);
}

.hand-second circle {
  fill: var(--second);
}

.clock-pin {
  fill: var(--hand);
}

.clock-pin-inner {
  fill: var(--second);
}

.clock--no-seconds #hand-second {
  display: none;
}

.clock--no-digital .digital {
  display: none;
}

.clock--no-date .digital-date {
  display: none;
}

.clock[data-style="minimal"] .clock-rim {
  opacity: 0.32;
}

.clock[data-style="minimal"] .clock-inner-rim {
  opacity: 0.5;
}

.clock[data-style="minimal"] .clock-dial {
  fill: color-mix(in srgb, var(--face) 82%, transparent);
}

.clock[data-style="minimal"] .numeral {
  display: none;
}

.clock[data-style="vintage"] {
  --face: #f2e4ca;
  --face-light: #fbf1dc;
  --face-shade: #d9c5a2;
  --face-ink: #3b2f22;
  --face-muted: #8f7b5e;
  --hand: #33291d;
  --second: #8f4a2c;
}

.clock[data-style="vintage"] .clock-inner-rim {
  stroke: var(--brass);
  stroke-width: 1.5;
}

.clock[data-style="vintage"] .numeral {
  font-size: 26px;
}

.clock[data-style="modern"] {
  --face: #121d1f;
  --face-light: #1d2c2f;
  --face-shade: #0a1112;
  --face-ink: #eef2ea;
  --face-muted: #7e918a;
  --hand: #eef2ea;
  --second: #7cc4ba;
}

.clock[data-style="modern"] .clock-dial {
  stroke: rgba(124, 196, 186, 0.28);
}

.clock[data-style="modern"] .numeral {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 650;
}

.clock[data-style="modern"] .clock-rim {
  fill: #243638;
  opacity: 0.9;
}

.clock[data-style="roman"] .numeral {
  font-size: 21px;
}

.clock--reduced .hand-second {
  transition: none;
}

.digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

.digital-time {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.digital-date {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.under-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mix-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.9rem;
  color: var(--muted);
}

.mix-name {
  color: var(--ink);
  font-weight: 600;
}

.mix-sep {
  opacity: 0.5;
}

.play-state {
  color: var(--sea);
}

/* ------------------------------------------------------------ transport --- */

.transport {
  position: relative;
  z-index: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  width: min(920px, calc(100% - 28px));
  margin: 0 auto clamp(16px, 3vh, 30px);
  padding: 10px clamp(12px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.58em 1.15em 0.58em 0.95em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.play-button:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--sea));
}

.play-button:active {
  transform: translateY(1px);
}

.play-button.is-playing {
  background: var(--sea);
  color: #071110;
}

:root[data-theme="dark"] .play-button.is-playing {
  color: #06100f;
}

.play-glyph {
  display: inline-flex;
}

.play-glyph svg {
  display: block;
}

.glyph-pause {
  display: none;
}

.play-button.is-playing .glyph-play {
  display: none;
}

.play-button.is-playing .glyph-pause {
  display: block;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.volume-control label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.volume-control output {
  min-width: 3.2ch;
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.transport-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--sea) 0%,
    var(--sea) var(--fill, 50%),
    var(--line-strong) var(--fill, 50%),
    var(--line-strong) 100%
  );
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--sea);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid var(--sea);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 6px rgba(20, 20, 18, 0.24);
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid var(--sea);
  border-radius: 50%;
  background: var(--bg);
}

input[type="range"]:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ------------------------------------------------------------ immersive --- */

.immersive-bar {
  display: none;
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  transform: translateX(-50%);
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.immersive .immersive-bar {
  display: flex;
}

body.immersive .topbar,
body.immersive .transport,
body.immersive .under-clock,
body.immersive .scene {
  display: none;
}

body.immersive {
  background: var(--bg);
}

body.immersive .stage {
  min-height: 100svh;
  padding: 24px;
}

body.immersive .clock {
  width: min(64vh, 74vw, 760px);
}

body.immersive .digital-time {
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}

body.immersive .clock-drop {
  opacity: 0.28;
}

@media (max-width: 700px) {
  .clock {
    width: min(84vw, 42vh, 390px);
  }

  .transport {
    flex-wrap: wrap;
    border-radius: 26px;
    padding: 12px;
  }

  .play-button {
    order: 1;
  }

  .transport-actions {
    order: 2;
    margin-left: auto;
  }

  .volume-control {
    order: 3;
    flex-basis: 100%;
    padding: 0 4px 2px;
  }
}

/* ------------------------------------------------------------- settings --- */

.settings {
  width: min(980px, calc(100vw - 24px));
  max-width: none;
  max-height: min(88vh, 920px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card-solid);
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.settings::backdrop {
  background: rgba(7, 11, 11, 0.52);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}

.settings-head h2 {
  margin: 0;
  font-size: 1.55rem;
}

.eyebrow {
  margin: 0 0 3px;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-grid {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  max-height: calc(min(88vh, 920px) - 92px);
}

.tab-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.tab {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.tab:hover {
  background: color-mix(in srgb, var(--sea-soft) 55%, transparent);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--sea-soft);
  color: var(--ink);
  font-weight: 650;
}

.panels {
  overflow-y: auto;
  padding: 22px clamp(18px, 3vw, 30px) 34px;
  scrollbar-gutter: stable;
}

.panel[hidden] {
  display: none;
}

.panel h3 {
  margin: 0 0 6px;
  font-size: 1.32rem;
}

.section-title {
  margin-top: 30px !important;
  font-size: 1.12rem !important;
}

.panel-lede {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.94rem;
}

.panel-note {
  margin: 20px 0 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: 0.85rem;
}

/* A note that introduces a section sits tight under its heading. */
.section-note {
  margin: 0 0 14px;
}

#test-chime {
  margin-top: 4px;
}

.danger-zone {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

#reset-settings {
  margin-top: 0;
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.panel a {
  color: var(--sea);
}

.sound-list {
  border-top: 1px solid var(--line);
}

.sound-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 240px);
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.sound-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
}

.sound-name {
  cursor: pointer;
}

.sound-toggle input {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  accent-color: var(--sea);
  cursor: pointer;
}

.sound-name {
  font-size: 0.94rem;
  font-weight: 600;
}

.sound-description {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.sound-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sound-volume input {
  flex: 1;
  min-width: 70px;
}

.sound-volume output {
  min-width: 3.2ch;
  text-align: right;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.sound-row:not(.is-on) {
  opacity: 0.7;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 9px;
}

.preset-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.preset-card:hover {
  border-color: var(--sea);
}

.preset-card[aria-pressed="true"] {
  border-color: var(--sea);
  background: var(--sea-soft);
  box-shadow: inset 0 0 0 1px var(--sea);
}

.preset-name {
  font-weight: 650;
  font-size: 0.95rem;
}

.preset-description {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.preset-meta {
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.save-mix-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 14px;
}

.save-mix-row label {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--muted);
}

input[type="text"],
input[type="number"],
select {
  min-height: 44px;
  padding: 0.55em 0.7em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
}

input[type="text"] {
  flex: 1;
  min-width: 170px;
}

input[type="number"] {
  width: 100px;
}

.saved-mix-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.saved-mix {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
}

.saved-mix-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.saved-mix-name {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-mix-detail {
  color: var(--muted);
  font-size: 0.76rem;
}

.empty-note {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  color: var(--muted);
  font-size: 0.86rem;
}

.timer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.timer-options .button[aria-pressed="true"] {
  border-color: var(--sea);
  background: var(--sea-soft);
}

.timer-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.timer-custom label {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--muted);
}

.timer-status {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
  max-width: 380px;
}

.field > span {
  font-size: 0.82rem;
  color: var(--muted);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.check {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--sea);
  cursor: pointer;
}

.shortcuts {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 8px 20px;
  margin: 0 0 20px;
}

.shortcuts dt {
  font-weight: 650;
  font-size: 0.88rem;
}

.shortcuts dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.noscript {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100% - 24px));
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-solid);
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .settings-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(min(88vh, 920px) - 92px);
  }

  .tab-list {
    flex-direction: row;
    gap: 4px;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tab {
    white-space: nowrap;
    min-height: 44px;
  }

  .sound-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }

  .sound-volume {
    padding-left: 31px;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding: 14px 16px;
  }

  .brand-text {
    font-size: 0.88rem;
  }

  .topbar-actions .button {
    padding: 0.5em 0.8em;
    font-size: 0.84rem;
  }

  .settings-head {
    padding: 16px 18px 12px;
  }

  .panels {
    padding: 18px 16px 28px;
  }

  .preset-grid {
    grid-template-columns: 1fr;
  }

  .saved-mix {
    flex-wrap: wrap;
  }

  .saved-mix-text {
    flex-basis: 100%;
  }

  .digital-date {
    font-size: 0.7rem;
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .clock {
    width: min(60vw, 40vh, 380px);
  }

  .stage {
    gap: 12px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(23, 35, 31, 0.35);
    --muted: #3f4f49;
  }

  :root[data-theme="dark"] {
    --line: rgba(238, 242, 234, 0.4);
    --muted: #c3d0ca;
  }
}

/* ------------------------------------------------------------- documents --- */

.page-document {
  display: block;
  background: var(--bg);
}

.doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.doc-main {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 4vw, 30px) 72px;
}

.doc-main h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.doc-main h2 {
  margin: 34px 0 10px;
  font-size: 1.35rem;
}

.doc-main .lede {
  max-width: 68ch;
  font-size: 1.06rem;
  color: var(--ink-soft);
}

.doc-main .note {
  max-width: 70ch;
  color: var(--muted);
  font-size: 0.88rem;
}

.table-wrap {
  margin: 26px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

caption {
  text-align: left;
}

th,
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

thead th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-weight: 500;
}

.credit-name {
  display: block;
  font-weight: 650;
  color: var(--ink);
}

.credit-title {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.doc-footer {
  padding: 22px clamp(18px, 4vw, 44px) 42px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.doc-footer p {
  margin: 0;
}

@media (max-width: 560px) {
  .doc-header {
    flex-wrap: wrap;
  }

  th,
  td {
    padding: 9px 10px;
  }
}