@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 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .08);--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .06);--edge: rgba(0, 0, 0, .1);--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 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);--edge: rgba(255, 255, 255, .1)}*{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;-moz-osx-font-smoothing:grayscale;font-size:15px;text-wrap:pretty}h1,h2,h3,h4{text-wrap:balance}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-property:background,border-color,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.btn:hover:not(:disabled){background:var(--muted)}.btn:active:not(:disabled){scale:.96}.btn:disabled,.icon-btn:disabled{opacity:.45;cursor:not-allowed}.btn-block{width:100%;justify-content:center}.btn-quiet{padding:5px 10px;font-size:12.5px;border-color:transparent;background:transparent;color:var(--muted-fg)}.btn-quiet:hover:not(:disabled){background:var(--muted);color:var(--fg)}.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{position:relative;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-property:background,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.icon-btn:after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}.icon-btn:hover:not(:disabled){background:var(--muted);color:var(--fg)}.icon-btn:active:not(:disabled){scale:.96}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;gap:12px;padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.topbar .brand{font-size:16px;min-width:0;flex:1 1 auto}.score-name{font-size:13px;color:var(--muted-fg);font-weight:500;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-name:before{content:"·";margin-right:6px;color:var(--faint)}.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.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:7px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted-fg);border:1px solid transparent;background:transparent;transition-property:background,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.mode:hover:not(.active){color:var(--fg)}.mode:active{scale:.96}.mode.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.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}.viewer-work.no-media{grid-template-rows:1fr;grid-template-areas:"notes stage"}.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;min-height:32px;padding:7px 11px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted-fg);border:1px solid transparent;background:transparent;transition-property:background,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.tool:hover:not(.active){color:var(--fg)}.tool:active{scale:.96}.tool.active{background:var(--surface);color:var(--primary);border-color:var(--border);box-shadow:var(--shadow-sm)}.tool-glyph{width:14px;text-align:center;line-height:1}.sync-btn>[aria-hidden]{position:relative;left:1px;font-size:11px}.readerbar .btn>[aria-hidden]{position:relative}.pill button:first-of-type{text-indent:1px}.readerbar .btn:first-child>[aria-hidden]{left:1px}.pill button:last-of-type{text-indent:-1px}.readerbar .btn:last-child>[aria-hidden]{right:1px}.sep{width:1px;height:24px;background:var(--border)}.swatches{display:flex;gap:0;align-items:center}.sw{width:40px;height:40px;display:grid;place-items:center;border:none;background:transparent;border-radius:50%;padding:0}.sw-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--faint);transition-property:box-shadow,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.sw:hover .sw-dot{box-shadow:0 0 0 1px var(--faint);scale:1.1}.sw:active .sw-dot{scale:.96}.sw.sel .sw-dot{box-shadow:0 0 0 2px var(--primary)}.swatches.recoloring{border-radius:999px;box-shadow:0 0 0 1px color-mix(in srgb,var(--secondary) 45%,transparent)}.zoom{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted-fg);font-variant-numeric:tabular-nums}.zoom-val{min-width:44px;text-align:center}.zoom .icon-btn{width:28px;height:28px}.pill{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--muted-fg);background:var(--muted);padding:4px 6px;border-radius:10px;font-variant-numeric:tabular-nums}.pill button{position:relative;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:6px;background:transparent;color:var(--fg);font-size:15px;line-height:1;transition-property:background,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.pill button:after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}.pill button:hover:not(:disabled){background:var(--surface)}.pill button:active:not(:disabled){scale:.96}.pill button:disabled{color:var(--faint);cursor:default}.pill span{padding:0 4px}.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;transition-property:border-color,box-shadow,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.thumb-btn:hover:not(.active){border-color:var(--faint);box-shadow:var(--shadow-sm)}.thumb-btn:active{scale:.96}.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;font-variant-numeric:tabular-nums}.stage{flex:1;background:var(--canvas);display:flex;flex-direction:column;overflow:auto;padding:24px;min-width:0;min-height:0}.page-wrap{position:relative;outline:1px solid var(--edge);outline-offset:-1px;box-shadow:var(--shadow);background:#fff;flex-shrink:0;margin:auto}.canvas-col{flex:1;position:relative;display:flex;min-width:0}.stage-hint{position:absolute;left:50%;bottom:16px;max-width:calc(100% - 32px);padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--fg) 88%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:var(--bg);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:var(--shadow);opacity:0;translate:-50% 6px;scale:.96;transition-property:opacity,translate,scale;transition-duration:.12s;transition-timing-function:cubic-bezier(.4,0,1,1)}.stage-hint.on{opacity:1;translate:-50% 0;scale:1;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1)}.page-wrap canvas{display:block}.page-wrap canvas.page-raster-buffer{display:none}.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-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-anchor.card-to-left .ann-leader{left:-22px}.ann-note-card{position:absolute;left:22px;top:0;transform:translateY(-50%);background:color-mix(in srgb,var(--note-bg) 52%,transparent);border:1px solid color-mix(in srgb,var(--note-border) 75%,transparent);border-left:3px solid var(--note-border);border-radius:7px;padding:.54em .85em;font-size:13px;font-weight:500;line-height:1.4;width:max-content;max-width:210px;min-width:40px;box-shadow:var(--shadow-sm);color:var(--fg);text-shadow:0 0 2px color-mix(in srgb,var(--note-bg) 80%,transparent);white-space:pre-wrap;text-wrap:pretty;overflow:hidden;transition-property:background,box-shadow,border-color,text-shadow;transition-duration:.14s;transition-timing-function:cubic-bezier(.2,0,0,1)}.ann-note-card.to-left{left:auto;right:22px}.ann-resize{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:nwse-resize;touch-action:none;z-index:6}.ann-resize:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-right:2px solid var(--secondary);border-bottom:2px solid var(--secondary);border-bottom-right-radius:4px;opacity:.8;transition-property:opacity,inset;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.ann-resize:hover:before,.ann-resize:focus-visible:before{opacity:1;top:1px;right:1px;bottom:1px;left:1px}.ann-resize:focus-visible{outline:none}.ann-resize:after{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px}.ann-note-anchor:hover .ann-note-card{background:var(--note-bg);border-color:var(--note-border);box-shadow:var(--shadow);text-shadow:none;z-index:5}.ann-note-anchor.selected .ann-note-card{background:var(--note-bg);outline:2px solid var(--secondary);outline-offset:2px;text-shadow:none;z-index:5}.ann-pin-card{background:var(--note-bg);border-color:var(--note-border);box-shadow:var(--shadow);text-shadow:none;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{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12px 0 18px;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}.panel .muted-note{margin-bottom:14px}.shortcuts{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--border)}.shortcut-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted-fg)}.shortcut-row dt{flex-shrink:0;min-width:42px}.panel-list{margin-top:auto;padding-top:16px}.panel-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px solid var(--border)}.panel-list-head h4{margin-bottom:0}.ann-list{list-style:none;margin-top:8px;max-height:34vh;overflow-y:auto}.ann-row{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;color:var(--fg);transition-property:background,border-color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.ann-row:hover{background:var(--muted)}.ann-row:active{scale:.98}.ann-row.on{border-color:var(--secondary);background:color-mix(in srgb,var(--secondary) 8%,transparent)}.ann-row-tag{width:5px;align-self:stretch;border-radius:3px;flex-shrink:0}.ann-row-text{min-width:0}.ann-row-kind{display:block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}.ann-row-body{display:block;font-size:12.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}.viewer-stage{grid-area:stage;display:flex;flex-direction:column;min-width:0;min-height:0}.readerbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}.readerbar-status{display:flex;align-items:center;gap:12px;min-width:150px;justify-content:center}.readerbar-page{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.readerbar-page .of{color:var(--muted-fg);font-weight:500}.readerbar-sync{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}.readerbar-sync .led{width:7px;height:7px;border-radius:50%;background:currentColor}.viewer-nomedia{padding-bottom:12px;border-bottom:1px solid var(--border)}.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;font-variant-numeric:tabular-nums}.head-right{display:flex;align-items:center;gap:8px}.seg-mini{display:flex;gap:2px;background:var(--muted);padding:3px;border-radius:8px}.seg-mini button{min-height:26px;padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;color:var(--muted-fg);border:none;background:transparent;cursor:pointer;transition-property:background,color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.seg-mini button:hover:not(.on){color:var(--fg)}.seg-mini button:active{scale:.96}.seg-mini button.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.readerbar .seg-mini{padding:3px;border-radius:11px}.readerbar .seg-mini button{position:relative;min-height:34px;padding:8px 14px;border-radius:8px;font-size:12px}.readerbar .seg-mini button:after{content:"";position:absolute;left:0;right:0;top:50%;height:40px;transform:translateY(-50%)}.readerbar .btn{min-height:40px}.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;font-variant-numeric:tabular-nums}.ann-card{display:flex;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:9px;background:var(--surface)}@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)}@media(max-width:900px){.viewer-work,.viewer-work.no-media{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;padding-bottom:calc(88px + env(safe-area-inset-bottom))}.viewer-work .stage{flex:none;overflow:visible;padding:16px 16px 20px}.viewer-work .viewer-stage{flex:none}.readerbar{position:fixed;left:0;right:0;bottom:0;z-index:20;gap:8px;justify-content:space-between;border-top:1px solid var(--border);box-shadow:0 -2px 12px #0f172a14}.readerbar .btn{min-height:44px}.readerbar-status{min-width:0}.viewer-work{padding-bottom:calc(74px + env(safe-area-inset-bottom))}}@media(max-width:640px){.topbar{padding:9px 12px;gap:8px}.topbar .brand-name{display:none}.topbar .score-name:before{content:none}.saved-text{display:none}.mode{padding:6px 10px}}@media(max-width:767px){.work{flex-direction:column;overflow-y:auto}.rail{display:none}.canvas-col{flex:none}.work .stage{overflow:visible;padding:16px}.panel{width:auto;border-left:none;border-top:1px solid var(--border);overflow:visible}.panel-list{margin-top:16px}.ann-list{max-height:none}.sync-btn{margin-left:0}.toolbar{gap:10px;padding:8px 12px}}@media(min-width:768px)and (max-width:1024px){.viewer-work{grid-template-columns:264px 1fr}.media .video-box{margin:10px}.rail{display:none}.panel{width:210px;padding:14px}.work .stage,.viewer-stage .stage{padding:16px}.readerbar{gap:12px;padding:8px 12px}.readerbar .btn{min-height:44px}.ann-list{max-height:28vh}}@media(max-width:1120px){.tool-label{display:none}.tool{padding:7px 9px}.tool-glyph{font-size:14px}}.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}.center-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align: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}