:root{--bg:#08080a;--panel:#0e0e12;--raise:#14141a;--menubar:#17171d;--ink:#e8e4db;--muted:#a8a399;--faint:#6b675f;--brass:#c6a15b;--brass-bright:#e3c285;--hair:#ffffff0f;--hair-warm:#c6a15b3d;--paper:#fbf9f4;--green:#1db954;--blue:#5b8def;--display:"Cormorant Garamond", Georgia, "Times New Roman", serif;--body:"Inter", -apple-system, system-ui, sans-serif;--pad:clamp(16px, 4vw, 40px);font-family:var(--body);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font-family:inherit}.shell{flex-direction:column;height:100dvh;display:flex}.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin:0;font-size:10px;font-weight:600}.artform-bar{height:52px;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--hair);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.artform-bar-side{align-items:center;gap:10px;display:flex}.af-iconbtn{width:32px;height:32px;color:var(--faint);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;transition:color .2s;display:flex}.af-iconbtn:hover{color:var(--brass)}.af-wordmark{font-family:var(--display);letter-spacing:.01em;color:var(--ink);font-size:20px;font-weight:400;text-decoration:none}.af-wordmark span{color:var(--brass)}.af-bar-divider{background:var(--hair);width:1px;height:16px;margin:0 4px}.af-bar-toolname{letter-spacing:.24em;text-transform:uppercase;color:var(--faint);font-size:10px;font-weight:600}.beta-chip{border:1px solid var(--hair-warm);color:var(--brass);letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:2px 7px;font-size:8.5px;font-weight:600}.af-switch-overlay{z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:60px var(--pad) var(--pad);background:#0009;position:fixed;inset:0}.af-switch-panel{background:var(--raise);border:1px solid var(--hair);border-radius:14px;flex-direction:column;gap:2px;width:min(260px,100%);padding:12px;display:flex;box-shadow:0 30px 80px #0009}.af-switch-eyebrow{letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:2px 6px 8px;font-size:9.5px;font-weight:600}.af-switch-panel a{color:var(--ink);border-radius:9px;padding:10px;font-size:14px;text-decoration:none}.af-switch-panel a:hover{color:var(--brass);background:#c6a15b1a}.af-switch-panel a.current{color:var(--brass);background:#c6a15b14}.af-switch-home{border-top:1px solid var(--hair);margin-top:6px;color:var(--faint)!important;font-size:13px!important}.af-rail{align-items:center;gap:2px;min-width:0;display:flex}.af-rail>a,.af-rail>span{color:var(--faint);letter-spacing:.01em;white-space:nowrap;border:1px solid #0000;border-radius:9px;align-items:center;padding:6px 11px;font-size:12.5px;font-weight:600;text-decoration:none;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.af-rail>a:hover{color:var(--ink);background:#ffffff0a}.af-rail>.current{color:var(--brass);cursor:default;background:#c6a15b1a;border-color:#c6a15b47}.af-inputswitch{border:1px solid var(--hair);background:#ffffff05;border-radius:999px;flex-shrink:0;align-items:center;gap:2px;padding:2px;display:inline-flex}.af-inputswitch button{color:var(--faint);cursor:pointer;font:inherit;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:0 0;border:none;border-radius:999px;align-items:center;gap:5px;padding:5px 10px;font-size:10.5px;font-weight:700;transition:color .15s,background .15s;display:inline-flex}.af-inputswitch button i{background:0 0;border-radius:50%;flex-shrink:0;width:5px;height:5px}.af-inputswitch button.on{color:var(--brass);cursor:default;background:#c6a15b29}.af-inputswitch button.on i{background:var(--brass);box-shadow:0 0 7px var(--brass)}.af-inputswitch button:disabled{cursor:default;opacity:.55}.af-input-wide{align-items:center;gap:2px;display:inline-flex}.af-input-narrow{cursor:pointer!important;display:none!important}.af-waffle{display:none!important}@media (width<=1080px){.beta-chip{display:none}}@media (width<=980px){.af-rail>a,.af-rail>span{padding:6px 8px;font-size:12px}}@media (width<=780px){.af-waffle{display:flex!important}.af-rail,.af-rail-divider{display:none}}@media (width<=620px){.af-input-wide{display:none!important}.af-input-narrow{display:inline-flex!important}}.journey-scroll{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.journey{max-width:720px;padding:clamp(28px, 6vw, 64px) var(--pad) 96px;margin:0 auto}.journey-head{text-align:center}.journey-head h2{font-family:var(--display);letter-spacing:-.01em;color:var(--ink);margin:12px 0 0;font-size:clamp(38px,9vw,68px);font-weight:300;line-height:1}.setup-line{border:1px solid var(--hair);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px;padding:9px 16px;font-size:12.5px;transition:border-color .2s,color .2s;display:inline-flex}.setup-line:hover{border-color:var(--hair-warm);color:var(--ink)}.setup-line i{background:var(--faint);border-radius:50%;width:3px;height:3px}.setup-caret{color:var(--brass);letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:600}.clef-tabs{border:1px solid var(--hair);border-radius:999px;flex-wrap:wrap;justify-content:center;gap:2px;margin:22px 0 0 10px;padding:4px;display:inline-flex}.clef-tabs button{color:var(--faint);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:8px 16px;font-size:12.5px;transition:color .2s,background .2s}.clef-tabs button:hover{color:var(--ink)}.clef-tabs button.active{color:var(--brass);background:#c6a15b24}.begin{background:var(--brass);color:#14100a;font-family:var(--display);letter-spacing:.01em;cursor:pointer;border:none;border-radius:999px;align-items:baseline;gap:10px;margin-top:30px;padding:15px 34px;font-size:20px;font-weight:600;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 10px 40px #c6a15b38}.begin span{font-family:var(--body);opacity:.72;font-size:12px;font-weight:500}.begin:hover{transform:translateY(-1px);box-shadow:0 14px 46px #c6a15b4d}.begin.sm{margin:0;padding:10px 22px;font-size:15px}.journey-total{letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:16px 0 0;font-size:11px}.chapter{margin-top:clamp(40px,7vw,64px)}.chapter h3{letter-spacing:.24em;text-transform:uppercase;color:var(--faint);align-items:center;gap:16px;margin:0 0 8px;font-size:10px;font-weight:600;display:flex}.chapter h3:before,.chapter h3:after{content:"";background:var(--hair);flex:1;height:1px}.rows{position:relative}.spine{background:var(--hair);width:1px;margin-left:-.5px;position:absolute;top:52px;bottom:52px;left:50%}.spine.fill{background:linear-gradient(180deg, var(--brass), #c6a15b4d);bottom:auto}.row{height:104px;color:inherit;cursor:pointer;background:0 0;border:none;padding:0;position:absolute;left:0;right:0}.node{border:1px solid var(--hair);background:var(--bg);width:44px;height:44px;font-family:var(--display);color:var(--faint);border-radius:50%;justify-content:center;align-items:center;font-size:17px;transition:border-color .2s,color .2s,transform .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.row:hover .node{border-color:var(--hair-warm);color:var(--ink);transform:translate(-50%,-50%)scale(1.06)}.row.done .node{border-color:var(--hair-warm);color:var(--brass)}.row.current .node{border-color:var(--brass);color:var(--brass);background:#c6a15b1a;animation:2.6s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #c6a15b66}70%{box-shadow:0 0 0 16px #c6a15b00}to{box-shadow:0 0 #c6a15b00}}.row.todo{opacity:.5}.row.todo:hover{opacity:.85}.row-text{flex-direction:column;gap:3px;max-width:190px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.row.left .row-text{text-align:right;align-items:flex-end;right:calc(50% + 34px)}.row.right .row-text{text-align:left;align-items:flex-start;left:calc(50% + 34px)}.row-name{font-family:var(--display);color:var(--muted);font-size:20px;font-weight:500;line-height:1.1}.row.done .row-name,.row.current .row-name{color:var(--brass)}.row-lead{color:var(--faint);font-size:11px}.row-stars{gap:2px;font-size:9px;display:flex}.row.left .row-stars{justify-content:flex-end}.row-stars i{color:var(--hair);font-style:normal}.row-stars.easy i.lit,.metal-easy{color:#b07a45}.row-stars.moderate i.lit,.metal-moderate{color:#c6cad3}.row-stars.hard i.lit,.metal-hard{color:#e3c285}.row-stars.hard i.lit{text-shadow:0 0 10px #e3c28566}.row-stave{opacity:.85;pointer-events:none;width:132px;position:absolute;top:50%;transform:translateY(-50%)}.row.left .row-stave{left:calc(50% + 40px)}.row.right .row-stave{right:calc(50% + 40px)}.row:hover .row-stave{opacity:1}.journey-foot{border:1px solid var(--hair);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;margin:56px auto 0;padding:11px 24px;font-size:12.5px;transition:border-color .2s,color .2s;display:block}.journey-foot:hover{border-color:var(--hair-warm);color:var(--brass)}.sections{gap:3px;display:flex}.sections button{color:var(--faint);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 18px;font-size:13px;transition:color .2s,background .2s}.sections button:hover{color:var(--ink)}.sections button.active{color:var(--brass);background:#c6a15b1f}.library{max-width:860px;padding:clamp(20px, 4vw, 44px) var(--pad) 90px;margin:0 auto}.dropzone{border:1px dashed var(--hair);cursor:pointer;text-align:center;background:0 0;border-radius:18px;flex-direction:column;align-items:center;gap:7px;width:100%;margin-top:24px;padding:clamp(28px,5vw,46px) 24px;transition:border-color .2s,background .2s;display:flex}.dropzone:hover,.dropzone.over{border-color:var(--hair-warm);background:#c6a15b0d}.drop-title{font-family:var(--display);color:var(--ink);font-size:24px}.drop-hint{color:var(--muted);font-size:12.5px}.drop-hint.bad{color:#d98b7a}.drop-formats{color:var(--faint);font-size:11px}.shelf{margin-top:clamp(34px,5vw,52px)}.shelf h3{letter-spacing:.24em;text-transform:uppercase;color:var(--faint);align-items:center;gap:16px;margin:0 0 16px;font-size:10px;font-weight:600;display:flex}.shelf h3:after{content:"";background:var(--hair);flex:1;height:1px}.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;display:grid}.card{border:1px solid var(--hair);text-align:left;cursor:pointer;background:0 0;border-radius:14px;flex-direction:column;align-items:flex-start;gap:5px;padding:18px;transition:border-color .2s,background .2s,transform .2s;display:flex}.card:hover{border-color:var(--hair-warm);background:#c6a15b0d;transform:translateY(-2px)}.card-title{font-family:var(--display);color:var(--ink);font-size:20px}.card-sub{color:var(--faint);font-size:11.5px}.cards.covers{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.cover-card{position:relative}.card.cover{gap:7px;width:100%;padding:12px}.cover-art{aspect-ratio:1;object-fit:cover;background:var(--raise);border-radius:8px;width:100%;box-shadow:0 8px 24px #00000073}.cover-art.blank{font-family:var(--display);color:var(--faint);box-shadow:none;border:1px solid var(--hair);justify-content:center;align-items:center;font-size:30px;display:flex}.card.cover .card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:17px;line-height:1.2;display:-webkit-box;overflow:hidden}.cover-menu{width:26px;height:26px;color:var(--muted);cursor:pointer;opacity:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#08080aa8;border:none;border-radius:50%;font-size:15px;line-height:1;transition:opacity .2s,color .2s,background .2s;position:absolute;top:6px;right:6px}.cover-card:hover .cover-menu,.cover-menu:focus-visible,.cover-menu.open{opacity:1}.cover-menu:hover,.cover-menu.open{color:var(--brass);background:#08080ae6}@media (hover:none){.cover-menu{opacity:1}}.cover-pop{z-index:40;background:var(--raise);border:1px solid var(--hair);border-radius:11px;flex-direction:column;min-width:132px;padding:5px;display:flex;position:absolute;top:34px;right:6px;box-shadow:0 16px 40px #0009}.cover-pop button{color:var(--muted);text-align:left;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;padding:9px 11px;font-size:12.5px;transition:background .15s,color .15s}.cover-pop button:hover{color:var(--brass);background:#c6a15b1a}.cover-pop button.danger:hover{color:#e5484d;background:#e5484d1f}.menu-shade{z-index:30;position:fixed;inset:0}.stage{flex-direction:column;flex:1;min-height:0;display:flex}.stage-title{flex:1;min-width:0}.stage-title h2{font-family:var(--display);color:var(--ink);margin:0;font-size:clamp(20px,3vw,27px);font-weight:400;line-height:1.1}.stage-title p{color:var(--faint);text-overflow:ellipsis;white-space:nowrap;margin:3px 0 0;font-size:11.5px;overflow:hidden}.back{color:var(--brass);cursor:pointer;white-space:nowrap;background:#c6a15b14;border:1px solid #c6a15b73;border-radius:999px;flex-shrink:0;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:500;transition:background .2s,border-color .2s,transform .15s;display:inline-flex}.back span{font-size:15px;line-height:1}.back:hover{border-color:var(--brass);background:#c6a15b29;transform:translate(-2px)}.ghost{border:1px solid var(--hair);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:8px 14px;font-size:12px;transition:border-color .2s,color .2s}.ghost:hover{border-color:var(--hair-warm);color:var(--brass)}.score-scroll{scroll-behavior:smooth;padding:clamp(10px, 1.6vw, 18px) var(--pad) clamp(16px, 3vw, 32px);-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.score-paper{background:var(--paper);border-radius:4px;max-width:1000px;min-height:300px;margin:0 auto;padding:clamp(18px,3vw,40px);overflow:hidden;box-shadow:0 20px 60px #00000080}.score-paper.strip{max-width:none;padding:clamp(18px,3vw,34px) 0}.score-scroll.centred{flex-direction:column;display:flex}.score-scroll.centred>.score-paper{margin-block:auto}.score-scroll.centred{padding-top:clamp(20px,5vh,64px);padding-bottom:clamp(20px,5vh,64px)}.score-canvas{position:relative}.osmd-host{width:100%}.osmd-host svg{shape-rendering:geometricprecision;text-rendering:optimizelegibility}.playhead-bar{width:30px;box-shadow:inset 0 0 0 1px var(--hair-warm);opacity:0;pointer-events:none;background:#c6a15b29;border-radius:6px;position:absolute}.reader-line{background:var(--brass);pointer-events:none;width:1.5px;position:absolute;top:0;bottom:0;box-shadow:0 0 14px #c6a15b99}.reader-line.travelling{opacity:0;will-change:left;height:0;transition:opacity .2s;top:0;bottom:auto}.mark{color:#2f6fd0;pointer-events:none;white-space:nowrap;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:13px;font-weight:700;line-height:1;display:flex;position:absolute;transform:translate(-50%,-50%)}.mark.circle{border:2px solid #2f6fd0d9;border-radius:50%;width:34px;height:34px}.mark.text{text-overflow:ellipsis;max-width:190px;font-size:12px;font-style:italic;font-weight:600;overflow:hidden}.mark.live{pointer-events:auto;cursor:pointer;outline-offset:1px;border-radius:7px;outline:1px dashed #2f6fd080;padding:3px 5px}.mark.live:hover,.mark.live:focus-visible{color:#b4402f;background:#b4402f1a;outline-color:#b4402f}.mark.circle.live{padding:0}.mark.circle.live:hover{border-color:#b4402f}.mark.live:after{content:"×";color:#fff;text-align:center;opacity:0;background:#b4402f;border-radius:50%;width:15px;height:15px;font-size:11px;line-height:15px;transition:opacity .12s;position:absolute;top:-9px;right:-9px}.mark.live:hover:after,.mark.live:focus-visible:after{opacity:1}.practice-bar .ghost.undo,.practice-bar .ghost.markdone{flex-shrink:0;padding:7px 12px}.practice-bar .ghost.undo:disabled{opacity:.4;cursor:default}.practice-bar .ghost.markdone{border-color:var(--hair-warm);color:var(--brass)}.mark-input{z-index:5;color:#22303f;background:#fffdf8;border:1px solid #2f6fd0;border-radius:6px;width:180px;padding:5px 8px;font-size:12px;position:absolute;transform:translate(-50%,-50%)}.score-paper.marking{cursor:crosshair}.practice-bar .marktools button{min-width:26px}.page-turn{z-index:4;border:1px solid var(--hair);width:44px;height:92px;color:var(--brass);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#1413118c;border-radius:12px;font-size:26px;line-height:1;display:none;position:fixed;top:42%}.page-turn.back{left:6px}.page-turn.fwd{right:6px}.page-turn:active{background:#c6a15b38}@media (hover:none) and (pointer:coarse){.page-turn{display:block}.practice-bar .ghost,.practice-bar .styles button,.menu-bar .ghost{min-height:44px;padding-top:10px;padding-bottom:10px}.practice-bar .play{width:52px;height:52px}.chip,.tab,.sheet-close{min-height:44px}.practice-bar{flex-wrap:wrap;row-gap:8px;overflow-x:visible}.practice-bar .stage-title{max-width:100%}}@media (width<=1180px){.practice-bar{flex-wrap:wrap;row-gap:8px;overflow-x:visible}}.shelf-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;display:flex}.shelf-head h3{flex:auto;min-width:90px}.shelf-home{color:var(--faint);margin:0 0 16px;font-size:12px;line-height:1.6}.shelf-home.under{text-align:center;margin:14px 0 0}.shelf-home.on{color:var(--muted)}.shelf-home.bad{color:#c08a6a}.shelf-home a{color:var(--brass);text-underline-offset:2px;text-decoration:underline}.ghost.piece-repair{margin:14px 0 0 var(--pad);align-self:flex-start}.score-error{color:#a33;flex-direction:column;gap:5px;font-size:14px;display:flex}.score-error span{color:#777;font-size:12px}.pdf-paper{flex-direction:column;align-items:center;gap:18px;max-width:1100px;margin:0 auto;display:flex}.pdf-page{background:var(--paper);border-radius:3px;min-height:200px;position:relative;box-shadow:0 18px 50px #00000080}.pdf-page canvas{border-radius:3px;display:block}.pdf-folio{letter-spacing:.16em;color:var(--faint);font-size:10px;position:absolute;bottom:-15px;right:2px}.pdf-loading{text-align:center;color:var(--faint);margin-top:60px;font-size:13px}.styles.tempo .bpm{font-variant-numeric:tabular-nums}.practice-bar{padding:10px var(--pad);border-bottom:1px solid var(--hair);background:var(--menubar);scrollbar-width:none;flex-shrink:0;align-items:center;gap:10px;display:flex;overflow-x:auto}.practice-bar::-webkit-scrollbar{display:none}.practice-bar .stage-title{white-space:nowrap;flex:0 auto;align-items:baseline;gap:9px;min-width:92px;max-width:360px;margin-right:auto;display:flex;overflow:hidden}.practice-bar .stage-title h2{flex-shrink:0;font-size:19px}.stage-detail{color:var(--faint);text-overflow:ellipsis;font-size:11px;overflow:hidden}@media (width<=900px){.stage-detail{display:none}}.ghost.fresh{flex-shrink:0;padding:9px 14px}.play{background:var(--brass);color:#14100a;cursor:pointer;border:none;border-radius:999px;flex-shrink:0;padding:11px 28px;font-size:13px;font-weight:600;transition:transform .15s}.play:hover{transform:translateY(-1px)}.play:disabled{opacity:.35;cursor:default;transform:none}.play.stop{background:var(--raise);color:var(--ink);border:1px solid var(--hair)}.styles{border:1px solid var(--hair);border-radius:999px;gap:2px;padding:3px;display:flex}.styles button{color:var(--faint);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;padding:7px 13px;font-size:11.5px;transition:color .2s,background .2s}.styles button:hover{color:var(--ink)}.styles button.active{color:var(--brass);background:#c6a15b24}.transport-meta{color:var(--faint);white-space:nowrap;font-size:11px}.ghost.explain{flex-shrink:0;width:32px;height:32px;padding:0;font-size:14px;font-weight:600}.ghost.explain.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.score-canvas.explaining{cursor:help}.score-canvas.explaining .vf-stavenote:hover path,.score-canvas.explaining .vf-stavenote:hover rect,.score-canvas.explaining .vf-clef:hover path,.score-canvas.explaining .vf-timesignature:hover path{fill:var(--brass);stroke:var(--brass)}.glossary-shade{z-index:80;position:fixed;inset:0}.glossary-card{z-index:81;background:var(--panel);border:1px solid var(--hair-warm);border-radius:14px;width:300px;padding:14px 15px 15px;position:fixed;box-shadow:0 24px 60px #000000a8}.glossary-card header{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.glossary-card h4{font-family:var(--display);color:var(--ink);margin:0;font-size:22px;font-weight:400;line-height:1.1}.glossary-tools{flex-shrink:0;align-items:center;gap:4px;display:flex}.glossary-card header button{width:24px;height:24px;color:var(--faint);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:11px;transition:color .15s,background .15s;display:inline-flex}.glossary-card header button:hover{color:var(--brass)}.glossary-speak:hover{background:#c6a15b1f}.glossary-speak.on{color:var(--brass);background:#c6a15b29}.glossary-alias{letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:2px 0 0;font-size:10px}.glossary-meta{letter-spacing:.05em;color:var(--brass);opacity:.85;margin:3px 0 0;font-size:11px}.ghost.who{text-overflow:ellipsis;border-color:var(--hair-warm);max-width:190px;color:var(--brass);flex-shrink:0;padding:7px 13px;overflow:hidden}.glossary-summary{color:var(--muted);margin:9px 0 0;font-size:12.5px;line-height:1.55}.glossary-here{border-top:1px solid var(--hair);color:var(--brass);opacity:.92;margin:10px 0 0;padding-top:9px;font-size:12.5px;line-height:1.5}@media (width<=560px){.glossary-card{width:calc(100vw - 28px)}}.styles.tempo button{align-items:baseline;gap:6px;padding:7px 12px;display:inline-flex}.styles.tempo i{opacity:.65;font-size:10px;font-style:normal}.sheet-backdrop{z-index:70;padding:var(--pad);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040406b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sheet{width:min(420px,100%);max-height:calc(100dvh - 2 * var(--pad));background:var(--panel);border:1px solid var(--hair);border-radius:18px;padding:24px;overflow-y:auto;box-shadow:0 30px 90px #0009}.sheet-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sheet-head h3{font-family:var(--display);color:var(--ink);margin:0;font-size:26px;font-weight:400}.sheet-close{border:1px solid var(--hair);width:30px;height:30px;color:var(--faint);cursor:pointer;background:0 0;border-radius:50%;font-size:12px}.sheet-close:hover{color:var(--brass);border-color:var(--hair-warm)}.sheet-wheel{justify-content:center;margin:4px 0 14px;display:flex}svg.cof{width:min(230px,62vw)}.sheet-label{letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px;font-size:9.5px;font-weight:600}.sheet-hint{color:var(--faint);margin:8px 2px 0;font-size:11.5px;line-height:1.5}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--hair);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:8px 14px;font-size:12.5px;transition:border-color .2s,color .2s,background .2s}.chip:hover:not(:disabled){color:var(--ink);border-color:var(--hair-warm)}.chip.active{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b21}.chip:disabled{opacity:.32;cursor:default}.add-sheet{width:min(560px,100%)}.add-sheet .file-line{margin:-6px 0 4px}.field-row{gap:12px;display:flex}.field{flex:1;min-width:0;display:block}.field .sheet-label{margin-top:14px}.field input{border:1px solid var(--hair);background:var(--raise);width:100%;color:var(--ink);font-family:var(--body);border-radius:10px;padding:10px 12px;font-size:14px}.field input:focus{border-color:var(--hair-warm);outline:none}.field input::placeholder{color:var(--faint)}.chip-row.tonality{margin-bottom:8px}.chip-row.tonality .chip{padding:6px 16px;font-size:12px}.chip-row.keys .chip{flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:5px 9px;font-size:13px;line-height:1.15;display:flex}.chip-row.keys .chip i{opacity:.5;letter-spacing:.02em;font-size:9.5px;font-style:normal}.chip-row.keys .chip.plain{justify-content:center;padding:5px 13px;font-size:12px}.art-label{align-items:baseline;gap:8px;display:flex}.art-label i{letter-spacing:.14em;color:var(--brass);opacity:.8;font-size:9.5px;font-style:normal}.art-label i.searching{color:var(--faint)}.art-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;max-height:200px;display:grid;overflow-y:auto}.art-pick,.art-none{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:0;line-height:0;transition:border-color .15s,transform .15s}.art-pick img{aspect-ratio:1;object-fit:cover;border-radius:7px;width:100%;display:block}.art-pick:hover,.art-none:hover{transform:translateY(-2px)}.art-pick.active,.art-none.active{border-color:var(--brass)}.art-none{aspect-ratio:1;border-color:var(--hair);font-family:var(--display);color:var(--faint);justify-content:center;align-items:center;font-size:22px;display:flex}.art-none.active{color:var(--brass)}.drawer-backdrop{z-index:70;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04040699;justify-content:flex-end;display:flex;position:fixed;inset:0}.drawer{width:min(340px,100%);height:100%;padding:22px var(--pad) 40px;background:var(--panel);border-left:1px solid var(--hair);overflow-y:auto;box-shadow:-20px 0 70px #0000008c}.drawer-head{justify-content:space-between;align-items:center;display:flex}.drawer-head h3{font-family:var(--display);margin:0;font-size:25px;font-weight:400}.row-toggle,.pick-row{border:none;border-bottom:1px solid var(--hair);width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;display:flex}.row-toggle:hover .row-label,.pick-row:hover .row-label{color:var(--brass)}.row-label{color:var(--ink);font-size:13.5px;transition:color .2s;display:block}.row-hint{color:var(--faint);margin-top:2px;font-size:11px;display:block}.switch{background:var(--raise);border:1px solid var(--hair);border-radius:999px;flex-shrink:0;align-items:center;width:38px;height:22px;padding:2px;transition:background .2s,border-color .2s;display:flex}.switch i{background:var(--faint);border-radius:50%;width:16px;height:16px;transition:transform .2s,background .2s}.switch.on{border-color:var(--hair-warm);background:#c6a15b33}.switch.on i{background:var(--brass);transform:translate(16px)}.drawer-action{border:1px solid var(--hair-warm);width:100%;color:var(--brass);cursor:pointer;background:0 0;border-radius:999px;margin-top:26px;padding:12px;font-size:13px}.drawer-action:hover{background:#c6a15b1a}.result{text-align:center;background:var(--panel);border:1px solid var(--hair);border-radius:18px;width:min(380px,100%);padding:32px 28px 26px;box-shadow:0 30px 90px #0009}.result h3{font-family:var(--display);color:var(--ink);margin:10px 0 0;font-size:44px;font-weight:300}.scores{justify-content:center;gap:clamp(16px,6vw,40px);margin-top:6px;display:flex}.score{flex:1;max-width:150px}.score-label{letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 6px;font-size:9.5px;font-weight:600}.score-detail{color:var(--faint);margin:6px 0 0;font-size:10.5px}.result-stars{justify-content:center;gap:8px;font-size:26px;display:flex}.result-stars span{color:var(--hair)}.result-stars span.lit{text-shadow:0 0 22px}.result-stars.easy span.lit{color:#b07a45}.result-stars.moderate span.lit{color:#c6cad3}.result-stars.hard span.lit{color:#e3c285}.metal-note{letter-spacing:.14em;text-transform:uppercase;margin-top:4px;font-size:11px}.result-actions{justify-content:center;gap:10px;margin-top:24px;display:flex}.self-rate{flex-direction:column;gap:8px;margin-top:20px;display:flex}.self-rate button{border:1px solid var(--hair);color:var(--ink);cursor:pointer;background:0 0;border-radius:12px;align-items:center;gap:14px;padding:12px 16px;font-size:13.5px;display:flex}.self-rate button:hover{border-color:var(--hair-warm);background:#c6a15b12}.self-rate span{color:var(--brass);text-align:left;min-width:42px}.dial{width:100%;display:block}.sheet-wheel{width:min(340px,84vw);margin:2px auto 6px}.stave-range{flex-direction:column;gap:5px;width:132px;display:flex}.stave-clef{fill:var(--muted);font-size:34px}.stave-line{stroke:#e8e4db57;stroke-width:.9px}.stave-band{fill:#c6a15b21;stroke:#c6a15b6b;stroke-width:.9px}.stave-note{fill:var(--brass)}.stave-label{fill:var(--muted);font-size:10px;font-family:var(--body)}@media (width<=720px){.rows{flex-direction:column;display:flex;height:auto!important}.row{height:92px;position:relative;top:auto!important}.spine{margin-left:0;top:46px;bottom:46px;left:26px}.node{left:26px}.row:hover .node{transform:translate(-50%,-50%)scale(1.04)}.row.left .row-text,.row.right .row-text{text-align:left;align-items:flex-start;max-width:calc(100% - 76px);left:66px;right:auto}.row.left .row-stars{justify-content:flex-start}.row-stave{display:none}.stage-bar{flex-wrap:wrap}.stage-bar .stave-range{display:none}.begin{justify-content:center;width:100%}}@media (width<=480px){.journey-head h2{font-size:34px}.setup-line{gap:7px;padding:8px 13px;font-size:11.5px}.clef-tabs{margin-left:0}.clef-tabs button{padding:7px 12px;font-size:11.5px}.transport{gap:8px;padding:10px 12px}.play{padding:10px 20px}.transport-meta{display:none}}.voice-select{border:1px solid var(--hair);background:var(--raise);width:100%;color:var(--ink);font-family:var(--body);cursor:pointer;border-radius:9px;margin-top:6px;padding:9px 11px;font-size:12.5px}.voice-select:hover{border-color:var(--hair-warm)}.bar-band{pointer-events:none;background:#c6a15b1a;border-radius:4px;position:absolute;box-shadow:inset 0 0 0 1px #c6a15b59}.bar-band.loop{background:#c6a15b29;box-shadow:inset 0 0 0 1px #c6a15b99}.ghost.spot{border-color:var(--hair-warm);color:var(--brass);flex-shrink:0}.ghost.loopbtn{flex-shrink:0;padding:7px 13px}.ghost.loopbtn.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.score-canvas.picking{cursor:cell}.ghost.hear{flex-shrink:0;padding:7px 13px}.ghost.hear.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.styles.hands{flex-shrink:0}.styles.hands button{min-width:34px;padding:7px 11px}.play{justify-content:center;align-items:center;padding:11px 20px;display:inline-flex}.ghost.metro,.ghost.handsbtn{flex-shrink:0;justify-content:center;align-items:center;gap:3px;padding:7px 11px;display:inline-flex}.ghost.metro.on,.ghost.handsbtn.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.menu-bar{padding:10px var(--pad);background:var(--menubar);border-bottom:1px solid var(--hair);flex-shrink:0;align-items:center;gap:10px;display:flex}.practice-bar .sections,.menu-bar .sections{flex-shrink:0}.credit-line{border-top:1px solid var(--hair);color:var(--faint);margin:18px 0 0;padding-top:12px;font-size:10.5px;line-height:1.6}.credit-line a{color:var(--faint);text-underline-offset:2px;text-decoration:underline}.credit-line a:hover{color:var(--brass)}.ghost.sizebtn{text-align:center;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:86px;padding:7px 11px;font-size:11px}.ghost.abc{letter-spacing:.06em;flex-shrink:0;padding:7px 11px;font-size:11px;font-weight:700}.ghost.abc.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.practice-bar .route{border:1px solid var(--hair);color:var(--faint);white-space:nowrap;border-radius:999px;flex-shrink:0;padding:6px 10px;font-size:11px}.welcome-back{z-index:50;padding:var(--pad);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040406d1;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.welcome{border:1px solid var(--hair);background:var(--panel);text-align:center;border-radius:18px;width:min(560px,100%);padding:clamp(24px,4vw,40px);box-shadow:0 40px 120px #000000b3}.welcome h2{font-family:var(--display);color:var(--ink);margin:12px 0 0;font-size:clamp(30px,5vw,42px);font-weight:300;line-height:1.05}.welcome-line{max-width:44ch;color:var(--muted);margin:14px auto 0;font-size:14px;line-height:1.65}.welcome-doors{flex-direction:column;gap:10px;margin-top:26px;display:flex}.welcome-door{border:1px solid var(--hair);min-height:44px;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border-radius:12px;flex-direction:column;gap:4px;padding:15px 18px;transition:border-color .2s,background .2s;display:flex}.welcome-door:hover{border-color:var(--hair-warm);background:#c6a15b0f}.welcome-door.primary{border-color:var(--hair-warm);background:#c6a15b1f}.welcome-door.primary:hover{background:#c6a15b2e}.door-title{font-family:var(--display);font-size:19px}.welcome-door.primary .door-title{color:var(--brass-bright)}.door-hint{color:var(--faint);font-size:12px}.welcome-foot{max-width:46ch;color:var(--faint);margin:22px auto 0;font-size:11.5px;line-height:1.6}.welcome-back{animation:.28s ease-out both welcome-fade}.welcome{animation:.34s cubic-bezier(.2,.8,.3,1) both welcome-rise}@keyframes welcome-fade{0%{opacity:0}to{opacity:1}}@keyframes welcome-rise{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.welcome-back,.welcome{animation:none}}.shelf-hint{color:var(--faint);margin:-6px 0 14px;font-size:12px}.card-step{border:1px solid var(--hair);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-radius:999px;margin-top:4px;padding:3px 8px;font-size:9.5px;font-weight:600}.library-credit{border-top:1px solid var(--hair);color:var(--faint);margin:clamp(40px,6vw,64px) 0 0;padding-top:18px;font-size:11.5px;line-height:1.7}.library-credit a{color:var(--faint);text-underline-offset:2px;text-decoration:underline}.library-credit a:hover{color:var(--brass)}.practice-bar.writing .play,.practice-bar.writing .metro,.practice-bar.writing .fresh,.practice-bar.writing .styles:not(.marktools),.practice-bar.writing .explain,.practice-bar.writing .who,.practice-bar.writing .abc,.practice-bar.writing .sizebtn,.practice-bar.writing .hear,.practice-bar.writing .handsbtn,.practice-bar.writing .loopbtn,.practice-bar.writing .spot,.practice-bar.writing .route{display:none}.piece-cover{aspect-ratio:1;background:var(--bg);border-radius:8px;width:100%;display:block;box-shadow:0 8px 24px #00000073}.card.cover .card-step{margin-top:2px}.card.cover:hover .piece-cover path{stroke:#e3c285f2}.mark.at-start{transform:translateY(-50%)}.mark.at-end{transform:translate(-100%,-50%)}.piece-cover path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke .25s,stroke-dashoffset 1.5s cubic-bezier(.22,.7,.24,1)}.piece-cover.drawn path{stroke-dashoffset:0}.piece-cover circle{stroke-dasharray:none}@media (prefers-reduced-motion:reduce){.piece-cover path{stroke-dashoffset:0;transition:none}}.know-line{max-width:52ch;color:var(--muted);text-align:center;margin:18px auto 0;font-size:14px;line-height:1.7}.know-line strong{color:var(--brass-bright);font-weight:600}.begin.know-start{margin:22px auto 4px;display:block}.know-shelf{margin-top:clamp(26px,4vw,38px)}.know-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;display:grid}.know-cell{border:1px solid var(--hair);min-height:54px;color:var(--faint);text-align:left;cursor:pointer;background:0 0;border-radius:9px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:9px 11px;transition:border-color .2s,background .2s,color .2s;display:flex}.know-cell:hover{border-color:var(--hair-warm);color:var(--ink)}.know-glyph{font-family:var(--display);color:inherit;opacity:.9;font-size:17px;line-height:1}.know-name{font-family:var(--display);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;line-height:1.2;display:-webkit-box;overflow:hidden}.know-cell.lv1{color:var(--muted);background:#c6a15b0f;border-color:#c6a15b47}.know-cell.lv2{border-color:var(--hair-warm);color:var(--brass-bright);background:#c6a15b26}.know-back{padding:var(--pad);justify-content:center;align-items:center;display:flex}.know-card{border:1px solid var(--hair);background:var(--panel);text-align:center;border-radius:16px;width:min(440px,100%);padding:clamp(22px,4vw,34px);box-shadow:0 30px 90px #000000a8}.know-card h3{font-family:var(--display);color:var(--ink);margin:8px 0 0;font-size:30px;font-weight:300}.know-card-glyph{font-family:var(--display);color:var(--brass);margin:14px 0 0;font-size:54px;line-height:1}.know-alias{color:var(--faint);margin:4px 0 0;font-size:12px;font-style:italic}.know-summary{max-width:40ch;color:var(--muted);margin:16px auto 0;font-size:14px;line-height:1.7}.know-reveal{margin-top:18px}.know-answer{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;display:flex}.sym{width:100%;height:34px;color:inherit;display:block}.know-cell{align-items:stretch;min-height:86px}.know-cell .know-name{text-align:center}.know-card-sym{border:1px solid var(--hair);max-width:260px;color:var(--brass);background:#ffffff05;border-radius:10px;margin:14px auto 4px;padding:14px 10px}.know-card-sym .sym{height:76px}.library.study{max-width:620px;padding-top:clamp(20px,4vw,40px)}.study-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.study-count{letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0;font-size:11px}.study-foot{justify-content:space-between;gap:10px;margin-top:22px;display:flex}.study-foot .ghost:disabled{opacity:.35;cursor:default}.flashcard{border:1px solid var(--hair);background:var(--panel);width:100%;color:inherit;text-align:center;cursor:pointer;border-radius:18px;margin-top:20px;padding:clamp(26px,5vw,44px) clamp(20px,4vw,36px);transition:border-color .2s;display:block}.flashcard:hover{border-color:var(--hair-warm)}.flashcard h3{font-family:var(--display);color:var(--ink);margin:16px 0 0;font-size:30px;font-weight:300}.flash-sym{color:var(--brass)}.flash-sym .sym{height:96px}.flash-hint{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:18px 0 0;font-size:11px}.quiz-sym{color:var(--brass);margin-top:22px}.quiz-sym .sym{height:130px}.quiz-ask{text-align:center;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:10px 0 22px;font-size:12px}.quiz-options{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;display:grid}.quiz-option{border:1px solid var(--hair);min-height:52px;color:var(--ink);font-family:var(--display);text-align:left;cursor:pointer;background:0 0;border-radius:12px;padding:15px 18px;font-size:18px;transition:border-color .2s,background .2s,color .2s}.quiz-option:hover:not(:disabled){border-color:var(--hair-warm);background:#c6a15b12}.quiz-option:disabled{cursor:default}.quiz-option.right{color:#7fdca4;background:#1db9541f;border-color:#1db95480}.quiz-option.wrong{color:#e0917f;background:#b4402f1f;border-color:#b4402f80}.quiz-after{text-align:center;margin-top:20px}.quiz-after .begin.sm{margin-top:16px}.result-card{text-align:center;margin:30px auto 0}.result-card h3{font-size:40px}.row-stars.big{letter-spacing:6px;margin-top:10px;font-size:26px;display:block}.row-count{letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-size:10px;position:absolute;top:50%;transform:translateY(-50%)}.row.left .row-count{right:8%}.row.right .row-count{left:8%}.know-wall-link{margin-top:18px}.quiz-definition{max-width:42ch;font-family:var(--display);text-align:center;color:var(--ink);margin:30px auto 0;font-size:clamp(20px,3vw,26px);font-weight:300;line-height:1.45}.sym-row{height:auto}.sym-tile{border:1px solid var(--hair);background:var(--panel);text-align:left;border-radius:12px;flex-direction:column;gap:5px;width:40%;padding:14px 16px;transition:border-color .2s,background .2s,transform .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.sym-row.left .sym-tile{right:54%}.sym-row.right .sym-tile{left:54%}.sym-row:hover .sym-tile{border-color:var(--hair-warm);background:var(--raise)}.sym-name{font-family:var(--display);color:var(--ink);font-size:20px;line-height:1.15}.sym-lead{color:var(--faint);font-size:12px;line-height:1.5}.sym-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:3px;display:flex}.sym-count{letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-size:9.5px}.sym-foot .row-stars{letter-spacing:3px;font-size:17px;line-height:1}.sym-foot .row-stars i{color:#ffffff21;font-style:normal}.sym-foot .row-stars i.lit{color:var(--brass-bright);text-shadow:0 0 12px #c6a15b73}.sym-row.todo .sym-tile{opacity:.72}.sym-row.done .sym-tile{border-color:#c6a15b33}.sym-row.current .sym-tile{border-color:var(--hair-warm);background:#c6a15b14;box-shadow:0 0 34px #c6a15b1a}.journey-rule{color:var(--faint);margin:10px 0 0;font-size:11.5px}.scoring-rule{letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:10px 0 0;font-size:11px}@media (width<=720px){.sym-row .sym-tile{width:100%;position:static;transform:none}.sym-row{margin-bottom:10px;height:auto!important;position:static!important}.rows{height:auto!important}.sym-row .node,.chapter .spine{display:none}}.chapter .rows:has(.sym-row){margin-top:72px}.verdict{font-family:var(--display);margin:0 0 10px;font-size:22px;font-weight:400}.verdict.right,.quiz-after .verdict:not(.wrong){color:#7fdca4}.verdict.wrong{color:#e0917f}.quiz-type{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.quiz-input{border:1px solid var(--hair);background:var(--panel);max-width:340px;color:var(--ink);font-family:var(--display);text-align:center;border-radius:12px;flex:260px;padding:14px 16px;font-size:19px}.quiz-input:focus{border-color:var(--hair-warm);outline:none}.quiz-input:disabled{opacity:.75}.study-tools{align-items:center;gap:12px;display:flex}.ghost.voicebtn{flex-shrink:0;padding:7px 12px;font-size:11.5px}.ghost.voicebtn.on{border-color:var(--hair-warm);color:var(--brass);background:#c6a15b24}.test-choice{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.mark.dragging{cursor:grabbing;opacity:.9;filter:drop-shadow(0 4px 10px #00000080)}.mark.live{cursor:grab}.mark.live:active{cursor:grabbing}