:root{--bg:#05070c;--bg-elev:#0b0f17;--bg-glass:#0e131db8;--line:#7896be24;--line-strong:#7896be4d;--text:#e8eef7;--text-dim:#8a97ab;--text-faint:#4f5a6c;--accent:#5ef2ff;--accent-soft:#5ef2ff24;--accent-glow:0 0 18px #5ef2ff59;--chord:#ffd166;--cue:#b48cff;--note-green:#6ef2a0;--note-rose:#ff7ab8;--radius:14px;--font:"Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;--ease:cubic-bezier(.2, .7, .2, 1);--gutter:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin;-webkit-text-size-adjust:100%}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;background-image:radial-gradient(1200px 600px at 10% -10%,#5ef2ff12,#0000 60%),radial-gradient(900px 500px at 100% 0,#b48cff0f,#0000 60%);background-attachment:fixed;margin:0;font-size:15px;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--bg);border-radius:999px}::selection{background:var(--accent-soft);color:var(--text)}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}h1,h2,h3,p{margin:0}.wrap{width:100%;max-width:1240px;padding:0 var(--gutter);margin:0 auto}.top{z-index:20;padding-top:env(safe-area-inset-top);background:var(--bg-glass);-webkit-backdrop-filter:blur(18px)saturate(140%);border-bottom:1px solid var(--line);position:sticky;top:0}.top .wrap{justify-content:space-between;align-items:center;gap:12px;height:56px;display:flex}.brand{letter-spacing:.02em;align-items:center;gap:10px;min-height:44px;font-weight:600;display:inline-flex}.brand__mark{border:1px solid var(--line-strong);width:26px;height:26px;box-shadow:var(--accent-glow);color:var(--accent);font-family:var(--mono);background:linear-gradient(135deg,#5ef2ff40,#b48cff33);border-radius:8px;flex:none;place-items:center;font-size:12px;display:grid}.btn{border:1px solid var(--line-strong);height:40px;color:var(--text);font:inherit;letter-spacing:.02em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff05;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:13px;font-weight:500;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s;display:inline-flex}.btn:hover{background:#5ef2ff0f;border-color:#5ef2ff80}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#03141a;box-shadow:var(--accent-glow);border-color:#0000}.btn--primary:hover{background:#8cf6ff;border-color:#0000}.btn--lg{height:44px;padding:0 22px;font-size:15px}@media (pointer:coarse){.btn{height:44px;padding:0 18px;font-size:14px}}@media (pointer:fine) and (width>=900px){.btn{height:36px}.btn--lg{height:44px}}.hook{flex-direction:column;gap:16px;padding-block:28px 18px;display:flex}.hook h1{letter-spacing:-.02em;text-wrap:balance;max-width:17ch;font-size:clamp(28px,7.4vw,46px);font-weight:600;line-height:1.08}.hook h1 em{color:var(--accent);font-style:normal}.hook__side{gap:14px;max-width:46ch;display:grid}.hook__side p{color:var(--text-dim);font-size:15px;line-height:1.45}.hook__side p strong{color:var(--text);font-weight:500}.hook__actions{flex-wrap:wrap;gap:10px;display:flex}.hook__actions .btn{flex:auto}.mosaic{grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none;display:grid}.tile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;min-width:0;min-height:0;padding:14px 14px 12px;transition:border-color .2s;display:flex;overflow:hidden}.tile:hover{border-color:var(--line-strong)}.tile__demo{aspect-ratio:9/4;flex:none;place-items:center;width:100%;display:grid}.tile--session .tile__demo{aspect-ratio:320/300}.tile__demo svg{width:100%;height:100%;display:block}.tile__cap{flex-direction:column;gap:1px;margin-top:10px;display:flex}.tile__cap b{letter-spacing:.005em;font-size:14px;font-weight:600}.tile__cap span{color:var(--text-dim);font-size:13px}.mosaic__note{color:var(--text-dim);margin-top:24px;font-size:13px}.close{text-align:center;justify-items:center;gap:18px;padding-block:56px 32px;display:grid}.close h2{letter-spacing:-.02em;text-wrap:balance;max-width:22ch;font-size:clamp(26px,6.5vw,36px);font-weight:600;line-height:1.1}.close p{color:var(--text-dim);max-width:48ch;font-size:16px}.foot{border-top:1px solid var(--line);padding-block:20px calc(32px + env(safe-area-inset-bottom));color:var(--text-dim);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;font-size:13px;display:flex}.foot a{align-items:center;min-height:44px;display:inline-flex}.foot a:hover{color:var(--text)}.foot__tag{flex-basis:100%;order:3}.reveal{opacity:0;transition:opacity .55s var(--ease), transform .55s var(--ease);transition-delay:var(--d,0s);transform:translateY(12px)}.reveal.is-in{opacity:1;transform:none}.t{font-family:var(--font);fill:var(--text)}.m{font-family:var(--mono);fill:var(--text)}.chd{fill:var(--chord);font-weight:700}.dim{fill:var(--text-dim)}.fnt{fill:var(--text-faint)}.acc{fill:var(--accent)}.ln{stroke:var(--line)}.pane{fill:var(--bg-elev);stroke:var(--line-strong)}.chip{fill:var(--accent-soft);stroke:#5ef2ff59}.phone{fill:#080c14;stroke:var(--line-strong);stroke-width:1.5px}.phone--lead{stroke:#5ef2ff8c}.screen{fill:var(--bg-elev)}.songs{transition:transform .6s var(--ease)}.swiped .songs{transform:translateX(var(--w))}.code .k{opacity:.18;transition:opacity .2s var(--ease)}.code .k.is-on{opacity:1}.live{opacity:0;transition:opacity .4s var(--ease)}.is-synced .live{opacity:1}.scene{transition:opacity .35s var(--ease)}.scene.is-out{opacity:0}.link{fill:none;stroke:var(--line-strong);stroke-width:1.2px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .6s var(--ease);transition-delay:var(--d,0s)}.is-synced .link{stroke-dashoffset:0}.flow{fill:none;stroke:var(--accent);stroke-width:1.2px;stroke-linecap:round;stroke-dasharray:2 7;opacity:0;transition:opacity .4s var(--ease)}.is-synced .flow{opacity:.5;animation:1.1s linear infinite lp-flow}@keyframes lp-flow{to{stroke-dashoffset:-9px}}.pulse{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px var(--accent))}.pulsing .pulse{opacity:1}.member .dev{fill:#080c14;stroke:var(--line-strong);stroke-width:1.2px;transition:stroke .35s var(--ease);transition-delay:var(--d,0s)}.member .scr{fill:var(--bg-elev);transition:fill .35s var(--ease);transition-delay:var(--d,0s)}.member .badge circle{fill:var(--bg-elev);stroke:var(--line-strong);stroke-width:1.2px;transition:stroke .35s var(--ease);transition-delay:var(--d,0s)}.member .badge .ic{stroke:var(--text)}.is-synced .member .dev,.is-synced .member .badge circle{stroke:#5ef2ff80}.is-synced .member .scr{fill:var(--accent-soft)}.is-synced .member.is-hit .scr{fill:#5ef2ff73;transition-delay:0s}.row{transition:opacity .18s var(--ease)}.row.is-fading{opacity:.15}.wk{fill:#e8eef7;stroke:#0b0f17;stroke-width:1px;transition:fill .18s var(--ease)}.bk{fill:#1a2130;stroke:#05070c;stroke-width:1px;transition:fill .18s var(--ease)}.wk.is-on{fill:var(--accent)}.bk.is-on{fill:#2fb8c6}.string{stroke:var(--line-strong);stroke-width:1.2px}.fret{stroke:var(--line);stroke-width:1px}.nut{stroke:var(--text-dim);stroke-width:4px}.dot{fill:var(--text);transition:opacity .3s var(--ease)}.dot--g{opacity:0}.capo{fill:var(--accent);opacity:0;transition:opacity .4s var(--ease), transform .6s var(--ease);transform:translateY(-40px)}[data-phase=capo] .capo,[data-phase=shape] .capo{opacity:1;transform:none}[data-phase=shape] .dot--a{opacity:0}[data-phase=shape] .dot--g{opacity:1}.cap-label{transition:opacity .25s var(--ease)}.cap-label--g,[data-phase=shape] .cap-label--a{opacity:0}[data-phase=shape] .cap-label--g{opacity:1}.cue{opacity:0;transition:opacity .35s var(--ease), transform .45s var(--ease);transform:translateY(6px)}.cue.is-on{opacity:1;transform:none}.cue text{fill:var(--text)}.ic{fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.cue--rose rect{fill:#ff7ab829;stroke:#ff7ab88c}.cue--rose .ic{stroke:var(--note-rose)}.cue--green rect{fill:#6ef2a024;stroke:#6ef2a080}.cue--green .ic{stroke:var(--note-green)}.cue--violet rect{fill:#b48cff29;stroke:#b48cff8c}.cue--violet .ic{stroke:var(--cue)}.srow{transition:transform .55s var(--ease)}.srow rect{fill:#0000;transition:fill .3s var(--ease)}.is-moved .srow--1,.is-moved .srow--2{transform:translateY(28px)}.is-moved .srow--3{transform:translateY(-56px)}.is-moved .srow--3 rect{fill:var(--accent-soft)}.grip{stroke:var(--text-faint);stroke-width:1.5px;stroke-linecap:round}.beat{fill:var(--line-strong);transition:fill 50ms}.beat.is-on{fill:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}.beat--1.is-on{fill:#fff;filter:drop-shadow(0 0 4px #fff)}.progress{fill:var(--accent)}.card{opacity:0;transition:opacity .4s var(--ease), transform .5s var(--ease);transform:translateY(8px)}.card.is-on{opacity:1;transform:none}.copy,.tick{transition:opacity .2s var(--ease)}.copy{stroke:var(--text-dim);fill:none;stroke-width:1.6px;stroke-linejoin:round}.tick{opacity:0;stroke:var(--accent);fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.is-copied .copy{opacity:0}.is-copied .tick{opacity:1}@media (width>=560px){:root{--gutter:20px}.hook{padding-block:36px 20px}.hook__actions .btn{flex:none}.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.tile--session{grid-column:span 2}.tile--session .tile__demo{aspect-ratio:10/7}.foot__tag{flex-basis:auto;order:0}}@media (width>=900px){.mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:200px}.tile__demo,.tile--session .tile__demo{aspect-ratio:auto;flex:1;min-height:0}.tile--session{grid-area:span 2/span 6}.tile--3{grid-column:span 3}.tile--4{grid-column:span 2}.close{padding-top:72px}}@media (width>=1100px){.hook{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:18px 40px;padding-block:32px 16px}.hook__side{max-width:60ch}.hook__side p{font-size:16px}.mosaic{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:216px}.tile--session{grid-area:span 2/span 6}.tile--3{grid-column:span 3}.tile--4{grid-column:span 4}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transition:none;transform:none}.songs,.live,.scene,.link,.flow,.member .dev,.member .scr,.member .badge circle,.row,.wk,.bk,.dot,.capo,.cap-label,.cue,.srow,.srow rect,.card,.copy,.tick,.btn,.tile{transition:none}.is-synced .flow{animation:none}}