/* ============================================================
   几何实验室 / 勾股定理
   Shell: warm paper. Stage: deep green glass. Accent: one green.
   ============================================================ */

:root{
  --paper:#F1EEE6;
  --surface:#FBFAF6;
  --surface-2:#F6F4EC;
  --ink:#16211D;
  --ink-soft:#3C4943;
  --muted:#79857C;
  --muted-2:#A0A99E;
  --line:#DFDACD;
  --line-soft:#E9E5D9;
  --accent:#2C6A5B;
  --accent-deep:#225448;
  --accent-soft:#E4EEE8;
  --stage:#0c1a18;
  --on-stage:#E9F2ED;
  --on-stage-soft:#A9C0B7;
  --gold:#E2C48A;

  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","Source Han Serif SC",serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  background-image:radial-gradient(900px 440px at 78% -10%,#FBFAF4 0%,rgba(251,250,244,0) 72%);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
[hidden]{display:none!important}

.micro{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.micro.on-dark{color:#6E988B}

.shell{max-width:1580px;margin:0 auto;padding:0 clamp(16px,2.4vw,36px)}

/* ── top bar ───────────────────────────────────────────── */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px}
.brand svg{
  width:27px;height:27px;flex:none;
  fill:none;stroke:#C4523F;stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round;
}
.brand-txt{font-size:14.5px;font-weight:600;letter-spacing:.08em;line-height:1.1}
.brand-txt small{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:7.5px;font-weight:400;
  letter-spacing:.19em;color:var(--muted-2);
}
.topbar-note{
  margin:0 0 0 22px;padding-left:22px;
  border-left:1px solid var(--line);
  font-size:12px;color:var(--muted);letter-spacing:.02em;
}
.tag{
  margin-left:auto;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;white-space:nowrap;
}

/* ── workspace grid ────────────────────────────────────── */
.workspace{
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 320px;
  gap:clamp(16px,1.9vw,28px);
  padding:20px 0 26px;
  align-items:start;
}

/* ── left rail ─────────────────────────────────────────── */
.rail{position:sticky;top:16px}
.rail-head .micro{margin-bottom:10px}
.rail-head h1{
  margin:0;
  font-family:var(--serif);
  font-size:25px;
  font-weight:500;
  line-height:1.42;
  letter-spacing:.01em;
}
.rail-head h1 em{font-style:normal;color:var(--accent);display:inline-block}
.rail-head p{
  margin:10px 0 0;
  font-size:11.5px;line-height:1.75;color:var(--muted);
  max-width:21ch;
}

#methods{display:flex;flex-direction:column;gap:2px;margin-top:20px}
#methods button{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:8px 9px 8px 7px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  text-align:left;
  color:var(--ink-soft);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.m-idx{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.06em;color:var(--muted-2);
  padding-top:3px;transition:color .16s ease;
}
.m-txt{min-width:0}
.m-txt strong{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em;line-height:1.4}
.m-txt em{
  display:block;font-style:normal;
  font-size:11px;line-height:1.45;color:var(--muted);
  margin-top:2px;
}
#methods button:hover{background:var(--surface-2)}
#methods button.active{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:inset 2px 0 0 var(--accent),0 1px 2px rgba(30,40,35,.04);
}
#methods button.active .m-idx{color:var(--accent)}
#methods button.active strong{color:var(--ink)}
#methods button.active em{color:var(--ink-soft)}

.rail-foot{
  display:flex;align-items:center;gap:9px;
  margin:18px 0 0;padding-top:15px;
  border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted-2);line-height:1.5;
}
.mini-pieces{
  width:18px;height:18px;flex:none;border-radius:3px;
  background:
    linear-gradient(#F6D5DC,#F6D5DC) 0 0/8px 8px no-repeat,
    linear-gradient(#DDF3E8,#DDF3E8) 10px 0/8px 8px no-repeat,
    linear-gradient(#E3EAFB,#E3EAFB) 0 10px/8px 8px no-repeat,
    linear-gradient(#FFF3D4,#FFF3D4) 10px 10px/8px 8px no-repeat;
}

/* ── center studio ─────────────────────────────────────── */
.studio{min-width:0;display:flex;flex-direction:column;gap:12px}

.stage-wrap{
  scroll-margin-top:12px;
  background:var(--stage);
  border:1px solid #16312C;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 30px 64px -38px rgba(10,26,23,.62),0 1px 2px rgba(10,26,23,.18);
}
.stage-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 18px 13px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.stage-bar h2{
  margin:4px 0 0;
  font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.45;
  color:var(--on-stage);
}
.n-badge{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(226,196,138,.3);
  background:rgba(226,196,138,.07);
  color:var(--gold);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  white-space:nowrap;
}
.n-badge b{font-size:11.5px;font-weight:500;color:#F1DDB6;letter-spacing:.04em}

.stage{
  position:relative;
  width:100%;
  aspect-ratio:860/700;
  /* leaves room for header, stage chrome, player and narration */
  max-height:clamp(380px,calc(100dvh - 506px),660px);
  background:#0c1a18;
}
#geometry{display:block;width:100%;height:100%}

.stage-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 18px 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.legend{display:flex;gap:13px;flex-wrap:wrap;flex:none}
.legend span{display:flex;align-items:center;gap:5px}
.legend em{font-style:normal;font-size:10.5px;color:#C6D8D0;letter-spacing:.02em}
.swatch{
  width:9px;height:9px;border-radius:2px;display:block;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.swatch.red{background:linear-gradient(145deg,#FFF4F6,#E7A0B0)}
.swatch.green{background:linear-gradient(145deg,#F3FFF8,#8ECFB0)}
.swatch.blue{background:linear-gradient(145deg,#F4F7FF,#A3B6EE)}
.swatch.yellow{background:linear-gradient(145deg,#FFFAF0,#EFCF86)}
#caption{
  margin:0;
  font-size:11px;line-height:1.55;color:#9FB8AF;
  text-align:right;max-width:46ch;
}

/* ── player ────────────────────────────────────────────── */
.player{
  flex:none;
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(30,40,35,.04);
}
.transport{display:flex;align-items:center;gap:6px;flex:none}
.tbtn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:background .15s,border-color .15s,color .15s;
}
.tbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tbtn:hover{background:var(--accent-soft);border-color:#B6CFC3;color:var(--accent-deep)}

.tplay{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 15px 0 12px;border-radius:999px;
  background:var(--accent);color:#F3F8F4;
  font-size:12.5px;font-weight:500;letter-spacing:.02em;
  box-shadow:0 6px 16px -8px rgba(44,106,91,.9);
  transition:background .15s,box-shadow .15s;
}
.tplay:hover{background:var(--accent-deep)}
.picon{
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.17);
  display:grid;place-items:center;flex:none;
}
#play-icon{
  display:block;font-size:0;
  width:0;height:0;
  border-style:solid;
  border-width:4.5px 0 4.5px 7.5px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}
#play[data-playing="true"] #play-icon{
  width:7px;height:9px;margin-left:0;
  border:0;border-radius:1px;
  background:#fff;
  box-shadow:4px 0 0 #fff;
}

#steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1;min-width:0}
#steps button{
  position:relative;
  display:flex;flex-direction:column;gap:2px;
  padding:7px 9px 8px;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--surface-2);
  text-align:left;
  font-size:11px;line-height:1.35;color:#6B7770;
  transition:background .15s,border-color .15s,color .15s;
  overflow:hidden;
}
#steps button>span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--muted-2);transition:color .15s;
}
#steps button:hover{background:#EFF2E8;color:var(--ink-soft)}
#steps button.active{
  background:var(--accent-soft);
  border-color:#BCD4C8;
  color:var(--accent-deep);
  font-weight:500;
}
#steps button.active>span{color:var(--accent)}
#steps button.active::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);
}
.hint{display:flex;gap:3px;flex:none;padding-right:4px}
.hint kbd{
  font-family:var(--mono);font-size:9.5px;
  color:var(--muted-2);
  border:1px solid var(--line);border-radius:4px;
  padding:2px 4px;line-height:1;background:#fff;
}

/* ── narration ─────────────────────────────────────────── */
.narration{
  flex:none;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 232px;
  gap:20px;
  padding:18px 20px 19px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.narr-idx{display:flex;flex-direction:column;align-items:flex-start;padding-top:2px}
.narr-idx b{
  font-family:var(--serif);font-size:32px;font-weight:400;
  line-height:1;color:#C6CCBE;letter-spacing:-.01em;
  font-variant-numeric:lining-nums;
}
.narration.is-speaking .narr-idx b{color:var(--accent)}
.narr-idx i{font-family:var(--mono);font-size:9px;font-style:normal;color:var(--muted-2);margin-top:6px;letter-spacing:.06em}
.narr-body{min-width:0}
.narr-body h2{
  margin:5px 0 8px;
  font-size:18px;font-weight:600;letter-spacing:.01em;line-height:1.4;
}
#lesson-text{
  margin:0;
  font-size:13.5px;line-height:1.82;color:var(--ink-soft);
  max-width:60ch;
}
.lesson-formula{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  margin-top:10px;
}
.lesson-formula .eq{
  font-family:var(--serif);font-size:18px;letter-spacing:.01em;
  color:var(--accent);
}
.lesson-formula .eq-num{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:-.01em;
}
.narr-side{
  display:flex;flex-direction:column;gap:10px;
  padding-left:20px;
  border-left:1px solid var(--line-soft);
}
.identity{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:end;gap:8px;
}
.identity>div{min-width:0}
.id-lab{
  display:block;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:var(--muted-2);margin-bottom:3px;
}
.identity b{
  display:block;
  font-family:var(--serif);font-size:21px;font-weight:400;
  color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.identity>i{
  font-family:var(--serif);font-style:normal;font-size:15px;
  color:var(--muted-2);padding-bottom:3px;
}
#id-note{font-size:10.5px;line-height:1.6;color:var(--muted)}
#next-step{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;
  padding:9px 12px;border-radius:var(--r-sm);
  background:var(--accent);color:#F3F8F4;
  font-size:12px;font-weight:500;letter-spacing:.01em;
  transition:background .15s;
}
#next-step:hover{background:var(--accent-deep)}
#next-step span{transition:transform .2s ease}
#next-step:hover span{transform:translateX(3px)}

/* ── right inspector ───────────────────────────────────── */
.inspector{
  position:sticky;top:16px;
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 16px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.inspector::-webkit-scrollbar{width:6px}
.inspector::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.insp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.insp-head h2{margin:4px 0 0;font-size:14px;font-weight:600;letter-spacing:.02em}
#reset{
  font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:4px 9px;background:#fff;
  transition:color .15s,border-color .15s;
}
#reset:hover{color:var(--accent);border-color:#B6CFC3}

.field{margin-bottom:13px}
.field-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:7px;
  font-size:11.5px;color:var(--muted);
}
.field-head i{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft)}
.field-head output{
  font-family:var(--serif);font-size:19px;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:16px;margin:0;
  background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,#DDE3D8,#E7EAE0);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-5.5px;
  border-radius:50%;background:#fff;
  border:1.6px solid var(--accent);
  box-shadow:0 1px 3px rgba(20,40,35,.22);
  transition:transform .12s ease;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#DDE3D8}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:#fff;
  border:1.6px solid var(--accent);box-shadow:0 1px 3px rgba(20,40,35,.22);
}

.presets-wrap{display:flex;align-items:center;gap:9px;margin:2px 0 15px}
.presets-wrap .micro{flex:none;margin:0}
#presets{display:flex;gap:5px;flex:1}
#presets button{
  flex:1;min-width:0;
  font-family:var(--mono);font-size:10.5px;
  padding:5px 0;border-radius:6px;
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);
  transition:background .15s,border-color .15s,color .15s;
}
#presets button:hover{background:#EFF2E8;color:var(--ink-soft)}
#presets button.active{
  background:var(--accent-soft);border-color:#AFCBBC;color:var(--accent-deep);
}

.comparison{border-top:1px solid var(--line-soft);padding-top:13px}
.comparison-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.comparison-title span{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.comparison-title small{font-size:9.5px;color:var(--muted-2);white-space:nowrap}
.length-row{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;align-items:center;margin:7px 0}
.length-row>span{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);letter-spacing:.02em}
.track{height:7px;border-radius:4px;background:#EAEDE2;display:flex;overflow:hidden}
.length{height:100%}
.a-part{background:linear-gradient(90deg,#F8E2B2,#EFCF86);transition:width .18s ease}
.b-part{background:linear-gradient(90deg,#D8E1F8,#A3B6EE);transition:width .18s ease}
.c-part{width:100%;background:linear-gradient(90deg,#C6E6D6,#8FCDB0)}
#bar-note{margin:9px 0 0;font-size:10.5px;line-height:1.65;color:var(--muted)}

.ledger{border-top:1px solid var(--line-soft);margin-top:13px;padding-top:11px}
.metric{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0;font-size:11.5px;color:var(--muted)}
.metric output{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.metric.sum{
  border-top:1px solid var(--line-soft);
  margin-top:5px;padding-top:8px;color:var(--ink);font-weight:500;
}
.metric.sum output{font-size:16px;font-weight:600;color:var(--accent)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0 8px}
.split>div{
  min-width:0;padding:7px 8px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:7px;
}
.split span{display:block;font-family:var(--mono);font-size:8.5px;color:var(--muted-2);margin-bottom:3px}
.split b{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.error{display:flex;align-items:baseline;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.error b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent)}

.side-note{
  margin:13px 0 0;padding-left:10px;
  border-left:2px solid var(--line);
  font-size:10.5px;line-height:1.7;color:var(--muted);
}

.math-note{border-top:1px solid var(--line-soft);margin-top:13px;padding-top:10px}
.math-note summary{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;color:var(--ink-soft);cursor:pointer;
  list-style:none;
}
.math-note summary::-webkit-details-marker{display:none}
.math-note summary::after{
  content:"+";font-family:var(--mono);font-size:13px;color:var(--muted-2);
  line-height:1;transition:transform .18s ease;
}
.math-note[open] summary::after{content:"–"}
.math-note p{margin:9px 0 0;font-size:10px;line-height:1.85;color:var(--muted)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1180px){
  .workspace{grid-template-columns:minmax(0,1fr) 296px}
  .rail{grid-column:1/-1;position:static}
  .rail-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .rail-head .micro{width:100%;margin-bottom:0}
  .rail-head h1{font-size:20px}
  .rail-head p{display:none}
  #methods{
    flex-direction:row;gap:6px;margin-top:12px;
    overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;
  }
  #methods::-webkit-scrollbar{display:none}
  #methods button{
    flex:0 0 auto;
    grid-template-columns:auto auto;
    gap:7px;align-items:center;
    padding:6px 12px;border-radius:999px;
    border-color:var(--line);background:var(--surface);
  }
  #methods button.active{box-shadow:0 1px 2px rgba(30,40,35,.05)}
  .m-txt strong{font-size:12.5px}
  .m-txt em{display:none}
  .m-idx{padding-top:0;font-size:9px}
  .rail-foot{display:none}
}

@media (max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr);gap:14px;min-height:0}
  .studio{order:1;height:auto}
  .stage-wrap{flex:none}
  .stage{flex:none;aspect-ratio:860/700;max-height:min(72vh,620px);min-height:0}
  .inspector{order:2;position:static;max-height:none;overflow:visible}
  .narration{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .narr-side{
    grid-column:1/-1;
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:12px 16px;
    padding:14px 0 0;border-left:0;border-top:1px solid var(--line-soft);
  }
  .narr-side>.micro{display:none}
  .identity{grid-column:1;grid-row:1;justify-self:start;grid-template-columns:auto auto auto;gap:10px}
  #next-step{grid-column:2;grid-row:1;margin-top:0;white-space:nowrap}
  #id-note{grid-column:1/-1;grid-row:2}
  .hint{display:none}
  #steps button{font-size:10.5px}
}

@media (max-width:680px){
  .topbar{height:58px;gap:12px}
  .topbar-note{display:none}
  .workspace{padding:16px 0 24px}
  .stage-bar{padding:10px 14px 11px}
  .stage-bar h2{font-size:12.5px}
  .stage-foot{flex-direction:column;align-items:flex-start;gap:8px;padding:9px 14px 11px}
  #caption{text-align:left;max-width:none}
  .player{flex-wrap:wrap;gap:8px;padding:8px}
  .transport{flex:1}
  .tplay{flex:1;justify-content:center}
  #steps{order:3;width:100%;flex:none}
  #steps button{padding:6px 7px 7px;font-size:10px}
  .narration{grid-template-columns:1fr;padding:15px 15px 16px;gap:12px}
  .narr-idx{flex-direction:row;align-items:baseline;gap:6px}
  .narr-idx b{font-size:24px}
  .narr-idx i{margin-top:0}
  .narr-side{gap:10px 12px}
  #next-step{grid-column:1/-1;grid-row:3;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}