@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Fredoka:wght@500;600;700&family=Gaegu:wght@700&display=swap");

/* Page ground: graph paper, like a ship's chart */
.kd-page{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6}

/* motion (respects reduced motion) */
@keyframes kd-bob{50%{transform:translateY(-3px)}}
@keyframes kd-blink{50%{opacity:.25}}
@keyframes kd-rise{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-22px);opacity:0}}
@keyframes kd-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.kd-bob{animation:kd-bob 2.6s ease-in-out infinite}
.kd-starting{opacity:.55;animation:kd-blink 1s infinite}
.kd-sinkbubble{animation:kd-rise 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.kd-bob,.kd-starting,.kd-sinkbubble,.kd-laurel{animation:none!important}}

/* Colored vocabulary: one color per concept, everywhere */
.kd-term{font-weight:700}
.kd-term--word{color:var(--ink)}
.kd-term--pod{color:var(--pod)}
.kd-term--node{color:var(--node)}
.kd-term--service{color:var(--service)}
.kd-term--configmap{color:var(--scroll)}
.kd-term--secret{color:var(--secret)}
.kd-term--ingress{color:var(--gate)}
.kd-term--namespace{color:var(--polis)}
.kd-term--volume{color:var(--store)}
.kd-term--cluster{color:var(--ink);text-decoration:underline wavy var(--node) 1.5px;text-underline-offset:4px}
.kd-mark{background:linear-gradient(transparent 45%,var(--highlight) 45%);color:inherit;padding:0 .1em}

/* Laurel wreath: the "Reconciled" payoff */
.kd-laurel{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--laurel);animation:kd-pop .35s ease-out}
.kd-laurel-branch{width:1.1em;height:2.2em;flex:none}
.kd-flip{transform:scaleX(-1)}
.kd-laurel small{font-family:var(--font-hand);font-size:.62em}

/* Greek key divider */
.kd-meander{height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Cpath d='M0 15H20M2 15V1H18V12H6V4H14V8H10' fill='none' stroke='%23326CE5' stroke-width='2'/%3E%3C/svg%3E") repeat-x}

/* Dialogue */
.kd-chat{display:grid;grid-template-columns:64px 1fr;gap:var(--space-3);align-items:start}
.kd-chat > svg{width:64px}
.kd-bubble{position:relative;margin:0;background:var(--card);color:var(--ink);border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-lg);padding:10px 16px;font-family:var(--font-hand);font-size:22px;line-height:1.3}
.kd-bubble::before{content:"";position:absolute;left:-12px;top:18px;border:10px solid transparent;border-right-color:var(--ink);border-left:0}
.kd-who{display:block;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:2px}

/* Glossary box */
.kd-deck{border:var(--stroke-bold) solid var(--node);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);background:var(--card);color:var(--ink);font-family:var(--font-body);line-height:1.6}
.kd-deck h3{margin:0;font-family:var(--font-hand);font-size:28px;font-weight:700;color:var(--node)}
.kd-deck dl{margin:6px 0 0}
.kd-deck dt{margin-top:10px}
.kd-deck dd{margin:0 0 0 16px}
.kd-deck-art{display:flex;justify-content:flex-start;margin:8px 0 2px}
.kd-deck-art > svg{margin:0!important;max-width:220px;height:auto}

/* Oracle's footnote */
.kd-foot{border:2px dashed var(--terracotta);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:15px;color:var(--ink-soft);background:var(--card)}
.kd-foot strong{color:var(--terracotta);font-family:var(--font-hand);font-size:21px}

/* Numbered step */
.kd-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-3);align-items:start}
.kd-step-num{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--font-head);font-weight:700;font-size:20px;display:grid;place-items:center}
.kd-step-body > p:first-child{margin-top:4px}

/* Framed illustration */
.kd-panel{margin:0;background:var(--card);border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-md) var(--radius-lg) var(--radius-sm) var(--radius-lg);padding:var(--space-3);overflow:hidden}
.kd-panel--bleed{padding:0}
.kd-panel--bleed figcaption{padding:4px var(--space-3) var(--space-3)}
.kd-panel figcaption{font-family:var(--font-hand);font-size:20px;color:var(--ink-soft);margin-top:6px;text-align:center}

/* Page heading with page number */
.kd-pagehead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.kd-pagehead h2{margin:0;font-family:var(--font-head);font-weight:600;font-size:32px;line-height:1.15;color:var(--ink)}
.kd-pg{font-family:var(--font-hand);font-size:18px;color:var(--ink-soft);white-space:nowrap}

/* Button: pressed like a seal into wax */
.kd-btn{font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ink);background:var(--paper);border:var(--stroke-ink) solid var(--ink);border-radius:var(--radius-sm);padding:8px 14px;min-height:44px;cursor:pointer;box-shadow:var(--press);transition:transform .08s,box-shadow .08s}
.kd-btn:active{transform:translate(3px,3px);box-shadow:none}
.kd-btn:disabled{opacity:.4;cursor:not-allowed}
.kd-btn:focus-visible{outline:3px solid var(--node);outline-offset:3px}
.kd-btn--small{padding:4px 12px;min-height:36px}
.kd-boat-label{font-family:var(--font-mono);font-size:13px;line-height:1.3;color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;white-space:nowrap}
.kd-boat-label--away{text-decoration:line-through;color:var(--ink-soft)}
.kd-rterm-btn{font-family:var(--font-head);font-weight:600;font-size:13px;line-height:1.2;color:var(--term-ink);background:transparent;border:1.5px solid var(--term-edge);border-radius:6px;padding:4px 12px;min-height:30px;cursor:pointer}
.kd-rterm-btn--primary{color:var(--term-bg);background:var(--term-prompt);border-color:var(--term-prompt)}
.kd-rterm-btn:disabled{opacity:.5;cursor:not-allowed}
.kd-rterm-btn:focus-visible{outline:3px solid var(--term-prompt);outline-offset:2px}
.kd-rterm .xterm-viewport{background-color:transparent!important}