@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f7f9;--white:#fff;--ink:#242c36;--muted:#90959e;--green:#21846d;--line:#e8ebee;--soft:#edf5f1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,'Noto Sans SC',sans-serif;font-size:13px}button,input,select{font:inherit}button,select,input[type=range],input[type=checkbox]{cursor:pointer}button{transition:.2s}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #65b9a0;outline-offset:3px}button{color:inherit}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}.sidebar{width:212px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:36px 22px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;color:#263c34;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:3px}.brand small{font-size:8px;display:block;letter-spacing:2px;margin-top:3px}.brand-icon{display:block;position:relative;border-radius:10px;background:#24836d;color:white;font-size:31px;line-height:43px;letter-spacing:0;width:43px;height:45px;text-align:center}.brand-icon span{position:absolute;font-size:16px;top:-5px;left:17px;color:#a2d7bb}.workspace-tag{margin:35px 0 25px;background:#f7f8fa;border:1px solid #edf0f2;padding:11px 8px;font-size:10px;color:#767e86;border-radius:7px}.dot{display:inline-block;width:5px;height:5px;background:#489b7f;border-radius:50%;margin-right:6px}.nav{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:13px 15px;margin-bottom:8px;border-radius:7px;color:#737b87;font-size:12px}.nav>span{font-size:18px;width:20px}.nav.active{background:#eaf4ef;color:#267c63;font-weight:600}.nav i{font-style:normal;margin-left:auto;font-size:10px;background:#f0f1f3;padding:1px 6px;border-radius:4px}.sidebar-note{margin:42px 14px}.tiny-label{font-size:7px;letter-spacing:1.2px;color:#a9b2af}.sidebar-note p{font-size:12px;line-height:2.1;color:#8b9691}.mini-piano{font-size:60px;transform:rotate(-12deg);color:#c9d9d1;margin-top:15px}.sidebar-bottom{margin-top:auto}.profile{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:22px;margin-top:20px;font-size:11px}.profile>span{background:#f4f1e9;border-radius:50%;width:34px;height:34px;text-align:center;line-height:34px;font-size:19px;color:#8c997b}.profile small{display:block;font-size:9px;color:#aaaeb5;margin-top:4px}main{margin-left:212px}header{height:77px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 37px;background:#ffffffaa}.breadcrumb{font-size:11px;color:#9b9fa8}.breadcrumb span{margin:0 13px;color:#cdd0d5}.breadcrumb strong{font-weight:500;color:#515965}.header-actions{display:flex;gap:21px;align-items:center}.local-label{font-size:10px;color:#9299a2}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid #dde3e2;border-radius:7px;padding:12px 19px;font-weight:500;font-size:12px;white-space:nowrap}.button.primary{background:var(--green);color:white;border-color:var(--green);box-shadow:0 3px 6px #16705b14}.button.primary>span{font-size:18px}.button.small{font-size:10px;padding:9px 13px}.connection-dot{width:6px;height:6px;background:#b9bfc5;border-radius:50%}.connected .connection-dot{background:#279a6f}section{padding:32px 37px 0;max-width:1650px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 26px}.eyebrow{font-size:8px;letter-spacing:2px;color:#8f9d97;font-weight:600;margin-bottom:9px}h1{font-size:27px;font-weight:600;letter-spacing:-.7px;margin:0 0 9px}.heading p{font-size:11px;color:#959aa2;margin:0}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:23px}.studio-main{min-width:0}.song-bar{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;padding:18px 22px;gap:13px}.song-art{width:41px;height:41px;display:grid;place-items:center;background:#eef2e9;border:1px solid #e5eadf;font-family:serif;color:#768468;font-size:28px;border-radius:7px}.song-title h2{font-size:15px;margin:0 0 5px;font-weight:600}.song-title p{font-size:9px;color:#99a0a7;margin:0}.badge{font-size:9px;padding:3px 7px;background:#f4f6ee;border:1px solid #e7eada;border-radius:4px;color:#939d78;margin-left:6px}.icon-button{border:0;background:none;font-size:22px;color:#7e8992;width:32px;height:32px;display:grid;place-items:center;border-radius:5px}.song-bar>.icon-button{margin-left:auto}.piano-stage{background:#19252b;overflow:hidden;position:relative}.stage-top{height:45px;display:flex;justify-content:space-between;align-items:center;color:#89999e;font-size:9px;padding:0 21px;background:#1d292f}.live-dot{display:inline-block;width:5px;height:5px;background:#6b9e88;border-radius:50%;margin-right:6px}.legend{display:flex;align-items:center;gap:6px}.legend i{display:inline-block;width:6px;height:6px;border-radius:2px;margin-left:12px}.left{background:#c1a36b}.right{background:#70b599}.roll-wrap{height:284px;position:relative}canvas{width:100%;height:100%;display:block}.stage-start{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#19252b00,#19252bb0 20%,#19252bb0 80%,#19252b00);color:#e1e9e5}.play-circle{height:35px;width:35px;display:grid;place-items:center;background:#ffffff08;border:1px solid #ffffff14;border-radius:50%;color:#8ebaa6;font-size:22px}.stage-start h3{font-size:17px;font-weight:500;margin:14px 0 5px}.stage-start p{font-size:10px;color:#8d9da0;margin:5px}.stage-start button{background:#88bca5;border:0;border-radius:6px;padding:10px 25px;margin:17px 0 15px;font-size:11px;color:#193b2e}.stage-start button span{margin-left:20px}.stage-start small{font-size:8px;color:#697b80}.hit-line{height:3px;background:#89c6a6;box-shadow:0 0 13px #a2f0ba80;position:relative;z-index:2}.keyboard{height:94px;position:relative;margin:0 12px;touch-action:none}.key{position:absolute;border:1px solid #c8ced0;border-radius:0 0 3px 3px;background:linear-gradient(#fcfdfc,#e8ebea);top:0;height:100%;padding:0;color:#9ba6a4;font-size:7px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-shadow:inset 0 -4px 0 #c6cdca}.key.black{height:61%;background:linear-gradient(90deg,#1a2023,#323c3f,#1b2225);border-color:#151c1e;z-index:2;box-shadow:inset 0 -3px 0 #0e1518;color:#778b85}.key.pressed,.key.target{background:linear-gradient(#8bc6a9,#5b9d7e);color:#fff;box-shadow:inset 0 -4px 0 #43816d}.key.bad{background:#d88b7c}.keyboard-caption{height:26px;padding:0 17px;display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#6a7d80}.transport{height:68px;background:#fff;display:flex;gap:13px;align-items:center;padding:0 20px;border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px}.play-button{border:0;border-radius:50%;background:#27866c;color:#fff;width:34px;height:34px;font-size:12px;flex-shrink:0}.time{font-size:10px;color:#9ba3ab;font-variant-numeric:tabular-nums}.transport input{flex:1;min-width:30px}.transport .icon-button{font-size:19px;width:25px}input[type=range]{height:3px;accent-color:#368f71}.settings-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 0;font-size:10px;color:#969da7}.settings-strip>div{display:flex;align-items:center;gap:13px}.settings-strip input[type=range]{width:75px}.settings-strip b{color:#64726d;font-size:11px}.settings-strip b small{font-size:8px;color:#a5acae;font-weight:400}.divider{width:1px;height:14px;background:#e0e5e7}select{border:1px solid #e2e7e7;padding:6px 8px;border-radius:5px;background:white;color:#68766f;font-size:10px}.settings-strip select{margin-left:6px;border:0;background:none}.check{display:flex;align-items:center;gap:6px}.check input{accent-color:var(--green);width:13px;height:13px;margin:0}.tip{display:flex;align-items:center;gap:11px;padding:11px 15px;border:1px solid #e8ece6;background:#f0f3ee;border-radius:6px;color:#9aa594;font-size:9px}.tip>span{font-size:18px;color:#8eab7c}.tip p{line-height:1.9;margin:0}.tip strong{color:#798c72;font-weight:500}.tip button{margin-left:auto;border:0;background:none;color:#a7b39f}.practice-panel{padding:23px 19px;background:#fff;border:1px solid var(--line);border-radius:11px;align-self:start}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title h3{font-size:12px;margin:0;font-weight:600}.panel-title>span{font-size:8px;color:#b3b8bd}.mode{width:100%;border:1px solid #e8ebee;background:#fff;display:flex;align-items:center;gap:11px;border-radius:7px;padding:14px 12px;text-align:left;margin-top:10px}.mode.selected{border-color:#81b49f;background:#f1f7f3}.mode-symbol{font-size:25px;color:#a1a9b1}.mode.selected .mode-symbol{color:#5b947b}.mode strong{font-size:11px;font-weight:600}.mode small{display:block;font-size:8px;color:#9ba6a1;margin-top:6px}.radio{margin-left:auto;border:1px solid #d4dbd7;width:12px;height:12px;border-radius:50%}.selected .radio{border:4px solid #3f8a6b}.rollback{margin-top:17px;font-size:9px;color:#909b97}.rollback select{margin-top:11px;margin-left:18px;padding:5px 11px;font-size:9px;background:#fafbfa}.panel-divider{height:1px;background:#eef0f0;margin:22px 0}.panel-title .session-live{font-size:8px;background:#f0f7f2;padding:3px 6px;color:#6b9e7d;border-radius:3px}.accuracy{width:138px;height:138px;position:relative;margin:0 auto 16px}.accuracy svg{width:100%;height:100%;transform:rotate(-90deg)}.accuracy circle{fill:none;stroke:#388f74;stroke-width:7;stroke-dasharray:371;stroke-dashoffset:371;stroke-linecap:round;transition:stroke-dashoffset .3s}.accuracy .ring-bg{stroke:#edf1ef;stroke-dashoffset:0}.accuracy>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.accuracy b{font-size:34px;letter-spacing:-1px;font-weight:500}.accuracy b small{font-size:12px;color:#919b96;margin-left:3px}.accuracy span{font-size:9px;color:#a0aaa5;margin-top:5px}.metrics{display:flex;justify-content:space-around;text-align:center}.metrics b{display:block;font-size:19px;font-weight:500;margin-bottom:6px}.metrics span{font-size:9px;color:#a0a8ac}.stat-dot{display:inline-block;width:4px;height:4px;border-radius:50%;margin-right:4px}.green{background:#66a18a}.red{background:#d2988e}.gray{background:#b5bec3}.streak{margin-top:23px;padding:13px 0;display:flex;justify-content:space-between;font-size:9px;color:#929f99;border-bottom:1px solid #edf0ee}.streak strong{font-size:12px;color:#616d67}.streak small{font-size:9px;font-weight:400}.measure-progress{margin-top:18px;font-size:9px;color:#9fa8a4}.measure-progress>div{display:flex;justify-content:space-between}.measure-progress strong{font-size:9px;font-weight:500;color:#8a9690}progress{width:100%;height:4px;margin-top:11px;border:0;border-radius:5px;overflow:hidden;background:#edf1ef}progress::-webkit-progress-bar{background:#edf1ef}progress::-webkit-progress-value{background:#70a98e}.midi-hint{display:flex;gap:10px;align-items:center;background:#f7f8f8;border-radius:6px;margin-top:21px;padding:10px;color:#8e9c95}.midi-hint>span{font-size:21px}.midi-hint p{font-size:9px;line-height:1.8;margin:0}.midi-hint small{font-size:8px;color:#a5aeaa}footer{font-size:8px;letter-spacing:1px;color:#b0b8b7;text-align:center;padding:25px}footer span{margin:0 9px;color:#94ac9b}dialog{width:720px;max-width:94vw;max-height:90vh;border:1px solid #e2e9e4;border-radius:16px;padding:28px;color:var(--ink);box-shadow:0 24px 100px #132e2740}dialog::backdrop{background:#10282088;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-heading h2{font-size:23px;margin:5px 0}.muted{color:#89968f;font-size:11px;line-height:1.9}.upload{display:flex;flex-direction:column;align-items:center;gap:13px;background:#f6f9f6;border:1px dashed #acc5b4;border-radius:10px;padding:30px 15px;margin:25px 0;cursor:pointer}.upload>span{font-size:30px;color:#6d9e85}.upload strong{font-size:13px;font-weight:500}.upload small{font-size:10px;color:#9ca99f}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.image-review{display:flex;gap:20px;border-top:1px solid var(--line);padding:20px 0}.image-review img{width:42%;object-fit:contain;max-height:220px;background:#f6f6f6}.image-review h3{font-size:13px}.image-review p{font-size:11px;color:#8a968d;line-height:1.8}.image-review .button{display:block;margin-top:12px}.editor-header{display:flex;justify-content:space-between;align-items:center}#import-title{width:100%;padding:10px;border:1px solid #dfe6e0;border-radius:6px;margin:10px 0}.note-table-wrap{max-height:260px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 5px;font-size:11px;border-bottom:1px solid #edf1ed}th{color:#8d9c91;font-weight:500}td input{width:85px;padding:5px;border:1px solid #e2e9e3;border-radius:4px}.remove-note{border:0;background:none;color:#ba8b7f}.help-content p{line-height:2;color:#7d8d83;font-size:12px}.help-content h3{font-size:14px;margin-top:24px}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.song-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px}.song-card .song-art{width:55px;height:55px}.song-card h3{font-size:18px;margin:20px 0 8px}.song-card p{font-size:11px;color:#98a39d}.song-card .button{margin-top:15px;width:100%}.history-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.history-card h3{font-size:14px;margin:0 0 7px}.history-card p{font-size:10px;color:#96a098;margin:0}.history-card strong{font-size:25px;color:#3c8f72}.empty{padding:60px;background:#fff;border:1px dashed #d6e0d8;border-radius:10px;text-align:center;color:#93a297}.report-score{text-align:center;padding:25px}.report-score b{font-size:70px;font-weight:500;color:#35846c}.report-score p{color:#98a69e}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;background:#f5f8f5;border-radius:9px;padding:20px}.report-grid b{font-size:25px;display:block}.report-grid span{display:block;margin-top:8px;font-size:11px;color:#8f9e94}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);padding:12px 24px;background:#253e34;color:#f4f8f5;font-size:12px;border-radius:8px;box-shadow:0 6px 30px #132b3030;opacity:0;pointer-events:none;transition:.25s;z-index:10;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(min-width:1500px){.roll-wrap{height:370px}.keyboard{height:115px}.practice-panel{padding:26px}.studio-layout{grid-template-columns:minmax(0,1fr) 285px}.accuracy{height:165px;width:165px}.mode{padding:18px 12px}}@media(max-width:1150px){.sidebar{width:176px;padding:28px 16px}main{margin-left:176px}section{padding:28px 22px 0}header{padding:0 22px}.studio-layout{grid-template-columns:minmax(0,1fr) 223px;gap:15px}.practice-panel{padding:18px 14px}.settings-strip{flex-wrap:wrap;gap:14px}.settings-strip .divider{display:none}.local-label{display:none}.badge{display:none}.roll-wrap{height:290px}.transport{gap:8px;padding:0 12px}}@media(max-width:850px){.sidebar{width:72px;padding:25px 12px}.brand{justify-content:center}.brand>span:last-child,.workspace-tag,.sidebar-note,.profile,.nav i{display:none}.nav{font-size:0;padding:10px;justify-content:center;margin-top:10px}.nav>span{font-size:21px}.sidebar nav{margin-top:35px}main{margin-left:72px}.studio-layout{grid-template-columns:1fr}.practice-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.practice-panel .panel-title,.practice-panel .panel-divider,.accuracy,.metrics,.streak,.measure-progress,.midi-hint{grid-column:1/-1}.practice-panel .panel-divider{margin:8px 0}.rollback{grid-column:1/-1}.mode{margin:0}.accuracy{margin-top:-6px}.metrics{margin-top:-10px}.heading h1{font-size:23px}.keyboard{min-width:650px}.piano-stage{overflow-x:auto}.keyboard-caption{min-width:650px}.roll-wrap,.stage-top,.hit-line{min-width:674px}.studio-main{overflow:hidden}}@media(max-width:520px){header{padding:0 14px;height:65px}.breadcrumb{font-size:9px}.breadcrumb span{margin:0 5px}section{padding:25px 14px 0}.heading{align-items:flex-start;gap:14px;flex-direction:column}.heading h1{font-size:22px}.eyebrow{font-size:7px}.header-actions .button{font-size:9px;padding:8px}.song-bar{padding:15px}.tip{font-size:9px}.settings-strip{font-size:9px}.transport .time{font-size:8px}.image-review{flex-direction:column}.image-review img{width:100%}td input{width:56px}.mode{padding:12px 8px;gap:6px}.mode-symbol{display:none}dialog{padding:20px}.history-card{gap:10px}.history-card strong{font-size:20px}}
/* Keep the visual anchor fixed while notes retrace their path. */
.hit-line{transition:background .25s,box-shadow .25s}.piano-stage.rewinding .hit-line{background:#c7ac76;box-shadow:0 0 9px #c7ac7640}.piano-stage.rewinding .live-dot{background:#c7ac76}
.heading-actions{display:flex;gap:10px;align-items:center}.upload-list{display:grid;gap:7px;margin:0 0 15px}.upload-item{display:flex;align-items:center;gap:10px;background:#f5f8f6;border:1px solid #e3ebe5;border-radius:7px;padding:8px 12px}.file-symbol{font-size:9px;color:#3e866a;background:#e5f1e8;border-radius:4px;padding:6px}.file-name{min-width:0;flex:1;overflow-wrap:anywhere;font-size:11px}.file-name small{display:block;color:#98a69c;font-size:9px;margin-top:3px}.upload-item .icon-button{font-size:16px}.recognition-warnings{background:#f9f6e9;border:1px solid #e7dfbc;padding:15px;border-radius:8px;font-size:11px;color:#8c7b4c;line-height:1.8}.recognition-warnings p{margin:6px 0}.recognition-warnings ul{padding-left:20px;margin-bottom:0}.image-review>div{min-width:0}.image-review label{display:block;margin:8px 0}.score-search-form{display:flex;gap:10px;margin:22px 0}.score-search-form input{min-width:0;flex:1;border:1px solid #d9e5dc;border-radius:7px;padding:12px;font-size:12px}.search-results{display:grid;gap:14px;margin-top:15px}.version-card{border:1px solid #dee8e0;border-radius:10px;padding:20px;background:#fcfdfb}.version-label{color:#5e8f73;font-size:10px;letter-spacing:1px}.version-label span{float:right;letter-spacing:0;font-size:9px;color:#97a69b}.version-card h3{font-size:17px;margin:12px 0}.version-card>p{font-size:11px;color:#84958a;line-height:1.8}.version-card a{color:#388361;font-size:11px;text-decoration:none}.version-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.preview-progress{display:flex;align-items:center;gap:12px}.preview-progress progress{margin:0;flex:1}.preview-progress small{font-size:9px;color:#95a497}.song-source{display:block;font-size:10px;color:#6b987b;margin-top:10px;overflow-wrap:anywhere}@media(max-width:520px){.heading-actions{width:100%;flex-wrap:wrap}.score-search-form{flex-direction:column}.version-actions{flex-direction:column}.upload-item{padding:8px;gap:5px}.upload-item .icon-button{width:25px}}
.sync-banner{padding:14px 16px;background:#edf5f0;border:1px solid #dce9df;border-radius:8px;font-size:11px;color:#628371;margin:0 0 16px;line-height:1.9}.sync-banner .button{margin-left:10px}.sync-banner a,.draft-card a,#original-files a{color:#298168}.cloud-note{color:#599978!important;font-size:10px!important}.original-option{padding:16px;background:#f2f7f3;border:1px solid #dce9df;border-radius:8px;margin-top:20px}.original-option .check{font-size:13px;color:#3f755a}.original-option p{font-size:10px;color:#82998a;line-height:1.8;margin:10px 0 0}.draft-heading{margin:35px 0 16px}.draft-heading h2{font-size:18px}.draft-heading p{font-size:11px;color:#91a096}.draft-card{display:flex;justify-content:space-between;align-items:center;gap:15px;background:white;border:1px solid #e1e9e3;padding:18px;border-radius:9px;margin-bottom:10px}.draft-card strong{font-size:12px;overflow-wrap:anywhere}.draft-card p{font-size:10px;color:#95a398}.draft-card>div:last-child{display:flex;gap:8px;flex-shrink:0}#original-files{padding:12px 0}#original-files a{font-size:12px}#original-files small{font-size:10px;color:#9ba79f}@media(max-width:600px){.draft-card{align-items:flex-start;flex-direction:column}.dialog-actions{flex-wrap:wrap}.sync-banner .button{margin:8px 0 0}}