:root{--bg:#fff;--fg:#1a1a1a;--muted:#667;--accent:#0b5cff;--border:#d8dbe2;color:var(--fg);font-family:-apple-system,PingFang TC,Noto Sans TC,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}button{font:inherit;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;padding:10px 16px}button:disabled{opacity:.5;cursor:default}button.ghost{color:var(--accent);border-color:#0000}.library{max-width:720px;margin:0 auto;padding:24px 16px}.library h1{margin-bottom:4px}.subtitle{color:var(--muted);margin-top:0}.new-song{gap:8px;margin:16px 0;display:flex}.new-song input[type=url]{font:inherit;border:1px solid var(--border);border-radius:8px;flex:1;min-width:0;padding:10px 12px}.new-song>button{white-space:nowrap}.job-progress,.job-done,.job-error{border-radius:8px;margin:8px 0;padding:10px 12px}.job-progress{background:#eef4ff}.job-done{background:#ecf9ef}.job-error{background:#fdeeee}.spinner{border:2px solid var(--accent);vertical-align:-2px;border-top-color:#0000;border-radius:50%;width:14px;height:14px;margin-right:8px;animation:.9s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.song-list-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.sort-control{color:var(--muted);align-items:center;gap:6px;font-size:.9em;display:flex}.sort-control select{font:inherit;border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px 8px}.playlist-head{align-items:center;gap:8px;margin:4px 0 12px;display:flex;position:relative}.playlist-head h3{margin:0}.playlist-count{color:var(--muted);font-size:.85em}.playlist-more{color:var(--muted);flex:none}.playlist-head-menu{top:calc(100% + 4px);left:0;right:auto}.search-bar{align-items:center;gap:8px;margin:12px 0;display:flex;position:relative}.search-bar input{font:inherit;border:1px solid var(--border);border-radius:8px;flex:1;min-width:0;padding:10px 12px}.search-clear{color:var(--muted);background:0 0;border:none;padding:6px 8px;position:absolute;right:6px}.tabs-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;margin-bottom:12px;padding-bottom:4px;display:flex;overflow-x:auto}.tabs-row::-webkit-scrollbar{display:none}.chip{border:1px solid var(--border);color:var(--fg);white-space:nowrap;background:#fff;border-radius:999px;flex:none;padding:8px 14px;font-size:.9em}.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}.chip-add{color:var(--accent);border-style:dashed}.song-list{margin:0;padding:0;list-style:none}.song-list li+li{margin-top:8px}.song-item{text-align:left;justify-content:space-between;align-items:baseline;gap:12px;width:100%;display:flex}.song-title{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;font-weight:600;overflow:hidden}.song-meta{color:var(--muted);white-space:nowrap;flex:none;font-size:.85em}.empty{color:var(--muted)}.song-row{align-items:stretch;gap:8px;display:flex}.song-row .song-item{flex:1;align-items:center;min-width:0}.song-thumb{object-fit:cover;border-radius:4px;flex:none;width:64px;height:36px}.song-thumb-fallback{background:#eef1f5;justify-content:center;align-items:center;font-size:18px;display:inline-flex}.song-more-wrap{flex:none;align-items:stretch;display:flex;position:relative}.song-more{color:var(--muted);flex:none}.playlist-picker{z-index:10;border:1px solid var(--border);background:#fff;border-radius:8px;flex-direction:column;min-width:160px;max-height:240px;padding:4px;display:flex;position:absolute;top:calc(100% + 4px);right:0;overflow-y:auto;box-shadow:0 8px 24px #00000026}.playlist-picker-item{text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:6px;padding:8px 10px;overflow:hidden}.playlist-picker-item:hover{background:#eef1f5}.playlist-picker-danger{color:#b3261e}.playlist-picker-back{color:var(--muted)}.playlist-picker-add{color:var(--accent);border-bottom:1px solid var(--border);border-radius:0;margin-bottom:4px}.drag-handle{border:1px solid var(--border);color:var(--muted);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border-radius:8px;flex:none;align-items:center;padding:0 12px;display:flex}.song-row.dragging{opacity:.9;z-index:2;position:relative;box-shadow:0 4px 16px #0000002e}.song-row.dragging .drag-handle{cursor:grabbing;background:#eef3ff}.badge-warn{color:#b26a00;vertical-align:1px;background:#fff3e0;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:.75em;font-weight:400}.feedback-section{margin-top:24px}.feedback-embed{border:1px solid var(--border);border-radius:8px;margin-top:12px;overflow:hidden}.feedback-embed iframe{border:none;width:100%;height:70vh;max-height:900px;display:block}.player{flex-direction:column;height:100dvh;display:flex}.player-header{border-bottom:1px solid var(--border);z-index:10;background:var(--bg);padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));align-items:center;gap:12px;display:flex;position:sticky;top:0}.player-header h2{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1rem;overflow:hidden}.player-title{cursor:pointer;border-radius:4px}.player-title:hover{background:#f2f4f8}.gear-btn{padding:10px 14px;font-size:1.3em;line-height:1}.score-scroll{-webkit-overflow-scrolling:touch;flex:1;padding:0 8px;position:relative;overflow:hidden auto}.score-inner{position:relative}.edit-highlight{border:2px solid var(--accent);pointer-events:none;z-index:2;background:#0b5cff0f;border-radius:4px;position:absolute}.measure-editor{border-top:2px solid var(--accent);background:#fbfcff;flex-direction:column;max-height:46vh;padding:8px 12px 10px;display:flex;box-shadow:0 -4px 16px #00000014}.me-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;display:flex}.me-nav{align-items:center;gap:6px;display:flex}.me-nav strong{text-align:center;min-width:64px}.me-nav button{padding:8px 12px}.me-hint{color:var(--muted);font-size:.8em}.me-cancel{color:#b3261e;margin-left:auto;font-weight:600}.me-close{font-weight:600}.me-grid-scroll{-webkit-overflow-scrolling:touch;min-height:0;overflow:auto}.me-grid{border-collapse:collapse}.me-grid th,.me-grid td{text-align:center;padding:1px}.me-grid td.beat-start,.me-grid th.beat-start{border-left:2px solid #c9cfdb}.me-rowlabel{white-space:nowrap;z-index:1;background:#fbfcff;font-size:.82em;font-weight:600;position:sticky;left:0;text-align:right!important;padding-right:8px!important}.beat-head{color:var(--fg);background:0 0;border:none;padding:4px 8px;font-weight:700}.beat-head:disabled{opacity:1;color:var(--fg)}.beat-head sup{color:var(--accent)}.hidden-badge{color:#b26a00;vertical-align:2px;cursor:help;background:#fff3e0;border-radius:999px;margin-left:3px;padding:0 5px;font-size:.68em;font-weight:600}.sub-label{color:#b6bcc9;font-size:.75em}.me-cell{background:#fff;border:1px solid #e3e7ee;border-radius:8px;width:42px;height:42px;padding:0;font-size:1.1rem;font-weight:700;line-height:1}.me-cell:active{transform:scale(.92)}.me-cell.filled{color:#fff;background:#1f2430;border-color:#1f2430}@media (width<=700px){.me-cell{width:34px;height:30px}.me-head{gap:5px;margin-bottom:5px}.me-nav{gap:3px}.me-nav strong{white-space:nowrap;min-width:0;font-size:.9em}.me-nav button{padding:6px 8px}.me-head .toggle{white-space:nowrap;padding:6px 8px;font-size:.85em}.me-cancel,.me-close{padding:6px 8px}.beat-head{padding:2px 6px}.me-hint{display:none}.song-row .song-item{flex-wrap:wrap;row-gap:2px}.song-item .song-meta{flex-basis:100%}.chip{padding:8px 12px;font-size:.85em}.playlist-picker{min-width:140px}.song-more{padding-left:10px;padding-right:10px}.drag-handle{padding:0 8px}.song-row{gap:5px}}.ab-highlight{pointer-events:none;background:#0b5cff1a;border-top:2px solid #0b5cff73;border-bottom:2px solid #0b5cff73;position:absolute}.header-right{align-items:center;gap:8px;margin-left:auto;display:flex}.ab-hint{color:var(--accent);font-size:.85em}.settings-bar{border-bottom:1px solid var(--border);background:#fafbfc;flex-wrap:wrap;align-items:center;gap:20px;padding:8px 14px;display:flex}.settings-bar label{color:var(--muted);align-items:center;gap:8px;font-size:.9em;display:flex}.settings-bar select{font:inherit;border-radius:6px;padding:6px 8px}.meter-progress{color:inherit;white-space:nowrap;background:#eef4ff;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:.85em;display:inline-flex}.meter-progress:before{content:"";border:2px solid var(--accent);border-top-color:#0000;border-radius:50%;width:10px;height:10px;animation:.9s linear infinite spin;display:inline-block}button.toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}.speed{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:.9em;display:flex}.speed input[type=range]{flex:none;width:90px;min-width:90px}.speed-label{white-space:nowrap}.speed-val{text-align:right;min-width:40px}.controls{padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:#fafbfc;flex-wrap:wrap;align-items:center;gap:10px;display:flex}.play-btn{width:54px;height:44px;font-size:1.3rem;line-height:1}.controls input[type=range]{min-width:160px;accent-color:var(--accent);flex:1}.time{font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;min-width:44px}.tracks{gap:6px;display:flex}.track.active{background:var(--accent);color:#fff;border-color:var(--accent)}.controls-secondary{display:contents}.ctrl-toggle,.player.focus .player-header,.player.focus .settings-bar,.player.focus .controls,.player.focus .measure-editor{display:none}.focus-exit,.focus-play{border:1px solid var(--border);z-index:20;background:#ffffffd9;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;padding:0;display:flex;position:fixed;box-shadow:0 2px 12px #0000002e}.focus-exit{top:calc(12px + env(safe-area-inset-top));font-size:1rem;right:12px}.focus-play{bottom:calc(16px + env(safe-area-inset-bottom));font-size:1.3rem;left:16px}@media (width>=701px){.focus-btn{order:1}}@media (width<=700px),(pointer:coarse){input[type=range]{appearance:none;background:0 0;height:36px}input[type=range]::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:none;border-radius:50%;width:28px;height:28px;margin-top:-12px}input[type=range]::-moz-range-track{background:var(--border);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:28px;height:28px}}@media (width<=700px){.controls{padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px}.controls input[type=range]{min-width:70px}.controls .time{min-width:40px}.play-btn{width:46px;height:40px}.ctrl-toggle{white-space:nowrap;padding:8px 10px;font-size:.9em;display:inline-block}.focus-btn{padding:8px 10px;font-size:.9em}.controls-secondary{display:none}.controls-secondary.open{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}.controls-secondary.open button{padding:8px 10px;font-size:.9em}}.edit-panel{border-top:1px solid var(--border);background:#fffdf5;max-height:40vh;padding:10px 14px;overflow-y:auto}.edit-panel-head{align-items:center;gap:12px;margin-bottom:8px;display:flex}.edit-panel-head button:last-child{margin-left:auto}.edit-add{border-bottom:1px dashed var(--border);flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;padding:8px 0;display:flex}.edit-add label{color:var(--muted);align-items:center;gap:4px;font-size:.9em;display:flex}.edit-add select{font:inherit;border-radius:6px;padding:6px}.edit-notes{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.note-chip{font-variant-numeric:tabular-nums;padding:8px 10px;font-size:.85em}.note-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}.edit-actions{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.edit-actions-label{color:var(--muted);font-size:.9em}.edit-actions button{padding:8px 10px;font-size:.9em}.edit-actions .danger{color:#b3261e;border-color:#e6b8b5}.vel-edit{color:var(--muted);align-items:center;gap:4px;font-size:.9em;display:flex}.vel-edit input{width:56px;font:inherit;border:1px solid var(--border);border-radius:6px;padding:6px}.export-group{color:var(--muted);align-items:center;gap:10px;font-size:.9em;display:flex}.export-group a{color:var(--accent);text-decoration:none}.print-footer,.print-score{display:none}@media print{.player-header,.settings-bar,.controls,.edit-panel,.ab-highlight,.measure-editor,.focus-exit,.focus-play,.score-scroll img{display:none!important}.player,.score-scroll{height:auto;overflow:visible}body.print-paged .score-scroll{display:none!important}body.print-paged .print-score{display:block}.print-score [id^=osmdCanvasPage]{break-after:page;page-break-after:always;break-inside:avoid}.print-score [id^=osmdCanvasPage]:last-child{break-after:auto;page-break-after:auto}.print-score svg{width:96%;height:auto;margin:0 auto;display:block}.print-footer{text-align:center;color:#888;font-size:10px;display:block;position:fixed;bottom:0;left:0;right:0}}.page-center{flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100dvh;display:flex}.load-panel{flex-direction:column;align-items:center;gap:10px;width:min(360px,80vw);display:flex}.load-panel p{margin:0}.load-bar{background:#e8ebf1;border-radius:999px;width:100%;height:8px;overflow:hidden}.load-bar-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .15s ease-out}.load-detail{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82em}.gate h1,.gate .subtitle{margin:0}.gate-form{gap:8px;display:flex}.gate-form input{font:inherit;border:1px solid var(--border);text-align:center;letter-spacing:1px;border-radius:8px;width:220px;padding:12px 14px;font-size:1.1rem}.gate-hint{color:var(--muted);font-size:.85em}.quota-badge{color:var(--accent);white-space:nowrap;background:#eef4ff;border-radius:999px;margin-left:10px;padding:2px 10px;font-size:.85em;display:inline-block}@media (width<=700px){.tracks{justify-content:center;width:100%}}.score-rendering{z-index:5;color:#fff;pointer-events:none;background:#0b5cffe6;border-radius:999px;width:fit-content;margin:8px auto 0;padding:6px 14px;font-size:.85em;position:sticky;top:8px}.score-rendering.error{pointer-events:auto;background:#b3261e}