@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg: #0A0F1E;
  --bg-soft: #0E1526;
  --surface: #121B32;
  --surface-2: #182342;
  --border: #223055;
  --text: #E8EEF9;
  --text-muted: #8B99B8;
  --text-dim: #5C6B8C;

  --eng: #5EEAD4;
  --eng-dark: #0F766E;
  --eng-glow: rgba(94, 234, 212, .18);

  --prod: #FBBF24;
  --prod-dark: #B45309;
  --prod-glow: rgba(251, 191, 36, .18);

  --good: #4ADE80;
  --bad: #F87171;

  --radius: 14px;
  --radius-sm: 8px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(94,234,212,.07), transparent 40%),
    radial-gradient(circle at 88% 18%, rgba(251,191,36,.06), transparent 42%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--eng); outline-offset: 2px; }

h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; letter-spacing: -.01em; }
p{ margin: 0 0 .9em; }
p:last-child{ margin-bottom: 0; }

.mono{ font-family: var(--font-mono); }


.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 22px; }

.topbar{
  position: sticky; top:0; z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(10,15,30,.82);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 1080px; margin: 0 auto; padding: 12px 22px;
  display:flex; align-items:center; justify-content: space-between; gap: 16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:700; font-size: 1.05rem;
  cursor:pointer; user-select:none;
  background:none; border:none; color: var(--text); padding:0;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--eng), var(--prod));
  box-shadow: 0 0 12px rgba(94,234,212,.6);
}

.hud{ display:flex; align-items:center; gap: 14px; }
.hud-stat{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted);
  background: var(--surface); border:1px solid var(--border);
  padding: 6px 10px; border-radius: 999px;
}
.hud-stat b{ color: var(--text); font-weight: 700; }
.hud-stat .ic{ font-size: .95em; }


.hero{ padding: 64px 0 34px; }
.eyebrow{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width: 26px; height:1px; background: var(--text-dim); display:inline-block; }

.hero h1{
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; font-weight: 700;
  max-width: 15ch;
}
.hero h1 .accent-eng{ color: var(--eng); }
.hero h1 .accent-prod{ color: var(--prod); }

.hero-sub{
  margin-top: 18px; color: var(--text-muted); max-width: 56ch; font-size: 1.02rem;
}

.hero-stats{
  margin-top: 30px; display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow:hidden;
}
.hero-stat{ background: var(--surface); padding: 16px 18px; }
.hero-stat .n{ font-family: var(--font-mono); font-size: 1.5rem; font-weight:700; }
.hero-stat .l{ font-size: .74rem; color: var(--text-muted); margin-top:2px; text-transform: uppercase; letter-spacing:.04em; }

@media (max-width: 620px){
  .hero-stats{ grid-template-columns: repeat(2,1fr); }
}


.tracks{ padding: 26px 0 80px; }
.track{ margin-top: 54px; }
.track-head{
  display:flex; align-items: baseline; gap: 14px; margin-bottom: 22px;
  flex-wrap: wrap;
}
.track-head h2{ font-size: 1.5rem; }
.track-head .glyph{
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  padding: 3px 9px; border-radius: 6px; border: 1px solid currentColor;
}
.track[data-track="eng"] .track-head .glyph{ color: var(--eng); }
.track[data-track="prod"] .track-head .glyph{ color: var(--prod); }
.track-tagline{ color: var(--text-muted); font-size: .92rem; }
.track-progress-label{
  margin-left:auto; font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted);
}

.track-bar{
  height:6px; border-radius: 4px; background: var(--surface-2); overflow:hidden; margin-bottom: 28px;
  border: 1px solid var(--border);
}
.track-bar-fill{ height:100%; border-radius: 4px; transition: width .5s ease; }
.track[data-track="eng"] .track-bar-fill{ background: linear-gradient(90deg, var(--eng-dark), var(--eng)); }
.track[data-track="prod"] .track-bar-fill{ background: linear-gradient(90deg, var(--prod-dark), var(--prod)); }

.path{
  position: relative;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 820px){ .path{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .path{ grid-template-columns: 1fr; } }

.node{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  cursor: pointer;
  text-align:left;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; gap: 10px;
  min-height: 132px;
}
.node:hover{ transform: translateY(-3px); }
.track[data-track="eng"] .node:hover{ border-color: var(--eng); box-shadow: 0 8px 26px var(--eng-glow); }
.track[data-track="prod"] .node:hover{ border-color: var(--prod); box-shadow: 0 8px 26px var(--prod-glow); }

.node-top{ display:flex; align-items:center; justify-content: space-between; }
.node-num{
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim);
}
.node-status{ font-size: 1.05rem; line-height:1; }
.node-title{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height:1.28; }
.node-score{
  margin-top: auto; font-family: var(--font-mono); font-size: .78rem;
  display:flex; align-items:center; gap:6px; color: var(--text-muted);
}
.node-score .stars{ letter-spacing: 1px; }
.node-score .stars .on{ color: var(--prod); }
.track[data-track="eng"] .node-score .stars .on{ color: var(--eng); }
.node-score .stars .off{ color: var(--border); }

.node.locked{ opacity: .5; cursor: not-allowed; }
.node.locked:hover{ transform:none; box-shadow:none; }


.overlay{
  position: fixed; inset:0; background: rgba(6,9,18,.7);
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition: opacity .22s ease;
  z-index: 60;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.panel{
  position: fixed; top:0; right:0; height: 100%;
  width: min(720px, 100%);
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 61;
  display:flex; flex-direction:column;
}
.panel.open{ transform: translateX(0); }

.panel-head{
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display:flex; align-items:flex-start; gap:14px;
  position:sticky; top:0; background: var(--bg-soft); z-index:2;
}
.panel-head .info{ flex:1; }
.panel-eyebrow{ font-family: var(--font-mono); font-size:.75rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.panel-title{ font-size: 1.3rem; margin-top: 4px; }
.panel-close{
  background: var(--surface); border:1px solid var(--border); color: var(--text-muted);
  width: 34px; height:34px; border-radius: 8px; cursor:pointer; font-size: 1rem; line-height:1;
  flex-shrink:0;
}
.panel-close:hover{ color: var(--text); border-color: var(--text-dim); }

.panel-body{ padding: 22px; overflow-y:auto; flex:1; }

.panel-tabs{ display:flex; gap: 6px; margin-bottom: 20px; }
.tab-btn{
  font-family: var(--font-mono); font-size: .82rem;
  background: var(--surface); border:1px solid var(--border); color: var(--text-muted);
  padding: 8px 14px; border-radius: 999px; cursor:pointer;
}
.tab-btn.active{ color: var(--bg); font-weight: 700; }
.track[data-track="eng"] ~ .overlay .tab-btn.active,
.tab-active-eng{ background: var(--eng); border-color: var(--eng); color:#06231F; }
.tab-active-prod{ background: var(--prod); border-color: var(--prod); color:#3A2604; }

.summary-content{ color: var(--text); font-size: .98rem; }
.summary-content strong{ color:#fff; }
.summary-content em{ color: var(--text-muted); font-style: normal; border-bottom: 1px dashed var(--text-dim); }
.summary-content ul{ padding-left: 1.2em; margin: 0 0 .9em; }
.summary-content li{ margin-bottom: .4em; }
.summary-content code{
  font-family: var(--font-mono); background: var(--surface-2); padding: .12em .4em; border-radius: 5px; font-size: .88em;
}


.quiz-progress{
  display:flex; align-items:center; gap:10px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted);
}
.quiz-progress-bar{ flex:1; height: 6px; border-radius: 4px; background: var(--surface-2); overflow:hidden; }
.quiz-progress-fill{ height:100%; background: var(--good); transition: width .3s ease; }

.q-card{ }
.q-text{ font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; font-family: var(--font-display); }
.q-options{ display:flex; flex-direction:column; gap: 10px; }
.q-option{
  text-align:left; padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  cursor:pointer; font-family: var(--font-body); font-size: .95rem;
  display:flex; align-items:center; gap: 10px; transition: border-color .15s, background .15s;
}
.q-option:hover:not(:disabled){ border-color: var(--text-dim); }
.q-option .letter{
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim);
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.q-option.correct{ border-color: var(--good); background: rgba(74,222,128,.09); }
.q-option.correct .letter{ border-color: var(--good); color: var(--good); }
.q-option.wrong{ border-color: var(--bad); background: rgba(248,113,113,.09); }
.q-option.wrong .letter{ border-color: var(--bad); color: var(--bad); }
.q-option:disabled{ cursor:default; }

.q-explain{
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: .9rem;
  color: var(--text-muted); display:none;
}
.q-explain.show{ display:block; }
.q-explain b{ color: var(--text); }

.q-next{
  margin-top: 18px; display:none;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  background: var(--text); color: var(--bg);
  border:none; padding: 11px 20px; border-radius: 999px; cursor:pointer;
}
.q-next.show{ display:inline-flex; align-items:center; gap:6px; }
.q-next:hover{ opacity:.88; }

.quiz-result{ text-align:center; padding: 20px 0; }
.quiz-result .score{
  font-family: var(--font-mono); font-size: 3rem; font-weight:700; margin-bottom: 6px;
}
.quiz-result .msg{ color: var(--text-muted); margin-bottom: 22px; }
.quiz-result .stars-big{ font-size: 1.8rem; letter-spacing: 6px; margin-bottom: 22px; }
.quiz-result .stars-big .on{ color: var(--prod); }
.quiz-result .stars-big .off{ color: var(--border); }
.result-actions{ display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; }
.btn{
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  padding: 10px 18px; border-radius: 999px; cursor:pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.btn:hover{ border-color: var(--text-dim); }
.btn.primary{ background: var(--eng); border-color: var(--eng); color:#06231F; }
.btn.primary:hover{ opacity:.9; }

.toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 999px; font-family: var(--font-mono); font-size: .85rem;
  z-index: 90; opacity:0; pointer-events:none; transition: all .25s ease;
  display:flex; align-items:center; gap:8px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast .ic{ color: var(--good); }


.site-footer{
  border-top: 1px solid var(--border); padding: 30px 0 60px;
  color: var(--text-dim); font-size: .82rem; text-align:center;
}
.site-footer a{ color: var(--text-muted); text-decoration: underline; text-underline-offset:3px; }

/* scrollbar (webkit) */
.panel-body::-webkit-scrollbar{ width: 8px; }
.panel-body::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; }