:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e5eaf1; background: #10151e; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1600px; padding: 32px; margin: auto; }
header, footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
header { margin-bottom: 26px; }
.eyebrow, footer, .viewport-label { font: 11px ui-monospace, monospace; letter-spacing: 0.13em; color: #8f9eb2; }
.eyebrow { margin: 0 0 10px; }
h1 { margin: 0; font-size: 26px; font-weight: 550; letter-spacing: -0.04em; }
h1 span { margin-left: 18px; font-size: 14px; font-weight: 400; color: #8f9eb2; letter-spacing: 0; }
h2 { margin: 0 0 20px; font-size: 17px; font-weight: 500; }
#status { font-size: 12px; color: #a5b5c9; text-align: right; }
#status[data-state="ready"] { color: #98d6be; }
#status[data-state="error"] { color: #f2a999; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border: 1px solid #2a3444; border-radius: 12px; overflow: hidden; }
.viewport { position: relative; min-width: 0; height: clamp(450px, 74vh, 860px); background: #171d28; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
.viewport-label { position: absolute; top: 22px; left: 22px; pointer-events: none; }
.viewport-label span { display: block; margin-top: 7px; color: #718097; font-size: 10px; }
.viewport-hint { position: absolute; bottom: 20px; left: 22px; color: #94a4bb; font-size: 12px; pointer-events: none; }
.viewport-hint span { padding: 0 8px; }
aside { background: #171f2c; border-left: 1px solid #2a3444; padding: 28px 24px; }
.angle { margin: 12px 0 28px; font-size: 56px; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; font-weight: 300; }
.angle span { color: #7b8ba3; margin-left: 5px; }
label { display: block; font-size: 12px; color: #bac7d8; }
input[type="range"] { width: 100%; margin: 18px 0 8px; accent-color: #a6d5c7; }
.range-labels { display: flex; justify-content: space-between; color: #8494aa; font-size: 10px; }
.actions { display: flex; gap: 8px; margin-top: 22px; }
button { border: 1px solid transparent; border-radius: 6px; padding: 11px 13px; background: #a6d5c7; color: #152824; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
button.secondary { background: transparent; color: #c1cedf; border-color: #37455a; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #a6d5c7; outline-offset: 3px; }
.full-width { width: 100%; margin-top: 18px; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input { accent-color: #a6d5c7; }
.divider { height: 1px; background: #2d394c; margin: 28px 0; }
.note { font-size: 12px; color: #8494aa; line-height: 1.7; margin: 24px 0; }
details { font-size: 12px; color: #9dacbf; }
summary { cursor: pointer; }
pre { font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-height: 220px; overflow: auto; }
#error { margin-top: 18px; padding: 24px; border: 1px solid #74483f; background: #302521; border-radius: 8px; }
#error p { line-height: 1.6; overflow-wrap: anywhere; }
footer { margin-top: 18px; font-size: 10px; }
@media (max-width: 760px) {
  main { padding: 16px; }
  header { align-items: flex-start; }
  h1 span { display: block; margin: 8px 0 0; }
  .workspace { grid-template-columns: 1fr; }
  .viewport { height: 58vh; min-height: 340px; }
  aside { border-left: 0; border-top: 1px solid #2a3444; }
}

select { width: 100%; margin-bottom: 12px; padding: 8px; color: inherit; background: #18212e; border: 1px solid #344155; border-radius: 6px; }

#fixture-version { display: inline; margin: 0; color: inherit; font-size: inherit; }

aside { max-height: clamp(450px, 74vh, 860px); overflow-y: auto; }
@media (max-width: 760px) { aside { max-height: none; overflow: visible; } }

#frame-rate { position: absolute; top: 22px; right: 18px; padding: 5px 8px; border-radius: 4px; background: #10151ecc; color: #c9e4d9; font: 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; pointer-events: none; }

.component-table { overflow-x: auto; font-size: 0.7rem; }
.component-table td, .component-table th { padding: 0.3rem; text-align: left; vertical-align: top; }
.shape-aabb { color: #51cfff; }
.shape-obb { color: #cb83ff; }
.shape-sphere { color: #66ee80; }
.shape-cylinder { color: #ffb344; }
.collision-error { color: #ff5555; }

#gpu-time { position: absolute; top: 52px; right: 18px; padding: 5px 8px; border-radius: 4px; background: #10151ecc; color: #c9e4d9; font: 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; pointer-events: none; }

@media (max-width: 760px) { #gpu-time { top: 72px; } }