:root { --blue:#29abe2; --blue-dark:#1e8fc4; --green:#7ac143; --green-dark:#5fa032; --ink:#2c3e50; --text:#58595b; --light:#74777a; --orange:#ff6b35; --yellow:#ffd93d; --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; 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}.formulas-panel {grid-column:1 / -1;grid-row:3}.graph-panel {grid-column:1 / -1;grid-row:4}.canvas-section,.controls-panel,.stats-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-object {background:var(--orange)}.dot-trace {background:rgba(255,107,53,.5)}.dot-vector {background:var(--green)}
.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(155px,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}
.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,.formulas-panel,.graph-panel {grid-column:1;grid-row:auto}.graphs-row {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}}