:root{--bg:#fdf6f4;--panel:#fffaf8;--ink:#3b3340;--muted:#8a7f8c;--pink:#f07c95;--pink-soft:#fde3e9;--line:#f1e3e3;--card:rgba(255,252,250,0.94);--cU:#e8596f;--cI:#3d8fe0;--cR:#e3a51d;--cP:#3fb57d;--shadow:0 6px 24px rgba(160,110,120,0.14);--radius:22px}:root:not([data-theme="light"]){color-scheme:light}*{box-sizing:border-box}[hidden]{display:none !important}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-size:15px;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}#app{display:grid;grid-template-columns:1fr 470px;height:100vh}#stage{position:relative;overflow:hidden;background:linear-gradient(#fde9ec,#fdf4ef 60%,#fbf1ea)}#three{position:absolute;inset:0;width:100%;height:100%;display:block}#labels{position:absolute;inset:0;pointer-events:none}.lbl{position:absolute;transform:translate(-50%,-100%);background:#fff;border-radius:999px;padding:3px 10px;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:var(--shadow);border:2px solid var(--line);transition:opacity .2s}.lbl.U{color:var(--cU);border-color:#f8c6cf}.lbl.I{color:var(--cI);border-color:#c5ddf6}.lbl.R{color:#b07c06;border-color:#f3dda4}.lbl.P{color:var(--cP);border-color:#bfe8d3}.lbl.ask{background:#3b3340;color:#fff;border-color:#3b3340;animation:pulse 1s infinite alternate}.lbl.node{color:var(--cI);background:#eef6ff}@keyframes pulse{to{transform:translate(-50%,-100%) scale(1.12)}}.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;padding:8px 14px;border-radius:16px;font-weight:700;font-size:14px;max-width:220px;text-align:center;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,margin .3s;margin-top:8px}.bubble.show{opacity:1;margin-top:0}.bubble::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff;border-bottom:0}.bubble .who{display:block;font-size:11px;color:var(--pink);letter-spacing:.04em}.round-btn{width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow);font-size:20px;font-weight:800;color:var(--muted)}#helpBtn{position:absolute;top:16px;left:16px;z-index:3}.card{position:absolute;top:72px;left:22px;z-index:2;width:min(370px,calc(100% - 44px));max-height:calc(100% - 180px);overflow:auto;background:var(--card);border-radius:var(--radius);padding:18px 22px 16px;box-shadow:var(--shadow);backdrop-filter:blur(6px);transition:opacity .25s,transform .25s}.card.hidden{opacity:0;transform:translateX(-20px);pointer-events:none}.card h2{margin:0 0 6px;color:var(--pink);font-weight:700;font-size:25px}.card h4{margin:12px 0 4px;color:var(--muted);font-weight:600;letter-spacing:.06em;font-size:15px}.card ol{margin:0;padding-left:22px;line-height:1.5}.card p{margin:0;line-height:1.5}#cardStep{min-height:3em}.analogy{margin-top:10px !important;color:var(--muted);font-size:13.5px}.analogy::before{content:'💧 '}.card-btns{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:8px}.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;cursor:pointer}.dots i.on{background:var(--pink)}.quiz-q{font-weight:700;font-size:16px;margin:6px 0 10px !important}.quiz-row{display:flex;gap:8px;align-items:center}.quiz-row input{flex:1;font:inherit;font-size:18px;font-weight:700;padding:8px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);outline:none}.quiz-row input:focus{border-color:var(--pink)}.quiz-unit{font-weight:800;font-size:18px;color:var(--muted);min-width:40px}.quiz-fb{min-height:2.6em;margin-top:8px !important;font-weight:600}.quiz-fb.ok{color:var(--cP)}.quiz-fb.bad{color:var(--cU)}.btn{border:0;background:#fff;border-radius:999px;padding:10px 22px;font-weight:700;font-size:16px;box-shadow:0 2px 10px rgba(160,110,120,.12);transition:transform .1s,background .2s}.btn:active{transform:scale(.96)}.btn:disabled{color:#c9bfc5;cursor:default;box-shadow:none}.btn.pink{background:var(--pink);color:#fff}.btn.ghost{background:transparent;border:2px solid var(--ink);box-shadow:none;padding:8px 18px}#bottomBar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px;padding:8px;background:rgba(255,255,255,.7);border-radius:999px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}#bottomBar .btn{min-width:120px}#loading{position:absolute;inset:0;display:grid;place-items:center;z-index:5;font-weight:800;font-size:20px;color:var(--pink);background:rgba(253,240,242,.85);transition:opacity .5s}#loading.done{opacity:0;pointer-events:none}#panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:18px 22px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel-head h1{margin:0;font-weight:600;font-size:31px;letter-spacing:.01em}.sub{margin:2px 0 0;color:var(--pink);font-size:16px}.settings{margin:10px 0;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:var(--shadow);display:grid;gap:6px;font-size:14px}.settings .speed{display:flex;gap:10px;align-items:center}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.lesson-grid button{border:0;background:#fff;border-radius:999px;padding:8px 6px;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(160,110,120,.1);white-space:nowrap}.lesson-grid button.on{background:var(--pink);color:#fff}.hint{color:var(--muted);margin:8px 2px 10px;font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:#fff;border-radius:999px;padding:5px 14px;font-size:14px;color:var(--muted);box-shadow:0 2px 8px rgba(160,110,120,.08)}.chip b{color:var(--ink);margin-left:4px;font-weight:800}.chip.pink{background:var(--pink);color:#fff}.chip.pink b{color:#fff}.chip.U b{color:var(--cU)}.chip.I b{color:var(--cI)}.chip.R b{color:#b07c06}.chip.P b{color:var(--cP)}.chip.bad b{color:var(--cU)}.sec{margin:18px 0 8px;font-weight:600;font-size:17px;color:var(--muted)}.sec-row{display:flex;justify-content:space-between;align-items:center}.sec-row .sec{margin:0}.param{display:grid;grid-template-columns:130px 1fr 78px;gap:10px;align-items:center;margin:6px 0}.param label{font-weight:700;font-size:14px}.param output{font-weight:800;text-align:right;font-size:14px}.param input[type=range]{width:100%;accent-color:var(--pink)}.solver{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.solver .sv{background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 2px 8px rgba(160,110,120,.08);border:2px solid transparent}.solver .sv.known{border-color:var(--pink)}.solver .sv label{display:flex;gap:6px;align-items:center;font-weight:700;font-size:14px}.solver .sv input[type=number]{width:100%;font:inherit;font-weight:800;font-size:16px;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ink);padding:4px 0;outline:none}.solver .sv input[type=number]:disabled{color:var(--muted)}.tabs{display:flex;gap:2px;background:#fff;border-radius:999px;padding:3px;box-shadow:0 2px 8px rgba(160,110,120,.08)}.tabs button{border:0;background:transparent;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}.tabs button.on{background:var(--pink);color:#fff}.formula-box{margin-top:18px}.formula{margin-top:10px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 2px 8px rgba(160,110,120,.08);min-height:120px;line-height:1.55}.formula p{margin:6px 0}.f-big{font-family:'JetBrains Mono',monospace;font-size:22px;margin:6px 0}.f-mid{font-family:'JetBrains Mono',monospace;font-size:17px;margin:4px 0}.f-row{display:flex;gap:22px;flex-wrap:wrap}.note{color:var(--muted);font-size:13px}.bad{color:var(--cU)}.cU{color:var(--cU)}.cI{color:var(--cI)}.cR{color:#b07c06}.cP{color:var(--cP)}table.units{border-collapse:collapse;width:100%;font-size:14px}table.units th{text-align:left;color:var(--muted);font-weight:600;padding:3px 6px;border-bottom:2px solid var(--line)}table.units td{padding:4px 6px;border-bottom:1px solid var(--line)}#extraBox svg{width:100%;height:auto;display:block;margin-top:10px}#extraBox .clk{cursor:pointer}#extraBox .clk:hover>:first-child{opacity:.85}.panel-btns{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.credits{margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.4}@media (max-width:1000px){body{overflow:auto}#app{grid-template-columns:1fr;height:auto}#stage{height:72vh;min-height:460px}#panel{border-left:0;padding:16px}.card{top:70px;left:16px;width:calc(100% - 32px);max-height:46%;font-size:14px}#bottomBar{width:calc(100% - 32px);justify-content:center}#bottomBar .btn{min-width:0;padding:8px 12px;font-size:14px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.param{grid-template-columns:100px 1fr 70px}}