/* SVG text styles */
#stage text { font-family: Inter, system-ui, sans-serif; }
.z-num { font: 600 11px 'JetBrains Mono', monospace; fill: #22D3EE; }
.z-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; fill: #E2E8F0; }
.z-sub { font-size: 11px; fill: #8B97B0; }
.boundary-text { font-size: 9px; font-weight: 600; letter-spacing: .14em; fill: #8B97B0; }
.lbl-strong { font-size: 14px; font-weight: 600; fill: #E2E8F0; }
.lbl-strong-sm { font-size: 13px; font-weight: 600; fill: #E2E8F0; }
.lbl-muted { font-size: 11px; fill: #8B97B0; }
.lbl-small { font-size: 11px; font-weight: 500; fill: #B4BED1; }
.lbl-tiny { font-size: 10px; fill: #8B97B0; }
.lbl-status { font-size: 11px; font-weight: 500; fill: #8B97B0; }
.lbl-green { font-size: 11px; font-weight: 600; fill: #6EE7B7; }
.lbl-note { font-size: 11px; font-weight: 600; fill: #67E8F9; letter-spacing: .02em; }
.mono-sm { font: 500 11px 'JetBrains Mono', monospace; fill: #B4BED1; }
.mono-xs { font: 500 10px 'JetBrains Mono', monospace; fill: #67E8F9; }
.mono-xxs { font: 500 9px 'JetBrains Mono', monospace; fill: #8B97B0; }
.hex text { font: 600 8.5px 'JetBrains Mono', monospace; fill: #67E8F9; }
.node-city { font-size: 10.5px; font-weight: 600; fill: #E2E8F0; }
.node-meta { font: 500 8.5px 'JetBrains Mono', monospace; fill: #8B97B0; }
.shard-lbl { font: 700 8px 'JetBrains Mono', monospace; fill: #0B1020; }
.tag-text { font: 500 9px 'JetBrains Mono', monospace; fill: #E2E8F0; }

.zone { fill: #0D1426; stroke: #1A2338; stroke-width: 1.5; transition: stroke .5s, fill .5s; }
.zone.active { stroke: #155E75; fill: #0E1A2E; }
.zone-label { transition: opacity .5s; }

/* Controls */
.ctrl, .ctrl-primary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; color: #B4BED1;
  transition: background .15s, color .15s;
}
.ctrl:hover { background: #1A2338; color: #fff; }
.ctrl-primary { width: 42px; height: 42px; background: #22D3EE; color: #0B1020; margin: 0 4px; }
.ctrl-primary:hover { background: #67E8F9; }
.ctrl svg { width: 18px; height: 18px; }
.ctrl-primary svg { width: 20px; height: 20px; }

.seg { display: inline-flex; background: #131B30; border: 1px solid #26314A; border-radius: 10px; padding: 2px; }
.seg button { font-size: 11px; font-weight: 500; color: #8B97B0; padding: 5px 8px; border-radius: 8px; transition: all .15s; }
.seg button:hover { color: #E2E8F0; }
.seg button.on { background: #26314A; color: #fff; }

.toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 500; color: #8B97B0; border: 1px solid #26314A; transition: all .15s; }
.toggle svg { width: 15px; height: 15px; }
.toggle:hover { color: #E2E8F0; }
.toggle.on { color: #67E8F9; border-color: #155E75; background: #0E2A36; }

/* Scrubber */
.scrub { -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.scrub::-moz-range-track { height: 6px; background: transparent; }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #fff; border: 3px solid #22D3EE; }
.scrub::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 3px solid #22D3EE; }
#ticks span { position: absolute; top: -3px; width: 2px; height: 12px; background: #3A4763; border-radius: 1px; z-index: 2; }

/* Steps list */
.step-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px; border-radius: 12px; transition: background .15s; position: relative; }
.step-item:hover { background: #131B30; }
.step-item .num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 600 11px 'JetBrains Mono', monospace; color: #8B97B0; background: #131B30; border: 1px solid #26314A; transition: all .2s; position: relative; overflow: hidden; }
.step-item .num svg { width: 14px; height: 14px; }
.step-item .t { font-size: 13px; font-weight: 500; color: #B4BED1; line-height: 1.3; }
.step-item .s { font-size: 11.5px; color: #8B97B0; margin-top: 2px; line-height: 1.35; }
.step-item.done .num { background: #0E2A36; border-color: #155E75; color: #67E8F9; }
.step-item.active { background: #131B30; }
.step-item.active .num { background: #22D3EE; border-color: #22D3EE; color: #0B1020; }
.step-item.active .t { color: #fff; }
.step-item .bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; background: #1A2338; border-radius: 2px; overflow: hidden; opacity: 0; }
.step-item.active .bar { opacity: 1; }
.step-item .bar i { display: block; height: 100%; background: #22D3EE; width: 0; }

.fact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #B4BED1; background: #131B30; border: 1px solid #26314A; border-radius: 8px; padding: 5px 9px; }
.fact svg { width: 13px; height: 13px; color: #67E8F9; }
#capIcon svg { width: 20px; height: 20px; }

.cap-anim { animation: capIn .45s ease both; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }