:root{--nav-height: 56px;--sidebar-width: 220px;--player-height: 82px;--score-ink: #ffffff;--score-muted: #94a3b8;--score-line: rgba(94, 234, 212, .2);--score-accent: #5eead4;--score-panel: rgba(13, 2, 33, .92)}.app-shell{min-height:100vh;padding-top:var(--nav-height);padding-left:var(--sidebar-width);padding-bottom:var(--player-height)}.drawer-button,.drawer-close,.drawer-backdrop{display:none}.sidebar{position:fixed;z-index:30;inset:var(--nav-height) auto 0 0;width:var(--sidebar-width);padding:20px 14px;background:var(--score-panel);border-right:1px solid var(--score-line)}.search-box{position:relative;display:block;margin-bottom:18px}.search-box>span{position:absolute;left:10px;top:7px;color:var(--score-muted);font-size:19px;line-height:1;transform:rotate(-18deg);pointer-events:none}.search-box input{width:100%;height:34px;padding:0 10px 0 32px;color:var(--score-ink);background:#5eead40f;border:1px solid var(--score-line);border-radius:4px;outline:none;font-size:12px}.search-box input:focus{background:#5eead414;border-color:#5eead466;box-shadow:0 0 14px #5eead41f}.search-box input::placeholder{color:#64748b}.score-list{display:grid;gap:2px}.score-list-item{width:100%;height:34px;display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:6px;padding:0 9px;color:var(--score-muted);text-align:left;background:transparent;border:0;border-radius:4px;cursor:pointer;transition:all .15s ease}.score-list-item:hover{color:var(--score-ink);background:#5eead40f}.score-list-item.active{color:var(--score-accent);background:#5eead414;text-shadow:0 0 6px rgba(94,234,212,.5)}.score-list-item>span{color:#64748b;font-size:10px;line-height:1;font-variant-numeric:lining-nums tabular-nums}.score-list-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.empty-list{margin:20px 8px;color:var(--score-muted);font-size:11px}.score-workspace{min-height:calc(100vh - var(--nav-height) - var(--player-height))}.practice-panel{position:relative;width:100%;min-height:calc(100vh - var(--nav-height) - var(--player-height));padding:18px clamp(14px,3vw,48px) 28px}.notation{width:100%;max-width:1480px;margin:0 auto;color:var(--score-ink)}.score-header{min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:5px clamp(10px,2vw,28px) 10px;border-bottom:1px solid var(--score-line)}.score-title{text-align:center}.score-title h1{margin:0;font-size:clamp(28px,4vw,36px);font-weight:700;line-height:1.2;letter-spacing:.1em;text-shadow:0 0 14px rgba(94,234,212,.25)}.score-title p{margin:3px 0 0;color:var(--score-muted);font-size:13px;line-height:1.25;letter-spacing:.12em}.score-metadata{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.score-key{display:flex;align-items:center;gap:clamp(16px,3vw,34px)}.score-key>span{color:#cbd5e1;font-size:15px;font-weight:400;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;line-height:1.2;white-space:nowrap}.score-key .time-signature{min-width:16px;display:inline-flex;flex-direction:column;align-items:stretch;gap:1px;text-align:center;line-height:1}.time-signature>span{display:block;padding:0 2px;line-height:.82}.time-signature>span+span{padding-top:2px;border-top:1px solid currentColor}.score-author{color:#cbd5e1;font-size:14px;font-weight:400;line-height:1.2;text-align:right;white-space:nowrap}.measures{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--notation-size) * 1.35) calc(var(--notation-size) * .9);padding-top:8px}.measure{position:relative;flex:0 0 auto;display:flex;align-items:flex-start;min-height:calc(var(--notation-size) * 5.25);padding-top:calc(var(--notation-size) * 1.25);break-inside:avoid}.measure-heading{position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:calc(var(--notation-size) * .75);white-space:nowrap;color:#fbbf24;font-size:calc(var(--notation-size) * .75);line-height:1}.measure-notes,.beat-group{position:relative;display:flex;align-items:flex-start}.beat-group.subdivided:after{content:"";position:absolute;z-index:2;left:calc(var(--notation-size) * .14);right:calc(var(--notation-size) * .14);top:calc(var(--notation-size) * 1.88);border-top:max(1px,calc(var(--notation-size) * .08)) solid currentColor;pointer-events:none}.score-slurs{position:absolute;z-index:4;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.score-slurs path{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round}.notation-note{position:relative;flex:0 0 calc(var(--notation-size) * var(--note-width));width:calc(var(--notation-size) * var(--note-width));display:grid;grid-template-rows:calc(var(--notation-size) * .55) calc(var(--notation-size) * 1.5) calc(var(--notation-size) * .45) calc(var(--notation-size) * 1.45);justify-items:start;transition:background-color .1s ease}.notation-note:hover{background:#5eead414;border-radius:4px;cursor:pointer}.notation-note:focus-visible{border-radius:4px;outline:2px solid rgba(94,234,212,.5);outline-offset:2px}.grace-cluster{position:absolute;z-index:5;top:calc(var(--notation-size) * .02);left:calc(var(--notation-size) * .25);width:calc(var(--notation-size) * 1.2);height:calc(var(--notation-size) * 1.35);pointer-events:none}.grace-cluster>b{position:absolute;top:0;left:0;font-size:calc(var(--notation-size) * .68);font-weight:500;line-height:1}.grace-cluster>svg{position:absolute;top:calc(var(--notation-size) * .28);left:calc(var(--notation-size) * .12);width:calc(var(--notation-size) * 1.05);height:calc(var(--notation-size) * 1.05);overflow:visible}.grace-cluster path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}.note-line{width:100%;height:calc(var(--notation-size) * 1.5);display:flex;align-items:center;white-space:nowrap;font-size:var(--notation-size);line-height:1}.note-head{position:relative;flex:0 0 calc(var(--notation-size) * var(--head-width));height:100%;display:grid;place-items:center}.note-line b{position:relative;min-width:calc(var(--notation-size) * .85);height:var(--notation-size);text-align:center;font-size:var(--notation-size);font-weight:600;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;line-height:1}.duration-0-25 .note-head:after{content:"";position:absolute;left:0;right:0;top:calc(100% + var(--notation-size) * .08);border-top:max(1px,calc(var(--notation-size) * .08)) solid currentColor}.beat-group>.duration-0-25:first-child .note-head:after{left:calc(var(--notation-size) * .14)}.beat-group>.duration-0-25:last-child .note-head:after{right:calc(var(--notation-size) * .14)}.accidental{position:absolute;right:calc(50% + var(--notation-size) * .48);font-style:normal;font-size:calc(var(--notation-size) * .72)}.duration-dot{position:absolute;left:calc(50% + var(--notation-size) * .42);font-style:normal;font-weight:700}.extension{flex:0 0 calc(var(--notation-size) * 2.25);text-align:center;font-style:normal;font-size:calc(var(--notation-size) * .85)}.octave-dots{width:calc(var(--notation-size) * var(--head-width));height:calc(var(--notation-size) * .5);display:flex;align-items:center;justify-content:center;gap:2px}.octave-dots i{width:max(3px,calc(var(--notation-size) * .2));height:max(3px,calc(var(--notation-size) * .2));display:block;background:currentColor;border-radius:50%}.lyric{width:calc(var(--notation-size) * var(--head-width));overflow:visible;text-align:center;white-space:nowrap;font-size:var(--notation-size);line-height:1.4}.notation-note.active-note{background:#5eead41f;border-radius:4px;box-shadow:inset 0 0 0 1px #5eead466,0 0 14px #5eead41f}.barline-start,.barline-end{position:relative;flex:0 0 calc(var(--notation-size) * .7);width:calc(var(--notation-size) * .7);height:calc(var(--notation-size) * 1.8);margin-top:calc(var(--notation-size) * .42)}.barline-start{margin-right:calc(var(--notation-size) * .32)}.barline-end{margin-left:calc(var(--notation-size) * .3)}.barline-start>i,.barline-end>i{position:absolute;top:0;bottom:0;width:1px;background:currentColor}.barline-start>i:first-of-type{left:0;width:max(2px,calc(var(--notation-size) * .12))}.barline-start>i:last-of-type{left:calc(var(--notation-size) * .24)}.barline-end>i:first-of-type{right:calc(var(--notation-size) * .18)}.barline-end>i:last-of-type{display:none;right:0;width:max(2px,calc(var(--notation-size) * .12))}.barline-start b,.barline-end b{position:absolute;top:calc(var(--notation-size) * .5);display:grid;gap:calc(var(--notation-size) * .28)}.barline-start b{right:0}.barline-end b{left:0}.barline-start em,.barline-end em{width:max(2px,calc(var(--notation-size) * .13));height:max(2px,calc(var(--notation-size) * .13));display:block;background:currentColor;border-radius:50%}.barline-end.final>i:first-of-type,.barline-end.repeat>i:first-of-type{right:calc(var(--notation-size) * .26)}.barline-end.final>i:last-of-type,.barline-end.repeat>i:last-of-type{display:block}.ending-line{position:absolute;z-index:3;top:calc(var(--notation-size) * .05);left:calc(var(--notation-size) * -.45);right:calc(var(--notation-size) * -.45);height:calc(var(--notation-size) * 1.65);border-top:1px solid currentColor;pointer-events:none}.ending-line:has(b){left:var(--ending-left, 0px)}.ending-line:has(b):before{content:"";position:absolute;top:-1px;left:0;height:calc(var(--notation-size) * 1.42);border-left:1px solid currentColor}.ending-end .ending-line{right:calc(var(--notation-size) * 1.2)}.ending-line b{position:absolute;top:calc(var(--notation-size) * .18);left:calc(var(--notation-size) * .28);color:#fbbf24;font-size:calc(var(--notation-size) * .72);font-weight:600;line-height:1}.page-loading,.error-layer{min-height:calc(100vh - var(--nav-height) - var(--player-height) - 40px);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--score-muted);font-size:12px}.error-layer{flex-direction:column;color:#f472b6}.error-layer span{color:var(--score-muted)}.loader{width:16px;height:16px;border:2px solid rgba(94,234,212,.2);border-top-color:var(--score-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.alpha-engine{position:fixed;left:-200vw;top:0;width:1000px;height:700px;visibility:hidden;pointer-events:none}.player-bar{position:fixed;z-index:40;left:var(--sidebar-width);right:0;bottom:0;height:var(--player-height);display:grid;grid-template-columns:minmax(270px,.85fr) minmax(590px,1.65fr);gap:22px;align-items:center;padding:10px 22px;color:var(--score-ink);background:var(--score-panel);backdrop-filter:blur(4px);border-top:1px solid var(--score-line);box-shadow:0 -6px 22px #5eead414}.transport{min-width:0;display:flex;align-items:center;gap:9px}.icon-button,.play-button{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;padding:0;color:var(--score-accent);background:#5eead40f;border:1px solid var(--score-line);border-radius:50%;cursor:pointer;font-size:14px;transition:all .15s ease}.icon-button:hover,.play-button:hover{background:#5eead41f;border-color:#5eead466;box-shadow:0 0 14px #5eead44d}.play-button:disabled{cursor:wait;opacity:.45}.timeline{min-width:100px;flex:1}.timeline>div{display:flex;justify-content:space-between;margin-top:3px;color:var(--score-muted);font-size:9px;font-variant-numeric:lining-nums tabular-nums;line-height:1}.player-bar input[type=range]{width:100%;height:3px;margin:0;accent-color:var(--score-accent);cursor:pointer}.controls-grid{min-width:0;display:grid;grid-template-columns:1.15fr .65fr .85fr .55fr auto auto;align-items:end;gap:10px}.control-field{min-width:0;display:grid;gap:4px}.control-field>span{color:var(--score-muted);font-size:9px;letter-spacing:.04em}.control-field select{width:100%;height:30px;padding:0 24px 0 7px;color:var(--score-ink);background:#5eead40f;border:1px solid var(--score-line);border-radius:4px;font-size:10px}.control-field select:hover{border-color:#5eead466}.control-field option{color:#0d0221}.toggle-control{display:grid;justify-items:center;gap:4px;padding:0 1px 1px;color:var(--score-muted);background:transparent;border:0;cursor:pointer;font-size:9px;white-space:nowrap}.toggle{width:27px;height:15px;padding:2px;background:#94a3b859;border-radius:99px;transition:.2s}.toggle i{display:block;width:11px;height:11px;background:#cbd5e1;border-radius:50%;transition:.2s}.toggle-control.on{color:var(--score-accent);text-shadow:0 0 6px rgba(94,234,212,.5)}.toggle-control.on .toggle{background:var(--score-accent);box-shadow:0 0 14px #5eead44d}.toggle-control.on .toggle i{transform:translate(12px);background:#0d0221}@media(max-width:1050px){:root{--player-height: 118px}.player-bar{grid-template-columns:1fr;gap:8px;padding:9px 16px}.controls-grid{grid-template-columns:1.15fr .65fr .85fr .55fr auto auto}}@media(max-width:900px){:root{--sidebar-width: 0px}.app-shell{padding-left:0}.sidebar{z-index:60;inset:0 auto 0 0;width:220px;padding-top:56px;transform:translate(-100%);transition:transform .22s ease;box-shadow:12px 0 35px #5eead41a}.drawer-open .sidebar{transform:translate(0)}.drawer-button{position:fixed;z-index:45;top:calc(var(--nav-height) + 10px);left:14px;width:36px;height:36px;display:grid;align-content:center;gap:4px;padding:0 10px;background:var(--score-panel);border:1px solid var(--score-line);border-radius:50%;box-shadow:0 0 14px #5eead41f;cursor:pointer}.drawer-button i{display:block;height:1px;background:var(--score-accent)}.drawer-close{position:absolute;top:18px;right:12px;width:30px;height:30px;display:grid;place-items:center;color:var(--score-muted);background:transparent;border:0;border-radius:50%;cursor:pointer;font-size:23px;font-weight:300}.drawer-backdrop{position:fixed;z-index:55;inset:0;width:100%;height:100%;padding:0;background:#0d0221b3;border:0;opacity:0;pointer-events:none;transition:opacity .22s ease}.drawer-open .drawer-backdrop{display:block;opacity:1;pointer-events:auto}.player-bar{left:0}.practice-panel{padding-top:12px}}@media(max-width:640px){:root{--player-height: 126px}.practice-panel{padding-inline:8px}.score-header{min-height:112px;gap:9px;padding:4px 8px 8px}.score-title p{font-size:13px}.score-metadata{align-items:center;gap:12px}.score-key{flex:0 1 auto;justify-content:flex-start;gap:10px}.score-key>span{font-size:13px}.score-author{font-size:13px}.player-bar{gap:7px;padding:8px 10px}.controls-grid{grid-template-columns:105px 75px 90px 65px auto auto;gap:6px;overflow-x:auto;padding-bottom:2px}}@media(prefers-reduced-motion:reduce){.app-shell *,.app-shell *:before,.app-shell *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}