:root{--bg:#eef0f3;--panel:#fff;--rail:#1f2430;--rail-fg:#aab2c0;--text:#1b1f27;--muted:#6b7280;--line:#e3e6eb;--accent:#2f6fed;--accent-soft:#e6eeff;--danger:#d14343;--radius:10px;--rail-w:56px;--panel-w:300px;color:var(--text);-webkit-tap-highlight-color:transparent;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}textarea,input{-webkit-user-select:text;user-select:text}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}code{background:var(--bg);border-radius:4px;padding:1px 4px;font-size:12px}.app{height:100dvh;display:flex}.sidebar{z-index:30;flex:none;display:flex}.rail{width:var(--rail-w);background:var(--rail);padding:10px 0 max(10px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:6px;display:flex}.rail button{width:40px;height:40px;color:var(--rail-fg);background:0 0;border:0;border-radius:10px;place-items:center;display:grid}.rail button:hover{color:#fff;background:#ffffff14}.rail button.on{color:#fff;background:var(--accent)}.rail .dock{margin-top:auto}.panel{width:var(--panel-w);background:var(--panel);border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.panel header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px 14px 10px 16px;display:flex}.panel h2{margin:0;font-size:15px;font-weight:600}.panel-body{flex-direction:column;gap:12px;padding:14px 16px 20px;display:flex;overflow-y:auto}.btn{border:1px solid var(--line);background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:8px;height:36px;padding:0 12px;display:inline-flex}.btn:hover:not(:disabled){border-color:#c9ced6}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary.on{background:#1d4fb8}.btn.ghost{background:0 0}.btn.danger{color:var(--danger)}.icon-btn{background:0 0;border:1px solid #0000;border-radius:8px;flex:none;place-items:center;width:32px;height:32px;display:grid}.icon-btn:hover:not(:disabled){background:var(--bg)}.icon-btn.on{background:var(--accent-soft);color:var(--accent);border-color:#c8d8ff}.row{gap:8px;display:flex}.row>*{flex:1}.field{flex-direction:column;gap:6px;display:flex}.field>span{color:var(--muted);justify-content:space-between;font-size:12px;font-weight:500;display:flex}.field em{color:var(--text);font-variant-numeric:tabular-nums;font-style:normal}select{height:36px;font:inherit;border:1px solid var(--line);color:var(--text);background:#fff;border-radius:8px;padding:0 10px}input[type=range]{width:100%;accent-color:var(--accent)}.toggle{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.toggle input{display:none}.toggle i{background:#cfd4dc;border-radius:10px;width:36px;height:20px;transition:background .2s;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle input:checked+i{background:var(--accent)}.toggle input:checked+i:after{transform:translate(16px)}.segmented{background:var(--bg);border-radius:8px;padding:3px;display:flex}.segmented button{background:0 0;border:0;border-radius:6px;flex:1;height:30px}.segmented button.on{background:#fff;font-weight:600;box-shadow:0 1px 3px #0000001f}.clip-row{grid-template-columns:56px 1fr 32px;align-items:center;gap:8px;display:grid}.check{align-items:center;gap:6px;font-weight:600;display:flex}.check small{color:var(--muted);font-size:11px;font-weight:400}.hint{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.error{color:var(--danger);margin:0;font-size:12px;line-height:1.5}.annot-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.annot-list button{text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px;display:flex}.annot-list button:hover,.annot-list button.on{background:var(--accent-soft)}.annot-list b{background:var(--rail);color:#fff;border-radius:50%;flex:none;place-items:center;width:22px;height:22px;font-size:11px;display:grid}.annot-list span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.viewport{flex:1;min-width:0;position:relative}.viewport.annotating canvas{cursor:crosshair}.marker{background:var(--rail);color:#fff;border:2px solid #fff;border-radius:50%;place-items:center;width:26px;height:26px;padding:0;font-size:12px;font-weight:700;transition:transform .15s;display:grid;box-shadow:0 2px 8px #00000059}.marker:hover{transform:scale(1.12)}.marker.active{background:var(--accent)}.marker.draggable{cursor:grab;touch-action:none}.marker.draggable:active{cursor:grabbing}.html-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.html-layer .marker,.html-layer .note-anchor{pointer-events:auto}.note-anchor{position:absolute;top:-14px;left:22px}.note-anchor.left{left:auto;right:22px}.note-anchor.up{top:auto;bottom:-14px}.dropzone{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:min(360px,100% - 32px);color:var(--muted);background:#ffffffd9;border:2px dashed #b6bdc8;border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;display:flex;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.dropzone h2{color:var(--text);margin:4px 0 0;font-size:17px}.dropzone p{margin:0 0 8px}.drop-overlay{pointer-events:none;border:3px dashed var(--accent);color:var(--accent);background:#2f6fed14;border-radius:16px;place-items:center;font-size:18px;font-weight:600;display:grid;position:absolute;inset:12px}.loading{background:#fff;border-radius:20px;align-items:center;gap:10px;padding:8px 14px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #00000026}.spinner{border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.pill{pointer-events:none;background:var(--rail);color:#fff;white-space:nowrap;border-radius:20px;padding:8px 14px;font-size:13px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.note-bubble{width:max-content;max-width:240px;max-height:160px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;background:#fffffff5;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.45;overflow-y:auto;box-shadow:0 4px 14px #0003}.note-bubble.empty{color:var(--muted);font-style:italic}.note-editor{border:1px solid var(--line);background:var(--bg);border-radius:10px;flex-direction:column;gap:10px;padding:12px;display:flex}.note-editor header{align-items:center;gap:10px;display:flex}.note-editor h3{flex:1;margin:0;font-size:14px}.note-editor textarea{resize:vertical;width:100%;min-height:80px;font:inherit;color:var(--text);border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px}.note-editor textarea:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}@media (width<=768px){:root{--rail-w:52px}.sidebar{position:relative}.panel{top:8px;left:calc(var(--rail-w) + 8px);width:min(var(--panel-w), calc(100vw - var(--rail-w) - 16px));border:0;border-radius:14px;max-height:calc(100dvh - 16px);position:absolute;box-shadow:0 10px 30px #00000040}.note-bubble{max-width:180px}}