*{box-sizing:border-box}html{background:var(--panel);color:var(--silk);font:var(--type-body);-webkit-text-size-adjust:100%}body{min-height:100vh;margin:0}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}h1,h2,h3{font-weight:700;font-stretch:var(--stretch-title);margin:0;line-height:1}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}main,.bar,.foot{max-width:1120px;padding:0 var(--gutter);margin:0 auto}.key{align-items:center;gap:var(--space-3);min-height:var(--key-h);padding:0 var(--space-6);border-radius:var(--radius-key);background:var(--panel-raised);box-shadow:inset 0 1px 0 var(--key-highlight), 0 2px 0 var(--recess);color:var(--silk);font:var(--type-key);font-stretch:var(--stretch-name);cursor:pointer;transition:transform var(--dur-press) var(--ease);border:0;text-decoration:none;display:inline-flex;position:relative}.key:active{transform:translateY(1px)}.key-lit{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 1px 0 oklch(.9 .1 var(--accent-h)), 0 2px 0 var(--recess), 0 0 24px var(--accent-glow)}.key-small{min-height:var(--hit-min);padding:0 var(--space-4);font:var(--type-jack);font-stretch:var(--stretch-name)}.key-quiet{box-shadow:inset 0 0 0 1px var(--groove-light);color:var(--silk-dim);background:0 0}.key-quiet[aria-pressed=true]{color:var(--silk);box-shadow:inset 0 0 0 2px var(--accent)}.led{background:var(--accent);width:12px;height:12px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;flex:none}.led-none{visibility:hidden}.linkish{margin-left:var(--space-4);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.bar{justify-content:space-between;align-items:center;height:72px;display:flex}.bar-mark{min-height:var(--hit-min);font:700 26px/1 var(--font);font-stretch:var(--stretch-title);align-items:center;gap:9px;text-decoration:none;display:inline-flex}.bar-mark .lamp{fill:var(--accent)}.hero{background:#000;align-items:flex-end;min-height:100svh;display:flex;position:relative;overflow:hidden}.hero-video,.hero-live,.hero-shade{width:100%;height:100%;position:absolute;inset:0}.hero-video{object-fit:cover}.hero-live{opacity:0;transition:opacity .6s var(--ease);background:#000}html[data-live=true] .hero-live{opacity:1}.hero-shade{background:linear-gradient(to top, var(--panel) 0%, #1b1a1799 18%, #1b1a1700 40%), linear-gradient(90deg, #1b1a17a6 0%, #1b1a1759 50%, #1b1a1726 100%)}.hero-inner{width:100%;max-width:1120px;padding:0 var(--gutter) var(--space-6);align-items:end;gap:var(--space-6) var(--space-7);grid-template-columns:1fr 1fr;margin:0 auto;display:grid;position:relative}.lockup{aspect-ratio:5/2;filter:drop-shadow(0 0 32px #000a);grid-column:1/-1;width:100%}.hero h1{text-shadow:0 0 24px #000a;font-size:clamp(40px,min(6vw,8.4svh),84px)}.hero-side{gap:var(--space-5);display:grid}.lede{max-width:44ch;color:var(--silk);text-shadow:0 0 3px #000,0 0 14px #000c;font-size:19px;line-height:1.4}.hero-keys .key-quiet{background:#0c0b0ab3}.hero-keys{gap:var(--space-4);flex-wrap:wrap;display:flex}.deck{width:100%;padding:var(--space-3) var(--space-4) var(--space-4);border-radius:var(--radius-screen);box-shadow:inset 0 1px 0 var(--groove-light);background:#0c0b0ae6;grid-column:1/-1}.deck-head{justify-content:space-between;align-items:baseline;gap:var(--space-1) var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.songs-legend{font:var(--type-jack);font-stretch:var(--stretch-name);color:var(--silk)}.songs-credit{font:var(--type-hint);color:var(--silk-dim)}.songs{gap:var(--space-2);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.song{--song:oklch(.8 .15 var(--song-h,var(--accent-h)));--song-glow:oklch(.8 .15 var(--song-h,var(--accent-h)) / .35);border-radius:var(--radius-key);background:var(--panel-raised);box-shadow:inset 0 1px 0 var(--key-highlight), 0 2px 0 var(--recess);transition:transform var(--dur-press) var(--ease);position:relative}.song:has(.song-key:active){transform:translateY(1px)}.song[data-state]{box-shadow:inset 0 0 0 2px var(--song), 0 2px 0 var(--recess), 0 0 26px var(--song-glow)}.song-key{align-items:center;gap:var(--space-2);width:100%;min-height:62px;padding:var(--space-2) 10px var(--space-1);border-radius:var(--radius-key) var(--radius-key) 0 0;color:var(--silk);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:auto minmax(0,1fr);display:grid;position:relative}.song:has(.halo){z-index:1}.song[data-state]{z-index:2}.song .halo{border-radius:calc(var(--radius-key) + 5px);box-shadow:0 0 0 2px var(--song), 0 0 28px var(--song-glow);opacity:0;pointer-events:none;position:absolute;inset:-5px -5px -33px}.song-socket{width:var(--socket);height:var(--socket);border-radius:var(--radius-jack);background:var(--knob-edge);flex:none;position:relative}.song-ring{border-radius:var(--radius-jack);box-shadow:0 0 14px 1px var(--song);opacity:0;position:absolute;inset:-1px}.song-led{border-radius:var(--radius-jack);background:var(--song);width:8px;height:8px;box-shadow:0 0 8px var(--song-glow);position:absolute;top:-1px;right:-1px}.song-glyph{border-radius:var(--radius-jack);background:var(--recess);position:absolute;inset:8px}.song-glyph:before{content:"";background:var(--song);clip-path:polygon(0 0,100% 50%,0 100%);width:8px;height:10px;position:absolute;top:7px;left:9px}.song-key:hover .song-socket{background:var(--silk-faint)}.song[data-state] .song-glyph{background:var(--song)}.song[data-state] .song-glyph:before{background:var(--on-accent)}.song[data-state=playing] .song-glyph:before{clip-path:polygon(0 0,33% 0,33% 100%,0 100%,0 0,67% 0,100% 0,100% 100%,67% 100%,67% 0);left:8px}.song-name{gap:1px var(--space-2);grid-template-columns:minmax(0,1fr) auto;min-width:0;display:grid}.song-mood{font:var(--type-legend);font-stretch:var(--stretch-legend);color:var(--silk-dim)}.song-title{font:var(--type-cue-title);font-size:19px;font-stretch:var(--stretch-title);text-overflow:ellipsis;white-space:nowrap;grid-area:2/1/auto/-1;line-height:1.1;overflow:hidden}.song-time{font:var(--type-legend);font-stretch:var(--stretch-name);font-variant-numeric:tabular-nums;color:var(--silk-dim)}.song-track{height:28px;padding-bottom:var(--space-2);margin:0 10px;position:relative}.song-wave{cursor:pointer;width:100%;height:100%;display:block}.song-seek{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.song-track:has(.song-seek:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.taper{height:7px;margin-top:var(--space-2);clip-path:polygon(0 100%,100% 0,100% 100%);background:linear-gradient(90deg,#41dca58c,#ff9d85a6 30%,#dcbc33bf 50%,#d9a3ffd9 70%,#f9a);background:linear-gradient(90deg,lab(78.79% -51.3514 14.5727/.55),lab(75.5408% 44.1644 35.4955/.65) 30%,lab(77.3222% 2.10109 68.3091/.75) 50%,lab(74.6637% 35.6658 -41.6731/.85) 70%,lab(75.0677% 49.1876 10.8742))}.jacks{margin:var(--space-3) 0 0}.jacks canvas{width:100%;height:56px;display:block}.jacks figcaption{margin-top:var(--space-3);font:var(--type-hint);color:var(--silk-dim)}.row{gap:var(--space-6);border-top:1px solid var(--groove-dark);box-shadow:inset 0 1px 0 var(--groove-light);grid-template-columns:200px 1fr;padding:56px 0;display:grid}.legend{font:var(--type-legend);font-stretch:var(--stretch-legend);color:var(--silk-dim);padding-top:6px}.row h3{margin-bottom:var(--space-2);font-size:30px}.row p{color:var(--silk-dim);max-width:44ch}.points{gap:var(--space-6) var(--space-7);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}.who{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.needs{gap:var(--space-4);display:grid}.needs li{align-items:baseline;gap:var(--space-4);display:flex}.needs .led{position:relative;top:1px}.needs li[data-ok=false] .led{background:var(--recess);box-shadow:inset 0 0 0 1px var(--silk-faint)}.check{max-width:52ch;font:var(--type-hint);color:var(--silk-dim);grid-column:2}.plans{gap:var(--space-7);grid-template-columns:minmax(0,1fr)}.plans-head{justify-content:space-between;align-items:end;gap:var(--space-6);flex-wrap:wrap;display:flex}.plans-head h2{text-wrap:balance;max-width:12em;font-size:clamp(40px,6vw,72px)}.billing{border-radius:var(--radius-key);background:var(--recess);border:0;margin:0;padding:3px;display:inline-flex;box-shadow:inset 0 1px 2px #000}.billing legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.billing input{opacity:0;position:absolute}.billing span{align-items:center;gap:var(--space-2);min-height:var(--hit-min);padding:0 var(--space-5);border-radius:var(--radius-chip);color:var(--silk-dim);font:var(--type-jack);font-stretch:var(--stretch-name);cursor:pointer;transition:background var(--dur-switch) var(--ease);display:flex}.billing small{font:var(--type-legend);font-stretch:var(--stretch-legend)}.billing input:checked+span{background:var(--panel-raised);box-shadow:inset 0 1px 0 var(--key-highlight), inset 0 -2px 0 var(--accent);color:var(--silk)}.billing input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.for-year{display:none}.plans:has(input[value=year]:checked) .for-year{display:inline}.plans:has(input[value=year]:checked) .for-month{display:none}.compare{table-layout:fixed;border-collapse:separate;border-spacing:0;text-align:left;width:100%}.compare th,.compare td{padding:var(--space-4) var(--space-6);border-top:1px solid var(--groove-dark);box-shadow:inset 0 1px 0 var(--groove-light);vertical-align:top;font-weight:400}.compare thead th,.compare thead td{padding-block:var(--space-6);box-shadow:none;vertical-align:bottom;border-top:0}.compare tbody th{width:26%;color:var(--silk-dim);font:var(--type-jack);font-stretch:var(--stretch-name);padding-left:0}.compare b{font:var(--type-jack);font-stretch:var(--stretch-name);display:block}.compare small{margin-top:var(--space-1);color:var(--silk-dim);font:var(--type-hint);display:block}.compare .paid{background:var(--panel-raised);box-shadow:inset 1px 0 0 var(--groove-light), inset -1px 0 0 var(--groove-light)}.compare tbody td.paid{box-shadow:inset 0 1px 0 var(--groove-light), inset 1px 0 0 var(--groove-light), inset -1px 0 0 var(--groove-light)}.compare thead .paid{border-radius:var(--radius-screen) var(--radius-screen) 0 0;box-shadow:inset 0 3px 0 var(--accent), inset 1px 0 0 var(--groove-light), inset -1px 0 0 var(--groove-light), 0 -12px 40px var(--accent-glow)}.compare tr:last-child .paid{border-radius:0 0 var(--radius-screen) var(--radius-screen)}.plan-name{align-items:center;gap:var(--space-2);font:var(--type-jack);font-stretch:var(--stretch-name);display:flex}.plan-name .led{margin:0}.price{margin-top:var(--space-3);font:var(--type-title);font-size:clamp(56px,7vw,88px);font-stretch:var(--stretch-title);line-height:.9;display:block}.per{min-height:1.35em;margin:var(--space-2) 0 var(--space-5);color:var(--silk-dim);display:block}.ladder{--on:var(--silk-dim);height:12px;margin-top:var(--space-2);background:linear-gradient(var(--on) 0 0) left / calc(var(--lit) / var(--n) * 100%) 100% no-repeat, var(--groove-light);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2px),#0000 0);mask-image:linear-gradient(90deg,#000 calc(100% - 2px),#0000 0);-webkit-mask-size:calc(100% / var(--n)) 100%;mask-size:calc(100% / var(--n)) 100%;display:block}.paid .ladder{--on:var(--accent)}.screen{aspect-ratio:16/9;width:112px;margin-top:var(--space-2);border-radius:var(--radius-meter);background:var(--cable-jacket);box-shadow:0 0 0 2px var(--recess);color:var(--silk);display:block;position:relative}.screen svg{width:22%;position:absolute;bottom:8%;right:6%}.screen .lamp{fill:var(--accent)}.compare .both td{max-width:60ch;color:var(--silk-dim)}.plans-status:empty{display:none}.key-note{max-width:34ch;font:var(--type-hint);color:var(--silk);display:block}.key-note:not(:empty){margin-top:var(--space-3)}.key-note a{color:inherit}.plans-status{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-left:3px solid var(--accent);background:var(--recess)}.join{padding:var(--space-6);border-radius:var(--radius-screen);background:var(--panel-raised);box-shadow:inset 0 3px 0 var(--accent), inset 0 0 0 1px var(--groove-light)}.join:focus{outline:0}.join h3{margin-bottom:var(--space-4);font-size:30px}.join form{flex-wrap:wrap;gap:10px;display:flex}.join input{min-height:var(--hit-min);border-radius:var(--radius-chip);background:var(--recess);color:var(--silk);font:var(--type-body);border:0;flex:220px;padding:0 12px;box-shadow:inset 0 1px 2px #000}.join input::placeholder{color:var(--silk-dim)}.join .key:disabled{opacity:.6;cursor:wait}.join-foot .linkish{margin-left:0}.join-foot{gap:var(--space-2) var(--space-5);margin-top:var(--space-4);color:var(--silk-dim);flex-wrap:wrap;display:flex}.plans-foot{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.plans-foot p{max-width:62ch}.check[data-ok=false]{padding:var(--space-3) var(--space-4);border-left:3px solid var(--silk-dim);background:var(--recess);color:var(--silk)}.foot{gap:var(--space-3);padding-top:var(--space-6);padding-bottom:var(--space-7);border-top:1px solid var(--groove-dark);font:var(--type-hint);color:var(--silk-dim);display:grid}.consent{left:var(--space-4);right:var(--space-4);bottom:var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-4);max-width:720px;padding:var(--space-4);border-radius:var(--radius-key);background:var(--panel-raised);box-shadow:inset 0 1px 0 var(--key-highlight), 0 8px 32px #000a;flex-wrap:wrap;margin:0 auto;display:flex;position:fixed}.consent div{gap:var(--space-3);display:flex}[hidden]{display:none!important}@media (width<=720px){.row{gap:var(--space-4);grid-template-columns:1fr;padding:40px 0}.check{grid-column:1}.compare,.compare tbody,.compare thead{display:block}.compare tr{grid-template-columns:1fr 1fr;display:grid}.compare thead td{display:none}.compare tbody th{width:auto;padding:var(--space-4) 0 0;grid-column:1/-1}.compare tbody td{box-shadow:none;border-top:0}.compare th,.compare td{padding-inline:var(--space-3)}.compare .both td{grid-column:1/-1;padding-inline:0}.plan-name{align-items:flex-start;min-height:2.4em}.plan-name .led{margin-top:.3em}.compare thead .key{width:100%;padding:var(--space-2) var(--space-3);text-align:center;justify-content:center}.screen{width:100%;max-width:112px}.who{grid-template-columns:1fr}.hero-inner{padding-top:var(--space-6);grid-template-columns:1fr}.hero-keys .key{flex:100%}.jacks canvas{height:80px}.songs{grid-template-columns:1fr}.song:not([data-state]) .song-track{display:none}.song .halo{bottom:-5px}.song-key{border-radius:var(--radius-key)}.song-title{font-size:22px}.taper{display:none}}@media (prefers-reduced-motion:reduce){.song .halo{opacity:1}}.prose{gap:var(--space-4);max-width:68ch;padding-top:var(--space-6);padding-bottom:var(--space-7);display:grid}.prose h1{font-size:56px}.prose h2{margin-top:var(--space-5);font-size:28px}.prose p{color:var(--silk-dim)}
