:root{--bg: #070a10;--panel: #0d121b;--panel-2: #121a26;--raise: #17202e;--line: #212c3d;--line-strong: #2e3c53;--text: #e9eef6;--muted: #7f8da3;--accent: #f0a13b;--accent-dim: #f0a13b28;--ok: #58d69a;--warn: #ffcf6b;--err: #ff7d72;--radius: 10px;--header: 68px}body{background:radial-gradient(1200px 600px at 78% -10%,#1a2740 0%,transparent 60%),radial-gradient(900px 500px at 8% 110%,#16202f 0%,transparent 55%),var(--bg)}.hud{position:relative;z-index:5;height:var(--header);display:flex;align-items:center;gap:18px;padding:0 16px;background:linear-gradient(180deg,#141c29,#0c1119);border-bottom:1px solid var(--line-strong);box-shadow:0 10px 30px #000a}.hud .brand{font-size:19px;letter-spacing:.1em;white-space:nowrap}.hud-title{display:flex;flex-direction:column;line-height:1.25;padding-left:16px;border-left:1px solid var(--line)}.hud-title strong{font-size:13px;letter-spacing:.04em}.hud-title small{color:var(--muted);font-size:11px}.hud-pickers{flex:1;min-width:0;display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,1fr);gap:12px}.picker{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}.picker>span{color:var(--muted);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.picker select{margin:0;padding:7px 9px;font-size:12px}.hud-actions{display:flex;align-items:center;gap:8px}.hud-actions button{padding:9px 14px;font-size:12px;white-space:nowrap}.hud-links{display:flex;gap:14px;padding-left:14px;border-left:1px solid var(--line)}.hud-links a{color:#9fb0c7;font-size:12px;text-decoration:none}.hud-links a:hover{color:var(--accent)}.pill{padding:5px 11px;border-radius:999px;border:1px solid var(--line-strong);background:#10161f;color:var(--muted);font-size:11px;white-space:nowrap}.pill.dirty{color:#10161f;background:var(--accent);border-color:var(--accent);font-weight:600}.pill.locked{color:var(--err);border-color:#6d2b28;background:#24100f}main{height:calc(100vh - var(--header));grid-template-columns:336px minmax(0,1fr) 320px}.controls{padding:14px;background:linear-gradient(180deg,#0f151ff2,#0b1017f2);border-right:1px solid var(--line);box-shadow:6px 0 24px #0007;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}.controls::-webkit-scrollbar{width:10px}.controls::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid transparent;background-clip:content-box;border-radius:999px}.identity{margin:0 0 8px;padding:9px 11px;border-radius:var(--radius);border:1px solid var(--line);background:var(--accent-dim);color:var(--accent);font-size:11px;line-height:1.5}.card{position:relative;margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-2),var(--panel));transition:border-color .15s}.card>h2{margin:-2px 0 12px;color:#c3cede;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.card>h2:after{content:"";display:block;height:1px;margin-top:8px;background:linear-gradient(90deg,var(--line-strong),transparent)}.card>*:last-child{margin-bottom:0}.card.changed{border-color:#6a4c1e}[data-field].changed{position:relative}[data-field].changed:before{content:"";position:absolute;left:-8px;top:2px;width:3px;height:12px;border-radius:2px;background:var(--accent)}label{margin:0 0 14px;color:#a9b6c9}label:last-child{margin-bottom:0}label.inline{display:flex;align-items:center;gap:9px;color:#b7c3d4}label.inline input{width:15px;height:15px;margin:0;accent-color:var(--accent)}output{float:right;color:var(--accent);font-variant-numeric:tabular-nums}select{padding:8px 10px;background:var(--raise);border:1px solid var(--line-strong);border-radius:8px;transition:border-color .15s}select:hover{border-color:#465773}select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px;margin-top:6px;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#212b3b}input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#212b3b}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--accent);border:2px solid #0d121b;box-shadow:0 0 0 1px var(--accent);cursor:grab}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #0d121b;cursor:grab}input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 0 0 5px var(--accent-dim)}button{padding:9px 10px;background:var(--raise);border:1px solid var(--line-strong);border-radius:8px;font-size:12px;transition:background .15s,border-color .15s,color .15s}button:hover:not(:disabled){background:#1e2a3c;border-color:#4a5c79}button:disabled{opacity:.42;cursor:not-allowed}button.primary{color:#14100a;background:linear-gradient(180deg,#f4b158,var(--accent));border-color:#b9752a;font-weight:600}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#ffc16b,#f8ac47);border-color:#d68f38}button.primary:disabled{color:#8d97a7;background:var(--raise);border-color:var(--line-strong)}.actions{display:grid;gap:7px;margin-bottom:12px}.actions.two{grid-template-columns:1fr 1fr}.card .actions:last-child{margin-bottom:0}.hint{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.hint em{color:#b9c6d8;font-style:normal}.banner{margin:0 0 10px;padding:8px 10px;border-radius:8px;border:1px solid #5a4520;background:#1e1810;color:#d9c294;font-size:11px;line-height:1.5}.banner:empty{display:none}.banner.error{color:#ffb4ad;background:#23100f;border-color:#6d2b28}.banner.ok{color:#a9e5bf;background:#0d2117;border-color:#2b5c3c}.toast{position:fixed;top:calc(var(--header) + 12px);right:16px;z-index:10;max-width:380px;margin:0;box-shadow:0 14px 34px #000a}.stage-wrap{background:radial-gradient(900px 500px at 50% 45%,#131c2b,#0a0e15 70%)}.stage-wrap canvas{cursor:crosshair}.dpad{position:absolute;right:16px;top:16px;display:grid;grid-template-columns:repeat(3,38px);grid-auto-rows:38px;gap:4px;padding:8px;border-radius:12px;border:1px solid var(--line-strong);background:#0a0e15cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 28px #0008}.dpad button{padding:0;font-size:15px;line-height:1}.dpad button[data-direction=NORTH]{grid-area:1 / 2}.dpad button[data-direction=WEST]{grid-area:2 / 1}.dpad button[data-direction=SOUTH]{grid-area:2 / 2}.dpad button[data-direction=EAST]{grid-area:2 / 3}.dpad button.active{color:#14100a;background:linear-gradient(180deg,#f4b158,var(--accent));border-color:#b9752a}.dpad-hint{grid-column:1 / -1;color:var(--muted);font-size:9px;letter-spacing:.1em;text-align:center;text-transform:uppercase}.legend{left:16px;bottom:16px;max-width:46ch;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line-strong);background:#0a0e15dd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#aeb9c9}.legend i.caster{border-color:#56d6ff}.legend i.origin{border-color:#c58bff}.legend i.hit{border-color:#ff8a3b;background:#ff8a3b3a}.legend span{display:block;margin:7px 0 0;color:#6f7d93;line-height:1.5}.output-panel{display:flex;flex-direction:column;gap:10px;border-right:0;border-left:1px solid var(--line);box-shadow:-6px 0 24px #0007}.output-panel h2{margin:0;color:#c3cede;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.output-panel pre{flex:1;min-height:0;margin:0;border-radius:var(--radius);border-color:var(--line)}.changes{margin:0;padding:0;list-style:none;display:grid;gap:6px;max-height:40vh;overflow:auto}.changes li{padding:7px 9px;border-radius:8px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel-2);color:#c2cdde;font-size:11px;line-height:1.5}.changes li b{display:block;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.changes li .was{color:#8894a8;text-decoration:line-through}.changes li .now{color:var(--accent)}.changes li.mapping{border-left-color:#56d6ff}.changes li.mapping .now{color:#56d6ff}.changes.clean li{border-left-color:var(--line);color:var(--muted)}@media(max-width:1240px){main{grid-template-columns:320px minmax(0,1fr)}.output-panel{display:none}}@media(max-width:980px){.hud-title,.hud-links{display:none}}