:root{--paper:#f5f3ef;--ink:#1b1a18;--muted:#6d6862;--rule:#d8d3ca;--panel:#fbfaf8;--accent:#2f6fd0;--good:#1d7a4c;--bad:#a8321f;--side:372px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:13px}.app{grid-template-columns:var(--side) 1fr;height:100%;display:grid}.side{border-right:1px solid var(--rule);background:var(--panel);padding:20px 18px 28px;overflow-y:auto}.brand h1{letter-spacing:-.01em;margin:0;font-family:Charter,Charter BT,Georgia,serif;font-size:21px;font-weight:600}.brand .sub{color:var(--muted);margin:4px 0 0;font-size:12px;line-height:1.45}.group{border-top:1px solid var(--rule);margin-top:20px;padding-top:14px}.group h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px;font-family:Charter,Charter BT,Georgia,serif;font-size:13px;font-weight:600}.ctl{margin-bottom:13px;display:block}.ctl-head{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;display:flex}.ctl-label{font-size:12px}.ctl-value{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;font-size:12px}.ctl-inline{align-items:center;gap:8px;display:flex}.ctl input[type=range]{width:100%;accent-color:var(--accent);margin:0}.ctl select{width:100%;font:inherit;border:1px solid var(--rule);background:#fff;border-radius:4px;margin-top:4px;padding:5px 6px;font-size:12px}.ctl input[type=color]{border:1px solid var(--rule);background:0 0;border-radius:3px;width:34px;height:22px;padding:0}.presets{gap:6px;display:grid}.preset{text-align:left;border:1px solid var(--rule);cursor:pointer;font:inherit;background:#fff;border-radius:5px;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;display:flex}.preset:hover{border-color:var(--accent)}.preset strong{font-family:Charter,Charter BT,Georgia,serif;font-size:13px;font-weight:600}.preset span{color:var(--muted);font-size:11px;line-height:1.35}.preset.active{border-color:var(--ink);background:var(--ink);color:#fff}.preset.active span{color:#ffffffb8}.actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;display:grid}.actions button{font:inherit;border:1px solid var(--rule);cursor:pointer;background:#fff;border-radius:5px;padding:8px 10px;font-size:12px}.actions button:hover{border-color:var(--accent)}.note{color:var(--muted);margin:16px 0 0;font-size:11px;line-height:1.55}.stage{position:relative}.stage canvas{display:block}.toolbar{z-index:5;pointer-events:none;justify-content:space-between;gap:10px;display:flex;position:absolute;top:14px;left:14px;right:14px}.toolbar>*{pointer-events:auto}.views,.toggles{border:1px solid var(--rule);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fbfaf8eb;border-radius:6px;gap:4px;padding:4px;display:flex}.views-label{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);align-self:center;padding:0 6px 0 4px;font-size:10px}.views button{font:inherit;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:5px 10px;font-size:11.5px}.views button:hover{background:#ebe7e0}.toggles label{align-items:center;gap:5px;padding:5px 8px;font-size:11.5px;display:flex}.readout{z-index:5;border:1px solid var(--rule);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fbfaf8f0;border-radius:6px;gap:2px;max-width:calc(100% - 28px);display:flex;position:absolute;bottom:14px;left:14px;overflow-x:auto}.metric{border-right:1px solid var(--rule);flex-direction:column;flex:none;gap:2px;padding:9px 14px;display:flex}.metric:last-child{border-right:none}.m-label{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap;font-size:10px}.m-value{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}.metric.warn .m-value,.metric.warn .m-label{color:var(--bad)}