:root {
  --bg: #14161a; --panel: #1d2026; --line: #2c3038; --text: #e7e9ee; --muted: #8b919c;
  --accent: #f5a524; --accent2: #3fb8af; --q1: #f5a524; --q2: #7aa2ff; --key-w: #eceef2; --key-b: #23262c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
h1 { margin: 0; font-size: 20px; letter-spacing: .02em; }
h1 span { color: var(--accent); }
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; }
.dot.ok { background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.panel h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
select, button { background: #262a31; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.active { background: var(--accent); color: #1a1200; border-color: var(--accent); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.top { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 800px) { .two, .top { grid-template-columns: 1fr; } }

.qubit { display: grid; gap: 8px; }
.qubit h3 { margin: 0; font-size: 14px; }
.qubit canvas { width: 100%; aspect-ratio: 1; max-width: 300px; justify-self: center; }
.meters { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; font-size: 12px; align-items: center; }
.meters .bar { height: 6px; background: #2a2e36; border-radius: 3px; overflow: hidden; }
.meters .bar i { display: block; height: 100%; background: currentColor; }
.meters .num { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.5em; text-align: right; }
.qbtns { display: flex; gap: 8px; flex-wrap: wrap; }

.knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.knobs.k2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .knobs { grid-template-columns: repeat(2, 1fr); } }
.knob { display: grid; gap: 4px; }
.knob .lbl { display: flex; justify-content: space-between; font-size: 12px; }
.knob .val { color: var(--accent); font-variant-numeric: tabular-nums; }
.knob input { width: 100%; accent-color: var(--accent); }
.cc { font-size: 11px; color: var(--muted); background: none; border: 1px dashed var(--line); padding: 1px 6px; border-radius: 4px; justify-self: start; }
.cc.learning { color: var(--bg); background: var(--accent); border-color: var(--accent); animation: blink .6s infinite alternate; }
@keyframes blink { to { opacity: .55; } }
.knob.flash input { accent-color: var(--accent2); }
.cc.hit { background: var(--accent2); color: #08201e; border-color: var(--accent2); }
.qbtns .cc, .row .cc { align-self: center; }

.patch { display: grid; grid-template-columns: 110px 150px 1fr 1fr 90px; gap: 6px 10px; align-items: center; font-size: 12px; }
.patch .hd { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.patch input { width: 100%; accent-color: var(--accent2); }
.patch .live { font-variant-numeric: tabular-nums; color: var(--accent2); text-align: right; }
@media (max-width: 700px) { .patch { grid-template-columns: 1fr 1fr; } .patch .hd { display: none; } }

.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pad { aspect-ratio: 1; border-radius: 8px; background: #2a2e36; border: 1px solid var(--line); display: grid; place-items: center;
       font-size: 11px; color: var(--muted); user-select: none; cursor: pointer; transition: background .25s, box-shadow .25s; text-align: center; padding: 4px; }
.pad.q { border-color: #4a4f5a; color: var(--text); }
.pad.hit { background: var(--accent2); color: #08201e; box-shadow: 0 0 16px var(--accent2); transition: none; }

.kbd-wrap { overflow-x: auto; }
.kbd { position: relative; height: 150px; min-width: 600px; user-select: none; touch-action: none; }
.key { position: absolute; top: 0; border: 1px solid #0006; border-radius: 0 0 6px 6px; cursor: pointer; }
.key.w { background: var(--key-w); height: 100%; z-index: 1; }
.key.b { background: var(--key-b); height: 62%; z-index: 2; }
.key.on.w { background: var(--accent); }
.key.on.b { background: #c47f10; }
.key .nm { position: absolute; bottom: 6px; width: 100%; text-align: center; font-size: 10px; color: #777; }

.log { font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--muted); height: 110px; overflow: hidden; white-space: pre; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

#start { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 10; }
#start button { font-size: 18px; padding: 14px 28px; background: var(--accent); color: #1a1200; border: none; font-weight: 600; }

/* Quantenraum (3D) */
.space-panel { padding: 0; overflow: hidden; }
#space { position: relative; height: 66vh; min-height: 420px; background: #05060a; }
#space:fullscreen { height: 100vh; border-radius: 0; }
#space > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.space-ui { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
            z-index: 2; font-size: 12px; pointer-events: none; }
.space-ui > * { pointer-events: auto; }
.space-ui select, .space-ui button { background: #0d0f15cc; backdrop-filter: blur(6px); }
.space-ui input[type=range] { vertical-align: middle; accent-color: var(--accent); }
.space-editor { position: absolute; top: 52px; right: 10px; bottom: 10px; width: min(540px, calc(100% - 20px)); z-index: 3;
                background: #0b0d13e6; backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 10px;
                padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.space-editor[hidden] { display: none; }
.ed-head { font-size: 12px; color: var(--muted); }
.space-editor textarea { flex: 1; min-height: 160px; background: #05060a; color: #d7e3ff; border: 1px solid var(--line); border-radius: 6px;
                         font: 12px/1.5 ui-monospace, Consolas, monospace; padding: 8px; resize: none; tab-size: 2; }
#shaderErr { color: #ff7b7b; font: 11px/1.4 ui-monospace, Consolas, monospace; margin: 0; max-height: 90px; overflow: auto; white-space: pre-wrap; }
#shaderErr:empty { display: none; }
#shaderUniforms { color: var(--muted); font: 11px/1.45 ui-monospace, Consolas, monospace; margin: 0; max-height: 40%; overflow: auto; white-space: pre-wrap; }
.space-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.space-hint { position: absolute; bottom: 10px; left: 12px; color: #8b919c99; font-size: 11px; pointer-events: none; }
body.no2d .qubit canvas { display: none; }