/* Sequencer map: geometry and states mirror the reference; palette is inverted. */
.sq-root{
  --ink:#05080a;--bone:#eef3f2;--silver:#b8c4c3;--ash:#3a4648;--ash-text:#7f8d8c;--rule:rgba(255,255,255,.12);
  --ai:#4fd6c8;--idea:#8a5cf0;--dev:#9fd8ff;--game:#ff6f5e;--guard:#ff86bb;--money:#ffc06b;
  --node:#0b1113;--ease:cubic-bezier(.2,.8,.2,1);
  --sq-gutter:clamp(16px,4vw,56px);
  padding:var(--s7) 0 var(--s9);
  font-family:var(--font-sans);color:var(--bone);
}
.sq-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.sq-head{display:grid;gap:12px;flex:1 0 100%}
.sq-title{font:400 clamp(40px,4.6vw,72px)/.9 var(--font-sans);letter-spacing:-.01em;text-transform:uppercase;color:var(--bone);margin:0}
.sq-lede{max-width:56ch;color:var(--silver);text-wrap:pretty;margin:6px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.55}
.sq-rehearsal{color:var(--ash-text);display:flex;align-items:baseline;gap:10px;margin:0;font-size:13px;line-height:1.5}
.sq-rehearsal::before{content:"";background:var(--money);flex:0 0 auto;align-self:center;width:6px;height:6px}
.sq-rehearsal a,.sq-demoLink{color:var(--bone)}
.sq-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sq-btn{border:1px solid var(--rule);height:34px;color:var(--silver);border-radius:999px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-size:13.5px;background:transparent;transition:color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease)}
.sq-btn:hover{color:var(--bone);border-color:rgba(255,255,255,.22)}
.sq-btn:active{transform:scale(.97)}
.sq-btn svg{width:14px;height:14px}
.sq-switch i{background:var(--ash);width:26px;height:15px;transition:background .2s var(--ease);border-radius:8px;position:relative}
.sq-switch i::after{content:"";background:var(--ink);width:11px;height:11px;transition:transform .25s var(--ease);border-radius:50%;position:absolute;top:2px;left:2px}
.sq-switch[aria-pressed="true"]{color:var(--bone)}
.sq-switch[aria-pressed="true"] i{background:var(--money)}
.sq-switch[aria-pressed="true"] i::after{transform:translate(11px)}
.sq-demo{color:var(--ash-text);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:12.5px}
.sq-demo::before{content:"";background:var(--money);border-radius:50%;width:6px;height:6px}
.sq-demoLink{text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:3px}

/* live box */
.sq-live{border:1px solid var(--rule);background:rgba(5,8,10,.8);border-radius:12px;gap:10px;margin-bottom:16px;padding:12px 14px;font-size:13.5px;display:grid}
.sq-liveHead{color:var(--bone);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}
.sq-liveHead b{letter-spacing:.12em;text-transform:uppercase;color:var(--ash-text);align-items:center;gap:8px;font-size:11px;font-weight:400;display:inline-flex}
.sq-liveHead b::before{content:"";background:var(--ai);width:6px;height:6px;box-shadow:0 0 8px var(--ai);border-radius:50%}
.sq-liveHead small{color:var(--ash-text);font-variant-numeric:tabular-nums;font-size:12px}
.sq-liveList{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sq-liveList li{color:var(--silver);display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px}
.sq-liveList li:first-child{color:var(--bone)}
.sq-liveList time{color:var(--ash-text);font-variant-numeric:tabular-nums}

/* board */
.sq-board{margin-inline:min(0px,calc(50% - min(720px,50vw - var(--sq-gutter))));border:1px solid var(--rule);background:radial-gradient(rgba(255,255,255,.055) 1px,rgba(0,0,0,0) 1px) 0 0/24px 24px rgba(5,8,10,.93);border-radius:16px;position:relative;overflow:hidden}
.sq-map{width:100%;height:auto;display:block}
.sq-rule{stroke:rgba(255,255,255,.06)}
.sq-lane{paint-order:stroke;stroke:var(--ink);stroke-width:8px;stroke-linejoin:round}
.sq-laneTitle{fill:var(--ash-text);letter-spacing:.12em;font-size:11px;font-family:var(--font-sans)}
.sq-laneSub{fill:var(--ash-text);font-size:11.5px;font-family:var(--font-sans)}
.sq-edge{fill:none;stroke:var(--ash);stroke-width:1px;transition:opacity .4s var(--ease),stroke .4s var(--ease)}
.sq-edge.sq-on{stroke:var(--c);stroke-width:1.4px}
.sq-dash{stroke-dasharray:4,4}
.sq-arrow{fill:var(--c,var(--ash))}
.sq-edgeLabel rect{fill:var(--ink)}
.sq-edgeLabel text{fill:var(--ash-text);letter-spacing:.03em;font-size:10.5px;font-family:var(--font-sans)}
.sq-edgeLabel{transition:opacity .4s var(--ease)}
.sq-dim{opacity:.22}
.sq-n{cursor:pointer;transition:opacity .4s var(--ease);outline:none}
.sq-n .sq-box{fill:var(--node);stroke:var(--c);stroke-width:1px;stroke-opacity:.38;transition:stroke-opacity .4s var(--ease)}
.sq-n.sq-on .sq-box{stroke-opacity:.95}
.sq-n:focus-visible .sq-box{stroke:var(--bone);stroke-opacity:1;stroke-width:2px}
.sq-fillC{fill:var(--c)}
.sq-label{fill:var(--bone);font-size:13.5px;font-family:var(--font-sans)}
.sq-chipBg{fill:var(--c);fill-opacity:.14}
.sq-chip{fill:var(--c);letter-spacing:.08em;font-size:10px;font-family:var(--font-sans)}
.sq-brain .sq-box,.sq-brain.sq-on .sq-box{fill:rgb(8,19,20);stroke-opacity:.55}
.sq-brainName{fill:var(--bone);font-size:19px;font-family:var(--font-sans)}
.sq-brainSub{fill:var(--ash-text);font-size:12.5px;font-family:var(--font-sans)}
.sq-pulse{fill:none;stroke:var(--c);transform-box:fill-box;transform-origin:50% center;animation:sq-pulse 3.2s ease-in-out infinite}
.sq-board:not([data-active]) .sq-pulse{animation-play-state:paused}
@keyframes sq-pulse{0%,100%{stroke-opacity:.6;transform:scale(1)}50%{stroke-opacity:0;transform:scale(2.33)}}
.sq-gate .sq-box{fill:color-mix(in srgb,var(--guard) 5%,transparent);stroke:var(--guard);stroke-opacity:1;stroke-dasharray:3,4}
.sq-gate circle,.sq-gate path{fill:none;stroke:var(--guard)}
.sq-gate text{fill:var(--guard);letter-spacing:.14em;font-size:11.5px;font-family:var(--font-sans)}
.sq-dot{--c:var(--ai)}
.sq-halo{fill:var(--c);fill-opacity:.18}
.sq-core{fill:var(--bone)}
.sq-n text{pointer-events:none}

/* node panel */
.sq-panel{border:1px solid var(--rule);opacity:0;transform-origin:100% 0;pointer-events:none;width:300px;transition:opacity .2s var(--ease),transform .2s var(--ease);background:rgba(9,14,16,.94);border-radius:12px;padding:16px 18px;position:absolute;top:14px;right:14px;transform:translateY(-4px) scale(.98);box-shadow:0 16px 40px -18px rgba(0,0,0,.8)}
.sq-panel.sq-open{opacity:1;pointer-events:auto;transform:none}
.sq-panel h3{align-items:center;gap:9px;margin:0;padding-right:48px;font-size:17px;font-weight:400;line-height:1.3;display:flex;letter-spacing:-.01em}
.sq-panel h3 i{background:var(--c);border-radius:50%;flex:0 0 auto;width:7px;height:7px}
.sq-panel p{color:var(--silver);margin:8px 0 0;font-size:13.5px;line-height:1.55}
.sq-close{min-height:28px;color:var(--ash-text);padding:6px 8px;font-size:12px;line-height:16px;position:absolute;top:6px;right:4px}
.sq-close:hover{color:var(--bone)}

/* story bar */
.sq-story{border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:14px 18px}
.sq-beats{display:flex;gap:4px}
.sq-beats button{display:grid;align-items:center;width:26px;height:24px}
.sq-beats button span{background:var(--ash);border-radius:2px;height:3px;display:block;position:relative;overflow:hidden}
.sq-beats button span::after{content:"";background:var(--bone);transform-origin:0 50%;transition:transform .4s var(--ease);position:absolute;inset:0;transform:scaleX(0)}
.sq-beats button[data-done] span::after{transform:scaleX(1)}
.sq-beats button:hover span{background:var(--ash-text)}
.sq-cap{line-height:1.45}
.sq-cap b{font-size:15px;font-weight:400;display:block}
.sq-cap span{color:var(--silver);font-size:13.5px}

/* phone layout */
.sq-phone{display:none}
@media (max-width:819px){.sq-board{display:none}.sq-phone{display:block}}
.sq-brainbar{z-index:2;border:1px solid color-mix(in srgb,var(--ai) 35%,transparent);background:rgb(8,16,18);border-radius:12px;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;line-height:1.4;position:sticky;top:64px}
.sq-brainbar i{background:var(--ai);width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ai) 15%,transparent);border-radius:50%;flex:0 0 auto}
.sq-brainbar b{font-weight:400}
.sq-brainbar span{color:var(--ash-text);font-size:12.5px;display:block}
.sq-tabs{scrollbar-width:none;display:flex;gap:6px;margin:4px 0 14px;overflow-x:auto}
.sq-tabs button{border:1px solid var(--rule);height:34px;color:var(--silver);border-radius:999px;flex:0 0 auto;padding:0 14px;font-size:13.5px}
.sq-tabs button[aria-selected="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.sq-tabs button:focus-visible{outline-offset:-3px}
.sq-steps{margin:0;padding:0;list-style:none}
.sq-steps li{transition:opacity .4s var(--ease);padding-left:22px;position:relative}
.sq-steps li::before{content:"";background:var(--ash);width:1px;position:absolute;top:0;bottom:0;left:6px}
.sq-steps li:first-child::before{top:24px}
.sq-steps li:last-child::before{bottom:calc(100% - 24px)}
.sq-steps li.sq-off{opacity:.32}
.sq-node{border:1px solid color-mix(in srgb,var(--c) 33%,transparent);background:var(--node);border-radius:10px;align-items:center;gap:10px;min-height:40px;margin:6px 0;padding:0 12px;font-size:14.5px;line-height:1.3;display:flex;position:relative}
.sq-node::before{content:"";background:var(--c);border-radius:50%;width:9px;height:9px;margin-top:-4.5px;position:absolute;top:50%;left:-20px}
.sq-node i{background:var(--c);border-radius:50%;flex:0 0 auto;width:6px;height:6px}
.sq-node small{color:var(--ash-text);text-align:right;margin-left:auto;font-size:11.5px}
.sq-gateRow{border:1px dashed var(--guard);color:var(--guard);background:color-mix(in srgb,var(--guard) 5%,transparent);border-radius:10px;margin:8px 0;padding:10px 12px;font-size:13.5px;line-height:1.4}
.sq-gateRow small{color:rgb(201,138,168);font-size:12px;display:block}
.sq-loop{color:var(--ai);align-items:center;gap:8px;margin:6px 0;padding:4px 0;font-size:13px;line-height:1.4;display:flex;border:0;grid-template-columns:none}
.sq-loop svg{flex:0 0 auto;width:14px;height:14px}
.sq-pcap{border:1px solid var(--rule);color:var(--silver);border-radius:12px;margin-top:14px;padding:12px 14px;font-size:14px;line-height:1.5}
.sq-pcap b{color:var(--bone);font-weight:400;display:block}

/* legend + limits */
.sq-legend{color:var(--ash-text);display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0 0;padding:0;font-size:12px;list-style:none}
.sq-legend li{align-items:center;gap:6px;display:inline-flex}
.sq-legend i{background:var(--c);border-radius:2px;width:8px;height:8px}
.sq-limitsBtn{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s8);font:600 12px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);padding:8px 0}
.sq-limitsBtn span{display:inline-block;width:12px;font:400 15px var(--font-mono);transition:transform .2s var(--ease)}
.sq-limitsBtn[aria-expanded="true"] span{transform:rotate(45deg)}
.sq-limits{max-width:880px;margin:8px 0 0;display:grid}
.sq-limits[hidden]{display:none}
.sq-limits div{border-bottom:1px solid var(--rule);display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:14px 0}
.sq-limits dt{letter-spacing:.08em;text-transform:uppercase;color:var(--ash-text);padding-top:2px;font-size:12px}
.sq-limits dd{color:var(--silver);text-wrap:pretty;margin:0;font-size:15px;line-height:1.6}
@media (max-width:760px){.sq-limits div{grid-template-columns:1fr;gap:6px}}
@media (max-width:819px){.sq-top{display:block}.sq-controls{margin-top:16px}}
@media (prefers-reduced-motion:reduce){.sq-pulse{stroke-opacity:0;animation:none}}