@font-face{font-family:Roboto Fallback;src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:100.3%;ascent-override:92.4%;descent-override:24.3%;line-gap-override:0%}@font-face{font-family:Roboto Mono Fallback;src:local("Courier New"),local("Liberation Mono");size-adjust:99.9%;ascent-override:104.9%;descent-override:27.5%;line-gap-override:0%}:root{--white: #ffffff;--off: #f4f2f0;--black: #121212;--ink-2: #555;--ink-3: #6b6b6b;--line: #e6e3df;--red: #c8102e;--red-2: #a50d26;--red-3: #e23b4e;--n0: #ff4d4d;--n1: #ff6d3a;--n2: #ff9a2e;--n3: #ffbe1f;--n4: #f2d40a;--n5: #9bd13b;--n6: #3ccf6e;--n7: #1cc2b0;--n8: #3b9cff;--n9: #7c5cff;--n10: #c056f0;--n11: #ff5fa8;--f-display: "Roboto", "Roboto Fallback", system-ui, sans-serif;--f-body: "Roboto", "Roboto Fallback", system-ui, sans-serif;--f-mono: "Roboto Mono", "Roboto Mono Fallback", ui-monospace, monospace;--ease: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--white);color:var(--black);font:16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}a{color:inherit}.caps{font:700 11.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase}.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:3px solid var(--black);outline-offset:3px}.right :focus-visible{outline-color:#fff}.page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr) auto;height:100vh;height:100svh;min-height:640px}.left{display:flex;flex-direction:column;padding:clamp(18px,3.2vh,34px) clamp(24px,5vw,80px) clamp(10px,1.6vh,18px);min-height:0}.right{position:relative;background:var(--red);background-image:radial-gradient(120% 80% at 80% 10%,var(--red-3),var(--red) 55%,var(--red-2));color:#fff;padding:clamp(18px,3.2vh,34px) clamp(24px,4vw,64px);display:flex;flex-direction:column;overflow:hidden;min-height:0}.top{display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font:500 21px var(--f-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;color:inherit}.logo{display:block;flex:none;width:24px;height:24px;fill:var(--red)}.mob-player{display:none;margin-left:auto;height:36px;padding:0 16px;border-radius:999px;background:var(--black);color:#fff;align-items:center;font:700 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}.right-top{display:flex;justify-content:flex-end;align-items:center;gap:28px}.nav-r{display:flex;gap:26px;white-space:nowrap}.nav-r a{font:700 11px var(--f-body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#ffffffd9;display:inline-block;padding:6px 0}.nav-r a:hover{color:#fff}.pill-white{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#fff;color:var(--black);font:700 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}.copy{margin:auto 0;padding:clamp(12px,3vh,36px) 0}.kicker{margin:0 0 clamp(10px,1.8vh,18px);color:var(--ink-2)}h1{font:900 min(4.6vw,8.6vh,76px)/.96 var(--f-display);text-transform:uppercase;letter-spacing:-.025em;margin:0 0 clamp(12px,2.4vh,24px)}h1 em{font-style:normal;color:var(--red)}.lead{color:var(--ink-2);font-size:clamp(15px,1.15vw,17px);max-width:30em;margin:0 0 clamp(16px,3vh,30px)}.buy{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 30px;border-radius:999px;border:0;background:var(--red);color:#fff;font:700 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 12px 24px -10px #c8102eb3;transition:transform .15s,background .15s}.btn:hover{background:var(--red-2);transform:translateY(-1px)}.btn .plus{font:400 22px/1 var(--f-body);letter-spacing:0;margin-top:-2px}.link{font:700 12.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--black);padding:4px 0 3px;display:inline-block;white-space:nowrap}.err{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:#fde8eb;color:#8a0b20;font-size:14px;max-width:34em}.bottom{grid-column:1 / -1;background:var(--white);border-top:2px solid var(--black);padding:clamp(10px,1.8vh,16px) clamp(24px,5vw,80px) clamp(8px,1.4vh,14px)}.how{margin:0}.eyebrow{margin:0 0 clamp(4px,1vh,8px);color:var(--red)}.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 28px}.steps button{all:unset;position:relative;display:grid;grid-template-columns:30px 1fr;gap:8px;padding:clamp(6px,1.1vh,10px) 0 clamp(8px,1.3vh,12px);cursor:pointer;width:100%}.steps button:focus-visible{outline:3px solid var(--black);outline-offset:3px;border-radius:4px}.steps b{font:900 22px/1.1 var(--f-display);color:var(--ink-3);transition:color .2s}.steps strong{display:block;font:700 14px/1.3 var(--f-body);color:var(--ink-3);transition:color .2s}.steps span{font-size:13px;line-height:1.4;color:var(--ink-3);transition:color .2s}.steps .d{font-style:normal;display:block}.steps .prog{position:absolute;left:38px;right:0;bottom:0;height:2px;background:var(--line);overflow:hidden}.steps .prog i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}.steps li.on b{color:var(--red)}.steps li.on strong{color:var(--black)}.steps li.on span{color:var(--ink-2)}.steps li.done .prog i{transform:scaleX(1);background:var(--black)}.steps button:hover strong{color:var(--black)}.legal{display:flex;gap:18px;margin-top:clamp(4px,1vh,10px);font-size:12px;color:var(--ink-3)}.legal a{text-decoration:none;display:inline-block;padding:4px 0}.legal a:hover{color:var(--black)}.vert{position:absolute;writing-mode:vertical-rl;font:700 10.5px var(--f-body);letter-spacing:.22em;text-transform:uppercase}.vert.r{right:22px;top:50%;transform:translateY(-50%);color:#fffc}.stage{position:relative;margin:0;width:100%;flex:1;min-height:0;overflow:hidden}.canvas{position:absolute;left:50%;top:50%;width:560px;height:440px;transform:translate(-50%,-50%) scale(var(--k, 1))}.scene-label{position:absolute;top:0;left:0;margin:0;display:flex;gap:12px;font:900 26px/1 var(--f-display);text-transform:uppercase;letter-spacing:-.015em}.scene-label span:first-child{opacity:.55}.layer{position:absolute;inset:52px 0 0;opacity:0;transform:scale(.97) translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}.canvas[data-scene=import] .l-import,.canvas[data-scene=board] .l-board,.canvas[data-scene=player] .l-player{opacity:1;transform:none}.canvas.fade .layer,.canvas.fade .scene-label{opacity:0!important;transition:opacity .5s}.scene-label{transition:opacity .3s}.l-import{display:grid;place-items:center}.l-board{padding:4px 6px 0}.dropzone{position:relative;width:420px;height:270px;border:2px dashed rgba(255,255,255,.6);border-radius:18px;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;transition:background .35s,border-color .35s,transform .35s var(--ease)}.dropzone svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}.dropzone>span{font:700 12.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase}.dropzone.hot{background:#ffffff24;border-color:#fff;transform:scale(1.03)}.dropzone.hot svg{transform:translateY(-4px)}.reading{width:240px;height:6px;border-radius:3px;background:#ffffff40;overflow:hidden;opacity:0;transition:opacity .3s}.reading i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}.dropzone small{font:500 12.5px var(--f-mono);opacity:0;transition:opacity .3s}.dropzone.reading-on .reading,.dropzone.reading-on small{opacity:1}.file{position:absolute;left:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;background:#fff;color:var(--black);border-radius:12px;box-shadow:0 18px 40px -14px #0009;opacity:0;will-change:transform}.file b{display:grid;place-items:center;width:40px;height:44px;border-radius:6px;background:var(--black);color:#fff;font:900 16px var(--f-display)}.file span{font:700 14px var(--f-body);display:grid}.file small{font:500 11px var(--f-mono);color:var(--ink-3)}.file .grab{position:absolute;left:calc(58% - 5px);top:calc(42% - 3px);width:26px;height:26px;opacity:0;transition:opacity .15s}.file .grab svg{width:26px;height:26px;fill:#fff;stroke:#121212;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}.file.held .grab{opacity:1}.file.held{box-shadow:0 26px 50px -14px #000000b3}.rows{display:grid;gap:12px}.row-l{display:flex;gap:10px;align-items:baseline;margin-bottom:6px;font:700 11px var(--f-body);letter-spacing:.2em;text-transform:uppercase}.row-l span{opacity:.7;font-weight:500;letter-spacing:.1em}.tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.t{--c: #ccc;position:relative;height:54px;border-radius:9px;display:grid;place-content:center;justify-items:center;gap:1px;color:#121212;font:700 15px var(--f-body);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));box-shadow:0 0 0 2px #ffffffe6,inset 0 -3px color-mix(in srgb,var(--c) 70%,#000),0 8px 16px -8px #00000080;opacity:0;transform:translateY(12px) scale(.6);will-change:transform}.t small{font:600 10px/1 var(--f-body);color:#121212cc;min-height:9px;white-space:nowrap}.t.writing small{background:#ffffffe6;padding:2px 4px;border-radius:3px}.t.writing small:after{content:"|";margin-left:1px;animation:blink .8s steps(1) infinite}.t.sel{box-shadow:0 0 0 3px #121212,0 0 0 5px #fff,0 8px 16px -8px #00000080}@keyframes blink{50%{opacity:0}}.row .row-l{opacity:0}[data-n="0"]{--c: var(--n0)}[data-n="2"]{--c: var(--n2)}[data-n="4"]{--c: var(--n4)}[data-n="5"]{--c: var(--n5)}[data-n="7"]{--c: var(--n7)}[data-n="9"]{--c: var(--n9)}[data-n="11"]{--c: var(--n11)}.mp{position:absolute;inset:0 0 4px;background:#1f2024;color:#f2f2f2;border-radius:16px;box-shadow:0 30px 60px -24px #000000b3;display:flex;flex-direction:column;overflow:hidden}.mp-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}.mp-top .logo{width:16px;height:16px}.mp-chip{padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:11.5px}.mp-load{margin-left:auto;padding:5px 12px;border-radius:999px;background:var(--red);font:700 11px var(--f-body)}.mp-body{flex:1;display:grid;grid-template-columns:176px 1fr;gap:12px;padding:12px 14px;min-height:0}.mp-chart{display:grid;align-content:start;gap:8px}.mp-sec{position:relative;border-radius:9px;transition:box-shadow .3s}.mp-sec.loop{box-shadow:0 0 0 2px var(--red),0 0 0 5px #c8102e40}.mp-sec p{display:flex;justify-content:space-between;align-items:center;margin:0 0 5px;font:700 9.5px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#cfcfcf}.mp-prac{font:600 9.5px var(--f-body);letter-spacing:.04em;text-transform:none;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#ddd;transition:background .2s,color .2s}.mp-sec.loop .mp-prac{background:var(--red);border-color:var(--red);color:#fff}.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.mt{height:27px;border-radius:6px;display:grid;place-content:center;justify-items:center;font:700 11px/1 var(--f-body);color:#121212;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));box-shadow:inset 0 -2px color-mix(in srgb,var(--c) 70%,#000);transition:transform .12s,box-shadow .12s}.mt small{font:600 6.5px/1 var(--f-body);color:#121212cc;margin-top:1px;white-space:nowrap}.mt.on{transform:scale(1.1);box-shadow:0 0 0 2px #26272c,0 0 0 4px #fff}.mp-tab{position:relative;background:#2a2b31;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px;min-width:0}.mp-h{margin:0 0 4px;font:500 9.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}.sys{position:relative;height:72px;margin-top:6px}.sys-l{position:absolute;left:0;top:0;font:700 9px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#a3a3a3}.sys-lines{position:absolute;left:0;right:0;top:16px;height:45px;border-left:1.5px solid #56565c;border-right:1.5px solid #56565c}.sys-lines i{position:absolute;left:0;right:0;height:1px;background:#55555c}.sys-bar{position:absolute;top:16px;height:45px;border-left:1px solid #56565c}.sys-bar:first-of-type{border-left:0}.sys-no{position:absolute;top:6px;font:500 8px var(--f-mono);color:#8c8c8c}.fret{position:absolute;translate:-50% -50%;font:600 8.5px var(--f-mono);color:#f2f2f2;background:#2a2b31;padding:0 1px;line-height:1}.mp-cursor{position:absolute;left:0;top:0;width:2px;height:51px;background:var(--red);border-radius:1px;opacity:0;transition:opacity .25s;box-shadow:0 0 10px #e23b4ecc;will-change:transform}.mp-cursor.on{opacity:1}.mp-sel{position:absolute;border:2px solid #ff6b7d;background:#d0122f38;border-radius:5px;opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}.mp-sel.on{opacity:1;transform:none}.mp-selbar{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;display:flex;gap:4px;align-items:center;padding:3px;border-radius:999px;background:#fff;color:#121212;font:600 10px var(--f-body);white-space:nowrap;box-shadow:0 8px 18px -6px #0009}.mp-selbar span{padding:0 6px;font-family:var(--f-mono)}.mp-selbar b,.mp-selbar em{font-style:normal;padding:4px 9px;border-radius:999px;background:#121212;color:#fff;transition:transform .15s,background .15s}.mp-selbar em{background:var(--red)}.mp-selbar b.press{transform:scale(.9);background:#333}.mp-dock{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.1);font:500 11px var(--f-mono)}.mp-play{width:28px;height:28px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:11px;color:#fff}#mpWhere{flex:1;color:#ddd}.mp-pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#ddd;font-family:var(--f-body);font-weight:600;transition:background .2s,border-color .2s,color .2s}.mp-pill.on{background:var(--red);border-color:var(--red);color:#fff}.zoom{position:absolute;left:30px;top:110px;width:500px;transform-origin:0 0;opacity:0;pointer-events:none;will-change:transform;background:#fff;color:var(--black);border-radius:16px;padding:18px 20px 14px;box-shadow:0 30px 60px -20px #000000b3}.z-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}.z-chord{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;font:700 19px var(--f-body);color:#fff;background:color-mix(in srgb,var(--n7) 45%,#1b1b1d);box-shadow:inset 0 -4px 0 var(--n7)}.z-head>span:nth-child(2){display:grid;font-size:15px}.z-head small{font:500 11px var(--f-mono);color:var(--ink-3)}.z-rep{margin-left:auto;font:500 12px var(--f-mono);color:var(--ink-3)}.z-rep b{color:var(--red)}.z-staff{position:relative;height:128px;margin:12px 0 4px 30px}.z-str{position:absolute;left:-30px;top:calc(12px + var(--l) * 21px);translate:0 -50%;font:500 12px var(--f-mono);color:var(--ink-3)}.z-staff .ln{position:absolute;left:0;right:0;top:calc(12px + var(--l) * 21px);height:1.5px;background:#d6d2cc}.nt{position:absolute;left:calc((var(--s) + .5) / 8 * 100%);top:calc(12px + var(--l) * 21px);translate:-50% -50%;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--black);font:700 12.5px var(--f-mono);transition:background .1s,color .1s,transform .15s,border-color .1s}.nt.on{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.18)}.z-count{display:grid;grid-template-columns:repeat(8,1fr);margin-left:30px;font:700 15px var(--f-mono);text-align:center;color:var(--ink-3)}.z-count span{padding:6px 0;border-radius:6px;transition:background .1s,color .1s}.z-count span:nth-child(odd){color:var(--black)}.z-count span.on{background:var(--black);color:#fff}.ptr{position:absolute;left:0;top:0;width:26px;height:26px;opacity:0;transition:opacity .3s;pointer-events:none;will-change:transform;z-index:5}.ptr svg{width:26px;height:26px;fill:#fff;stroke:#121212;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}.ptr i{position:absolute;left:5px;top:3px;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #fff;opacity:0;transform:scale(.3)}.ptr.on{opacity:1}.ptr.click i{animation:ripple .45s ease-out}@keyframes ripple{0%{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}.drop{position:fixed;inset:0;z-index:50;background:#c8102eeb;display:grid;place-items:center;padding:24px}.drop div{border:3px dashed #fff;border-radius:16px;padding:48px 56px;color:#fff;font:900 clamp(32px,5vw,56px) var(--f-display);text-transform:uppercase;text-align:center}@media(min-width:981px)and (min-height:640px){html,body{overflow:hidden}}@media(max-height:760px)and (min-width:981px){.steps .d{display:none}.steps strong{font-size:13.5px}.lead{margin-bottom:18px}}@media(max-width:980px){.page{display:flex;flex-direction:column;height:auto;min-height:100svh}.left{display:contents}.bottom{order:4;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}.top{order:1;padding:14px 16px 0}.copy{order:2;margin:0;padding:14px 16px 16px}.right{order:3;padding:14px 16px 16px}.right-top,.vert{display:none}.mob-player{display:inline-flex}h1{font-size:clamp(30px,8.6vw,48px)}.kicker{display:none}.lead{font-size:14px;margin-bottom:12px}.buy{gap:14px 20px}.copy{padding-bottom:12px}.btn{height:46px;padding:0 20px;font-size:12px}.stage{height:300px;flex:none}.steps{grid-template-columns:1fr 1fr;gap:0 14px}.steps .d{display:none}.steps b{font-size:18px}.steps strong{font-size:13px}.steps button{grid-template-columns:24px 1fr;padding:7px 0 9px}.steps .prog{left:32px}}@media(prefers-reduced-motion:reduce){.layer,.btn,.mp-sel,.mp-cursor,.ptr{transition:none!important}}.tbt{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2.4vh,24px);padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line);background:var(--off);color:var(--black);text-decoration:none;font-size:13.5px;line-height:1.3;max-width:100%}.tbt:hover{border-color:var(--red)}.tbt strong{color:var(--red)}.tbt-tag{flex:none;font:700 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 10px;border-radius:999px}.tbt-arrow{flex:none;color:var(--red);font-weight:700;transition:transform .15s}.tbt:hover .tbt-arrow{transform:translate(3px)}