/* Minimal developer theme. */
:root{color-scheme:light;--bg:#fafafa;--surface:#ffffff;--surface-2:#f4f4f5;--border:#e4e4e7;--text:#18181b;--muted:#71717a;--faint:#a1a1aa;--accent:#18181b;--accent-soft:#e4e4e7;--accent-border:#d4d4d8;--accent-ink:#ffffff;--success:#2563eb;--danger:#dc2626;--link:#2563eb}
:root.dark{color-scheme:dark;--bg:#09090b;--surface:#111113;--surface-2:#18181b;--border:#27272a;--text:#fafafa;--muted:#a1a1aa;--faint:#71717a;--accent:#fafafa;--accent-soft:#27272a;--accent-border:#3f3f46;--accent-ink:#18181b;--success:#60a5fa;--danger:#f87171;--link:#60a5fa}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px system-ui,sans-serif}header,main{max-width:1200px;margin:auto;padding:16px 24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}h1{font-size:22px;margin:0}h2{font-size:14px;margin:0 0 12px}p{color:var(--muted);line-height:1.6;margin:6px 0 12px}button,select,input[type=number]{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:3px;height:32px;padding:4px 8px}button{cursor:pointer}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}.primary{background:var(--accent);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toolbar,.bar,.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.bar{margin:12px 0}.bar #live{margin-right:auto;color:var(--muted)}label{display:flex;align-items:center;gap:6px}input[type=checkbox]{accent-color:var(--accent)}input[type=number]{width:76px}#message{min-height:34px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:3px}#message.error{color:var(--danger)}.halves{display:grid;grid-template-columns:1fr 1fr;gap:12px}.half,.settings section{padding:12px;border:1px solid var(--border);border-radius:4px}.half-head{display:flex;justify-content:space-between;align-items:center}.half-head span{color:var(--muted)}.surface{background:var(--surface);border:1px solid var(--border);border-radius:3px;margin-bottom:12px;overflow:hidden;aspect-ratio:160/114.9}svg{width:100%;height:100%;display:block;overflow:visible}svg .key{cursor:pointer}svg rect{fill:var(--surface-2);stroke:var(--accent-border);stroke-width:90}svg text{fill:var(--text);font:850px system-ui;text-anchor:middle;dominant-baseline:middle;pointer-events:none}svg .key.selected rect{stroke:var(--accent);stroke-width:180}svg .key.active rect{fill:var(--accent-soft);stroke:var(--success);stroke-width:180}.touches{pointer-events:none}.touches circle{fill:var(--accent);stroke:var(--accent-ink);stroke-width:100;opacity:.85}.touches text{fill:var(--accent-ink);font-size:600px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.settings .controls{margin:10px 0;align-items:flex-end}.settings .controls label{flex-direction:column;align-items:flex-start}fieldset{border:0;padding:0;margin:0}footer{color:var(--faint);padding:16px 0 0}.saving{opacity:.6}@media(max-width:900px){header,main{padding:12px}.settings{grid-template-columns:1fr}.controls{gap:8px}}@media(max-width:650px){header{align-items:flex-start;gap:12px;flex-direction:column}.halves{grid-template-columns:1fr}.toolbar{gap:6px}#connection{width:100%}.bar{align-items:flex-start}.bar #live{width:100%}}

.surface svg text,.surface svg .touches circle{transform-box:fill-box;transform-origin:center;transform:scaleX(var(--text-scale,1))}

[hidden]{display:none!important}
header{padding-top:12px;padding-bottom:12px}h1{font-size:20px}
.bar{margin:10px 0}.half-head h2{margin-bottom:8px}.surface{margin-bottom:8px}
summary{cursor:pointer;color:var(--muted);padding:8px 0;font-size:12px}summary:hover{color:var(--text)}
details.device-settings .controls{padding:8px 0 4px}
.settings{display:flex;flex-direction:column;gap:10px}.behavior{order:2;border-top:1px solid var(--border)}
.details-body{padding:8px 0 12px}.details-body>.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.details-body>.controls label{flex-direction:column;align-items:flex-start;gap:6px}
#editor{order:1}.key-geometry{border-top:1px solid var(--border);margin-top:10px}
#editor>.controls,#keyFields>.controls{align-items:flex-end}#keyFields>.controls button{margin-bottom:0}
#message{min-height:32px;background:transparent;border:0;padding:6px 0;color:var(--muted)}

body{font-size:13px;-webkit-font-smoothing:antialiased}
header{background:var(--surface)}h1{font-size:18px;letter-spacing:-.5px;font-weight:650}
.half,.settings section{background:var(--surface)}.surface{background:var(--bg)}
button{font-weight:500}.primary{border-color:var(--accent)}
#connection,#live,.half-head span{font:11px ui-monospace,SFMono-Regular,Consolas,monospace}
summary{font-weight:500}footer{font-size:11px}

.device-settings .controls{padding-top:4px}
.behavior h2{margin:0}.behavior{padding:12px!important}
.key-geometry{padding-top:10px}.key-geometry h3{font-size:12px;font-weight:500;margin:0 0 10px;color:var(--muted)}