:root { --blue:#29abe2; --blue-dark:#1e8fc4; --green:#7ac143; --green-dark:#5fa032; --ink:#2c3e50; --text:#58595b; --light:#74777a; --orange:#ff6b35; --yellow:#ffd93d; --red:#e74c3c; --shadow:rgba(41,171,226,.2); --radius:16px; --radius-sm:10px; }
* { box-sizing:border-box; margin:0; padding:0; } body { min-height:100vh; overflow-x:hidden; background:linear-gradient(180deg,#29abe2 0%,#7dd3f0 60%,#7ac143 60%,#5fa032 100%); color:var(--text); font-family:'Fredoka',sans-serif; }
.sky-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }.sun { position:absolute; top:42px; right:7vw; width:88px; height:88px; border:4px solid #f39c12; border-radius:50%; background:var(--yellow); box-shadow:0 0 40px rgba(255,217,61,.6); animation:pulse 3s ease-in-out infinite; }@keyframes pulse {50% {transform:scale(1.06)}}.cloud { position:absolute; height:38px; border:3px solid #d5dbdb; border-radius:50px; background:rgba(255,255,255,.9); }.cloud::before,.cloud::after { position:absolute; content:''; border:inherit; border-radius:50%; background:inherit; }.cloud-1 {top:84px;left:10%;width:100px;animation:drift 20s linear infinite}.cloud-1::before {top:-27px;left:13px;width:50px;height:50px}.cloud-1::after {top:-16px;right:9px;width:58px;height:40px}.cloud-2 {top:180px;left:54%;width:78px;animation:drift 26s linear infinite reverse}.cloud-2::before {top:-20px;left:9px;width:40px;height:40px}.cloud-2::after {top:-13px;right:8px;width:44px;height:33px}.cloud-3 {top:36px;left:70%;width:66px;animation:drift 18s linear infinite}.cloud-3::before {top:-18px;left:7px;width:35px;height:35px}.cloud-3::after {top:-11px;right:4px;width:39px;height:29px}@keyframes drift {to {transform:translateX(32px)}}
.site-header,.layout,.footer { position:relative; z-index:1; max-width:1400px; margin-inline:auto; }.site-header {padding:14px 20px 8px}.back-link {display:inline-block;margin-bottom:10px;color:rgba(255,255,255,.92);font-size:.85rem;font-weight:600;text-decoration:none}.back-link:hover {text-decoration:underline}.site-header-inner {display:flex;align-items:center;gap:14px}.site-header-logo {width:72px;height:auto;opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.14))}.site-header-kicker {margin-bottom:2px;color:rgba(255,255,255,.85);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.15);text-transform:uppercase}h1 {color:#fff;font-size:1.65rem;letter-spacing:-.3px;line-height:1.15;text-shadow:0 2px 4px rgba(0,0,0,.18)}.subtitle {margin-top:2px;color:rgba(255,255,255,.9);font-family:'Patrick Hand',cursive;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.layout {display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto auto auto auto;gap:20px;padding:0 20px 40px}.canvas-section {grid-column:1;grid-row:1}.controls-panel {grid-column:2;grid-row:1 / 3}.stats-panel {grid-column:1;grid-row:2}.analysis-panel,.formulas-panel,.graph-panel {grid-column:1 / -1}.analysis-panel {grid-row:3}.formulas-panel {grid-row:4}.graph-panel {grid-row:5}.canvas-section,.controls-panel,.stats-panel,.analysis-panel,.formulas-panel,.graph-panel {padding:20px;border:3px solid var(--blue);border-radius:var(--radius);background:#fff;box-shadow:6px 6px 0 var(--shadow)}h2 {display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--ink);font-size:1.3rem}
.canvas-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}#sim-canvas {display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:var(--radius-sm);background:linear-gradient(180deg,#29abe2 0%,#7dd3f0 74%,#7ac143 74%,#5fa032 100%)}.canvas-legend {display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;color:var(--light);font-size:.85rem}.canvas-legend span {display:flex;align-items:center;gap:6px}.dot {display:inline-block;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%}.dot-theory {background:rgba(41,171,226,.55)}.dot-actual {background:var(--orange)}.dot-vx {background:var(--green)}.dot-vy {background:var(--red)}
.btn {padding:10px 18px;border:3px solid var(--blue-dark);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;font:600 .95rem 'Fredoka',sans-serif;transition:transform .1s,box-shadow .1s}.btn:hover:not(:disabled) {transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}.btn:active:not(:disabled) {transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}.btn:disabled {cursor:not-allowed;opacity:.5}.btn-primary {border-color:var(--blue-dark);background:var(--blue);color:#fff}.btn-primary:hover:not(:disabled) {background:var(--blue-dark)}.btn-secondary {border-color:var(--green-dark);background:var(--green);color:#fff}.toggle-label {display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem;user-select:none}.toggle-label input {width:18px;height:18px;accent-color:var(--green)}
.control-group {margin-bottom:20px}.control-group label {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:var(--ink);font-size:.93rem;font-weight:600}.value-display {min-width:80px;padding:2px 8px;border:2px solid var(--blue);border-radius:8px;background:rgba(41,171,226,.14);color:var(--blue-dark);font-size:.83rem;text-align:center}input[type="range"] {width:100%;height:10px;appearance:none;outline:none;border:2px solid var(--ink);border-radius:6px;background:#e8e8e8}input[type="range"]::-webkit-slider-thumb {width:24px;height:24px;appearance:none;border:3px solid var(--green-dark);border-radius:50%;background:var(--green);cursor:grab}input[type="range"]::-moz-range-thumb {width:18px;height:18px;border:3px solid var(--green-dark);border-radius:50%;background:var(--green);cursor:grab}.gravity-presets {display:flex;gap:8px;margin-top:8px}.preset-btn {flex:1;padding:6px 4px;border:2px solid var(--blue);border-radius:8px;background:rgba(41,171,226,.1);color:var(--blue-dark);cursor:pointer;font:.74rem 'Fredoka',sans-serif;transition:background .15s,color .15s}.preset-btn:hover {background:var(--blue);color:#fff}.tip-box {padding:12px;border:2px solid #f39c12;border-radius:var(--radius-sm);background:#fff3cd;color:var(--ink);font-size:.85rem;line-height:1.4}
.stats-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.stat-card {padding:14px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:#f8f9fa;text-align:center;transition:transform .15s}.stat-card:hover {transform:scale(1.02)}.stat-card.highlight {border-color:var(--green);background:linear-gradient(135deg,rgba(41,171,226,.12),rgba(122,193,67,.18))}.stat-icon {margin-bottom:4px;font-size:1.5rem}.stat-label {margin-bottom:4px;color:var(--light);font-size:.74rem;line-height:1.2}.stat-value {color:var(--ink);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.analysis-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.analysis-card {padding:16px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:#f8f9fa}.analysis-card.horizontal {border-color:var(--green);background:rgba(122,193,67,.12)}.analysis-card.vertical {border-color:var(--red);background:rgba(231,76,60,.08)}.analysis-card.result {border-color:var(--blue);background:rgba(41,171,226,.08)}.analysis-card h3 {margin-bottom:7px;color:var(--ink);font-size:1rem}.analysis-card p {color:var(--light);font-size:.84rem;line-height:1.4}.analysis-value {margin-top:12px;color:var(--ink);font-size:.98rem;font-weight:700;font-variant-numeric:tabular-nums}
.formulas-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.formula-card {padding:16px;border:2px solid var(--blue);border-radius:var(--radius-sm);background:rgba(41,171,226,.06)}.formula-card h3 {margin-bottom:8px;color:var(--blue-dark);font-size:1rem}.formula {margin-bottom:8px;padding:10px;border:2px dashed var(--blue);border-radius:8px;background:#fff;color:var(--ink);font-family:'Patrick Hand',cursive;font-size:1.1rem;text-align:center}.formula-calc {margin-bottom:8px;color:var(--green-dark);font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}.formula-desc {color:var(--light);font-size:.8rem;line-height:1.4}.graphs-row {display:grid;grid-template-columns:1fr 1fr;gap:20px}.graph-box {padding:12px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:#fafafa}.graph-box h3 {margin-bottom:8px;color:var(--ink);font-size:.9rem;text-align:center}.graph-box canvas {display:block;width:100%;height:auto;border-radius:6px}.footer {margin-top:8px;padding:18px 16px 24px;border-top:4px solid var(--green);background:#fff;color:var(--light);font-size:.85rem;text-align:center}.footer-logo {display:block;max-width:96px;height:auto;margin:0 auto 10px;opacity:.9}.footer-school {margin-top:4px;color:var(--text);font-size:.86rem;font-weight:600}
@media (max-width:1100px) {.layout {grid-template-columns:1fr;grid-template-rows:auto}.canvas-section,.controls-panel,.stats-panel,.analysis-panel,.formulas-panel,.graph-panel {grid-column:1;grid-row:auto}.graphs-row {grid-template-columns:1fr}}@media (max-width:720px) {.analysis-grid {grid-template-columns:1fr}}@media (max-width:600px) {.site-header {padding-inline:14px}.layout {padding-inline:14px}.site-header-logo {width:62px}h1 {font-size:1.3rem}.subtitle {font-size:.9rem}.canvas-toolbar {justify-content:center}.stats-grid {grid-template-columns:repeat(2,1fr)}.formulas-grid {grid-template-columns:1fr}.footer-logo {max-width:88px}}