*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a1a;--bg-surface: #12122a;--bg-card: #1a1a3a;--text: #e0e0f0;--text-dim: #8888aa;--text-muted: #b0b0cc;--accent: #ffd700;--accent-glow: rgba(255, 215, 0, .4);--accent-faint: rgba(255, 215, 0, .04);--accent-flash: rgba(255, 215, 0, .15);--safe-color: #51cf66;--safe-glow: rgba(81, 207, 102, .4);--safe-soft: rgba(81, 207, 102, .15);--safe-chip-border: rgba(81, 207, 102, .3);--unsafe-color: #ff6b6b;--unsafe-glow: rgba(255, 107, 107, .4);--unsafe-soft: rgba(255, 107, 107, .15);--unsafe-surface: rgba(255, 107, 107, .1);--unsafe-chip-border: rgba(255, 107, 107, .3);--unsafe-border: rgba(255, 107, 107, .25);--borderline-color: #ff9f43;--borderline-chip-border: rgba(255, 159, 67, .3);--border: #2a2a4a;--border-soft: #222244;--border-strong: #333366;--border-muted: #444466;--scrollbar-thumb: #333355;--scrollbar-thumb-hover: #444477;--bubble-user-bg: #1a3a5c;--bubble-user-text: #c0ddff;--bubble-assistant-bg: #2a2a4a;--hover-overlay: rgba(255, 255, 255, .05);--on-accent: var(--bg);--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}[data-theme=light]{--bg: #f7f7fb;--bg-surface: #ffffff;--bg-card: #eceef5;--text: #1a1a2e;--text-dim: #5a5a78;--text-muted: #3a3a55;--accent: #a67c00;--accent-glow: rgba(166, 124, 0, .35);--accent-faint: rgba(166, 124, 0, .06);--accent-flash: rgba(166, 124, 0, .2);--safe-color: #2f8f44;--safe-glow: rgba(47, 143, 68, .35);--safe-soft: rgba(47, 143, 68, .15);--safe-chip-border: rgba(47, 143, 68, .35);--unsafe-color: #c03434;--unsafe-glow: rgba(192, 52, 52, .35);--unsafe-soft: rgba(192, 52, 52, .14);--unsafe-surface: rgba(192, 52, 52, .08);--unsafe-chip-border: rgba(192, 52, 52, .35);--unsafe-border: rgba(192, 52, 52, .3);--borderline-color: #b86b20;--borderline-chip-border: rgba(184, 107, 32, .35);--border: #d0d4e0;--border-soft: #e3e6ee;--border-strong: #b8bccc;--border-muted: #a8acbc;--scrollbar-thumb: #c0c4d0;--scrollbar-thumb-hover: #a0a4b4;--bubble-user-bg: #d9ecff;--bubble-user-text: #083458;--bubble-assistant-bg: #e7e9f1;--hover-overlay: rgba(20, 20, 40, .05);--on-accent: #ffffff}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;overflow:hidden;transition:background .2s,color .2s}#app{display:flex;flex-direction:column;height:100vh;padding:.5rem 1rem;gap:.5rem}#header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:.5rem}.header-left{display:flex;align-items:center;gap:1rem}.header-left h1{font-size:1.2rem;color:var(--accent);font-weight:700}.header-model{font-size:.75rem;font-family:var(--font-mono);color:var(--text-dim)}.header-right{display:flex;align-items:center;gap:.5rem}.toggle-group{display:flex;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:6px;overflow:hidden}.toggle-btn{padding:.25rem .7rem;font-size:.75rem;font-weight:600;font-family:var(--font-sans);background:transparent;color:var(--text-dim);border:none;cursor:pointer;transition:all .15s}.toggle-btn:hover:not(.active){color:var(--text);background:var(--hover-overlay)}.toggle-btn.active{background:var(--accent);color:var(--on-accent)}.theme-toggle{background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;padding:.3rem .55rem;font-size:.95rem;line-height:1;cursor:pointer;margin-left:.25rem;transition:border-color .15s,color .15s,background .15s}.theme-toggle:hover{border-color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#walkthrough-controls{display:flex;align-items:center;gap:.5rem}#step-counter{font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim);min-width:85px;text-align:right}#walkthrough-controls button{padding:.3rem .75rem;font-size:.8rem;font-weight:600;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer;transition:all .15s}#walkthrough-controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}#walkthrough-controls button:disabled{opacity:.3;cursor:not-allowed}#walkthrough-controls button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}#diagram-section{flex:0 0 auto;height:200px;min-height:160px;background:var(--bg-surface);border-radius:10px;padding:.5rem;border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center}#pipeline-svg{width:100%;height:100%;max-height:100%}.node{fill:var(--bg-card);stroke:var(--border-strong);stroke-width:2;transition:stroke .3s,filter .3s}.node.glow{stroke:var(--accent);filter:drop-shadow(0 0 12px var(--accent-glow))}.node.glow-safe{stroke:var(--safe-color);filter:drop-shadow(0 0 12px var(--safe-glow))}.node.glow-unsafe{stroke:var(--unsafe-color);filter:drop-shadow(0 0 12px var(--unsafe-glow))}.node-policy{stroke-dasharray:6 3}.node-blocked{opacity:0;transition:opacity .3s,stroke .3s,filter .3s}.node-blocked.visible{opacity:1;stroke:var(--unsafe-color);filter:drop-shadow(0 0 8px var(--unsafe-glow))}.blocked-label{opacity:0;transition:opacity .3s}.blocked-label.visible{opacity:1}.node-label{fill:var(--text);font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:middle;font-family:var(--font-sans);pointer-events:none}.node-label-sm{font-size:12px;font-weight:500}.node-sublabel{fill:var(--text-dim);font-size:10px;text-anchor:middle;dominant-baseline:middle;font-family:var(--font-mono);pointer-events:none}.gate-diamond{fill:var(--bg-card);stroke:var(--border-strong);stroke-width:2;transition:fill .3s,stroke .3s,filter .3s}.node-gate.safe .gate-diamond{fill:var(--safe-soft);stroke:var(--safe-color);filter:drop-shadow(0 0 12px var(--safe-glow))}.node-gate.unsafe .gate-diamond{fill:var(--unsafe-soft);stroke:var(--unsafe-color);filter:drop-shadow(0 0 12px var(--unsafe-glow))}.gate-label{fill:var(--text-dim);font-size:16px;font-weight:700;text-anchor:middle;dominant-baseline:middle;font-family:var(--font-sans);pointer-events:none;transition:fill .3s}.node-gate.safe .gate-label{fill:var(--safe-color)}.node-gate.unsafe .gate-label{fill:var(--unsafe-color)}.verdict-label{fill:var(--safe-color);font-size:13px;font-weight:700;text-anchor:middle;font-family:var(--font-mono);opacity:0;transition:opacity .3s}.verdict-label.visible{opacity:1}.verdict-unsafe{fill:var(--unsafe-color)}.category-label{fill:var(--unsafe-color);font-size:11px;font-weight:600;text-anchor:middle;font-family:var(--font-mono);opacity:0;transition:opacity .3s}.category-label.visible{opacity:1}.arrow{stroke:var(--border-muted);stroke-width:2.5;fill:none;opacity:0;transition:stroke-dashoffset .5s ease,opacity .2s}.arrow.active{stroke:var(--accent);opacity:1;marker-end:url(#arrow-head)}.arrow-safe.active{stroke:var(--safe-color);marker-end:url(#arrow-head-safe)}.arrow-unsafe.active{stroke:var(--unsafe-color);marker-end:url(#arrow-head-unsafe)}#bottom-section{flex:1 1 0;min-height:0;display:flex;gap:.5rem}#bottom-section h2{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;flex-shrink:0}h2.mt{margin-top:.75rem}#left-panel{flex:1 1 22%;min-width:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;flex-direction:column;overflow-y:auto}#user-view-panel{flex:1 1 28%;min-width:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;flex-direction:column}#user-view{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0}#right-panel{flex:2 1 50%;min-width:0;background:var(--bg-surface);border-radius:10px;padding:.75rem;border:1px solid var(--border-soft);display:flex;flex-direction:column}.panel-content{display:flex;flex-direction:column;flex:1;min-height:0}.hidden{display:none!important}#scenario-selector{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}.scenario-chip{padding:.3rem .65rem;font-size:.75rem;font-family:var(--font-sans);background:var(--bg-card);color:var(--text-dim);border:1px solid var(--border-strong);border-radius:16px;cursor:pointer;transition:all .15s}.scenario-chip:hover{border-color:var(--accent);color:var(--text)}.scenario-chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.scenario-chip.safe{border-color:var(--safe-chip-border)}.scenario-chip.safe.active{background:var(--safe-color);color:var(--on-accent);border-color:var(--safe-color)}.scenario-chip.unsafe{border-color:var(--unsafe-chip-border)}.scenario-chip.unsafe.active{background:var(--unsafe-color);color:var(--on-accent);border-color:var(--unsafe-color)}.scenario-chip.borderline{border-color:var(--borderline-chip-border)}.scenario-chip.borderline.active{background:var(--borderline-color);color:var(--on-accent);border-color:var(--borderline-color)}#scenario-description{font-size:.85rem;color:var(--text-dim);line-height:1.5;padding:.5rem 0}#policy-selector-container{margin-bottom:.5rem}#policy-selector-container select{width:100%;padding:.35rem .5rem;font-size:.8rem;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer}#policy-viewer{flex:1;min-height:0;overflow-y:auto;font-size:.78rem;font-family:var(--font-mono);color:var(--text-dim);line-height:1.6;background:var(--bg-card);padding:.6rem;border-radius:6px;border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;max-height:200px}#user-input{width:100%;padding:.5rem;font-size:.85rem;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px;resize:vertical;min-height:60px}#user-input:focus{outline:none;border-color:var(--accent)}.input-actions{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}#btn-classify{padding:.4rem 1.2rem;font-size:.85rem;font-weight:600;font-family:var(--font-sans);background:var(--accent);color:var(--on-accent);border:none;border-radius:6px;cursor:pointer;transition:all .15s}#btn-classify:hover:not(:disabled){filter:brightness(1.1)}#btn-classify:disabled{opacity:.4;cursor:not-allowed}.checkbox-label{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-dim);cursor:pointer}.checkbox-label input[type=checkbox]{accent-color:var(--accent)}#api-config{display:flex;gap:.4rem;align-items:center}#api-key-input{flex:1;padding:.35rem .5rem;font-size:.78rem;font-family:var(--font-mono);background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:6px}#api-key-input:focus{outline:none;border-color:var(--accent)}.btn-small{padding:.25rem .5rem;font-size:.7rem;font-family:var(--font-sans);background:var(--bg-card);color:var(--text-dim);border:1px solid var(--border-strong);border-radius:4px;cursor:pointer}.hint{font-size:.72rem;color:var(--text-dim);margin-top:.3rem;font-style:italic}#transcript{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.transcript-entry{font-size:.85rem;font-family:var(--font-mono);line-height:1.5;padding:.35rem .5rem;border-radius:4px;background:transparent;border-left:3px solid transparent;transition:opacity .3s,border-color .3s,background .3s;opacity:.5}.transcript-entry.new{opacity:1;border-left-color:var(--accent);background:var(--accent-faint);animation:entry-flash .4s ease-out}@keyframes entry-flash{0%{background:var(--accent-flash)}to{background:var(--accent-faint)}}.transcript-role{font-weight:700;white-space:nowrap}.transcript-text{color:var(--text);white-space:pre-wrap;word-break:break-word}.hl-safe{color:var(--safe-color)}.hl-unsafe{color:var(--unsafe-color)}.hl-category{color:var(--unsafe-color);font-weight:700}.hl-dim{color:var(--text-dim)}.hl-input{color:var(--accent)}.uv-bubble{padding:.6rem .85rem;border-radius:12px;font-size:.9rem;line-height:1.5;max-width:95%;word-break:break-word;animation:uv-fade-in .3s ease-out}@keyframes uv-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.uv-user{background:var(--bubble-user-bg);color:var(--bubble-user-text);align-self:flex-end;border-bottom-right-radius:4px}.uv-assistant{background:var(--bubble-assistant-bg);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}.uv-blocked{background:var(--unsafe-surface);color:var(--unsafe-color);border:1px solid var(--unsafe-border);align-self:flex-start;border-bottom-left-radius:4px;font-weight:600;font-size:.82rem}.uv-thinking{display:flex;gap:5px;padding:.6rem .85rem;align-self:flex-start}.uv-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);animation:uv-bounce 1.4s infinite}.uv-dot:nth-child(2){animation-delay:.2s}.uv-dot:nth-child(3){animation-delay:.4s}@keyframes uv-bounce{0%,80%,to{transform:translateY(0);opacity:.3}40%{transform:translateY(-6px);opacity:1}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}@media(max-width:900px){#app{padding:.5rem}#header{flex-direction:column;align-items:flex-start}.header-right{flex-wrap:wrap}#bottom-section{flex-direction:column}}