:root{--bg: #04060c;--panel: rgba(10, 16, 28, .82);--panel-border: rgba(148, 163, 184, .16);--text: #dfe7f3;--text-dim: #8ea3c0;--accent: #22d3ee;--danger: #ef4444;--amber: #f5a623;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}.app{position:fixed;top:0;right:0;bottom:0;left:0}.app canvas{touch-action:none}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}a{color:inherit}.mono{font-family:var(--font-mono);font-size:12px}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:12px 18px;background:linear-gradient(to bottom,#04060ceb,#04060c00);pointer-events:none;z-index:20;flex-wrap:wrap}.hud>*{pointer-events:auto}.hud-brand{line-height:1.15}.hud-title{font-family:var(--font-mono);font-weight:600;font-size:15px;letter-spacing:.22em;color:var(--text)}.hud-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.hud-modes{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-wrap:wrap}.mode-btn{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--text-dim);border-radius:7px;transition:color .15s,background .15s}.mode-btn:hover{color:var(--text)}.mode-btn.active{color:var(--text);background:#94a3b81f;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode-color) 45%,transparent)}.mode-dot{width:7px;height:7px;border-radius:50%;background:var(--mode-color);box-shadow:0 0 8px var(--mode-color)}.hud-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}.chip-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;font-size:12px;font-weight:500;color:var(--text-dim);background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .15s;white-space:nowrap}.chip-link{color:var(--accent);text-decoration:none}.chip-link-strong{color:#0b1220;background:var(--accent);border-color:var(--accent);font-weight:700}.chip-btn:hover{color:var(--text);border-color:#94a3b866}.chip-btn.on{color:#0b1220;background:var(--accent);border-color:var(--accent);font-weight:600}.chip-btn.rag.on{background:#34d399;border-color:#34d399}.chip-btn.danger.on{background:var(--danger);border-color:var(--danger);color:#fff}.chip-btn:disabled{opacity:.4;cursor:default}.legend{position:absolute;top:88px;right:16px;display:flex;flex-direction:column;gap:5px;padding:10px 12px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10}.legend-row{display:flex;align-items:center;gap:8px}.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}.legend-label{font-size:10.5px;letter-spacing:.04em;color:var(--text-dim)}.inspector{position:absolute;top:88px;left:16px;width:330px;max-height:calc(100% - 240px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-border);border-top:2px solid var(--cat-color);border-radius:12px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:15;animation:slide-in .22s ease}@keyframes slide-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}.insp-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 10px}.insp-chip{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cat-color);border:1px solid color-mix(in srgb,var(--cat-color) 50%,transparent);border-radius:5px;padding:2px 7px;margin-bottom:7px}.insp-title{font-size:18px;font-weight:600}.insp-close{color:var(--text-dim);font-size:13px;padding:4px 7px;border-radius:6px}.insp-close:hover{color:var(--text);background:#94a3b81f}.insp-body{overflow-y:auto;padding:0 16px 12px;display:flex;flex-direction:column;gap:11px}.insp-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}.insp-value{font-size:13px;line-height:1.45}.insp-foot{padding:10px 16px 14px;border-top:1px solid var(--panel-border)}.danger-btn{width:100%;padding:9px;font-size:12.5px;font-weight:600;color:#fca5a5;background:#ef44441f;border:1px solid rgba(239,68,68,.35);border-radius:8px;transition:all .15s}.danger-btn:hover{background:#ef444438}.dock{position:absolute;left:50%;bottom:14px;transform:translate(-50%);width:min(880px,calc(100% - 24px));background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:15}.dock-inner{padding:13px 16px;display:flex;flex-direction:column;gap:10px}.dock-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dock-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}.chip-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.dock-note p{font-size:12.5px;line-height:1.5;color:var(--text-dim)}.dock-note .takeaway{margin-top:5px;color:var(--text)}.check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-dim);cursor:pointer;white-space:nowrap}.check.big{font-size:13px;font-weight:600;color:var(--text)}.check input{accent-color:var(--accent)}.play-btn{padding:8px 15px;font-size:12.5px;font-weight:600;color:#0b1220;background:var(--accent);border-radius:8px;white-space:nowrap}.play-btn:disabled{opacity:.5}.scrubber{flex:1;min-width:140px;accent-color:var(--accent)}.trace-step{border-left:3px solid var(--cat-color);background:#94a3b80f;border-radius:0 8px 8px 0;padding:9px 12px}.trace-step-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}.trace-step-num{font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}.trace-metrics{margin-left:auto;display:flex;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--accent)}.trace-step p{font-size:12.5px;line-height:1.45;color:var(--text-dim)}.step-chips{display:flex;gap:4px}.step-chip{flex:1;height:5px;border-radius:3px;background:#94a3b82e;transition:background .2s;padding:0}.step-chip.done{background:color-mix(in srgb,var(--cat-color) 55%,transparent)}.step-chip.active{background:var(--cat-color);box-shadow:0 0 8px var(--cat-color)}.chip-btn.flow{display:inline-flex;align-items:center;gap:7px}.flow-dot{width:7px;height:7px;border-radius:50%;background:var(--flow-color);box-shadow:0 0 8px var(--flow-color);flex-shrink:0}.chip-btn.flow.on{color:#0b1220;background:var(--flow-color);border-color:var(--flow-color)}.chip-btn.flow.on .flow-dot{background:#0b1220;box-shadow:none}.flow-dots{display:flex;gap:5px;align-items:center;flex:1;min-width:90px}.flow-step-dot{width:9px;height:9px;border-radius:50%;background:#94a3b838;padding:0;transition:background .2s,transform .2s}.flow-step-dot.done{background:color-mix(in srgb,var(--flow-color) 55%,transparent)}.flow-step-dot.active{background:var(--flow-color);box-shadow:0 0 8px var(--flow-color);transform:scale(1.25)}.attack-btn{padding:8px 15px;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:8px;white-space:nowrap}.attack-log{min-height:62px;max-height:110px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}.log-idle{font-size:12.5px;line-height:1.5;color:var(--text-dim)}.log-line{font-family:var(--font-mono);font-size:11.5px;line-height:1.45;padding-left:10px;border-left:2px solid var(--text-dim);animation:slide-in .2s ease}.log-line.info{color:var(--text-dim)}.log-line.blocked,.log-line.caught{color:var(--amber);border-color:var(--amber)}.log-line.danger{color:#fca5a5;border-color:var(--danger)}.stream-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ttft-bars{display:flex;flex-direction:column;gap:8px;margin-top:12px}.ttft-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;font-size:11.5px;color:var(--text-dim)}.bar{height:7px;background:#94a3b81f;border-radius:4px;overflow:hidden}.bar-fill{height:100%;border-radius:4px;transition:width .4s ease}.bar-fill.on{background:linear-gradient(90deg,#4f8ff7,#22d3ee)}.bar-fill.off{background:linear-gradient(90deg,#7f1d1d,#ef4444)}.ttft-badge{font-family:var(--font-mono);font-size:12px;color:#4f8ff7;border:1px solid rgba(79,143,247,.4);border-radius:6px;padding:4px 9px}.chat-demo{display:flex;flex-direction:column;gap:8px;justify-content:flex-start}.chat-bubble{font-size:12.5px;line-height:1.5;padding:9px 12px;border-radius:10px;max-width:100%}.chat-bubble.user{align-self:flex-end;background:#22d3ee24;border:1px solid rgba(34,211,238,.25)}.chat-bubble.ai{align-self:flex-start;background:#94a3b814;border:1px solid var(--panel-border);color:var(--text-dim);min-height:58px;width:100%}.chat-bubble.ai.waiting{animation:pulse-wait 1.1s ease-in-out infinite}@keyframes pulse-wait{50%{opacity:.45}}.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.metric-card{background:#b16cea12;border:1px solid rgba(177,108,234,.22);border-radius:9px;padding:9px 10px}.metric-value{font-family:var(--font-mono);font-size:15px;font-weight:600;color:#d8b4fe}.metric-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-top:3px}.metric-note{font-size:10px;color:#8ea3c0b3;margin-top:2px}.tradeoff-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}.tradeoff-toggles{display:flex;flex-direction:column;gap:9px;min-width:0}.chip-row.wrap{max-height:76px;overflow-y:auto}.impact-stories{max-height:96px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.impact-meters{display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--panel-border);padding-left:16px}.meter-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-dim);margin-bottom:4px}.meter-head .good{color:#34d399}.meter-head .bad{color:#f87171}.meter-head em{font-style:normal;opacity:.85}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060c99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;padding-top:14vh;z-index:40}.search-box{width:min(520px,calc(100% - 32px));height:fit-content;background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}.search-box input{width:100%;padding:15px 18px;font-size:15px;font-family:inherit;color:var(--text);background:transparent;border:none;outline:none;border-bottom:1px solid var(--panel-border)}.search-results{max-height:320px;overflow-y:auto;padding:6px}.search-result{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;text-align:left;font-size:13px}.search-result:hover{background:#94a3b81a}.sr-label{color:var(--text)}.sr-zone{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--text-dim)}.sr-empty{padding:14px;font-size:13px;color:var(--text-dim)}.tour-card{position:absolute;left:16px;bottom:14px;width:min(400px,calc(100% - 32px));background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:15px 17px;z-index:30;animation:slide-in .25s ease}.tour-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.tour-head h3{font-size:15px;flex:1}.tour-count{font-family:var(--font-mono);font-size:10.5px;color:var(--accent);border:1px solid rgba(34,211,238,.35);border-radius:5px;padding:2px 7px}.tour-card p{font-size:13px;line-height:1.55;color:var(--text-dim);margin-bottom:12px}.tour-nav{display:flex;justify-content:space-between}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#04060c8c,#04060ceb)}.intro-card{max-width:560px;padding:0 28px;text-align:center;animation:intro-rise .7s ease}@keyframes intro-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.intro-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.34em;color:var(--accent);margin-bottom:14px}.intro-card h1{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.02em;margin-bottom:16px;background:linear-gradient(120deg,#dfe7f3,#7dd3fc,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-card>p{font-size:15px;line-height:1.65;color:var(--text-dim);margin-bottom:26px}.intro-actions{display:flex;gap:10px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}.primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;font-size:14.5px;font-weight:600;color:#0b1220;background:linear-gradient(120deg,#22d3ee,#7dd3fc);border-radius:10px;box-shadow:0 0 28px #22d3ee59;transition:transform .15s;text-decoration:none}.primary-btn:hover{transform:translateY(-1px)}.secondary-primary{color:#dfe7f3;background:#0a101cc7;border:1px solid rgba(34,211,238,.34);box-shadow:none}.intro-hint{font-family:var(--font-mono);font-size:11px;color:#8ea3c0a6}@media (max-width: 1100px){.metric-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 900px){.legend{display:none}.inspector{left:12px;right:12px;width:auto;top:auto;bottom:14px;max-height:46vh;z-index:25}.stream-grid,.tradeoff-grid{grid-template-columns:1fr}.impact-meters{border-left:none;padding-left:0;border-top:1px solid var(--panel-border);padding-top:12px}.hud{gap:10px;padding:10px 12px}.hud-actions{margin-left:0}.dock{width:calc(100% - 20px);bottom:10px}}