@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary: #1e3a5f;--secondary: #2563eb;--accent: #059669;--bg: #f8fafc;--surface: #ffffff;--fg: #0f172a;--muted: #f1f3f5;--muted-fg: #64748b;--faint: #94a3b8;--border: #e4e7eb;--danger: #dc2626;--canvas: #eef1f5;--note-bg: #fffdf0;--note-border: #e2c04a;--shadow: 0 4px 24px rgba(15, 23, 42, .12);--radius: 10px}:root[data-theme=dark]{--primary: #60a5fa;--secondary: #3b82f6;--accent: #34d399;--bg: #0b1220;--surface: #131c2e;--fg: #e8edf5;--muted: #1c2840;--muted-fg: #94a3b8;--faint: #64748b;--border: #263449;--danger: #f87171;--canvas: #0a0f1a;--note-bg: #2a2410;--note-border: #b8932f;--shadow: 0 4px 24px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-size:15px}button{font-family:inherit;cursor:pointer}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-size:14px;font-weight:500;transition:background .15s,border-color .15s,transform .15s}.btn:hover{background:var(--muted)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{filter:brightness(1.08);background:var(--primary)}.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 50%,transparent);color:var(--danger)}.btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted-fg);transition:background .15s}.icon-btn:hover{background:var(--muted)}input,textarea{font-family:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;width:100%}input:focus,textarea:focus,button:focus-visible,.option:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 35%,transparent);border-color:var(--secondary)}label{display:block;font-size:12px;font-weight:500;color:var(--muted-fg);margin-bottom:6px}.login-wrap{height:100%;display:grid;place-items:center;padding:24px}.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em}.brand .dot{width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:15px}.error{color:var(--danger);font-size:13px;margin-top:10px}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.topbar .brand{font-size:16px}.score-name{font-size:13px;color:var(--muted-fg);font-weight:500;display:inline-block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.top-actions{display:flex;align-items:center;gap:8px}.saved{font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;color:var(--accent)}.saved.dirty{color:var(--faint)}.saved .led{width:7px;height:7px;border-radius:50%;background:currentColor}.modes{display:flex;gap:4px;background:var(--muted);padding:4px;border-radius:10px}.mode{padding:6px 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted-fg);border:1px solid transparent;background:transparent}.mode.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px #0f172a14}.share-wrap{position:relative}.btn.shared{border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}.share-pop{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);z-index:100;animation:pop-in .16s ease-out}@keyframes pop-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.share-pop h4{font-size:14px;font-weight:600;margin-bottom:8px}.muted-note{font-size:12.5px;line-height:1.5;color:var(--muted-fg);margin-bottom:12px}.muted-note.tiny{font-size:11.5px;margin:8px 0 0}.share-link{display:flex;gap:6px;align-items:center}.share-link input{font-size:12.5px;padding:8px 10px;background:var(--muted);color:var(--muted-fg)}.share-link .btn{flex-shrink:0;padding:8px 13px}.share-actions{display:flex;gap:8px;margin-top:10px}.share-actions .btn{flex:1;justify-content:center;padding:8px 12px;font-size:13px}.share-tag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);letter-spacing:.01em}.library{max-width:980px;margin:0 auto;padding:32px 24px;width:100%;overflow-y:auto}.library-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.library-head h1{font-size:24px;font-weight:700;letter-spacing:-.02em}.score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}.score-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .15s,box-shadow .15s;cursor:pointer;position:relative}.score-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.score-card .thumb{height:150px;background:var(--canvas);display:grid;place-items:center;color:var(--faint);font-size:30px}.score-card .meta{padding:13px 14px}.score-card .meta h3{font-size:15px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-card .meta p{font-size:12px;color:var(--muted-fg);display:flex;gap:8px;align-items:center}.card-del{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:7px;border:none;background:#0f172a8c;color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .15s}.score-card:hover .card-del{opacity:1}.empty{text-align:center;padding:80px 20px;color:var(--muted-fg)}.empty h2{font-size:18px;color:var(--fg);margin-bottom:8px;font-weight:600}.tag-yt{font-size:10px;font-weight:600;color:var(--secondary);background:color-mix(in srgb,var(--secondary) 12%,transparent);padding:1px 6px;border-radius:10px}.work{flex:1;display:flex;min-height:0}.viewer-work{flex:1;display:grid;grid-template-columns:320px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"media stage" "notes stage";min-height:0}.toolbar{display:flex;align-items:center;gap:14px;padding:9px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}.group{display:flex;gap:4px;background:var(--muted);padding:4px;border-radius:10px}.tool{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted-fg);border:1px solid transparent;background:transparent}.tool.active{background:var(--surface);color:var(--primary);border-color:var(--border);box-shadow:0 1px 2px #0f172a0f}.sep{width:1px;height:24px;background:var(--border)}.swatches{display:flex;gap:7px;align-items:center}.sw{width:20px;height:20px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);padding:0}.sw.sel{box-shadow:0 0 0 2px var(--primary)}.zoom{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted-fg);font-variant-numeric:tabular-nums}.zoom .icon-btn{width:28px;height:28px}.pill{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--muted-fg);background:var(--muted);padding:6px 12px;border-radius:8px;font-variant-numeric:tabular-nums}.pill button{border:none;background:transparent;color:var(--fg);font-size:15px;line-height:1}.pill button:disabled{color:var(--faint);cursor:default}.stamp-select{width:auto;padding:7px 10px;font-size:13px}.sync-btn{margin-left:auto}.rail{width:132px;background:var(--surface);border-right:1px solid var(--border);padding:12px 10px;overflow-y:auto;flex-shrink:0}.rail .lbl{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--faint);margin-bottom:10px}.thumb-btn{display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:6px;margin-bottom:10px;background:#fff;overflow:hidden;position:relative;line-height:0}.thumb-btn.active{border-color:var(--secondary);box-shadow:0 0 0 2px color-mix(in srgb,var(--secondary) 25%,transparent)}.thumb-btn canvas{width:100%;display:block}.thumb-btn .n{position:absolute;bottom:3px;right:5px;font-size:9px;font-weight:600;color:var(--faint);background:#ffffffd9;padding:0 3px;border-radius:3px;line-height:1.3}.stage{flex:1;grid-area:stage;background:var(--canvas);display:flex;flex-direction:column;align-items:center;overflow:auto;padding:24px;min-width:0}.page-wrap{position:relative;box-shadow:var(--shadow);background:#fff;flex-shrink:0}.page-wrap canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0}.overlay.note-cursor{cursor:text}.overlay.draw-cursor{cursor:crosshair}.ann{position:absolute;box-sizing:border-box}.ann.selected{outline:2px solid var(--secondary);outline-offset:2px}.ann.spotlight{animation:spotlight-in 1.2s cubic-bezier(.22,1,.36,1) both}@keyframes spotlight-in{0%{opacity:0;filter:drop-shadow(0 0 2px var(--spot, transparent))}30%{opacity:1;filter:drop-shadow(0 0 13px var(--spot, transparent))}to{opacity:1;filter:drop-shadow(0 0 0 transparent)}}@media(prefers-reduced-motion:reduce){.ann.spotlight{animation:none}}.ann-note-anchor.selected{outline:none}.ann-dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2.5px var(--surface),0 1px 4px #0f172a59;z-index:2}.ann-leader{position:absolute;left:0;top:0;width:22px;height:2px;transform:translateY(-50%);opacity:.6;border-radius:2px;z-index:1}.ann-note-card{position:absolute;left:22px;top:0;transform:translateY(-50%);background:color-mix(in srgb,var(--note-bg) 80%,transparent);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);border:1px solid color-mix(in srgb,var(--note-border) 75%,transparent);border-left:3px solid var(--note-border);border-radius:7px;padding:7px 11px;font-size:13px;font-weight:500;line-height:1.4;width:max-content;max-width:210px;min-width:40px;box-shadow:0 4px 12px #0f172a1f;color:var(--fg);white-space:pre-wrap;transition:background .14s ease,box-shadow .14s ease,border-color .14s ease}.ann-note-anchor:hover .ann-note-card{background:var(--note-bg);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);border-color:var(--note-border);box-shadow:0 6px 18px #0f172a38;z-index:5}.ann-note-anchor.selected .ann-note-card{background:var(--note-bg);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);outline:2px solid var(--secondary);outline-offset:2px;z-index:5}.ann-pin-card{background:var(--note-bg);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);border-color:var(--note-border);box-shadow:0 6px 18px #0f172a38;z-index:5}.ann-pin-badge{position:absolute;left:0;top:0;transform:translate(-50%,-50%);min-width:21px;height:21px;padding:0 6px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;cursor:pointer;border-radius:11px;font-size:11.5px;font-weight:700;line-height:1;box-shadow:0 0 0 2.5px var(--surface),0 1px 5px #0f172a59;z-index:2}.ann-pin-badge:after{content:"";position:absolute;top:-11px;right:-11px;bottom:-11px;left:-11px;border-radius:50%}.ann-highlight{border-radius:3px}.ann-circle{border-radius:50%;background:transparent}.ann-arrow svg{overflow:visible}.ann-stamp{font-weight:700;line-height:1;display:grid;place-items:center}.ann-stamp.letter{border:2px solid currentColor;border-radius:4px;padding:1px 7px;font-size:16px}.drag-rect{position:absolute;border:1px solid var(--secondary);background:color-mix(in srgb,var(--secondary) 15%,transparent);pointer-events:none}.panel{width:248px;background:var(--surface);border-left:1px solid var(--border);padding:16px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}.panel-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding-bottom:24px;color:var(--faint)}.panel-empty-glyph{font-size:28px;line-height:1;opacity:.5}.panel-empty .muted-note{max-width:180px}.panel h4{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-bottom:14px}.field{margin-bottom:16px}.field .val{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.panel textarea{resize:vertical;min-height:70px}.muted-note{font-size:13px;color:var(--muted-fg);line-height:1.5}.kbd{font-family:inherit;font-size:11px;font-weight:600;color:var(--fg);background:var(--muted);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;white-space:nowrap}.spread{display:flex;gap:18px;align-items:flex-start;justify-content:center}.video-box{margin:14px;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16 / 9}.video-box>div,.video-box iframe{width:100%;height:100%;border:0}.media{grid-area:media;background:var(--surface);border-right:1px solid var(--border)}.notes-panel{grid-area:notes;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:hidden}.cue-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:7px;font-size:13px}.cue-row.active{border-color:var(--secondary);background:color-mix(in srgb,var(--secondary) 8%,transparent)}.cue-row .t{font-variant-numeric:tabular-nums;color:var(--muted-fg)}.list-scroll{overflow-y:auto;flex:1;padding:4px 14px 14px}.section-head{padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);margin-top:8px}.section-head h4{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}.badge{font-size:11px;font-weight:600;color:var(--secondary);background:color-mix(in srgb,var(--secondary) 12%,transparent);padding:2px 9px;border-radius:20px}.head-right{display:flex;align-items:center;gap:8px}.seg-mini{display:flex;gap:3px;background:var(--muted);padding:3px;border-radius:8px}.seg-mini button{padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;color:var(--muted-fg);border:none;background:transparent;cursor:pointer}.seg-mini button.on{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px #0f172a14}.ann-card .ann-num{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11.5px;font-weight:700;line-height:1}.ann-card{display:flex;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:9px;background:var(--surface);animation:slidein .25s ease}@keyframes slidein{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.ann-card .tag{width:6px;border-radius:4px;flex-shrink:0}.ann-card .kind{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}.ann-card .body{font-size:12.5px;line-height:1.4;color:var(--fg)}.pageflag{font-size:12px;font-weight:600;color:var(--muted-fg);background:var(--surface);border:1px solid var(--border);padding:6px 14px;border-radius:20px;margin-bottom:16px}.hint{margin-top:14px;font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;text-align:center}@media(max-width:900px){.viewer-work{display:flex;flex-direction:column;overflow-y:auto}.media{border-right:none;border-bottom:1px solid var(--border)}.media .video-box{max-width:560px;margin-inline:auto}.notes-panel{border-right:none;border-top:1px solid var(--border);overflow:visible}.viewer-work .list-scroll{flex:none;overflow:visible}.viewer-work .stage{flex:none;overflow:visible;padding:16px 16px 24px}}.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--secondary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.center{flex:1;display:grid;place-items:center}.skeleton{background:linear-gradient(90deg,var(--muted) 25%,var(--border) 37%,var(--muted) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:var(--shadow);z-index:100;animation:slidein .2s ease}