@import "https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css";
:root{--bg:#0a0a0a;--surface:#111;--surface-2:#181818;--border:#222;--border-bright:#333;--text:#b0b0b0;--text-dim:#666;--text-bright:#e0e0e0;--accent:#0f8;--accent-dim:#00cc6a;--accent-glow:#00ff8826;--danger:#f44;--danger-dim:#c33;--danger-glow:#ff444426;--warning:#fa0;--warning-dim:#c80;--warning-glow:#ffaa0026;--info:#48f;--info-dim:#36c;--info-glow:#4488ff26;--font-mono:"Hack",monospace;--radius:4px;--transition:.15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.6}a{color:var(--accent);transition:color var(--transition);text-decoration:none}a:hover{color:var(--accent-dim);text-decoration:underline}::selection{background:var(--accent);color:var(--bg)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.app-shell{height:100vh;display:flex;overflow:hidden}.main-content{flex:1;padding:32px 40px;overflow-y:auto}h1,h2,h3,h4{color:var(--text-bright);font-weight:600}h1{letter-spacing:-.5px;font-size:20px}h2{font-size:16px}h3{font-size:14px}.category-tag{text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);margin-bottom:8px;padding:2px 8px;font-size:10px;display:inline-block}.concept-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition);cursor:pointer;color:inherit;padding:20px;text-decoration:none;display:block}.concept-card:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);color:inherit;text-decoration:none}.concept-card h3{margin-bottom:8px}.concept-card p{color:var(--text-dim);font-size:12px;line-height:1.5}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px;display:grid}.info-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;padding:20px}.info-panel h3{color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:12px}.info-panel p,.info-panel li{color:var(--text);font-size:12px;line-height:1.7}.info-panel ul{padding:0;list-style:none}.info-panel li:before{content:"› ";color:var(--accent)}.info-panel li.con:before{color:var(--danger)}.info-columns{grid-template-columns:1fr 1fr;gap:16px;display:grid}.viz-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:300px;margin-bottom:16px;padding:24px;position:relative;overflow:hidden}.viz-controls{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.btn{font-family:var(--font-mono);border:1px solid var(--border-bright);border-radius:var(--radius);background:var(--surface-2);color:var(--text);cursor:pointer;transition:all var(--transition);padding:8px 16px;font-size:12px}.btn:hover{border-color:var(--accent);color:var(--text-bright);box-shadow:0 0 12px var(--accent-glow)}.btn:active{transform:scale(.97)}.btn-accent{border-color:var(--accent);color:var(--accent)}.btn-accent:hover{background:var(--accent);color:var(--bg)}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:var(--bg)}.btn:disabled{opacity:.3;cursor:not-allowed}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.allowed{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.status-dot.rejected{background:var(--danger);box-shadow:0 0 8px var(--danger-glow)}.stats-row{flex-wrap:wrap;gap:24px;margin-bottom:16px;display:flex}.stat{flex-direction:column;gap:2px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-size:10px}.stat-value{color:var(--text-bright);font-size:18px;font-weight:600}.stat-value.accent{color:var(--accent)}.stat-value.danger{color:var(--danger)}.stat-value.warning{color:var(--warning)}.log-area{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);max-height:200px;padding:12px;font-size:11px;overflow-y:auto}.log-entry{color:var(--text-dim);padding:2px 0;animation:.2s fadeIn}.log-entry.allowed{color:var(--accent)}.log-entry.rejected{color:var(--danger)}.log-entry .timestamp{color:var(--text-dim);margin-right:8px}.page-header{margin-bottom:24px}.page-header h1{margin-top:4px}.page-header .subtitle{color:var(--text-dim);margin-top:4px;font-size:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes glow{0%,to{box-shadow:0 0 8px var(--accent-glow)}50%{box-shadow:0 0 20px var(--accent-glow)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes drip{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(40px)}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.animate-in{animation:.3s fadeIn}.sim-input{font-family:var(--font-mono);border:1px solid var(--border-bright);border-radius:var(--radius);background:var(--bg);color:var(--text-bright);transition:all var(--transition);outline:none;min-width:100px;padding:8px 12px;font-size:12px}.sim-input::placeholder{color:var(--text-dim)}.sim-input:focus{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.sim-input:hover:not(:focus){border-color:var(--border-bright);background:var(--surface-2)}