:root {
  --panel: oklch(0.20 0.02 155);
  --panel-2: oklch(0.25 0.025 155);
  --panel-3: oklch(0.17 0.018 155);
  --text: oklch(0.95 0.015 145);
  --muted-ui: oklch(0.72 0.025 150);
  --accent: oklch(0.86 0.16 120);
  --control-line: oklch(0.52 0.025 150 / .55);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--panel); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.presenter { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 390px; }
.presenter-main { min-width: 0; display: flex; flex-direction: column; padding: 22px; }
.topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; margin-block-end: 16px; }
.deck-name { font-weight: 800; }
.status { color: var(--muted-ui); font-size: 14px; }
.current-shell { flex: 1; min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--panel-3); }
.current-stage { width: 1600px; height: 900px; transform-origin: center; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; overflow: hidden; background: var(--paper); }
.controls { min-height: 76px; display: flex; align-items: center; gap: 12px; padding-block-start: 16px; }
.controls button, .controls a { min-height: 44px; border: 1px solid var(--control-line); background: var(--panel-2); color: var(--text); padding-inline: 16px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.controls button:hover, .controls a:hover { border-color: var(--accent); }
.controls .primary { background: var(--accent); color: var(--green-strong); border-color: var(--accent); font-weight: 850; }
.spacer { flex: 1; }
.timer { font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 800; }
.presenter-side { border-inline-start: 1px solid var(--control-line); background: var(--panel-3); display: flex; flex-direction: column; min-height: 0; }
.side-section { padding: 20px; }
.side-section + .side-section { border-block-start: 1px solid var(--control-line); }
.side-label { color: var(--muted-ui); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-block-end: 12px; }
.next-shell { width: 350px; height: 197px; overflow: hidden; position: relative; background: var(--panel); }
.next-stage { width: 1600px; height: 900px; transform: scale(.21875); transform-origin: top left; position: relative; background: var(--paper); }
.notes-section { flex: 1; min-height: 0; overflow: auto; }
.notes { color: var(--text); font-size: 18px; line-height: 1.55; }
.timing { display: inline-block; margin-block-end: 14px; padding: 5px 9px; color: var(--green-strong); background: var(--accent); font-weight: 850; }
.sources { margin: 0; padding-inline-start: 18px; }
.sources li { margin: 9px 0; font-size: 14px; line-height: 1.35; }
.sources a { color: var(--accent); }
.key-help { color: var(--muted-ui); font-size: 12px; line-height: 1.5; }
@media (max-width: 980px) {
  .presenter { grid-template-columns: 1fr; }
  .presenter-side { display: none; }
  .controls { overflow-x: auto; }
}