:root { color-scheme: dark; font-family: var(--font-ui); background: var(--bg-app); color: var(--fg1); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-app); }
button { border: 1px solid var(--border-hair); border-radius: var(--r-sm); background: transparent; color: var(--fg2); padding: var(--sp-2) var(--sp-3); font: var(--fw-semibold) var(--fs-body-sm)/var(--lh-snug) var(--font-ui); cursor: pointer; }
button:hover { border-color: var(--border-strong); color: var(--fg1); }
button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
main { min-height: 100vh; display: grid; grid-template: auto auto minmax(34rem, 1fr) / 1fr 20rem; }
header { grid-column: 1 / -1; min-height: 64px; padding: var(--sp-3) var(--sp-gutter); border-bottom: 1px solid var(--border-hair); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
h1, h2, p, dl, dd, ol { margin: 0; }
h1 { margin-top: var(--sp-1); font: var(--fw-semibold) var(--fs-pane)/var(--lh-snug) var(--font-ui); letter-spacing: -0.01em; }
h2 { margin-top: var(--sp-6); font: var(--fw-semibold) var(--fs-pane)/var(--lh-snug) var(--font-ui); }
.eyebrow { color: var(--fg-muted); font: var(--fw-semibold) var(--fs-label)/var(--lh-snug) var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase; }
.actions { display: flex; gap: var(--sp-2); }
nav { grid-column: 1 / -1; min-height: 58px; display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-gutter); border-bottom: 1px solid var(--border-hair); }
.source { min-width: 14rem; text-align: left; }
.source span, .source small { display: block; }
.source small { margin-top: 2px; color: var(--fg-muted); font: var(--fs-small)/var(--lh-snug) var(--font-mono); }
.source.selected { border-color: var(--action); color: var(--action); }
.viewport { grid-column: 1; grid-row: 3; position: relative; min-width: 0; min-height: 0; }
canvas { width: 100%; height: 100%; display: block; background: var(--bg-app); }
.status { position: absolute; inset: var(--sp-4) auto auto var(--sp-4); max-width: 36rem; border: 1px solid var(--border-hair); border-radius: var(--r-sm); background: var(--bg-float); box-shadow: var(--shadow-float); padding: var(--sp-3) var(--sp-4); color: var(--fg2); font: var(--fs-meta)/1.5 var(--font-mono); }
.status.error { border-color: var(--rejected-chip); color: var(--rejected-chip); }
.controls { position: absolute; left: var(--sp-4); bottom: var(--sp-4); color: var(--fg-muted); font: var(--fs-small)/var(--lh-snug) var(--font-mono); }
aside { grid-column: 2; grid-row: 3; overflow-y: auto; border-left: 1px solid var(--border-hair); padding: var(--sp-5) var(--sp-gutter); }
.warning { border-top: 2px solid var(--rejected-chip); padding-top: var(--sp-3); }
.warning strong { display: block; margin-top: var(--sp-2); color: var(--rejected-chip); font: var(--fw-semibold) var(--fs-body-sm)/var(--lh-snug) var(--font-ui); }
.warning p:last-child { margin-top: var(--sp-2); color: var(--fg3); font: var(--fs-small)/var(--lh-normal) var(--font-ui); }
dl { margin-top: var(--sp-2); }
dt { margin-top: var(--sp-4); color: var(--fg-muted); font: var(--fw-semibold) var(--fs-label)/var(--lh-snug) var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-label); }
dd { margin-top: var(--sp-1); color: var(--fg3); font: var(--fs-meta)/1.5 var(--font-mono); overflow-wrap: anywhere; }
ol { padding: 0; list-style: none; }
li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-hair); color: var(--fg-muted); font: var(--fs-small)/1.4 var(--font-mono); }
@media (max-width: 820px) { main { grid-template: auto auto minmax(28rem, 1fr) auto / 1fr; } .viewport { grid-column: 1; grid-row: 3; } aside { grid-column: 1; grid-row: 4; border: 0; border-top: 1px solid var(--border-hair); } header { align-items: flex-start; } nav { overflow-x: auto; } }