:root{
  --bg:#0c0c0f;
  --panel:#12121a;
  --panel-2:#171723;
  --ink:#e9e9f1;
  --muted:#b7b7c8;
  --accent:#7dd3fc;     /* cyan-300 */
  --accent-2:#a78bfa;   /* violet-400 */
  --ok:#86efac;         /* green-300 */
  --warn:#fbbf24;       /* amber-400 */
  --danger:#f87171;     /* red-400 */
  --gold:#ffd54d;       /* active bead */
  --gold-deep:#f7b500;  /* active bead depth */
  --bead-off:#0b0b11;   /* inactive bead */
  --bead-off-edge:#1a1a29;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#0b0b0e, #0d0d14 50%, #0b0b0e);
  -webkit-tap-highlight-color: transparent;
}
.container{width:min(1100px,92%);margin-inline:auto}
h1,h2,h3,h4,h5{margin:0 0 .5rem}
p{color:var(--muted);line-height:1.6}
.subtitle{color:var(--muted);margin-top:.2rem}
.subtitle-black{color:#000}
.code{font-family:"JetBrains Mono",ui-monospace,monospace;background:#0e0e16;padding:.05rem .35rem;border-radius:6px}
.monoblock{background:#0f0f17;padding:1rem;border-radius:12px;overflow:auto;border:1px solid #1b1b2b}
.tiny{font-size:.95rem}
.hint{font-size:.9rem;color:var(--muted)}
.pill{display:inline-block;background:#0e0f18;border:1px solid #1b1c2a;padding:.35rem .65rem;border-radius:999px;color:var(--ink)}

.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a0a0e;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.header-inner{display:flex;align-items:center;gap:.8rem;padding:.6rem 0}
.hdr-toggle{
  appearance:none;border:none;background:rgba(255,255,255,.75);
  color:#000;border-radius:10px;padding:.35rem .55rem;font-weight:700;cursor:pointer;
}
.hdr-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex:1;transition:max-height .25s ease, opacity .2s ease}
.site-header.collapsed .hdr-wrap{max-height:0;opacity:0;overflow:hidden;padding:0;margin:0;border:0}
.brand{display:flex;gap:.8rem;align-items:center}
.brand-mark{font-size:1.8rem}
.top-nav a{color:#0a0a0e;text-decoration:none;margin-left:1rem;font-weight:600;opacity:.92}
.top-nav a:hover{opacity:1}

.hero{padding:3.4rem 0 2rem;border-bottom:1px solid #18182a}
.hero .lead{font-size:1.08rem;max-width:70ch}
.cta-row{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.05rem;border-radius:12px;border:1px solid #27273a;
  color:var(--ink);background:var(--panel-2);text-decoration:none;cursor:pointer;
  transition:.2s transform, .2s background, .2s border;
  touch-action:manipulation;
}
.btn:hover{transform:translateY(-1px);background:#1a1a29}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a0a0e;border:none;font-weight:700
}
.btn.sm{padding:.55rem .8rem;border-radius:10px}

.section{padding:2.2rem 0}
.section.alt{background:#0b0b10;border-top:1px solid #161628}
.section-title{font-size:1.5rem;margin-bottom:1rem}

.card{
  background:radial-gradient(1200px 400px at 10% -10%, rgba(125,211,252,.08), transparent),
             linear-gradient(180deg,#12121a,#101019);
  border:1px solid #1c1c2c;border-radius:var(--radius);padding:1.2rem;margin:1rem 0;box-shadow:var(--shadow)
}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media (max-width:940px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .ram{min-height:170px}
}

.kv{display:grid;grid-template-columns:auto 1fr;gap:.55rem .8rem;align-items:center}
.stage{margin-top:.7rem}

/* ABACUS */
.abacus{
  --rod-count:10;
  display:grid;grid-template-columns:repeat(var(--rod-count),1fr);
  gap:.35rem;background:#0e0f17;border:1px solid #1a1b29;border-radius:12px;padding:.9rem;
  position:relative;
}
.abacus.small{--rod-count:8;transform-origin:top left}
.rod{display:flex;flex-direction:column-reverse;align-items:center;gap:.3rem}
.bead{
  width:26px;height:26px;border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #0b0b0b 0%, var(--bead-off) 40%, #000 90%);
  border:1px solid var(--bead-off-edge);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.45);
  cursor:pointer;transition:transform .1s ease, filter .15s ease, background .2s ease;
}
.bead.active{
  background:radial-gradient(circle at 35% 30%, #fff6c7 0%, var(--gold) 35%, var(--gold-deep) 90%);
  border-color:rgba(0,0,0,.45);
  filter:saturate(1.05) brightness(1.03);
}
.bead:active{transform:scale(.97)}
.rod-label{font-size:.72rem;color:var(--muted);margin-top:.2rem}

.abacus-tools{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:.9rem 0}
.abacus-tools input{padding:.5rem .6rem;border-radius:10px;border:1px solid #1c1c2c;background:#101018;color:var(--ink);min-width:120px}
.abacus-caption{margin-top:.45rem;color:var(--muted);text-align:center}

.controls{display:flex;gap:.6rem;margin:.7rem 0 .45rem;flex-wrap:wrap}
.ram{width:100%;min-height:210px;background:#0f0f18;border:1px solid #1c1c2c;border-radius:12px;color:var(--ink);padding:.8rem;font-family:"JetBrains Mono",monospace}

.log{margin-top:1rem;background:#0f0f18;border:1px solid #1c1c2c;border-radius:12px;padding:.8rem;max-height:240px;overflow:auto;font-family:"JetBrains Mono",monospace}
.abacus-row{display:flex;gap:1rem;align-items:flex-start;margin-top:1rem;flex-wrap:wrap}

.roles-board{margin-top:1rem}
.roles-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
@media (max-width:940px){.roles-grid{grid-template-columns:repeat(2,1fr)}}
.role-card{
  background:#0f0f18;border:1px solid #1c1c2c;border-radius:12px;padding:.8rem;
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-start
}
.role-emoji{font-size:1.4rem}
.role-title{font-weight:700}
.role-val{color:var(--muted);word-break:break-word}

.guide h4{margin-top:1rem}
.guide ul{line-height:1.7}
.guide li{margin:.2rem 0}

.img-card{width:100%;height:auto;border-radius:12px;border:1px solid #1c1c2c;box-shadow:var(--shadow)}
.img-cap{color:var(--muted);margin-top:.4rem;text-align:center}

.site-footer{padding:2rem 0;border-top:1px solid #17172a;text-align:center;color:var(--muted)}