:root{
  --accent:#367c93;
  --accent-dark:#245b6d;
  --accent-soft:#eaf4f7;
  --accent-pale:#f4f9fb;
  --ink:#17262c;
  --muted:#68777d;
  --line:#dbe7eb;
  --warm:#b96d2c;
  --warm-soft:#fff3e8;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif}
button,select,input{font:inherit}
button,.module{cursor:pointer}
.app{display:grid;grid-template-columns:242px minmax(520px,1fr) 340px;height:100svh;min-height:680px;background:#fff}
.left-panel{display:flex;min-width:0;min-height:0;flex-direction:column;border-right:1px solid var(--line);background:#fff}
.brand-block{padding:18px 16px 15px;border-bottom:1px solid var(--line)}
.site-brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:12px;font-weight:900;text-decoration:none}
.site-brand img{width:38px;height:38px;border-radius:50%;object-fit:contain}
.back{display:inline-flex;margin-top:10px;padding:6px 9px;border:1px solid #c7dce3;border-radius:9px;color:var(--accent-dark);background:#fff;text-decoration:none;font-size:9px;font-weight:850}
.back:hover{background:var(--accent-soft)}
.kicker{margin:16px 0 5px;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.13em}
h1{margin:0;font:750 26px/1.15 Georgia,"Songti SC",serif}
.intro{margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.6}
.module-list{min-height:0;overflow:auto;padding:8px}
.chapter-label{padding:8px 7px 4px;color:#87949a;font-size:8px;font-weight:900;letter-spacing:.08em}
.module{display:grid;width:100%;grid-template-columns:39px 1fr;gap:9px;align-items:center;margin:3px 0;padding:8px;border:1px solid transparent;border-radius:12px;color:var(--ink);background:transparent;text-align:left;transition:.2s ease}
.module:hover{border-color:#d8e7eb;background:#f8fbfc}
.module.active{border-color:#b9d4de;background:var(--accent-soft);box-shadow:0 8px 18px rgba(54,124,147,.08)}
.module-glyph{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;color:var(--accent-dark);background:#dfeff4;font:900 10px/1 Georgia,"Songti SC",serif}
.module strong{display:block;font-size:11px;line-height:1.35}
.module small{display:block;margin-top:2px;color:#7d8b90;font-size:8px}
.source-note{margin:0;padding:10px 14px;border-top:1px solid var(--line);color:#89969a;font-size:8px;line-height:1.55}
.visual-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#fff}
.visual-stage canvas{position:absolute;inset:0;width:100%;height:100%;background:#fff;touch-action:none}
.stage-head{position:absolute;z-index:3;top:18px;left:20px;right:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;pointer-events:none}
.stage-title{max-width:min(560px,76%);padding:11px 14px;border:1px solid rgba(205,225,232,.96);border-radius:15px;background:rgba(255,255,255,.93);box-shadow:0 12px 28px rgba(38,91,109,.08);backdrop-filter:blur(12px)}
.eyebrow{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.09em}
.stage-title h2{margin:4px 0 3px;font:750 23px/1.2 Georgia,"Songti SC",serif}
.stage-title p{margin:0;color:var(--muted);font-size:9px}
.counter{padding:7px 10px;border:1px solid #cfe0e6;border-radius:99px;color:var(--accent-dark);background:rgba(255,255,255,.94);font-size:9px;font-weight:900}
.phase-strip{position:absolute;z-index:3;left:50%;top:102px;display:flex;gap:5px;padding:5px;border:1px solid #d8e7ec;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(38,91,109,.06);transform:translateX(-50%)}
.step{min-width:92px;padding:7px 9px;border-radius:8px;color:#7d8b90;text-align:center;font-size:8px;font-weight:850;transition:.2s}
.step.active{color:#fff;background:var(--accent)}
.view-key{position:absolute;z-index:3;right:17px;bottom:116px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;padding:8px 10px;border:1px solid #dbe8ed;border-radius:11px;background:rgba(255,255,255,.94);color:#6d7c81;font-size:8px;box-shadow:0 8px 20px rgba(38,91,109,.06)}
.view-key span{display:flex;align-items:center;gap:4px}.view-key i{width:9px;height:9px;border-radius:50%}.apparatus-dot{background:#d68d4d}.process-dot{background:var(--accent)}
.transport{position:absolute;z-index:4;left:17px;right:17px;bottom:17px;display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto;gap:9px;align-items:center;padding:10px 12px;border:1px solid #d6e6eb;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 18px 40px rgba(38,91,109,.11);backdrop-filter:blur(15px)}
.play{width:40px;height:40px;border:0;border-radius:12px;color:#fff;background:var(--accent);font-weight:900}.play:hover{background:var(--accent-dark)}
.timeline{min-width:0}.timeline-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;color:#718087;font-size:8px;font-weight:750}.timeline-meta span:first-child{color:var(--accent-dark)}
input[type=range]{display:block;width:100%;accent-color:var(--accent)}
#speed,.reset{height:34px;border:1px solid #cfdee3;border-radius:9px;background:#fff;color:#53676e;font-size:9px;font-weight:800}#speed{padding:0 7px}.reset{padding:0 11px}
.detail-panel{min-width:0;overflow:auto;border-left:1px solid var(--line);padding:18px 16px 26px;background:#fff}
.detail-head{padding:2px 2px 13px}.detail-kicker{margin:0;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.12em}.detail-head h2{margin:5px 0 4px;font:750 24px/1.2 Georgia,"Songti SC",serif}.detail-head>p:last-child{margin:0;color:var(--muted);font-size:9px;line-height:1.55}
.detail-card,.audit-card,.safety-card,.challenge-card{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.detail-card h3{margin:0 0 8px;font-size:11px}.equation-card{border-color:#c9e0e7;background:linear-gradient(145deg,#fff,var(--accent-pale))}
.equation{white-space:pre-line;color:#193f4d;font:700 13px/1.62 Georgia,"Times New Roman","Songti SC",serif;overflow-wrap:anywhere}
.condition{display:inline-block;margin-top:8px;padding:5px 7px;border-radius:8px;color:#8a581c;background:#fff1db;font-size:8px;font-weight:850;line-height:1.45}
.inventory-card{display:grid;gap:8px}.inventory-row{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:start}.inventory-row>span{padding-top:3px;color:var(--accent);font-size:8px;font-weight:900}
.chip-list{display:flex;flex-wrap:wrap;gap:4px}.chip-list i{padding:3px 6px;border-radius:7px;color:#53666d;background:#f0f6f8;font-size:8px;font-style:normal}
dl{display:grid;gap:9px;margin:0}dl div{display:grid;grid-template-columns:34px 1fr;gap:7px}dt{color:var(--accent);font-size:9px;font-weight:900}dd{margin:0;color:#596a70;font-size:9px;line-height:1.6}
.audit-card{border-style:dashed;background:#f7fbfc}.safety-card{border-color:#efd9c4;background:#fffaf5}.audit-card span,.safety-card span,.challenge-card span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.07em}.safety-card span{color:#a45f23}.audit-card p,.safety-card p,.challenge-card p{margin:6px 0 0;color:#52656c;font-size:9px;line-height:1.6}
.challenge-card{background:#fffdf8}.challenge-card button{margin-top:9px;padding:6px 9px;border:1px solid #bed7df;border-radius:8px;color:var(--accent-dark);background:#fff;font-size:8px;font-weight:850}.challenge-card .answer{padding:8px;border-radius:8px;color:#315968;background:var(--accent-soft)}
@media(max-width:1120px){.app{grid-template-columns:218px minmax(430px,1fr) 310px}.step{min-width:78px}.detail-panel{padding-inline:13px}}
@media(max-width:880px){
  body{overflow:auto}.app{display:block;height:auto}.left-panel{border-right:0;border-bottom:1px solid var(--line)}.module-list{display:flex;overflow-x:auto}.chapter-label{display:none}.module{min-width:190px}.source-note{display:none}.visual-stage{height:690px}.detail-panel{border-left:0;border-top:1px solid var(--line)}.detail-head,.detail-card,.audit-card,.safety-card,.challenge-card{max-width:760px;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .brand-block{padding:13px}.site-brand img{width:34px;height:34px}.module{min-width:180px}.visual-stage{height:720px}.stage-head{top:11px;left:11px;right:11px}.stage-title{max-width:84%}.stage-title h2{font-size:19px}.phase-strip{top:100px;width:calc(100% - 22px);overflow:auto;justify-content:flex-start}.step{flex:1;min-width:92px}.view-key{left:11px;right:11px;bottom:124px;justify-content:flex-start}.transport{left:9px;right:9px;bottom:9px;grid-template-columns:auto 1fr auto}.reset{display:none}#speed{width:60px}.timeline-meta span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.module,.step{transition:none}}