/* style.css — all styling */
:root {
  color-scheme: dark;
  --bg:#0c141c;
  --surface:#13212d;
  --surface-2:#192b39;
  --stage:#0c1a25;
  --text:#eef5fa;
  --muted:#9cb0bf;
  --line:rgba(210,230,242,.13);
  --grid:rgba(150,180,210,.14);
  --mint:#62d9b2;
  --mint-dark:#143d3a;
  --gold:#f3bd62;
  --shadow:0 18px 45px rgba(0,0,0,.24);
}
@media (prefers-color-scheme:light) {
  :root {
    color-scheme:light;
    --bg:#edf3f5; --surface:#fff; --surface-2:#f3f7f8; --stage:#e8f1f3;
    --text:#13232d; --muted:#5d7180; --line:rgba(20,45,60,.14);
    --grid:rgba(50,90,105,.12); --mint-dark:#d8f5eb;
    --shadow:0 14px 35px rgba(36,70,83,.12);
  }
}
html[data-theme="dark"] {
  color-scheme:dark; --bg:#0c141c; --surface:#13212d; --surface-2:#192b39;
  --stage:#0c1a25; --text:#eef5fa; --muted:#9cb0bf; --line:rgba(210,230,242,.13);
  --grid:rgba(150,180,210,.14); --mint-dark:#143d3a; --shadow:0 18px 45px rgba(0,0,0,.24);
}
html[data-theme="light"] {
  color-scheme:light; --bg:#edf3f5; --surface:#fff; --surface-2:#f3f7f8;
  --stage:#e8f1f3; --text:#13232d; --muted:#5d7180; --line:rgba(20,45,60,.14);
  --grid:rgba(50,90,105,.12); --mint-dark:#d8f5eb; --shadow:0 14px 35px rgba(36,70,83,.12);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; width:100%; min-height:100%; }
body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,select,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.app-shell { width:min(1240px,100%); min-height:100dvh; margin:auto; padding:clamp(20px,4vw,46px) clamp(16px,4vw,48px) calc(76px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; gap:13px; min-width:0; }
.brand-mark { width:34px; height:34px; position:relative; flex:none; }
.brand-mark span { position:absolute; width:23px; height:23px; border:3px solid var(--mint); border-radius:50%; }
.brand-mark span:nth-child(1){left:0;top:8px;opacity:.5}
.brand-mark span:nth-child(2){left:7px;top:3px;border-color:var(--gold)}
.brand-mark span:nth-child(3){left:13px;top:9px;opacity:.8}
.eyebrow,.section-label,.kicker { margin:0; font-size:10px; letter-spacing:.15em; font-weight:800; color:var(--muted); }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin:1px 0 0; font-size:clamp(19px,3vw,24px); letter-spacing:-.03em; }
.progress-chip { margin-left:auto; min-width:110px; padding:8px 11px; border:1px solid var(--line); border-radius:20px; color:var(--muted); font-size:11px; text-align:center; }
.progress-chip span:first-child { display:inline-block; height:5px; width:0; max-width:40px; margin-right:5px; border-radius:4px; background:var(--mint); vertical-align:middle; transition:width .2s; }
.intro { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:clamp(32px,6vw,70px) 0 30px; }
.intro h2 { max-width:690px; margin:8px 0 12px; font-size:clamp(29px,5vw,57px); line-height:1.04; letter-spacing:-.055em; }
.intro-copy { max-width:560px; margin:0; color:var(--muted); font-size:clamp(14px,2vw,17px); line-height:1.55; }
.formula-card { width:230px; flex:none; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); transform:rotate(2deg); }
.formula-card span,.formula-card small { display:block; color:var(--muted); font-size:11px; }
.formula-card strong { display:block; margin:6px 0; color:var(--gold); font-size:20px; letter-spacing:-.04em; }
.formula-card small { line-height:1.4; }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tab { min-height:44px; padding:10px 17px; border:0; background:transparent; color:var(--muted); border-bottom:3px solid transparent; font-weight:700; }
.tab.active { color:var(--text); border-color:var(--mint); }
.view { display:none; }
.active-view { display:block; animation:appear .25s ease both; }
@keyframes appear { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

/* lab selector */
.lab-selector { display:flex; gap:6px; overflow-x:auto; margin-bottom:20px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.lab-tab { min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:20px; background:transparent; color:var(--muted); font-weight:700; font-size:13px; white-space:nowrap; transition:.18s; }
.lab-tab.active { color:var(--text); border-color:var(--mint); background:var(--mint-dark); }
.lab-tab:hover { filter:brightness(1.1); }

/* lab panes */
.lab-pane { display:none; }
.lab-pane.active-pane { display:block; animation:appear .25s ease both; }
.hidden-pane { display:none; }

.lab-grid,.guide-layout,.quiz-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:18px; }
.panel,.lesson-card,.quiz-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.panel { padding:clamp(17px,3vw,25px); }
.panel-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:17px; }
.panel-heading h3,.lesson-card h3 { margin:5px 0 0; font-size:19px; letter-spacing:-.03em; }
.live-badge { color:var(--mint); border:1px solid rgba(98,217,178,.3); border-radius:20px; padding:6px 9px; font-size:10px; white-space:nowrap; }
.live-badge i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(98,217,178,.12); }
.canvas-wrap { position:relative; height:clamp(240px,31vw,350px); overflow:hidden; border-radius:12px; }
.canvas-wrap canvas { display:block; width:100%; height:100%; }
.canvas-caption { position:absolute; left:13px; bottom:11px; padding:6px 9px; border-radius:7px; background:rgba(8,18,26,.75); color:#d8e9ef; font-size:11px; }
.readouts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.readouts div { padding:11px 12px; border-radius:10px; background:var(--surface-2); }
.readouts span { display:block; color:var(--muted); font-size:11px; }
.readouts strong { display:block; margin-top:3px; font-size:17px; }
.readouts .accent-readout strong { color:var(--mint); }
.field-label,.slider-line label { font-size:12px; color:var(--muted); font-weight:700; }
.control { width:100%; min-height:46px; margin:7px 0 19px; padding:0 11px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; }
.slider-group { margin:17px 0; }
.slider-line { display:flex; justify-content:space-between; margin-bottom:8px; }
output { color:var(--gold); font-size:12px; font-weight:800; }
input[type=range] { width:100%; accent-color:var(--mint); min-height:32px; }
.insight-box { min-height:108px; margin-top:21px; padding:14px; border-left:3px solid var(--mint); border-radius:0 10px 10px 0; background:var(--mint-dark); }
.insight-box strong { font-size:13px; }
.insight-box p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.secondary-button,.primary-button { min-height:46px; border-radius:9px; padding:10px 16px; font-weight:800; }
.secondary-button { width:100%; margin-top:16px; color:var(--text); background:transparent; border:1px solid var(--line); }
.primary-button { color:#10221f; background:var(--mint); border:0; box-shadow:0 6px 14px rgba(98,217,178,.18); }
.secondary-button:hover,.primary-button:hover,.answer:hover,.lab-tab:hover { transform:translateY(-1px); filter:brightness(1.06); }
.concept-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.mini-card { min-height:145px; padding:19px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.number { color:var(--gold); font:800 11px ui-monospace,monospace; }
.mini-card h4 { margin:14px 0 6px; font-size:17px; }
.mini-card p { color:var(--muted); font-size:12px; line-height:1.45; margin-bottom:12px; }
.mini-card b { color:var(--mint); font-size:12px; }
.lesson-list { display:grid; gap:14px; }
.lesson-card { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:22px; }
.lesson-card.selected { border-color:rgba(98,217,178,.5); }
.lesson-index { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--mint-dark); color:var(--mint); font-weight:900; }
.lesson-card p:not(.section-label) { color:var(--muted); line-height:1.55; font-size:14px; }
.lesson-card em { color:var(--gold); font-style:normal; }
.example,.relativity-note { display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; background:var(--surface-2); color:var(--text); font-size:12px; }
.arrow-icon { width:32px; height:3px; background:var(--mint); position:relative; flex:none; }
.arrow-icon:after { content:""; position:absolute; right:-1px; top:-5px; border-left:9px solid var(--mint); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.equation-row { display:flex; gap:8px; flex-wrap:wrap; }
.equation-row b { padding:9px 11px; border-radius:7px; background:var(--surface-2); color:var(--mint); font-size:12px; }
.relativity-note { display:block; border-left:3px solid var(--gold); }
.glossary h3 { margin:7px 0 20px; }
dl { margin:0 0 25px; }
dl div { padding:13px 0; border-top:1px solid var(--line); }
dt { color:var(--gold); font-weight:800; font-size:13px; }
dd { color:var(--muted); font-size:12px; line-height:1.45; margin:5px 0 0; }
.glossary .primary-button { width:100%; }
.quiz-hero { padding:24px 12px; }
.quiz-hero h2 { margin:9px 0; font-size:clamp(30px,5vw,48px); letter-spacing:-.05em; }
.quiz-hero p:not(.section-label) { color:var(--muted); line-height:1.5; }
.score-display { display:inline-flex; flex-direction:column; margin-top:20px; padding:14px 22px; border:1px solid var(--line); border-radius:12px; }
.score-display span { color:var(--mint); font-size:32px; font-weight:900; }
.score-display small { color:var(--muted); font-size:11px; }
.quiz-card { padding:clamp(20px,4vw,36px); align-self:start; }
.question-tag { color:var(--gold); font-size:11px; letter-spacing:.14em; font-weight:900; }
.quiz-card h3 { font-size:clamp(19px,3vw,27px); line-height:1.25; margin:14px 0 22px; }
.answers { display:grid; gap:9px; }
.answer { min-height:48px; text-align:left; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); transition:.18s; }
.answer.correct { border-color:var(--mint); background:var(--mint-dark); }
.answer:disabled { cursor:default; opacity:.88; }
.quiz-feedback { margin:16px 0; padding:13px; border-radius:9px; background:var(--surface-2); color:var(--muted); font-size:13px; line-height:1.5; }
#nextQuestion { width:100%; margin-top:4px; }
.footer { display:flex; justify-content:space-between; gap:14px; padding-top:31px; color:var(--muted); font-size:11px; }
.hidden-view { display:none; }
@media (max-width:760px) {
  .intro { display:block; padding-top:35px; }
  .formula-card { width:100%; margin-top:22px; transform:none; }
  .lab-grid,.guide-layout,.quiz-layout { grid-template-columns:1fr; }
  .concept-strip { grid-template-columns:1fr; }
  .mini-card { min-height:auto; }
  .quiz-hero { padding:8px 0; }
}
@media (max-width:420px) {
  .app-shell { padding-left:13px; padding-right:13px; }
  .progress-chip { min-width:92px; font-size:10px; }
  .tabs { gap:0; }
  .tab { flex:1; padding-left:5px; padding-right:5px; font-size:12px; }
  .panel { padding:15px; }
  .readouts strong { font-size:14px; }
  .readouts div { padding:9px 8px; }
  .lesson-card { padding:16px; grid-template-columns:34px 1fr; gap:10px; }
  .lesson-index { width:31px; height:31px; }
  .footer { flex-direction:column; }
  .lab-tab { padding:7px 11px; font-size:12px; }
}