:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #26332e; background: #f1f2ee; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; height: 100svh; overflow: hidden; }
main, canvas { width: 100%; height: 100%; }
canvas { display: block; touch-action: none; outline-offset: -4px; }
footer { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); background: #f1f2eef2; }
.controls { display: flex; align-items: center; gap: 24px; }
label { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
select, button { font: inherit; font-size: 12px; color: inherit; border: 1px solid #c9d2c6; background: #f7f8f4; border-radius: 4px; min-height: 36px; padding: 0 10px; }
button { cursor: pointer; }
button:hover { background: #dfe5dc; }
:disabled { cursor: progress; opacity: .45; }
:focus-visible { outline: 2px solid #39764c; outline-offset: 3px; }
.explosion { flex: 1; min-width: 0; }
input[type="range"] { width: 100%; min-width: 0; margin: 0; height: 36px; accent-color: #496b53; cursor: ew-resize; }
#clearance { margin: 9px 0 0; text-align: center; color: #657267; font-size: 11px; line-height: 1.5; }
#clearance[data-fit="collision"] { color: #a33532; }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: #f1f2ee; font-size: 13px; }
.loading[hidden] { display: none; }
#load-detail { color: #657267; max-width: 80%; text-align: center; }
@media (max-width: 440px) { .controls { gap: 10px; } label { gap: 6px; } select, button { padding: 0 7px; } }