/* The model's colours, in light and dark, and its panel. */
:root { --paper:#EEF0EC; --sheet:#FAFBF8; --face:#E9E4D0; --floor:#F1F2EC; --brick:#A9786A; --stonef:#C9A79A; --reveal:#7E584C; --woodc:#7A3E22; --doorc:#8E4A28; --marble:#ECE8DD; --mirror:#9DB6BF; --ceil:#F4F0DF; --tile:#B9B39C; --trim:#6A3A22; --dado:#6E7672; --ink:#1B211E; --ink2:#4C5650; --rule:#C6CDC6; --wall:#5D6B64; --stone:#A8558B; --door:#B4430E; --glass:#1F7F97; --tj:#2A7A4B; --bar:#20261F; --path:#5A4FC4; --wait:#B9740B; --out:#00806F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#141816; --sheet:#1B201D; --face:#333B36; --floor:#232925; --brick:#7A5044; --stonef:#8F7468; --reveal:#553A30; --woodc:#8C5230; --doorc:#A66038; --marble:#C9C5BA; --mirror:#5F7983; --ceil:#3A3D36; --tile:#5C5A4D; --trim:#B47A52; --dado:#4A514D; --ink:#E7EBE6; --ink2:#A5AFA8; --rule:#38413B; --wall:#9AA8A0; --stone:#D88ABD; --door:#F0894F; --glass:#62BCD3; --tj:#5FC285; --bar:#D8DDD6; --path:#A49CF2; --wait:#E5A83F; --out:#3FC9B6; color-scheme:dark } }
:root[data-theme="dark"] { --paper:#141816; --sheet:#1B201D; --face:#333B36; --floor:#232925; --brick:#7A5044; --stonef:#8F7468; --reveal:#553A30; --woodc:#8C5230; --doorc:#A66038; --marble:#C9C5BA; --mirror:#5F7983; --ceil:#3A3D36; --tile:#5C5A4D; --trim:#B47A52; --dado:#4A514D; --ink:#E7EBE6; --ink2:#A5AFA8; --rule:#38413B; --wall:#9AA8A0; --stone:#D88ABD; --door:#F0894F; --glass:#62BCD3; --tj:#5FC285; --bar:#D8DDD6; --path:#A49CF2; --wait:#E5A83F; --out:#3FC9B6; color-scheme:dark }
.model { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--ds-space-3); margin: var(--ds-space-5) 0 var(--ds-space-2); font-size: 13px; line-height: 1.3 }
.model-side { min-width: 0 }
.model-side h2 { margin: 0 0 var(--ds-space-1); font-family: var(--ds-font-mono); font-size: 12px; font-weight: 500; color: var(--ds-text-2) }
.model-views { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: var(--ds-space-3) }
.model-views button { padding: 2px 7px; border: 1px solid var(--ds-rule); border-radius: 2px; background: none; color: inherit; font: inherit; cursor: pointer }
.model-views button:hover { background: var(--ds-rule) }
.model-views button[aria-pressed="true"] { background: var(--ds-text); border-color: var(--ds-text); color: var(--ds-bg) }
.model-layers label { display: flex; align-items: center; gap: 6px; padding: 1px 0; cursor: pointer }
.model-layers i { flex: none; width: 12px; height: 3px }
.model-layers input { flex: none; margin: 0 }
.model-tint { display: flex; align-items: center; gap: 6px; margin-top: var(--ds-space-2) }
.model-tint input { flex: 1; min-width: 0 }
.model-stage { position: relative; height: min(76vh, 760px); min-height: 420px; min-width: 0; overflow: hidden; border: 1px solid var(--ds-rule); background: var(--sheet) }
.model-stage canvas { display: block; width: 100%; height: 100%; touch-action: none }
.model-hud { position: absolute; left: 10px; bottom: 8px; right: 44px; font: 12px var(--ds-font-mono); color: var(--ink2); pointer-events: none }
.model-tools { position: absolute; right: 6px; top: 6px }
@media (width <= 820px) { .model { grid-template-columns: minmax(0, 1fr) } .model-stage { order: -1; height: 62vh } }