:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#172f35;background:#f2f5f4;line-height:1.55;--teal:#006f65;--line:#d2ddda;--muted:#50696b}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
header{background:#132e32;color:white}
.bar,main{width:min(1176px,100%);margin:auto;padding:0 28px}
.bar,.brand,.heading,.section-title,.actions,.bounds,.transport,.readout,.loc-heading{display:flex;align-items:center;gap:12px}
.bar,.heading,.section-title,.bounds,.readout,.loc-heading{justify-content:space-between}
.bar{height:64px}.brand{gap:11px}.brand svg{width:30px;height:30px;stroke:#64dec8;stroke-width:3;stroke-linecap:round;fill:none}
.brand b{font-size:1.15rem}.brand span{border-left:1px solid #517074;padding-left:12px;color:#ccdedc}
main{padding-top:36px;padding-bottom:56px}
h1,h2,h3,p,dl,dd{margin:0}h1{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.25;letter-spacing:-.03em}h2{font-size:1.1rem}h3{font-size:1rem}
.eyebrow{font-size:.7rem;letter-spacing:.16em;font-weight:750;color:var(--teal);margin-bottom:7px}
.muted,.identifier,.bounds,.facts dt,.loc-detail{color:var(--muted);font-size:.85rem}
.identifier,.mono,.readout strong{font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
button,input,select{font:inherit}button,input:not([type=range]),select{border:1px solid #a7bcba;border-radius:7px;padding:8px 13px;background:#fff;color:#183f42}
button{cursor:pointer;font-weight:600}button:hover:enabled{background:#e4f4ef}button:disabled{opacity:.48;cursor:default}
button.primary,button.accent{background:var(--teal);border-color:var(--teal);color:white}button.primary:hover,button.accent:hover{background:#00594f}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #238272;outline-offset:3px}
#logout{color:white;background:transparent;border-color:#587479}#logout:hover{background:#23444a}
.heading{margin-bottom:20px}.layout{display:grid;grid-template-columns:minmax(210px,265px) minmax(0,1fr);gap:20px;align-items:start}
.panel{border:1px solid var(--line);border-radius:13px;background:white;padding:22px;box-shadow:0 2px 6px #17392e08;min-width:0}
.section-title{margin-bottom:13px}.pill{display:inline-block;padding:2px 9px;background:#e9f1ef;color:#315c58;border-radius:5px;font-size:.8rem}
.stack{display:grid;gap:16px;min-width:0}#devices{display:grid;gap:7px;max-height:65vh;overflow:auto;padding:3px}
.device{width:100%;text-align:left;border-color:transparent;display:grid;gap:2px;overflow-wrap:anywhere}.device[aria-pressed=true]{background:#e6f4ef;border-color:#67a798}
.device small{color:var(--muted);font-weight:400}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:14px;margin-top:15px;border-top:1px solid var(--line);padding-top:15px}
.facts dd{font-size:.94rem;font-variant-numeric:tabular-nums}
.fix{padding:12px 0;border-top:1px solid var(--line)}.fix:last-child{padding-bottom:0}.fix strong{overflow-wrap:anywhere}.loc-detail{margin-top:3px}.loc-heading{flex-wrap:wrap;gap:4px}
.login{max-width:425px;margin:clamp(28px,10vh,96px) auto;padding:32px}.login>p{margin-top:14px}.login form{display:grid;gap:9px;margin-top:26px}
label{font-weight:650;font-size:.9rem}.login input{height:44px}.login button{margin-top:6px}
select{width:100%;margin-top:5px;max-width:100%}#session-id{margin-top:5px}
.readout{margin:18px 0 8px;background:#f2f7f5;padding:12px;border-radius:7px}.readout strong{display:block;font-size:1.1rem}
input[type=range],audio{display:block;width:100%;accent-color:var(--teal)}input[type=range]{margin:12px 0 5px}audio{margin:16px 0 12px}
.transport{flex-wrap:wrap;gap:7px}.transport button{font-size:.9rem}.message:not(:empty),.gap-note:not(:empty){margin:10px 0;color:#754410;background:#ffefd8;padding:8px 11px;border-radius:5px;font-size:.9rem}
#timeline-empty:not(:empty){margin-top:14px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){.bar,main{padding-left:15px;padding-right:15px}.layout{grid-template-columns:1fr;gap:12px}main{padding-top:24px}.panel{padding:16px}#devices{max-height:200px}.heading,.actions{align-items:flex-start}.actions{flex-direction:column-reverse;gap:3px}.heading{align-items:center}.facts{grid-template-columns:1fr 1fr}.bounds,.loc-heading{font-size:.8rem}.login{padding:24px}.brand span{font-size:.85rem}}

#history{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#history summary{cursor:pointer;font-weight:650;color:var(--teal)}
.history-actions{margin:12px 0;flex-flow:row wrap;gap:6px}.history-actions button{font-size:.88rem}