:root{
  --bg: #0b0b12;
  --paper: #ffffff;
  --ink: #12141a;
  --muted: #5b6270;
  --card: #ffffff;
  --border: #141821;
  --shadow: rgba(0,0,0,.18);
  --pink:#ff3ea5;
  --cyan:#2ee6ff;
  --yellow:#ffe66d;
  --lime:#7cff6b;
  --orange:#ff8a3d;
  --purple:#7c4dff;
  --red:#ff3b3b;
  --blue:#3b82f6;
  --radius: 18px;
  --radius2: 28px;
  --stroke: 3px;
  --maxw: 1120px;
  --font: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(255,62,165,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(46,230,255,.18), transparent 55%),
    radial-gradient(700px 420px at 80% 110%, rgba(124,77,255,.15), transparent 55%),
    linear-gradient(180deg, #fff6fb 0%, #f7fbff 50%, #fffdf3 100%);
}
a{color: inherit; text-decoration: none}
a:hover{ text-decoration: underline; }
.container{max-width: var(--maxw); margin: 0 auto; padding: 20px}
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.7);
  border-bottom: var(--stroke) solid rgba(20,24,33,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 20px; max-width: var(--maxw); margin: 0 auto}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: var(--stroke) solid var(--border);
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(135deg, var(--pink), var(--purple));
  position: relative;
}
.logo:after{
  content:"";
  position:absolute; inset: 9px;
  border-radius: 9px;
  border: var(--stroke) solid rgba(255,255,255,.65);
}
.nav-links{display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: var(--stroke) solid rgba(20,24,33,.14);
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 0 rgba(0,0,0,.10);
  font-weight: 700;
  font-size: 14px;
}
.pill:hover{transform: translateY(-1px)}
.pill:active{transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.10)}
.hero{
  padding: 28px 0 10px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 860px){
  .hero-grid{grid-template-columns: 1fr;}
}
.card{
  background: var(--card);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius2);
  box-shadow: 0 14px 0 var(--shadow);
  padding: 18px;
}
.holo{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(255,62,165,.13), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(46,230,255,.12), transparent 55%),
    radial-gradient(900px 600px at 30% 120%, rgba(255,138,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
}
.badge-row{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px}
.badge{
  padding: 8px 10px;
  border-radius: 12px;
  border: var(--stroke) solid rgba(20,24,33,.14);
  background: rgba(255,255,255,.92);
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
  font-size: 12px;
}
h1{margin: 0; font-size: 40px; line-height:1.05}
@media (max-width: 520px){h1{font-size: 34px}}
h2{margin: 0 0 8px; font-size: 26px}
h3{margin: 18px 0 8px; font-size: 18px}
p{margin: 10px 0; color: var(--ink); line-height:1.55}
.small{color: var(--muted); font-size: 14px}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 620px){ .grid{grid-template-columns: 1fr;} }
.tile{
  border-radius: var(--radius);
  border: var(--stroke) solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 0 rgba(0,0,0,.10);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.kicker{font-weight:900; font-size:12px; letter-spacing:.3px; text-transform: uppercase; opacity:.9}
.title{font-weight: 900; font-size: 18px; line-height: 1.2}
.tile .small{margin-top:auto}
.footer{
  margin-top: 24px;
  padding: 24px 0;
  border-top: var(--stroke) solid rgba(20,24,33,.08);
}
.footer-inner{max-width: var(--maxw); margin:0 auto; padding:0 20px; display:flex; gap: 14px; justify-content: space-between; flex-wrap:wrap}
hr{
  border: none;
  height: var(--stroke);
  background: rgba(20,24,33,.10);
  margin: 18px 0;
  border-radius: 999px;
}
.toc{
  display:flex; flex-direction:column; gap: 8px;
}
.toc a{
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--stroke) solid rgba(20,24,33,.12);
  background: rgba(255,255,255,.85);
  box-shadow: 0 9px 0 rgba(0,0,0,.08);
  font-weight: 800;
  font-size: 14px;
}
.toc a:hover{transform: translateY(-1px)}
.toc a.active{
  outline: 4px solid rgba(46,230,255,.35);
}
.content-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}
@media (max-width: 900px){
  .content-grid{grid-template-columns: 1fr;}
  .toc{flex-direction: row; flex-wrap: wrap;}
  .toc a{flex: 1 1 180px;}
}
.section{
  padding: 14px;
  border-radius: var(--radius);
  border: var(--stroke) solid rgba(20,24,33,.12);
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 0 rgba(0,0,0,.08);
  scroll-margin-top: 92px;
}
.callout{
  border-radius: var(--radius);
  border: var(--stroke) solid rgba(20,24,33,.12);
  background: linear-gradient(135deg, rgba(255,230,109,.35), rgba(46,230,255,.20));
  padding: 14px;
  box-shadow: 0 12px 0 rgba(0,0,0,.08);
}
kbd{
  padding: 2px 8px;
  border-radius: 10px;
  border: 2px solid rgba(20,24,33,.2);
  background: rgba(255,255,255,.9);
  font-family: var(--font);
  font-weight: 800;
}
.search{
  display:flex; gap: 10px; align-items:center;
}
.search input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: var(--stroke) solid rgba(20,24,33,.14);
  font: inherit;
  font-weight: 700;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 0 rgba(0,0,0,.08);
}
.tag{
  display:inline-block;
  margin: 4px 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid rgba(20,24,33,.15);
  background: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 12px;
}
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 820px){ .video-grid{grid-template-columns: 1fr;} }
.video{
  border-radius: var(--radius);
  border: var(--stroke) solid rgba(20,24,33,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 0 rgba(0,0,0,.10);
  padding: 12px;
}
.video iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 14px;
  border: 2px solid rgba(20,24,33,.12);
}
.chapter-dot{
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--border);
  box-shadow: 0 6px 0 rgba(0,0,0,.12);
  display:inline-block;
}
.dot-red{background: var(--red)}
.dot-orange{background: var(--orange)}
.dot-yellow{background: var(--yellow)}
.dot-green{background: var(--lime)}
.dot-blue{background: var(--blue)}
.dot-purple{background: var(--purple)}