:root{
  --bg:#05070d; --bg-alt:#080b14;
  --surface: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 55%, rgba(135,206,250,0.04) 100%);
  --surface-strong: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(135,206,250,0.08) 100%);
  --surface-sky: linear-gradient(165deg, rgba(135,206,250,0.28) 0%, rgba(77,166,255,0.14) 45%, rgba(255,255,255,0.1) 100%);
  --border: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.22);
  --text:#e7eaf2; --text-dim:#8991a8; --text-faint:#5b6377;
  --blue:#4f8dff; --purple:#9b6bff; --cyan:#3fe0d0; --green:#3ddc97; --amber:#f5b942; --red:#ef5c6e;
  --brand:#f2760a; --brand-light:#ff9a3d;
  --sky:#87ceeb; --sky-deep:#4da6ff; --water-glow:rgba(135,206,250,0.35);
  --glass-blur: blur(26px) saturate(190%);
  --glass-shadow: 0 10px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
  --glass-hover-shadow: 0 16px 48px rgba(77,166,255,0.22), inset 0 1px 0 rgba(255,255,255,0.28);
  --radius:14px; --radius-sm:8px; --maxw:860px;
  --font-display:'Space Grotesk','Inter',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --glass-ease: cubic-bezier(.25,.8,.35,1);
}
[data-theme="light"]{
  --bg:#ffffff; --bg-alt:#ffffff;
  --brand:#4da6ff; --brand-light:#87ceeb;
  --surface: linear-gradient(165deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.45) 100%);
  --surface-strong: linear-gradient(165deg, rgba(255,255,255,0.88) 0%, rgba(135,206,250,0.12) 100%);
  --surface-sky: linear-gradient(165deg, rgba(135,206,250,0.38) 0%, rgba(77,166,255,0.16) 100%);
  --border:rgba(30,60,90,0.1); --border-strong:rgba(30,60,90,0.16); --text:#14161f; --text-dim:#4a4f5e; --text-faint:#6b7280;
  --glass-shadow: 0 8px 32px rgba(30,80,140,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
  --glass-hover-shadow: 0 14px 40px rgba(77,166,255,0.2), inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] body{ background:#fff; background-image:none; }
[data-theme="light"] .liquid-bg{ display:none; }
[data-theme="light"] .grid-bg{ opacity:.12; background-image:linear-gradient(rgba(30,60,90,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30,60,90,0.04) 1px, transparent 1px); }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; overflow-x:hidden; font-size:16px;
  background-image: radial-gradient(ellipse 900px 520px at 15% -10%, rgba(135,206,250,0.14), transparent 62%),
    radial-gradient(ellipse 720px 480px at 105% 15%, rgba(77,166,255,0.12), transparent 58%),
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(63,224,208,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #070a12 100%); }
.liquid-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background: radial-gradient(ellipse 130% 70% at 50% 105%, rgba(77,166,255,0.16), transparent 58%),
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(135,206,250,0.1), transparent 52%),
    radial-gradient(ellipse 45% 38% at 88% 22%, rgba(79,141,255,0.08), transparent 50%);
  animation: liquidDrift 22s var(--glass-ease) infinite alternate;
}
@keyframes liquidDrift{ 0%{opacity:.82; transform:scale(1) translate3d(0,0,0);} 100%{opacity:1; transform:scale(1.015) translate3d(0,-0.5%,0);} }
@media (prefers-reduced-motion: reduce){ .liquid-bg{animation:none;} }
.grid-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.28;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:44px 44px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 10%, transparent 75%); }
[data-theme="light"] .grid-bg{opacity:.5;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;}
code, .mono{font-family:var(--font-mono);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

.topbar{ position:sticky; top:0; z-index:70; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(5,7,13,0.55) 100%); box-shadow:var(--glass-shadow);
  border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:14px 22px; gap:10px;
  transition: background .45s var(--glass-ease), box-shadow .45s var(--glass-ease), border-color .45s var(--glass-ease); }
.topbar:hover{ background:linear-gradient(180deg, rgba(135,206,250,0.14) 0%, rgba(5,7,13,0.62) 100%); border-bottom-color:rgba(135,206,250,0.35); box-shadow:var(--glass-hover-shadow); }
[data-theme="light"] .topbar{background:linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.62) 100%);}
[data-theme="light"] .topbar:hover{background:linear-gradient(180deg, rgba(135,206,250,0.28) 0%, rgba(255,255,255,0.78) 100%);}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:15px; white-space:nowrap;}
.brand-logo-img{height:30px; width:auto; display:block;}
.brand-sub{font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--text-faint); border-left:1px solid var(--border-strong); padding-left:12px;}
.top-actions{display:flex; align-items:center; gap:10px;}
.btn{ font-family:var(--font-body); font-size:13.5px; font-weight:600; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  padding:9px 16px; border-radius:999px; cursor:pointer; backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); transition:border-color .4s var(--glass-ease), background .4s var(--glass-ease), transform .25s var(--glass-ease), box-shadow .4s var(--glass-ease); white-space:nowrap; }
.btn:hover{border-color:rgba(135,206,250,0.55); background:var(--surface-sky); box-shadow:var(--glass-hover-shadow); transform:translateY(-1px); color:var(--text);}
.btn:active{transform:translateY(0);}
.btn-solid{background:var(--brand); border:none; color:#1a1206; font-weight:700;}
.btn-solid:hover{background:var(--brand-light); box-shadow:0 10px 30px rgba(242,118,10,0.35); transform:translateY(-1px);}
[data-theme="light"] .btn-solid{color:#fff;}
[data-theme="light"] .btn-solid:hover{box-shadow:0 10px 30px rgba(77,166,255,0.35);}
[data-theme="light"] .level-btn.active{color:#fff;}
.icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px;}
.hide-mobile{display:inline-flex;}
.menu-btn{ display:flex; width:42px; height:42px; flex:none; position:relative; z-index:5; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text);
  align-items:center; justify-content:center; cursor:pointer; font-size:19px; line-height:1; transition:background .2s ease, border-color .2s ease, transform .15s ease; touch-action:manipulation; }
.menu-btn:hover{ border-color:rgba(135,206,250,0.55); background:var(--surface-sky); color:var(--sky-deep); box-shadow:var(--glass-hover-shadow); }
.menu-btn:active{ transform:scale(.9); }
.lang-switch{display:flex; align-items:center; gap:2px; border:1px solid var(--border-strong); border-radius:999px; padding:3px; background:var(--surface);}
.lang-btn{height:32px; padding:0 11px; border-radius:999px; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.06em; font-family:var(--font-body); display:flex; align-items:center; justify-content:center; opacity:.5; transition:opacity .15s, background .15s; white-space:nowrap;}
.lang-btn.active{opacity:1; background:var(--surface-strong); box-shadow:0 0 0 1px var(--border-strong) inset;}
.lang-btn:hover{opacity:1;}
@media (max-width:900px){ .hide-mobile{display:none;} }
@media (max-width:640px){
  .top-actions{gap:6px;}
  #themeToggle{padding-left:10px; padding-right:10px;}
  .top-actions .btn{font-size:12.5px; padding:8px 12px;}
}

.layout{display:flex; position:relative; z-index:1;}
.sidebar{ width:270px; flex:none; position:fixed; left:0; top:151px; height:calc(100vh - 151px); overflow-y:auto; border-right:1px solid var(--border);
  padding:22px 14px 40px; background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(5,7,13,0.72) 100%);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  z-index:60; transform:translateX(-100%); transition:transform .28s var(--glass-ease), background .45s var(--glass-ease), border-color .45s var(--glass-ease); }
.sidebar.open{transform:translateX(0);}
.sidebar.open:hover{ border-right-color:rgba(135,206,250,0.4); background:linear-gradient(180deg, rgba(135,206,250,0.12) 0%, rgba(5,7,13,0.78) 100%); }
[data-theme="light"] .sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.58) 100%);}
[data-theme="light"] .sidebar.open:hover{background:linear-gradient(180deg, rgba(135,206,250,0.22) 0%, rgba(255,255,255,0.72) 100%);}
.sidebar::-webkit-scrollbar{width:5px;} .sidebar::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:4px;}
.side-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); padding:14px 12px 6px;}
.side-link{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--text);
  cursor:pointer; transition:background .4s var(--glass-ease), color .35s ease, box-shadow .4s var(--glass-ease), border-color .4s var(--glass-ease);
  text-decoration:none; border:1px solid transparent; }
.side-link:hover{background:var(--surface-sky); color:var(--text); border-color:rgba(135,206,250,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);}
.side-link.active{background:var(--surface-strong); color:var(--text); box-shadow:inset 2px 0 0 var(--sky-deep), inset 0 1px 0 rgba(255,255,255,0.12); border-color:rgba(135,206,250,0.25);}
.side-num{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); width:18px;}
.main{flex:1; min-width:0; width:100%;}
.overlay{position:fixed; top:63px; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s;}
.overlay.open{opacity:1; pointer-events:auto;}

.float-progress{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:40; background:var(--surface);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-strong); border-radius:999px; padding:8px 16px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
  display:flex; align-items:center; gap:10px; box-shadow:var(--glass-shadow); transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease); }
.float-progress:hover{background:var(--surface-sky); border-color:rgba(135,206,250,0.45); box-shadow:var(--glass-hover-shadow);}
[data-theme="light"] .float-progress{background:var(--surface);}
.float-progress .bar{width:80px; height:3px; background:var(--border-strong); border-radius:2px; overflow:hidden;}
.float-progress .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); width:0%; transition:width .25s;}
@media (max-width:600px){.float-progress{font-size:10px; padding:7px 12px;} .float-progress .bar{width:50px;}}

.hero{padding:88px 0 70px; position:relative; overflow:hidden;}
.hero .wrap-wide{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}
@media (max-width:900px){.hero .wrap-wide{grid-template-columns:1fr; gap:36px;} .hero{padding:48px 0 40px;}}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--cyan); font-family:var(--font-mono); background:rgba(63,224,208,0.08); border:1px solid rgba(63,224,208,0.25); padding:6px 12px; border-radius:999px; margin-bottom:22px;}
.eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
.hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.06; letter-spacing:-0.02em;}
.hero h1 .grad{color:var(--brand);}
.hero p.sub{margin-top:22px; font-size:17px; color:var(--text-dim); max-width:520px;}
.hero .ctas{margin-top:32px; display:flex; gap:12px; flex-wrap:wrap;}
.hero .statement{margin-top:28px; font-size:13.5px; color:var(--text-faint); font-family:var(--font-mono);}
.hero-viz{position:relative; height:420px; border:1px solid var(--border); border-radius:20px; background:var(--surface); overflow:hidden;
  backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease);}
.hero-viz:hover{background:var(--surface-sky); border-color:rgba(135,206,250,0.45); box-shadow:var(--glass-hover-shadow);}
.hero-viz svg{width:100%; height:100%;}
@media (max-width:900px){.hero-viz{height:300px;}}

section.step{padding:78px 0; border-top:1px solid var(--border); scroll-margin-top:80px;}
section.step:first-of-type{border-top:none;}
.step-head{margin-bottom:34px;}
.step-tag{font-family:var(--font-mono); font-size:12px; color:var(--blue); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.step-tag .n{color:var(--text-faint);}
.step h2{font-size:clamp(24px,3.4vw,32px); margin-bottom:12px;}
.step .lede{color:var(--text-dim); font-size:15.5px; max-width:640px;}
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-top:22px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  transition:border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease), background .45s var(--glass-ease), transform .35s var(--glass-ease); }
.card:hover{border-color:rgba(135,206,250,0.5); background:var(--surface-sky); box-shadow:var(--glass-hover-shadow); transform:translateY(-2px);}
.card + .card{margin-top:16px;}
.badge{display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--amber); background:rgba(245,185,66,0.08); border:1px solid rgba(245,185,66,0.25); padding:3px 9px; border-radius:6px; margin-bottom:14px;}
.badge.blue{color:var(--blue); background:rgba(79,141,255,.08); border-color:rgba(79,141,255,.25);}
.badge.green{color:var(--green); background:rgba(61,220,151,.08); border-color:rgba(61,220,151,.25);}
.badge.purple{color:var(--purple); background:rgba(155,107,255,.08); border-color:rgba(155,107,255,.25);}
label.field-label{display:block; font-size:12.5px; color:var(--text-faint); margin-bottom:8px; font-family:var(--font-mono);}
input[type=text]{ width:100%; background:var(--bg-alt); border:1px solid var(--border-strong); color:var(--text); padding:12px 14px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:14.5px; }
input[type=text]:focus, button:focus-visible, .side-link:focus-visible, select:focus-visible, input[type=range]:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
input[type=range]{width:100%; accent-color:var(--blue);}
select{background:var(--bg-alt); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 10px; font-family:var(--font-mono); font-size:13px;}

.token-chip{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border-radius:9px; font-family:var(--font-mono); font-size:13.5px; cursor:pointer; border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.8,.2,1); margin:4px 6px 4px 0; }
.token-chip:hover{transform:translateY(-2px);}
.token-chip .id{font-size:10px; opacity:.75;}
.tok-detail{margin-top:16px; font-size:13.5px; color:var(--text-dim);}
.tok-detail b{color:var(--text); font-family:var(--font-mono);}

.flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);}
.flow .arrow{color:var(--text-faint);}
.flow .node{background:var(--surface-strong); border:1px solid var(--border-strong); padding:6px 12px; border-radius:8px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){.two-col{grid-template-columns:1fr;}}

.disclaimer{font-size:12.5px; color:var(--text-faint); border-left:2px solid var(--amber); padding-left:12px; margin-top:16px; font-style:italic;}
.note{font-size:12.5px; color:var(--text-faint); border-left:2px solid var(--border-strong); padding-left:12px; margin-top:12px;}

.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.tab{font-size:12.5px; font-family:var(--font-mono); padding:7px 13px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim); cursor:pointer;
  backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); transition:background .4s var(--glass-ease), border-color .4s var(--glass-ease), color .35s ease, transform .2s var(--glass-ease), box-shadow .4s var(--glass-ease);}
.tab:hover{border-color:rgba(135,206,250,0.55); background:var(--surface-sky); transform:translateY(-1px); box-shadow:var(--glass-hover-shadow); color:var(--text);}
.tab.active{background:linear-gradient(135deg, rgba(135,206,250,0.55), rgba(77,166,255,0.45)); color:#fff; border-color:rgba(135,206,250,0.5); box-shadow:var(--glass-hover-shadow);}

.matrix{display:inline-grid; gap:6px; font-family:var(--font-mono); font-size:14px;}
.matrix .cell{background:var(--surface-strong); border:1px solid var(--border-strong); border-radius:6px; padding:8px 10px; text-align:center; min-width:48px; transition:background .2s, border-color .2s;}
.matrix .cell.active{border-color:var(--blue); box-shadow:0 0 0 2px rgba(79,141,255,.25); background:rgba(79,141,255,0.12);}
.matrix .cell.row-hl{border-color:var(--amber);}
.matrix .cell.col-hl{border-color:var(--cyan);}
.matrix .cell.masked{opacity:.35; border-style:dashed; text-decoration:line-through;}
.matrix input{width:56px; text-align:center; padding:6px; font-size:13px;}

.pill-row{display:flex; gap:8px; flex-wrap:wrap;}
canvas{display:block; max-width:100%;}
.kv-row{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); padding:6px 0; border-bottom:1px dashed var(--border); gap:12px;}
.kv-row b{color:var(--text);}

.pipeline-node{ display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.pipeline-node:hover{transform:translateX(3px);}
.pipeline-node:hover{background:var(--surface-strong); border-color:var(--blue);}
.pipeline-node .idx{font-family:var(--font-mono); color:var(--text-faint); font-size:11px; width:22px;}

.probbar-row{display:flex; align-items:center; gap:10px; margin:8px 0; font-family:var(--font-mono); font-size:13px;}
.probbar-row .tok{width:70px; flex:none; color:var(--text-dim);}
.probbar-track{flex:1; height:10px; background:var(--surface-strong); border-radius:6px; overflow:hidden; border:1px solid var(--border);}
.probbar-fill{height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .35s ease;}
.probbar-row .pct{width:52px; text-align:right; color:var(--text-faint);}
.mej7-tensor-badge{display:inline-flex; align-items:center; gap:6px; margin:4px 6px 4px 0; padding:6px 10px; border-radius:8px; font-size:12px; font-family:var(--font-mono); background:var(--surface-strong); border:1px solid var(--border); color:var(--text-dim);}
.mej7-tensor-badge code{font-size:11px; color:var(--cyan);}
.mej7-tensor-badge.muted{opacity:.72;}
.mej7-mx-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px;}
.mej7-mx-block{display:flex; flex-direction:column; gap:6px;}
.mej7-mx-label{font-size:11px; font-family:var(--font-mono); color:var(--text-faint);}
.mej7-mx-grid{display:grid; gap:4px;}
.mej7-mx-col{grid-template-columns:1fr;}
.mej7-mx-cell{padding:6px 8px; min-width:52px; text-align:center; font-family:var(--font-mono); font-size:12px; border:1px solid var(--border); border-radius:6px; background:var(--surface-strong);}
.mej7-mx-cell.hi-row,.mej7-mx-cell.hi-col,.mej7-mx-cell.hi-out{outline:2px solid var(--brand); outline-offset:1px;}
.mej7-mx-op{font-size:18px; color:var(--text-faint); font-family:var(--font-mono);}
.mej7-mx-step{margin-top:10px; font-size:12px; color:var(--text-dim);}
.nn-lab-section .wrap-wide{max-width:1180px;}
.nn-lab-badge{display:inline-block; font-size:11px; font-family:var(--font-mono); letter-spacing:.06em; padding:6px 10px; border-radius:999px; border:1px solid rgba(242,118,10,.45); color:var(--brand-light); margin-bottom:12px;}
.nn-lab-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.nn-lab-tab{border:1px solid var(--border); background:var(--surface); color:var(--text-dim); font-weight:600; font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer;}
.nn-lab-tab.active,.nn-lab-tab:focus-visible{border-color:rgba(242,118,10,.55); color:var(--brand-light); outline:none; box-shadow:0 0 0 2px rgba(242,118,10,.25);}
.nn-lab-depth-copy{color:var(--text-dim); font-size:14px; margin:0 0 16px; max-width:720px;}
.nn-lab-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:18px; align-items:start;}
@media (max-width:900px){.nn-lab-grid{grid-template-columns:1fr;}}
.nn-lab-svg-wrap{border:1px solid var(--border); border-radius:12px; background:var(--bg-alt); overflow:hidden;}
.nn-lab-svg-wrap svg{width:100%; height:auto; display:block;}
.nn-lab-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0;}
.nn-lab-matrix{margin-top:8px;}
.nn-lab-step-btns,.nn-lab-arch-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.btn-sm{font-size:12px; padding:6px 10px;}
.nn-lab-side .card{margin-bottom:14px;}
.nn-lab-layer-card{padding:10px 0; border-bottom:1px solid var(--border);}
.nn-lab-layer-card:last-child{border-bottom:none;}
.nn-lab-mini{font-size:12px; color:var(--text-faint);}
.nn-lab-explain{margin:8px 0 0 18px; font-size:13px; color:var(--text-dim);}
.nn-lab-links{display:flex; flex-wrap:wrap; gap:8px;}
.nn-lab-gd-flow{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; font-family:var(--font-mono); color:var(--text-faint); margin-top:12px;}
.nn-lab-input-row{margin-bottom:10px;}
.nn-lab-table{width:100%; border-collapse:collapse; font-size:12px; margin-top:8px;}
.nn-lab-table th,.nn-lab-table td{border:1px solid var(--border); padding:6px 8px; text-align:left;}
.nn-lab-table th{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
.nn-edge{cursor:pointer;}
.nn-node:focus-visible circle{stroke:var(--brand-light); stroke-width:3;}

footer{border-top:1px solid var(--border); padding:60px 0 40px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr;}}
.link-list a{display:block; font-size:13.5px; color:var(--text-dim); padding:6px 0; text-decoration:none;}
.link-list a:hover{color:var(--blue);}

.glow-border{position:relative;}
.glow-border::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(120deg,var(--blue),var(--purple),var(--cyan)); opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
::selection{background:var(--blue); color:#fff;}

/* intro splash — mej7.com */
.intro-splash{ position:fixed; inset:0; z-index:300; background:#020308; display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .65s ease, transform .65s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.intro-splash.hide{opacity:0; transform:scale(1.07); pointer-events:none;}
.intro-particles{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.intro-particle{position:absolute; border-radius:50%; background:#fff; animation-name:introTwinkle; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
@keyframes introTwinkle{ 0%,100%{opacity:.1; transform:translateY(0);} 50%{opacity:.7; transform:translateY(-14px);} }
.intro-logo-wrap{position:relative; z-index:2; text-align:center;}
.intro-logo{ opacity:0; transform:scale(.8) translateY(6px); animation:introPop .85s cubic-bezier(.19,1.6,.4,1) forwards .15s; }
.intro-logo-img{ height:92px; width:auto; margin:0 auto; display:block; filter:drop-shadow(0 0 34px rgba(242,118,10,0.5)); animation:introGlow 2.6s ease-in-out infinite 1s; }
@keyframes introPop{ from{opacity:0; transform:scale(.8) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);} }
@keyframes introGlow{ 0%,100%{filter:drop-shadow(0 0 22px rgba(242,118,10,0.35));} 50%{filter:drop-shadow(0 0 46px rgba(242,118,10,0.7));} }
.intro-underline{ width:0; height:2px; margin:16px auto 0; background:var(--brand); animation:introLine .6s ease forwards .95s; }
@keyframes introLine{ from{width:0; opacity:0;} to{width:64px; opacity:1;} }
.intro-tagline{ margin-top:16px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,0.4);
  opacity:0; transform:translateY(8px); animation:introFadeUp .6s ease forwards 1.15s; }
@keyframes introFadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.final-cta{padding:80px 0; text-align:center; border-top:1px solid var(--border);}
.final-cta h2{font-size:clamp(24px,4vw,36px); max-width:640px; margin:0 auto 26px;}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-faint); margin-top:10px; font-family:var(--font-mono);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}
.vec-controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.vec-controls button{font-size:12.5px;}

/* progress pill */
.progress-pill{display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); border-radius:999px; padding:8px 10px; background:var(--surface); font-size:12px;}
.progress-ring{width:18px; height:18px; border-radius:50%; background:conic-gradient(var(--blue) 0%, rgba(255,255,255,0.14) 0%); transition:background .3s; flex:none;}
.reset-progress-btn{border:none; background:none; color:var(--text-faint); cursor:pointer; font-size:13px; line-height:1; padding:2px;}
.reset-progress-btn:hover{color:var(--red);}
.visited-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); margin-left:auto;}
.side-link{justify-content:space-between;}

/* command palette */
.cmdk-overlay{position:fixed; inset:0; z-index:100; background:rgba(3,4,8,0.62); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; opacity:0; pointer-events:none; transition:opacity .15s;}
.cmdk-overlay.open{opacity:1; pointer-events:auto;}
.cmdk-box{width:min(560px,90vw); background:var(--surface); border:1px solid var(--border-strong); border-radius:18px; overflow:hidden;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease);}
.cmdk-box:hover{background:var(--surface-sky); border-color:rgba(135,206,250,0.45); box-shadow:var(--glass-hover-shadow);}
.cmdk-box input{width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); padding:16px 18px; font-size:15px; font-family:var(--font-body);}
.cmdk-box input:focus{outline:none;}
.cmdk-list{max-height:340px; overflow-y:auto; padding:8px;}
.cmdk-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--text-dim);}
.cmdk-item .cmdk-num{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); width:20px;}
.cmdk-item.sel{background:var(--surface-sky); color:var(--text); border:1px solid rgba(135,206,250,0.35);}
.cmdk-item:hover{background:var(--surface-sky); border:1px solid rgba(135,206,250,0.25);}
.cmdk-hint{padding:10px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--text-faint); font-family:var(--font-mono);}
@media (max-width:900px){ .progress-pill{display:none;} }

/* follow-one-token */
.journey-rail{display:flex; flex-direction:column; gap:2px; min-width:150px;}
.journey-dot-row{display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:8px; font-size:12px; color:var(--text-faint); cursor:pointer; font-family:var(--font-mono);}
.journey-dot-row .dot{width:9px; height:9px; border-radius:50%; background:var(--border-strong); flex:none;}
.journey-dot-row.done .dot{background:var(--green);}
.journey-dot-row.cur{color:var(--text); background:var(--surface-strong);}
.journey-dot-row.cur .dot{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.journey-line{width:2px; height:14px; background:var(--border-strong); margin-left:8.5px;}
.layer-stack{display:flex; flex-direction:column; gap:6px; position:relative; padding:10px 0;}
.layer-box{border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); background:var(--surface);}
.layer-glow-dot{position:absolute; left:50%; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; background:var(--amber); box-shadow:0 0 14px var(--amber); top:0; transition:top 1.4s ease;}

/* quiz */
.quiz-option{display:block; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text); margin-top:8px; cursor:pointer; font-size:14px; transition:background .25s ease, border-color .25s ease, transform .2s cubic-bezier(.2,.8,.2,1);}
.quiz-option:not(:disabled):hover{transform:translateX(3px);}
.quiz-option:hover{background:var(--surface-strong);}
.quiz-option.correct{border-color:var(--green); background:rgba(61,220,151,0.1); color:var(--green);}
.quiz-option.wrong{border-color:var(--red); background:rgba(239,92,110,0.1); color:var(--red);}
.quiz-option:disabled{cursor:default;}

/* level switcher */
.level-bar{ position:sticky; top:63px; z-index:44; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(5,7,13,0.65) 100%); border-bottom:1px solid var(--border);
  box-shadow:var(--glass-shadow); padding:10px 22px; transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease); }
.level-bar:hover{ background:linear-gradient(180deg, rgba(135,206,250,0.12) 0%, rgba(5,7,13,0.7) 100%); border-bottom-color:rgba(135,206,250,0.32); }
[data-theme="light"] .level-bar{background:linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.58) 100%);}
[data-theme="light"] .level-bar:hover{background:linear-gradient(180deg, rgba(135,206,250,0.2) 0%, rgba(255,255,255,0.72) 100%);}
.level-bar-inner{max-width:1100px; margin:0 auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.level-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px; font-weight:600; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-dim); padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
  transition:background .4s var(--glass-ease), border-color .4s var(--glass-ease), color .25s ease, transform .25s var(--glass-ease), box-shadow .4s var(--glass-ease); }
.level-btn:hover{border-color:rgba(135,206,250,0.55); background:var(--surface-sky); transform:translateY(-1px); box-shadow:var(--glass-hover-shadow);}
.level-btn.active{background:var(--brand); border-color:transparent; color:#1a1206; font-weight:700;}
.level-emoji{font-size:14px;}
.level-soon{font-family:var(--font-mono); font-size:9.5px; background:rgba(255,255,255,0.12); padding:2px 6px; border-radius:999px; margin-left:2px;}
.level-btn.active .level-soon{background:rgba(255,255,255,0.25);}

/* kid-friendly beginner content */
.b-robot-bounce{ display:inline-block; font-size:56px; animation:kBounce 1.6s ease-in-out infinite; margin-bottom:6px; }
@keyframes kBounce{ 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-14px) rotate(4deg);} }
.k-treat-row{ display:flex; justify-content:center; gap:14px; font-size:30px; margin-top:16px; }
.k-treat-row span{ display:inline-block; animation:kTreatPop 1.8s ease-in-out infinite; }
.k-treat-row span:nth-child(2){animation-delay:.2s;} .k-treat-row span:nth-child(3){animation-delay:.4s;}
.k-treat-row span:nth-child(4){animation-delay:.6s;} .k-treat-row span:nth-child(5){animation-delay:.8s;}
@keyframes kTreatPop{ 0%,100%{transform:scale(1) translateY(0);} 50%{transform:scale(1.25) translateY(-8px);} }
.k-conveyor{ position:relative; height:78px; margin:18px 0; border-radius:14px; background:repeating-linear-gradient(90deg, var(--bg-alt) 0 26px, var(--surface-strong) 26px 30px); overflow:hidden; border:1px solid var(--border); }
.k-conveyor-item{ position:absolute; top:14px; width:70px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:14px; color:#fff; animation-name:kConveyorMove; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes kConveyorMove{ from{ left:-90px; } to{ left:100%; } }
@media (prefers-reduced-motion: reduce){ .b-robot-bounce, .k-treat-row span, .k-conveyor-item{ animation:none; } }
.k-guess-box{ text-align:center; padding:20px; border:2px dashed var(--brand); border-radius:16px; margin-top:14px; }
.k-guess-prompt{ font-size:24px; font-weight:700; margin-bottom:14px; }
.k-guess-answer{ font-size:30px; font-weight:800; color:var(--brand); margin-top:16px; opacity:0; transform:scale(.6); transition:opacity .4s ease, transform .4s cubic-bezier(.2,1.6,.4,1); }
.k-guess-answer.show{ opacity:1; transform:scale(1); }
.k-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; }
@media (max-width:600px){ .k-grid{ grid-template-columns:1fr; } }
.k-grid-item{ text-align:center; padding:18px 14px; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt); }
.k-grid-item span{ font-size:36px; display:block; margin-bottom:8px; }
.k-grid-item b{ display:block; font-size:15.5px; margin-bottom:6px; }
.k-grid-item p{ margin:0; font-size:13.5px; color:var(--text-dim); }
.k-facts{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.k-fact{ display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:12px; background:var(--bg-alt); border:1px solid var(--border); }
.k-fact span{ font-size:26px; flex:none; }
.k-fact p{ margin:0; font-size:15px; color:var(--text-dim); }
.k-spotlight-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0; font-size:18px; font-weight:600; }
.k-spotlight-row span{ padding:6px 12px; border-radius:8px; color:var(--text-faint); transition:background .3s, color .3s, transform .3s; }
.k-spotlight-row span.lit{ background:var(--brand); color:#1a1206; transform:scale(1.12); box-shadow:0 0 18px rgba(242,118,10,0.5); }
.k-typewriter-box{ background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:20px; margin:16px 0; min-height:32px; font-size:17px; }
.k-cursor{ animation:kBlink 0.9s step-end infinite; color:var(--brand); font-weight:700; }
@keyframes kBlink{ 50%{opacity:0;} }
.k-oops-box{ border:2px dashed var(--red); border-radius:14px; padding:18px; margin:16px 0; text-align:center; }
.k-oops-q{ font-size:18px; font-weight:700; margin-bottom:10px; }
.k-oops-a{ font-size:15px; color:var(--text-dim); }

/* beginner mode */
.beginner-wrap{max-width:760px; margin:0 auto; padding:56px 24px 90px; position:relative; z-index:1; font-size:18px; line-height:1.75;}
.b-hero-rings{position:relative; width:76px; height:76px; margin:0 auto 22px;}
.b-hero-rings i{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(242,118,10,0.35); animation:bRingPulse 3s ease-out infinite;}
.b-hero-rings i:nth-child(2){animation-delay:1s;} .b-hero-rings i:nth-child(3){animation-delay:2s;}
.b-hero-rings .b-core{position:absolute; inset:26px; border-radius:50%; background:var(--brand); box-shadow:0 0 24px rgba(242,118,10,0.55);}
@keyframes bRingPulse{ 0%{transform:scale(.4); opacity:0;} 15%{opacity:.9;} 100%{transform:scale(1.6); opacity:0;} }
.b-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.8,.3,1);}
.b-reveal.in{opacity:1; transform:translateY(0);}
.beginner-wrap h1{font-size:clamp(30px,5vw,44px); line-height:1.15; margin-bottom:18px;}
.beginner-wrap h2{font-size:clamp(22px,3vw,28px); margin:0 0 12px;}
.beginner-wrap .b-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px 32px; margin-top:26px; transition:border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.beginner-wrap .b-card:hover{border-color:var(--border-strong); box-shadow:0 18px 40px rgba(0,0,0,0.16); transform:translateY(-2px);}
.beginner-wrap .b-lead{font-size:19px; color:var(--text-dim); margin-bottom:8px;}
.beginner-wrap p{margin-top:14px; color:var(--text-dim);}
.beginner-wrap .b-emoji{font-size:34px; display:block; margin-bottom:14px;}
.b-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--cyan); font-family:var(--font-mono); background:rgba(63,224,208,0.08); border:1px solid rgba(63,224,208,0.25); padding:6px 12px; border-radius:999px; margin-bottom:20px; letter-spacing:.04em;}
.beginner-wrap input[type=text]{font-size:17px; padding:14px 16px;}
.beginner-wrap .btn{font-size:15px; padding:11px 20px;}
.b-chip{ display:inline-block; padding:8px 14px; border-radius:10px; font-size:17px; margin:5px 6px 5px 0; background:rgba(79,141,255,0.1); border:1px solid rgba(79,141,255,0.3); }
.b-cta{ text-align:center; padding:40px 20px; }
.b-roadmap{display:flex; flex-direction:column; gap:14px; margin-top:20px; position:relative;}
.b-roadmap::before{content:""; position:absolute; left:22px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, var(--brand), rgba(242,118,10,0.08)); opacity:0; transform:scaleY(0); transform-origin:top; transition:opacity .5s ease, transform 1.1s cubic-bezier(.16,.8,.3,1);}
.b-roadmap.in::before{opacity:1; transform:scaleY(1);}
.b-module{position:relative; z-index:1;}
@keyframes chipPop{ from{opacity:0; transform:translateY(6px) scale(.9);} to{opacity:1; transform:translateY(0) scale(1);} }

.b-story-stage{text-align:center; padding:8px 0;}
.b-story-visual{min-height:210px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; margin:22px 0;}
.b-story-title{font-size:22px; margin-bottom:10px;}
.b-story-desc{color:var(--text-dim); font-size:17px; max-width:520px; margin:0 auto;}
.b-blob{width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px;
  font-family:var(--font-mono); font-weight:700; font-size:12px; color:#1a1206; animation:bBlobPop .45s cubic-bezier(.2,.9,.3,1) both; flex:none;}
.b-blob small{font-family:var(--font-body); font-weight:600; font-size:10.5px; opacity:.85;}
.b-blob.small{width:26px; height:26px; font-size:9px;}
.b-blob.big{width:84px; height:84px; font-size:15px;}
@keyframes bBlobPop{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
.b-big-text{font-size:clamp(20px,4vw,30px); font-weight:700; padding:22px 30px; border:2px dashed var(--brand); border-radius:20px; color:var(--text); max-width:92%; line-height:1.35;}
.b-story-arrow{font-size:26px; color:var(--brand); align-self:center;}
.b-shrink-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center;}
.b-shrink-group{display:flex; flex-wrap:wrap; gap:6px; max-width:160px; justify-content:center;}
.b-module{display:flex; gap:18px; padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt); align-items:flex-start;}
.b-module-num{font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--brand); flex:none; width:44px;}
.b-module h4{font-size:17.5px; margin-bottom:6px;}
.b-module p{margin-top:0; font-size:15.5px; color:var(--text-dim);}
.b-faq-item{border-top:1px solid var(--border); padding:18px 0; cursor:pointer;}
.b-faq-item:first-child{border-top:none; padding-top:6px;}
.b-faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:17.5px; font-weight:600;}
.b-faq-q .plus{font-family:var(--font-mono); color:var(--brand); font-size:22px; flex:none; transition:transform .3s ease;}
.b-faq-item.open .plus{transform:rotate(45deg);}
.b-faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease, margin-top .4s ease; color:var(--text-dim); font-size:15.5px; margin-top:0;}
.b-faq-item.open .b-faq-a{max-height:320px; margin-top:12px;}
.b-steps{list-style:none; padding:0; margin-top:18px;}
.b-steps li{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--border);}
.b-steps li:first-child{border-top:none;}
.b-steps .b-step-num{font-family:var(--font-mono); font-size:14px; color:var(--blue); font-weight:700; flex:none; width:26px; padding-top:2px;}
.b-steps b{display:block; margin-bottom:4px; font-size:17px;}
.b-steps span{color:var(--text-dim); font-size:16.5px;}

/* advanced coming soon */
.advanced-wrap{max-width:640px; margin:0 auto; padding:110px 24px; text-align:center; position:relative; z-index:1;}
.advanced-wrap .adv-icon{font-size:56px; margin-bottom:18px;}
.advanced-wrap h1{font-size:clamp(28px,4vw,38px); margin-bottom:14px;}
.advanced-wrap p{color:var(--text-dim); font-size:16px; margin-bottom:8px;}
.adv-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--purple); background:rgba(155,107,255,0.08); border:1px solid rgba(155,107,255,0.3); padding:6px 14px; border-radius:999px; margin-bottom:22px;}

/* pipeline stage — frameless 3D burst, straight onto the page */
.burst-overlay{ position:fixed; inset:0; z-index:110; background:rgba(2,3,7,0.88); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; overflow:hidden; }
.burst-overlay.open{opacity:1; pointer-events:auto;}
.burst-close{ position:fixed; top:22px; right:22px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.05); color:#fff; cursor:pointer; font-size:15px; z-index:3; transition:background .15s, transform .15s; }
.burst-close:hover{background:rgba(255,255,255,0.12); transform:scale(1.06);}
.burst-particles{position:absolute; inset:0; z-index:1; pointer-events:none;}
.burst-particle{ position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%; opacity:0; transform:translate(-50%,-50%); animation-name:burstFly; animation-timing-function:cubic-bezier(.15,.7,.3,1); animation-fill-mode:forwards; }
@keyframes burstFly{
  0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  70%{ opacity:.9; }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.15); }
}
.burst-content{ text-align:center; max-width:560px; width:100%; padding:24px; position:relative; z-index:2; transform:scale(.82) translateY(14px); opacity:0; transition:transform .55s cubic-bezier(.16,1.4,.32,1), opacity .4s ease; }
.burst-overlay.open .burst-content{transform:scale(1) translateY(0); opacity:1;}
.burst-idx{font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,0.5); margin-top:6px; letter-spacing:.08em;}
.burst-title{font-size:24px; color:#fff; margin:10px 0 14px;}
.burst-desc{color:rgba(255,255,255,0.72); font-size:15px; line-height:1.7; margin-bottom:26px;}
.burst-jump{ background:none; border:1px solid rgba(255,255,255,0.28); color:#fff; padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
.burst-jump:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5);}

/* Complete Pipeline recap — clean flow + detail panel (no boxes, no 3D) */
.pipeline-flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.pf-node{font-family:var(--font-mono); font-size:12.5px; padding:9px 15px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);}
.pf-node:hover{border-color:var(--brand); transform:translateY(-1px);}
.pf-node.active{background:var(--brand); border-color:transparent; color:#1a1206; font-weight:700;}
.pf-arrow{color:var(--text-faint); font-family:var(--font-mono); font-size:13px;}
.pipeline-detail{margin-top:24px; padding-top:20px; border-top:1px solid var(--border);}
.pipeline-detail-idx{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-bottom:8px; letter-spacing:.05em;}
.pipeline-detail h4{font-size:18px; margin-bottom:10px;}
.pipeline-detail p{color:var(--text-dim); font-size:14.5px; line-height:1.6; margin-bottom:16px;}

/* 3D matrix multiplication (Transformer Math) */
.mm3d-scene{ perspective:1200px; position:relative; min-height:280px; margin:14px 0 40px; }
.mm3d-scene::after{ content:""; position:absolute; top:50%; left:50%; width:160px; height:160px; margin:-80px; border-radius:50%;
  background:radial-gradient(circle, var(--brand) 0%, transparent 70%); opacity:0; pointer-events:none; z-index:5; }
.mm3d-scene.play::after{ animation:mm3dFlash .6s ease .45s; }
@keyframes mm3dFlash{ 0%{opacity:0;} 45%{opacity:.3;} 100%{opacity:0;} }
.mm3d-plane{ position:absolute; top:50%; left:50%; transition:transform 1.05s cubic-bezier(.4,0,.2,1), opacity .7s ease, z-index 0s .6s; transform-style:preserve-3d; }
.mm3d-left{ transform:translate(-50%,-50%) translateX(-132px) rotateY(26deg); opacity:1; z-index:2; }
.mm3d-right{ transform:translate(-50%,-50%) translateX(132px) rotateY(-26deg); opacity:1; z-index:2; }
.mm3d-result{ transform:translate(-50%,-50%) translateZ(-100px) scale(.55); opacity:0; z-index:1; }
.mm3d-scene.play .mm3d-left{ transform:translate(-50%,-50%) translateX(-52px) translateY(-16px) rotateY(16deg) scale(.74); opacity:.32; transition-duration:.7s; }
.mm3d-scene.play .mm3d-right{ transform:translate(-50%,-50%) translateX(52px) translateY(-16px) rotateY(-16deg) scale(.74); opacity:.32; transition-duration:.7s; }
.mm3d-scene.play .mm3d-result{ transform:translate(-50%,-50%) translateZ(0) scale(1); opacity:1; transition-delay:.55s; transition-duration:.6s; z-index:3; }
.mm3d-label{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:center; margin-bottom:8px; letter-spacing:.03em;}

/* cinema mode — full walkthrough */
.cinema-content{ text-align:center; max-width:640px; width:100%; padding:24px; position:relative; z-index:2; transform:scale(.92); opacity:0; transition:transform .5s cubic-bezier(.16,1.4,.32,1), opacity .4s ease; max-height:92vh; overflow-y:auto; }
.burst-overlay.open .cinema-content{transform:scale(1); opacity:1;}
.cinema-formula{color:#fff; font-size:15px; margin-bottom:18px; opacity:.9;}
.cinema-stage{min-height:230px; display:flex; align-items:center; justify-content:center;}
.cinema-stage .cell{color:#fff; border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.04);}
.cinema-stage .cell.masked{opacity:.3;}
.cinema-stage .field-label, .cinema-stage .mm3d-label{color:rgba(255,255,255,0.55);}
.cinema-stage .node{color:#fff; border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.06);}
.cinema-stage .arrow{color:rgba(255,255,255,0.4);}
.cinema-idx{font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,0.45); margin-top:10px;}
.cinema-title{font-size:21px; color:#fff; margin:8px 0 10px;}
.cinema-desc{color:rgba(255,255,255,0.72); font-size:14.5px; line-height:1.65; max-width:520px; margin:0 auto 20px;}
.cinema-progress{width:280px; height:4px; background:rgba(255,255,255,0.14); border-radius:4px; margin:0 auto 20px; overflow:hidden;}
.cinema-progress-fill{height:100%; background:var(--brand); width:0%; transition:width .3s ease;}
.cinema-controls{display:flex; gap:10px; justify-content:center;}
.cinema-controls .burst-jump{min-width:44px;}

/* ELI4 — three spinning 3D cubes, simplest possible explanation */
.eli4-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px;}
@media (max-width:760px){ .eli4-row{grid-template-columns:1fr; max-width:260px; margin-left:auto; margin-right:auto;} }
.eli4-cube-scene{ perspective:700px; height:170px; display:flex; align-items:center; justify-content:center; }
.eli4-cube{ position:relative; width:130px; height:130px; transform-style:preserve-3d; animation:eli4spin 9s linear infinite; }
@media (prefers-reduced-motion: reduce){ .eli4-cube{animation-play-state:paused;} }
.eli4-face{ position:absolute; width:130px; height:130px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  border-radius:18px; font-size:44px; border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(4px); }
.eli4-face span.eli4-word{font-family:var(--font-display); font-size:13px; font-weight:600; color:#fff;}
.eli4-f1{ transform:translateZ(65px); } .eli4-f2{ transform:rotateY(90deg) translateZ(65px); }
.eli4-f3{ transform:rotateY(180deg) translateZ(65px); } .eli4-f4{ transform:rotateY(-90deg) translateZ(65px); }
@keyframes eli4spin{ from{transform:rotateY(0deg);} to{transform:rotateY(360deg);} }
.eli4-card-title{font-family:var(--font-display); font-weight:600; font-size:17px; text-align:center; margin-top:14px;}
.eli4-card-sub{color:var(--text-dim); font-size:13.5px; text-align:center; margin-top:4px; line-height:1.5;}

/* Mechanistic interpretability — attention heatmap */
.attn-grid{display:inline-grid; gap:3px; background:var(--bg); padding:12px; border-radius:12px;}
.attn-cell{width:38px; height:38px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,0.85); position:relative;}
.attn-tok-row, .attn-tok-col{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; padding:2px 6px;}
.attn-tok-row{justify-content:flex-end; text-align:right;}
.attn-corner{width:38px;}

/* Mechanistic interpretability — 3D embedding ring */
.embed3d-scene{ height:340px; display:flex; align-items:center; justify-content:center; perspective:900px; }
.embed3d-ring{ position:relative; width:180px; height:180px; transform-style:preserve-3d; animation:embed3dspin 22s linear infinite; }
@media (prefers-reduced-motion: reduce){ .embed3d-ring{animation-play-state:paused;} }
.embed3d-card{ position:absolute; top:50%; left:50%; width:110px; height:46px; margin:-23px 0 0 -55px;
  display:flex; align-items:center; justify-content:center; border-radius:10px; font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
@keyframes embed3dspin{ from{transform:rotateY(0deg) rotateX(8deg);} to{transform:rotateY(360deg) rotateX(8deg);} }

/* Living Network — showcase */
.showcase-card{ background:linear-gradient(180deg, rgba(79,141,255,0.06), rgba(155,107,255,0.03) 40%, transparent); border:1px solid var(--border-strong); border-radius:18px; padding:26px; margin-top:22px; position:relative; overflow:hidden; transition:box-shadow .4s ease; }
.showcase-ribbon{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--amber); background:rgba(245,185,66,0.08); border:1px solid rgba(245,185,66,0.3); padding:5px 12px; border-radius:999px; margin-bottom:16px; }
.showcase-ribbon .dot2{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulse 1.6s infinite;}
.lna-canvas-wrap{ background:#05070d; border:1px solid rgba(255,255,255,0.1); border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px rgba(79,141,255,0.08) inset, 0 30px 70px rgba(0,0,0,.35); transition:box-shadow .3s; }
.lna-canvas-wrap canvas{ width:100%; height:auto; display:block; cursor:text; }
.lna-controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center;}
.lna-controls input[type=text]{flex:1; min-width:220px;}
.lna-readout{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin-top:12px;}
.lna-energy-bar{width:120px; height:6px; border-radius:4px; background:var(--surface-strong); overflow:hidden; border:1px solid var(--border);}
.lna-energy-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan)); width:0%; transition:width .2s;}

/* Learning hub, glossary, bookmarks */
.progress-pill{cursor:pointer; transition:border-color .2s, background .2s;}
.progress-pill:hover{border-color:var(--brand); background:var(--surface-strong);}
.panel-overlay{position:fixed; inset:0; z-index:100; background:rgba(3,4,8,0.62); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px 16px; opacity:0; pointer-events:none; transition:opacity .15s;}
.panel-overlay.open{opacity:1; pointer-events:auto;}
.panel-box{width:min(580px,94vw); max-height:84vh; overflow:hidden; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:18px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow); transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease);}
.panel-box:hover{background:var(--surface-sky); border-color:rgba(135,206,250,0.42); box-shadow:var(--glass-hover-shadow);}
.panel-box.wide{width:min(720px,94vw);}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); flex:none;}
.panel-head h3{font-size:16px;}
.panel-tabs{display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border); flex:none; flex-wrap:wrap;}
.panel-tab{border:none; background:transparent; color:var(--text-faint); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:999px; cursor:pointer;}
.panel-tab.active{background:var(--surface-strong); color:var(--text); box-shadow:0 0 0 1px var(--border-strong) inset;}
.panel-body{padding:14px 16px 18px; overflow-y:auto; flex:1;}
.panel-close{border:none; background:var(--surface); border:1px solid var(--border-strong); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--text); font-size:14px;}
.hub-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
@media (max-width:520px){ .hub-stats{grid-template-columns:1fr;} }
.hub-stat{border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface); text-align:center;}
.hub-stat b{display:block; font-family:var(--font-display); font-size:22px; margin-top:4px;}
.hub-stat span{font-size:11px; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:.04em;}
.hub-note-label{font-size:11.5px; font-family:var(--font-mono); color:var(--text-faint); margin-bottom:8px;}
.hub-notes{width:100%; min-height:88px; resize:vertical; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; color:var(--text); padding:12px; font-family:var(--font-body); font-size:14px;}
.hub-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.side-bookmark{border:none; background:none; color:var(--text-faint); cursor:pointer; font-size:13px; padding:0 4px; opacity:0; transition:opacity .15s, color .15s; flex:none;}
.side-link:hover .side-bookmark, .side-bookmark.on{opacity:1;}
.side-bookmark.on{color:var(--amber);}
.gloss-item{padding:12px; border:1px solid var(--border); border-radius:10px; margin-top:8px; background:var(--surface);}
.gloss-item b{font-family:var(--font-display); font-size:14.5px;}
.gloss-item p{color:var(--text-dim); font-size:13.5px; margin-top:6px; line-height:1.55;}
.gloss-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.prompt-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
@media (max-width:700px){ .prompt-grid{grid-template-columns:1fr;} }
.prompt-col{border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface);}
.prompt-col.bad{border-color:rgba(239,92,110,0.35);}
.prompt-col.good{border-color:rgba(61,220,151,0.35);}
.prompt-col h4{font-size:14px; margin-bottom:8px;}
.prompt-sample{font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); line-height:1.55; white-space:pre-wrap; min-height:72px;}
.prompt-score-row{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; color:var(--text-faint);}
.prompt-score-track{flex:1; height:6px; border-radius:4px; background:var(--surface-strong); overflow:hidden;}
.prompt-score-fill{height:100%; border-radius:4px; transition:width .35s ease;}
.flash-card{ perspective:900px; min-height:160px; cursor:pointer; margin-top:14px;}
.flash-inner{ position:relative; width:100%; min-height:160px; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.flash-card.flipped .flash-inner{transform:rotateY(180deg);}
.flash-face{ position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--border-strong); border-radius:14px; padding:22px; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--surface); }
.flash-back{transform:rotateY(180deg); color:var(--text-dim); font-size:14.5px; line-height:1.6;}
.flash-term{font-family:var(--font-display); font-size:22px;}
.adv-preview-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; text-align:left;}
@media (max-width:760px){ .adv-preview-grid{grid-template-columns:1fr;} }
.adv-preview-card{border:1px solid var(--border-strong); border-radius:14px; padding:18px; background:var(--surface);}
.adv-layout .main{padding-bottom:80px;}
#mech-attn-mix .av-qb{ min-width:72px; }
#mech-attn-mix .av-qb.active{ border-color:#EF9F27; background:var(--surface-strong); color:var(--text); }
#mech-attn-mix .av-row{ display:grid; grid-template-columns:56px minmax(0,1fr) 150px; gap:12px; align-items:center; margin:0 0 10px; }
#mech-attn-mix .av-bar{ height:10px; border-radius:5px; background:var(--surface-strong); overflow:hidden; }
#mech-attn-mix .av-bar>div{ height:100%; border-radius:5px; width:0; }
#mech-attn-mix .av-cell{ height:40px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; border:1px solid var(--border); }
#mech-attn-mix .av-grid{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:24px; align-items:start; margin:0 0 1rem; }
@media (max-width:760px){ #mech-attn-mix .av-grid{ grid-template-columns:1fr; } #mech-attn-mix .av-row{ grid-template-columns:48px minmax(0,1fr) 120px; } }
#mech-attn-mix .av-caption{ font-size:13px; color:var(--text-dim); margin:0 0 6px; }
#mech-attn-mix .av-svg-label{ fill:var(--text-dim); font-size:12px; font-family:var(--font-body); }
#mech-attn-mix .av-svg-out{ fill:var(--text); font-size:13px; font-weight:600; font-family:var(--font-body); }
#mech-residual .rs-stage{ overflow-x:auto; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; }
#mech-residual .rs-stage>div{ min-width:760px; }
#mech-residual canvas{ display:block; width:100%; }
#mech-residual .rs-ctl{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:14px 0; }
#mech-residual .rs-ctl label{ display:flex; flex-direction:column; font-size:13px; color:var(--text-dim); gap:2px; min-width:220px; flex:1; }
#mech-residual .rs-ctl b{ color:var(--text); }
#mech-residual .rs-row{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
#mech-residual .rs-row .btn.on{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
#mech-residual .rs-cap{ font-weight:600; margin:12px 0 4px; min-height:3.2em; max-width:90ch; color:var(--text); }
#mech-residual .rs-info{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:8px; padding:12px 14px; margin-top:10px; overflow-x:auto; font-size:14px; color:var(--text-dim); }
#mech-residual .showcase-card{ overflow:visible; }
#mech-residual .rs-ctl input[type=range]{ width:100%; }
#mech-residual .rs-ctl select{ min-width:88px; }

/* Minimal chrome: logo + language + theme + level bar only */
body.chrome-minimal{ position:relative; }
body.chrome-minimal #menuBtn,
body.chrome-minimal .brand-sub,
body.chrome-minimal #cmdkBtn,
body.chrome-minimal #glossaryBtn,
body.chrome-minimal #bookmarksBtn,
body.chrome-minimal #progressPill,
body.chrome-minimal #globalNavShell,
body.chrome-minimal #mentorFab,
body.chrome-minimal #view-home,
body.chrome-minimal #view-learn{display:none !important;}
body.chrome-minimal .level-bar{ top:var(--chrome-header-h, 56px); z-index:44; }
body.chrome-minimal .sidebar,
body.chrome-minimal #sidebar-advanced,
body.chrome-minimal #sidebar-mech{ top:var(--chrome-stack-h, 108px); height:calc(100vh - var(--chrome-stack-h, 108px)); transform:translateX(0); }
body.chrome-minimal .overlay{ top:var(--chrome-stack-h, 108px); }
@media (max-width:900px){
  body.chrome-minimal .sidebar,
  body.chrome-minimal #sidebar-advanced,
  body.chrome-minimal #sidebar-mech{transform:translateX(-100%);}
  body.chrome-minimal .layout .main,
  body.chrome-minimal .adv-layout .main{padding-left:0;}
}
@media (min-width:901px){
  body.chrome-minimal .layout .main,
  body.chrome-minimal .adv-layout .main{padding-left:270px;}
}
body.chrome-minimal .topbar .brand{gap:0;}
body.chrome-minimal .topbar .brand{ display:flex; align-items:center; gap:10px; }
body.chrome-minimal .topbar .brand-tagline{ font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--text-faint); border-left:1px solid var(--border-strong); padding-left:12px; }
@media (max-width:640px){ body.chrome-minimal .topbar .brand-tagline{ display:none; } }
body.chrome-minimal .top-actions{gap:8px;}
.site-brand{ margin:0; font-size:15px; }
.site-tagline{ color:var(--text-faint); font-weight:500; margin-left:8px; font-size:13px; }
.site-lang-nav a{ color:var(--text-dim); font-size:13px; text-decoration:none; }
.site-lang-nav a[aria-current="page"]{ color:var(--brand-light); font-weight:600; }
#document-main{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:18px 24px 12px; border-bottom:1px solid var(--border); }
#document-main h1{ font-size:clamp(22px,3.5vw,30px); margin:0 0 10px; line-height:1.25; }
#document-main h2{ font-size:17px; margin:16px 0 8px; }
#document-main h3{ font-size:15px; margin:12px 0 6px; }
#document-main p, #document-main li{ color:var(--text-dim); font-size:14.5px; line-height:1.65; }
#document-main.seo-offscreen{ position:absolute !important; left:0; top:0; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0 !important; max-width:none; z-index:-1; pointer-events:none; }
.site-lede{ margin:0 0 8px; }
.adv-code{font-family:var(--font-mono); font-size:13px; line-height:1.55; padding:14px 16px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--border); color:var(--text); margin-top:12px; white-space:pre-wrap;}

/* Mentor, achievements, tour */
[data-theme="light"] .mentor-fab{box-shadow:0 12px 40px rgba(77,166,255,0.35);}
[data-theme="light"] .mentor-fab:hover{box-shadow:0 14px 44px rgba(77,166,255,0.45);}
[data-theme="light"] .progress-pill:hover{border-color:var(--brand);}
[data-theme="light"] .pf-node.active{color:#fff;}
[data-theme="light"] .roadmap-progress i{background:linear-gradient(90deg,var(--brand),var(--sky-deep));}
[data-theme="light"] .nn-lab-badge{border-color:rgba(77,166,255,0.45); color:var(--brand);}
[data-theme="light"] .nn-lab-tab.active,[data-theme="light"] .nn-lab-tab:focus-visible{border-color:rgba(77,166,255,0.55); color:var(--brand); box-shadow:0 0 0 2px rgba(77,166,255,0.22);}
[data-theme="light"] section.step{border-top-color:rgba(30,60,90,0.08);}
.mentor-fab{ position:fixed; bottom:24px; right:24px; z-index:65; width:56px; height:56px; border-radius:50%; border:none; background:linear-gradient(135deg, var(--brand), var(--brand-light)); color:#1a1206; font-size:22px; cursor:pointer; box-shadow:0 12px 40px rgba(242,118,10,0.45); transition:transform .2s; }
.mentor-fab:hover{transform:scale(1.06);}
.mentor-panel{ position:fixed; bottom:92px; right:24px; z-index:65; width:min(360px, calc(100vw - 32px)); max-height:420px; background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:16px; display:none; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.mentor-panel.open{display:flex;}
.mentor-head{padding:12px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.mentor-log{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; max-height:240px;}
.mentor-msg{padding:10px 12px; border-radius:10px; font-size:13.5px; line-height:1.5;}
.mentor-msg.user{background:var(--surface-strong); align-self:flex-end; max-width:90%;}
.mentor-msg.bot{background:rgba(79,141,255,0.12); border:1px solid rgba(79,141,255,0.25); align-self:flex-start;}
.mentor-foot{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border);}
.mentor-foot input{flex:1;}
.mej7-toast{ position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; z-index:90; background:var(--bg-alt); border:1px solid var(--brand); border-radius:12px; padding:12px 18px; box-shadow:0 16px 40px rgba(0,0,0,.5); transition:opacity .3s, transform .3s; text-align:center; max-width:90vw; }
.mej7-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.mej7-toast b{display:block; font-size:12px; color:var(--brand); margin-bottom:4px;}
.ach-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:14px;}
.ach-card{border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center; opacity:.45; filter:grayscale(1); transition:opacity .3s, filter .3s, transform .2s;}
.ach-card.on{opacity:1; filter:none; border-color:rgba(242,118,10,0.45); background:rgba(242,118,10,0.06);}
.ach-icon{font-size:28px; margin-bottom:6px;}
.ach-card p{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
.tour-overlay{position:fixed; inset:0; z-index:110; background:rgba(0,0,0,0.55); display:none; align-items:flex-end; justify-content:center; padding:24px;}
.tour-overlay.open{display:flex;}
.tour-box{max-width:520px; width:100%; background:var(--bg-alt); border:1px solid var(--brand); border-radius:16px; padding:20px;}
.tm-year{font-family:var(--font-display); font-size:42px; color:var(--brand); margin:10px 0;}
#journeyCanvas{width:100%; height:auto; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt);}

/* Phase 2 — global nav + learning views */
.global-nav{ position:sticky; top:109px; z-index:43; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(5,7,13,0.75) 100%);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  overflow-x:auto; transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease); }
.global-nav:hover{ background:linear-gradient(180deg, rgba(135,206,250,0.1) 0%, rgba(5,7,13,0.78) 100%); border-bottom-color:rgba(135,206,250,0.3); }
.global-nav-inner{ max-width:1080px; margin:0 auto; display:flex; gap:6px; padding:8px 16px; min-width:max-content; }
.global-nav-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; background:transparent; color:var(--text-dim); font-family:var(--font-body); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .4s var(--glass-ease), color .35s ease, border-color .4s var(--glass-ease), box-shadow .4s var(--glass-ease); }
.global-nav-btn:hover{ background:var(--surface-sky); color:var(--text); border-color:rgba(135,206,250,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2); }
.global-nav-btn.active{ background:linear-gradient(135deg, rgba(242,118,10,0.2), rgba(242,118,10,0.08)); border-color:rgba(242,118,10,0.45); color:var(--brand-light); }
[data-theme="light"] .global-nav{background:linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.58) 100%);}
[data-theme="light"] .global-nav:hover{background:linear-gradient(180deg, rgba(135,206,250,0.18) 0%, rgba(255,255,255,0.75) 100%);}
[data-theme="light"] .global-nav-btn.active{ background:linear-gradient(135deg, rgba(135,206,250,0.42), rgba(77,166,255,0.22)); border-color:rgba(77,166,255,0.55); color:var(--sky-deep); }
.gn-icon{font-size:13px; opacity:.85;}
.platform-view{ padding:28px 0 60px; }
.home-hero{ max-width:860px; margin:0 auto; padding:0 24px; text-align:center; }
.home-hero h1{font-size:clamp(28px,4.5vw,44px); margin:12px 0;}
.home-hero .sub{color:var(--text-dim); font-size:16px; line-height:1.65; max-width:640px; margin:0 auto 22px;}
.see-inside-card{ text-align:left; margin-top:28px; border:1px solid var(--border-strong); border-radius:16px; padding:22px; background:linear-gradient(135deg, rgba(242,118,10,0.08), rgba(79,141,255,0.06)); }
[data-theme="light"] .see-inside-card{background:linear-gradient(135deg, rgba(135,206,250,0.12), rgba(77,166,255,0.06));}
.see-inside-flow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.learn-wrap{ max-width:1080px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .learn-wrap{grid-template-columns:1fr;} }
.roadmap-list{ display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; padding-right:4px; }
.roadmap-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer;
  backdrop-filter:blur(14px); transition:border-color .4s var(--glass-ease), background .4s var(--glass-ease), transform .15s, box-shadow .4s var(--glass-ease); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.roadmap-row:hover:not(:disabled){ border-color:rgba(135,206,250,0.5); background:var(--surface-sky); transform:translateX(2px); box-shadow:var(--glass-hover-shadow); }
.roadmap-row.sel{ border-color:rgba(135,206,250,0.55); background:var(--surface-sky); }
.roadmap-row.done .rm-check{color:var(--green);}
.roadmap-row.locked{ opacity:.45; cursor:not-allowed; }
.rm-num{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); width:28px;}
.rm-body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.rm-body b{font-size:13.5px;}
.rm-meta{font-size:11px; color:var(--text-faint); font-family:var(--font-mono);}
.roadmap-detail{ border:1px solid var(--border-strong); border-radius:16px; padding:18px; background:var(--surface); min-height:280px;
  backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); transition:background .45s var(--glass-ease), border-color .45s var(--glass-ease), box-shadow .45s var(--glass-ease); }
.roadmap-detail:hover{background:var(--surface-sky); border-color:rgba(135,206,250,0.4); box-shadow:var(--glass-hover-shadow);}
.layer-toggle{ display:inline-flex; gap:4px; border:1px solid var(--border-strong); border-radius:999px; padding:3px; background:var(--surface); margin:12px 0; }
.layer-btn{ border:none; background:transparent; color:var(--text-faint); font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer; }
.layer-btn.active{ background:var(--brand); color:#1a1206; }
.layer-body{ color:var(--text); font-size:15px; line-height:1.65; margin:12px 0; }
.roadmap-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.roadmap-progress{ height:6px; border-radius:4px; background:var(--surface-strong); overflow:hidden; margin-top:10px; }
.roadmap-progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--blue)); width:0%; transition:width .35s; }
/* multi-page navigation, lesson pages, home page */
a.lang-btn, a.level-btn, a.brand-link{text-decoration:none;}
a.brand-link{display:inline-flex; align-items:center;}
.lesson-head{padding:32px 0 0;}
.lesson-crumbs{font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono);}
.lesson-crumbs a{color:var(--text-dim); text-decoration:none;}
.lesson-crumbs a:hover{color:var(--brand-light);}
.lesson-head h1{font-size:clamp(30px,4.6vw,46px); line-height:1.1; margin:12px 0 8px;}
.lesson-meta{color:var(--text-faint); font-size:13.5px;}
.lesson-pager{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:28px; padding-bottom:12px;}
.lesson-pager .btn{text-decoration:none;}
.lesson-related{padding-top:12px; padding-bottom:72px;}
.lesson-related h2{font-size:18px; margin-bottom:10px;}
.lesson-related ul{list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px;}
.lesson-related a{color:var(--brand-light);}
.home-page{max-width:1080px; margin:0 auto; padding:56px 24px 88px; position:relative; z-index:1;}
.home-intro h1{font-size:clamp(32px,5vw,54px); line-height:1.08; letter-spacing:-0.02em; margin:16px 0 16px; max-width:860px;}
.home-intro .sub{font-size:17px; color:var(--text-dim); max-width:720px;}
.home-intro .ctas{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap;}
.home-intro .ctas .btn{text-decoration:none;}
.home-page h2{font-size:clamp(22px,3vw,28px); margin:56px 0 16px;}
.home-levels{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;}
.home-level{display:block; text-decoration:none; color:inherit; margin-top:0; padding:20px;}
.home-level:hover{border-color:var(--brand);}
.home-level b{display:block; font-family:var(--font-display); font-size:18px; margin-bottom:8px;}
.home-level p{color:var(--text-dim); font-size:14px; line-height:1.55;}
.home-lessons{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px;}
.home-lessons h3{font-size:16px; margin-bottom:8px;}
.home-lessons ul, .home-guides{list-style:none; padding:0; margin:0;}
.home-lessons li, .home-guides li{margin:6px 0; font-size:14.5px;}
.home-page section a:not(.btn):not(.card){color:var(--brand-light); text-decoration:none;}
.home-page section a:not(.btn):not(.card):hover{text-decoration:underline;}
.home-faq h3{font-size:16px; margin:20px 0 6px;}
.home-faq p{color:var(--text-dim); max-width:760px;}

.detail-more{margin-top:28px;}
.detail-more h3{font-size:20px; margin:0 0 12px;}
.mech-read{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.mech-read .btn{text-decoration:none; font-size:13px; padding:8px 12px;}
.mech-doc{padding:8px 0 28px;}
.mech-doc h2{font-size:clamp(22px,3vw,30px); margin:40px 0 12px; scroll-margin-top:84px;}
.mech-doc h3{font-size:18px; margin:22px 0 8px;}
.mech-doc h4{font-size:16px; margin:16px 0 6px;}
.mech-doc p{margin:0 0 12px; max-width:78ch;}
.mech-doc ul, .mech-doc ol{margin:0 0 14px; padding-left:1.25em; max-width:78ch;}
.mech-doc li{margin:0 0 8px;}
.mech-doc a{color:var(--sky-deep);}
.mech-doc .table-scroll{overflow-x:auto; margin:0 0 16px; max-width:100%;}
.mech-doc table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px;}
.mech-doc th, .mech-doc td{border-bottom:1px solid var(--border); text-align:left; padding:8px 10px; vertical-align:top;}
.mech-doc caption{text-align:left; font-weight:600; margin:0 0 8px;}
.detail-body{font-size:15.5px; line-height:1.7; color:var(--text-dim); max-width:760px;}
.detail-body p{margin:0 0 12px;}
.detail-body ul,.detail-body ol{margin:0 0 12px; padding-left:1.3em;}
.detail-body li{margin:5px 0;}
.detail-body strong{color:var(--text);}