.op-profile-layer{position:fixed;z-index:120;top:0;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;color:#171a17}.op-profile-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border:0;background:#080a08a8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:default}.op-profile-panel{position:relative;z-index:1;width:min(520px,100%);height:100%;overflow-y:auto;padding:29px 32px 24px;background:#f2f1eb;box-shadow:-30px 0 80px #0000003d}.op-profile-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid rgba(23,26,23,.11)}.op-profile-header span,.op-profile-eyebrow,.op-profile-section-heading>span{color:#858a82;font-size:9px;font-weight:750;letter-spacing:1.25px;text-transform:uppercase}.op-profile-header h2{margin:5px 0 0;font-size:27px;letter-spacing:-1px}.op-profile-icon-button{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(23,26,23,.12);border-radius:50%;background:transparent;cursor:pointer}.op-profile-icon-button:hover{background:#fff}.op-profile-local-note{display:grid;grid-template-columns:35px 1fr;gap:11px;align-items:center;margin:20px 0;padding:14px;border:1px solid rgba(91,111,29,.14);border-radius:10px;background:#d9ff5b24}.op-profile-local-note>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#d9ff5b;color:#242b11}.op-profile-local-note p{margin:0;color:#6f756b;font-size:10px;line-height:1.45}.op-profile-local-note strong{display:block;margin-bottom:1px;color:#2b3029;font-size:11px}.op-profile-current{padding:22px;border-radius:13px;background:#171a17;color:#fff}.op-profile-current-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:12px}.op-profile-current h3{margin:0 0 4px;font-size:20px;letter-spacing:-.55px}.op-profile-avatar{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#2d322c;color:#d9ff5b;font-size:11px;font-weight:800;letter-spacing:.5px;box-shadow:inset 0 0 0 1px #ffffff12}.op-profile-avatar--large{width:54px;height:54px;font-size:13px}.op-profile-active-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:#d9ff5b1c;color:#d9ff5b;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.5px}.op-profile-stats-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#838982;font-size:9px;font-weight:500}.op-profile-stats-line>span{display:inline-flex;align-items:center;gap:3px}.op-profile-stats-line i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.65}.op-profile-current .op-profile-stats-line{color:#8d948d}.op-profile-list-section{padding:28px 0 0}.op-profile-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.op-profile-section-heading small{color:#999d96;font-size:9px}.op-profile-list{border-top:1px solid rgba(23,26,23,.11)}.op-profile-row{position:relative;display:grid;grid-template-columns:1fr 34px;align-items:center;border-bottom:1px solid rgba(23,26,23,.11)}.op-profile-row--active{background:#ffffff52}.op-profile-select{min-width:0;min-height:71px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 7px;border:0;background:transparent;text-align:left;cursor:pointer}.op-profile-select:disabled{cursor:default}.op-profile-row:not(.op-profile-row--active):hover{background:#ffffff8c}.op-profile-row-copy{min-width:0;display:grid;gap:4px}.op-profile-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.op-profile-row-arrow{color:#8a8f87;transition:transform .18s}.op-profile-select:hover .op-profile-row-arrow{transform:translate(3px);color:#343934}.op-profile-row-check{color:#718d14}.op-profile-edit{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#8e938b;cursor:pointer}.op-profile-edit:hover{background:#dfe1d8;color:#30352f}.op-profile-add{width:100%;min-height:68px;display:grid;grid-template-columns:41px 1fr;gap:12px;align-items:center;margin-top:13px;padding:10px 12px;border:1px dashed #b6baaf;border-radius:9px;background:transparent;text-align:left;cursor:pointer}.op-profile-add:hover{border-color:#7d8971;background:#ffffff70}.op-profile-add>span:first-child,.op-profile-new-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dfe1d8;color:#555c52}.op-profile-add>span:last-child{display:grid;gap:2px}.op-profile-add strong{font-size:11px}.op-profile-add small{color:#8a8f87;font-size:9px}.op-profile-name-form{border-radius:10px;background:#e7e8e1}.op-profile-name-form--inline{padding:13px;border-bottom:1px solid rgba(23,26,23,.11)}.op-profile-name-form label{display:block;margin-bottom:7px;color:#676d64;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}.op-profile-name-form--inline>div{display:grid;grid-template-columns:1fr auto auto;gap:6px}.op-profile-name-form input{min-width:0;height:40px;padding:0 11px;border:1px solid #c7cac0;border-radius:6px;background:#fff;color:#202420;font-size:12px}.op-profile-name-form button{height:40px;padding:0 11px;border:0;border-radius:6px;background:transparent;font-size:10px;font-weight:700;cursor:pointer}.op-profile-name-form button[type=submit]{background:#252a24;color:#fff}.op-profile-name-form button:disabled{opacity:.55}.op-profile-name-form--create{display:grid;grid-template-columns:40px 1fr;gap:5px 11px;margin-top:13px;padding:15px}.op-profile-name-form--create .op-profile-new-avatar{grid-row:1 / 4}.op-profile-name-form--create label{margin:0}.op-profile-name-form--create>div{display:flex;gap:6px}.op-profile-submit{background:#d9ff5b!important;color:#171a17!important}.op-profile-cancel{color:#6c7269}.op-profile-error{margin:11px 0 0;padding:10px 12px;border-radius:7px;background:#cf453a14;color:#a03a32;font-size:10px;line-height:1.4}.op-profile-footer{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;margin-top:34px;padding-top:19px;border-top:1px solid rgba(23,26,23,.11)}.op-profile-footer>span{display:flex;align-items:center;gap:5px;color:#8b9088;font-size:9px}.op-profile-footer button{display:flex;align-items:center;gap:5px;padding:7px 8px;border:0;background:transparent;color:#6d726b;font-size:9px;cursor:pointer}.op-profile-footer button:hover{color:#9c332d}.op-profile-footer small{grid-column:1 / -1;color:#9a9e97;font-size:8px;line-height:1.4}.op-profile-gate{position:fixed;z-index:150;top:0;right:0;bottom:0;left:0;min-width:320px;min-height:100vh;display:grid;place-items:center;overflow:auto;padding:34px 20px;background:#111411;color:#fff}.op-profile-gate:before{content:"";position:fixed;width:580px;height:580px;left:-280px;bottom:-330px;border:1px solid rgba(217,255,91,.15);border-radius:50%;box-shadow:0 0 0 55px #d9ff5b06,0 0 0 110px #d9ff5b03}.op-profile-gate-glow{position:fixed;width:420px;height:420px;top:-250px;right:-100px;border-radius:50%;background:#d9ff5b14;filter:blur(80px)}.op-profile-gate-card{position:relative;z-index:1;width:min(720px,100%)}.op-profile-gate-brand{display:flex;align-items:center;gap:0;margin-bottom:60px;font-size:17px;font-weight:700;letter-spacing:-.5px}.op-profile-gate-brand>span{width:34px;height:34px;display:grid;place-items:center;margin-right:10px;border-radius:50%;background:#d9ff5b;color:#151815}.op-profile-gate-brand strong{color:#d9ff5b}.op-profile-gate-heading{margin-bottom:30px}.op-profile-gate-heading>span{display:flex;align-items:center;gap:6px;color:#d9ff5b;font-size:9px;font-weight:750;letter-spacing:1.1px;text-transform:uppercase}.op-profile-gate-heading h1{margin:13px 0 8px;font-size:clamp(37px,7vw,61px);line-height:.98;letter-spacing:-2.8px}.op-profile-gate-heading p{margin:0;color:#858c85;font-size:12px}.op-profile-gate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.op-profile-gate-grid>button{min-width:0;min-height:94px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#ffffff0b;color:#fff;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}.op-profile-gate-grid>button:hover{transform:translateY(-2px);border-color:#d9ff5b4d;background:#d9ff5b0e}.op-profile-gate-grid>button>span:nth-child(2){min-width:0;display:grid;gap:6px}.op-profile-gate-grid strong{overflow:hidden;text-overflow:ellipsis;font-size:13px}.op-profile-gate-grid>button>svg{color:#727972}.op-profile-gate-add{border-style:dashed!important}.op-profile-gate-plus{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#ffffff0f;color:#a4aaa3}.op-profile-gate-add small{color:#777e77;font-size:9px}.op-profile-gate-loading{margin:13px 0 0;color:#d9ff5b;font-size:10px}.op-profile-gate-form{max-width:510px;display:grid;grid-template-columns:48px 1fr;gap:4px 14px;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#ffffff0b}.op-profile-gate-form .op-profile-new-avatar{grid-row:1 / 5;width:46px;height:46px;background:#d9ff5b;color:#1c2118}.op-profile-gate-form label{font-size:14px;font-weight:700}.op-profile-gate-form p{margin:0 0 11px;color:#7d847d;font-size:9px}.op-profile-gate-form input{height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.15);border-radius:7px;outline:0;background:#202420;color:#fff;font-size:12px}.op-profile-gate-form input:focus{border-color:#d9ff5b}.op-profile-gate-form>div{display:flex;gap:8px;margin-top:8px}.op-profile-gate-form button{height:41px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:0;border-radius:7px;font-size:10px;font-weight:750;cursor:pointer}.op-profile-gate-form button[type=submit]{background:#d9ff5b;color:#171a17}.op-profile-gate-form button[type=button]{background:transparent;color:#858c85}.op-profile-gate-form button:disabled{opacity:.55}.op-profile-gate-error{max-width:510px;background:#ff6b641c;color:#ff9b95}.op-profile-gate-card>footer{display:flex;align-items:center;gap:6px;margin-top:25px;color:#656c65;font-size:9px}@media(max-width:620px){.op-profile-panel{width:100%;padding:23px 19px 20px}.op-profile-current-row{grid-template-columns:auto 1fr}.op-profile-active-pill{grid-column:2;justify-self:start}.op-profile-footer{grid-template-columns:1fr}.op-profile-footer button{justify-self:start;padding-left:0}.op-profile-footer small{grid-column:1}.op-profile-gate{place-items:start center;padding-top:26px}.op-profile-gate-brand{margin-bottom:48px}.op-profile-gate-grid,.op-profile-gate-form{grid-template-columns:1fr}.op-profile-gate-form .op-profile-new-avatar{grid-row:auto;margin-bottom:9px}}@media(prefers-reduced-motion:reduce){.op-profile-gate-grid>button,.op-profile-row-arrow{transition:none}}:where(.piano-keyboard,.note-highway){--op-practice-bg: #090b0a;--op-practice-surface: #0e110f;--op-practice-surface-raised: #151916;--op-practice-line: rgba(236, 242, 226, .12);--op-practice-line-strong: rgba(236, 242, 226, .22);--op-practice-text: #f1f4ec;--op-practice-muted: #889087;--op-practice-accent: #d9ff5b;--op-practice-accent-ink: #101505;--op-practice-left: #96a8ad;--op-practice-danger: #ff786c;--op-practice-white-key: #e9ebe4;--op-practice-black-key: #111411;box-sizing:border-box;color:var(--op-practice-text);color-scheme:dark;font-family:inherit}:where(.piano-keyboard,.note-highway) *,:where(.piano-keyboard,.note-highway) *:before,:where(.piano-keyboard,.note-highway) *:after{box-sizing:border-box}.piano-keyboard{position:relative;isolation:isolate;inline-size:100%;overflow:hidden;border:1px solid var(--op-practice-line-strong);border-radius:.9rem;background:var(--op-practice-surface);box-shadow:0 1.25rem 3.5rem #00000047,inset 0 1px #ffffff09}.piano-keyboard__rail{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;min-block-size:2rem;padding-inline:.7rem;border-block-end:1px solid rgba(255,255,255,.06);background:#101310;color:var(--op-practice-muted)}.piano-keyboard__rail-mark{inline-size:.38rem;block-size:.38rem;border-radius:999px;background:var(--op-practice-accent);box-shadow:0 0 .8rem #d9ff5b61}.piano-keyboard__range{display:flex;align-items:center;gap:.45rem;font-size:.62rem;font-variant-numeric:tabular-nums;font-weight:680;letter-spacing:.12em;text-transform:uppercase}.piano-keyboard__range-line{inline-size:1.15rem;block-size:1px;background:#ffffff2e}.piano-keyboard__keybed{position:relative;block-size:clamp(8rem,17vw,13.5rem);overflow:hidden;background:#bfc2bb;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.piano-keyboard--compact .piano-keyboard__rail{min-block-size:1.55rem}.piano-keyboard--compact .piano-keyboard__keybed{block-size:clamp(5.4rem,11vw,8.2rem)}.piano-keyboard__key{position:absolute;inset-block-start:0;display:block;min-inline-size:0;margin:0;padding:0;border:0;border-radius:0;outline:0;cursor:pointer;touch-action:none;transition:transform 80ms ease,background-color .11s ease,box-shadow .14s ease,filter .14s ease}.piano-keyboard__key--white{z-index:1;block-size:100%;border-inline-end:1px solid rgba(16,19,16,.36);background:linear-gradient(180deg,#f3f4ef 0%,var(--op-practice-white-key) 78%,#d4d7cf 100%);box-shadow:inset 0 -.38rem #0000000e,inset -1px 0 #ffffff70;color:#555b54}.piano-keyboard__key--black{z-index:3;block-size:62%;border-inline:1px solid #060806;border-block-end:.28rem solid #070907;border-end-start-radius:.22rem;border-end-end-radius:.22rem;background:linear-gradient(90deg,#080a08 0%,#1c201c 48%,var(--op-practice-black-key) 100%);box-shadow:0 .35rem .55rem #0000007a,inset 1px 0 #ffffff14,inset -1px 0 #ffffff09;color:#e7eae3}.piano-keyboard__key-shine{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piano-keyboard__key--white .piano-keyboard__key-shine{border-block-start:1px solid rgba(255,255,255,.88)}.piano-keyboard__key--black .piano-keyboard__key-shine{inset:1px 15% auto;block-size:32%;border-inline-start:1px solid rgba(255,255,255,.08)}.piano-keyboard__key--white.is-target{box-shadow:inset 0 -.32rem var(--op-practice-accent),inset 0 -.75rem 1.35rem #d9ff5b2b,inset -1px 0 #ffffff70}.piano-keyboard__key--black.is-target{box-shadow:0 .35rem .55rem #0000007a,inset 0 -.25rem var(--op-practice-accent),0 0 0 1px #d9ff5b7a}.piano-keyboard__key.is-active,.piano-keyboard__key.is-correct{background:var(--op-practice-accent);color:var(--op-practice-accent-ink);filter:saturate(.92)}.piano-keyboard__key--white.is-active,.piano-keyboard__key--white.is-correct{transform:translateY(.2rem);box-shadow:inset 0 -.22rem #10150530,inset 0 0 1.25rem #ffffff36,0 0 1.3rem #d9ff5b26}.piano-keyboard__key--black.is-active,.piano-keyboard__key--black.is-correct{transform:translateY(.18rem);border-color:#758c28;border-block-end-color:#819b2c;box-shadow:0 .18rem .34rem #00000070,0 0 1.1rem #d9ff5b38}.piano-keyboard__key.is-correct{animation:op-key-confirm .36s ease-out}.piano-keyboard__key.is-wrong{background:var(--op-practice-danger);color:#240805;box-shadow:inset 0 -.28rem #55120c33,0 0 1rem #ff786c3d;animation:op-key-wrong .21s ease-out}.piano-keyboard__key:focus-visible{z-index:6;outline:2px solid var(--op-practice-accent);outline-offset:-3px}.piano-keyboard__note-label{position:absolute;inset-inline:0;inset-block-end:.74rem;display:flex;align-items:baseline;justify-content:center;gap:.05em;overflow:hidden;font-size:clamp(.56rem,.78vw,.72rem);font-weight:720;letter-spacing:.02em;line-height:1;opacity:.68;pointer-events:none}.piano-keyboard__note-label small{font-size:.72em;font-variant-numeric:tabular-nums;font-weight:650}.piano-keyboard--compact .piano-keyboard__note-label{inset-block-end:.48rem}.note-highway{position:relative;isolation:isolate;inline-size:100%;block-size:var(--op-highway-height, clamp(20rem, 54vh, 42rem));min-block-size:16rem;overflow:hidden;border:1px solid var(--op-practice-line-strong);border-radius:.9rem;background:var(--op-practice-bg);box-shadow:0 1.4rem 4rem #0000004d,inset 0 1px #ffffff09}.note-highway__stage,.note-highway__lanes,.note-highway__guides,.note-highway__notes,.note-highway__targets{position:absolute;top:0;right:0;bottom:0;left:0}.note-highway__stage{overflow:hidden;container-type:size;background:linear-gradient(180deg,#070908,#0c0f0d 52%,#111511)}.note-highway__stage:after{position:absolute;z-index:8;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 3rem 3.4rem #00000047,inset 0 -2rem 3rem #00000029;content:"";pointer-events:none}.note-highway__horizon{position:absolute;z-index:9;inset-block-start:.65rem;inset-inline:.72rem;display:flex;justify-content:space-between;color:#dee4d873;font-size:.6rem;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.14em;pointer-events:none}.note-highway__lanes{z-index:1}.note-highway__lane{position:absolute;inset-block:0}.note-highway__lane--white{border-inline-end:1px solid rgba(231,237,224,.045);background:#ffffff01}.note-highway__lane--black{border-inline:1px solid rgba(0,0,0,.08);background:#00000018}.note-highway__guides{z-index:2;pointer-events:none}.note-highway__guide{position:absolute;inset-inline:0;block-size:1px;background:#e2e9d913}.note-highway__guide--bar{background:#e2e9d92b;box-shadow:0 -1px #0000001f}.note-highway__guide small{position:absolute;inset-block-start:-.58rem;inset-inline-start:.65rem;color:#e2e9d952;font-size:.54rem;font-variant-numeric:tabular-nums;font-weight:680;letter-spacing:.08em}.note-highway__notes{z-index:4;overflow:hidden;pointer-events:none}.note-highway__note{position:absolute;display:block;min-block-size:.52rem;opacity:calc(.76 + var(--op-note-velocity) * .24);transform:translate3d(0,calc(var(--op-note-y-offset) * 1cqh),0);will-change:transform}.note-highway__note-core{position:absolute;inset:0 max(.5px,.08vw);display:block;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:.28rem .28rem .18rem .18rem;background:var(--op-practice-accent);box-shadow:0 .42rem #d9ff5b1c,inset 0 1px #ffffff3d,inset 0 -1px #10150529}.note-highway__note--left .note-highway__note-core{border-color:#e5edef38;border-inline-start:2px solid #c9d3d5;background:var(--op-practice-left);box-shadow:0 .36rem #96a8ad14,inset 0 1px #ffffff30,inset 0 -1px #090d0e30}.note-highway__note--both .note-highway__note-core{border-color:#ffffff38;background:linear-gradient(90deg,var(--op-practice-left) 0%,var(--op-practice-left) 46%,var(--op-practice-accent) 46%,var(--op-practice-accent) 100%)}.note-highway__note--accidental .note-highway__note-core{inset-inline:0;border-radius:.2rem .2rem .12rem .12rem}.note-highway__note-head{position:absolute;z-index:2;inset-inline:max(1px,.08vw);inset-block-end:0;display:block;block-size:clamp(.16rem,.45vh,.28rem);border-radius:.16rem;background:#ffffff94;box-shadow:0 0 .4rem #ffffff21}.note-highway__note.is-target .note-highway__note-core{filter:brightness(1.12);box-shadow:0 0 1.15rem #d9ff5b5c,inset 0 1px #ffffff57}.note-highway__note.is-hit .note-highway__note-core{border-color:#ffffff9e;background:var(--op-practice-accent);box-shadow:0 0 1.2rem #d9ff5b6b,inset 0 0 0 1px #ffffff47;animation:op-note-hit .3s ease-out}.note-highway__note.is-missed{opacity:.64}.note-highway__note.is-missed .note-highway__note-core{border-color:#ff786cc7;background:#ff786c57;box-shadow:inset 0 0 0 1px #ff786c1f;animation:op-note-miss .22s ease-out}.note-highway__play-line{position:absolute;z-index:6;inset-block-start:calc(86% - 1px);inset-inline:0;block-size:2px;background:var(--op-practice-accent);box-shadow:0 0 .55rem #d9ff5b70,0 .5rem 1.5rem #d9ff5b14;pointer-events:none}.note-highway__play-line>span{position:absolute;inset-block-start:-.7rem;inset-inline-start:.7rem;padding:.14rem .28rem .12rem;border-radius:.18rem;background:var(--op-practice-accent);color:var(--op-practice-accent-ink);font-size:.5rem;font-weight:850;letter-spacing:.12em;line-height:1}.note-highway__targets{z-index:7;pointer-events:none}.note-highway__key-target{position:absolute;inset-block-start:calc(86% - .22rem);display:block;block-size:.48rem;border-inline:max(1px,.08vw) solid transparent;border-radius:.18rem;background-clip:padding-box;background-color:var(--op-practice-accent);box-shadow:0 0 .8rem #d9ff5b7a;animation:op-target-breathe .78s ease-in-out infinite alternate}.note-highway__key-target--accidental{border-inline-width:0}@keyframes op-key-confirm{0%{filter:brightness(1.38)}to{filter:brightness(1)}}@keyframes op-key-wrong{0%,to{transform:translate(0)}35%{transform:translate(-2px)}70%{transform:translate(2px)}}@keyframes op-note-hit{0%{filter:brightness(1.7);transform:scaleX(1.08)}to{filter:brightness(1);transform:scaleX(1)}}@keyframes op-note-miss{0%,to{transform:translate(0)}35%{transform:translate(-1px)}70%{transform:translate(1px)}}@keyframes op-target-breathe{0%{opacity:.68;filter:brightness(.96)}to{opacity:1;filter:brightness(1.15)}}@media(max-width:700px){.piano-keyboard,.note-highway{border-radius:.65rem}.piano-keyboard__rail{min-block-size:1.7rem;padding-inline:.52rem}.piano-keyboard__keybed{block-size:clamp(7.2rem,29vw,9rem)}.piano-keyboard--compact .piano-keyboard__keybed{block-size:clamp(5rem,21vw,6.4rem)}.piano-keyboard__note-label{inset-block-end:.5rem;font-size:.53rem}.note-highway{block-size:var(--op-highway-height, clamp(18rem, 51vh, 32rem))}.note-highway__horizon{inset-block-start:.5rem;inset-inline:.5rem;font-size:.52rem}.note-highway__guide small{display:none}}@media(prefers-reduced-motion:reduce){.piano-keyboard__key,.note-highway__note-core,.note-highway__key-target{transition:none;animation:none!important}}.practice-studio{min-height:100vh;overflow-x:hidden;background:#090b0a;color:#f2f4ee;--studio-line: rgba(235, 242, 226, .12)}.studio-header{height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-bottom:1px solid var(--studio-line);background:#101310}.studio-back,.studio-midi,.icon-button{border:0;background:transparent;color:#929a92;cursor:pointer}.studio-back{justify-self:start;display:flex;align-items:center;gap:8px;font-size:11px}.studio-back:hover{color:#fff}.studio-title{display:grid;text-align:center}.studio-title span{color:#6f776f;font-size:8px;text-transform:uppercase;letter-spacing:1.3px}.studio-title strong{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.studio-header-actions{justify-self:end;display:flex;align-items:center;gap:7px}.studio-midi{height:33px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--studio-line);border-radius:999px;font-size:9px}.studio-midi i{width:5px;height:5px;border-radius:50%;background:#656b65}.studio-midi.connected i{background:#d9ff5b;box-shadow:0 0 0 4px #d9ff5b1a}.studio-midi.connected{color:#d5d9d2}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}.icon-button:hover{background:#ffffff0f;color:#fff}.studio-progress{height:2px;background:#ffffff0a}.studio-progress i{display:block;height:100%;background:#d9ff5b;transition:width .12s linear;box-shadow:0 0 12px #d9ff5b59}.studio-stage{width:min(1440px,calc(100% - 34px));margin:0 auto;padding:12px 0 13px}.studio-toolbar{min-height:41px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:14px}.segmented-control{justify-self:start;display:flex;padding:2px;border:1px solid var(--studio-line);border-radius:7px}.segmented-control button{height:26px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:#707870;font-size:9px;cursor:pointer}.segmented-control button.active{background:#252a25;color:#e8ebe5}.view-mode-control{justify-self:end}.view-mode-control button{min-width:42px}.studio-live-stats{display:flex;align-items:center;gap:19px;padding-top:6px;color:#d5d9d2}.studio-live-stats>span{display:flex;align-items:center;gap:5px;font:700 10px ui-monospace,monospace}.studio-live-stats svg{color:#d9ff5b}.studio-live-stats small{color:#656c65;font:500 8px Avenir Next,sans-serif}.studio-live-stats .accuracy-live{padding-left:17px;border-left:1px solid var(--studio-line);color:#d9ff5b}.studio-live-stats .listen-status{color:#d9ff5b}.hand-select,.speed-control,.track-control,.metronome-control{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#939b93;font-size:9px;cursor:pointer}.hand-select{justify-self:end;padding-top:8px}.hand-select:hover,.speed-control:hover,.track-control:hover,.metronome-control:hover{color:#fff}.practice-visual,.highway-wrap{position:relative}.highway-wrap .note-highway{--op-highway-height: clamp(300px, 47vh, 570px);border-radius:9px 9px 0 0;border-bottom:0}.practice-visual--both{display:grid;grid-template-columns:1fr;gap:7px}.practice-visual--both .highway-wrap .note-highway{--op-highway-height: clamp(90px, 11vh, 130px);border-radius:7px 7px 0 0}.practice-visual--both .sheet-music__header{min-height:38px;padding:6px 12px;align-items:center}.practice-visual--both .sheet-music__identity>span,.practice-visual--both .sheet-music__meta dt,.practice-visual--both .sheet-music__bar-range,.practice-visual--both .sheet-music__legend{display:none}.practice-visual--both .sheet-music__meta{gap:9px}.practice-visual--both .sheet-music__meta dd{font-size:7.5px}.practice-visual--both+.keyboard-wrap .piano-keyboard__rail{min-height:1rem}.practice-visual--both+.keyboard-wrap .piano-keyboard__keybed{block-size:4rem}.sheet-music-wrap{min-width:0}.score-loading{min-height:260px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;background:#ede9df;color:#777064;font-size:10px}.keyboard-wrap{margin-top:-1px}.keyboard-wrap .piano-keyboard{border-radius:0 0 9px 9px;box-shadow:0 13px 30px #0000004d}.keyboard-wrap .piano-keyboard__rail{min-height:1.45rem}.keyboard-wrap .piano-keyboard__keybed{block-size:clamp(5.2rem,10.5vw,7.6rem)}.timing-feedback{position:absolute;z-index:20;left:50%;bottom:18%;transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#d9ff5b;color:#161b0a;font-size:10px;font-weight:800;box-shadow:0 8px 28px #00000059}.timing-feedback.wrong{background:#ff786c;color:#2b0d09}.start-cue{position:absolute;z-index:18;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:7px;background:#090b0a9e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.start-cue>span{color:#838b83;font-size:9px;text-transform:uppercase;letter-spacing:1.4px}.start-cue>strong{margin-bottom:10px;font-size:clamp(19px,2.5vw,30px);letter-spacing:-.8px}.start-cue button{height:42px;display:flex;align-items:center;gap:8px;padding:0 17px;border:0;border-radius:7px;background:#d9ff5b;color:#11150b;font-size:11px;font-weight:800;cursor:pointer}.start-cue-actions{width:min(360px,calc(100% - 24px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.start-cue-actions button{width:100%;justify-content:center;padding-inline:11px}.start-cue .start-cue-actions .secondary{border:1px solid rgba(255,255,255,.18);background:#141814db;color:#e6eae3}.start-cue .start-cue-actions .secondary:hover{border-color:#d9ff5b73;color:#d9ff5b}.count-in-cue{gap:2px;background:#070907bd;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.count-in-cue>span{color:#a7aea5}.count-in-cue>.count-in-number{min-width:1.2em;margin:2px 0 0;color:#d9ff5b;font:750 clamp(72px,12vw,132px)/.92 ui-monospace,monospace;letter-spacing:0;text-align:center;text-shadow:0 0 34px rgba(217,255,91,.22)}.count-in-cue>small{margin-top:9px;color:#717a70;font:700 9px ui-monospace,monospace;letter-spacing:.8px}.transport-bar{height:63px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}.time-readout{display:flex;align-items:center;gap:8px;color:#9ca49c;font:600 9px ui-monospace,monospace}.time-readout i{width:2px;height:2px;border-radius:50%;background:#586058}.transport-controls{display:flex;align-items:center;gap:12px}.transport-controls button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#838b83;cursor:pointer}.transport-controls button:hover{color:#fff;background:#ffffff0d}.transport-controls .play-control{width:41px;height:41px;background:#d9ff5b;color:#11150b}.transport-controls .play-control:hover{background:#e5ff85;color:#11150b}.skip-icon{transform:scaleX(-1)}.transport-options{justify-self:end;display:flex;align-items:center;gap:6px}.transport-options>button{min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:#ffffff06;white-space:nowrap;transition:color .18s,border-color .18s,background .18s}.transport-options>button:hover{border-color:#ffffff2b;background:#ffffff0d}.transport-options>button.active{border-color:#d9ff5b47;background:#d9ff5b14;color:#d9ff5b}.transport-options>button:disabled{opacity:.7;cursor:default}.transport-options small{padding:2px 5px;border-radius:999px;background:#ffffff0f;color:#808880;font:700 7px ui-monospace,monospace}.transport-options .active small,.speed-control small{background:#d9ff5b1a;color:#d9ff5b}.settings-layer{position:fixed;z-index:49;top:0;right:0;bottom:0;left:0;pointer-events:none}.settings-scrim{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;background:#0406046b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.practice-settings-popover{position:absolute;right:14px;top:72px;width:370px;max-height:calc(100vh - 86px);overflow-y:auto;pointer-events:auto;padding:20px;border:1px solid rgba(235,242,226,.16);border-radius:13px;background:#1a1e1a;box-shadow:0 24px 80px #0000009e}.settings-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--studio-line)}.settings-heading strong{font-size:12px}.settings-heading button{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#929a92;cursor:pointer}.settings-heading button:hover{background:#ffffff0f;color:#fff}.setting-block{display:grid;gap:11px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.075)}.setting-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.setting-label>span{color:#d7dcd4;font-size:10px;font-weight:750}.setting-label>strong{color:#d9ff5b;font:700 13px ui-monospace,monospace}.setting-label>small,.tempo-setting>small{color:#858d85;font-size:8.5px;line-height:1.4}.setting-label>small{max-width:190px;text-align:right}.tempo-setting>small{margin-top:-6px}.tempo-input-row{display:grid;grid-template-columns:1fr 86px;align-items:center;gap:12px}.tempo-input-row>input{width:100%;accent-color:#d9ff5b}.bpm-input{height:31px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;padding:0 7px;border:1px solid var(--studio-line);border-radius:6px;background:#222722}.bpm-input input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#f0f2ed;font:700 10px ui-monospace,monospace}.bpm-input span{color:#6f776f;font:700 7px ui-monospace,monospace}.tempo-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tempo-presets button,.setting-choice button{min-height:38px;border:1px solid var(--studio-line);border-radius:7px;background:#202420;color:#a2aaa2;font-size:8.5px;font-weight:700;cursor:pointer}.tempo-presets button{display:grid;place-items:center;align-content:center;gap:2px}.tempo-presets button small{color:#626a62;font:600 7px ui-monospace,monospace}.tempo-presets button.active,.setting-choice button.active{border-color:#d9ff5b59;background:#d9ff5b14;color:#d9ff5b}.tempo-presets button.active small{color:#a7bd62}.setting-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.setting-choice button{display:flex;align-items:center;justify-content:center;gap:6px}.practice-settings-popover p{display:flex;align-items:flex-start;gap:7px;margin:14px 0 0;padding:10px;border-radius:7px;background:#ffffff06;color:#858d85;font-size:9px;line-height:1.5}.practice-settings-popover p svg{flex:0 0 auto;margin-top:1px;color:#b2c76d}.results-layer{position:fixed;z-index:80;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#050705d1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.results-card{width:min(510px,100%);display:grid;place-items:center;padding:42px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:#171b17;text-align:center;box-shadow:0 30px 90px #0000008c}.result-orbit{position:relative;width:72px;height:72px;display:grid;place-items:center;margin-bottom:24px;border:1px solid rgba(217,255,91,.28);border-radius:50%;color:#d9ff5b;box-shadow:0 0 0 10px #d9ff5b09,0 0 0 20px #d9ff5b05}.result-orbit i{position:absolute;top:2px;right:7px;width:8px;height:8px;border-radius:50%;background:#d9ff5b;box-shadow:0 0 13px #d9ff5b}.results-card>span{color:#d9ff5b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px}.results-card h2{margin:10px 0 5px;font-size:34px;letter-spacing:-1.4px}.results-card>p{margin:0;color:#7f877f;font-size:10px}.result-metrics{width:100%;display:grid;grid-template-columns:repeat(3,1fr);margin:29px 0;padding:19px 0;border-top:1px solid var(--studio-line);border-bottom:1px solid var(--studio-line)}.result-metrics>div{display:grid;gap:3px;border-right:1px solid var(--studio-line)}.result-metrics>div:last-child{border:0}.result-metrics strong{font-size:21px;color:#eff2ea}.result-metrics span{color:#707870;font-size:8px;text-transform:uppercase;letter-spacing:.7px}.result-actions{display:flex;gap:9px}.result-actions>button:first-child{height:46px;padding:0 17px;border:1px solid var(--studio-line);border-radius:7px;background:transparent;color:#b0b6af;font-size:10px;cursor:pointer}.result-midi-shortcuts{display:flex;align-items:center;gap:10px;margin:-10px 0 21px;color:#858d85;font-size:8px;text-transform:uppercase;letter-spacing:.7px}.result-midi-shortcuts span{display:flex;align-items:center;gap:6px}.result-midi-shortcuts kbd{min-width:31px;padding:4px 6px;border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;border-radius:4px;background:#222722;color:#d9ff5b;font:700 8px ui-monospace,monospace}.result-midi-shortcuts i{width:2px;height:2px;border-radius:50%;background:#555d55}.continue-arrow{transform:rotate(180deg)}@media(max-width:720px){.studio-header{grid-template-columns:auto 1fr auto;padding:0 12px}.studio-back span,.studio-midi span{display:none}.studio-title{padding:0 10px}.studio-title strong{max-width:190px}.studio-stage{width:calc(100% - 14px);padding-top:7px}.studio-toolbar{min-height:72px;grid-template-columns:1fr auto;gap:6px 10px}.studio-live-stats{display:none}.view-mode-control{grid-column:1;grid-row:2;justify-self:start}.hand-select{grid-column:2;grid-row:1}.studio-toolbar>.segmented-control:first-child{grid-column:1;grid-row:1}.highway-wrap .note-highway{--op-highway-height: clamp(280px, 50vh, 480px)}.practice-visual--both .highway-wrap .note-highway{--op-highway-height: clamp(88px, 12vh, 120px)}.practice-visual--both+.keyboard-wrap .piano-keyboard__keybed{block-size:4.4rem}.keyboard-wrap .piano-keyboard__keybed{block-size:clamp(6rem,22vw,8rem)}.transport-bar{height:auto;min-height:102px;grid-template-columns:1fr auto;gap:5px 10px;padding-top:5px}.transport-controls{grid-column:2;grid-row:1}.transport-options{grid-column:1 / -1;grid-row:2;justify-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;padding:7px 0 8px;border-top:1px solid rgba(255,255,255,.06)}.transport-options>button{justify-content:center;min-width:0;min-height:38px;padding-inline:6px;font-size:8px}.practice-settings-popover{right:7px;top:58px;width:min(370px,calc(100vw - 14px));max-height:calc(100vh - 65px);padding:18px}.results-card{padding:34px 22px}.results-card h2{font-size:29px}}@media(max-width:370px){.start-cue-actions{width:min(230px,calc(100% - 28px));grid-template-columns:1fr}.start-cue-actions button{height:38px}.transport-options>button{gap:4px;padding-inline:4px}.transport-options small{padding-inline:4px}.setting-label>small{max-width:155px}}@media(max-height:740px)and (min-width:721px){.highway-wrap .note-highway{--op-highway-height: 310px}.keyboard-wrap .piano-keyboard__keybed{block-size:5.2rem}.studio-header{height:57px}.practice-visual--both .highway-wrap .note-highway{--op-highway-height: 88px}}.keyboard-range-setup{color:var(--ink, #171a17)}.keyboard-range-heading{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line, rgba(23, 26, 23, .12))}.keyboard-range-heading__icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#202420;color:var(--acid, #d9ff5b)}.keyboard-range-heading>span:nth-child(2){display:grid;gap:1px}.keyboard-range-heading small,.keyboard-range-calibration__copy small{color:#858a82;font-size:9px;font-weight:750;letter-spacing:1.05px;text-transform:uppercase}.keyboard-range-heading strong{font-size:17px;letter-spacing:-.4px}.keyboard-range-heading output{color:#747970;font:650 10px ui-monospace,SFMono-Regular,Menlo,monospace}.keyboard-range-layout{display:grid;grid-template-columns:minmax(330px,1fr) minmax(300px,.9fr);gap:34px}.keyboard-range-presets{min-width:0}.keyboard-range-preset{position:relative;width:100%;min-height:66px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:11px;align-items:center;padding:9px 8px 9px 3px;border:0;border-bottom:1px solid var(--line, rgba(23, 26, 23, .12));background:transparent;text-align:left;cursor:pointer;transition:padding .16s ease,background .16s ease}.keyboard-range-preset:hover{padding-left:8px;background:#ffffff6b}.keyboard-range-preset.is-selected{background:#d9ff5b1f}.keyboard-range-preset__indicator{width:19px;height:19px;display:grid;place-items:center;border:1px solid #bdc0b8;border-radius:50%;color:#171a17}.is-selected .keyboard-range-preset__indicator{border-color:var(--acid, #d9ff5b);background:var(--acid, #d9ff5b);box-shadow:0 0 0 4px #d9ff5b26}.keyboard-range-preset__copy,.keyboard-range-manual__choice>span:last-child{min-width:0;display:grid;gap:2px}.keyboard-range-preset__copy strong,.keyboard-range-manual__choice strong,.keyboard-range-calibration__copy strong{font-size:12px;font-weight:720}.keyboard-range-preset__copy small,.keyboard-range-manual__choice small{color:#858a82;font-size:10px}.keyboard-range-preset__tag{padding:4px 6px;border-radius:4px;background:#252925;color:var(--acid, #d9ff5b);font-size:7px;font-weight:800;letter-spacing:.65px;text-transform:uppercase}.keyboard-range-preset__count{justify-self:end;color:#8a8f87;font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace}.keyboard-range-manual-column{display:grid;align-content:start;gap:18px;padding-top:18px}.keyboard-note-naming{display:grid;gap:10px;padding:14px;border:1px solid var(--line, rgba(23, 26, 23, .12));border-radius:10px;background:#ffffff40}.keyboard-note-naming__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.keyboard-note-naming__heading>span{display:grid;gap:2px}.keyboard-note-naming__heading small{color:#858a82;font-size:8px;font-weight:750;letter-spacing:.8px;text-transform:uppercase}.keyboard-note-naming__heading strong{font-size:12px}.keyboard-note-naming__heading output{color:#747970;font:650 9px ui-monospace,SFMono-Regular,Menlo,monospace}.keyboard-note-naming__options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.keyboard-note-naming__options button{min-width:0;display:grid;grid-template-columns:18px minmax(0,1fr);gap:7px;align-items:center;padding:9px;border:1px solid var(--line, rgba(23, 26, 23, .12));border-radius:7px;background:#ffffff6b;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease}.keyboard-note-naming__options button:hover{background:#fff}.keyboard-note-naming__options button.is-selected{border-color:#687e1f6b;background:#d9ff5b21}.keyboard-note-naming__radio{width:17px;height:17px;display:grid;place-items:center;border:1px solid #bdc0b8;border-radius:50%}.keyboard-note-naming__options button.is-selected .keyboard-note-naming__radio{border-color:var(--acid, #d9ff5b);background:var(--acid, #d9ff5b)}.keyboard-note-naming__options button>span:last-child{min-width:0;display:grid;gap:1px}.keyboard-note-naming__options strong{font-size:10px}.keyboard-note-naming__options small{overflow:hidden;color:#858a82;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.keyboard-note-naming>p{margin:0;color:#858a82;font-size:8px;line-height:1.45}.keyboard-range-manual{border:1px solid var(--line, rgba(23, 26, 23, .12));border-radius:10px;background:#ffffff40;transition:border-color .18s ease,background .18s ease}.keyboard-range-manual.is-selected{border-color:#687e1f6b;background:#ffffff85}.keyboard-range-manual__choice{width:100%;display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:center;padding:14px;border:0;background:transparent;text-align:left;cursor:pointer}.keyboard-range-selects{display:grid;grid-template-columns:1fr 14px 1fr;gap:8px;align-items:end;padding:0 14px 14px}.keyboard-range-selects label{min-width:0;display:grid;gap:6px}.keyboard-range-selects label>span{color:#848980;font-size:8px;font-weight:750;letter-spacing:.8px;text-transform:uppercase}.keyboard-range-selects select{min-width:0;width:100%;height:38px;padding:0 7px;border:1px solid var(--line, rgba(23, 26, 23, .12));border-radius:6px;background:#f7f7f2;color:#323631;font:650 10px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.keyboard-range-selects i{height:1px;margin-bottom:18px;background:#aeb2aa}.keyboard-range-calibration{min-height:104px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px;border-radius:10px;background:#1b1f1b;color:#f0f2ec}.keyboard-range-calibration__scan{position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#ffffff12;color:var(--acid, #d9ff5b)}.keyboard-range-calibration.is-listening .keyboard-range-calibration__scan:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:1px solid rgba(217,255,91,.42);border-radius:inherit;animation:keyboard-range-pulse 1.4s ease-out infinite}.keyboard-range-calibration__copy{min-width:0;display:grid;gap:2px}.keyboard-range-calibration__copy small{color:#798078}.keyboard-range-calibration__copy p{margin:1px 0 0;color:#8e958e;font-size:9px;line-height:1.35}.keyboard-range-calibration__copy em{margin-top:4px;color:#f1bd79;font-size:9px;font-style:normal}.keyboard-range-calibration__action{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:0;border-radius:5px;background:var(--acid, #d9ff5b);color:#171a17;font-size:9px;font-weight:780;cursor:pointer;transition:transform .16s ease,background .16s ease}.keyboard-range-calibration__action:hover{transform:translateY(-1px);background:#e5ff87}.keyboard-range-calibration__cancel{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:transparent;color:#9ca29b;cursor:pointer}.keyboard-range-calibration__cancel:hover{color:#fff;border-color:#ffffff3d}@keyframes keyboard-range-pulse{0%{opacity:.7;transform:scale(.82)}to{opacity:0;transform:scale(1.25)}}@media(max-width:760px){.keyboard-range-layout{grid-template-columns:1fr;gap:10px}.keyboard-range-manual-column{padding-top:0}}@media(max-width:500px){.keyboard-range-heading{grid-template-columns:34px 1fr}.keyboard-range-heading output{grid-column:2}.keyboard-range-preset__tag{display:none}.keyboard-range-calibration{grid-template-columns:34px minmax(0,1fr)}.keyboard-range-calibration__action,.keyboard-range-calibration__cancel{grid-column:2;justify-self:start}.keyboard-note-naming__options{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.keyboard-range-preset,.keyboard-range-calibration__action{transition:none}.keyboard-range-calibration.is-listening .keyboard-range-calibration__scan:after{animation:none}}:root{font-family:Avenir Next,Segoe UI,Helvetica,Arial,sans-serif;color:#191c19;background:#0e100f;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #171a17;--muted: #777c75;--paper: #f2f1eb;--paper-2: #e8e7e0;--line: rgba(23, 26, 23, .12);--dark: #111411;--dark-2: #1a1e1a;--acid: #d9ff5b;--acid-dark: #b9de3f;--danger: #ff6b64}*{box-sizing:border-box}html{background:var(--dark)}body{margin:0;min-width:320px;min-height:100vh;background:var(--paper)}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #7b9f12;outline-offset:3px}button:disabled{cursor:not-allowed}::selection{background:var(--acid);color:var(--ink)}.app-shell{min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr);background:var(--paper)}.side-nav{position:sticky;top:0;height:100vh;z-index:20;display:flex;flex-direction:column;padding:28px 18px 22px;background:var(--dark);color:#f5f6ef}.brand-mark{display:flex;align-items:center;gap:12px;padding:0 8px;border:0;background:transparent;color:inherit;cursor:pointer}.brand-glyph{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--acid);color:var(--dark)}.brand-name{font-size:18px;font-weight:700;letter-spacing:-.6px}.brand-name span{color:var(--acid)}.primary-nav{display:grid;gap:5px;margin-top:48px}.nav-item{width:100%;height:46px;display:flex;align-items:center;gap:13px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:#8d938c;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:color .18s ease,background .18s ease,transform .18s ease}.nav-item:hover{color:#fff;background:#ffffff0b;transform:translate(2px)}.nav-item.active{color:var(--acid);background:#d9ff5b14}.nav-footer{display:grid;gap:18px;margin-top:auto}.streak-orbit{display:flex;gap:11px;align-items:center;margin:0 10px;color:var(--acid)}.streak-orbit div{display:grid}.streak-orbit strong{color:#ecefe8;font-size:13px}.streak-orbit span{color:#6f756e;font-size:10px;text-transform:uppercase;letter-spacing:.8px}.profile-button{border:0;padding:12px;background:#ffffff0b;border-radius:10px;color:#fff;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.profile-button>span{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#30352f;font-size:10px;font-weight:700;color:var(--acid)}.profile-button div{display:grid}.profile-button strong{font-size:12px}.profile-button small{color:#777d76;font-size:10px}.app-main{min-width:0}.top-bar{height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid var(--line);background:#f2f1ebeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}.page-heading{display:flex;align-items:baseline;gap:14px}.page-heading span{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px}.page-heading h1{margin:0;font-size:25px;letter-spacing:-.9px}.midi-status{position:relative;height:38px;display:flex;align-items:center;gap:8px;padding:0 13px 0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:#555a54;font-size:12px;font-weight:650;cursor:pointer;transition:background .2s,border-color .2s}.midi-status:hover{background:#fff;border-color:#171a1733}.midi-status i{width:6px;height:6px;border-radius:50%;background:#aaa}.midi-status.connected i{background:#73a90f;box-shadow:0 0 0 4px #73a90f1f}.midi-status.connected{color:#2f3b21}.view-content{width:min(1320px,100%);margin:0 auto;padding:34px clamp(24px,4vw,64px) 80px}.module-loading{min-height:55vh;display:flex;align-items:center;justify-content:center;gap:10px;color:#6f756d;font-size:12px}.mobile-nav{display:none}.section-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--acid);font-size:10px;font-weight:750;letter-spacing:1.15px;text-transform:uppercase}.primary-action{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 19px;border:0;border-radius:7px;background:var(--acid);color:#171b12;font-weight:750;font-size:13px;cursor:pointer;transition:transform .16s ease,background .16s ease}.primary-action:hover{transform:translateY(-2px);background:#e4ff83}.primary-action:disabled{opacity:.6}.learn-view{display:grid;gap:52px}.continue-stage{min-height:340px;display:grid;grid-template-columns:minmax(290px,.8fr) minmax(380px,1.2fr);position:relative;overflow:hidden;border-radius:16px;background:var(--dark);color:#fff}.continue-stage:after{content:"";position:absolute;width:220px;height:220px;right:27%;top:-140px;border:1px solid rgba(217,255,91,.2);border-radius:50%;box-shadow:0 0 0 32px #d9ff5b06,0 0 0 64px #d9ff5b04}.continue-copy{z-index:2;align-self:center;padding:52px 0 52px 54px}.continue-copy h2{max-width:430px;margin:18px 0 9px;font-size:clamp(33px,4vw,55px);line-height:.99;letter-spacing:-2.6px}.continue-copy p{margin:0 0 27px;color:#8d948d;font-size:13px}.continue-visual{position:relative;min-height:340px;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}.hero-keys{position:absolute;right:-3%;bottom:-38px;width:88%;height:255px;display:flex;gap:3px;transform:perspective(800px) rotateX(55deg) rotate(-8deg);transform-origin:bottom right}.hero-keys i{position:relative;flex:1;height:100%;border-radius:2px 2px 6px 6px;background:#e9ebe4;box-shadow:inset -6px 0 #00000014}.hero-keys i:nth-child(2):after,.hero-keys i:nth-child(3):after,.hero-keys i:nth-child(5):after,.hero-keys i:nth-child(6):after,.hero-keys i:nth-child(7):after,.hero-keys i:nth-child(9):after,.hero-keys i:nth-child(10):after{content:"";position:absolute;z-index:2;right:-28%;top:0;width:56%;height:60%;border-radius:0 0 4px 4px;background:#171a18;box-shadow:3px 5px 8px #00000080}.hero-keys i.lit{background:var(--acid);box-shadow:0 -18px 50px #d9ff5b6b,inset -6px 0 #00000014}.hand-map{position:absolute;top:46px;right:13%;display:flex;gap:24px;transform:rotate(-8deg);color:#d9ff5ba6}.hand-map span{width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(217,255,91,.23);border-radius:50%;font-size:10px}.lesson-progress-ring{position:absolute;z-index:3;left:9%;bottom:31px;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:#121512db;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.lesson-progress-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;transform:rotate(-90deg)}.lesson-progress-ring circle{fill:none;stroke:#ffffff1a;stroke-width:3}.lesson-progress-ring circle:last-child{stroke:var(--acid);stroke-linecap:round}.lesson-progress-ring strong{margin-top:-9px;font-size:16px}.lesson-progress-ring span{position:absolute;top:46px;color:#858b84;font-size:8px;text-transform:uppercase;letter-spacing:.8px}.learning-overview{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0 2px 30px;border-bottom:1px solid var(--line)}.overview-copy>span,.section-heading-inline span,.setup-section-heading>span{color:#848980;font-size:10px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}.overview-copy h3{max-width:480px;margin:7px 0 0;font-size:clamp(22px,2.7vw,34px);line-height:1.12;letter-spacing:-1.2px}.overview-copy p{max-width:520px;margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.overview-stats{display:flex;gap:clamp(24px,4vw,58px)}.overview-stats div{display:grid;gap:2px}.overview-stats strong{font-size:21px;letter-spacing:-.8px}.overview-stats strong small{color:#93988f;font-size:11px}.overview-stats span{color:#8a8f87;font-size:10px}.course-path{display:grid;gap:0}.course-unit{display:grid;grid-template-columns:84px minmax(0,1fr);gap:28px;padding:0 0 52px}.unit-index{position:relative;display:flex;flex-direction:column;align-items:center}.unit-index span{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);font:700 11px ui-monospace,monospace;color:#6d716b;z-index:1}.unit-index i{width:7px;height:7px;margin-top:-4px;border-radius:50%;box-shadow:0 0 0 5px var(--paper);z-index:2}.unit-index:after{content:"";position:absolute;top:46px;bottom:-52px;width:1px;background:var(--line)}.course-unit:last-child .unit-index:after{display:none}.unit-body{padding-top:3px}.unit-heading{min-height:95px;display:flex;justify-content:space-between;gap:20px;padding:0 0 22px}.unit-heading>div>span{color:#8c9189;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px}.unit-heading h3{margin:5px 0 4px;font-size:22px;letter-spacing:-.7px}.unit-heading p{margin:0;color:#7b8078;font-size:12px}.unit-count{align-self:flex-start;font:700 11px ui-monospace,monospace;color:#8a8f88}.lesson-list{border-top:1px solid var(--line)}.lesson-row{width:100%;min-height:68px;display:grid;grid-template-columns:30px 1fr auto 20px;gap:12px;align-items:center;padding:10px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;transition:background .18s,padding .18s}.lesson-row:hover:not(:disabled){background:#ffffff8c;padding-left:13px}.lesson-row:disabled{color:#a4a7a1}.lesson-state{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#979b94}.lesson-row.done .lesson-state{background:#292d29;color:var(--acid);border-color:#292d29}.lesson-row.current .lesson-state{background:var(--acid);border-color:var(--acid);color:var(--dark);box-shadow:0 0 0 5px #d9ff5b2b}.lesson-name{display:grid;gap:2px}.lesson-name strong{font-size:13px;font-weight:700}.lesson-name small{color:#888d85;font-size:11px}.lesson-time{display:flex;align-items:center;gap:5px;color:#8b9088;font-size:10px}.lesson-arrow{color:#91958e;transition:transform .18s}.lesson-row:hover .lesson-arrow{transform:translate(3px);color:#2b302a}.explore-songbook{min-height:98px;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border:0;border-radius:12px;background:#dfe0d8;text-align:left;cursor:pointer;transition:background .18s,transform .18s}.explore-songbook:hover{background:#d7d9ce;transform:translateY(-2px)}.explore-songbook div{display:grid;gap:4px}.explore-songbook span{color:#747970;font-size:10px;text-transform:uppercase;letter-spacing:1px}.explore-songbook strong{font-size:16px}.library-view{display:grid;gap:28px}.featured-song{--song-accent: #d9ff5b;min-height:300px;display:grid;grid-template-columns:42% 1fr;overflow:hidden;border-radius:15px;background:#171a17;color:#fff}.featured-copy{align-self:center;padding:42px 54px}.featured-copy>span{color:var(--song-accent);font-size:10px;font-weight:750;letter-spacing:1.3px;text-transform:uppercase}.featured-copy h2{margin:12px 0 7px;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-2px}.featured-copy p{max-width:500px;margin:0;color:#939a93;font-size:13px;line-height:1.6}.song-meta{display:flex;align-items:center;gap:10px;margin:18px 0 25px;color:#c5cac3;font-size:10px}.song-meta i,.tile-meta i{width:3px;height:3px;border-radius:50%;background:#626861}.song-artwork{--song-accent: #d9ff5b;position:relative;aspect-ratio:1;overflow:hidden;background:#202420;color:var(--song-accent)}.song-artwork.large{aspect-ratio:auto;min-height:300px;background:color-mix(in srgb,var(--song-accent) 16%,#171a17)}.artwork-orbit{position:absolute;width:66%;aspect-ratio:1;left:17%;top:17%;border:1px solid color-mix(in srgb,var(--song-accent) 46%,transparent);border-radius:50%;box-shadow:0 0 0 22px color-mix(in srgb,var(--song-accent) 5%,transparent),0 0 0 44px color-mix(in srgb,var(--song-accent) 3%,transparent)}.artwork-title{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(42px,7vw,90px);font-weight:800;letter-spacing:-5px;color:color-mix(in srgb,var(--song-accent) 90%,white)}.artwork-notes i{position:absolute;z-index:3;width:4px;height:13px;border-radius:2px;background:currentColor;opacity:.46}.library-tools{display:grid;grid-template-columns:1fr auto;gap:12px}.song-search{height:46px;display:flex;align-items:center;gap:10px;padding:0 15px;border:1px solid var(--line);border-radius:8px;color:#858a83;background:#ffffff61}.song-search:focus-within{border-color:#777f70;background:#fff}.song-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.song-search button{border:0;background:transparent;color:#888;cursor:pointer}.import-button{min-width:142px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #242824;border-radius:8px;background:#242824;color:#fff;font-size:12px;font-weight:700;cursor:pointer}.import-button:hover{background:#303530}.filter-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line)}.filter-tabs button{flex:0 0 auto;padding:0 13px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#858a83;font-size:11px;cursor:pointer}.filter-tabs button.active{color:var(--ink);font-weight:700;border-color:var(--ink)}.inline-error{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(210,60,50,.25);border-radius:8px;background:#d23c320f;color:#9a2c27;font-size:12px}.song-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}.song-grid.dragging:after{content:"Drop MIDI to add it to your songbook";position:absolute;z-index:8;top:-10px;right:-10px;bottom:-10px;left:-10px;display:grid;place-items:center;border:2px dashed #78930e;border-radius:12px;background:#f2f1ebf0;color:#4c5e0d;font-weight:700}.song-tile-shell{position:relative;min-width:0}.song-tile{width:100%;display:grid;grid-template-columns:112px minmax(0,1fr) 30px;gap:14px;align-items:center;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.song-tile .song-artwork{width:112px;border-radius:7px;transition:transform .2s ease}.song-tile:hover .song-artwork{transform:scale(.97)}.song-tile:focus-visible{outline:2px solid #67741f;outline-offset:4px;border-radius:7px}.song-tile-copy{min-width:0;display:grid;align-content:center}.song-source{color:#7c8279;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:1px}.song-tile-copy>strong{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;letter-spacing:-.3px}.song-tile-copy>small{margin-top:2px;color:#8b9088;font-size:10px}.tile-meta{margin-top:11px;display:flex;align-items:center;gap:6px;color:#8b9088;font-size:9px}.tile-play{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#dee0d8;opacity:0;transform:translate(-5px);transition:opacity .18s,transform .18s,background .18s}.song-tile:hover .tile-play{opacity:1;transform:none;background:var(--acid)}.song-rename-button{position:absolute;z-index:2;top:0;right:0;width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(44,49,43,.1);border-radius:50%;background:#f2f1ebe6;color:#626860;opacity:.72;cursor:pointer;box-shadow:0 3px 10px #1e221d14;transition:opacity .18s,color .18s,background .18s,transform .18s}.song-tile-shell:hover .song-rename-button,.song-rename-button:focus-visible{opacity:1;color:#252a24;background:var(--acid);transform:translateY(-1px)}.song-rename-button:focus-visible{outline:2px solid #67741f;outline-offset:2px}.song-rename-layer{position:fixed;z-index:90;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px}.song-rename-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border:0;background:#1215128a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:default}.song-rename-dialog{position:relative;z-index:1;width:min(420px,100%);padding:22px;border:1px solid rgba(255,255,255,.72);border-radius:14px;background:#f4f3ed;color:var(--ink);box-shadow:0 24px 70px #0c0f0c47}.song-rename-header{display:grid;grid-template-columns:38px 1fr 32px;gap:11px;align-items:center;margin-bottom:22px}.song-rename-header>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dde5b9;color:#47530f}.song-rename-header small{display:block;margin-bottom:2px;color:#858b81;font-size:8px;font-weight:750;letter-spacing:1px;text-transform:uppercase}.song-rename-header h3{margin:0;font-size:19px;letter-spacing:-.5px}.song-rename-header>button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#737970;cursor:pointer}.song-rename-header>button:hover{background:#e5e5de;color:#292e28}.song-rename-dialog>label{display:block;margin-bottom:7px;color:#61675e;font-size:10px;font-weight:700}.song-rename-dialog>input{width:100%;height:47px;padding:0 13px;border:1px solid #bfc3ba;border-radius:8px;outline:0;background:#fff;color:var(--ink);font:inherit;font-size:14px}.song-rename-dialog>input:focus{border-color:#65751d;box-shadow:0 0 0 3px #78930e24}.song-rename-error{margin:7px 0 0;color:#a23831;font-size:10px}.song-rename-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.song-rename-actions button{min-height:38px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #c6cac1;border-radius:8px;background:transparent;color:#555b53;font-size:11px;font-weight:700;cursor:pointer}.song-rename-actions button[type=submit]{border-color:#252a24;background:#252a24;color:#fff}.song-rename-actions button:hover{transform:translateY(-1px)}.drop-midi-tile{min-height:112px;display:grid;grid-template-columns:48px 1fr auto;grid-template-rows:1fr 1fr;column-gap:13px;align-items:center;padding:16px;border:1px dashed #aeb2a9;border-radius:8px;background:transparent;text-align:left;cursor:pointer}.drop-midi-tile>span{grid-row:1 / 3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#e1e2db;color:#555b53}.drop-midi-tile strong{align-self:end;font-size:12px}.drop-midi-tile small{align-self:start;color:#898e86;font-size:9px}.drop-midi-tile>svg{grid-column:3;grid-row:1 / 3;color:#858a82}.empty-search{grid-column:1 / -1;min-height:170px;display:grid;place-items:center;align-content:center;gap:5px;color:#8b9088}.empty-search strong{color:#454a44}.empty-search span{font-size:11px}.mini-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.mini-spinner.dark{border-color:#0003;border-top-color:#111}@keyframes spin{to{transform:rotate(360deg)}}.progress-view{display:grid;gap:46px}.progress-summary{min-height:310px;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:48px 52px;border-radius:15px;background:#181b18;color:#fff}.summary-lead{align-self:center}.summary-lead h2{margin:17px 0 10px;font-size:clamp(33px,4vw,52px);line-height:1.02;letter-spacing:-2.2px}.summary-lead p{margin:0;color:#888f88;font-size:12px}.week-chart{min-height:190px;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(9px,2vw,22px);padding-top:24px}.week-day{height:100%;flex:1;display:grid;grid-template-rows:20px 1fr 20px;align-items:end;text-align:center}.bar-value{color:#747b74;font:600 8px ui-monospace,monospace}.bar-track{position:relative;height:100%;background:#ffffff0e;border-radius:2px 2px 0 0}.bar-track i{position:absolute;left:0;right:0;bottom:0;min-height:3px;background:var(--acid);border-radius:2px 2px 0 0}.week-day small{align-self:end;color:#737a73;font-size:9px}.metric-line{display:grid;grid-template-columns:repeat(5,1fr);padding:4px 0 35px;border-bottom:1px solid var(--line)}.metric-line>div{display:grid;grid-template-columns:30px 1fr;padding:3px 24px;border-right:1px solid var(--line)}.metric-line>div:first-child{padding-left:0}.metric-line>div:last-child{border:0}.metric-line>div>span{grid-row:1 / 3;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#e1e2db}.metric-line strong{font-size:18px;letter-spacing:-.6px}.metric-line small{color:#8b9088;font-size:9px}.section-heading-inline{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:23px}.section-heading-inline h3,.setup-section-heading h3{margin:5px 0 0;font-size:23px;letter-spacing:-.7px}.section-heading-inline button{border:0;background:transparent;color:#6e746b;font-size:10px;text-decoration:underline;cursor:pointer}.skill-rows{border-top:1px solid var(--line)}.skill-row{min-height:54px;display:grid;grid-template-columns:190px 1fr 42px;gap:18px;align-items:center;border-bottom:1px solid var(--line)}.skill-row>span{font-size:12px;font-weight:650}.skill-row>div{height:5px;overflow:hidden;border-radius:5px;background:#dedfd8}.skill-row i{display:block;height:100%;background:#262b25;border-radius:inherit}.skill-row strong{font:600 10px ui-monospace,monospace;color:#777c75;text-align:right}.session-table{border-top:1px solid var(--line)}.session-row{min-height:64px;display:grid;grid-template-columns:38px 1.4fr .5fr .5fr 56px;gap:14px;align-items:center;border-bottom:1px solid var(--line)}.session-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e2e3dc;color:#6c716b}.session-row>span:not(.session-icon):not(.accuracy-score){display:grid;gap:2px}.session-row strong{font-size:11px}.session-row small{color:#90948e;font-size:9px}.accuracy-score{justify-self:end;padding:5px 8px;border-radius:5px;background:#e0e4d5;color:#55641d;font:700 10px ui-monospace,monospace}.empty-progress{min-height:125px;display:grid;place-items:center;align-content:center;gap:4px;color:#8a9088;text-align:center}.empty-progress strong{color:#4c514b;font-size:11px}.empty-progress span{font-size:9px}.setup-view{display:grid;gap:52px}.keyboard-setup{min-height:350px;display:grid;grid-template-columns:.8fr 1.2fr;overflow:hidden;border-radius:15px;background:#191c19;color:#fff}.setup-copy{align-self:center;padding:48px 0 48px 50px;z-index:2}.setup-copy h2{margin:17px 0 11px;font-size:clamp(32px,4vw,50px);line-height:1;letter-spacing:-2px}.setup-copy p{max-width:460px;margin:0 0 26px;color:#929991;font-size:12px;line-height:1.65}.setup-warning{max-width:430px;margin-top:15px;padding:11px 13px;border-left:2px solid #d6a143;background:#d6a14314;color:#d7c39d;font-size:10px;line-height:1.5}.device-select{display:grid;gap:7px;max-width:330px}.device-select>span{color:#818881;font-size:9px;text-transform:uppercase;letter-spacing:1px}.device-select>div{position:relative}.device-select select{width:100%;height:43px;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 36px 0 13px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:#262a26;color:#fff;font-size:11px}.device-select svg{pointer-events:none;position:absolute;right:13px;top:13px;color:#8b918a}.device-illustration{position:relative;display:grid;place-items:center;overflow:hidden}.keyboard-body{position:absolute;right:-8%;width:92%;height:210px;padding:33px 26px 0;border-radius:11px 11px 30px 30px;background:#2a2e2a;box-shadow:-18px 24px 40px #00000054;transform:rotate(-6deg)}.keyboard-screen{width:80px;height:28px;display:grid;place-items:center;margin:0 auto 30px;border:1px solid rgba(217,255,91,.28);border-radius:3px;background:#171b17;color:var(--acid);font:700 9px ui-monospace,monospace;letter-spacing:1.8px}.keyboard-mini-keys{height:92px;display:flex;gap:2px}.keyboard-mini-keys i{flex:1;border-radius:1px 1px 3px 3px;background:#e9eae4;box-shadow:inset -2px 0 #0000001f}.keyboard-mini-keys i:nth-child(2n):after{content:"";display:block;position:relative;z-index:2;left:-35%;width:70%;height:58%;background:#171917;border-radius:0 0 2px 2px}.usb-path{position:absolute;left:4%;top:55px;width:48%;height:90px;border-left:2px solid #4a504a;border-top:2px solid #4a504a;border-radius:30px 0 0}.usb-path i{position:absolute;width:6px;height:6px;border-radius:50%;background:#4a504a}.usb-path i:nth-child(1){left:-4px;bottom:10px}.usb-path i:nth-child(2){left:48%;top:-4px}.usb-path i:nth-child(3){right:-4px;top:-4px}.usb-path.active{border-color:var(--acid);box-shadow:-4px -4px 20px #d9ff5b1a}.usb-path.active i{background:var(--acid);box-shadow:0 0 10px var(--acid)}.connection-badge{position:absolute;z-index:2;right:8%;bottom:28px;padding:8px 11px;border-radius:5px;background:#343934;color:#8c938c;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}.connection-badge.on{display:flex;gap:6px;align-items:center;background:var(--acid);color:#151815}.setup-sections{max-width:900px}.setup-section-heading{margin-bottom:22px}.preference-list{border-top:1px solid var(--line)}.preference-row{position:relative;min-height:70px;display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}.preference-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:7px;background:#dfe0d8;color:#626760}.preference-row>span:nth-child(2){display:grid;gap:2px}.preference-row strong{font-size:12px}.preference-row small{color:#8c9189;font-size:10px}.preference-row input{position:absolute;opacity:0}.toggle{width:36px;height:20px;padding:3px;border-radius:999px;background:#c8cac3;transition:background .2s}.toggle:after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px #00000026}.preference-row input:checked+.toggle{background:#252a24}.preference-row input:checked+.toggle:after{transform:translate(16px);background:var(--acid)}.preference-row-static{cursor:default}.preference-select{min-width:82px;height:36px;padding:0 30px 0 11px;border:1px solid var(--line);border-radius:7px;background:#f1f2ec;color:#343934;font:700 10px ui-monospace,monospace;cursor:pointer}.midi-shortcut-keys{display:flex;align-items:center;gap:8px}.midi-shortcut-keys>span{display:grid;grid-template-columns:auto auto;align-items:center;gap:5px}.midi-shortcut-keys kbd{min-width:34px;padding:5px 7px;border:1px solid #caccc4;border-bottom-width:2px;border-radius:5px;background:#f3f4ee;color:#4d534c;font:700 9px ui-monospace,monospace;text-align:center}.midi-shortcut-keys small{color:#777d75;font-size:8px;text-transform:uppercase;letter-spacing:.6px}.text-select{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#6d726b;font-size:11px;cursor:pointer}@media(max-width:1100px){.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.continue-stage{grid-template-columns:.9fr 1.1fr}.continue-copy{padding-left:38px}.progress-summary{padding:40px}.keyboard-setup{grid-template-columns:1fr 1fr}.setup-copy{padding-left:38px}}@media(max-width:820px){.app-shell{display:block;padding-bottom:70px}.side-nav{display:none}.mobile-nav{position:fixed;z-index:30;left:10px;right:10px;bottom:9px;height:59px;display:grid;grid-template-columns:repeat(5,1fr);padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#111411f2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 15px 40px #00000052}.mobile-nav button{display:grid;place-items:center;align-content:center;gap:3px;border:0;border-radius:9px;background:transparent;color:#717871;font-size:8px}.mobile-nav button.active{color:var(--acid);background:#d9ff5b12}.top-bar{height:76px;padding:0 20px}.page-heading>span{display:none}.page-heading h1{font-size:21px}.midi-status span{display:none}.midi-status{width:39px;padding:0;justify-content:center}.midi-status i{position:absolute;right:3px;top:3px}.view-content{padding:22px 18px 55px}.learn-view,.progress-view,.setup-view{gap:34px}.continue-stage,.featured-song,.progress-summary,.keyboard-setup{grid-template-columns:1fr}.continue-stage{min-height:510px}.continue-copy{padding:38px 30px 0;align-self:start}.continue-visual{min-height:250px}.hero-keys{width:100%;right:-4%;height:210px}.learning-overview{display:grid}.overview-stats{justify-content:space-between}.course-unit{grid-template-columns:42px 1fr;gap:13px}.unit-index span{width:36px;height:36px}.unit-index:after{top:36px}.lesson-row{grid-template-columns:29px 1fr 18px}.lesson-time{display:none}.featured-song .song-artwork.large{min-height:220px}.featured-copy{padding:32px 28px 37px}.progress-summary{padding:34px 28px}.week-chart{min-height:170px}.metric-line{grid-template-columns:1fr 1fr;gap:26px 0}.metric-line>div:nth-child(2n){border:0}.skill-row{grid-template-columns:125px 1fr 38px;gap:10px}.session-row{grid-template-columns:38px 1fr 50px}.session-row>span:nth-child(3),.session-row>span:nth-child(4){display:none!important}.setup-copy{padding:38px 28px 10px}.device-illustration{min-height:260px}}@media(max-width:560px){.preference-row{grid-template-columns:38px 1fr auto}.midi-shortcut-keys{grid-column:2 / 4;justify-self:start;padding-bottom:13px}.continue-stage{min-height:480px;border-radius:12px}.continue-copy h2{font-size:37px}.learning-overview{gap:22px}.overview-stats{gap:12px}.overview-stats>div:nth-child(3){display:none}.unit-heading p{max-width:240px}.lesson-name small{max-width:210px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song-grid,.library-tools{grid-template-columns:1fr}.import-button{height:43px}.song-tile{grid-template-columns:90px 1fr 28px}.song-tile .song-artwork{width:90px}.tile-play{opacity:1;transform:none}.song-rename-button{opacity:1}.song-rename-dialog{padding:19px}.song-rename-actions{display:grid;grid-template-columns:1fr 1fr}.featured-copy h2{font-size:37px}.progress-summary{min-height:490px}.metric-line>div{padding-left:12px}.skill-row{grid-template-columns:1fr 42px;padding:10px 0}.skill-row>div{grid-column:1 / -1;grid-row:2}.skill-row strong{grid-column:2;grid-row:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.sheet-layer{position:fixed;z-index:70;top:0;right:0;bottom:0;left:0;display:flex;justify-content:flex-end}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;border:0;background:#0a0c0a94;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:default}.lesson-sheet,.midi-drawer{position:relative;z-index:2;width:min(480px,94vw);height:100%;overflow-y:auto;padding:25px 32px 30px;background:#f5f4ee;box-shadow:-25px 0 70px #0000003d}.sheet-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:19px;border-bottom:1px solid var(--line)}.sheet-topline>span{color:#848981;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:1.3px}.sheet-topline button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:#e6e6df;color:#5f645e;cursor:pointer}.sheet-heading{padding:38px 0 30px;border-bottom:1px solid var(--line)}.lesson-number{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:#222622;color:var(--acid);font:700 10px ui-monospace,monospace}.sheet-heading h2{margin:18px 0 9px;font-size:35px;line-height:1.04;letter-spacing:-1.5px}.sheet-heading p{margin:0;color:#777c74;font-size:12px;line-height:1.65}.sheet-meta{display:flex;gap:17px;margin-top:21px;color:#757a73}.sheet-meta span{display:flex;align-items:center;gap:5px;font-size:9px}.sheet-section{padding:27px 0}.sheet-section>span,.sheet-footer>div>span{color:#868b84;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px}.sheet-section ul{display:grid;gap:14px;margin:17px 0 0;padding:0;list-style:none}.sheet-section li{display:flex;gap:9px;align-items:flex-start;color:#3b403a;font-size:11px;line-height:1.45}.sheet-section li svg{flex:0 0 auto;color:#718d13}.teacher-tip{display:flex;gap:12px;padding:16px;border-radius:8px;background:#e8eadf;color:#536118}.teacher-tip>svg{flex:0 0 auto}.teacher-tip div{display:grid;gap:4px}.teacher-tip span{font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:1px}.teacher-tip p{margin:0;color:#626b3d;font-size:10px;line-height:1.5}.sheet-footer{display:grid;gap:15px;margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}.sheet-footer>div{display:grid;gap:3px}.sheet-footer>div strong{font-size:13px}.sheet-footer .primary-action{width:100%}.midi-drawer{background:#141714;color:#fff}.midi-drawer .sheet-topline{border-color:#ffffff1a}.midi-drawer .sheet-topline button{background:#ffffff12;color:#a6ada5}.midi-drawer-heading{display:grid;place-items:center;padding:35px 0 29px;text-align:center}.connection-orb{width:67px;height:67px;display:grid;place-items:center;margin-bottom:20px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#717971;box-shadow:0 0 0 9px #ffffff05}.connection-orb.active{border-color:#d9ff5b73;color:var(--acid);box-shadow:0 0 0 9px #d9ff5b08,0 0 35px #d9ff5b17}.midi-drawer-heading h2{margin:0 0 8px;font-size:29px;letter-spacing:-1.1px}.midi-drawer-heading p{max-width:340px;margin:0;color:#7e867e;font-size:10px;line-height:1.6}.midi-steps{display:grid;gap:4px}.midi-steps>div{min-height:65px;display:grid;grid-template-columns:37px 1fr;gap:11px;align-items:center;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.07)}.midi-steps>div>span{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#ffffff0f;color:#8d958d}.midi-steps p{margin:0;color:#737b73;font-size:9px;line-height:1.45}.midi-steps strong{display:block;margin-bottom:2px;color:#d7dbd4;font-size:10px}.primary-action.full{width:100%;margin-top:18px}.device-list{display:grid}.device-list>span{margin-bottom:9px;color:#707870;font-size:8px;text-transform:uppercase;letter-spacing:1.2px}.device-list>button:not(.refresh-midi){min-height:61px;display:grid;grid-template-columns:38px 1fr 24px;gap:10px;align-items:center;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#ffffff06;color:#fff;text-align:left;cursor:pointer}.device-list>button.selected{border-color:#d9ff5b5c;background:#d9ff5b0a}.device-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;background:#272b27;color:#9ba39b}.device-list button>span:nth-child(2){display:grid;gap:3px}.device-list button strong{font-size:10px}.device-list button small{color:#6f776f;font-size:8px}.device-list button>i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--acid);color:#151915}.no-midi-device{display:grid;place-items:center;gap:5px;padding:25px 10px;color:#707870;text-align:center}.no-midi-device strong{color:#afb5ae;font-size:10px}.no-midi-device span{font-size:8px}.refresh-midi{justify-self:center;display:flex;align-items:center;gap:6px;margin-top:13px;border:0;background:transparent;color:#838b83;font-size:9px;cursor:pointer}.midi-error{margin-top:16px;padding:10px 12px;border-left:2px solid #f17066;background:#f170660f;color:#d79a95;font-size:9px;line-height:1.5}.midi-monitor{margin-top:30px;padding-top:19px;border-top:1px solid rgba(255,255,255,.09)}.midi-monitor>div:first-child{display:flex;align-items:center;justify-content:space-between;color:#737b73;font-size:8px;text-transform:uppercase;letter-spacing:1px}.midi-monitor>div:first-child i{width:6px;height:6px;border-radius:50%;background:#4d544d}.midi-monitor>div:first-child i.on{background:var(--acid);box-shadow:0 0 8px var(--acid)}.monitor-notes{min-height:54px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;border-radius:6px;background:#0e110e}.monitor-notes span{min-width:35px;padding:6px;border-radius:4px;background:var(--acid);color:#151915;font:800 10px ui-monospace,monospace;text-align:center}.monitor-notes small{color:#555d55;font-size:8px}@media(max-width:560px){.lesson-sheet,.midi-drawer{width:100%;padding:20px}.sheet-heading h2{font-size:31px}}