html,body{margin:0}body{font-size:14px;-webkit-font-smoothing:antialiased}[hidden]{display:none!important}img{max-width:100%}:root{--ground: #0e131b;--panel: #131a24;--line: #263142;--ink: #e4e8ef;--muted: #8592a6;--accent: #c4a7ff;--kata: #6f8dff;--ana: #ffb067;--key: #1b2430;--key-hi: #263244;--display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;--body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}html,body{height:100%}body{background:var(--ground);color:var(--ink);font-family:var(--body)}*{box-sizing:border-box}.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:100%}.view{position:relative;min-width:0;min-height:0;overflow:hidden}.view canvas{display:block;width:100%;height:100%;cursor:grab}.view canvas:active{cursor:grabbing}.hud{position:absolute;pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--muted)}.hud.top{top:14px;left:max(16px,env(safe-area-inset-left,0px));display:flex;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums}.hud.top b{color:var(--ink);font-weight:500}.hud.top .w b{color:var(--accent)}.view canvas.compass{position:absolute;top:12px;right:14px;width:104px;height:104px;pointer-events:none}.hud.bottom{bottom:12px;left:max(16px,env(safe-area-inset-left,0px))}.tags{position:absolute;inset:0;pointer-events:none}.tag{position:absolute;left:0;top:0;font:11px var(--mono);color:var(--ink);white-space:nowrap;background:color-mix(in srgb,var(--ground) 75%,transparent);border:1px solid var(--line);padding:2px 7px;border-radius:4px}.tag:nth-child(2){color:var(--accent)}.err{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}.panel{overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding-block:22px 28px;padding-left:20px;padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}h1{font-family:var(--display);font-weight:700;font-size:27px;line-height:1.05;letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}.lede{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:60ch}.lede em{color:var(--accent);font-style:normal}h2{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;justify-content:space-between;gap:8px}h2 span{letter-spacing:.04em;text-transform:none}.key{appearance:none;font:600 13px/1.1 var(--body);color:var(--ink);background:var(--key);border:1px solid var(--line);border-bottom-width:3px;border-radius:8px;min-height:46px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.key kbd{font:400 10px var(--mono);color:var(--muted)}.key:hover{background:var(--key-hi)}.key.on{background:var(--key-hi);border-bottom-width:1px;transform:translateY(2px)}.key:focus-visible,.row-btn:focus-visible,.ghost:focus-visible,.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.key.w{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}.key.w.on{background:color-mix(in srgb,var(--accent) 18%,var(--key))}.move{display:grid;grid-template-columns:3fr 1fr 1fr;gap:10px}.cluster{display:grid;gap:6px}.planar{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto}.planar .fwd{grid-column:2}.planar .lft{grid-column:1;grid-row:2}.planar .bck{grid-column:2;grid-row:2}.planar .rgt{grid-column:3;grid-row:2}.cluster small{grid-column:1 / -1;font:10.5px var(--mono);color:var(--muted);text-align:center;letter-spacing:.03em}.rot{display:grid;grid-template-columns:1fr 74px 74px;gap:6px 8px;align-items:center}.rot .lbl{font-size:13px;line-height:1.25}.rot .lbl code{display:block;font:10.5px var(--mono);color:var(--muted)}.rot .key{min-height:40px}.ruler{display:grid;gap:5px}.row-btn{appearance:none;background:none;border:0;color:inherit;padding:3px 0;cursor:pointer;font:inherit;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;text-align:left;border-radius:4px}.row-btn:hover .track{background:color-mix(in srgb,var(--ink) 7%,transparent)}.row-btn .nm{font-size:12.5px;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-btn .dot{width:9px;height:9px;border-radius:2px;flex:none}.row-btn.in .nm{font-weight:600}.row-btn:not(.in) .nm{color:var(--muted)}.track{position:relative;height:16px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:3px}.track:after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--accent);opacity:.85}.bar{position:absolute;top:3px;bottom:3px;border-radius:2px;opacity:.35}.row-btn.in .bar{opacity:.95}.shape-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;align-items:center}.eye{appearance:none;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--ink);cursor:pointer}.eye:hover{background:var(--key);border-color:var(--line)}.eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.eye .off{display:none}.eye[aria-pressed=false]{color:var(--muted)}.eye[aria-pressed=false] .on{display:none}.eye[aria-pressed=false] .off{display:block}.shape-row.hidden-shape .nm{text-decoration:line-through;text-decoration-color:var(--muted)}.twisted{position:relative;display:inline-block}.twisted:after{content:"~";position:absolute;left:0;right:0;top:-.5em;text-align:center;font-size:.85em}.shape-row.hidden-shape .bar{opacity:.15!important}.vis-all{display:inline-flex;gap:6px}.vis-all button{appearance:none;font:500 11px var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted);background:none;border:1px solid var(--line);border-radius:10px;padding:2px 9px;cursor:pointer;white-space:nowrap}.vis-all button:hover{color:var(--ink);background:var(--key)}.vis-all button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.axis{display:grid;grid-template-columns:142px minmax(0,1fr);gap:10px;font:10.5px var(--mono);color:var(--muted)}.axis div{display:flex;justify-content:space-between}.axis .mid{color:var(--accent)}.layers{list-style:none;margin:0;padding:0;display:grid;gap:6px}.layers li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}.layers .sw{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000040}.layers .km{font:11.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.state{font:11px var(--mono);padding:2px 8px;border-radius:10px;border:1px solid var(--line);color:var(--muted);text-transform:none;letter-spacing:.02em}.state.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.rk{display:grid;gap:10px}.rk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.rk-lbl{font-size:13px}.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg button{appearance:none;background:var(--key);color:var(--muted);border:0;border-left:1px solid var(--line);font:500 13px var(--mono);min-width:44px;min-height:36px;cursor:pointer}.seg button:first-child{border-left:0}.seg button:hover{color:var(--ink);background:var(--key-hi)}.seg button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 22%,var(--key));color:var(--accent)}.seg button:focus-visible,.key:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.rk-actions{display:flex;flex-wrap:wrap;gap:8px}.view-seg{display:flex;width:100%}.view-seg button{flex:1;font-family:var(--body);font-size:13.5px;min-height:40px}#view-desc{margin-top:10px}.rk-group{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:start}.rk-group>.rk-lbl{padding-top:8px;color:var(--muted);font-size:12.5px}.ghost[aria-pressed=true]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 14%,var(--key))}.explain{margin:0;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.5;color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,var(--key));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}.explain b{color:var(--accent);font-weight:600}.rk-actions .ghost{padding:7px 11px}.note{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.45}.mtx-wrap{overflow-x:auto}table.mtx{border-collapse:separate;border-spacing:3px;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}.mtx th{font-weight:400;color:var(--muted);padding:2px 6px;text-align:center}.mtx th.r{text-align:left;white-space:nowrap}.mtx th.r i{font-style:normal;color:var(--ink)}.mtx td{text-align:right;padding:4px 7px;border-radius:3px;min-width:52px}.mtx tr.a th.r i{color:var(--accent)}.opts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.switch{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}.switch kbd{font:400 10px var(--mono);color:var(--muted)}.switch.vol{margin-top:14px}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch span{width:34px;height:20px;border-radius:10px;background:var(--key);border:1px solid var(--line);position:relative;transition:background .15s}.switch span:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}.switch input:checked+span{background:color-mix(in srgb,var(--accent) 30%,var(--key))}.switch input:checked+span:after{transform:translate(14px);background:var(--accent)}.ghost{appearance:none;font:500 13px var(--body);color:var(--ink);background:none;border:1px solid var(--line);border-radius:7px;padding:8px 14px;cursor:pointer}.ghost:hover{background:var(--key)}a.ghost{display:inline-block;text-decoration:none}.page-link{margin-top:14px}@media (max-width: 820px){html,body{height:auto}.app{grid-template-columns:1fr;height:auto}.view{height:min(58vh,520px)}.panel{border-left:0;border-top:1px solid var(--line);overflow:visible;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}@media (prefers-reduced-motion: reduce){.key.on{transform:none}.switch span,.switch span:after{transition:none}}