/* Auto viewer styles stay inside the inline player, including its dialog. */
.auto-player { color-scheme:dark; --bg:#111111; --panel:#212121; --line:rgba(255,255,255,.14); --muted:#999; --text:#f0f0f0; --accent:#76b900; --gap:4px; }
.auto-player * { box-sizing:border-box; }
.auto-player { margin:0 auto; color:var(--text); background:var(--bg); font:14px/1.5 "NVIDIA-NALA",Arial,Helvetica,sans-serif; }
.auto-player a { color:inherit; text-decoration:none; }
.auto-player button, .auto-player select, .auto-player input { font:inherit; }
.auto-player pre, .auto-player code, .auto-player kbd, .auto-player samp, .auto-player output, .auto-player textarea { font-family:inherit; }
.auto-player button, .auto-player select { color:inherit; }
.auto-player button { cursor:pointer; }
.auto-player button:disabled, .auto-player select:disabled { cursor:default; opacity:.5; }
.auto-player button:focus-visible, .auto-player a:focus-visible, .auto-player select:focus-visible, .auto-player input:focus-visible, .auto-player canvas:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.auto-player .eyebrow { margin:0; color:var(--accent); font-size:10px; font-weight:600; letter-spacing:.08em; }
.auto-player .player { border:1px solid rgba(255,255,255,.13); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.026)),#111111; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.34); }
.auto-player .selection-toolbar { display:flex; gap:18px; padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px) 10px; align-items:center; }
.auto-player .model-toggle { display:flex; gap:clamp(12px,1.6vw,18px); min-width:290px; flex:0 1 420px; }
.auto-player .model-toggle button { flex:1; }
.auto-player .sample-control { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:11px; min-width:0; white-space:nowrap; }
.auto-player .sample-control { flex:0 1 320px; margin-left:auto; }
.auto-player select { min-height:42px; border:1px solid rgba(255,255,255,.24); background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),rgba(8,8,8,.76); border-radius:12px; padding:8px 10px; font-size:12px; color:var(--text); }
.auto-player .sample-control select { width:100%; min-width:0; text-overflow:ellipsis; }
.auto-player .view-toolbar { display:flex; align-items:center; justify-content:flex-end; min-height:42px; padding:4px 16px 10px; }
.auto-player .overlay-controls { display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:10px; color:#b7b7b7; }
.auto-player .overlay-toggle { display:flex; gap:6px; align-items:center; color:#d9edb6; background:rgba(118,185,0,.12); border:1px solid rgba(118,185,0,.42); border-radius:100px; padding:5px 10px; font-size:10px; min-width:78px; }
.auto-player .overlay-toggle[aria-pressed="false"] { color:var(--muted); background:#1d1d1d; border-color:var(--line); }
.auto-player .overlay-indicator { height:5px; width:5px; border-radius:50%; background:var(--accent); }
.auto-player .overlay-toggle[aria-pressed="false"] .overlay-indicator { background:var(--muted); }
.auto-player input[type="range"] { accent-color:var(--accent); color-scheme:normal; height:28px; min-width:20px; cursor:pointer; margin:0 3px; touch-action:none; }
.auto-player #auto-opacity { width:108px; }
.auto-player #auto-opacity-value { min-width:27px; color:var(--text); font-variant-numeric:tabular-nums; }
.auto-player .stage { padding:0 5px 5px; min-width:0; display:flex; justify-content:center; }
.auto-player .sensor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); width:100%; }
.auto-player .sensor-tile { border:0; background:#090909; padding:0; border-radius:4px; overflow:hidden; min-width:0; display:flex; flex-direction:column; text-align:left; position:relative; }
.auto-player button.sensor-tile:hover { box-shadow:inset 0 0 0 1px var(--accent); }
.auto-player .tile-header { position:absolute; z-index:1; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:5px; gap:6px; pointer-events:none; }
.auto-player .tile-header > span:first-child { background:rgba(8,8,8,.7); border:1px solid rgba(255,255,255,.15); border-radius:4px; padding:2px 5px; color:#eee; font-size:9px; font-weight:500; line-height:1.25; }
.auto-player .tile-hint { display:none; }
.auto-player .tile-media { aspect-ratio:16/9; width:100%; min-height:0; position:relative; background:#090909; }
.auto-player .tile-media canvas { display:block; width:100%; height:100%; }
.auto-player .lidar-tile canvas { touch-action:none; cursor:grab; }
.auto-player .lidar-tile canvas:active { cursor:grabbing; }
.auto-player .cloud-corner { position:absolute; bottom:8px; left:8px; display:flex; align-items:center; gap:6px; max-width:calc(100% - 16px); padding:5px 8px; border:1px solid #76b90080; border-radius:5px; background:#111e; color:#edf7df; font-size:12px; font-weight:500; line-height:1.2; pointer-events:none; }
.auto-player .cloud-corner svg { width:18px; height:18px; flex-shrink:0; color:#a4d751; }
.auto-player .cloud-expand, .auto-player .cloud-reset { width:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:6px; font-size:18px; pointer-events:auto; }
.auto-player .cloud-tools { display:flex; gap:5px; }
.auto-player .cloud-status { position:absolute; inset:0; display:grid; place-items:center; background:#090909d9; color:#ccc; font-size:12px; pointer-events:none; }
.auto-player .transport { padding:14px clamp(18px,2.4vw,26px); border-top:1px solid var(--line); background:rgba(8,8,8,.5); }
.auto-player .timeline-line { display:flex; align-items:center; gap:12px; }
.auto-player .play-button, .auto-player .restart-button { flex:0 0 42px; }
.auto-player .clock { min-width:83px; color:rgba(255,255,255,.78); font-size:.75rem; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.auto-player .clock span { color:#888; }
.auto-player #auto-timeline { min-width:20px; flex:1; }
.auto-player .icon-button { flex:0 0 42px; font-size:20px; }
.auto-player .transport-details { display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:flex-end; margin-top:10px; min-height:36px; }
.auto-player .status { flex:1; font-size:10px; color:#aaa; margin:0; }
.auto-player .status.error { color:#ffc492; }
.auto-player .playback-options { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; font-size:12px; color:#b7b7b7; }
.auto-player .step-button { width:36px; height:36px; flex-shrink:0; font-size:20px; line-height:18px; padding:0; }
.auto-player #auto-frame-count { white-space:nowrap; color:rgba(255,255,255,.78); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.auto-player #auto-frame-count span { color:#888; }
.auto-player .loop-option { display:flex; align-items:center; gap:4px; margin:0 5px; }
.auto-player input[type="checkbox"] { accent-color:var(--accent); width:11px; height:11px; }
.auto-player #auto-speed { min-height:32px; padding:3px 7px; font-size:12px; }
.auto-player .viewer-notes { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 20px; color:var(--muted); font-size:10px; margin:12px 1px; }
.auto-player .viewer-notes p { margin:0; }
.auto-player kbd { font:inherit; color:#bbb; }
.auto-player .viewer-notes span { margin:0 5px; }
.auto-player .decoder { position:fixed; left:-10000px; top:0; width:1px; height:1px; pointer-events:none; opacity:0; }
.auto-player .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.auto-player [hidden] { display:none !important; }
.auto-player dialog { width:min(1500px,96vw); max-width:96vw; max-height:94svh; padding:0; overflow:auto; border:1px solid #39434a; border-radius:14px; color:#edf2f5; background:#11171b; box-shadow:0 24px 90px rgba(0,0,0,.65); }
.auto-player dialog::backdrop { background:rgba(0,0,0,.78); }
.auto-player dialog[open] { display:flex; flex-direction:column; }
.auto-player .focus-header { padding:20px 24px; display:flex; gap:20px; align-items:center; border-bottom:1px solid #2c3439; background:#11171b; flex-shrink:0; }
.auto-player .focus-header h2 { margin:3px 0 0; font-size:23px; font-weight:550; letter-spacing:-.025em; }
.auto-player .focus-tools { margin-left:auto; }
.auto-player .focus-body { min-height:0; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); }
.auto-player .focus-media { min-width:0; padding:20px; display:flex; flex-direction:column; justify-content:center; background:#11171b; }
.auto-player #auto-focus-canvas, .auto-player #auto-focus-cloud-host { width:100%; aspect-ratio:16/9; min-height:0; background:#090909; border:1px solid #333; border-radius:5px; }
.auto-player #auto-focus-cloud-host > canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.auto-player .focus-media-caption { margin:9px 1px 0; display:flex; justify-content:space-between; color:#999; font-size:10px; }
.auto-player .prompt-panel { overflow:auto; max-height:calc(94svh - 210px); border-left:1px solid #2c3439; padding:24px; }
.auto-player .prompt-heading { padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.auto-player .prompt-heading h3 { margin:7px 0; color:#eee; font-size:21px; font-weight:500; letter-spacing:-.025em; }
.auto-player .prompt-heading > p:last-child { font-size:12px; line-height:1.65; color:#999; margin:0; }
.auto-player .prompt-segment { border-left:2px solid #444; padding:0 0 0 16px; margin:22px 0 26px; }
.auto-player .prompt-segment.active { border-color:var(--accent); }
.auto-player .prompt-segment header { display:flex; align-items:center; gap:12px; }
.auto-player .prompt-time { color:#b7b7b7; border:1px solid rgba(255,255,255,.24); background:rgba(8,8,8,.5); border-radius:8px; padding:4px 8px; font-size:12px; font-variant-numeric:tabular-nums; }
.auto-player .prompt-segment.active .prompt-time { color:var(--accent); border-color:#517f00; background:#253018; }
.auto-player .segment-current { visibility:hidden; color:#b2d676; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.auto-player .prompt-segment.active .segment-current { visibility:visible; }
.auto-player .prompt-segment p { color:#b7b7b7; font-size:13px; line-height:1.8; margin:11px 0; }
.auto-player .cloud-facts { color:#b7b7b7; font-size:13px; line-height:1.8; padding:12px 0; }
.auto-player .cloud-facts strong { color:#eee; }
.auto-player .notice { padding:20px; }
.auto-player .player:fullscreen { width:100%; height:100%; border:0; border-radius:0; display:flex; flex-direction:column; }
.auto-player .player:fullscreen .stage { flex:1; min-height:0; align-items:center; }
.auto-player .player:fullscreen .selection-toolbar { padding:7px 16px; }
.auto-player .player:fullscreen .view-toolbar { min-height:34px; padding:0 16px 5px; }
.auto-player .player:fullscreen .transport { padding-top:9px; padding-bottom:9px; }
@media (max-width:900px) {
.auto-player .selection-toolbar { gap:12px; }
.auto-player .model-toggle { min-width:250px; }
.auto-player .focus-body { grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr); } }
@media (max-width:700px) {
.auto-player .player { border-radius:12px; }
.auto-player .selection-toolbar { flex-wrap:wrap; padding:10px 10px 4px; gap:10px; }
.auto-player .model-toggle { width:100%; min-width:0; flex-basis:100%; }
.auto-player .sample-control { gap:6px; font-size:10px; }
.auto-player .sample-control select { font-size:11px; padding:7px 5px; }
.auto-player .view-toolbar { padding:6px 10px 8px; }
.auto-player .overlay-controls { gap:7px; font-size:10px; }
.auto-player #auto-opacity { width:85px; }
.auto-player .overlay-toggle { font-size:10px; padding:4px 7px; min-width:73px; }
.auto-player .stage { padding:0 3px 3px; }
.auto-player .sensor-grid { gap:3px; }
.auto-player .tile-header { padding:3px; gap:2px; }
.auto-player .tile-header > span:first-child { font-size:7.5px; padding:2px 3px; }
.auto-player .cloud-corner { bottom:3px; left:3px; gap:4px; max-width:calc(100% - 6px); padding:3px 4px; font-size:10px; }
.auto-player .cloud-corner svg { width:13px; height:13px; }
.auto-player .cloud-tools { gap:2px; }
.auto-player .cloud-tools button { width:24px; height:24px; font-size:16px; padding:0; }
.auto-player .transport { padding:12px; }
.auto-player .timeline-line { gap:8px; }
.auto-player .transport-details { gap:5px; }
.auto-player .status { font-size:9px; }
.auto-player .playback-options { gap:6px; }
.auto-player .loop-option { font-size:9px; margin:0 3px; }
.auto-player .viewer-notes { font-size:9px; margin:10px 1px; }
.auto-player .viewer-notes p:last-child { display:none; }
.auto-player dialog { width:96vw; max-height:96svh; }
.auto-player .focus-header { padding:12px; gap:10px; flex-wrap:wrap; }
.auto-player .focus-header h2 { font-size:20px; }
.auto-player .focus-header .icon-button { margin-left:auto; }
.auto-player .focus-tools { order:3; margin:0; width:100%; }
.auto-player .focus-tools .overlay-controls { justify-content:flex-end; }
.auto-player .focus-body { display:flex; flex-direction:column; overflow:auto; }
.auto-player .focus-media { padding:10px; flex-shrink:0; }
.auto-player .prompt-panel { border-left:0; border-top:1px solid var(--line); max-height:none; overflow:visible; padding:18px; }
.auto-player .prompt-heading h3 { font-size:19px; }
.auto-player .prompt-segment p { font-size:13px; }
.auto-player .focus-media-caption { font-size:9px; }
.auto-player .focus-header .eyebrow { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
.auto-player dialog::backdrop { backdrop-filter:none; } }
.auto-player .icon-button svg, .auto-player .cloud-expand svg { fill:none; }
.auto-player * { scrollbar-color:rgba(118,185,0,.72) rgba(255,255,255,.08); scrollbar-width:thin; }
.auto-player ::-webkit-scrollbar { width:8px; height:8px; }
.auto-player ::-webkit-scrollbar-track { background:rgba(255,255,255,.08); border-radius:999px; }
.auto-player ::-webkit-scrollbar-thumb { background:rgba(118,185,0,.72); border-radius:999px; }
@media (max-width:639px) {
.auto-player .play-button, .auto-player .restart-button, .auto-player .icon-button { flex-basis:36px; }
}


@media (max-width:639px) {
.auto-player .timeline-line { display:grid; grid-template-columns:36px 36px minmax(0,1fr) 36px; gap:8px; }
.auto-player #auto-timeline { grid-column:1 / -1; grid-row:2; width:100%; margin:0; }
.auto-player .clock { grid-column:3; grid-row:1; min-width:0; font-size:.64rem; }
.auto-player #auto-fullscreen { grid-column:4; grid-row:1; }
}