:root{color-scheme:light;--bg:#f7f6fa;--paper:#fff;--ink:#211b2d;--muted:#706b7b;--line:#e1dce9;--accent:#7038d7;--accent-soft:#f3edff}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:linear-gradient(#eeebf3 1px,transparent 1px),linear-gradient(90deg,#eeebf3 1px,transparent 1px);background-size:32px 32px}button,input{font:inherit}button{cursor:pointer}input{accent-color:var(--accent)}
.app-shell{max-width:1560px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 370px;align-items:start}.experiment{padding:22px;min-width:0}.control-panel{min-height:100vh;padding:28px 25px 42px;background:#fcfbfe;border-left:1px solid var(--line)}
.panel-head h1{margin-top:0}
.scene-wrap{height:min(68vh,660px);min-height:440px;position:relative;overflow:hidden;border:1px solid #d8d0e3;border-radius:15px;background:radial-gradient(circle at 60% 30%,#fff,#ede8f5 74%);box-shadow:0 9px 27px #27174312}#sceneCanvas{width:100%;height:100%;display:block;cursor:grab}#sceneCanvas:active{cursor:grabbing}.readout{position:absolute;right:24px;top:21px;padding:10px 14px;text-align:right;border-radius:10px;background:#ffffffdf;box-shadow:0 2px 12px #22163310}.readout span{display:block;color:var(--muted);font-size:11px}.readout strong{display:block;margin-top:5px;color:var(--accent);font-size:24px;font-variant-numeric:tabular-nums}.scene-controls{position:absolute;top:20px;left:20px;display:flex;gap:8px;white-space:nowrap}.primary-btn,.secondary-btn{height:42px;padding:0 15px;border-radius:8px;border:1px solid #c8bfd3;background:#fff;color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 3px 10px #2e214418}.primary-btn{color:#fff;background:var(--accent);border-color:var(--accent)}.primary-btn:hover{background:#5b28b7}.secondary-btn:hover:not(:disabled){background:var(--accent-soft)}button:disabled{opacity:.45;cursor:default}.icon-only{width:42px;padding:0;font-size:20px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 5px 17px #25123d0c;overflow:hidden}.metric{min-width:0;padding:16px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric span{display:block;min-height:28px;color:var(--muted);font-size:11px}.metric strong{font-size:23px;font-variant-numeric:tabular-nums}.metric small{margin-left:4px;color:var(--muted);font-size:10px}.metric.accent strong{color:var(--accent)}
.panel{min-width:0;margin-top:20px;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 17px #25123d0c}.panel-title{display:flex;justify-content:space-between;align-items:end;gap:12px}.panel-title h2{margin:5px 0 0;font-size:17px}.eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.legend,.small-note{color:var(--muted);font-size:11px}.panel-description{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 14px}#chartCanvas,#massGraph{width:100%;display:block}#chartCanvas{height:175px;margin-top:12px}#massGraph{height:245px;margin-top:15px}
.table-scroll{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}th,td{padding:10px 11px;text-align:right;border-bottom:1px solid var(--line)}th:first-child,td:first-child{text-align:left}th{color:var(--muted);font-weight:600;background:#faf8fd}tbody tr:nth-child(even){background:#fcfbfe}.empty-row td{text-align:center;color:var(--muted);padding:22px}.overwrite-notice{min-height:18px;margin:10px 0 0;color:var(--accent);font-size:11px}
.series-summary{padding:11px 13px;margin:15px 0 0;border-radius:8px;background:var(--accent-soft);color:#4d287f;font-size:12px;font-weight:700;line-height:1.5}
.calculation-steps{margin:15px 0 0;padding:0;list-style:none;counter-reset:steps;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.calculation-steps li{position:relative;min-width:0;padding:12px 12px 12px 38px;background:#faf8fd;border:1px solid var(--line);border-radius:8px}.calculation-steps li:before{counter-increment:steps;content:counter(steps);position:absolute;left:13px;top:12px;color:var(--accent);font-weight:700}.calculation-steps span,.calculation-steps code,.calculation-steps b{display:block;font-size:11px;line-height:1.5}.calculation-steps span{color:var(--muted)}.calculation-steps code{margin-top:4px;white-space:normal}.calculation-steps b{margin-top:4px;color:var(--accent);overflow-wrap:anywhere}
.panel-head{display:flex;align-items:start;justify-content:space-between;gap:15px}.panel-head h1{margin:7px 0 0;font-size:24px;line-height:1.15}.text-btn{border:0;background:none;color:var(--accent);font-size:11px;text-decoration:underline;white-space:nowrap;padding:3px 0}.intro{font-size:12px;line-height:1.55;color:var(--muted);margin:16px 0 22px}.mass-fieldset{margin:0;padding:0;border:0}.mass-fieldset legend{margin-bottom:10px;font-size:12px;font-weight:700}.mass-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mass-options label{cursor:pointer}.mass-options input{position:absolute;opacity:0}.mass-options span{display:block;padding:11px 6px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:13px;font-weight:700;background:#fff}.mass-options small{display:block;margin-top:4px;font-size:9px;font-weight:400;color:var(--muted)}.mass-options input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.mass-options input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.control-group{margin-top:24px}.control-label,.mini-control label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.control-label output,.mini-control output{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:5px;margin:13px 0 6px;accent-color:var(--accent)}.range-limits{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.accuracy-box,.validation-box,.formula-card{margin-top:24px;padding:17px;border:1px solid var(--line);border-radius:10px;background:#fff}.accuracy-box{background:#faf8ff}.accuracy-head{display:flex;justify-content:space-between;align-items:center}.accuracy-head h2{font-size:14px;margin:5px 0 0}.accuracy-box p,.formula-card p{font-size:11px;line-height:1.5;color:var(--muted)}.mini-control{margin-top:16px}.mini-control label{font-size:11px}.toggle{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted)}.toggle input{margin:0}.accuracy-box.is-disabled .mini-control{opacity:.4}.validation-box{background:#f5f0ff}.validation-box b{display:block;font-size:12px}.validation-box p{margin:5px 0 0;font-size:11px;line-height:1.4;color:var(--muted)}.validation-box.is-error{background:#fff1f3;border-color:#db9ca6}.validation-box.is-warning{background:#fff8eb;border-color:#e0c79b}.formula-card{background:#f8f4ff}.formula{display:flex;align-items:center;gap:5px;margin:14px 0;font:italic 20px Georgia,serif}.fraction{display:inline-grid;text-align:center;font-size:14px}.fraction b{border-bottom:1px solid;padding:0 3px 2px;font-weight:400}.fraction i{padding-top:2px}.radicand{border-top:1px solid;font-size:15px;padding-top:2px}.details{margin-top:18px}.details div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px}.details span{color:var(--muted)}.details b{text-align:right}
@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.control-panel{border-left:0;border-top:1px solid var(--line);min-height:0}.scene-wrap{height:580px}}@media(max-width:650px){.experiment{padding:10px}.control-panel{padding:25px 18px}.scene-wrap{height:480px;min-height:0}.readout{right:12px;top:12px}.scene-controls{top:88px;left:12px;right:12px;gap:6px;white-space:normal}.scene-controls button{padding:0 8px}.primary-btn{flex:1}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.calculation-steps{grid-template-columns:1fr}.panel{padding:16px}.panel-title{align-items:start;flex-direction:column}.panel-head{display:block}.panel-head .text-btn{margin-top:10px}}

/* Сцена, результаты и управление находятся на общей поверхности страницы. */
body,.app-shell{background:#faf9fc}
.scene-wrap{border:0;border-radius:0;background:#faf9fc;box-shadow:none}
.metrics{margin-top:0;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.metric,.metric:nth-child(2),.metric:nth-child(-n+2){border:0}
.panel{margin-top:0;padding:20px 16px;background:transparent;border:0;border-radius:0;box-shadow:none}
.control-panel{background:transparent;border:0}
.accuracy-box,.formula-card{padding:0;background:transparent;border:0;border-radius:0}
.chart-panel,.results-panel,.graph-panel,.calculation-panel{border-top:3px solid var(--accent)}
.control-panel{border-left:3px solid var(--accent)}
.panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.panel-reset{padding:6px 10px;border:1px solid #cfc6dc;border-radius:6px;background:transparent;color:#5d3d91;font-size:11px;font-weight:700;white-space:nowrap}
.panel-reset:hover:not(:disabled){background:var(--accent-soft)}
.panel-reset:disabled{opacity:.4}
@media(max-width:1050px){.control-panel{border-left:0;border-top:3px solid var(--accent)}}
@media(max-width:650px){.panel{padding:16px 8px}.panel-actions{width:100%}}

/* Линии доходят до внешних краёв колонки и соединяются с вертикальной линией. */
.app-shell{align-items:stretch}
.control-panel{min-height:100vh}
.experiment{--experiment-gutter:22px;--panel-inset:16px}
.experiment>.panel{margin-inline:calc(-1 * var(--experiment-gutter));padding-inline:calc(var(--experiment-gutter) + var(--panel-inset))}
@media(max-width:1050px){.control-panel{min-height:0}}
@media(max-width:650px){.experiment{--experiment-gutter:10px;--panel-inset:8px}}

.graph-panel{position:relative}
.graph-tooltip{position:absolute;z-index:5;max-width:260px;padding:9px 11px;border:1px solid #b69ce7;border-radius:7px;background:#fff;color:var(--ink);box-shadow:0 6px 18px #281f3d26;font-size:12px;line-height:1.45;white-space:pre-line;pointer-events:none}
.graph-tooltip[hidden]{display:none}
.graph-explanation{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}

.formula{display:block;margin:20px 0;padding:8px 0;text-align:center;overflow:visible}
.formula math{font-family:"Cambria Math","STIX Two Math",serif;font-size:20px;color:var(--ink)}
.accuracy-head h2{margin:0}

/* Интерактивная зарядка и настройка трёх пуль. */
#sceneCanvas{touch-action:none}
.loading-hint{position:absolute;left:50%;top:20px;max-width:330px;transform:translateX(-50%);padding:9px 13px;border:1px solid #d7c8ef;border-radius:8px;background:#ffffffeb;color:#4d287f;font-size:11px;font-weight:700;text-align:center;box-shadow:0 3px 12px #2e214414;pointer-events:none}
.loading-hint.is-loaded{color:#27633f;border-color:#b9ddc7;background:#f3fff7ed}
.bullet-settings{margin:22px 0 0;padding:0;border:0}
.bullet-settings legend{font-size:13px;font-weight:700}
.bullet-settings>p{margin:7px 0 12px;color:var(--muted);font-size:11px;line-height:1.45}
.bullet-mass-control{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:border-color .15s,background .15s}
.bullet-mass-control.is-selected{border-color:#a787e4;background:#faf7ff}
.bullet-mass-control.is-loaded{border-color:#64ac7e;background:#f4fff7}
.bullet-mass-control .control-label label{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:700}
.bullet-mass-control input[type=range]{margin:9px 0 4px}
.bullet-swatch{width:15px;height:8px;border-radius:5px;background:#c28c43;box-shadow:inset -3px 0 #6f4c20}
.bullet-two{background:#d4a95c}.bullet-three{background:#e5bd70}
.bullet-status{margin-top:10px;padding:9px 10px;border-radius:7px;background:var(--accent-soft);color:#4d287f;font-size:11px;font-weight:700;line-height:1.4}
.bullet-status.is-loaded{background:#eaf9ef;color:#27633f}
@media(max-width:650px){.loading-hint{top:64px;width:calc(100% - 24px)}.scene-controls{top:112px}}