/* ============================================================
   KKB · Dump — unified theme  (light / dark / system)
   Shared by every page in this folder. Light & white by
   default; dark mode keeps the classic neon-green accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* light (default) — warm cream & clay */
  --bg:#f2ebda; --surface:#fdfbf5; --surface-2:#f5eedc; --surface-3:#ebe0ca;
  --text:#3a3326; --heading:#241f14; --muted:#7b6e57; --faint:#a99a7f;
  --border:#e6dbc2; --border-strong:#d6c7a4;
  --accent:#b06a36; --accent-ink:#8c4f26; --accent-soft:#f1e5d0; --accent-2:#c2913f;
  --on-accent:#2e1c0c;
  --ring:rgba(176,106,54,.28);
  --topbar:rgba(252,249,242,.78);
  --bg-glow:#eee0c7;
  --shadow-sm:0 1px 2px rgba(83,62,29,.05),0 2px 6px rgba(83,62,29,.06);
  --shadow-md:0 6px 16px rgba(83,62,29,.07),0 14px 34px rgba(83,62,29,.08);
  --radius:18px; --radius-sm:11px; --maxw:760px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Cascadia Code',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* dark — keeps the neon-green accent the pages originally had */
:root[data-theme="dark"]{
  --bg:#0e1320; --surface:#161c2b; --surface-2:#1b2233; --surface-3:#222b40;
  --text:#d6dce8; --heading:#f3f6fc; --muted:#9aa6b8; --faint:#6b7689;
  --border:#273042; --border-strong:#34405a;
  --accent:#00e676; --accent-ink:#5dffab; --accent-soft:#0e2a1d; --accent-2:#16d0a3;
  --on-accent:#05271a;
  --ring:rgba(0,230,118,.35);
  --topbar:rgba(18,23,35,.72);
  --bg-glow:#10261d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.3);
  --shadow-md:0 8px 22px rgba(0,0,0,.36),0 18px 44px rgba(0,0,0,.4);
}
/* "system" mode is resolved to light/dark in base.js (data-theme is
   always set), so there is a single source of truth for dark tokens
   above — no duplicated prefers-color-scheme block needed. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;font-family:var(--font);font-size:17px;line-height:1.72;color:var(--text);
  background:radial-gradient(1100px 520px at 50% -240px,var(--bg-glow),transparent 62%),var(--bg);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .3s,color .3s;
}

/* reading progress */
.reading-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;background:transparent;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px var(--ring);transition:width .08s linear}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:11px clamp(14px,4vw,30px);
  background:var(--topbar);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--heading);font-weight:800;letter-spacing:.2px}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--on-accent);font-size:12.5px;font-weight:800;letter-spacing:.5px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-sm)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);min-width:0}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{color:var(--faint)}
.crumbs .here{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
.theme-switch{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px}
.theme-switch button{display:grid;place-items:center;width:30px;height:28px;border:0;background:transparent;color:var(--faint);border-radius:999px;cursor:pointer;transition:.15s}
.theme-switch button:hover{color:var(--text)}
.theme-switch button.active{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.theme-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--accent-ink);padding:7px 13px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--border);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.home-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* layout */
.page{max-width:var(--maxw);margin:0 auto;padding:clamp(26px,5vw,56px) clamp(16px,4vw,24px) 64px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:clamp(26px,5vw,52px)}

/* article header */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 12px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--border);border-radius:999px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prose h1{font-size:clamp(28px,5vw,40px);line-height:1.16;letter-spacing:-.02em;color:var(--heading);margin:.1em 0 .35em;font-weight:800}
.lede{font-size:clamp(17px,2.4vw,20px);line-height:1.6;color:var(--muted);margin:0 0 8px;max-width:62ch}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:6px 12px;border-radius:999px}
.chip b{color:var(--text);font-weight:700}

/* prose */
.prose{color:var(--text)}
.prose>:first-child{margin-top:0}
.prose h2{font-size:clamp(20px,3vw,25px);line-height:1.25;letter-spacing:-.01em;color:var(--heading);font-weight:750;margin:2em 0 .55em;position:relative}
.prose h2::before{content:"";position:absolute;left:-18px;top:.52em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.prose h3{font-size:clamp(17px,2.4vw,19.5px);color:var(--heading);font-weight:700;margin:1.6em 0 .35em}
.prose p{margin:.85em 0}
.prose strong{color:var(--heading);font-weight:700}
.hl{color:var(--accent-ink);font-weight:700}
/* inline content links only — anything with a class (.btn, .hub-card,
   future components) keeps its own styling */
.prose a:not([class]){color:var(--accent-ink);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-position:0 1.15em;background-repeat:no-repeat;transition:background-size .2s,color .15s}
.prose a:not([class]):hover{color:var(--accent);background-size:100% 2px}
.prose ul{list-style:none;margin:.85em 0;padding:0}
.prose ul li{position:relative;padding-left:1.7em;margin:.5em 0}
.prose ul li::before{content:"";position:absolute;left:.25em;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent)}
.prose ul ul{margin:.35em 0}
.prose ul ul li::before{background:var(--surface);border-color:var(--accent-2)}
.prose hr{border:0;height:1px;margin:2.6em 0;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);position:relative}
.prose hr::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);padding:0 14px;color:var(--accent);font-size:12px}

/* callout + code */
.callout{margin:1.3em 0;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--surface-3);color:var(--accent-ink);padding:.15em .45em;border-radius:6px;border:1px solid var(--border)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:650;font-size:15px;padding:11px 20px;border-radius:12px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.btn-primary{color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--border)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* accordion */
.accordion{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.acc-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.acc-item:hover{border-color:var(--border-strong)}
.acc-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:16px;font-weight:650;color:var(--heading);background:var(--surface);border:0;padding:15px 18px;cursor:pointer}
.acc-no{display:grid;place-items:center;min-width:26px;height:26px;border-radius:8px;font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--border)}
.acc-ico{margin-left:auto;flex:none;color:var(--faint);transition:transform .25s}
.acc-head.open{color:var(--accent-ink)}
.acc-head.open .acc-ico{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-body .acc-inner{padding:0 18px 14px}
.acc-body ul{margin:.4em 0}

/* footer + back to top */
.page-footer{margin-top:30px;text-align:center;color:var(--faint);font-size:13.5px}
.page-footer p{margin:4px 0}
.page-footer .updated{font-size:12.5px}
.page-footer a{color:var(--muted);text-decoration:none}
.page-footer a:hover{color:var(--accent-ink)}
.to-top{position:fixed;right:22px;bottom:22px;z-index:40;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;text-decoration:none;font-size:18px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow-md);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}

/* hub (index) page */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:26px 0 4px}
.hub-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .2s,border-color .2s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.hub-card .hub-ico{font-size:28px;line-height:1}
.hub-card .hub-t{margin:2px 0 0;font-size:17px;color:var(--heading);font-weight:700}
.hub-card .hub-d{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.hub-card .hub-go{margin-top:6px;font-size:13px;font-weight:650;color:var(--accent-ink)}

/* clock page */
.clock-stage{display:grid;place-items:center;gap:22px;text-align:center}
.clock-wrap{width:min(70vmin,420px);aspect-ratio:1;display:grid;place-items:center;padding:18px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md)}
.clock-wrap svg{width:100%;height:100%}
.clock-face{fill:var(--surface);stroke:var(--border-strong);stroke-width:.5}
.clock-joint{fill:var(--accent)}
.tq{fill:var(--heading)} .t5{fill:var(--muted)} .t1{fill:var(--faint)}
.hand-h,.hand-m{fill:var(--heading)} .hand-s{fill:var(--accent)}
#digital{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(28px,7vw,44px);letter-spacing:.04em;color:var(--heading)}
#digital small{display:block;font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media (max-width:600px){body{font-size:16px}.prose h2::before{display:none}.crumbs{display:none}}
@media print{body{background:#fff}.topbar,.reading-progress,.to-top,.page-footer{display:none}.card{box-shadow:none;border:0;padding:0}}