.tools{position:sticky;top:0;z-index:2;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line)}
.tools label{display:flex;align-items:center;gap:6px}.tools select{max-width:220px}
select{font:inherit;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:5px;max-width:100%}
.badges{display:flex;gap:5px;flex-basis:100%;margin-top:4px}.badge{font-size:11px;padding:1px 6px;border:1px solid var(--line);border-radius:4px}.badge.yes{color:var(--fg)}.badge.missing{color:var(--mut)}
h2 small{font-weight:400;color:var(--mut)}h3{font-size:15px;margin:22px 0 8px}.run-body{min-width:0}.run-body video{margin:12px 0}
.timeline{margin-top:16px;padding:10px 12px;background:rgba(127,127,127,.07);border-radius:5px}.timeline label{font-size:12px;color:var(--mut);display:block}.timeline output{color:var(--fg);font-variant-numeric:tabular-nums}.timeline input{display:block;width:100%;margin:12px 0 3px;accent-color:#2879d0}
.signal{margin-top:14px}.signal>b{display:block;font-size:13px}.signal .readout{display:block;font-size:11px;font-weight:400;color:var(--mut);font-variant-numeric:tabular-nums;min-height:17px}.signal canvas{display:block;width:100%;height:156px}
.unavailable{padding:8px 0;color:var(--mut)}.sources{margin-top:20px;font-size:12px}.sources code{display:block;overflow-wrap:anywhere;white-space:normal}.archive{margin-top:32px}.archive>summary{font-weight:600}.archive .run{margin-left:1em}.timing-note{font-size:11px}
@media(max-width:480px){main{padding:20px 12px}.head{gap:2px 8px}.extra{overflow-wrap:anywhere}.tools{gap:6px}.tools select{font-size:12px;max-width:200px}.run-body{padding-left:6px}}

.run{scroll-margin-top:110px}@media(max-width:480px){.run{scroll-margin-top:140px}}

main{max-width:1120px}
.drive-overview{margin-top:12px;display:grid;gap:20px;min-width:0}
.drive-camera,.drive-blackbox{min-width:0}
.drive-camera>label{display:block;font-size:12px;margin-bottom:8px}
.drive-camera select{display:block;width:100%;margin-top:4px}
.drive-blackbox h3{margin:0 0 8px}
.drive-blackbox .signal{margin-top:8px}
.drive-blackbox>p{font-size:11px}
@media(min-width:761px){
 .drive-overview.has-camera{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
 .drive-camera video{width:100%;max-width:min(380px,44vh);height:auto;max-height:44vh;object-fit:contain;margin:0}
 .drive-blackbox canvas{height:136px}
 .drive-camera .timing-note{font-size:10px;margin-top:4px}
 .timeline{margin-top:12px;padding:8px 12px}
}
@media(max-width:760px){.drive-overview{gap:16px}.drive-camera video{margin-top:0}}

main{max-width:1440px}
.signals{min-width:0}.signals>h3{margin:0 0 6px}
.joint-legend{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 8px;font-size:11px}
.joint-legend span{white-space:nowrap}.joint-legend span::before{content:"";display:inline-block;width:12px;height:3px;margin:0 4px 3px 0;background:var(--joint-color)}
.joint-key{font-size:10px;margin:4px 0 6px}.command-key{display:flex;gap:12px;font-size:10px;margin:0}
@media(min-width:1001px){
 .drive-overview.has-joints{grid-template-columns:minmax(190px,.7fr) minmax(0,1fr) minmax(0,1.25fr);gap:18px}
 .drive-overview.has-joints .drive-camera video{max-width:100%;max-height:36vh}
 .drive-overview.has-joints .drive-blackbox canvas{height:clamp(60px,calc((100vh - 530px)/4),98px)}
 .drive-overview.has-joints .signals canvas{height:clamp(74px,calc((100vh - 530px)/3),130px)}
 .drive-overview.has-joints .signal{margin-top:5px}
 .drive-overview.has-joints .signal>b{font-size:12px;line-height:1.2}
 .drive-overview.has-joints .readout{font-size:10px;min-height:13px;line-height:1.3}
 .drive-overview.has-joints h3{font-size:13px;margin:0 0 4px}
 .drive-overview.has-joints .drive-blackbox h3:not(:first-child){margin-top:8px}
 .drive-overview.has-joints .drive-blackbox>p{font-size:10px;margin-top:2px}
}
@media(min-width:761px) and (max-width:1000px){.drive-overview.has-joints .signals{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.signals>h3,.signals>.joint-legend,.signals>.joint-key{grid-column:1/-1}}
@media(max-width:760px){.signals{margin-top:8px}}

.energy-panel{margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.energy-panel h3{font-size:13px;margin:0 0 4px}.energy-total{font-size:16px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;margin:2px 0}
.energy-caption,.energy-limit{font-size:10px;line-height:1.35;margin-top:4px}.energy-cursor{font-size:11px;font-variant-numeric:tabular-nums}.energy-panel canvas{height:100px}
@media(min-width:1001px){
 .drive-overview.has-energy .drive-camera video{max-height:22vh}
 .energy-panel{margin-top:8px;padding-top:6px}
 .energy-panel .signal{margin-top:3px}
 .energy-panel .signal .readout{display:none}
 .energy-panel canvas{height:68px}
 .energy-panel .command-key{font-size:9px;gap:8px}
 .energy-caption,.energy-limit{font-size:9px}
}
/* Four leg panels follow the robot's layout: front pair above the back pair. */
.axis-legend{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;font-size:11px;margin:0 0 7px}.axis-legend>span:not(.scale-note)::before{content:'━';margin-right:4px}.axis-legend .scale-note{font-size:10px;color:var(--mut)}
.leg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.leg-card{min-width:0;border:1px solid var(--line);border-top:2px solid var(--leg-color);border-radius:5px;padding:5px 6px;background:rgba(127,127,127,.025)}
.leg-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 6px;margin-bottom:4px;font-size:11px;line-height:1.3}.leg-header>b{color:var(--leg-color)}.leg-live{font-size:9px;color:var(--mut);font-variant-numeric:tabular-nums}
.leg-card .signal{margin-top:3px}.leg-card .signal>b{font-size:10px;line-height:1.2}.leg-card canvas{height:72px}.leg-card .readout{display:none}
.leg-work{margin-top:4px;font-size:9px;line-height:1.3;color:var(--mut);font-variant-numeric:tabular-nums}.work-track{height:3px;background:var(--line);border-radius:2px;margin-top:3px;overflow:hidden}.work-track>div{height:100%;background:var(--leg-color)}
@media(min-width:1001px){.drive-overview.has-joints .leg-card .signal>b{font-size:10px}.drive-overview.has-joints .leg-card canvas{height:clamp(38px,calc((100vh - 530px)/6),66px)}}
@media(min-width:761px) and (max-width:1000px){.signals.leg-signals{display:block;grid-column:1/-1}.leg-card canvas{height:82px}}
@media(max-width:600px){.leg-grid{grid-template-columns:1fr}.leg-card{padding:8px}.leg-card canvas{height:90px}.leg-header{font-size:13px}.leg-live{font-size:11px}.leg-card .signal>b{font-size:12px}.leg-work{font-size:11px}}
@media(min-width:1001px){.run{scroll-margin-top:64px}}