:root {
  color-scheme: light; --bg:#f5f7fb; --panel:#fff; --text:#17202b; --muted:#647183;
  --line:#dce3eb; --grid:#e8edf3; --axis:#9aa7b5; --blue:#2563eb;
  --blue-soft:#e9f0ff; --violet:#7c5ce0; --shadow:0 14px 36px rgba(29,45,65,.1);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text)} button,input{font:inherit}
.app{max-width:1080px;margin:0 auto;padding:18px} header{margin-bottom:14px}
h1{margin:0 0 6px;font-size:clamp(1.25rem,4vw,1.75rem);letter-spacing:-.025em}
header p{margin:0;color:var(--muted);line-height:1.55}
.layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(270px,.78fr);gap:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.stage{min-height:540px;padding:12px;display:flex} canvas{width:100%;min-height:516px;display:block;border-radius:12px;touch-action:none;cursor:crosshair}
.side{padding:20px;display:flex;flex-direction:column;gap:18px}.eyebrow{margin:0 0 8px;color:var(--muted);font-size:.82rem;font-weight:700}
.vector-form{display:flex;align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.18rem}
.bracket{font-size:4rem;line-height:.8;font-weight:200;color:var(--muted);transform:scaleX(.55)}
.cells{display:grid;gap:5px;min-width:70px;text-align:center}.cells span{padding:5px 10px;border-radius:7px;background:var(--blue-soft);color:var(--blue);font-weight:700}
.norm-values{display:grid;gap:8px}.metric{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:var(--bg);border:1px solid var(--line);border-radius:11px}
.metric small{color:var(--muted)}.metric strong{font-variant-numeric:tabular-nums;font-size:1.05rem}.metric.is-selected{border-color:var(--blue);background:var(--blue-soft)}
.controls label{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;margin:14px 0 7px}.controls label strong{color:var(--text);font-variant-numeric:tabular-nums}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.segmented button,.reset{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 10px;cursor:pointer}
.segmented button:hover,.reset:hover{background:var(--bg)}.segmented button.is-selected{border-color:var(--blue);background:var(--blue);color:#fff}
input[type="range"]{width:100%;accent-color:var(--blue);cursor:pointer}.meaning{padding:14px;border-radius:12px;background:var(--blue-soft);color:#173a7a;line-height:1.55}.meaning strong,.meaning span{display:block}.meaning strong{margin-bottom:4px}
.reset{margin-top:auto;width:100%}button:focus-visible,input:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}
@media(max-width:740px){.app{padding:10px}.layout{grid-template-columns:1fr}.stage{min-height:650px}canvas{min-height:626px}.side{gap:16px}.reset{margin-top:0}}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#101720;--panel:#17212c;--text:#edf3f8;--muted:#a8b4c1;--line:#2b3948;--grid:#22303d;--axis:#758493;--blue:#70a0ff;--blue-soft:#1c3154;--violet:#a998ff;--shadow:0 14px 36px rgba(0,0,0,.25)}.meaning{color:#dce8ff}.segmented button.is-selected{color:#101720}}