:root {
  --bg: #0e0f11;
  --panel: #17181b;
  --line: #2a2c31;
  --text: #e8e6e3;
  --muted: #7d8087;
  --faint: #4a4d54;
  --accent: #f0b35a;
  --blue: #6aa8ff;
  --bad: #e66b6b;
  --cap: #3a3c42;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin: 0 2px; color: var(--text); }
.plain { background: none; border: none; color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.plain:hover { color: var(--text); background: var(--panel); }
a.plain { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- start ---------- */
#start { max-width: 560px; margin: 20vh auto 0; padding: 0 16px; }
#start h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
#drop { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#drop.over { border-color: var(--accent); }
#prompt { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 16px; resize: none; }
#upload-preview { height: 84px; border-radius: 6px; }
#upload-clear { position: absolute; top: 4px; right: 4px; }
#start .row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
#start .upload { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 13px; }
#start .upload:hover { border-color: var(--muted); }
#start select { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 13px; }
#start-go { margin-left: auto; padding: 8px 20px; border: none; border-radius: 8px; background: var(--accent); color: #1a1408; font-weight: 600; }
#start-go:disabled { opacity: 0.5; cursor: wait; }
#start-status { color: var(--muted); font-size: 13px; min-height: 1.4em; }
#password { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 16px; }
#login-status { color: var(--bad); font-size: 13px; }

/* ---------- app ---------- */
#app { display: grid; grid-template-rows: 44px 1fr auto 36px; height: 100vh; padding: 0 16px 6px; }
header { display: flex; align-items: center; gap: 12px; min-width: 0; }
#trail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#trail img { height: 28px; border-radius: 3px; cursor: pointer; opacity: 0.35; transition: opacity 120ms; }
#trail img:hover { opacity: 0.8; }
#trail img.current { opacity: 1; outline: 1px solid var(--accent); outline-offset: 1px; }
.tools { margin-left: auto; display: flex; gap: 2px; }

#stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
#image { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
#stage { user-select: none; }
#image.peeking { opacity: 0.92; }
#image { transition: opacity 250ms, filter 250ms; }
#image.waiting { opacity: 0.55; filter: saturate(0.6); }
#sheen { position: absolute; pointer-events: none; overflow: hidden; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%) 0 0 / 250% 100%; animation: sheen 1.8s linear infinite; }
@keyframes sheen { from { background-position: 125% 0; } to { background-position: -125% 0; } }
#progress { position: absolute; height: 3px; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
#progress i { display: block; height: 100%; background: var(--accent); transition: width 200ms linear; }
#progress.indefinite i { width: 30% !important; animation: slide 1.2s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left: 0; } to { margin-left: 70%; } }
#coming { position: absolute; transform: translateX(-50%); padding: 4px 12px; border-radius: 13px; background: rgba(14, 15, 17, 0.82); color: var(--text); font-size: 13px; white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px); }
#stage.inspecting { cursor: crosshair; }
/* Holding ⇧ shows a + at the cursor, ⇧⌥ a −, so the mode is where you're looking. */
#stage.inspecting.gathering { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M11 2v6M11 14v6M2 11h6M14 11h6' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M11 2v6M11 14v6M2 11h6M14 11h6' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23f0b35a' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M20 17.2v5.6M17.2 20h5.6' stroke='%23161208' stroke-width='1.6'/%3E%3C/svg%3E") 11 11, copy; }
#stage.inspecting.gathering.taking { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M11 2v6M11 14v6M2 11h6M14 11h6' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M11 2v6M11 14v6M2 11h6M14 11h6' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23e66b6b' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M17.2 20h5.6' stroke='%23161208' stroke-width='1.6'/%3E%3C/svg%3E") 11 11, crosshair; }

#status { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; border: none; background: rgba(14, 15, 17, 0.8); color: var(--muted); font-size: 12px; backdrop-filter: blur(6px); }
.pill.bad { color: var(--bad); }
.pill.warn { color: var(--accent); }
button.pill:hover { color: var(--text); }
.spin { width: 12px; height: 12px; border: 2px solid var(--faint); border-top-color: var(--text); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* pointing */
#hl { position: absolute; pointer-events: none; background: rgba(240, 179, 90, 0.16); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-mode: luminance; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
#pt { position: absolute; pointer-events: none; }
#levels { position: absolute; pointer-events: none; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; transform: translate(-100%, -50%); opacity: 0.55; transition: opacity 300ms; }
#levels.fresh { opacity: 1; transition: none; }
#levels i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
#levels i.at { width: 7px; height: 7px; background: #fff; }
.scope .spin { margin-right: 4px; }

/* ---------- console ---------- */
/* Dials on top (what it is), faders below (how much), like a mixing desk. */
#console { padding-top: 10px; min-width: 0; }
.scope { flex: none; display: flex; align-items: center; margin-right: 10px; border: 1px solid var(--line); border-radius: 16px; }
.scope button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: none; background: none; color: var(--muted); font-size: 12px; max-width: 180px; }
.scope button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope button:hover { color: var(--text); }
.scope.on, .scope.targeted { border-color: var(--accent); }
.scope.on button, .scope.targeted button { color: var(--accent); }
.scope .clear { padding: 0 8px 0 0; }
#rows { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
/* Centered under the picture; a row that doesn't fit scrolls (the scroll area shrinks first). */
.row { display: flex; align-items: center; justify-content: center; min-width: 0; }
.row .scroll { display: flex; gap: 2px; align-items: stretch; overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.row .scroll.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.row .scroll.more-left { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.row .scroll.more-left.more-right { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
#knobs { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

.ch { position: relative; flex: none; display: flex; user-select: none; color: var(--muted); border-radius: 8px; }
.ch.focused { background: var(--panel); color: var(--text); }
.ch.aside { opacity: 0.45; }
.ch .name { font-size: 11px; line-height: 14px; overflow: hidden; cursor: default; }
.ch.missed .name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.ch .x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); font-size: 13px; line-height: 18px; opacity: 0; }
.ch:hover .x { opacity: 0.7; }
.ch .x:hover { opacity: 1; background: var(--line); color: var(--text); }
.made { font-size: 11px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.ch .part { color: var(--accent); opacity: 0.8; font-size: 10px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#console.working .ch.pending .dialsvg .cap { animation: breathe 1s ease-in-out infinite; }

/* sliders: faders in a row under the dials, like a mixing desk, with zero (the picture as it is)
   across the middle of every one, so the row reads as one line. Every part is sl-*, so nothing
   inherits from buttons or other controls. Marks sit in whole pixels up from zero: --at for a
   mark, --at0/--at1 for a line, with zero at --z on every fader. */
.ch.sl { width: 80px; flex-direction: column; align-items: center; padding: 6px 4px 4px; }
.sl-pole { width: 100%; height: 14px; font-size: 10px; line-height: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--faint); }
.ch.sl.focused .sl-pole, .ch.sl:hover .sl-pole { color: var(--muted); }
.ch.sl .sl-name { width: 100%; height: 28px; margin-top: 2px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* A fader set for another part names it on a line of its own, below everything that lines up. */
.sl-part { width: 100%; color: var(--accent); opacity: 0.8; font-size: 10px; line-height: 12px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sl-track { --z: 64px; position: relative; width: 44px; height: 128px; margin: 2px 0; touch-action: none; cursor: pointer; }
.sl-track > i { position: absolute; display: block; left: 50%; top: calc(var(--z) - var(--at, 0) * 1px); transform: translate(-50%, -50%); pointer-events: none; }
.sl-track > .sl-line, .sl-track > .sl-fill { width: 2px; top: calc(var(--z) - var(--at1, 0) * 1px); height: calc((var(--at1, 0) - var(--at0, 0)) * 1px); transform: translateX(-50%); border-radius: 1px; transition: top 120ms ease-out, height 120ms ease-out; }
.sl-line { background: var(--line); }
.sl-fill { background: var(--accent); opacity: 0.75; }
.sl-zero { width: 16px; height: 2px; background: var(--muted); }
.sl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.sl-dot.elsewhere { background: none; box-shadow: inset 0 0 0 1px var(--muted); }
.sl-dot.making { background: var(--accent); animation: breathe 1s ease-in-out infinite; }
.sl-new { width: 8px; height: 8px; border-radius: 50%; border: 1px dashed var(--muted); visibility: hidden; }
.ch.sl.focused .sl-new, .ch.sl:hover .sl-new { visibility: visible; }
.sl-track > .hot { background: var(--text); box-shadow: none; }
.sl-track > .sl-new.hot { border-style: solid; border-color: var(--text); background: rgba(232, 230, 227, 0.18); }
.sl-knob { width: 26px; height: 6px; border-radius: 3px; background: var(--cap); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.sl-track > .sl-dot, .sl-track > .sl-new, .sl-track > .sl-knob { transition: top 120ms ease-out; }
.ch.sl.moved .sl-knob { background: var(--accent); }
.ch.sl.pending .sl-knob { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
#console.working .ch.sl.pending .sl-knob { animation: breathe 1s ease-in-out infinite; }
.sl-knob.bump-up { animation: bump-up 160ms ease-out; }
.sl-knob.bump-down { animation: bump-down 160ms ease-out; }
@keyframes bump-up { 50% { transform: translate(-50%, calc(-50% - 3px)); } }
@keyframes bump-down { 50% { transform: translate(-50%, calc(-50% + 3px)); } }
.ch.sl.loading .sl-line { animation: breathe 1.4s ease-in-out infinite; }
.ch.sl.loading .made:empty { width: 60%; height: 8px; margin: 4px auto 0; }
.sl-after { flex: none; display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .sl-track > i { transition: none !important; }
  .sl-knob.bump-up, .sl-knob.bump-down, .sl-dot.making, #console.working .ch.sl.pending .sl-knob { animation: none; }
}

/* dial */
.ch.dial { align-items: center; gap: 6px; padding: 4px 22px 4px 4px; min-width: 120px; }
.dialsvg { width: 40px; height: 40px; flex: none; cursor: grab; touch-action: none; }
.dialsvg .cap { fill: #2b2d32; stroke: var(--line); }
.ch.moved .dialsvg .cap { fill: #3a3326; stroke: var(--accent); }
.dialsvg .ptr { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.ch.moved .dialsvg .ptr { stroke: var(--accent); }
.dialsvg .det { fill: var(--faint); }
.dialsvg .det.has { fill: var(--muted); }
.dialsvg .det.cur { fill: var(--accent); }
.dialsvg .det.onscreen { fill: none; stroke: var(--muted); stroke-width: 1; }
.ch.pending .dialsvg .ptr { stroke-dasharray: 2 2; }
.dialtext { min-width: 0; max-width: 120px; }
.dialtext .name { white-space: nowrap; text-overflow: ellipsis; }
.opt { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch.moved .opt { color: var(--accent); }
.ring { display: flex; align-items: center; flex-wrap: nowrap; }
.ring .o { border: none; background: none; padding: 3px 6px; border-radius: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ring .o:hover { color: var(--text); background: var(--line); }
.ring .o.has { color: #b8bac0; }
.ring .o.cur { color: #1a1408; background: var(--accent); }
.ring .o.more { color: var(--faint); border: 1px dashed var(--faint); padding: 1px 7px; margin-left: 6px; }
.ring .o.loading { animation: breathe 1.4s ease-in-out infinite; }
.ring .o { position: relative; }
.ring .ox { display: none; position: absolute; top: -6px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); color: var(--text); font-size: 10px; line-height: 14px; text-align: center; }
.ring .o:hover .ox { display: block; }
.ring .ox:hover { background: var(--bad); }
.ring .between { border: none; background: none; width: 12px; padding: 0; font-size: 11px; color: transparent; }
.ring .between::before { content: "·"; color: var(--faint); }
.ring .between:hover { color: var(--accent); }
.ring .between:hover::before { content: ""; }

/* edit switches */
.ch.switch { min-width: 110px; }
.toggle { flex: none; position: relative; width: 34px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #2b2d32; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: left 120ms; }
.toggle.on { background: rgba(240, 179, 90, 0.25); border-color: var(--accent); }
.toggle.on i { left: 16px; background: var(--accent); }
.add.edit { margin: 0 8px 0 0; }

/* ghost channels while Claude works */
.ch.loading .cap, .ch.loading .made:empty { animation: breathe 1.4s ease-in-out infinite; }
.ch.loading .made:empty { width: 60%; height: 10px; margin-top: 10px; border-radius: 3px; background: var(--line); }
.ch.dial.loading .made:empty { width: 60px; margin-top: 0; }
@keyframes breathe { 50% { opacity: 0.35; } }

/* adding */
.add { flex: none; align-self: center; margin-left: 8px; padding: 4px 10px; border: 1px dashed var(--faint); border-radius: 12px; background: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.add:hover { border-color: var(--text); color: var(--text); }
.add.quiet { border: none; color: var(--faint); }
.add.quiet:hover { color: var(--text); }

/* ---------- footer ---------- */
footer { display: flex; align-items: center; justify-content: center; }
#hint { font-size: 12px; color: var(--muted); display: flex; gap: 16px; }
#hint kbd { color: var(--muted); }
#compose { width: min(640px, 100%); display: flex; align-items: center; gap: 10px; }
#compose-text { flex: 1; padding: 5px 10px; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; color: var(--text); font: inherit; outline: none; }
#compose .or { color: var(--muted); font-size: 12px; }
#compose-suggest { padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 13px; white-space: nowrap; }
#compose-suggest:hover { border-color: var(--text); }

#tooltip { position: fixed; z-index: 10; max-width: 280px; padding: 6px 9px; border-radius: 6px; background: #26282d; border: 1px solid var(--line); color: var(--text); font-size: 12px; line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
#toast { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px; background: #2a1c1c; color: #f1b0b0; font-size: 13px; max-width: 80vw; }

#help { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; }
#help .sheet { width: min(620px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 24px 16px; }
#help h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
#help p { margin: 4px 0; font-size: 13px; color: var(--text); }