:root {
  --bg: #06101b;
  --panel: #0b1826;
  --panel-strong: #0f2132;
  --line: #284055;
  --text: #f3f7fa;
  --muted: #94a7b8;
  --cyan: #36bfd7;
  --blue: #4d8ff7;
  --green: #3bd18a;
  --amber: #f3b74d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
.skip-link { position: fixed; z-index: 80; top: .6rem; left: .6rem; padding: .5rem .7rem; color: var(--bg); background: var(--cyan); transform: translateY(-170%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 20; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 1rem 5vw; border-bottom: 1px solid var(--line); background: rgba(6,16,27,.94); backdrop-filter: blur(12px); }
.site-header a { color: var(--muted); font-weight: 750; text-decoration: none; }
.site-header span { color: var(--muted); font: 750 .66rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.site-header i { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
main { width: min(1300px, 92vw); margin: auto; }
.hero { padding: clamp(4rem, 8vw, 6.8rem) 0 3.5rem; }
.eyebrow { margin: 0 0 .65rem; color: var(--cyan); font: 800 .7rem/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .11em; }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(2.2rem, 4.8vw, 4.5rem); line-height: 1.03; letter-spacing: -.045em; }
.hero > p:not(.eyebrow) { max-width: 790px; margin: 1.3rem 0; color: var(--muted); font-size: 1.08rem; }
.tech-stack { display: flex; flex-wrap: wrap; gap: .4rem; }
.tech-stack span { padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 4px; color: #c1ced9; background: var(--panel); font: 700 .66rem/1.2 ui-monospace, monospace; }
.workflow-section, .features, .role { margin-bottom: 1.3rem; padding: clamp(1.1rem, 2.6vw, 2rem); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.3rem; }
.section-head.compact { margin-bottom: 1.1rem; }
.section-head h2, .role h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.05rem); letter-spacing: -.025em; }
.section-head > div > p:last-child, .role > div > p:last-child { margin: .35rem 0 0; color: var(--muted); }
.lane-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; max-width: 560px; }
.lane-filters button { padding: .38rem .6rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: var(--bg); cursor: pointer; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.lane-filters button:hover, .lane-filters button:focus-visible { border-color: var(--cyan); outline: none; }
.lane-filters button.active { color: var(--bg); border-color: var(--cyan); background: var(--cyan); }
.workflow-lanes { display: grid; gap: .85rem; }
.lane { --lane-color: var(--cyan); display: grid; grid-template-columns: 165px 1fr; gap: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.lane.filtered { display: none; }
.lane-heading { display: flex; flex-direction: column; justify-content: center; padding-right: .8rem; border-right: 2px solid var(--lane-color); }
.lane-heading span { color: var(--lane-color); font: 800 .61rem/1 ui-monospace, monospace; text-transform: uppercase; }
.lane-heading h3 { margin: .5rem 0 0; font-size: .9rem; line-height: 1.25; }
.node-flow { display: flex; align-items: stretch; gap: 1.7rem; min-width: 0; overflow-x: auto; padding: .1rem .1rem .3rem; background-image: linear-gradient(90deg, var(--lane-color), var(--lane-color)); background-position: left 50%; background-repeat: no-repeat; background-size: 0 1px; animation: drawConnector 1.1s ease forwards; }
.node-group { position: relative; display: flex; gap: .4rem; min-width: max-content; }
.node { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 145px; min-height: 102px; padding: .75rem; border: 1px solid var(--line); border-radius: 7px; color: var(--text); text-align: left; background: var(--panel); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.node::after, .node-group::after { content: "→"; position: absolute; left: calc(100% + .55rem); top: 50%; color: var(--lane-color); font-weight: 900; }
.node-group .node::after, .node-flow > :last-child::after { display: none; }
.node:hover, .node:focus-visible, .node.selected { border-color: var(--lane-color); outline: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.node-code { display: grid; place-items: center; width: 34px; height: 30px; margin-bottom: .55rem; border-radius: 5px; color: var(--lane-color); background: color-mix(in srgb, var(--lane-color) 13%, transparent); font: 850 .61rem/1 ui-monospace, monospace; }
.node strong { font-size: .75rem; line-height: 1.25; }
.node small { margin-top: .25rem; color: var(--muted); font-size: .61rem; }
.feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
.feature-grid article { padding: .9rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
.feature-grid span { color: var(--green); font: 850 .61rem/1 ui-monospace, monospace; }
.feature-grid h3 { margin: .75rem 0 .25rem; font-size: .82rem; }
.feature-grid p { margin: 0; color: var(--muted); font-size: .7rem; }
.role { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; margin-bottom: 5rem; }
.role ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.role li { padding: .65rem .75rem; border-left: 2px solid var(--blue); background: var(--bg); font-size: .75rem; }
.detail-panel { position: fixed; z-index: 50; top: 0; right: 0; width: min(455px, 100%); height: 100dvh; padding: 1.5rem; overflow-y: auto; border-left: 1px solid var(--line); background: #081521; box-shadow: -25px 0 65px rgba(0,0,0,.55); visibility: hidden; transform: translateX(105%); transition: transform .25s, visibility .25s; }
.detail-panel.open { visibility: visible; transform: none; }
.detail-head { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font: 800 .65rem/1 ui-monospace, monospace; }
.detail-head button { width: 38px; height: 38px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: transparent; cursor: pointer; font-size: 1.4rem; }
.detail-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 3rem 0 1.3rem; color: var(--cyan); border: 1px solid rgba(54,191,215,.4); border-radius: 9px; background: rgba(54,191,215,.1); font: 900 .75rem/1 ui-monospace, monospace; }
.detail-panel h2 { margin: 0; font-size: 1.8rem; }
.detail-panel > p { color: var(--muted); }
.detail-panel dl { margin-top: 1.8rem; }
.detail-panel dl div { padding: 1rem 0; border-top: 1px solid var(--line); }
.detail-panel dt { color: var(--cyan); font: 850 .64rem/1 ui-monospace, monospace; text-transform: uppercase; }
.detail-panel dd { margin: .4rem 0 0; font-size: .84rem; }
.backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(0,0,0,.7); }
.backdrop[hidden] { display: none; }
@keyframes drawConnector { to { background-size: 100% 1px; } }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .section-head { flex-direction: column; } .lane-filters { justify-content: flex-start; } .role { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lane { grid-template-columns: 1fr; } .lane-heading { padding: 0 0 .65rem; border-right: 0; border-bottom: 2px solid var(--lane-color); } .node-flow { flex-direction: column; overflow: visible; gap: 1.6rem; } .node-group { display: grid; min-width: 0; } .node { width: 100%; min-width: 0; } .node::after, .node-group::after { content: "↓"; left: 50%; top: calc(100% + .48rem); } .node-group .node::after { display: none; } }
@media (max-width: 520px) { main { width: 94vw; } .site-header span { display: none; } .hero { padding-top: 3rem; } .feature-grid, .role ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }