:root{--hue-base: 285;--hue-success: 140;--hue-critical: 25;--bg-app: oklch(18% 0 var(--hue-base));--bg-panel: oklch(18% .03 var(--hue-base));--border-subtle: oklch(25% .04 var(--hue-base));--text-heading: oklch(95% .01 var(--hue-base));--text-body: oklch(88% .01 var(--hue-base));--text-meta: oklch(70% .02 var(--hue-base));--accent-label: oklch(65% .15 var(--hue-base));--accent-sub-label: oklch(55% .15 var(--hue-base));--color-number: oklch(80% .08 var(--hue-success));--color-critical: oklch(65% .2 var(--hue-critical));--bg-toolbar: oklch(18% .03 var(--hue-base));--text-toolbar: oklch(92% .01 var(--hue-base));--gap-half: .25rem;--gap-1: .5rem;--gap-2: 1rem;--gap-3: 1.5rem;--gap-4: 2rem;--text-ratio: 1.25;--text-base-size: 1rem;--text-sm: calc(var(--text-base-size) / var(--text-ratio));--text-base: var(--text-base-size);--text-lg: calc(var(--text-base-size) * var(--text-ratio));--text-xl: calc(var(--text-lg) * var(--text-ratio));--text-2xl: calc(var(--text-xl) * var(--text-ratio));--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px}.observables-container{column-gap:var(--gap-2);row-gap:var(--gap-1);font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--text-sm);background:var(--bg-panel);color:var(--text-body);padding:var(--gap-2);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.observables-header{padding-top:var(--gap-2);padding-bottom:var(--gap-half);border-bottom:1px solid var(--border-subtle);color:var(--text-meta);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em}.observables-label{color:var(--accent-label)}.observables-component-label{color:var(--accent-sub-label);text-align:right}.observables-value{color:var(--color-number);text-align:right}main{margin-top:var(--gap-2)}.app-layout{display:grid;grid-template-columns:100px 800px 400px;grid-template-rows:min-content min-content;gap:var(--gap-2);background-color:var(--bg-app);min-height:100vh;justify-content:center;align-content:start}.controls{grid-column:2;display:flex;align-items:center;gap:var(--gap-2);color:var(--text-body)}.canvas-container{grid-column:2;height:600px}.canvas-container canvas{background:#000;cursor:crosshair;border-radius:var(--radius-md);border:1px solid var(--border-subtle);user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none}.brushes-panel{grid-column:1;grid-row:2;align-self:start}.side-panel{grid-column:3;grid-row:2;align-self:start}.btn{background:var(--bg-panel);color:var(--text-body);border:1px solid var(--border-subtle);padding:var(--gap-1) var(--gap-2);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-size:var(--text-sm)}.btn:hover{border-color:var(--accent-sub-label)}.toggle{display:flex;align-items:center;gap:var(--gap-1);font-size:var(--text-sm);cursor:pointer;user-select:none;color:var(--text-meta)}.toggle input[type=checkbox]{cursor:pointer;accent-color:var(--accent-sub-label)}.top-stats{font-family:JetBrains Mono,monospace;font-size:var(--text-sm);color:var(--text-meta);font-variant-numeric:tabular-nums;display:inline-block;min-width:50px}.top-nav{display:flex;align-items:center;background-color:var(--bg-toolbar);border-bottom:1px solid var(--border-subtle);padding:var(--gap-1) var(--gap-2)}.system-dropdown{background-color:var(--bg-panel);color:var(--text-body);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--gap-half) var(--gap-1);font-family:inherit;font-size:var(--text-sm);cursor:pointer}.system-dropdown:hover{border-color:var(--accent-sub-label)}.system-dropdown:focus{outline:1px solid var(--accent-sub-label)}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-app);color:var(--text-body);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);line-height:1.2}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4{font-size:var(--text-base)}h5,h6{font-size:var(--text-sm)}small{color:var(--text-meta);font-size:var(--text-sm)}