:root{
--bg:#0a0e17;
--panel:#111827;
--panel2:#0f1522;
--border:#1f2937;
--accent:#38f2c0;
--accent2:#a78bfa;
--accent3:#fbbf24;
--text:#e5e7eb;
--muted:#8b96a8;
--good:#4ade80;
--bad:#f87171;
--m1:#60a5fa;
--m2:#fb923c;
--m3:#4ade80;
}
*{box-sizing:border-box;}
body{
margin:0;
background:radial-gradient(1200px 600px at 50% -10%, #14203a 0%, var(--bg) 55%);
color:var(--text);
font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
min-height:100vh;
}
header{
text-align:center;
padding:28px 20px 10px;
}
header h1{
margin:0 0 6px;
font-size:1.8rem;
background:linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-weight:800;
letter-spacing:.3px;
}
header p{
margin:0;
color:var(--muted);
font-size:.95rem;
}

/* mode tabs */
.mode-tabs{
display:flex;
justify-content:center;
gap:8px;
margin:18px 0 0;
flex-wrap:wrap;
}
.tab-btn{
background:var(--panel);
border:1px solid var(--border);
color:var(--muted);
padding:8px 20px;
border-radius:999px;
font-size:.82rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
}
.tab-btn:hover{ color:var(--text); border-color:var(--accent2); }
.tab-btn.active{
background:linear-gradient(90deg, var(--accent), var(--accent2));
color:#062018;
border-color:transparent;
}

/* category filter chips (concept mode) */
.filter-row{
display:flex;
justify-content:center;
gap:6px;
flex-wrap:wrap;
margin:14px 16px 0;
}
.chip{
background:var(--panel);
border:1px solid var(--border);
color:var(--muted);
padding:5px 12px;
border-radius:999px;
font-size:.72rem;
cursor:pointer;
transition:all .2s ease;
}
.chip:hover{ color:var(--text); border-color:var(--accent); }
.chip.active{ background:var(--accent2); color:#0a0e17; border-color:transparent; }

/* Pipeline nav */
.pipeline-wrap{
overflow-x:auto;
padding:22px 16px 8px;
}
.pipeline{
display:flex;
align-items:center;
gap:0;
min-width:max-content;
margin:0 auto;
padding:0 8px;
}
.node{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
cursor:pointer;
padding:6px 10px;
position:relative;
user-select:none;
}
.node .dot{
width:34px;height:34px;
border-radius:50%;
background:var(--panel);
border:2px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:.85rem;font-weight:700;
color:var(--muted);
transition:all .25s ease;
}
.node .label{
font-size:.68rem;
color:var(--muted);
max-width:78px;
text-align:center;
line-height:1.15;
transition:color .25s ease;
}
.node.visited .dot{ border-color:var(--accent); color:var(--accent); }
.node.active .dot{
background:var(--accent);
border-color:var(--accent);
color:#062018;
box-shadow:0 0 16px rgba(56,242,192,.6);
transform:scale(1.12);
}
.node.active .label{ color:var(--text); font-weight:700; }
.connector{
width:34px;height:2px;
background:var(--border);
margin-top:-20px;
}
.connector.done{ background:var(--accent); }

/* Main layout */
main{
max-width:1180px;
margin:10px auto 40px;
padding:0 18px;
display:grid;
grid-template-columns:1fr 1.15fr;
gap:18px;
}
@media (max-width:860px){ main{ grid-template-columns:1fr; } }

.panel{
background:linear-gradient(180deg, var(--panel), var(--panel2));
border:1px solid var(--border);
border-radius:14px;
padding:20px 22px;
}
.stage-kicker{
color:var(--accent);
font-size:.75rem;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
}
.stage-title{
font-size:1.4rem;
font-weight:800;
margin:4px 0 10px;
}
.stage-tagline{
color:var(--accent3);
font-size:.85rem;
margin-bottom:14px;
font-style:italic;
}
.stage-desc{
color:#cbd5e1;
font-size:.92rem;
line-height:1.55;
margin-bottom:16px;
}
.meta-row{
display:grid;
grid-template-columns:auto 1fr;
gap:6px 10px;
font-size:.82rem;
margin-bottom:8px;
}
.meta-row b{ color:var(--muted); font-weight:600; white-space:nowrap; }
.meta-row span{ color:#d1d9e6; }

.related-wrap{
margin-top:16px;
display:flex;
gap:8px;
flex-wrap:wrap;
}
.related-btn{
border-color:var(--accent2);
color:var(--accent2);
font-size:.78rem;
}
.related-btn:hover{ background:var(--accent2); color:#0a0e17; }

.anim-panel{
min-height:340px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative;
}
.anim-stage{ width:100%; }
.anim-stage svg{ width:100%; height:auto; display:block; }

.code-block{
background:#060a12;
border:1px solid var(--border);
border-radius:8px;
padding:14px 16px;
font-family:'Consolas','Courier New',monospace;
font-size:.8rem;
line-height:1.6;
color:#7de8c8;
width:100%;
overflow-x:auto;
}
.code-block .kw{ color:var(--accent2); }
.code-block .cm{ color:#546177; }
.code-line{
white-space:pre;
opacity:0;
animation:fadeUp .45s ease forwards;
}

/* controls */
.controls{
display:flex;
justify-content:center;
gap:10px;
margin:18px 0 6px;
flex-wrap:wrap;
}
.btn{
background:var(--panel);
border:1px solid var(--border);
color:var(--text);
padding:9px 16px;
border-radius:8px;
font-size:.85rem;
cursor:pointer;
transition:all .2s ease;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); color:#062018; font-weight:700; border-color:var(--accent); }
.btn.primary:hover{ opacity:.9; color:#062018; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

footer{ text-align:center; color:var(--muted); font-size:.75rem; padding:20px; }

/* animation keyframes */
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes pop{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes blinkBad{ 0%,100%{ fill:var(--bad); opacity:1;} 50%{ opacity:.15; } }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.4; } }
@keyframes floatIn{ from{ opacity:0; transform:translateY(-18px);} to{opacity:1; transform:translateY(0);} }
@keyframes glow{ 0%,100%{ filter:drop-shadow(0 0 2px currentColor);} 50%{ filter:drop-shadow(0 0 8px currentColor);} }
@keyframes slideRight{ from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:translateX(0);} }