/* ───────────────────────────── slides ─────────────────────────────
   Every slide is a fixed 1280×720 canvas. viewer.js scales the canvas to fit
   the window (or a thumbnail), so type sizes below are in canvas pixels. */

.deck{
  --bg:#0b1020; --fg:#e8ebf7; --accent:#8ab4ff;
  --code-bg:rgba(255,255,255,.07); --rule:rgba(255,255,255,.16);
  --tk-com:#8791b5; --tk-kw:#c4a7ff; --tk-str:#a6e3a1; --tk-num:#fab387; --tk-fn:#8ab4ff; --tk-type:#f9e2af; --tk-op:#89dceb;
}
.deck.theme-paper{
  --bg:#faf7f2; --fg:#1f2430; --accent:#c2410c;
  --code-bg:rgba(31,36,48,.07); --rule:rgba(31,36,48,.16);
  --tk-com:#8b8f9c; --tk-kw:#7c3aed; --tk-str:#15803d; --tk-num:#c2410c; --tk-fn:#1d4ed8; --tk-type:#a16207; --tk-op:#0e7490;
}
.deck.theme-aurora{--bg:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 48%,#be185d 100%); --fg:#ffffff; --accent:#fbcfe8}
.deck.theme-forest{--bg:linear-gradient(160deg,#052e16 0%,#14532d 100%); --fg:#ecfdf5; --accent:#fde68a}

.stage{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden}

.slide{
  position:absolute;inset:0;box-sizing:border-box;padding:72px 96px;
  display:flex;flex-direction:column;justify-content:center;
  /* Derived here, not on .deck: a slide that sets its own --fg must get a muted
     colour computed from that, not from the theme's. */
  --muted:color-mix(in srgb,var(--fg) 68%,transparent);
  background:var(--bg);color:var(--fg);
  font:400 36px/1.45 'Space Grotesk',system-ui,sans-serif;
  overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .35s ease}
@media (prefers-reduced-motion:reduce){.slide,.slide.is-active{transition:none}}

.slide.align-center{text-align:center;align-items:center}
.slide.align-right{text-align:right;align-items:flex-end}
.slide.valign-top{justify-content:flex-start}
.slide.valign-bottom{justify-content:flex-end}

.slide>:first-child{margin-top:0}
.slide>:last-child{margin-bottom:0}
.slide h1{font:700 88px/1.04 'Space Grotesk',sans-serif;letter-spacing:-.03em;margin:0 0 .3em}
.slide h2{font:600 60px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin:0 0 .45em}
.slide h3{font:600 44px/1.15 'Space Grotesk',sans-serif;margin:0 0 .5em;color:var(--accent)}
.slide h4,.slide h5,.slide h6{font:600 32px/1.2 'Space Grotesk',sans-serif;margin:0 0 .5em;color:var(--muted)}
.slide p{margin:0 0 .6em}
.slide strong{font-weight:700}
.slide a{color:var(--accent);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:.06em}
.slide ul,.slide ol{margin:0 0 .6em;padding-left:1.2em}
.slide li{margin:.28em 0}
.slide li::marker{color:var(--accent)}
.slide li>ul,.slide li>ol{margin:.2em 0 0;font-size:.88em}
.slide hr{border:none;border-top:2px solid var(--rule);margin:.8em 0;width:100%}
.slide blockquote{margin:0 0 .6em;padding:.05em 0 .05em .8em;border-left:6px solid var(--accent);font-style:italic;color:var(--muted)}
.slide blockquote p{margin:0}
.slide code{font-family:'JetBrains Mono',monospace;font-variant-ligatures:none;font-size:.82em;background:var(--code-bg);padding:.06em .32em;border-radius:.25em}
.slide pre{margin:0 0 .6em;background:var(--code-bg);border-radius:16px;padding:26px 32px;overflow:hidden;text-align:left}
.slide pre code{display:block;background:none;padding:0;font-size:25px;line-height:1.55;white-space:pre}
.slide img,.slide video,.slide svg{max-width:100%;max-height:420px;object-fit:contain;border-radius:12px}
.slide p:has(>img:only-child){margin:0}
.slide .table-wrap{margin:0 0 .6em;max-width:100%}
.slide table{border-collapse:collapse;font-size:28px;width:100%}
.slide th{text-align:left;font-weight:600;color:var(--accent);border-bottom:3px solid var(--rule);padding:.3em .6em}
.slide td{padding:.3em .6em;border-bottom:1px solid var(--rule)}
.slide .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;text-align:left}
.slide .cols>*{min-width:0}

.lb{display:contents}
.slide .lb>:last-child{margin-bottom:0}
.slide .lb+:not(.lb){margin-top:.6em}

.hljs-comment,.hljs-quote{color:var(--tk-com);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:var(--tk-kw)}
.hljs-title,.hljs-title.function_{color:var(--tk-fn)}
.hljs-name,.hljs-built_in,.hljs-builtin-name,.hljs-title.class_,.hljs-type,.hljs-symbol,.hljs-bullet,.hljs-selector-id,.hljs-selector-class{color:var(--tk-type)}
.hljs-string,.hljs-attribute,.hljs-addition,.hljs-regexp{color:var(--tk-str)}
.hljs-number,.hljs-meta .hljs-number{color:var(--tk-num)}
.hljs-operator,.hljs-punctuation{color:var(--tk-op)}
.hljs-attr,.hljs-tag{color:var(--tk-fn)}
.hljs-deletion{color:#f38ba8}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}

/* ───────────────────────────── audience view ───────────────────────────── */
body.viewer{margin:0;height:100dvh;overflow:hidden;background:#05050a;font-family:'Space Grotesk',system-ui,sans-serif}
.viewer .deck{position:fixed;inset:0;overflow:hidden}
.viewer .deck:not(.ui-on){cursor:none}

/* Progress is deliberately quiet: a hairline along the bottom edge and a small
   counter that appear on movement and fade away again while you talk. */
.progress{position:fixed;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.07);z-index:5;transition:height .2s ease}
.progress::before{content:'';position:absolute;left:0;right:0;bottom:0;height:22px}
.progress span{display:block;height:100%;width:0;background:var(--accent);opacity:.55;transition:width .35s ease,opacity .2s ease}
.ui-on .progress{height:6px;cursor:pointer}
.ui-on .progress span{opacity:1}
.counter{position:fixed;right:16px;bottom:16px;z-index:5;font:500 12px 'JetBrains Mono',monospace;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:3px 10px;border-radius:999px;opacity:0;transition:opacity .25s ease;pointer-events:none;font-variant-numeric:tabular-nums}
.ui-on .counter{opacity:1}

/* Language switcher: same quiet treatment as the counter, on the opposite corner. */
.langs{display:flex;gap:2px}
.viewer .langs{position:fixed;left:16px;bottom:16px;z-index:6;padding:3px;border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease;pointer-events:none}
.viewer .ui-on .langs{opacity:1;pointer-events:auto}
.langs button{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.04em;color:rgba(255,255,255,.72);background:none;border:0;border-radius:999px;padding:3px 9px;cursor:pointer}
.langs button:hover{color:#fff}
.langs button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#111}

/* Edge buttons: tap targets on touch, discreet chevrons on hover for mouse use.
   Narrow enough to stay inside the slide padding, clear of links. */
.nav{position:fixed;top:0;bottom:0;width:7%;z-index:4;border:0;background:none;color:#fff;font:300 56px/1 'Space Grotesk',sans-serif;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.nav.prev{left:0}.nav.next{right:0}
.ui-on .nav:hover{opacity:.7}
.nav:disabled{display:none}

@media print{
  @page{size:1280px 720px;margin:0}
  body.viewer{height:auto;overflow:visible;background:none}
  .viewer .deck{position:static;overflow:visible}
  .stage{position:static;width:auto;height:auto;transform:none!important;overflow:visible}
  .slide{position:relative;width:1280px;height:720px;opacity:1!important;visibility:visible!important;break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .progress,.counter,.nav,.langs{display:none}
}

/* ───────────────────────────── presenter view ───────────────────────────── */
body.presenter{margin:0;height:100dvh;overflow:hidden;background:#11111b;color:#cdd6f4;font:14px 'Space Grotesk',system-ui,sans-serif}
.presenter #deck{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px 18px;height:100dvh;padding:14px 18px;box-sizing:border-box}
.p-bar{grid-column:1/-1;display:flex;align-items:center;gap:18px}
.p-title{font:600 16px 'Space Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-pos{font:600 14px 'JetBrains Mono';color:#cba6f7}
.p-spacer{flex:1}
.p-timer{font:600 20px 'JetBrains Mono';color:#a6e3a1;background:#181825;border:1px solid #313244;border-radius:9px;padding:4px 12px;cursor:pointer;font-variant-numeric:tabular-nums}
.presenter .langs{background:#181825;border:1px solid #313244;border-radius:9px;padding:3px}
.presenter .langs button{color:#7f849c;border-radius:6px;padding:3px 10px}
.presenter .langs button[aria-pressed="true"]{background:#cba6f7;color:#11111b}
.p-clock{font:14px 'JetBrains Mono';color:#7f849c}
.p-left,.p-right{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #313244;border-radius:10px;background:#000;flex-shrink:0}
.frame .stage{pointer-events:none}
.frame.next{width:62%}
.frame .end{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font:600 14px 'JetBrains Mono';color:#7f849c}
.frame.is-end .end{display:flex}
.p-buttons{display:flex;gap:10px}
.p-buttons button{flex:1;padding:12px;font:600 15px 'Space Grotesk';color:#cdd6f4;background:#181825;border:1px solid #313244;border-radius:10px;cursor:pointer}
.p-buttons button:hover:not(:disabled){border-color:#cba6f7;color:#cba6f7}
.p-buttons button:disabled{opacity:.35;cursor:default}
.p-label{font:600 11px 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:#7f849c}
.p-hint{text-transform:none;letter-spacing:0;font-weight:400;color:#585b70}
.notes{flex:1;min-height:0;overflow:auto;background:#181825;border:1px solid #313244;border-radius:10px;padding:16px 20px;font:400 22px/1.55 'Newsreader',Georgia,serif}
.notes>:first-child{margin-top:0}.notes>:last-child{margin-bottom:0}
.notes p{margin:0 0 .7em}
.notes ul,.notes ol{padding-left:1.2em;margin:0 0 .7em}
.notes code{font:.85em 'JetBrains Mono',monospace;background:#11111b;padding:1px 5px;border-radius:4px}
.notes a{color:#89b4fa}
.notes .none{color:#585b70;font-style:italic}
@media (max-width:820px){.presenter #deck{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;overflow:auto}}