/* Houston, we have a problem with etcd: theme tokens and shared components.
   Light take on the Materia deck: white canvas, near-black text. Every box is a tinted block of
   its accent (--tint fill, accent stroke, 2.5px): one color per kind of system. A highlight is a
   stronger tint (--hi), text stays ink; at most one solid "hero" element per slide. Strokes are
   thick (3px arrows), the title of a box is 30px bold in the accent, its details 24px grey.
   No glows, no shadows, no hatching. What is not relevant yet is hidden; an inactive thing is
   drawn in grey. Slide-specific CSS lives in the part scripts (Deck.css, scoped under #<slide-id>). */

/* ---------- fonts (vendored, no network at runtime) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/SpaceGrotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/SpaceGrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/JetBrainsMono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/JetBrainsMono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --bg:#FFFFFF;
  --ink:#0B0F1A;          /* text, strokes */
  --ink2:#3A4152;         /* secondary text, never lighter for anything the audience must read */
  --blue:#1F5FD6;         /* etcd, Kubernetes, API server */
  --green:#0B7A53;        /* bbolt, disk */
  --violet:#5B35B5;       /* treeIndex, memory */
  --amber:#9A5B00;        /* leader, highlight */
  --red:#C62828;          /* failure */
  --grey:#8A90A0;         /* inactive (borders and solid fills only, text on it stays --ink2 or white on dark) */
  --cc:#D9343F;           /* Clever Cloud red, white text on it is 4.7:1 */
  --fs:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --edge:#C5CBD6;         /* neutral border (empty slots, tracks, image frames) */
  --rule:#E2E6EE;         /* thin separators (rows) */
  --pn:#F6F8FB;           /* soft panel fill (captions, panels) */
  --sw:3px;               /* arrow stroke width */
  --bw:2.5px;             /* box and frame stroke width */
  /* sizes on the 1600x900 canvas: h2 52px, body 28px, box titles 30px, diagram labels and mono 24px */
}
/* --tint: the fill of every box of the current accent; --hi: the stronger tint of a highlight */
.c-ink,.c-blue,.c-green,.c-violet,.c-amber,.c-red,.c-grey,.c-cc,.sec{--tint:color-mix(in srgb,var(--c,var(--ink)) 12%,#fff);--hi:color-mix(in srgb,var(--c,var(--ink)) 32%,#fff)}
.c-ink,.sec{--tint:color-mix(in srgb,var(--ink) 7%,#fff);--hi:color-mix(in srgb,var(--ink) 20%,#fff)}
/* .c-<name> sets --c, the accent of a box, frame, tag or bullet marker */
.c-ink{--c:var(--ink)}.c-blue{--c:var(--blue)}.c-green{--c:var(--green)}.c-violet{--c:var(--violet)}
.c-amber{--c:var(--amber)}.c-red{--c:var(--red)}.c-grey{--c:var(--grey)}.c-cc{--c:var(--cc)}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--fs);font-size:30px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
code,kbd{font-family:var(--fm)}
.mono{font-family:var(--fm)}

/* ---------- canvas: one fixed 1600x900 page scaled to fit, letterboxed with white ---------- */
#deck{position:fixed;left:50%;top:50%;width:1600px;height:900px;overflow:hidden;background:var(--bg);transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center}
main{position:absolute;inset:0}
.sec{position:absolute;inset:0;display:none;padding:56px 80px 0}
.sec.cur{display:block}
.foot-l,.foot-r{position:absolute;bottom:22px;font-family:var(--fm);font-weight:400;font-size:18px;line-height:1;color:var(--ink2);pointer-events:none}
.foot-l{left:80px}
.foot-r{right:80px}
#deck[data-cur="hero"] .foot-l{visibility:hidden}

/* ---------- steps (see deck.js): hidden until the current step reaches data-from ---------- */
[data-from],[data-until]{opacity:0;transition:opacity .15s linear}
[data-from].st-on,[data-until].st-on{opacity:1}

/* ---------- section header ---------- */
.sh{margin:0 0 24px}
.sh h2{font-size:52px;font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0}
.sh .lead{font-family:var(--fm);font-size:22px;font-weight:400;line-height:1.5;color:var(--ink2);margin:12px 0 0}
.sh .eyebrow{font-family:var(--fm);font-size:16px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}

/* ---------- bullets ---------- */
.bullets{list-style:none;margin:0;padding:0;font-size:28px;line-height:1.4}
.bullets>li{position:relative;padding-left:36px;margin:0 0 18px}
.bullets>li::before{content:'';position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--c,var(--blue))}
.bullets b{font-weight:600}

/* ---------- boxes and panels: tinted fill, accent border; .hl and .now = stronger tint ---------- */
.box{display:block;background:var(--tint);border:var(--bw) solid var(--c,var(--ink));border-radius:10px;padding:14px 22px;font-size:26px;line-height:1.3;color:var(--ink)}
.box.hl,.box.now{background:var(--hi)}
.box.hero.now{background:var(--c);color:#fff}
.box .mono,.box code{font-size:24px}
.panel{background:var(--pn);border:var(--bw) solid var(--edge);border-radius:16px;padding:18px 24px}
.panel h3{font-size:26px;font-weight:600;margin:0}
.panel p{font-size:24px;line-height:1.5;color:var(--ink2)}

/* ---------- text helpers ---------- */
.muted{color:var(--ink2)}

/* ---------- code ---------- */
.code{font-family:var(--fm);font-weight:400;font-size:24px;line-height:1.5;background:var(--pn);border:var(--bw) solid var(--edge);border-radius:10px;padding:18px 24px;margin:0;color:var(--ink);white-space:pre;tab-size:4}
.code code{font:inherit}
.tk-com{color:var(--ink2);font-style:italic}.tk-str{color:var(--green)}.tk-kw{color:var(--violet)}.tk-num{color:var(--amber)}
.tk-attr{color:var(--red)}.tk-ty{color:var(--blue)}.tk-fn{color:var(--blue)}.tk-mac{color:var(--red)}

/* ---------- schemas ---------- */
/* Full-canvas SVG in canvas coordinates (viewBox 0 0 1600 900), laid under the HTML of the slide.
   Every diagram is drawn for the full canvas and then scaled down by --ds (0.83) about the center
   of the area below the title, so it gets a margin on every side (a 24px label shows at 20px, the
   floor). --dy shifts a short diagram down. The strokes inside are thickened by 1/--ds so they
   look like the HTML ones. */
.sec svg.full{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;--ds:.83;--sw:3.6px;--bw:3px;transform:translateY(var(--dy,0px)) scale(var(--ds));transform-origin:800px 505px}
.sec svg text{font-family:var(--fs);fill:var(--ink)}
.sec svg .mono{font-family:var(--fm)}
/* Diagram text: .t1 30px title (accent color), .lbl 24px, .m 24px mono, .sm 24px secondary (grey) */
.sec svg .lbl{font-size:24px;font-weight:500}
.sec svg .t1{font-size:30px;font-weight:600;fill:var(--c,var(--ink))}
.sec svg .m{font-family:var(--fm);font-size:24px;font-weight:400}
.sec svg .sm{font-size:24px;font-weight:400;fill:var(--ink2)}
/* .big on a section (Deck.slide cls: 'big'): diagram text about 8% larger, same look */
.sec.big svg .lbl{font-size:26px}.sec.big svg .t1{font-size:32px}.sec.big svg .m{font-size:26px}.sec.big svg .sm{font-size:26px}
/* .sbox (Deck.box): tinted rect with an accent border. .now or .hl = the stronger tint, text stays
   ink. .hero.now = solid accent, white text (at most one per slide). .c-grey = inactive: grey tint,
   secondary text. */
.sec svg .sbox rect{fill:var(--tint);stroke:var(--c,var(--ink));stroke-width:var(--bw)}
.sec svg .sbox.now rect,.sec svg .sbox.hl rect{fill:var(--hi)}
.sec svg .sbox.hero.now rect{fill:var(--c)}
.sec svg .sbox.hero.now text{fill:#fff}
.sec svg .sbox.c-grey text{fill:var(--ink2)}
/* .frame (Deck.frame): accent outline, no fill (.tint: a light fill); the title carries the accent */
.sec svg .frame rect{fill:none;stroke:var(--c,var(--ink));stroke-width:var(--bw)}
.sec svg .frame.tint rect{fill:color-mix(in srgb,var(--c,var(--ink)) 5%,#fff)}
.sec svg .arrow{fill:none;stroke:var(--c,var(--ink2));stroke-width:var(--sw);marker-end:url(#deck-arrow)}
.sec svg .arrow.reply{stroke-dasharray:8 7}
.sec svg .crown{fill:var(--amber)}
.sec svg .ks rect.on{fill:var(--hi);stroke:var(--c,var(--ink));stroke-width:2.4px}
.sec svg .ks rect.off{fill:#fff;stroke:var(--edge);stroke-width:2.4px;stroke-dasharray:6 5}
.sec svg .ks text.off{fill:var(--ink2)}
.sec svg .line{fill:none;stroke:var(--c,var(--ink2));stroke-width:var(--sw)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}