:root{color:#243652;font-synthesis:none;background:#f2f4f7;font-family:system-ui,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,select,.upload{font:inherit;color:#243652;cursor:pointer;background:#fff;border:1px solid #cad3e0;border-radius:9px;min-height:44px;padding:10px 14px}button:hover,.upload:hover{background:#e8eef8}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,.upload:focus-within{outline-offset:2px;outline:3px solid #567cca}[hidden]{display:none!important}header{background:#fff;border-bottom:1px solid #dce2ec;align-items:center;gap:12px;padding:16px 24px;display:flex}.brand{flex:1;font-family:Georgia,serif;font-size:26px}main{max-width:1000px;margin:auto;padding:70px 26px}h1{font-size:clamp(28px,5vw,44px);font-weight:500}.eyebrow{color:#617795;letter-spacing:3px;font-size:13px}.intro{max-width:700px;margin-bottom:28px;line-height:1.8}.upload{color:#fff;background:#25456d;display:inline-block}.note{color:#64748b;margin-top:40px;font-size:13px;line-height:1.8}.score{border-bottom:1px solid #dce2ec;align-items:center;gap:10px;padding:16px 0;display:flex}.score .open{text-align:left;overflow-wrap:anywhere;flex:1}.score small{color:#617795;margin-top:6px;display:block}#reader{flex-direction:column;height:100dvh;display:flex}#reader header{flex-shrink:0;padding:10px 16px}.heading{flex-direction:column;flex:1;min-width:0;display:flex}#title,#setlist-info{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#setlist-info{color:#617795;font-size:12px}button.primary,button[aria-pressed=true]{color:#fff;background:#25456d;border-color:#25456d}#settings{flex-wrap:wrap;flex-shrink:0;gap:14px;max-height:30dvh;padding:12px 20px;display:flex;overflow:auto}#settings label{align-items:center;gap:6px;display:flex}#settings small{color:#64748b;width:100%}#stage{overscroll-behavior:contain;background:#dfe4ec;outline:none;flex:1;justify-content:center;align-items:center;min-height:0;padding:12px;display:flex;overflow:hidden}#stage[data-mode=width]{scrollbar-gutter:stable;display:block;overflow:auto}#sheet{justify-content:center;align-items:flex-start;gap:14px;display:flex}#stage[data-mode=width] #sheet{display:block}.slot{position:relative}.paper{touch-action:pan-x pan-y;cursor:pointer;background:#fff;margin:0 auto;position:relative;box-shadow:0 4px 22px #24365225}.paper canvas{display:block}.paper canvas.leaving{pointer-events:none;animation:.17s ease-out forwards leave;position:absolute;top:0;left:0}@keyframes leave{to{opacity:0}}.paper.empty{box-shadow:none;cursor:default;background:#eef1f6;border:1px dashed #b9c4d4;justify-content:center;align-items:center;display:flex}.paper.empty:after{content:attr(data-empty);color:#6b7a90;font-size:14px}.slot.pending .paper canvas:not(.leaving){opacity:.35;transition:opacity .2s .15s}.slot.pending:after{content:attr(data-wait);color:#42536b;opacity:0;background:#ffffffe6;border-radius:8px;padding:6px 12px;font-size:13px;animation:.2s .15s forwards appear;position:absolute;top:40%;left:50%;transform:translate(-50%)}@keyframes appear{to{opacity:1}}.badge{z-index:2;color:#42536b;pointer-events:none;opacity:.55;background:#ffffffd9;border:1px solid #d6dde8;border-radius:999px;padding:0 8px;font-size:12px;line-height:1.6;position:absolute;top:6px;left:8px}.badge.fresh{animation:2.4s ease-in forwards settle}@keyframes settle{0%,60%{opacity:1}to{opacity:.55}}.badge.next{color:#1f4f8f;background:#eef4fde6;border-color:#9db8e0}#fullscreen-exit{display:none}#dual[aria-pressed=true]{color:#fff;background:#25456d}.companion #stage{height:100vh}#companion-full{z-index:5;opacity:.85;position:fixed;top:10px;right:10px}html:fullscreen #companion-full{display:none}#companion-hint{color:#fff;pointer-events:none;background:#243652e6;border-radius:10px;max-width:calc(100% - 32px);margin:0;padding:8px 14px;font-size:14px;animation:10s forwards hint;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}@keyframes hint{0%,85%{opacity:1}to{opacity:0;visibility:hidden}}#reader:fullscreen>header{display:none!important}#reader:fullscreen>#settings{display:none!important}#reader:fullscreen #fullscreen-exit{display:inline-block}@media (prefers-reduced-motion:reduce){.paper canvas.leaving{opacity:0;animation:none}}footer{padding:10px 12px max(10px, env(safe-area-inset-bottom));background:#fff;border-top:1px solid #cad3e0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:10px;display:flex}#status{color:#835515;padding:0 20px;font-size:13px}#status:not(:empty){padding:8px 20px}#repeat-status{color:#64748b;font-size:13px}#next-up{color:#1f4f8f;font-size:13px}.section-head{border-bottom:1px solid #dce2ec;justify-content:space-between;align-items:center;gap:12px;margin-top:44px;display:flex}.section-head h2{font-size:20px;font-weight:500}#setlists{color:#64748b;font-size:14px;line-height:1.8}dialog{color:#243652;border:1px solid #cad3e0;border-radius:14px;max-width:min(560px,100vw - 32px);padding:20px 24px;box-shadow:0 18px 60px #24365240}dialog::backdrop{background:#1b273866}dialog h2{margin-top:0;font-size:20px;font-weight:500}dialog label{flex-direction:column;gap:6px;margin:12px 0;display:flex}dialog input{font:inherit;border:1px solid #cad3e0;border-radius:9px;min-height:44px;padding:10px 12px}dialog menu{justify-content:flex-end;gap:10px;margin:18px 0 0;padding:0;display:flex}dialog .row{gap:10px;display:flex}dialog .row select{flex:1;min-width:0}#setlist-items{max-height:40vh;padding-left:22px;overflow:auto}#setlist-items li{align-items:center;gap:6px;padding:4px 0;display:flex}#setlist-items li span{overflow-wrap:anywhere;flex:1}#ink-bar{background:#fbfaf6;border-bottom:1px solid #dce2ec;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px 16px;padding:8px 16px;display:flex}#ink-bar .group{gap:6px;display:flex}#ink-bar .colors button{width:44px;padding:0}#ink-bar [data-color=black]{background:#1d2433}#ink-bar [data-color=red]{background:#c62828}#ink-bar [data-color=blue]{background:#1f5fbf}#ink-bar .colors button[aria-pressed=true]{outline-offset:2px;outline:3px solid #e0a15e}#ink-hint{color:#64748b;flex:1;font-size:13px}.paper svg.ink{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.paper svg.ink .hl{stroke-opacity:.45;mix-blend-mode:multiply}.inking .paper{cursor:crosshair}.inking .paper svg.ink{pointer-events:auto;touch-action:none}.paper .links{pointer-events:none;position:absolute;inset:0}.paper .links .jump{pointer-events:auto;white-space:nowrap;color:#8e5a24;background:#fff6eb;border:1px solid #b06a24;border-radius:999px;min-height:32px;padding:3px 10px;font-size:13px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #24365230}.paper input.ink-text{background:#ffffffe6;border:1px dashed #567cca;border-radius:6px;min-width:9em;padding:2px 6px;font-family:inherit;font-weight:700;position:absolute;transform:translateY(-50%)}.hide-ink .paper svg.ink,.hide-ink .paper .links{display:none}#jump-back{z-index:6;color:#8e5a24;background:#fff6eb;border-color:#b06a24;position:fixed;bottom:84px;left:16px;box-shadow:0 4px 16px #24365230}#stage.dark{background:#11151c}#stage.dark .paper{filter:invert()hue-rotate(180deg);box-shadow:none}#perform-exit{display:none}#reader.performing>header,#reader.performing>#settings,#reader.performing>#ink-bar,#reader.performing>#status,#reader.performing>footer{display:none!important}#reader.performing #perform-exit{z-index:7;opacity:.3;touch-action:none;background:#fff;min-height:36px;padding:4px 12px;font-size:12px;display:block;position:fixed;top:8px;right:8px}#reader.performing #perform-exit.holding{opacity:1;background:linear-gradient(90deg,#e0a15e 0 0) 0/0% 100% no-repeat,#fff;animation:.8s linear forwards hold-exit}@keyframes hold-exit{to{background-size:100% 100%,auto}}#reader.performing #jump-back{bottom:16px}#organizer{z-index:10;background:#f2f4f7;position:fixed;inset:0;overflow:auto}#organizer header{z-index:1;flex-wrap:wrap;position:sticky;top:0}#organizer header strong{flex:1;font-size:18px;font-weight:500}#organizer header label{align-items:center;gap:6px;display:flex}#organizer .hint,#organize-status{color:#64748b;margin:12px 24px 0;font-size:13px}#organize-status:empty{display:none}#thumbs{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px;padding:16px 24px;display:grid}.thumb{background:#fff;border:1px solid #dce2ec;border-radius:12px;flex-direction:column;align-items:center;gap:8px;margin:0;padding:12px;display:flex}.thumb .frame{justify-content:center;align-items:center;min-height:160px;display:flex}.thumb .frame canvas{display:block;box-shadow:0 2px 10px #24365222}.thumb figcaption{color:#42536b;text-align:center;font-size:12px}.thumb-tools{gap:4px;display:flex}.thumb-tools button{min-height:36px;padding:4px 9px}#hidden-title{margin:8px 24px 0;font-size:15px;font-weight:500}#hidden-pages{flex-wrap:wrap;gap:10px;padding:10px 24px 32px;display:flex}.hidden-page{background:#fff;border:1px dashed #b9c4d4;border-radius:10px;align-items:center;gap:8px;padding:6px 6px 6px 12px;font-size:13px;display:flex}.sr-only{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=600px){#reader header{flex-wrap:wrap}.heading{flex-basis:100%;order:-1}#ink-hint{display:none}header{padding:12px}main{padding:30px 18px}.score{flex-wrap:wrap}footer{gap:5px}button,select{padding:8px 10px}}
