:root{
  --bg:#0b0f19;
  --panel:#0a0f1a;
  --cyan:#00ffff;
  --cyan-soft:#00ffee;
  --text:#aefeff;
  --muted:#77e0ffcc;
  --border:#00ffff33;
}
:root[data-theme="light"]{
  --bg:#f5fbff;
  --panel:#ffffff;
  --cyan:#006d75;
  --cyan-soft:#0ea5a8;
  --text:#0a3140;
  --muted:#3b6b7a;
  --border:#0ea5a84d;
}

/* motion + base */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor{animation:none!important}
}
body{
  margin:0;
  font-family:'Fira Code', monospace;
  background:radial-gradient(ellipse at center,var(--bg) 0%,#000 100%);
  color:var(--text);
  line-height:1.6;
  display:flex;
  justify-content:center;
}
:root[data-theme="light"] body{background:var(--bg)}
.wrap{max-width:900px;width:100%;padding:2rem}
@media (max-width:640px){.wrap{padding:1rem}}

a{color:var(--cyan-soft);text-decoration:none}
a:hover{text-decoration:underline;color:#fff}
:root[data-theme="light"] a:hover{color:#000}

/* terminal banner */
.prompt{
  text-align:center;
  color:#00ccff;
  text-shadow:0 0 4px #00ffff88;
  margin:1.25rem 0 1.25rem;
}
:root[data-theme="light"] .prompt{color:#0ea5a8;text-shadow:none}
.mono{font-family:'Fira Code', monospace}
.terminal{color:var(--text);text-shadow:0 0 5px #00f0ff,0 0 10px #00ddee}
.cursor{animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}

/* controls */
.controls{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  margin:0 0 1rem;
}
.search{
  flex:1 1 320px;
  display:flex;
  gap:.5rem;
  align-items:center;
}
.search input{
  width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
}
.count{font-size:.9rem;color:var(--muted)}
.buttons{display:flex;gap:.5rem}
.btn{
  font-size:.95rem;
  color:var(--cyan-soft);
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.5rem .75rem;
  cursor:pointer;
}
.btn:focus{outline:2px dashed var(--cyan-soft);outline-offset:2px}

/* hamburger menu */
.hamburger{position:fixed;top:.5rem;right:.5rem;z-index:999}
.menu-btn{
  font-size:1.5rem;
  color:var(--cyan-soft);
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.5rem .75rem;
  cursor:pointer;
}
.menu-btn:focus{outline:2px dashed var(--cyan-soft);outline-offset:2px}
.menu{
  list-style:none;
  margin:.25rem 0 0 0;
  padding:0;
  position:absolute;
  right:0; top:2.5rem;
  min-width:220px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 0 15px #00ffff22;
  display:none;
}
.menu[aria-hidden="false"]{display:block}
.menu li{border-bottom:1px solid var(--border)}
.menu li:last-child{border-bottom:0}
.menu a{
  display:block;
  padding:.85rem 1.2rem;
  color:var(--cyan);
}
.menu a:hover{background:#001118;color:#fff}
:root[data-theme="light"] .menu a:hover{background:#e9fbff;color:#000}

/* content panel */
.panel{
  background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 0 15px #00ffff22;
  padding:2rem;
}
@media (max-width:640px){.panel{padding:1rem}}
:root[data-theme="light"] .panel{background:#fff}

h1{
  font-size:1.85rem;
  margin:.25rem 0 1rem;
  text-shadow:0 0 5px #00ffffaa, 0 0 10px #00ffff55;
}
:root[data-theme="light"] h1{text-shadow:none}
h2{
  font-size:1.25rem;
  color:#66ffff;
  margin:1.75rem 0 .5rem;
  position:relative;
}
:root[data-theme="light"] h2{color:#0f6}
@media (max-width:640px){h1{font-size:1.5rem} h2{font-size:1.1rem}}
time{display:block;color:#66ffffaa;font-size:.93rem;margin-bottom:.75rem}

/* toc */
.toc{
  margin:1rem 0 1.5rem;
  background:rgba(0,255,255,0.04);
  border:1px dashed var(--border);
  border-radius:10px;
  padding:1rem;
}
.toc h2{margin:0 0 .75rem 0}
.toc ul{
  list-style:none;
  padding:0; margin:0;
  columns:2; column-gap:1.5rem;
}
.toc li{break-inside:avoid; margin:.25rem 0}
@media (max-width:640px){.toc ul{columns:1}}

/* links + tooltips */
.links ul{list-style:none; padding:0; margin:.25rem 0 0}
.links li{margin:.3rem 0}
.links a[data-note]{position:relative}
.links a[data-note]:focus::after,
.links a[data-note]:hover::after{
  content:attr(data-note);
  position:absolute; left:0; top:100%; transform:translateY(.35rem);
  background:var(--panel); color:var(--text);
  border:1px solid var(--border);
  padding:.5rem .6rem; border-radius:8px;
  width:22rem; max-width:80vw; z-index:10;
  box-shadow:0 0 15px rgba(0,0,0,.3);
}

/* text blocks */
pre{
  background:var(--panel);
  border:1px solid #33ddff55;
  border-radius:8px;
  padding:1rem;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-x:auto;
  margin:0;
  box-shadow:0 0 10px rgba(51,255,255,.15);
}
/* prose variant for summary sections */
.prose{
  background:transparent; border:none; padding:0; box-shadow:none;
  white-space:pre-wrap; word-wrap:break-word;
  font-family:inherit; line-height:1.8; color:var(--text);
}

blockquote{
  margin:1rem 0;
  padding:.75rem 1rem;
  border-left:3px solid #00ffff55;
  background:rgba(0,255,255,.05);
}

.back{display:inline-block;margin-top:.75rem;font-size:.9rem}

footer{
  text-align:center;
  margin:2.5rem 0 0;
  padding-top:1rem;
  border-top:1px solid #333;
  font-size:.85rem;
  color:#008899;
}

/* anchor buttons on headings */
.anchor-btn{
  position:absolute;
  right:-.25rem; top:50%;
  transform:translate(100%,-50%);
  opacity:.6; font-size:.9rem;
}
.anchor-btn:hover{opacity:1}
@media (max-width:900px){
  .anchor-btn{ right:0; transform:translate(0,-50%); }
}