:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark;--bg:#101713;--bg2:#18231c;--surface:#19251e;--surface2:#203127;--line:#34463a;--line2:#435b49;--text:#f4f0e6;--muted:#b4c2b3;--subtle:#829785;--accent:#e49a5d;--accent2:#7ed7b2;--warm:#f6c17c;--deep:#122118;--shadow:0 8px 22px rgba(0,0,0,.15)}
body[data-theme="light"]{color-scheme:light;--bg:#f4f1e8;--bg2:#e8ede3;--surface:#fffef8;--surface2:#edf2e7;--line:#d4ded1;--line2:#a6b8a9;--text:#19291f;--muted:#4b6255;--subtle:#657a6b;--accent:#a75222;--accent2:#246b52;--warm:#b66e30;--deep:#dbe6d8;--shadow:0 6px 22px rgba(25,36,26,.08)}
body[data-theme="blue"]{--bg:#0b1220;--bg2:#101e34;--surface:#15243a;--surface2:#1b3150;--line:#2d4564;--line2:#406286;--text:#eaf5ff;--muted:#bbcee6;--subtle:#91accb;--accent:#79c3ff;--accent2:#75e6cd;--warm:#f2bc80;--deep:#0a1627}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-size:14px;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button,select{border:1px solid var(--line2);background:var(--surface2);color:var(--text);border-radius:9px;padding:9px 12px}button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface2) 78%,var(--accent) 22%)}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.selected{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--surface) 82%,var(--accent) 18%)}button.primary{background:var(--accent);color:#172015;border:1px solid var(--accent);font-weight:800}button.primary:hover{filter:brightness(1.12)}a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}p{line-height:1.65}h1,h2,h3{margin-top:0}#app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;padding:11px;max-width:2100px;margin:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px 13px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;min-width:0}.logo{flex-shrink:0;position:relative;display:flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:13px;color:#193025;background:var(--accent);font-size:30px;font-weight:900;letter-spacing:-5px;padding-right:6px}.spark{position:absolute;color:#ffebd2;font-size:13px;right:4px;top:3px;letter-spacing:0}.eyebrow{letter-spacing:.19em;font-size:10px;font-weight:900;color:var(--accent2)}.metaMark{color:var(--subtle)}h1{font-size:clamp(20px,2vw,30px);letter-spacing:-.045em;line-height:1.15;margin:4px 0}h1 span{font-weight:400;color:var(--accent)}.subtitle{font-size:10px;letter-spacing:.07em;color:var(--muted);font-weight:700}.separ{padding:0 5px;color:var(--accent)}.headerActions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.headerActions .pill{font-size:12px;white-space:nowrap}.parent{padding:8px 10px;font-weight:800;white-space:nowrap;font-size:12px}
.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,355px);gap:10px}.simulation{display:flex;flex-direction:column;min-height:0;gap:7px}.stageHeader{display:flex;justify-content:space-between;color:var(--accent2);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:10px;letter-spacing:.13em;font-weight:800}.stageId{color:var(--subtle)}.signal{display:inline-block;width:7px;height:7px;background:var(--accent2);border-radius:50%;box-shadow:0 0 0 4px rgba(117,214,175,.1);margin-right:6px}.stageSpace{position:relative;flex:1;min-height:195px;border:1px solid var(--line2);border-radius:15px;background:radial-gradient(circle at 40% 38%,rgba(76,115,91,.24),transparent 45%),linear-gradient(160deg,var(--bg2),var(--deep));overflow:hidden;touch-action:none;user-select:none}#view3d,#inkCanvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}#inkCanvas{pointer-events:none}.stageOverlay{position:absolute;pointer-events:none;z-index:2}.topLeft{top:14px;left:17px}.topRight{top:14px;right:14px;display:flex;gap:5px;max-width:42%;flex-wrap:wrap;justify-content:flex-end}.bottomLeft{bottom:12px;left:15px;border-radius:9px;padding:7px 9px;background:rgba(8,18,16,.75);border:1px solid rgba(126,175,141,.3);color:#cbd9d1;font-size:12px}.bottomLeft strong{color:#ffc27b}.bottomRight{right:14px;bottom:16px;color:var(--accent);font-size:10px;letter-spacing:.1em;font-weight:800}.overlayTitle{font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--accent2)}.formula{font-size:18px;color:var(--text);font-weight:650;margin-top:5px}.overlayHelp{color:var(--muted);font-size:10px;margin-top:6px}.chip.tag{font-size:9px;letter-spacing:.07em;font-weight:800;color:var(--accent2);border:1px solid var(--line2);border-radius:30px;background:rgba(17,37,30,.85);padding:6px 8px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:6px}.toolbar button{font-size:11px;padding:8px 9px;white-space:nowrap}.toolSep{height:20px;width:1px;background:var(--line2);margin:0 3px}.underStage{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:8px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.metric{padding:6px 10px;background:var(--surface2);border-radius:9px;min-width:0;border:1px solid transparent}.metric.total{border-color:var(--accent)}.metric span{display:block;font-size:9px;color:var(--subtle);letter-spacing:.09em;font-weight:800;white-space:nowrap}.metric b{font-size:clamp(15px,1.35vw,19px);font-variant-numeric:tabular-nums;display:inline-block;margin-top:5px;color:var(--text)}.metric.total b{color:var(--accent)}.metric small{color:var(--muted);margin-left:4px;font-size:11px}.simulation{position:relative}.graphCard.floating{position:absolute;right:16px;bottom:18px;z-index:5;width:min(520px,80%);height:310px;resize:both;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45);touch-action:none}.graphCard.floating #graph{height:calc(100% - 85px)}.graphCard.floating .graphTop{cursor:grab;touch-action:none}.graphCard.floating .graphTop:active{cursor:grabbing}.graphCard{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:10px 12px 6px;flex:0 0 220px;min-height:0}.graphTop{display:flex;justify-content:space-between;gap:10px;align-items:center}.graphTop b{display:block;font-size:13px}.graphTop span{font-size:9px;letter-spacing:.08em;color:var(--subtle)}.graphTop button{padding:5px 7px;font-size:10px;white-space:nowrap}.graphTop select{padding:5px 8px;font-size:11px;max-width:175px}#graph{width:100%;height:152px;display:block;touch-action:none}.legend{display:flex;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:10px;align-items:center}.legendC{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px}.legendC.potential{background:var(--accent2)}.legendC.energy{background:var(--accent)}.legendC.position{background:#ffdf9c}#graphMore{margin-left:auto;color:var(--subtle)}
.controlPanel{background:var(--surface);border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding:6px;gap:3px}.tab{font-size:11px;padding:11px 3px;white-space:nowrap;border-color:transparent;background:transparent;border-radius:7px;color:var(--muted);font-weight:750}.tab.active{color:var(--accent);background:var(--surface2);border-color:var(--line2)}.panelContent{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior:contain;flex:1;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}.tabpane{display:none;padding:19px 17px 28px}.tabpane.active{display:block}.intro{border-bottom:1px solid var(--line);margin-bottom:19px;padding-bottom:11px}.kicker{font-size:10px;letter-spacing:.17em;font-weight:900;color:var(--accent2)}.intro h2{font-size:25px;letter-spacing:-.04em;margin:8px 0 7px}.intro p{font-size:12px;color:var(--muted);margin:0}.field{display:flex;flex-direction:column;gap:7px;margin:12px 0}.field span,.rangeLabel label{color:var(--text);font-size:12px;font-weight:700}.field select{width:100%;font-size:12px}.rangeLabel{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:9px}.rangeLabel output{font-weight:850;font-variant-numeric:tabular-nums;color:var(--accent)}.controlGroup{margin:15px 0}.controlGroup input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:8px;background:var(--line2);border-radius:20px;outline-offset:5px;touch-action:pan-y}.controlGroup input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);height:20px;width:20px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}.controlGroup input[type="range"]::-moz-range-thumb{background:var(--accent);height:17px;width:17px;border:2px solid var(--surface);border-radius:50%}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.callout{border-left:3px solid var(--accent2);background:var(--surface2);border-radius:0 9px 9px 0;padding:11px 12px;color:var(--muted);font-size:12px;line-height:1.55;margin:14px 0}.groupTitle{margin:21px 0 12px;font-size:14px}.presetGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{text-align:left;padding:12px;color:var(--accent);font-size:11px}.preset b{display:block;color:var(--text);font-size:13px;margin:4px 0}.preset small{font-size:10px;color:var(--muted);display:block}.fullButton{width:100%;margin-top:18px;background:var(--surface2);font-weight:800}.panelFooter{padding:11px 15px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;color:var(--subtle);font-size:10px;letter-spacing:.06em}.liveDot{width:6px;height:6px;border-radius:50%;background:var(--accent2)}
.lessonCard{margin:13px 0;border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--surface2)}.lessonCard h3{color:var(--accent);font-size:15px;margin:0 0 7px}.lessonCard p,.lessonCard li{color:var(--muted);font-size:12px;line-height:1.65;margin:5px 0}.lessonCard ul{padding-left:18px}.math{border-radius:8px;border:1px solid var(--line);padding:11px;margin:9px 0;text-align:center;font-size:16px;font-weight:750;color:var(--text);background:var(--bg2)}.quizProgress{font-size:10px;letter-spacing:.1em;color:var(--accent2);font-weight:800;margin-bottom:9px}.quizCard{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:14px}.quizBadge{font-size:10px;color:var(--accent2);font-weight:900;letter-spacing:.11em}.quizCard h3{margin:10px 0;font-size:16px;line-height:1.5}.choices{display:grid;gap:9px}.choices button{text-align:left;line-height:1.4;font-size:12px;background:var(--surface);width:100%;padding:13px 12px;display:flex;align-items:flex-start;gap:9px}.choices b{color:var(--accent);font-size:12px}.choices button.correct{border-color:var(--accent2);background:color-mix(in srgb,var(--surface2) 74%,var(--accent2) 26%)}.choices button.incorrect{border-color:#dd7f74;background:color-mix(in srgb,var(--surface2) 82%,#e77570 18%)}.answerPanel{margin-top:12px;border-left:3px solid var(--accent2);padding:11px;color:var(--text);font-size:12px;line-height:1.6;background:var(--bg2)}.quizNav{display:flex;justify-content:space-between;gap:10px;margin:14px 0}.footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--subtle);padding:5px 9px}.toast{position:fixed;z-index:20;bottom:21px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:11px 19px;background:var(--surface2);border:1px solid var(--accent2);border-radius:10px;color:var(--text);transition:opacity .14s,transform .14s;box-shadow:var(--shadow);max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{max-width:min(590px,92vw);background:var(--surface);color:var(--text);border-radius:14px;border:1px solid var(--line2);padding:22px;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(0,0,0,.72)}.dialogTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialogTop h2{margin:0}.guideText{color:var(--muted)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#printSheet{display:none}
@media (max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.headerActions{gap:4px}.toolbar button{padding:7px 8px}.metrics{gap:4px}.metric{padding:6px}}
@media (max-width:820px){.graphCard.floating{width:calc(100% - 16px);max-width:100%;height:280px;right:8px;bottom:12px}.graphCard.floating #graph{height:calc(100% - 80px)}body{overflow:auto}#app{height:auto;min-height:100dvh;display:flex;flex-direction:column;padding:7px}.header{padding:9px 6px;align-items:flex-start;flex-wrap:wrap}.headerActions{width:100%;justify-content:flex-start}.workspace{display:flex;flex-direction:column}.simulation{height:auto}.stageSpace{height:clamp(310px,51vh,580px);flex:none}.stageHeader{padding:8px}.toolbar{padding:7px}.metrics{grid-template-columns:repeat(5,1fr)}.metric span{font-size:8px}.metric small{font-size:9px}.graphCard{flex:none}.controlPanel{min-height:360px;overflow:visible}.panelContent{overflow:visible}.tabs{position:sticky;top:0;background:var(--surface);z-index:3}.footer{flex-wrap:wrap}.topRight{display:none}.overlayHelp{max-width:200px}.toolSep{display:none}}
@media (max-width:520px){.brand{gap:9px}.logo{width:40px;height:40px;font-size:24px}h1{font-size:20px}.subtitle{font-size:8px;line-height:1.4}.stageSpace{height:360px}.topLeft{left:9px;top:8px}.formula{font-size:15px}.stageHeader{font-size:8px}.toolbar button{font-size:10px;padding:7px 8px}.underStage{padding:5px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric span{font-size:8px}.metric.total{grid-column:span 2}.metric b{font-size:15px}.graphCard{padding:7px}.graphTop span{display:none}.graphTop select{max-width:155px}.graphCard #graph{height:160px}.legend{font-size:9px;gap:7px}#graphMore{display:none}.tabpane{padding:16px 12px}.tabs{gap:1px;padding:4px}.tab{font-size:10px}.footer{gap:4px}}
@media print{body{background:#fff!important;color:#000!important;overflow:visible!important}#app,dialog,.toast{display:none!important}#printSheet{display:block!important;font:12pt Georgia,serif;padding:12mm;color:#000}#printSheet h1{font-size:21pt}#printSheet li{margin-bottom:13px;line-height:1.7}#printSheet .pageBreak{break-before:page;page-break-before:always}#printSheet h2{margin-top:20px;border-bottom:1px solid #666} @page{size:A4;margin:14mm}}