/* kit v1 · kit.css — the grammar in CSS (design/grammar.md). Skins (skins/*.css) set the tokens below.
   Load order: fonts.css, kit.css, then each skin used. A skin is a class at deck (<body>), slide (.slide) or element scope. */

/* ---------- tokens: neutral defaults; every skin overrides them ---------- */
:root{
  --ground:#FFFFFF;--ground-2:#F2F2F2;--ground-3:#E6E6E6;
  --ink:#111111;--ink-2:#555555;--ink-3:#888888;--rule:#DDDDDD;
  --accent:#1554D1;--accent-ink:#1554D1;--accent-2:#F0A202;--accent-wash:#EEF2FB;
  --code-bg:#14161A;--code-ink:#E8E4DA;
  /* code blocks sit on their own dark ground on every skin, so their highlights are their own tokens (HUST'26 comps, 2026-11-10) */
  --code-hot:rgba(255,255,255,.10);--code-k:#F2C14E;--code-s:#8EC5FF;--code-c:#8E939A;
  --font-title:system-ui,sans-serif;--font-body:system-ui,sans-serif;--font-mono:ui-monospace,monospace;--font-hand:cursive;
  --title-style:normal;--title-weight:700;--title-track:-.025em;--title-scale:1;--title-transform:none;--em-style:normal;
  /* annotation layer: its own colors on every skin (grammar → Mixing skins) */
  --note-bg:#FFE36E;--note-ink:#2A2414;--stamp:#D23A2C;--hilite:rgba(255,221,87,.6);--hand-ink:#4A4F57;
}
.inverse{--ground:#111214;--ground-2:#1C1D20;--ground-3:#2A2C30;--ink:#FFFFFF;--ink-2:#C8CBD0;--ink-3:#8E939A;--rule:#2E3034;
  --hand-ink:#FFE9A8;--hilite:rgba(255,221,87,.38)}

/* ---------- canvas, present mode, print ---------- */
@page{size:1920px 1080px;margin:0}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#2B2E33;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slide{position:relative;width:1920px;height:1080px;margin:0 auto 32px;overflow:hidden;
  background:var(--ground);color:var(--ink);font-family:var(--font-body)}
.abs{position:absolute}
p{margin:0}
h1,h2,h3{margin:0}
@media screen{
  body.present{width:100vw;height:100vh;overflow:hidden;background:#000}
  body.present .slide{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--scale,1))}
  body.present .slide:not(.current){display:none}
  body.present [data-step]{transition:opacity .5s ease,translate .5s ease}
  body.present [data-step].off{opacity:0;translate:0 18px;pointer-events:none}
  #kit-blackout{position:fixed;inset:0;background:#000;z-index:50;display:none}
  body.black #kit-blackout{display:block}
}
@media print{
  body{background:none}
  .slide{margin:0;break-after:page}
  .slide:last-child{break-after:auto}
  .notes,.kit-notes-pill,#kit-blackout{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* Chrome prints a blurred shadow as a soft-masked image, and macOS Preview draws it as a gray box over
     the slide (kb-machinery deck, 2026-11-10). Print drops every blurred shadow; a panel gets a hairline. */
  *,*::before,*::after{box-shadow:none!important}
  .panel{outline:2px solid var(--rule)}
  .inverse .panel{outline:none}
  .inverse .code{outline:2px solid var(--rule);outline-offset:-2px}  /* the dark-ground code edge, drawn as an outline in print */
}
@media (prefers-reduced-motion:reduce){
  .ambient,.ambient *{animation:none!important}
  body.present [data-step]{transition:opacity .2s ease}
  body.present [data-step].off{translate:none}
}

/* ---------- reader notes (K2) ---------- */
.notes{display:none;position:absolute;left:64px;right:64px;bottom:84px;z-index:40;
  background:rgba(17,18,20,.94);color:#F4F1EA;font:400 29px/1.45 var(--font-body);
  padding:24px 34px 26px;border-radius:14px;border-left:8px solid var(--accent)}
.notes::before{content:"Reader note";display:block;font:600 18px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#B9BDC4;margin-bottom:10px}
body.present.shownotes .slide.current .notes{display:block}
.kit-notes-pill{position:fixed;right:18px;top:16px;z-index:60;font:600 14px/1 system-ui,sans-serif;letter-spacing:.06em;
  color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 14px;cursor:pointer;opacity:.5}
.kit-notes-pill:hover,.kit-notes-pill:focus-visible{opacity:1}
.kit-notes-pill[aria-pressed="true"]{opacity:.9;background:rgba(0,0,0,.75)}
body.black .kit-notes-pill{display:none}

/* ---------- light and dark (deck.js: D, ?dark) ---------- */
/* A mark flattened onto one ground shows only on that ground. */
.inverse .on-light,.slide:not(.inverse) .on-dark{display:none!important}

/* ---------- footer ---------- */
.foot{position:absolute;left:64px;right:64px;bottom:24px;display:flex;gap:30px;align-items:center;
  border-top:2px solid var(--accent);padding-top:12px;font:500 18px/1 var(--font-body);color:var(--ink-3)}
.foot .n{font-family:var(--font-mono);color:var(--ink-2)}
.foot>:last-child{margin-left:auto}

/* ---------- type roles (grammar → Type roles) ---------- */
.title{font-family:var(--font-title);font-style:var(--title-style);font-weight:var(--title-weight);
  font-size:calc(84px * var(--title-scale));line-height:1.02;letter-spacing:var(--title-track);text-transform:var(--title-transform)}
.title.xl{font-size:calc(150px * var(--title-scale));line-height:.95}
.kick{font:600 26px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.body{font:400 40px/1.32 var(--font-body)}
.body b{font-weight:700}
.small{font:400 30px/1.36 var(--font-body);color:var(--ink-2)}
.mono{font-family:var(--font-mono)}
/* Code shows what is typed: no ligatures (Berkeley Mono would draw == as one glyph and -> as an arrow). HUST'26 build, 2026-11-10 */
.code,.mono,code,pre{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
.hand{font-family:var(--font-hand)}
.em{color:var(--accent-ink);font-weight:700;font-style:var(--em-style)}

/* ---------- Measured motifs ---------- */
.panel{background:var(--ground-2);border-radius:22px;padding:40px 44px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.inverse .panel{box-shadow:none}
.inverse .code{box-shadow:inset 0 0 0 2px var(--rule)}  /* a code block keeps its edge on a black ground (HUST'26 dark mode, 2026-11-10) */
.panel.topline{border-top:6px solid var(--accent);background-clip:padding-box}  /* the fill stops under the top border, so it never shows above it at the rounded corners (HUST'26 read 1, 2026-11-12) */
.chip{display:inline-block;font:600 28px/1 var(--font-body);background:var(--ground-3);color:var(--ink);border-radius:999px;padding:14px 24px}
.code{font:400 34px/1.6 var(--font-mono);background:var(--code-bg);color:var(--code-ink);border-radius:22px;padding:36px 44px;margin:0;white-space:pre;overflow:hidden}
.code .ln{display:block;padding:0 14px;margin:0 -14px;border-radius:8px}
.code .ln.hot{background:var(--code-hot)}
.code .k{color:var(--code-k)}.code .s{color:var(--code-s)}.code .c{color:var(--code-c)}
.schematic .box{fill:none;stroke:var(--accent-ink);stroke-width:3}
.schematic .wire{fill:none;stroke:var(--ink-3);stroke-width:3}
.schematic text{font-family:var(--font-mono);fill:var(--ink)}

/* ---------- Sketched register ---------- */
.rough{filter:url(#kit-rough)}
.sk-ink{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.sk-accent{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.sk-fill{fill:var(--accent-wash);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
svg .hand,svg text.hand{font-family:var(--font-hand);fill:var(--ink)}

/* ---------- Aside register: tilt lives here and nowhere else ---------- */
.sticky{font:400 38px/1.25 var(--font-hand);background:var(--note-bg);color:var(--note-ink);padding:26px 32px;
  box-shadow:0 14px 30px rgba(0,0,0,.2);transform:rotate(var(--tilt,-3deg))}
.stamp{display:inline-block;font:800 44px/1.05 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--stamp);
  border:6px solid var(--stamp);border-radius:14px;padding:14px 24px;background:rgba(255,255,255,.65);transform:rotate(var(--tilt,-4deg))}
.inverse .stamp{color:#fff;border:0;background:var(--hilite)}
.margin{font:400 36px/1.3 var(--font-hand);color:var(--hand-ink);transform:rotate(var(--tilt,0deg))}
.hilite{background:linear-gradient(transparent 16%,var(--hilite) 16%,var(--hilite) 90%,transparent 90%);padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.bubble{font:600 38px/1.2 var(--font-body);background:var(--ground-2);color:var(--ink);border-radius:28px;padding:24px 34px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);transform:rotate(var(--tilt,0deg))}
.speech{position:relative;font:400 38px/1.25 var(--font-hand);background:#fff;color:#14161A;border:4px solid #14161A;border-radius:30px;
  padding:26px 32px;transform:rotate(var(--tilt,0deg))}
.speech::after{content:"";position:absolute;left:70px;bottom:-34px;border:18px solid transparent;border-top-color:#14161A;border-left-color:#14161A}
.taped{position:relative;transform:rotate(var(--tilt,0deg))}
.taped::before{content:"";position:absolute;top:-20px;left:50%;width:160px;height:42px;margin-left:-80px;z-index:2;
  background:rgba(255,242,196,.78);transform:rotate(-4deg);box-shadow:0 2px 6px rgba(0,0,0,.14)}