.hv-board{--hv-accent:var(--color-chord-magenta);--hv-accent-line:color-mix(in srgb, var(--hv-accent) 40%, transparent);--hv-accent-soft:color-mix(in srgb, var(--hv-accent) 8%, transparent);--hv-accent-glow:color-mix(in srgb, var(--hv-accent) 45%, transparent);--hv-ok:#6e9b12;--hv-ok-soft:color-mix(in srgb, var(--hv-ok) 14%, transparent);--hv-pending:#eae7e1;--hv-rule:#e5e2dc;--hv-frame:#fbfaf8;--hv-surface:var(--color-chord-white);--hv-ink:var(--color-chord-black);--hv-muted:#6b6b6b;--hv-radius-frame:18px;--hv-radius-core:12px;--hv-radius-row:8px;--hv-gap:10px;--hv-wire:44px;--hv-side-row:62px;--hv-step-row:46px;--hv-core-offset:16px;--hv-loop:9.6s;--hv-flow:1.4s;--hv-ease:cubic-bezier(.2, .7, .2, 1);--hv-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--hv-pad:clamp(16px, 3vw, 32px);text-align:left;background:var(--hv-frame);border:1px solid var(--hv-rule);border-radius:var(--hv-radius-frame);padding:calc(var(--hv-pad) + 13px) var(--hv-pad);color:var(--hv-ink);margin:0}.hv-grid{grid-template-columns:1fr var(--hv-wire) 1.3fr var(--hv-wire) 1fr;align-items:center;display:grid}.hv-col{min-width:0;transform:translateY(var(--hv-core-offset));position:relative}.hv-label{font-family:var(--hv-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--hv-muted);white-space:nowrap;margin:0;font-size:11px;position:absolute;bottom:calc(100% + 12px);left:0}.hv-list,.hv-steps{gap:var(--hv-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.hv-side{min-width:0;min-height:var(--hv-side-row);background:var(--hv-surface);border:1px solid var(--hv-rule);border-radius:var(--hv-radius-row);flex-direction:column;justify-content:center;gap:3px;padding:11px 13px;display:flex}.hv-side-name{color:var(--hv-ink);font-size:15px;line-height:1.25}.hv-side-detail{font-family:var(--hv-mono);color:var(--hv-muted);white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.3;overflow:hidden}.hv-wire{height:2px;transform:translateY(var(--hv-core-offset));background-image:linear-gradient(90deg, var(--hv-accent-line) 50%, transparent 50%);background-repeat:repeat-x;background-size:8px 2px}.hv-core{background:var(--hv-surface);border-radius:var(--hv-radius-core);min-width:0;box-shadow:0 0 0 1px var(--hv-accent-line), 0 18px 50px -22px var(--hv-accent-glow);padding:16px}.hv-core-head{align-items:center;gap:8px;min-width:0;margin-bottom:12px;display:flex}.hv-mark{flex:none;width:22px;height:22px}.hv-core-name{letter-spacing:-.01em;font-size:20px;font-weight:500;line-height:1}.hv-core-tagline{font-family:var(--hv-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--hv-muted);white-space:nowrap;text-overflow:ellipsis;margin-left:4px;font-size:11px;overflow:hidden}.hv-step{min-height:var(--hv-step-row);background:var(--hv-frame);border:1px solid var(--hv-rule);border-radius:var(--hv-radius-row);justify-content:space-between;align-items:center;gap:12px;padding:0 14px;display:flex}.hv-step-text{min-width:0;color:var(--hv-ink);white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.hv-tick{background:var(--hv-ok-soft);width:20px;height:20px;color:var(--hv-ok);border-radius:50%;flex:none;place-items:center;display:grid}@media (max-width:820px){.hv-board{padding:var(--hv-pad)}.hv-grid{grid-template-columns:minmax(0,1fr);justify-items:stretch}.hv-col{transform:none}.hv-label{margin-bottom:10px;position:static}.hv-wire{background-image:linear-gradient(180deg, var(--hv-accent-line) 50%, transparent 50%);background-repeat:repeat-y;background-size:2px 8px;justify-self:center;width:2px;height:28px;transform:none}.hv-step{padding-top:10px;padding-bottom:10px}.hv-step-text,.hv-side-detail,.hv-core-tagline{white-space:normal;text-overflow:clip;overflow:visible}.hv-core-head{flex-wrap:wrap}}@media (prefers-reduced-motion:no-preference){.hv-wire{animation:hv-flow-x var(--hv-flow) linear infinite}.hv-step,.hv-tick{animation-duration:var(--hv-loop);animation-timing-function:var(--hv-ease);animation-iteration-count:infinite}.hv-step-1{animation-name:hv-row-1}.hv-step-2{animation-name:hv-row-2}.hv-step-3{animation-name:hv-row-3}.hv-step-4{animation-name:hv-row-4}.hv-step-1 .hv-tick{animation-name:hv-tick-1}.hv-step-2 .hv-tick{animation-name:hv-tick-2}.hv-step-3 .hv-tick{animation-name:hv-tick-3}.hv-step-4 .hv-tick{animation-name:hv-tick-4}}@media (prefers-reduced-motion:no-preference) and (max-width:820px){.hv-wire{animation-name:hv-flow-y}}@keyframes hv-flow-x{0%{background-position:-16px 0}to{background-position:0 0}}@keyframes hv-flow-y{0%{background-position:0 -16px}to{background-position:0 0}}@keyframes hv-row-1{0%,17%{border-color:var(--hv-accent-line);box-shadow:0 0 0 3px var(--hv-accent-soft)}18%,94%{border-color:var(--hv-rule);box-shadow:0 0 #0000}to{border-color:var(--hv-rule);box-shadow:0 0 #0000}}@keyframes hv-row-2{0%,19%{border-color:var(--hv-rule);box-shadow:0 0 #0000}20%,36%{border-color:var(--hv-accent-line);box-shadow:0 0 0 3px var(--hv-accent-soft)}37%,94%{border-color:var(--hv-rule);box-shadow:0 0 #0000}to{border-color:var(--hv-rule);box-shadow:0 0 #0000}}@keyframes hv-row-3{0%,38%{border-color:var(--hv-rule);box-shadow:0 0 #0000}39%,55%{border-color:var(--hv-accent-line);box-shadow:0 0 0 3px var(--hv-accent-soft)}56%,94%{border-color:var(--hv-rule);box-shadow:0 0 #0000}to{border-color:var(--hv-rule);box-shadow:0 0 #0000}}@keyframes hv-row-4{0%,57%{border-color:var(--hv-rule);box-shadow:0 0 #0000}58%,74%{border-color:var(--hv-accent-line);box-shadow:0 0 0 3px var(--hv-accent-soft)}75%,94%{border-color:var(--hv-rule);box-shadow:0 0 #0000}to{border-color:var(--hv-rule);box-shadow:0 0 #0000}}@keyframes hv-tick-1{0%,17%{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}18%,94%{background:var(--hv-ok-soft);color:var(--hv-ok);transform:scale(1)}to{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}}@keyframes hv-tick-2{0%,36%{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}37%,94%{background:var(--hv-ok-soft);color:var(--hv-ok);transform:scale(1)}to{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}}@keyframes hv-tick-3{0%,55%{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}56%,94%{background:var(--hv-ok-soft);color:var(--hv-ok);transform:scale(1)}to{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}}@keyframes hv-tick-4{0%,74%{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}75%,94%{background:var(--hv-ok-soft);color:var(--hv-ok);transform:scale(1)}to{background:var(--hv-pending);color:var(--hv-pending);transform:scale(.85)}}
