:root{color:#d9e0e4;font-synthesis:none;text-rendering:optimizelegibility;color-scheme:dark;--shell:#101519;--panel:#151b20;--panel-strong:#1b2228;--border:#2c363d;--border-strong:#40505a;--text:#e2e8eb;--muted:#8e9ca5;--accent:#45e0b1;--accent-ink:#061d16;--danger:#ff8f7f;background:#101519;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,input,select{font:inherit;letter-spacing:0}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,.control-help>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{background:var(--shell);grid-template-rows:58px minmax(0,1fr) 30px;width:100%;height:100dvh;display:grid}.topbar{z-index:10;border-bottom:1px solid var(--border);background:#12181c;grid-template-columns:minmax(180px,1fr) auto auto auto auto auto;align-items:center;gap:24px;padding:0 14px 0 12px;display:grid}.brand-block{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark{border-radius:6px;width:34px;height:34px}.brand-block h1{color:var(--text);margin:0;font-size:15px;font-weight:700;line-height:1.1}.brand-block span{color:var(--muted);margin-top:3px;font-size:10px;line-height:1;display:block}.privacy-note{color:#9ba9b1;white-space:nowrap;align-items:center;gap:7px;font-size:11px;display:flex}.privacy-note svg{color:var(--accent)}.primary-action,.help-action,.view-actions button{cursor:pointer;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:7px;min-height:32px;font-size:12px;font-weight:650;display:inline-flex}.help-action{border:1px solid var(--border);color:#aeb9bf;background:var(--panel-strong);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;gap:6px;min-height:32px;padding:0 8px;font-size:11px;display:inline-flex}.help-action:hover{border-color:var(--border-strong);color:var(--text)}.primary-action{color:var(--accent-ink);background:var(--accent);padding:0 13px}.primary-action:hover{background:#69e7c1}.sample-select,.language-control select,.control-select{border:1px solid var(--border);color:#b8c3c9;background:var(--panel-strong);cursor:pointer;border-radius:5px;min-height:32px;font-size:11px}.language-control{color:#9ba9b1;align-items:center;gap:6px;display:inline-flex}.language-control svg{color:var(--accent);flex:none}.language-control select{max-width:104px;padding:0 22px 0 8px}.sample-select{max-width:142px;padding:0 27px 0 10px}.control-select{width:100%;padding:0 9px}.recording-controls .field-label{margin-top:14px}.recording-controls h2+.field-label{margin-top:0}.recording-warning{color:#d8c184;background:#292515;border:1px solid #695a33;border-radius:5px;grid-template-columns:16px minmax(0,1fr);gap:7px;margin:0 0 14px;padding:9px;font-size:10px;line-height:1.4;display:grid}.recording-warning svg{margin-top:1px}.recording-topic-select{font-family:SFMono-Regular,Consolas,monospace}.recording-topic-select[aria-describedby]{border-color:var(--accent);box-shadow:0 0 0 1px #44b4a533}.recording-topic-guidance{color:#8fd5ca;margin:7px 0 0;font-size:10px;line-height:1.4}.recording-schema{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin:7px 0 0;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;overflow:hidden}.workspace{grid-template-columns:274px minmax(0,1fr);min-height:0;display:grid}.control-panel{border-right:1px solid var(--border);background:var(--panel);scrollbar-width:thin;min-height:0;overflow:auto}.panel-section{border-bottom:1px solid var(--border);padding:16px 15px}.panel-section h2,.field-label{color:#82919a;text-transform:uppercase;margin:0 0 11px;font-size:10px;font-weight:750;line-height:1;display:block}.file-facts,.bounds-list{gap:8px;margin:0;display:grid}.file-facts div,.bounds-list div{grid-template-columns:58px minmax(0,1fr);align-items:baseline;gap:8px;display:grid}.file-facts dt,.bounds-list dt{color:var(--muted);font-size:11px}.file-facts dd,.bounds-list dd{min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;margin:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.35;overflow:hidden}.range-label{color:#b9c3c8;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:11px;display:flex;position:relative}.range-label output{color:var(--muted);font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.label-with-help,.field-label-with-help{align-items:center;gap:5px;display:inline-flex}.field-label-with-help{width:100%;position:relative}.field-label-with-help label{cursor:pointer}.control-help{color:var(--muted);text-align:left;text-transform:none;font-size:10px;font-weight:400;line-height:1.4;display:inline-block;position:static}.control-help>button{width:18px;height:18px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.control-help:hover>button,.control-help>button:focus-visible{color:var(--accent);background:#202a30}.control-help-popover{z-index:20;border:1px solid var(--border-strong);color:#bec8cd;letter-spacing:0;opacity:0;pointer-events:none;visibility:hidden;background:#20282e;border-radius:5px;width:min(236px,100%);padding:10px 11px;position:absolute;top:23px;left:0;box-shadow:0 8px 22px #00000059}.control-help:hover .control-help-popover,.control-help>button:focus-visible+.control-help-popover{opacity:1;visibility:visible}@media (hover:none){.control-help:focus-within .control-help-popover{opacity:1;visibility:visible}}input[type=range]{width:100%;height:4px;accent-color:var(--accent);cursor:pointer;margin:5px 0 19px}.field-label{margin-top:16px}.segmented-control{border:1px solid var(--border);background:#101519;border-radius:5px;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:hidden}.segmented-control.color-control{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-control button{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);color:#99a7af;cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:30px;padding:0 7px;font-size:10px;display:flex}.segmented-control button:nth-child(2n){border-right:0}.segmented-control button:nth-last-child(-n+2){border-bottom:0}.segmented-control.color-control button:nth-last-child(2){border-bottom:1px solid var(--border)}.segmented-control.color-control button:last-child{border-bottom:0;border-right:0;grid-column:1/-1}.segmented-control:not(.color-control) button{border-bottom:0}.segmented-control button.active{color:var(--text);background:#283239;box-shadow:inset 0 0 0 1px #52616a}.segmented-control button:disabled{color:#536068;cursor:not-allowed}.swatch{border:1px solid #6e7a81;border-radius:2px;width:10px;height:10px}.swatch-dark{background:#0a0d10}.swatch-light{background:#e9edf0}.view-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.view-actions button{border-color:var(--border);color:#b7c1c7;background:var(--panel-strong)}.view-actions button:hover:not(:disabled){border-color:var(--border-strong);color:var(--text);background:#222b31}.view-actions .clear-button{color:#cfaaa4;grid-column:1/-1}.view-actions button:disabled{opacity:.4;cursor:not-allowed}.bounds-section{border-bottom:0}.bounds-list div{grid-template-columns:36px minmax(0,1fr)}.viewport-shell{background:#0a0d10;min-width:0;min-height:0;position:relative;overflow:hidden}.viewer-stage,.viewer-canvas{width:100%;height:100%;display:block}.viewer-canvas:focus{outline:none}.empty-state,.loading-state{color:#adb8be;backdrop-filter:blur(5px);background:#0c1013d6;border:1px dashed #45535c;border-radius:6px;flex-direction:column;align-items:center;min-width:230px;padding:25px 30px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-state{cursor:pointer}.empty-state:hover{border-color:var(--accent);color:var(--text)}.empty-state svg{color:var(--accent);margin-bottom:13px}.empty-state strong,.loading-state strong,.drop-state strong{font-size:13px;line-height:1.3}.empty-state span,.loading-state span{color:var(--muted);margin-top:5px;font-size:10px}.loading-state{border-style:solid}.topic-prompt{width:min(360px,100% - 32px);color:var(--text);backdrop-filter:blur(5px);background:#0c1315f0;border:1px solid #426c68;border-radius:6px;grid-template-columns:24px minmax(0,1fr);gap:6px 11px;padding:17px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 35px #0000004d}.topic-prompt>svg{color:var(--accent);margin-top:1px}.topic-prompt div{flex-direction:column;gap:4px;min-width:0;display:flex}.topic-prompt strong{font-size:13px;line-height:1.3}.topic-prompt span{color:var(--muted);font-size:10px;line-height:1.45}.topic-prompt button{color:#bce8e1;cursor:pointer;background:#17332f;border:1px solid #487e77;border-radius:4px;grid-column:2;justify-self:start;min-height:30px;padding:0 11px;font-size:10px;font-weight:700}.topic-prompt button:hover,.topic-prompt button:focus-visible{border-color:var(--accent);color:#e7faf6;background:#1c403a}.loading-indicator{border:2px solid #3d494f;border-top-color:var(--accent);border-radius:50%;width:22px;height:22px;margin:0 0 13px;animation:.8s linear infinite spin}.progress-value{color:var(--accent);margin-bottom:10px;font-family:SFMono-Regular,Consolas,monospace;font-size:18px}.loading-filename{text-overflow:ellipsis;white-space:nowrap;max-width:280px;overflow:hidden}.loading-state progress{width:100%;height:4px;accent-color:var(--accent);border:0;margin-top:12px}.cancel-load{border:1px solid var(--border-strong);color:#b8c3c9;background:var(--panel-strong);cursor:pointer;border-radius:5px;align-items:center;gap:6px;min-height:29px;margin-top:14px;padding:0 10px;font-size:10px;display:inline-flex}.cancel-load:hover{color:var(--text);border-color:#667781}.drop-state{z-index:4;border:2px solid var(--accent);color:var(--accent);pointer-events:none;background:#081915e0;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:10px}.error-banner{color:#f2d4cf;background:#321e1c;border:1px solid #7f4a45;border-radius:6px;align-items:flex-start;width:min(390px,100% - 28px);padding:12px 12px 12px 14px;display:flex;position:absolute;bottom:14px;right:14px;box-shadow:0 8px 24px #0000004d}.recording-timeline{z-index:5;min-height:64px;color:var(--text);backdrop-filter:blur(6px);background:#12181cf0;border:1px solid #3d4a52;border-radius:6px;grid-template-columns:auto minmax(160px,1fr) auto 8px;align-items:center;gap:13px;padding:8px 10px;display:grid;position:absolute;bottom:12px;left:12px;right:12px;box-shadow:0 9px 26px #00000052}.timeline-controls{grid-template-columns:repeat(3,32px);gap:5px;display:grid}.timeline-controls button{border:1px solid var(--border);color:#b6c1c7;background:var(--panel-strong);cursor:pointer;border-radius:5px;place-items:center;width:32px;height:32px;padding:0;display:grid}.timeline-controls button:hover{border-color:var(--border-strong);color:var(--text)}.timeline-controls .playback-toggle{color:var(--accent-ink);border-color:var(--accent);background:var(--accent)}.timeline-track{min-width:0}.timeline-readout{justify-content:space-between;align-items:baseline;gap:12px;min-width:0;font-family:SFMono-Regular,Consolas,monospace;display:flex}.timeline-readout strong{flex:none;font-size:10px}.timeline-readout span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.timeline-track input[type=range]{height:4px;margin:9px 0 2px;display:block}.timeline-speed{color:var(--muted);text-transform:uppercase;gap:4px;font-size:9px;display:grid}.timeline-speed select{border:1px solid var(--border);width:62px;height:29px;color:var(--text);background:var(--panel-strong);cursor:pointer;border-radius:5px;padding:0 6px;font-size:10px}.timeline-activity{background:#55636b;border-radius:50%;width:6px;height:6px}.timeline-activity.is-active{background:var(--accent);box-shadow:0 0 0 3px #45e0b126}.recording-timeline~.error-banner{bottom:88px}.error-banner div{gap:4px;display:grid}.error-banner strong{font-size:11px}.error-banner span{color:#d7aaa4;font-size:10px;line-height:1.4}.error-banner button{color:#d7aaa4;cursor:pointer;background:0 0;border:0;width:26px;height:26px;margin:-5px -5px 0 auto;font-size:19px}.statusbar{border-top:1px solid var(--border);color:#839199;background:#11171b;align-items:center;gap:8px;min-width:0;padding:0 12px;font-size:10px;display:flex}.status-dot{background:#687780;border-radius:50%;flex:none;width:6px;height:6px}.status-loaded{background:var(--accent)}.status-loading{background:#ffd271}.status-error{background:var(--danger)}.status-separator{background:var(--border);width:1px;height:11px}.status-fps{color:#a5b0b6;margin-left:auto;font-family:SFMono-Regular,Consolas,monospace}.status-repository{color:#a5b0b6;border-radius:4px;flex:none;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.status-repository:hover{color:var(--text);background:var(--panel-strong)}.status-repository:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.help-backdrop{z-index:100;background:#030608b8;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.help-dialog{border:1px solid var(--border-strong);width:min(760px,100%);max-height:min(690px,100dvh - 36px);color:var(--text);background:#151b20;border-radius:6px;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden;box-shadow:0 18px 54px #0000007a}.help-dialog>header{border-bottom:1px solid var(--border);background:#181f24;justify-content:space-between;align-items:flex-start;gap:20px;padding:17px 18px 15px;display:flex}.help-dialog h2,.help-dialog h3,.help-dialog p{margin:0}.help-dialog h2{font-size:16px;line-height:1.2}.help-dialog header p{color:var(--muted);margin-top:5px;font-size:11px}.help-dialog header button{border:1px solid var(--border);color:#aab6bc;background:var(--panel-strong);cursor:pointer;border-radius:5px;flex:none;place-items:center;width:30px;height:30px;display:grid}.help-dialog header button:hover{border-color:var(--border-strong);color:var(--text)}.help-content{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:auto}.help-content section{border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0;padding:17px 18px 19px}.help-content section:nth-child(2n){border-right:0}.help-content section:nth-last-child(-n+2){border-bottom:0}.help-content h3{color:#92a0a8;text-transform:uppercase;margin-bottom:12px;font-size:10px;font-weight:750}.help-content ul{color:#bac4c9;gap:7px;margin:0;padding-left:17px;font-size:11px;line-height:1.45;display:grid}.help-content dl{gap:8px;margin:0;display:grid}.help-content dl div{grid-template-columns:minmax(94px,.7fr) minmax(0,1.3fr);gap:10px;display:grid}.help-content dt{color:#d5dde1;font-size:11px;font-weight:650}.help-content dd,.help-content section>p{color:#aab6bc;margin:0;font-size:11px;line-height:1.45}.help-content .coordinate-note{border-top:1px solid var(--border);margin-top:13px;padding-top:12px}.help-content .mcap-help-section{border-bottom:0;border-right:0;grid-column:1/-1}.coordinate-note strong{color:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=720px){.app-shell{grid-template-rows:54px minmax(0,1fr) 28px}.topbar{grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:7px}.privacy-note,.brand-block span{display:none}.workspace{grid-template-rows:minmax(310px,1fr) auto;grid-template-columns:1fr;overflow:auto}.viewport-shell{grid-row:1;min-height:310px}.control-panel{border-top:1px solid var(--border);border-right:0;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:visible}.panel-section{border-right:1px solid var(--border)}.panel-section:nth-child(2n){border-right:0}.statusbar{z-index:5;position:relative}.help-content{grid-template-columns:1fr}.help-content section,.help-content section:nth-child(2n),.help-content section:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--border)}.help-content section:last-child{border-bottom:0}.recording-timeline{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.timeline-activity,.timeline-readout span{display:none}}@media (width<=440px){.primary-action,.help-action{width:34px;padding:0;font-size:0}.sample-select{width:82px}.language-control{gap:0}.language-control svg{display:none}.language-control select{width:70px}.control-panel{grid-template-columns:1fr}.panel-section{border-right:0}.empty-state{min-width:210px;padding:22px}.recording-timeline{grid-template-columns:1fr auto;padding:8px;bottom:7px;left:7px;right:7px}.timeline-controls{grid-area:1/1}.timeline-speed{grid-area:1/2}.timeline-track{grid-area:2/1/auto/-1}}