/* MIX-ED Notation engine look. GENERATED by tools/build_notation.py from Classroom's Score tool. Don't edit by hand. */
/* Write music: a score on A4 pages */
.stage[data-mode="score"]{height:clamp(620px,calc(100vh - 200px),1500px)!important}
.score{position:absolute;inset:0;overflow:auto;color:#141414}
.sc-sp{flex:1}
.sc-pages{display:flex;flex-direction:column;align-items:center;gap:18px}
.sc-pages{--sz:1}.sc-page{display:block;width:min(100%,calc(880px * var(--sz)));height:auto;cursor:crosshair}
/* Write music: fresh look (floating bars, drawn palette, piano, ghost note, playhead) */
.score{background:radial-gradient(1200px 600px at 50% -200px,#fff 0,#f1ede6 60%,#e7e2d8 100%);padding-bottom:0}
html.is-dark .score{background:radial-gradient(1200px 600px at 50% -200px,#2a2733 0,#17151d 60%,#0f0e14 100%)}
.sc-top{position:sticky;top:10px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 12px 0;padding:8px 10px 8px 16px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(30,20,50,.12),0 0 0 1px rgba(30,20,50,.06)}
html.is-dark .sc-top{background:rgba(30,28,38,.85);box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08)}
.sc-title{border:0;background:transparent;font:400 26px var(--display);letter-spacing:.01em;color:#141414;width:min(320px,40vw);outline:none;padding:2px 0}
.sc-comp{border:0;background:transparent;font:600 14px var(--body);color:#6b6577;width:140px;outline:none}
html.is-dark .sc-title{color:#f4f2f8}html.is-dark .sc-comp{color:#a9a3b8}
.sc-pop{position:relative}.sc-pop>summary{list-style:none;cursor:pointer}.sc-pop>summary::-webkit-details-marker{display:none}
.sc-setup>summary{height:36px;display:flex;align-items:center;padding:0 14px;border-radius:8px;background:#f1edf7;color:#4b3a7a;font:700 13px var(--body);white-space:nowrap}
.sc-setup>summary::after{content:'▾';margin-left:8px;opacity:.6}
html.is-dark .sc-setup>summary{background:#332c48;color:#d9cff7}
.sc-popbox{position:absolute;top:calc(100% + 8px);left:0;z-index:10;display:grid;gap:10px;min-width:280px;padding:16px;border-radius:16px;background:#fff;color:#141414;box-shadow:0 18px 50px rgba(30,20,50,.22),0 0 0 1px rgba(30,20,50,.06);animation:scIn .14s ease-out}
.sc-popbox.sc-right{left:auto;right:0}
.sc-popbox label{display:grid;gap:4px;font:700 12px var(--body);color:#6b6577;text-transform:uppercase;letter-spacing:.04em}
.sc-popbox select,.sc-popbox input[type=number]{height:36px;padding:0 10px;border:1px solid #ddd6e6;border-radius:10px;background:#faf9fc;color:#141414;font:600 14px var(--body);text-transform:none;letter-spacing:0}
.sc-popbox .sc-tog{display:flex;align-items:center;gap:8px;font:600 14px var(--body);color:#141414;text-transform:none;letter-spacing:0}
.sc-popbox .sc-tog input{width:18px;height:18px;accent-color:#e43a6c}
.sc-bpm{display:flex;align-items:center;gap:6px;font:800 15px var(--body);color:#141414}.sc-bpm input{width:80px}
.sc-ph{font:400 18px var(--display);text-transform:uppercase}.sc-note{margin:0;font:500 12.5px/1.45 var(--body);color:#6b6577}
.sc-wide{height:42px;border:0;border-radius:12px;background:#f4f1f8;color:#141414;font:700 14px var(--body);text-align:left;padding:0 14px;cursor:pointer}
.sc-wide:hover{background:#e43a6c;color:#fff}
.sc-ghostbtn{height:36px;border:1px dashed #cfc6dc;border-radius:10px;background:none;color:#6b6577;font:700 13px var(--body);cursor:pointer}
.sc-round{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;font:400 16px var(--body);background:#141414;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .12s}
.sc-round:hover{transform:scale(1.06)}
.sc-play.on{background:#e43a6c}
.sc-recdot{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.08)}.sc-recdot i{width:16px;height:16px;border-radius:50%;background:#e43a6c}
.score.recording .sc-recdot i{animation:scPulse 1s ease-in-out infinite}
.sc-share{height:42px;display:flex;align-items:center;padding:0 18px;border-radius:8px;background:linear-gradient(135deg,#e43a6c,#7031d8);color:#fff;font:800 14px var(--body)}
.sc-sel{min-height:22px;margin:10px 16px 0;text-align:center;font:700 14px var(--body);color:#2563eb}
html.is-dark .sc-sel{color:#8fb0ff}
.sc-recst{position:sticky;top:76px;z-index:4;display:block;width:max-content;margin:0 auto;padding:0 14px;border-radius:6px;background:#e43a6c;color:#fff;font:800 13px/30px var(--body)}.sc-recst:empty{display:none}
.sc-pages{padding:8px 12px 18px}
.sc-page{border-radius:6px;box-shadow:0 2px 6px rgba(30,20,50,.08),0 24px 60px -20px rgba(30,20,50,.35)}
.sc-page g.sc-pop{animation:scPopIn .28s cubic-bezier(.2,1.4,.4,1);transform-box:fill-box;transform-origin:center}
.sc-page g.playing *{fill:#e43a6c;stroke:#e43a6c}
.sc-page .sc-head{transition:x .06s linear}
.sc-count{position:sticky;top:40%;z-index:6;width:160px;height:160px;margin:-160px auto 0;border-radius:50%;display:grid;place-items:center;background:rgba(228,58,108,.92);color:#fff;font:400 90px var(--display);box-shadow:0 20px 60px rgba(228,58,108,.45);animation:scBeat .5s ease-out}
.sc-dock{position:sticky;bottom:12px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px;pointer-events:none}
.sc-pad,#scPiano{pointer-events:auto}
.sc-pad{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:6px 8px;border-radius:22px;background:rgba(20,18,26,.92);backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(20,10,40,.35)}
.sc-key{position:relative;width:48px;height:52px;border:0;border-radius:14px;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;padding:4px 0 10px;transition:background .12s,transform .12s}
.sc-key svg{width:24px;height:30px}.sc-key .sc-sym{font:400 24px/1 'Times New Roman',serif}
.sc-key small{position:absolute;bottom:3px;left:0;right:0;text-align:center;font:700 9px var(--body);opacity:.55;text-transform:uppercase}
.sc-key:hover{background:rgba(255,255,255,.12)}.sc-key.on{background:#e43a6c;box-shadow:0 6px 18px rgba(228,58,108,.5)}.sc-key:active{transform:scale(.94)}
.sc-div{width:1px;height:30px;background:rgba(255,255,255,.18);margin:0 4px}
.sc-keys{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(100%,640px);height:86px;padding:6px;border-radius:16px;background:rgba(20,18,26,.92);box-shadow:0 18px 50px rgba(20,10,40,.3)}
.sc-w{position:relative;margin:0 1px;border:0;border-radius:0 0 7px 7px;background:#fbfaf7;color:#9a94a6;font:700 9px var(--body);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;cursor:pointer}
.sc-b{position:absolute;top:6px;left:calc(6px + (100% - 12px) / var(--n) * var(--i) - (100% - 12px) / var(--n) * .3);width:calc((100% - 12px) / var(--n) * .6);height:46px;border:0;border-radius:0 0 5px 5px;background:#1d1b22;cursor:pointer;z-index:2;box-shadow:inset 0 -3px 0 rgba(255,255,255,.08)}
.sc-w:hover{background:#fff0f4}.sc-b:hover{background:#3a3445}
.sc-w.lit,.sc-b.lit{background:#e43a6c!important;color:#fff}
.sc-help{max-width:880px;margin:10px auto 24px;padding:0 16px;font:500 13px/1.55 var(--body);color:#6b6577}
html.is-dark .sc-help{color:#a9a3b8}
.sc-page g.sc-n{cursor:grab;touch-action:none}.score.dragging,.score.dragging .sc-page,.score.dragging .sc-page g.sc-n{cursor:grabbing}
.sc-done{margin-left:10px;height:26px;padding:0 12px;border:0;border-radius:6px;background:#2563eb;color:#fff;font:800 12px var(--body);cursor:pointer;vertical-align:middle}
.sc-lybox{display:block;width:min(560px,90%);height:34px;margin:8px auto 0;padding:0 12px;border:1px solid #c9d6f5;border-radius:10px;background:#fff;color:#141414;font:600 14px var(--body)}
.sc-local{margin-left:8px;font:800 12px var(--body);color:#1fa463}
.sc-tr{display:flex;flex-wrap:wrap;gap:6px}.sc-tr button{height:34px;min-width:46px;border:1px solid #ddd6e6;border-radius:10px;background:#faf9fc;color:#141414;font:800 13px var(--body);cursor:pointer}.sc-tr button:hover{background:#e43a6c;border-color:#e43a6c;color:#fff}.sc-tr select{flex:1;min-width:120px}
.sc-page [data-obj]{cursor:move}.sc-page [data-obj]:hover{filter:drop-shadow(0 0 1.5px #e43a6c)}.sc-page g.sc-osel{filter:drop-shadow(0 0 1.2px #2563eb) drop-shadow(0 0 1.2px #2563eb)}
.sc-st{margin-left:6px;height:26px;min-width:30px;padding:0 9px;border:1px solid #c9d6f5;border-radius:8px;background:#fff;color:#141414;font:700 13px var(--body);cursor:pointer;vertical-align:middle}.sc-st:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.sc-page{touch-action:pan-y}.sc-page g.sc-n,.sc-page [data-obj]{touch-action:none}   /* a finger scrolls the page; notes, words and the clef still drag */
.sc-dynpop>summary{list-style:none}.sc-dynpop>summary::-webkit-details-marker{display:none}.sc-dynpop .sc-popbox{top:auto;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:0;display:flex;gap:6px;padding:10px}
.sc-dyn{height:38px;min-width:44px;border:0;border-radius:10px;background:#f4f1f8;color:#141414;font:italic 700 17px Georgia,serif;cursor:pointer}.sc-dyn:hover{background:#e43a6c;color:#fff}.sc-dynx{font:700 12px var(--body)}
.sc-page [data-obj="slur"]{cursor:pointer}
@keyframes scPopIn{from{transform:scale(.3);opacity:0}}
@keyframes scIn{from{opacity:0;transform:translateY(-4px)}}
@keyframes scPulse{50%{transform:scale(.7);opacity:.6}}
@keyframes scBeat{from{transform:scale(1.25)}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--surface);padding:14px 18px;border-radius:4px;max-width:min(560px,calc(100% - 32px));font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast b{color:var(--pink)}