:root{--canvas-bg:#111418;--panel-bg:#1b2028;--surface-raised:#232b36;--panel-border:#2a323d;--border-strong:#3b475a;--hud-text:#e6e9ee;--hud-text-secondary:#9aa4b5;--hud-text-tertiary:#6f7a8c;--accent:#4aa3ff;--accent-hover:#6db6ff;--accent-dim:#4aa3ff1f;--accent-fill:#4aa3ffb3;--danger:#f44336;--danger-text:#ff6b60;--text-placeholder:#8b96a5;--shadow-lift:0 2px 8px #00000059;--shadow-lift-strong:0 2px 8px #00000073;--glow-accent:0 0 0 1px var(--accent), 0 0 10px #4aa3ff47;--ease:cubic-bezier(.2, 0, .2, 1);--dur:.14s}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--hud-text);background:var(--canvas-bg);font-family:system-ui,-apple-system,SF Pro Text,Segoe UI,sans-serif;font-size:14px;line-height:1.5}::selection{background:var(--accent-dim);color:var(--accent-hover)}input,output{caret-color:var(--accent)}::placeholder{color:var(--text-placeholder);opacity:1}:focus-visible{box-shadow:var(--glow-accent);outline:none}#app{grid-template:"top-bar top-bar top-bar"40px"tool-rail stage context"1fr/48px 1fr 280px;height:100vh;display:grid}#top-bar{background:var(--panel-bg);border-bottom:1px solid var(--panel-border);grid-area:top-bar;align-items:center;margin:0;padding:0 12px;display:flex}#top-bar h1{letter-spacing:-.01em;color:var(--hud-text);margin:0;font-size:13px;font-weight:600}.sim-controls{align-items:center;gap:6px;margin-left:auto;display:flex}.sim-sep{background:var(--panel-border);width:1px;height:22px}.sim-field{color:var(--hud-text-secondary);align-items:center;gap:4px;font-size:12px;display:flex}.sim-field output{text-align:right;font-variant-numeric:tabular-nums;min-width:34px;color:var(--hud-text);font:500 12px/1.3 system-ui,-apple-system,SF Pro Text,Segoe UI,sans-serif}.sim-presets{gap:4px;display:flex}.sim-preset-btn{flex:none;padding:4px 8px;font-size:11px}input[type=range]{appearance:none;cursor:pointer;background:0 0;height:14px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent-fill) var(--range-fill,50%), var(--panel-border) var(--range-fill,50%));border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:1px solid var(--border-strong);width:12px;height:12px;transition:box-shadow var(--dur) var(--ease);border-radius:50%;margin-top:-4.5px}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 8px #00000073}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--accent-fill) var(--range-fill,50%), var(--panel-border) var(--range-fill,50%));border-radius:2px;height:3px}input[type=range]::-moz-range-thumb{background:var(--accent);border:1px solid var(--border-strong);border-radius:50%;width:12px;height:12px}input[type=range]:hover::-moz-range-thumb{box-shadow:0 2px 8px #00000073}#tool-rail{background:var(--panel-bg);border-right:1px solid var(--panel-border);flex-direction:column;grid-area:tool-rail;align-items:center;gap:6px;padding-top:8px;display:flex}.tool-btn{width:36px;height:36px;color:var(--hud-text-secondary);cursor:pointer;transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:flex}.tool-btn:hover{color:var(--hud-text);background:var(--surface-raised);border-color:var(--panel-border);box-shadow:var(--shadow-lift);transform:translateY(-1px)}.tool-sep{background:var(--panel-border);width:24px;height:1px}.joint-kinds{border:1px solid var(--panel-border);background:var(--surface-raised);border-radius:8px;flex-direction:column;gap:3px;padding:3px;display:flex}.joint-kinds[hidden]{display:none}.joint-kinds .tool-btn{width:28px;height:28px}.tool-btn.active,.tool-btn[aria-pressed=true]{color:var(--accent);background:var(--accent-dim);border-color:var(--accent);box-shadow:var(--glow-accent)}.tool-btn:disabled{opacity:.35;cursor:default;box-shadow:none}.tool-btn:disabled:hover{color:var(--hud-text-secondary);box-shadow:none;background:0 0;border-color:#0000;transform:none}.tool-btn svg{width:18px;height:18px}#stage-area{grid-area:stage;position:relative;overflow:hidden}#stage{width:100%;height:100%;display:block}#context-panel{background:var(--panel-bg);border-left:1px solid var(--panel-border);grid-area:context;padding:12px;overflow-y:auto}#context-panel::-webkit-scrollbar{width:10px}#context-panel::-webkit-scrollbar-thumb{background:var(--panel-border);border:2px solid var(--panel-bg);border-radius:5px}#context-panel::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}#context-panel::-webkit-scrollbar-track{background:0 0}.mat-panel h2{color:var(--hud-text-secondary);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;font-size:11px;font-weight:500}.mat-list{flex-direction:column;gap:2px;display:flex}.mat-row{align-items:center;gap:4px;display:flex}.mat-row-main{min-width:0;font:inherit;color:var(--hud-text);cursor:pointer;text-align:left;transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);background:0 0;border:1px solid #0000;border-radius:6px;flex:1;align-items:center;gap:8px;padding:5px 8px;display:flex}.mat-row-main:hover{background:var(--surface-raised);border-color:var(--panel-border);box-shadow:var(--shadow-lift)}.mat-row-main[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);box-shadow:var(--glow-accent)}.mat-swatch{border:1px solid var(--panel-border);border-radius:4px;flex:none;width:14px;height:14px;box-shadow:inset 0 1px 2px #0000004d}.mat-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mat-row-btn{font:inherit;color:var(--hud-text-secondary);cursor:pointer;transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);background:0 0;border:1px solid #0000;border-radius:6px;padding:4px 6px;font-size:11px}.mat-row-btn:hover{color:var(--hud-text);background:var(--surface-raised);border-color:var(--panel-border);box-shadow:var(--shadow-lift)}.mat-actions{gap:6px;margin-top:10px;display:flex}.mat-btn{font:inherit;border:1px solid var(--panel-border);color:var(--hud-text-secondary);cursor:pointer;transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);background:0 0;border-radius:6px;flex:1;padding:6px 8px;font-size:12px}.mat-btn:hover{color:var(--hud-text);background:var(--surface-raised);border-color:var(--border-strong);box-shadow:var(--shadow-lift);transform:translateY(-1px)}.mat-btn:active{box-shadow:none;transform:translateY(0)}.mat-btn.primary{color:var(--accent);border-color:var(--accent)}.mat-btn.primary:hover{background:var(--accent-dim);color:var(--accent-hover);border-color:var(--accent);box-shadow:var(--glow-accent)}.mat-editor{background:var(--surface-raised);border:1px solid var(--panel-border);box-shadow:var(--shadow-lift);border-radius:8px;gap:8px;margin-top:10px;padding:10px;display:grid}.mat-editor[hidden]{display:none}.mat-field{color:var(--hud-text-secondary);grid-template-columns:70px 1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.mat-field input[type=text],.mat-field input[type=color]{grid-column:2/4}.mat-field output{text-align:right;font-variant-numeric:tabular-nums;min-width:36px;color:var(--hud-text);font:500 12px/1.3 system-ui,-apple-system,SF Pro Text,Segoe UI,sans-serif}.mat-editor input[type=text]{font:inherit;color:var(--hud-text);background:var(--canvas-bg);border:1px solid var(--panel-border);caret-color:var(--accent);border-radius:6px;padding:5px 8px;font-size:12px}.mat-editor input[type=color]{background:var(--canvas-bg);border:1px solid var(--panel-border);cursor:pointer;border-radius:6px;width:100%;height:28px;padding:2px}.mat-editor input[type=range]{width:100%}.mat-error{color:var(--danger-text);margin:0;font-size:12px}.mat-editor-actions{gap:6px;display:flex}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms;animation-duration:.01ms}}.joint-panel{border-top:1px solid var(--panel-border);margin-top:8px;padding:8px 0 0}.joint-panel h2{letter-spacing:.06em;color:var(--hud-text-secondary);margin:0 0 6px;font-size:11px;font-weight:500}.joint-field{color:var(--hud-text);margin:0 0 4px;font-size:12px}.joint-btn{width:100%;color:var(--hud-text-secondary);border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:6px;margin-top:6px;padding:6px 10px}.joint-btn:hover{background:var(--surface-raised,#232b36);color:var(--hud-text)}#ppg-notice{color:var(--hud-text,#e6e9ee);border:1px solid var(--panel-border,#98a2b359);opacity:0;pointer-events:none;z-index:30;background:#14181eeb;border-radius:8px;padding:8px 14px;font-size:12px;transition:opacity .25s,transform .25s;position:fixed;bottom:96px;left:50%;transform:translate(-50%)translateY(6px)}#ppg-notice.visible{opacity:1;transform:translate(-50%)translateY(0)}