*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{min-width:320px}:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#05070c;--panel:#0e121cd1;--panel-border:#ffffff1f;--text:#f3f5f8;--muted:#9ca3af;--accent:#69a7ff;--concept-bg:#101114;--concept-fg:#f4f1e8;--concept-accent:#5eead4;--font-display:"Inter", "Segoe UI", sans-serif;--font-body:"Inter", "Segoe UI", sans-serif}body{font-family:var(--font-body);background:var(--bg);color:var(--text)}.app-shell{background:linear-gradient(135deg, color-mix(in srgb, var(--concept-accent) 20%, transparent), transparent 38%), radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--concept-fg) 12%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--concept-bg) 88%, #000), #05070c 88%);min-height:100%;color:var(--concept-fg);grid-template-rows:auto 1fr;transition:background .22s,color .22s;display:grid}.topbar{padding:24px 28px 0}.eyebrow{color:var(--muted);text-transform:uppercase;margin:0 0 6px;font-size:12px}.topbar h1{font-family:var(--font-display);margin:0;font-size:32px}.active-system{color:color-mix(in srgb, var(--concept-fg) 68%, transparent);margin:8px 0 0;font-size:13px}.layout{grid-template-columns:168px minmax(0,1fr) 340px;align-items:start;gap:16px;padding:20px 28px 28px;display:grid}.concept-rail{gap:8px;display:grid}.concept-rail button{border:1px solid color-mix(in srgb, var(--concept-fg) 14%, transparent);background:color-mix(in srgb, var(--concept-bg) 72%, transparent);width:100%;color:var(--concept-fg);font:inherit;text-align:left;padding:10px 12px;transition:background .16s,border-color .16s,transform .16s}.concept-rail button:hover{border-color:color-mix(in srgb, var(--concept-accent) 58%, transparent);transform:translate(3px)}.concept-rail button[data-active=true]{border-color:var(--concept-accent);background:color-mix(in srgb, var(--concept-accent) 18%, var(--concept-bg))}.scene-frame,.panel{border:1px solid color-mix(in srgb, var(--concept-fg) 14%, transparent);background:color-mix(in srgb, var(--concept-bg) 76%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.scene-frame{height:min(820px,76vh);min-height:540px;overflow:hidden}.scene-canvas,.scene-canvas canvas{width:100%;height:100%;display:block}.panel-stack{gap:16px;display:grid}.panel{padding:14px}.panel h2,.panel h3{margin-top:0}.system-descriptor{color:var(--concept-accent);text-transform:uppercase;font-size:12px}.logo-variant{margin:8px 0 14px}.logo-lockup{border:1px solid color-mix(in srgb, var(--concept-fg) 16%, transparent);background:color-mix(in srgb, var(--concept-bg) 58%, var(--concept-accent) 8%);align-items:center;gap:14px;padding:14px;display:flex}.logo-lockup[data-layout=console]{flex-direction:column;align-items:flex-start}.logo-lockup[data-layout=resolve]{border-radius:18px 4px}.logo-lockup[data-layout=board]{background-image:linear-gradient(color-mix(in srgb, var(--concept-fg) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--concept-fg) 10%, transparent) 1px, transparent 1px);background-size:18px 18px}.logo-variant-symbol,.logo-variant-compact{align-items:center;min-height:96px;display:flex}.logo-variant svg,.logo-mark{flex:none;width:72px;height:72px}.logo-wordmark{font-family:var(--font-display);color:var(--concept-fg);text-transform:lowercase;gap:4px;font-size:24px;font-weight:700;display:grid}.logo-wordmark small{color:color-mix(in srgb, var(--concept-fg) 54%, transparent);font-family:var(--font-body);text-transform:uppercase;font-size:10px;font-weight:500}.logo-wordmark[data-concept=command-console]{letter-spacing:.08em;text-transform:none}.logo-wordmark[data-concept=rule-board]{font-weight:800}.logo-compact{border:1px solid color-mix(in srgb, var(--concept-fg) 18%, transparent);background:color-mix(in srgb, var(--concept-accent) 22%, var(--concept-bg));width:86px;height:64px;color:var(--concept-fg);font-family:var(--font-display);place-items:center;font-size:18px;font-weight:800;display:grid}.logo-compact[data-layout=resolve]{border-radius:16px 4px}.logo-compact[data-layout=board]{box-shadow:inset 0 0 0 10px color-mix(in srgb, var(--concept-bg) 65%, transparent)}.scene-canvas{cursor:crosshair;position:relative}.scene-status{border:1px solid color-mix(in srgb, var(--concept-fg) 18%, transparent);background:color-mix(in srgb, var(--concept-bg) 70%, transparent);color:var(--concept-accent);text-transform:uppercase;padding:8px 10px;font-size:12px;position:absolute;bottom:16px;right:16px}.scene-status:before{content:"click scene: ";color:color-mix(in srgb, var(--concept-fg) 56%, transparent)}.app-shell[data-system-layout=board] .scene-frame{background-image:linear-gradient(color-mix(in srgb, var(--concept-fg) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--concept-fg) 8%, transparent) 1px, transparent 1px);background-size:32px 32px}.phase-track{gap:8px;margin:12px 0 14px;display:flex}.phase-track span,.prototype-list span{border:1px solid color-mix(in srgb, var(--concept-fg) 16%, transparent);min-width:24px;min-height:24px;color:color-mix(in srgb, var(--concept-fg) 64%, transparent);place-items:center;display:inline-grid}.phase-track span[data-active=true],.prototype-list span[data-active=true]{border-color:var(--concept-accent);color:var(--concept-accent)}.prototype-list{gap:8px;display:grid}.prototype-list span{justify-content:start;padding:6px 8px}.panel-heading{justify-content:space-between;align-items:start;gap:12px;display:flex}.panel-heading h2,.panel-heading p{margin:0}.panel-heading p,.state-line{color:color-mix(in srgb, var(--concept-fg) 68%, transparent);font-size:13px}.ghost-button,.instrument-panel button{border:1px solid color-mix(in srgb, var(--concept-fg) 18%, transparent);background:color-mix(in srgb, var(--concept-bg) 72%, transparent);color:var(--concept-fg);font:inherit}.ghost-button{color:color-mix(in srgb, var(--concept-fg) 72%, transparent);padding:7px 10px}.instrument-body{gap:12px;display:grid}.action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.action-grid button,.button-row button,.instrument-body>button{text-align:left;min-height:48px;padding:10px;transition:border-color .16s,background .16s,transform .16s}.action-grid button span{color:var(--concept-accent);text-transform:uppercase;margin-top:4px;font-size:11px;display:block}.instrument-panel button:hover:not(:disabled){border-color:var(--concept-accent);background:color-mix(in srgb, var(--concept-accent) 16%, var(--concept-bg));transform:translateY(-1px)}.instrument-panel button:disabled{color:color-mix(in srgb, var(--concept-fg) 42%, transparent);cursor:not-allowed}.terminal-body{gap:10px}.terminal-output{border:1px solid color-mix(in srgb, var(--concept-fg) 14%, transparent);background:#020504;min-height:106px;padding:10px;font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace}.terminal-output p{color:color-mix(in srgb, var(--concept-fg) 72%, transparent);margin:0 0 6px;font-size:12px}.terminal-output p[data-status=ok]{color:var(--concept-accent)}.terminal-output p[data-status=error]{color:#ff6b6b}.command-row{color:color-mix(in srgb, var(--concept-fg) 68%, transparent);gap:6px;font-size:12px;display:grid}.command-row input{border:1px solid color-mix(in srgb, var(--concept-fg) 18%, transparent);background:color-mix(in srgb, var(--concept-bg) 82%, #000);min-width:0;color:var(--concept-fg);font:inherit;padding:11px 10px}.button-row{grid-template-columns:1fr 1.15fr;gap:8px;display:grid}.board-readout{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.board-readout span{border:1px solid color-mix(in srgb, var(--concept-fg) 14%, transparent);min-height:34px;color:color-mix(in srgb, var(--concept-fg) 54%, transparent);place-items:center;display:grid}.board-readout span[data-active=true]{border-color:var(--concept-accent);background:color-mix(in srgb, var(--concept-accent) 18%, transparent);color:var(--concept-fg)}@media (width<=980px){.layout{grid-template-columns:1fr}.concept-rail{grid-template-columns:repeat(3,minmax(0,1fr))}.concept-rail button{text-align:center}.scene-frame{min-height:54vh}.panel-stack{grid-template-columns:1fr}}@media (width<=560px){.topbar{padding:18px 16px 0}.layout{padding:16px}.topbar h1{font-size:28px}.concept-rail,.action-grid,.button-row{grid-template-columns:1fr}.scene-frame{min-height:420px}}