:root {
  color-scheme: dark;
  --ink: #def6e9;
  --muted: #8aa99b;
  --line: #1b3830;
  --surface: #081412;
  --canvas: #07110e;
  --oyster: #040c0b;
  --navy: #75f0b3;
  --navy-soft: #132d23;
  --ok: #75f0b3;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --workspace-max-width: 127.5rem;
  --workspace-inset: 1.75rem;
  --inspector-width: 20rem;
  --workspace-gap: 1.125rem;
  font-family: var(--mono);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; color: var(--ink); background: var(--oyster); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 15% 0, #10382b55, transparent 55%); }
button, input { font: inherit; }
button { color: inherit; }
a { color: var(--navy); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 0.125rem solid var(--navy); outline-offset: 0.25rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: 8.85rem; height: 2.25rem; object-fit: contain; object-position: left center; filter: brightness(0) saturate(100%) invert(88%) sepia(20%) saturate(778%) hue-rotate(88deg) brightness(101%) contrast(88%) drop-shadow(0 0 0.125rem #75f0b366) drop-shadow(0 0 0.375rem #75f0b326); }
.badge-dot,.overlay-dot { display: inline-block; width: 0.3125rem; height: 0.3125rem; background: var(--navy); box-shadow: 0 0 0.5625rem #75f0b35c; flex: none; }
main { width: 100%; max-width: var(--workspace-max-width); margin: 0 auto; padding: 1.125rem var(--workspace-inset) 1.5rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--inspector-width); align-items: start; gap: var(--workspace-gap); }
.stage-column { min-width: 0; }
.mode-bar { min-height: 2.375rem; display: flex; align-items: center; gap: 0; border: 0.0625rem solid var(--line); border-bottom: 0; background: #091711; position: relative; }
.mode-tab { border: 0; border-right: 0.0625rem solid var(--line); background: transparent; padding: 0.75rem 1rem; color: var(--muted); font-size: 0.625rem; letter-spacing: .035em; cursor: pointer; position: relative; transition: color .18s, background .18s; }
.mode-tab:hover { color: var(--ink); background: #10251b; }
.mode-tab.is-active { color: var(--navy); background: #13291e; box-shadow: inset 0 -0.125rem var(--navy); }
.mode-state { margin-left: auto; padding: 0 0.875rem; color: var(--muted); font-size: 0.5625rem; }
.model-mode,.reference-mode { animation: settle-in .45s ease both; }
.model-stage,.reference-stage { height: clamp(26.25rem, calc(100svh - 17.5rem), 50rem); position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #163b2b 0, #0a1d16 44%, #06110d 90%); border: 0.0625rem solid var(--line); }
.model-stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .025; background: repeating-linear-gradient(0deg, #9ef3ba 0, #9ef3ba 0.0625rem, transparent 0.0625rem, transparent 0.25rem); }
.model-stage.is-dragover { box-shadow: inset 0 0 0 0.125rem var(--navy); }
#model-canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.scene-grid { position: absolute; z-index: 0; width: 140%; height: 85%; left: -20%; bottom: -20%; pointer-events: none; background-image: linear-gradient(#6dc78b22 0.0625rem, transparent 0.0625rem),linear-gradient(90deg, #6dc78b22 0.0625rem, transparent 0.0625rem); background-size: 3rem 3rem; transform: perspective(40.625rem) rotateX(55deg); transform-origin: center; mask-image: linear-gradient(transparent, #000 38%, #000 70%, transparent); }
.scene-frame { position: absolute; inset: 1.3125rem; z-index: 3; pointer-events: none; background: linear-gradient(var(--navy),var(--navy)) top left/1.5rem 0.0625rem no-repeat,linear-gradient(var(--navy),var(--navy)) top left/0.0625rem 1.5rem no-repeat,linear-gradient(var(--navy),var(--navy)) top right/1.5rem 0.0625rem no-repeat,linear-gradient(var(--navy),var(--navy)) top right/0.0625rem 1.5rem no-repeat,linear-gradient(var(--navy),var(--navy)) bottom left/1.5rem 0.0625rem no-repeat,linear-gradient(var(--navy),var(--navy)) bottom left/0.0625rem 1.5rem no-repeat,linear-gradient(var(--navy),var(--navy)) bottom right/1.5rem 0.0625rem no-repeat,linear-gradient(var(--navy),var(--navy)) bottom right/0.0625rem 1.5rem no-repeat; opacity: .64; }
.scene-frame-label { position: absolute; top: 0.4375rem; right: 0.875rem; font-size: 0.5625rem; letter-spacing: .15em; color: var(--navy); }
.scene-axis { position: absolute; bottom: 3.375rem; right: 0.6875rem; font-size: 0.6875rem; color: var(--navy); letter-spacing: .12em; }
.scene-ruler { position: absolute; z-index: 2; top: 5.9375rem; bottom: 5.9375rem; width: 0.4375rem; left: 1.75rem; pointer-events: none; opacity: .34; border-left: 0.0625rem solid var(--navy); background: repeating-linear-gradient(0deg, var(--navy) 0, var(--navy) 0.0625rem, transparent 0.0625rem, transparent 1.0625rem); }
.scene-readout,.scene-selection { z-index: 3; position: absolute; bottom: 2.125rem; pointer-events: none; display: grid; gap: 0.4375rem; font-size: 0.625rem; }
.scene-readout { left: 2.3125rem; }
.scene-selection { right: 2.25rem; text-align: right; }
.scene-readout > span,.scene-selection > span { color: #80a98f; font-size: 0.5rem; letter-spacing: .16em; }
.scene-readout output,.scene-selection strong { color: #bdebc9; font-weight: 400; letter-spacing: .04em; }
.model-overlay { position: absolute; z-index: 3; top: 1.8125rem; left: 2.1875rem; max-width: calc(100% - 11.5625rem); display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; color: var(--muted); background: #07130dcf; border: 0.0625rem solid #2b4d39; font-size: 0.5625rem; pointer-events: none; }
.model-overlay strong { color: #cce8d7; font-size: 0.5625rem; font-weight: 400; }
.overlay-separator { color: #547262; }
.stage-tools { display: flex; align-items: center; justify-content: space-between; min-height: 3.1875rem; border: 0.0625rem solid var(--line); border-top: 0; gap: 0.625rem; padding: 0.375rem 0.625rem; background: #091610; }
.camera-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1875rem; min-width: 0; }
.tool-button { border: 0.0625rem solid transparent; background: transparent; color: #a2bfae; cursor: pointer; min-height: 1.875rem; padding: 0 0.5rem; font-size: 0.625rem; transition: background .16s, color .16s, border-color .16s; }
.tool-button:not(:disabled):hover { border-color: #365d45; background: #173022; color: var(--navy); }
.tool-button.is-selected,.tool-button[aria-pressed="true"] { color: var(--navy); background: #183825; border-color: #315c40; }
.tool-button:disabled { opacity: .35; cursor: default; }
.reset-button { border-left: 0.0625rem solid var(--line); margin-left: 0.25rem; }
.stage-caption { color: var(--muted); font-size: 0.5625rem; line-height: 1.6; margin: 0.6875rem 0 0; }
.inspector { background: var(--surface); border: 0.0625rem solid var(--line); padding: 1.3125rem 1.1875rem 1rem; display: flex; flex-direction: column; animation: settle-in .55s .08s ease both; }
.inspector-head { padding-bottom: 1.1875rem; border-bottom: 0.0625rem solid var(--line); position: relative; }
.inspector-head::after { content: "+"; position: absolute; right: 0; top: -0.3125rem; font-size: 1.25rem; font-weight: 300; color: var(--navy); }
.eyebrow { margin: 0 0 0.5rem; color: #85b297; letter-spacing: .14em; font-size: 0.5625rem; font-weight: 400; }
.inspector h1 { margin: 0; font-weight: 400; font-size: 1.25rem; letter-spacing: -.05em; color: var(--ink); }
.control-group { margin: 0; min-width: 0; padding: 1.1875rem 0; border: 0; border-bottom: 0.0625rem solid var(--line); }
.control-group legend { display: flex; align-items: center; gap: 0.625rem; padding: 0; width: 100%; font-size: 0.6875rem; font-weight: 400; color: #c4dfcf; }
.control-group legend > span { color: #668d75; font-size: 0.5625rem; }
.choice-list { display: grid; gap: 0.3125rem; margin-top: 0.75rem; }
.choice { display: grid; grid-template-columns: 1.5rem 1fr 0.625rem; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6875rem 0.5625rem; background: #0a1912; border: 0.0625rem solid #1a3326; text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
.choice:hover { background: #11291c; border-color: #386248; }
.choice.is-selected { background: #163324; border-color: #4a8b62; box-shadow: inset 0.125rem 0 var(--navy); }
.choice-number { color: #789e86; font-size: 0.5625rem; }
.choice strong,.signature-row strong { display: block; color: #d5eddd; font-size: 0.75rem; font-weight: 400; }
.choice.is-selected strong { color: var(--navy); }
.choice small,.signature-row small { display: block; margin-top: 0.25rem; font-size: 0.625rem; line-height: 1.4; color: #87a892; }
.choice > i { width: 0.3125rem; height: 0.3125rem; border: 0.0625rem solid #4f6f5b; }
.choice.is-selected > i { border: 0; background: var(--navy); box-shadow: 0 0 0.5rem #75f0b355; }
.swatch-row { display: flex; gap: 1.375rem; margin-top: 0.875rem; }
.swatch-option { display: inline-flex; align-items: center; gap: 0.5625rem; padding: 0.25rem 0.125rem; border: 0; background: transparent; color: #91ad9c; font-size: 0.625rem; cursor: pointer; }
.swatch-option.is-selected { color: var(--ink); }
.swatch { width: 1rem; height: 1rem; border: 0.0625rem solid #56745f; display: block; position: relative; }
.white-swatch { background: #f2f2ef; }
.navy-swatch { background: #003b71; border-color: #316588; }
.swatch-option.is-selected .swatch::after { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid var(--navy); }
.signature-row { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 0.0625rem solid var(--line); }
.switch { position: relative; width: 2.1875rem; height: 1.25rem; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch > span { display: block; height: 1.25rem; border: 0.0625rem solid #45614f; background: #0a1810; transition: background .16s; }
.switch > span::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; height: 0.75rem; width: 0.6875rem; background: #668571; transition: transform .16s, background .16s; }
.switch input:checked + span { background: #1b3c29; border-color: #6ddf9a; }
.switch input:checked + span::after { transform: translateX(0.9375rem); background: var(--navy); }
.switch input:focus-visible + span { outline: 0.125rem solid var(--navy); outline-offset: 0.25rem; }
.design-application-note { margin-top: 0.8125rem; color: var(--muted); font-size: 0.5625rem; line-height: 1.6; }
.model-source-row { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 1.125rem 0; border-bottom: 0.0625rem solid var(--line); }
.model-source-row .eyebrow { margin-bottom: 0.375rem; }
.model-accuracy { margin: 0; color: #819f8b; font-size: 0.5625rem; line-height: 1.5; }
.return-study { flex: none; border-bottom: 0.0625rem solid #40654c !important; }
.import-section { padding: 1.125rem 0; border-bottom: 0.0625rem solid var(--line); }
.import-section h2 { margin: 0; font-size: 0.8125rem; font-weight: 400; }
.import-section > p:not(.eyebrow):not(.status-message) { margin: 0.5625rem 0 0.8125rem; color: var(--muted); font-size: 0.5625rem; line-height: 1.65; }
.primary-button,.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0 0.8125rem; border: 0.0625rem solid #4d9667; background: #1b3e2a; color: var(--navy); font-size: 0.625rem; font-weight: 400; cursor: pointer; transition: background .16s, border-color .16s; }
.primary-button:hover,.secondary-button:hover { background: #2b5538; border-color: var(--navy); }
.status-message { min-height: 0.8125rem; margin: 0.625rem 0 0; color: #8eaf99; font-size: 0.5625rem; line-height: 1.6; overflow-wrap: anywhere; }
.status-message.is-error,.webgl-error { color: #f4b99b; }
.status-message.is-working { color: var(--navy); }
.model-details { padding: 0.9375rem 0; border-bottom: 0.0625rem solid var(--line); }
.detail-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.625rem; padding: 0.3125rem 0; font-size: 0.5625rem; line-height: 1.4; }
.detail-line span { flex: none; color: #7b9c86; }
.detail-line strong { color: #bed7c7; font-weight: 400; text-align: right; overflow-wrap: anywhere; }
.field-help { margin: 0.625rem 0; color: var(--muted); font-size: 0.5625rem; line-height: 1.6; }
.material-group { padding-top: 1.125rem; }
.material-group:disabled,.paint-group:disabled { opacity: .5; }
.material-list { display: grid; gap: 0.1875rem; max-height: 10.9375rem; overflow: auto; scrollbar-width: thin; }
.material-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.25rem; color: #a7c7b1; font-size: 0.625rem; overflow-wrap: anywhere; }
.material-option input { margin: 0; accent-color: var(--navy); flex: none; }
.material-option em { margin-left: auto; color: #73917c; font-size: 0.5rem; font-style: normal; flex: none; }
.empty-materials { margin: 0; color: var(--muted); font-size: 0.5625rem; padding: 0.5625rem 0 0.125rem; }
.paint-group { padding-top: 1.125rem; border-bottom: 0; }
.calibration-note { display: flex; gap: 0.5625rem; border-top: 0.0625rem solid var(--line); padding-top: 0.9375rem; margin-top: 0.125rem; color: #8da693; }
.calibration-note > span { display: grid; place-items: center; flex: none; width: 0.9375rem; height: 0.9375rem; border: 0.0625rem solid #47634f; color: var(--navy); font-size: 0.625rem; }
.calibration-note p { margin: 0; font-size: 0.5625rem; line-height: 1.6; }
.inspector-foot { display: flex; gap: 0.5625rem; align-items: flex-start; margin-top: auto; padding-top: 1.125rem; color: #86a58f; font-size: 0.5625rem; line-height: 1.6; }
.foot-mark { color: var(--navy); font-size: 1rem; line-height: 0.75rem; }
.operator-guide { position: relative; padding: 1.375rem 0 0.3125rem; }
.operator-guide > span { color: #7ea68c; font-size: 0.5rem; letter-spacing: .12em; }
.operator-guide p { color: #a7c5b1; font-size: 0.625rem; line-height: 1.8; margin: 0.5625rem 0 0; white-space: pre-line; }
.operator-guide .guide-cross { position: absolute; bottom: 0.625rem; right: 0.125rem; color: #508265; font-size: 1.5rem; }
.reference-stage { display: grid; place-items: center; background: #0c1b13; }
.reference-stage > img { width: 100%; height: 100%; object-fit: contain; display: block; animation: image-arrive .3s ease both; }
.reference-badge { position: absolute; left: 1rem; top: 1rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.6875rem; color: #c5dfcf; background: #081710ed; border: 0.0625rem solid #3e6049; font-size: 0.5625rem; }
.stage-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.1875rem; height: 2.75rem; border: 0.0625rem solid #476a50; background: #07170fe8; color: var(--navy); font-size: 1.4375rem; cursor: pointer; }
.stage-nav:hover { background: #1c3927; }
.stage-prev { left: 0.875rem; }.stage-next { right: 0.875rem; }
.view-strip { min-height: 4.5rem; display: flex; align-items: stretch; gap: 0.5rem; border: 0.0625rem solid var(--line); border-top: 0; background: #081710; }
.view-chip { flex: 1; min-width: 0; border: 0; border-bottom: 0.125rem solid transparent; background: transparent; display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem; cursor: pointer; color: var(--muted); text-align: left; font-size: 0.625rem; }
.view-chip.is-active { border-bottom-color: var(--navy); background: #122c1c; color: var(--navy); }
.view-thumb { width: 3.625rem; height: 2.625rem; overflow: hidden; background: #13291c; display: block; flex: none; }
.view-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.empty-state { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.625rem; text-align: center; pointer-events: none; background: #07120ee6; }
.empty-state > * { pointer-events: auto; }
.empty-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; position: relative; border: 0.0625rem solid #58896a; transform: rotate(30deg) skew(-7deg); }
.empty-icon span { position: absolute; display: block; width: 0.0625rem; height: 100%; background: #58896a; top: 0; left: 50%; }
.empty-icon span:nth-child(2) { transform: rotate(60deg); }.empty-icon span:nth-child(3) { transform: rotate(-60deg); }
.empty-state h1 { max-width: 23.75rem; font-size: 1.375rem; line-height: 1.3; font-weight: 400; margin: 0; }
.empty-state > p:not(.eyebrow) { max-width: 23.75rem; margin: 0.75rem 0 1.25rem; color: var(--muted); font-size: 0.6875rem; line-height: 1.6; }
.webgl-error { position: absolute; z-index: 5; bottom: 1.125rem; left: 1.125rem; right: 1.125rem; font-size: 0.6875rem; text-align: center; }
.below-fold { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.375rem; padding: 1.0625rem 0 0; border-top: 0.0625rem solid var(--line); }
.below-fold .eyebrow { font-size: 0.5rem; margin-bottom: 0.3125rem; }
.below-fold h2 { margin: 0; font-size: 0.6875rem; font-weight: 400; color: #b4d4bf; }
.below-fold > p { margin: 0; color: #789a83; font-size: 0.5625rem; }
.below-fold > .text-button { margin-left: auto; }
.text-button { border: 0; padding: 0.5rem 0; background: transparent; color: var(--navy); font-size: 0.5625rem; cursor: pointer; line-height: 1.5; }
.text-button span { display: inline-block; margin-left: 0.375rem; transition: transform .16s; }.text-button:hover span { transform: translate(0.125rem,-0.125rem); }
.toast { position: fixed; z-index: 8; bottom: 1.25rem; left: 50%; max-width: calc(100% - 2rem); transform: translate(-50%,0.75rem); padding: 0.75rem 1rem; border: 0.0625rem solid #487451; background: #0b2016; color: #c2ecd0; font-size: 0.625rem; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@keyframes settle-in { from { opacity: .2; transform: translateY(0.4375rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes image-arrive { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 1200px) {
  :root { --inspector-width: 18.125rem; --workspace-gap: 0.8125rem; }
  .inspector { padding: 1.125rem 1rem; }
  .stage-tools { flex-direction: column; align-items: flex-start; gap: 0.3125rem; }
  .model-stage,.reference-stage { height: clamp(25.625rem, calc(100svh - 19.6875rem), 45rem); }
}
@media (max-width: 800px) {
  :root { --workspace-inset: 1rem; --inspector-width: 16.25rem; --workspace-gap: 0.75rem; }
  main { padding: 0.9375rem var(--workspace-inset) 1.5rem; }
  .model-overlay { max-width: calc(100% - 3.4375rem); font-size: 0.5rem; gap: 0.3125rem; }
  .model-overlay strong { font-size: 0.5rem; }
  .model-overlay #model-status,.overlay-separator { display: none; }
  .scene-frame-label { display: none; }
  .scene-selection { bottom: 4.125rem; right: 1.5625rem; left: 1.5625rem; text-align: left; }
  .scene-readout { bottom: 1.8125rem; left: 1.5625rem; }
  .scene-axis { bottom: 1.25rem; }
  .mode-tab { font-size: 0.5625rem; padding: 0.75rem 0.625rem; }
  .mode-state { display: none; }
}
@media (max-width: 680px) {
  .workspace { display: flex; flex-direction: column; gap: 1.0625rem; }
  .stage-column,.inspector { width: 100%; }
  .model-stage,.reference-stage { height: clamp(22.1875rem, 84vw, 29.375rem); }
  .scene-frame { inset: 0.8125rem; }
  .model-overlay { left: 1.4375rem; top: 1.375rem; padding: 0.4375rem 0.5rem; max-width: calc(100% - 2.875rem); }
  .model-overlay strong { font-size: 0.5rem; }
  .scene-ruler { left: 1.1875rem; top: 5.1875rem; bottom: 7.1875rem; }
  .scene-readout,.scene-selection { font-size: 0.5625rem; }
  .scene-selection { bottom: 3.75rem; left: 1.5rem; right: 1.5rem; }
  .scene-readout { bottom: 1.5625rem; left: 1.5rem; }
  .scene-axis { display: none; }
  .stage-tools { padding: 0.5625rem 0.4375rem; }
  .tool-button { padding: 0 0.375rem; min-height: 2.125rem; }
  .inspector { height: auto; min-height: 0; max-height: none; overflow: visible; padding: 1.25rem; }
  .control-group { padding-top: 1.25rem; }
  .choice { min-height: 3.3125rem; }
  .swatch-option { min-height: 2.125rem; }
  .reference-badge { left: 0.625rem; top: 0.625rem; font-size: 0.5rem; padding: 0.4375rem; }
  .stage-prev { left: 0.5625rem; }.stage-next { right: 0.5625rem; }
  .view-chip { flex-direction: column; gap: 0.3125rem; font-size: 0.5625rem; padding: 0.5625rem 0.1875rem; }
  .view-thumb { width: 3.625rem; height: 2.25rem; }
  .below-fold { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.125rem; }
  .below-fold > p { width: 100%; order: 3; }
  .below-fold > .text-button { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Static vehicle title. */
@font-face {
  font-family: "Barlow Condensed Cinema";
  src: url("./assets/fonts/BarlowCondensed-BlackItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}
.vehicle-title { justify-self: center; min-width: 0; margin: 0; color: #e2f0e8; font-family: "Barlow Condensed Cinema", "Arial Narrow", sans-serif; font-weight: 900; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1; letter-spacing: .012em; white-space: nowrap; }

/* Real block spacing: headings sit in normal flow below the preceding divider. */
.reference-controls > .control-group { padding: 1.5rem 0; }
.control-heading { display: flex; align-items: baseline; gap: 0.625rem; margin: 0 0 1.125rem; color: #c4dfcf; font-size: 0.6875rem; line-height: 1.5; font-weight: 400; }
.control-heading > span { color: #789e86; font-size: 0.5625rem; }
.reference-controls .choice-list { margin-top: 0; gap: 0.375rem; }
.reference-controls .swatch-row { margin-top: 0; }
.signature-row { min-height: 5rem; }
@media (max-width: 680px) {
  .reference-controls > .control-group { padding: 1.5rem 0; }
}

/* Keep the established console density while making functional copy readable. */
.control-heading { font-size: 0.75rem; }
.control-heading > span, .choice-number { font-size: 0.6875rem; }
.choice small, .signature-row small { font-size: 0.6875rem; line-height: 1.5; }
.swatch-option, .tool-button, .mode-tab, .view-chip, .text-button { font-size: 0.6875rem; }
.inspector .eyebrow, .operator-guide > span, .operator-guide p { font-size: 0.6875rem; }
.scene-readout, .scene-selection, .scene-readout > span, .scene-selection > span, .reference-badge { font-size: 0.6875rem; }

/* Match the real scene and inspector columns, including the workspace cap. */
.topbar { min-height: 4.5rem; display: flex; align-items: center; border-bottom: 0.0625rem solid var(--line); background: #060f0df2; }
.header-inner { width: 100%; max-width: var(--workspace-max-width); margin: 0 auto; padding: 0.625rem var(--workspace-inset); display: grid; grid-template-columns: minmax(0, 1fr) var(--inspector-width); align-items: center; gap: var(--workspace-gap); }
.header-scene { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; min-width: 0; }
.header-scene .brand { justify-self: start; }
.header-scene .brand img { width: clamp(6.75rem, 14vw, 11.75rem); height: auto; }
@media (max-width: 900px) {
  .header-scene { column-gap: 0.5rem; }
}
@media (max-width: 680px) {
  .topbar { min-height: 5.5rem; }
  .header-inner { grid-template-columns: minmax(0, 1fr); padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .header-scene { row-gap: 0.375rem; }
  .header-scene .brand { grid-row: 1; grid-column: 1 / -1; }
  .header-scene .brand img { width: 9.25rem; }
  .vehicle-title { grid-row: 2; grid-column: 1 / -1; font-size: 1.375rem; }
}

/* The scene owns the available screen; the inspector scrolls independently. */
:root { font-size: clamp(16px, 0.833333333vw, 32px); --workspace-max-width: none; }
html { height: 100%; }
body { height: 100dvh; min-height: 24rem; display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: none; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 1.125rem; }
.workspace { flex: 1; min-height: 0; align-items: stretch; }
.stage-column { display: flex; flex-direction: column; min-height: 0; }
.mode-bar { flex: none; }
.model-mode, .reference-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.model-stage, .reference-stage { flex: 1; height: auto; min-height: 0; }
.stage-tools, .view-strip { flex: none; }
.inspector { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #45614f var(--surface); }
.vehicle-title { font-size: clamp(1.25rem, 2vw, 1.875rem); }
.header-scene .brand img { width: clamp(6.75rem, 14vw, 11.75rem); }
.loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; padding: 1.5rem; background: var(--oyster); }
.loading-panel { width: min(28rem, calc(100vw - 3rem)); }
.loading-panel h2 { margin: 0 0 1rem; font-weight: 400; font-size: 1.25rem; line-height: 1.4; }
.loading-panel p { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.loading-panel progress { display: block; width: 100%; height: .5rem; appearance: none; border: 0; background: var(--line); accent-color: var(--ok); }
.loading-panel progress::-webkit-progress-bar { background: var(--line); }
.loading-panel progress::-webkit-progress-value { background: var(--ok); }
.loading-panel progress::-moz-progress-bar { background: var(--ok); }
.loading-detail { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; margin-top: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
body:not([data-ready]) main { visibility: hidden; }
@media (max-width: 680px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  main { flex: none; }
  .workspace { flex: none; }
  .stage-column { min-height: calc(100dvh - 8rem); }
  .model-stage, .reference-stage { min-height: 18rem; }
  .inspector { overflow: visible; }
  .vehicle-title { font-size: 1.375rem; }
  .header-scene .brand img { width: 9.25rem; }
  .tool-button, .mode-tab, .swatch-option { min-height: 2.75rem; }
}

.header-inner { position: relative; }
.fullscreen-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: .5rem; min-height: 2.75rem; border-color: var(--line); padding: .5rem .75rem; }
.fullscreen-toggle svg { width: 1.25rem; height: 1.25rem; flex: none; }
.loading-actions { margin-top: 1.5rem; }
.loading-actions button { min-height: 2.75rem; margin: .25rem .25rem .25rem 0; }
.inspector > * { flex-shrink: 0; }
@media (max-width: 680px) {
  .fullscreen-toggle { position: absolute; top: .5rem; right: var(--workspace-inset); }
  .fullscreen-label { display: none; }
}

/* A recoverable presentation view: only the canvas and restore control remain. */
.controls-toggle { position: fixed; z-index: 20; bottom: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .625rem .875rem; border-color: #45614f; background: var(--surface); color: var(--ink); }
.controls-toggle svg { width: 1.25rem; height: 1.25rem; flex: none; }
body.controls-hidden .topbar,
body.controls-hidden .inspector,
body.controls-hidden .mode-bar,
body.controls-hidden .stage-tools,
body.controls-hidden .view-strip { display: none; }
body.controls-hidden main { position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; display: flex; }
body.controls-hidden .workspace { display: flex; flex: 1; min-height: 0; gap: 0; }
body.controls-hidden .stage-column { flex: 1; width: 100%; min-height: 0; }
body.controls-hidden .model-stage,
body.controls-hidden .reference-stage { min-height: 0; border: 0; }