:root{--ink:#293b4c;--muted:#677c8a;--paper:#f8fafb;--line:#cbd5dc;--coral:#b55d6d;--blue:#496f89;--sand:#aa926e;--mono:ui-monospace,"SFMono-Regular",Consolas,monospace;--sans:"Avenir Next",Avenir,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:#e8edef;color:var(--ink);font-family:var(--sans);font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b55d6d;outline-offset:4px}button{border:0}button:disabled{cursor:wait;opacity:.55}button:hover{filter:brightness(.97)}[hidden]{display:none!important}#app{height:100dvh;min-height:500px;overflow:hidden;position:relative}#viewport{position:absolute;inset:0;outline:none;touch-action:none}canvas{display:block;width:100%;height:100%}.topbar{position:absolute;top:26px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:750;font-size:17px;letter-spacing:.14em;line-height:1.1}.brand-sub{display:block;font-size:9px;font-weight:500;letter-spacing:.31em;margin-top:6px}.brand-icon{display:block;width:37px;height:32px;background:#324351;border-radius:9px;position:relative;box-shadow:inset 0 -3px 0 #1f303c}.brand-icon i{position:absolute;left:7px;top:8px;width:16px;height:16px;background:#b75f6c;border-radius:50%;border:2px solid #ce8590}.brand-icon b{position:absolute;right:7px;top:8px;width:3px;height:16px;background:repeating-linear-gradient(#a8b9bd 0 2px,transparent 2px 4px)}.mode-switch{display:flex;gap:4px;background:#f8fafbcc;padding:5px;border:1px solid #ffffffd6;box-shadow:0 4px 18px #2f48590a;border-radius:12px;backdrop-filter:blur(12px)}.mode-switch button{background:transparent;padding:10px 23px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600;transition:background .2s,color .2s}.mode-switch button.active{background:var(--ink);color:white;box-shadow:0 2px 5px #263e4920}.quiet-button{background:#f8fafb9c;border:1px solid #ffffffb3;border-radius:50px;padding:10px 14px;font-family:var(--mono);display:flex;gap:9px;align-items:center}.quiet-button span{font-family:var(--sans);font-size:12px}.intro{position:absolute;left:36px;top:136px;pointer-events:none;transition:opacity .3s}.eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.16em;font-weight:500;color:var(--muted)}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--coral);margin-right:6px;vertical-align:2px}h1{font-size:clamp(25px,2.8vw,42px);font-weight:500;letter-spacing:-.048em;line-height:1.17;margin:17px 0 12px}h1+p{font-size:12px;color:var(--muted);line-height:1.6;margin:0;max-width:250px}.view-actions{position:absolute;right:34px;top:114px;display:flex;gap:7px}.tool-button{display:flex;gap:7px;align-items:center;background:#f8fafbd9;border:1px solid #fff;border-radius:8px;padding:10px 13px;font-size:12px;box-shadow:0 4px 16px #38505c08;backdrop-filter:blur(8px)}.tool-button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}.joint-icon{font-size:18px;line-height:12px}.telemetry{position:absolute;bottom:112px;left:36px;display:flex;align-items:center;gap:22px;padding:18px 24px;background:#f8fafbd9;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:14px;box-shadow:0 8px 30px #28404c08}.telemetry>div{min-width:65px}.metric-label{display:block;font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:.14em;margin-bottom:7px}.telemetry strong{font-weight:500;font-family:var(--mono);font-size:24px;letter-spacing:-.05em}.metric-unit{font-family:var(--mono);font-size:10px;margin-left:5px;color:var(--muted)}.metric-divider{height:33px;width:1px;background:var(--line)}#contact{font-size:11px;font-weight:600;display:block;min-width:90px}.contact-bars{display:flex;gap:4px;margin-top:6px}.contact-bars i{display:block;height:3px;width:17px;background:var(--blue);border-radius:1px;transition:background .12s}.contact-bars i.air{background:#c5a476}.keyboard-controls{position:absolute;bottom:38px;left:36px;right:34px;display:flex;gap:24px;align-items:center;font-size:11px;color:var(--muted)}.keyboard-controls>span{display:flex;align-items:center;gap:4px;white-space:nowrap}kbd{font:9px var(--mono);color:var(--ink);border:1px solid #b8c6ce;min-width:20px;height:22px;padding:3px 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:#f8fafb7d;box-shadow:0 2px 0 #cbd6db;margin-right:1px}.orbit-hint{margin-left:auto;font-size:10px}.scene-caption{position:absolute;bottom:112px;right:36px;display:flex;align-items:center;gap:10px;color:var(--muted);font:8px var(--mono);letter-spacing:.12em}.scale-line{width:30px;height:5px;border:1px solid var(--muted);border-top:0}.scene-caption>span:nth-child(2){opacity:.5}.panel{position:absolute;right:34px;top:172px;width:310px;max-height:calc(100dvh - 320px);overflow:auto;padding:22px;border:1px solid #fff;background:#f8fafbef;backdrop-filter:blur(18px);border-radius:15px;box-shadow:0 12px 50px #1f394719;scrollbar-width:thin}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}h2{font-weight:550;letter-spacing:-.035em;font-size:21px;margin:7px 0 12px}.icon-button{width:28px;height:28px;border-radius:50%;background:transparent;font-size:24px;line-height:1;color:var(--muted)}.panel-copy,.panel p{font-size:11px;color:var(--muted);line-height:1.65}.panel-copy{margin:0 0 20px}.confidence{display:inline-block;border-radius:4px;background:#e5edf2;color:var(--blue);font:8px var(--mono);padding:6px 7px;letter-spacing:.02em}.confidence.inferred{background:#f1ebe0;color:#8c7654}h3{font-size:15px;font-weight:550;line-height:1.4;margin:11px 0 6px}.joint-legend{display:flex;gap:15px;font-size:9px;color:var(--muted);margin:22px 0 14px}.joint-legend span{display:flex;gap:5px;align-items:center}.dot-blue,.dot-sand{width:6px;height:6px;background:var(--blue);border-radius:50%;display:inline-block}.dot-sand{background:var(--sand)}.joint-list{display:flex;flex-wrap:wrap;gap:5px}.joint-list button{font:9px var(--mono);background:#e9eff2;padding:7px 9px;border-radius:4px}.joint-list button.selected{background:var(--blue);color:white}.small-note{font-size:10px!important;line-height:1.65;margin-top:19px;padding-top:14px;border-top:1px solid var(--line)}#joint-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.joint-marker{position:absolute;width:19px;height:19px;border-radius:50%;border:2px solid #fff;background:var(--blue);box-shadow:0 0 0 3px #496f893a;transform:translate(-50%,-50%);pointer-events:auto;font:8px var(--mono);color:white;display:grid;place-items:center}.joint-marker.inferred{background:var(--sand);box-shadow:0 0 0 3px #aa926e33}.joint-marker.selected{outline:3px solid var(--coral);outline-offset:3px}.reference-panel{width:330px}.frame-badge{font:9px var(--mono);color:var(--muted);margin-top:4px;white-space:nowrap}video{width:100%;aspect-ratio:1;object-fit:cover;background:#d3dce1;display:block;border-radius:8px;margin:7px 0 14px}.playback{display:flex;align-items:center;justify-content:space-between}.primary-small{background:var(--blue);color:white;padding:9px 13px;border-radius:6px;font-size:11px}#reference-time{font:10px var(--mono);color:var(--muted)}input[type=range]{accent-color:var(--blue);width:100%;margin:15px 0 8px}.phase-note{font-size:10px;color:var(--blue);line-height:1.5}.text-link{font-size:10px;color:var(--blue);text-underline-offset:4px}#toast{position:absolute;left:50%;bottom:155px;transform:translateX(-50%);padding:12px 20px;background:#263c4be8;color:white;backdrop-filter:blur(10px);border-radius:9px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1}#loading,#error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e8edef;z-index:10;text-align:center;padding:30px}#loading h2{margin:27px 0 5px;font-size:23px}#loading p{color:var(--muted);font-size:12px}.loading-glyph{height:60px;width:72px;border-radius:17px;background:#354b5a;display:flex;align-items:center;padding-left:13px;box-shadow:0 12px 30px #20354020}.loading-glyph i{width:30px;height:30px;border-radius:50%;background:var(--coral);box-shadow:inset 0 0 0 4px #cc8190}.progress-track{height:3px;width:180px;border-radius:2px;background:#ced9df;margin-top:15px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--coral);width:0;transition:width .2s}#loading.done{opacity:0;pointer-events:none;transition:opacity .45s}#error h2{font-size:26px}#error p{max-width:440px;line-height:1.7}#error button{padding:12px 25px;background:var(--blue);color:white;border-radius:8px}dialog{border:1px solid white;border-radius:19px;background:var(--paper);padding:35px;color:var(--ink);max-width:470px;width:calc(100vw - 34px);box-shadow:0 24px 90px #263a4840}dialog::backdrop{background:#243b4966;backdrop-filter:blur(6px)}dialog>.icon-button{position:absolute;right:15px;top:15px}dialog h2{font-size:28px;margin:14px 0}dialog p{font-size:13px;line-height:1.7;color:var(--muted)}dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;margin:25px 0}dt{color:var(--muted)}dd{margin:0;font-family:var(--mono);font-size:11px}.guide-note{font-size:11px;border-top:1px solid var(--line);padding-top:18px}.download-link{display:flex;justify-content:space-between;gap:15px;font-size:11px;text-decoration:none;color:var(--blue);margin-top:22px;padding-top:15px;border-top:1px solid var(--line)}.download-link span{font-family:var(--mono);font-size:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.touch-controls{display:none}.inspecting .intro,.referencing .intro{opacity:0}.referencing .view-actions #joints-button{display:none}.referencing .view-actions{right:34px}.referencing .telemetry{opacity:.6}.touch-controls button{touch-action:none;user-select:none}#joystick{touch-action:none}
@media(max-width:1000px){.intro{top:120px}h1{font-size:29px}.intro p{max-width:180px}.keyboard-controls{gap:13px}.orbit-hint{display:none!important}.scene-caption{display:none}.panel{width:280px;right:24px}.reference-panel{width:280px}.view-actions{right:24px}.topbar{left:25px;right:25px}.telemetry{left:25px}.intro{left:25px}}
@media(pointer:coarse),(max-width:700px){.keyboard-controls{display:none}.touch-controls{display:flex;position:absolute;left:25px;right:25px;bottom:32px;align-items:end;justify-content:space-between;pointer-events:none}.touch-controls>*{pointer-events:auto}#joystick{width:112px;height:112px;border-radius:50%;border:1px solid #fff;background:#f8fafb6b;box-shadow:0 4px 30px #38576715;position:relative;backdrop-filter:blur(8px)}#joystick-knob{position:absolute;left:33px;top:33px;width:46px;height:46px;background:#59798ccc;border:2px solid #f8fafbc4;border-radius:50%;z-index:2;box-shadow:0 5px 12px #334c6130}.joystick-cross{position:absolute;left:49px;top:42px;font-size:24px;color:#fff5}.touch-buttons{display:flex;gap:10px;align-items:flex-end}.touch-buttons button{background:#f8fafbd9;border:1px solid white;border-radius:50%;width:57px;height:57px;backdrop-filter:blur(8px);font-size:11px}#touch-jump{width:76px;height:76px;background:var(--coral);color:white;border-color:#c98791;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}#touch-jump span{font-size:23px}.telemetry{bottom:174px;padding:12px 16px;gap:15px}.telemetry strong{font-size:19px}.telemetry>div{min-width:50px}.metric-divider{height:26px}.metric-label{font-size:7px}.contact-state{display:none!important}.telemetry>.metric-divider:nth-of-type(2){display:none}.panel{max-height:calc(100dvh - 360px)}#toast{bottom:168px;max-width:90vw;white-space:normal;text-align:center}.inspecting .touch-controls,.referencing .touch-controls{display:none}.inspecting .telemetry,.referencing .telemetry{bottom:30px}}
@media(max-width:700px){.topbar{top:17px;left:19px;right:19px}.brand{font-size:13px;gap:8px}.brand-icon{width:30px;height:28px}.brand-icon i{left:6px;top:7px;width:14px;height:14px}.brand-icon b{right:5px;top:7px;height:14px}.brand-sub{font-size:7px;letter-spacing:.23em;margin-top:4px}.mode-switch{padding:4px;gap:0}.mode-switch button{font-size:11px;padding:9px 12px}.quiet-button{display:none}.intro{left:22px;top:101px}.eyebrow{font-size:7px}h1{font-size:26px;margin-top:12px}.intro p{font-size:10px;max-width:175px}.view-actions{top:102px;right:18px;flex-direction:column;align-items:end;gap:6px}.tool-button{font-size:10px;padding:9px 11px}.view-actions #camera-button span,.view-actions #reset-button span{display:none}.view-actions #camera-button,.view-actions #reset-button{width:33px;justify-content:center}.view-actions #joints-button{padding:9px 10px}.telemetry{left:22px}.panel{right:16px;top:153px;width:260px;max-height:calc(100dvh - 260px);padding:19px}.reference-panel{width:245px;top:96px;max-height:calc(100dvh - 190px)}.reference-panel h2{font-size:18px}.reference-panel .panel-heading{gap:3px}.frame-badge{font-size:8px}.referencing .view-actions{right:auto;left:20px;top:104px;align-items:start}.referencing .telemetry{bottom:25px;left:20px}.referencing .panel .small-note{font-size:9px!important}.panel h2{font-size:20px}.contact-state{display:none!important}#joint-labels{z-index:1}.panel{z-index:2}.view-actions{z-index:3}.inspecting .view-actions{top:95px;flex-direction:row}.inspecting .intro{display:none}.inspecting .panel{top:143px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.frame-steps{display:flex;align-items:center;gap:8px}.frame-steps button{background:#e7edf0;border-radius:4px;width:22px;height:27px;font-size:20px;line-height:1}#reference-time{min-width:43px;text-align:center}

@media(max-width:700px){
  .inspecting #viewport,.referencing #viewport{top:65px;bottom:263px}
  .inspecting .panel,.referencing .panel{left:16px;right:16px;bottom:12px;top:auto;width:auto;max-height:236px;padding:16px;border-radius:14px}
  .inspecting .telemetry,.referencing .telemetry{display:none}
  .inspecting .view-actions,.referencing .view-actions{top:80px;right:18px;left:auto;flex-direction:row}
  .inspecting .panel-copy{display:none}.inspecting .panel h2{margin-bottom:12px}
  .inspecting .panel .joint-legend{margin:12px 0}.inspecting .panel .small-note{margin-top:12px}
  .referencing .reference-panel{display:grid;grid-template-columns:112px 1fr;gap:8px 14px}
  .referencing .panel-heading{grid-column:1 / -1;align-items:center}.referencing .panel-heading h2{font-size:17px;margin:4px 0 3px}
  .referencing video{grid-row:2 / 6;width:112px;height:112px;margin:0}
  .referencing .playback{flex-wrap:wrap;gap:5px}.referencing .primary-small{font-size:10px;padding:7px 9px;white-space:nowrap}
  .referencing .frame-steps{gap:4px}.referencing .frame-steps button{height:24px}
  .referencing input[type=range]{margin:0}.referencing .phase-note{font-size:9px}
  .referencing .panel .small-note{grid-column:1 / -1;margin:0;padding-top:8px;font-size:8px!important;line-height:1.4}
  .referencing .text-link{grid-column:1 / -1;font-size:9px}
  .intro h1{font-size:23px}.intro p{max-width:160px}
}

/* The actual robot silhouettes are the selector: two visible, direct choices. */
.robot-picker{position:absolute;top:98px;left:36px;display:flex;gap:8px;padding:6px;border:1px solid transparent;border-radius:18px;background:transparent;z-index:4}
.robot-choice{position:relative;width:104px;height:90px;padding:0;border:1.5px solid transparent;border-radius:12px;background:transparent;transition:border-color .18s,background .18s;isolation:isolate}
.robot-choice img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;transition:transform .18s,filter .2s;filter:drop-shadow(0 3px 2px #293b4c20)}
.robot-choice[aria-checked=true] img{filter:drop-shadow(0 0 2px #b55d6dcc) drop-shadow(0 0 7px #b55d6db3) drop-shadow(0 0 14px #b55d6d66)}
/* Picker silhouettes favor recognition; physical scale belongs to the field. */
.robot-choice[data-robot=explorer] img{position:absolute;width:65%;height:65%;left:17.5%;bottom:12%}
.robot-choice[data-robot=explorer][aria-checked=true] img{filter:drop-shadow(0 0 2px #b55d6dcc) drop-shadow(0 0 5px #b55d6db3) drop-shadow(0 0 9px #b55d6d66)}
.robot-choice:hover{background:transparent;filter:none}
.robot-choice:hover img{transform:translateY(-2px)}
.robot-choice:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.robot-check{position:absolute;bottom:9px;right:7px;display:none;width:17px;height:17px;border-radius:50%;background:var(--coral);color:white;box-shadow:0 0 9px #b55d6d66}
.robot-check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.robot-choice[aria-checked=true] .robot-check{display:block}
.robot-tooltip{position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%) translateY(-3px);padding:7px 10px;border-radius:6px;background:var(--ink);color:var(--paper);font:11px var(--sans);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 4px 12px #293b4c18}
.robot-choice:hover .robot-tooltip,.robot-choice:focus-visible .robot-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
.robot-spinner{display:none;position:absolute;bottom:9px;right:7px;width:17px;height:17px;border:2px solid #cbd5dc;border-top-color:var(--blue);border-radius:50%;background:var(--paper);animation:robot-loading .8s linear infinite}
.robot-choice.pending .robot-spinner{display:block}.robot-choice.pending .robot-check{display:none}.robot-choice.pending img{opacity:.55}
@keyframes robot-loading{to{transform:rotate(360deg)}}
.intro{top:230px}.topbar{z-index:4}
@media(max-width:1000px){.robot-picker{left:25px}.intro{top:230px}}
@media(max-width:700px){
  .robot-picker{top:72px;left:20px;padding:4px;gap:5px;border-radius:14px}.robot-choice{width:78px;height:68px;border-radius:10px}.robot-check,.robot-spinner{width:15px;height:15px;bottom:6px;right:4px}
  .robot-tooltip{font-size:10px;padding:6px 8px}.robot-choice:first-child .robot-tooltip{left:-4px;transform:translateY(-3px)}.robot-choice:first-child:hover .robot-tooltip,.robot-choice:first-child:focus-visible .robot-tooltip{transform:translateY(0)}
  .intro{top:165px}.intro h1{font-size:21px;margin:10px 0}.intro #mode-description{display:none}
  .view-actions{top:123px}.inspecting .view-actions,.referencing .view-actions{top:112px}.inspecting #viewport,.referencing #viewport{top:150px}
  .quiet-button{display:flex;padding:7px 10px}.quiet-button span{display:none}.brand{font-size:11px}.brand-icon{display:none}.mode-switch button{padding:8px 10px}.topbar{gap:8px}
}
@media(hover:none){.robot-choice:hover .robot-tooltip{opacity:0}.robot-choice:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.robot-spinner{animation:none}.robot-choice:hover img{transform:none}}

@media(max-width:700px){body:not(.inspecting):not(.referencing) .telemetry{bottom:12px;left:50%;transform:translateX(-50%);padding:6px 14px;gap:16px;border-radius:9px}.telemetry .metric-label{margin-bottom:2px}.telemetry strong{font-size:15px}.telemetry .metric-divider{height:22px}.touch-controls{bottom:64px}}