:root{
  --bg:#0d1520;
  --panel:#131f2d;
  --panel2:#172536;
  --ink:#edf3ff;
  --muted:#a7b6ca;
  --line:#31455d;
  --blue:#79a7ff;
  --blue2:#4e7dd5;
  --gold:#ffbd24;
  --orange:#ff8656;
  --green:#4fd18b;
  --red:#ff7676;
  --shadow:0 18px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input{font:inherit}
button{touch-action:manipulation}
.app{max-width:920px;margin:0 auto;padding:22px 20px 64px}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:4px 0 18px}
.kicker,.phase{font-size:.78rem;letter-spacing:.16em;font-weight:900;color:var(--orange)}
h1{font-size:clamp(2rem,5vw,3.6rem);margin:.15rem 0 .45rem;letter-spacing:-.045em;line-height:1}
h2{font-size:clamp(1.55rem,4vw,2.4rem);letter-spacing:-.035em;margin:.35rem 0 .35rem}
.sub,.lesson-head p{color:var(--muted);font-size:1.05rem;line-height:1.5;margin:0}
.quiet-btn,.tab,.action,.secondary,.reveal,.choice-btn{
  border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--panel2);
  min-height:46px;padding:10px 15px;font-weight:800;cursor:pointer
}
.quiet-btn{white-space:nowrap;background:transparent}
.tabs{display:flex;gap:9px;overflow-x:auto;padding:2px 0 18px;scrollbar-width:thin}
.tab{border-radius:999px;white-space:nowrap;background:transparent}
.tab.active{background:var(--blue);color:#08111c;border-color:var(--blue)}
.panel{display:none}
.panel.active{display:block}
.lesson-head{padding:14px 0 16px}
.stage{
  border:1px solid var(--line);background:linear-gradient(180deg,#152231,#101a27);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow)
}
.stage svg{display:block;width:100%;height:auto;aspect-ratio:720/410}
.ground,.wall{stroke:#e7eef7;stroke-width:3}
.faint{opacity:.13}
.guide{stroke:var(--blue);stroke-width:4;stroke-dasharray:10 8}
.right-angle{fill:none;stroke:var(--blue);stroke-width:4}
.pencil{stroke:var(--gold);stroke-width:26;stroke-linecap:round}
.eraser{fill:#ff8aa1;stroke:#ffd6dd;stroke-width:2}
.tip{fill:#f3e4ca}
.measure{fill:var(--ink);font:800 20px ui-monospace,SFMono-Regular,Menlo,monospace}
.measure.blue{fill:var(--blue)}
.measure.gold{fill:var(--gold)}
.control-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
.control-stack{display:grid;gap:14px;margin:18px 0}
.slider-label{display:grid;grid-template-columns:120px minmax(170px,1fr);gap:14px;align-items:center;flex:1;min-width:260px;font-weight:850}
input[type=range]{width:100%;accent-color:var(--blue)}
.action{background:var(--blue);border-color:var(--blue);color:#07111e}
.secondary{background:var(--panel)}
.reveal{width:100%;margin-top:16px;background:transparent;border-style:dashed}
.compare-card,.rule-card,.steps-card,.word-card,.equation-strip{
  border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:18px;margin-top:18px
}
.barrow{display:grid;grid-template-columns:95px 1fr 86px;gap:14px;align-items:center;margin:10px 0}
.bartrack{height:20px;border-radius:8px;background:#223246;overflow:hidden}
.bar{height:100%;border-radius:8px}
.goldbar{background:var(--gold)}
.bluebar{background:var(--blue)}
.rule-card p{font-size:1.06rem;line-height:1.55;margin:.55rem 0}
.small{color:var(--muted);font-size:.94rem!important}
.hidden{display:none}
.tile-stage svg{aspect-ratio:720/430}
.tile{fill:#26415c;stroke:#4f6b88;stroke-width:1.4}
.tile.edge{fill:#335d86}
.notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.notice-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.tiny{display:block;color:var(--muted);font-size:.78rem;margin-bottom:4px}
.notice-grid strong{font-size:1.65rem}
.formula{font:800 1.1rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rect-fill{fill:#1c334b;stroke:var(--blue);stroke-width:3}
.cutline{stroke:#f4f7fb;stroke-width:3;stroke-dasharray:9 7}
.tri-one{fill:rgba(121,167,255,.38);stroke:var(--blue);stroke-width:3;transition:transform .55s ease}
.tri-two{fill:rgba(255,134,86,.32);stroke:var(--orange);stroke-width:3;transition:transform .55s ease}
.big-number{fill:#fff;font:900 34px ui-monospace,SFMono-Regular,Menlo,monospace}
.equation-strip{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center}
.equation-strip span{color:var(--muted)}
.equation-strip strong{font:850 1.15rem ui-monospace,SFMono-Regular,Menlo,monospace}
.build-stage{padding:18px;min-height:360px;display:grid;place-items:center}
.unit-grid{
  display:grid;gap:2px;align-content:start;justify-content:start;
  max-width:100%;max-height:330px;overflow:hidden
}
.unit{
  width:24px;height:24px;border-radius:3px;background:#315173;border:1px solid #52769b
}
.area-readout{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:14px 16px;font:800 1.2rem ui-monospace,SFMono-Regular,Menlo,monospace
}
.feedback{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--panel2);color:var(--muted)}
.feedback.success{color:#d9ffea;border:1px solid #2e8157;background:#163524}
.answer-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.answer-row input{
  width:110px;min-height:46px;background:#0e1925;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:1rem
}
.ghost-rect{fill:none;stroke:#6b8098;stroke-width:3;stroke-dasharray:10 8}
.floor-shape{fill:#29445e;stroke:var(--blue);stroke-width:4}
.missing-corner{fill:rgba(255,189,36,.35);stroke:var(--gold);stroke-width:4;transition:opacity .3s ease}
.hidden-svg{opacity:0}
.steps-card{display:grid;gap:10px}
.step-line{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start}
.step-line span,.step-no{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#24374c;color:var(--blue);font-weight:900
}
.step-line p{margin:.25rem 0;line-height:1.4}
.problem{font-size:1.15rem;line-height:1.55;margin-top:0}
.length-bars{padding:10px 0 18px}
.length-row{display:grid;grid-template-columns:70px minmax(150px,1fr) 42px;gap:10px;align-items:center;margin:10px 0;color:var(--muted)}
.length{height:18px;border-radius:7px;background:var(--blue)}
.length.short{width:67%}
.difference{color:var(--orange);font-size:.88rem;margin-left:80px}
.finish-step{
  border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px;
  display:grid;grid-template-columns:42px 1fr;gap:10px;opacity:.46
}
.finish-step.active{opacity:1;background:#16283a}
.finish-step.done{opacity:1;border-color:#2e8157}
.finish-step p{margin:.15rem 0 .5rem}
.choice-row{display:flex;gap:10px;flex-wrap:wrap}
.choice-btn.selected{background:var(--blue);color:#07111e;border-color:var(--blue)}
.rule-card.always{display:block}
@media(max-width:640px){
  .app{padding:16px 14px 46px}
  .topbar{align-items:flex-end}
  .quiet-btn{padding:8px 11px;min-height:42px}
  .slider-label{grid-template-columns:92px 1fr;min-width:100%}
  .barrow{grid-template-columns:76px 1fr 72px;gap:9px}
  .notice-grid{grid-template-columns:1fr 1fr 1fr}
  .unit{width:18px;height:18px}
  .build-stage{min-height:300px}
  .equation-strip{grid-template-columns:1fr}
  .difference{margin-left:0;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}