/* DV66 FERRO SLIDER · Monolith output page · stage 3 of 4 (no now-playing pill or mini player yet; the springs are all in the scripts). Dark by design (never follows the OS). */
:root {
  --ink: #f2efe9; --ink-2: #efece6; --mute: #8d8a85; --hint: #8a8781; --gold: #c9a36a; --amber: #e3a64b;
  --glass: rgba(20, 20, 22, .72); --line: rgba(255, 255, 255, .07); --focus: #e9dcc4;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #08080a; color: var(--ink); }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.room, .fluid { position: fixed; display: block; pointer-events: none; }
.room { inset: 0; width: 100%; height: 100%; background: radial-gradient(120% 70% at 50% 62%, #3a3938 0%, #151515 42%, #040404 78%); }
.fluid { left: 0; top: 0; }
.veil { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; z-index: 1; }
html.offline .veil { opacity: .32; }

/* ---------- header */
.top { position: fixed; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; z-index: 6; font: 500 13px/1 'Inter'; color: var(--mute); }
.logo { color: var(--ink-2); font: 600 13px/1 'Inter'; letter-spacing: .32em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; min-height: 44px; }
.logo i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a8a8a, #050505 60%); box-shadow: 0 0 0 1px #333; display: block; }
.top nav { display: flex; gap: 6px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 22px; transition: color .2s ease; }
.top nav a:hover { color: var(--ink-2); }
.top nav a[aria-current] { color: var(--ink-2); }

/* ---------- readout */
.readout { position: fixed; left: 50%; top: 8.5%; transform: translateX(-50%); text-align: center; z-index: 5; width: min(92vw, 640px); pointer-events: none; }
.readout > * { pointer-events: auto; }
.out { position: relative; display: inline-block; }
.dev { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 10px 0 16px; border-radius: 22px; font: 600 11px/1 'Inter'; letter-spacing: .34em; text-transform: uppercase; color: var(--mute); transition: color .2s ease, background-color .2s ease; }
.dev .dot { letter-spacing: 0; }
.dev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-left: -.1em; opacity: .7; transition: transform .25s ease; }
.dev:hover { color: var(--ink-2); background: rgba(255, 255, 255, .04); }
.dev[aria-expanded="true"] svg { transform: rotate(180deg); }
.devlist { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 9; list-style: none; margin: 0; padding: 6px; min-width: 260px; text-align: left; border-radius: 16px; background: rgba(18, 18, 20, .9); box-shadow: 0 0 0 1px var(--line) inset, 0 30px 60px -20px #000; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.devlist[hidden] { display: none; }
.devlist li { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 8px 14px 8px 36px; border-radius: 11px; cursor: pointer; position: relative; font: 400 12px/1.2 'Inter'; color: var(--mute); }
.devlist li b { font: 500 14px/1.2 'Inter'; color: var(--ink-2); }
.devlist li .off { color: #c98b6a; }
.devlist li[aria-selected="true"]::before { content: ''; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold); }
.devlist li:hover, .devlist li.act { background: rgba(255, 255, 255, .06); }
.devlist:focus-visible { outline: none; }
.devlist:focus-visible li.act { box-shadow: 0 0 0 2px var(--focus) inset; }

.v { font: 400 112px/1 'Instrument Serif', serif; letter-spacing: -.02em; margin-top: 2px; color: var(--ink); transition: color .35s ease, opacity .35s ease; font-variant-numeric: tabular-nums; }
.v small { font: 300 28px/1 'Inter'; letter-spacing: 0; color: var(--mute); margin-left: 6px; vertical-align: 56px; }
.s { font: 400 14px/1.4 'Inter'; color: var(--hint); margin: 12px auto 0; letter-spacing: .01em; max-width: 34em; min-height: 1.4em; transition: color .3s ease; }
html.muted .v, html.offline .v { opacity: .34; }
html.loud .v { color: var(--amber); }
html.loud .s { color: #d9a65c; }
html.ok .s { color: #b9d3a8; }
.reconnect { margin-top: 12px; min-height: 44px; padding: 0 22px; border-radius: 22px; font: 500 13px/1 'Inter'; color: var(--ink-2); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; transition: background-color .2s ease; display: inline-flex; align-items: center; gap: 10px; }
.reconnect:hover { background: rgba(255, 255, 255, .1); }
.reconnect[hidden] { display: none; }
.reconnect[aria-busy="true"] { pointer-events: none; color: var(--mute); }
.reconnect[aria-busy="true"]::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }

/* ---------- the control (positioned by app.js over the projected tray) */
.ctrl { position: fixed; z-index: 4; touch-action: none; cursor: grab; border-radius: 40px; }
.ctrl.drag { cursor: grabbing; }
html.offline .ctrl { cursor: not-allowed; }
.ctrl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ring { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; opacity: 0; transition: opacity .2s ease; }
.ring path { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(233, 220, 196, .35)); }
html.kbd .ring { opacity: 1; }
.spk { position: fixed; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; color: var(--mute); transition: color .2s ease, background-color .2s ease; }
.spk svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spk:hover { color: var(--ink-2); background: rgba(255, 255, 255, .05); }
.spk:disabled { opacity: .35; cursor: not-allowed; }
.spk .x { display: none; }
.spk[aria-pressed="true"] { color: var(--ink-2); }
.spk[aria-pressed="true"] .x { display: inline; }

/* ---------- caption + brandmark */
.cap { position: fixed; left: 48px; bottom: 40px; z-index: 5; font: 500 13px/1.45 'Inter', sans-serif; letter-spacing: .02em; pointer-events: none; color: #e9e7e3; max-width: 30vw; }
.cap b { display: block; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin-bottom: 8px; }
.cap span { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.cap i { display: block; font-style: normal; opacity: .55; margin-top: 4px; font-size: 13px; }
.brandmark { position: fixed; right: 48px; bottom: 40px; z-index: 5; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .3em; text-transform: uppercase; opacity: .38; pointer-events: none; }

/* ---------- CSS fallback (no WebGL2, or ?nogl): the same layout in CSS */
.fallback { display: none; }
html.nogl .fallback { display: block; }
html.nogl .fluid, html.nogl .ring { display: none; }
.fb-plate { position: fixed; inset: 0; background: radial-gradient(75% 30% at 50% 58%, #6c6a68 0%, #3a3938 38%, #111 72%, #050505 100%); }
.fb-tray { position: fixed; left: 6%; right: 6%; top: 56%; height: 44px; margin-top: -22px; border-radius: 22px; background: linear-gradient(#2a2a2a, #6d6b69 70%, #a09d99); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .35); }
.fb-fill { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 72%; border-radius: 14px; background: linear-gradient(#050505 0%, #3d3d3d 22%, #e6e5e2 30%, #1a1a1a 42%, #000 100%); box-shadow: 0 4px 8px rgba(0, 0, 0, .6); }
.fb-heap { position: absolute; top: 50%; left: 72%; width: 120px; height: 120px; margin: -96px 0 0 -60px; border-radius: 50% 50% 46% 46%; background: radial-gradient(40% 26% at 42% 30%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(circle at 50% 60%, #222 0%, #050505 70%); clip-path: polygon(0 80%, 8% 52%, 14% 70%, 22% 30%, 30% 62%, 38% 12%, 46% 55%, 52% 0, 58% 52%, 66% 14%, 72% 60%, 80% 28%, 86% 66%, 93% 50%, 100% 80%, 100% 100%, 0 100%); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---------- smaller screens */
@media (max-width: 1100px) { .cap i { display: none; } .cap { max-width: 26vw; } }
@media (max-width: 900px) {
  .cap, .brandmark { display: none; }
}
@media (max-width: 760px) {
  .top { padding: 0 20px; }
  .top nav { display: none; }
  .readout { top: 10.5%; }
  .dev { letter-spacing: .2em; white-space: nowrap; }
  .v { font-size: 96px; }
  .v small { vertical-align: 46px; font-size: 26px; }
  .s { font-size: 13px; margin-top: 8px; }
  .cap { display: block; left: 22px; bottom: max(22px, env(safe-area-inset-bottom)); max-width: none; }
  .cap b { display: none; }
  .cap span { font-size: 13px; opacity: .7; }
  .cap i { display: none; }
}
@media (max-width: 360px) { .v { font-size: 80px; } .v small { vertical-align: 38px; } .dev { letter-spacing: .14em; padding: 0 6px 0 10px; } }
@media (max-height: 640px) and (max-width: 760px) { .cap { display: none; } .s { display: none; } }
@media (max-height: 560px) and (min-width: 600px) {
  .top { height: 56px; }
  .readout { top: 7%; }
  .v { font-size: 64px; }
  .v small { vertical-align: 30px; font-size: 20px; }
  .s { display: none; }
  .cap, .brandmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .veil, .v, .s { transition: none; }
}
/* portrait tablets: the now-playing bar owns the bottom edge */
@media (max-aspect-ratio: 82/100) and (min-width: 761px) { .cap, .brandmark { display: none; } }
/* big screens: type grows with the scene */
@media (min-width: 2200px) and (min-height: 1250px) {
  .top { height: 104px; padding: 0 72px; font-size: 18px; }
  .logo { font-size: 18px; gap: 16px; } .logo i { width: 19px; height: 19px; }
  .top nav a { padding: 0 18px; }
  .dev { font-size: 15px; } .dev svg { width: 18px; height: 18px; }
  .v { font-size: 184px; } .v small { font-size: 42px; vertical-align: 92px; }
  .s { font-size: 19px; }
  .cap { left: 72px; bottom: 60px; font-size: 17px; } .cap b { font-size: 16px; } .cap span { font-size: 23px; } .cap i { font-size: 17px; }
  .brandmark { right: 72px; bottom: 60px; font-size: 15px; }
  .spk { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .spk svg { width: 32px; height: 32px; }
}