:root { color-scheme: light; --ink:#172522; --muted:#667772; --paper:#fbfbf7;
  --line:#d7dfda; --blue:#064bff; --teal:#137e72; --orange:#e64b19; }
* { box-sizing:border-box }
body { margin:0; color:var(--ink); background:#f2f5ef;
  font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:linear-gradient(#dfe7df80 1px,transparent 1px),
  linear-gradient(90deg,#dfe7df80 1px,transparent 1px); background-size:24px 24px }
button,input { font:inherit } button { cursor:pointer } button:disabled { cursor:default; opacity:.55 }
.shell { width:min(1060px,calc(100% - 28px)); margin:12px auto 24px }
header,.card-heading,.device-actions,.control-row { display:flex; align-items:center; justify-content:space-between; gap:16px }
header { padding:12px 8px 22px } h1,h2 { margin:0; line-height:1.08 } h1 { font-size:clamp(25px,4vw,42px) } h2 { font-size:21px }
.control-title { font-size:15px; line-height:1.4 }
.card:not(.device-card) > .card-heading h2 { font-size:15px; line-height:1.4 }
.eyebrow { margin:0 0 5px; color:#08766d; font-size:11px; font-weight:800; letter-spacing:.18em }
.muted { color:var(--muted) }.center { text-align:center }.hidden { display:none!important }
.header-status { display:flex; align-items:center; gap:10px }
.build-version { color:var(--muted); font:11px ui-monospace,monospace; white-space:nowrap }
.status,.tag { min-width:104px; padding:7px 11px; border-radius:9px; background:#edf0eb;
  color:#64726e; text-align:center; font:12px ui-monospace,monospace; font-weight:700 }
.status.unresponsive { color:#9a3515; background:#fff0e9 }
.grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px }
.card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:25px;
  background:#fbfbf9ee; box-shadow:0 1px 0 #fff inset }
.device-card { position:relative; grid-row:span 2; min-height:0; overflow:visible; display:flex; flex-direction:column }
.device-card:has(.app-pin:hover),.device-card:has(.app-pin:focus-visible) { z-index:20 }
.device-card .board-photo { margin-block:auto }
.app-description-slot { position:relative; z-index:5; flex:0 0 4.2em; margin-top:2px }
.app-description { position:absolute; inset:0 4px auto; height:4.2em; overflow:hidden; margin:0;
  border:1px solid transparent; border-radius:10px; color:var(--muted); font-size:13px; line-height:1.4 }
.app-description:hover,.app-description:focus-visible { z-index:10; height:auto; max-height:15em;
  overflow:auto; padding:8px 10px; border-color:var(--line); outline:none;
  background:#fbfbf9f7; box-shadow:0 8px 24px #17252235; color:var(--ink) }
.log-card { grid-column:2; grid-row:3; display:flex; min-height:0; flex-direction:column }
.diagnostics-card { grid-column:1; grid-row:3; align-self:start }
.card-heading { align-items:flex-start }.text-action { flex:0 0 auto; border:0; background:none; color:var(--teal); padding:4px; white-space:nowrap; font-weight:750 }
.device-versions { display:grid; justify-items:end }
.version-row { display:flex; align-items:center; justify-content:flex-end; min-height:27px }
.version-auto { width:14px; height:14px; margin:0 0 0 5px; accent-color:var(--blue); cursor:pointer }
.version-auto-wrap { position:relative; display:flex; align-items:center }
.version-auto-wrap > span { position:absolute; right:0; top:calc(100% + 3px); z-index:8;
  width:max-content; max-width:220px; padding:4px 7px; border-radius:5px;
  color:#fff; background:var(--ink); font-size:11px; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .06s linear }
.version-auto-wrap:has(.version-auto:not(.hidden):hover) > span,
.version-auto-wrap:has(.version-auto:not(.hidden):focus-visible) > span {
  opacity:1; visibility:visible }
.device-model { width:100%; margin:4px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.device-versions.stale { opacity:.45; filter:grayscale(1) }
.progress-stage { display:flex; justify-content:center; margin-top:-10px; margin-bottom:14px }
.stage-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:132px;
  height:30px;
  color:var(--muted);
  font:750 11px ui-monospace,monospace;
  letter-spacing:.09em;
  white-space:nowrap;
}
.board-photo { position:relative; width:min(560px,100%); margin:20px auto }
.board-photo img { display:block; width:100%; border-radius:16px }
.board-photo.rotated img { transform:rotate(180deg) }
.board-rotate { position:absolute; z-index:6; right:7px; top:7px; width:29px; height:29px; padding:0;
  border:1px solid #ffffffb8; border-radius:8px; color:#fff; background:#172522b8;
  box-shadow:0 2px 8px #17252240; font:700 19px/1 system-ui,sans-serif }
.board-rotate:hover,.board-rotate:focus-visible { background:#172522e8 }
.board-pins { position:absolute; z-index:6; left:7px; top:7px; min-height:29px; padding:0 9px;
  border:1px solid #ffffffb8; border-radius:8px; color:#fff; background:#172522e8;
  box-shadow:0 2px 8px #17252240; font:800 10px/1 system-ui,sans-serif; letter-spacing:.08em }
.board-pins:hover,.board-pins:focus-visible,.board-pins[aria-expanded="true"] { background:#172522 }
.pin-assignments { position:absolute; z-index:12; left:7px; right:7px; top:43px; max-height:calc(100% - 50px);
  overflow:auto; padding:12px 14px; border:1px solid #bcc8c2; border-radius:12px;
  color:var(--ink); background:#fff; box-shadow:0 8px 26px #17252270 }
.pin-assignments-heading { position:sticky; top:-12px; display:flex; align-items:center;
  justify-content:space-between; margin:-12px -14px 8px; padding:10px 12px 8px;
  border-bottom:1px solid var(--line); background:#fff }
.pin-assignments-heading button { width:26px; height:26px; padding:0; border:0; border-radius:7px;
  color:var(--ink); background:#edf0eb; font:700 20px/1 system-ui,sans-serif }
.pin-assignments dl { display:grid; grid-template-columns:max-content 1fr; gap:7px 10px; margin:0 }
.pin-assignments dt { color:var(--teal); font:800 11px/1.35 ui-monospace,monospace }
.pin-assignments dd { margin:0; font:600 11px/1.35 system-ui,sans-serif }
.photo-led { position:absolute; left:54.9%; top:67.3%; width:2.31%; aspect-ratio:2.25; border-radius:1px; transform:translate(-50%,-50%) }
.photo-led.on { background:#064bff; box-shadow:0 0 8px 3px #064bff,0 0 20px 7px #064bff88 }
.photo-boot { position:absolute; left:42.8%; top:39.4%; width:7.69%; height:13.85%; border:2px solid transparent; border-radius:8px; transform:translate(-50%,-50%) }
.photo-boot.on { background:#0d211f52; box-shadow:inset 0 3px 5px #000b,0 0 0 2px #147f79b8,0 0 12px #147f7994; transform:translate(-50%,-50%) scale(.88) }
.app-pin { position:absolute; z-index:3; width:3.3%; aspect-ratio:1; padding:0;
  border:2px solid #ffd400; border-radius:50%; background:#ffd40055;
  box-shadow:0 0 8px #ffd400; transform:translate(-50%,-50%) }
.app-pin.reserved { border-color:#c92820; background:#c9282055; box-shadow:0 0 8px #c92820 }
.app-pin.reserved::after { background:#fff0ee; border-color:#c92820 }
.app-pin.shared { border-color:#f59e0b; background:#f59e0b55; box-shadow:0 0 8px #f59e0b }
.app-pin.shared::after { background:#fff8df; border-color:#f59e0b }
.app-pin::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 10px);
  width:max-content; max-width:min(300px,70vw); padding:7px 9px; border-radius:8px;
  color:var(--ink); background:#fff; border:1px solid #c8ad18;
  box-shadow:0 6px 18px #17252270; font:700 11px/1.35 system-ui,sans-serif;
  white-space:normal; opacity:0; pointer-events:none;
  transform:translateX(-50%); transition:opacity .12s; z-index:8 }
.app-pin:hover::after,.app-pin:focus-visible::after { opacity:1 }
.primary,.secondary { min-height:48px; border-radius:14px; padding:0 18px; font-weight:800 }
.primary { flex:1; border:0; color:white; background:var(--orange) }
.secondary { border:1px solid var(--line); color:var(--ink); background:#fff }
.full { width:100%; margin-top:18px }.control-row { justify-content:center; margin:18px 0 }
.output-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0 0 }
.output-controls .control-row { margin:0 }
.output-actions { display:grid; grid-template-columns:76px; gap:6px; margin:0 }
.output-actions .full { margin-top:0 }
.output-actions .secondary { min-height:30px; padding:0 10px; border-radius:9px; font-size:12px }
.round-control { width:39px; height:39px; border-radius:50%; border:1px solid #ccd7d1;
  position:relative; color:#84918d; background:#f1f5f1 }
.round-control::before { content:""; position:absolute; left:50%; top:52%;
  width:14px; height:14px; border:3px solid currentColor;
  border-top-color:transparent; border-radius:50%; transform:translate(-50%,-50%) }
.round-control::after { content:""; position:absolute; left:50%; top:8px;
  width:3px; height:12px; border-radius:2px; background:currentColor;
  transform:translateX(-50%) }
.round-control.on { color:white; background:var(--blue); border-color:var(--blue); box-shadow:0 0 18px #064bff55 }
.push-control { width:57px; height:32px; border:4px solid #bec9c4; border-radius:8px;
  color:white; background:#203b38; font:800 9px ui-monospace,monospace; letter-spacing:.08em }
.push-control.on { transform:translateY(3px); background:var(--blue) }
.boot-visual { width:58px; margin:11px auto 8px; padding:9px; border:4px solid #bdc8c3;
  border-radius:8px; color:white; background:#203b38; text-align:center; font:800 9px ui-monospace,monospace }
.boot-visual.on { transform:translateY(3px) }
.input-primary { display:grid; grid-template-columns:1fr 1fr; align-items:center; margin-top:10px }
.timed-input { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  min-height:46px; padding-left:18px; border-left:1px solid var(--line) }
.timed-input small { display:block; margin-top:2px; color:var(--muted) }
.timed-input-visual { width:14px; height:14px; border-radius:50%; background:#c8d0cc }
.timed-input-visual.on { background:var(--blue); box-shadow:0 0 12px #064bffaa }
.hid-input { margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.hid-heading { display:flex; align-items:center; justify-content:space-between; gap:8px }
.hid-heading small { display:block; color:var(--muted); white-space:nowrap }
.hid-actions { display:flex; align-items:center; gap:10px }
.hid-actions label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.72rem }
.hid-actions select { border:1px solid var(--line); border-radius:7px; background:var(--card);
  min-width:76px; color:var(--ink); padding:4px 8px; font:inherit }
.hid-devices { display:grid; gap:7px; min-height:64px; margin:16px 0 }
.hid-device { display:flex; justify-content:space-between; align-items:center; height:40px;
  padding:5px 8px; border:1px solid var(--line); border-radius:9px; background:#fff }
.hid-device>span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hid-device>span:first-child strong,.hid-address { display:block }
.hid-address { color:var(--muted); font:10px ui-monospace,monospace }
.hid-device-actions { display:flex; align-items:center; gap:9px }
.hid-device.placeholder { visibility:hidden }
.hid-signal { color:var(--muted); font:11px ui-monospace,monospace; white-space:nowrap }
.hid-modal { width:min(460px,100%) }
.mouse-display { --mouse-size:clamp(120px,42vw,170px); display:grid;
  grid-template-columns:var(--mouse-size) minmax(116px,1fr);
  grid-template-rows:var(--mouse-size); align-items:start; gap:8px; margin-top:10px }
.mouse-stage { position:relative; width:var(--mouse-size); height:var(--mouse-size); overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:
  linear-gradient(transparent 7.5px,#dfe7df66 7.5px 8.5px,transparent 8.5px),
  linear-gradient(90deg,transparent 7.5px,#dfe7df66 7.5px 8.5px,transparent 8.5px),#f5f8f4;
  background-size:16px 16px; background-position:center }
.mouse-stage::before,.mouse-stage::after { content:""; position:absolute;
  left:50%; top:50%; z-index:0; background:#567a7050; transform:translate(-50%,-50%);
  pointer-events:none }
.mouse-stage::before { width:100%; height:1px }
.mouse-stage::after { width:1px; height:100% }
.mouse-stage i { position:absolute; left:50%; top:50%; width:10px; height:10px;
  z-index:1; border:1px solid var(--blue); border-radius:50%; transform:translate(-50%,-50%);
  filter:drop-shadow(0 1px 1px #fff) }
.mouse-stage i::before,.mouse-stage i::after { content:""; position:absolute;
  left:50%; top:50%; background:var(--blue); transform:translate(-50%,-50%) }
.mouse-stage i::before { width:14px; height:1px }
.mouse-stage i::after { width:1px; height:14px }
.mouse-position-overlay { position:absolute; right:8px; top:7px; z-index:2;
  padding:4px 6px; border-radius:6px; background:#fbfbf9d9; text-align:right }
.mouse-position-overlay b { display:block; font:700 10px ui-monospace,monospace }
.mouse-readout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,1fr); gap:6px; height:100% }
.mouse-readout>span { display:flex; flex-direction:column; justify-content:center;
  min-width:0; padding:6px 8px; border-radius:8px; background:#eef5f1 }
.mouse-readout .mouse-signal-readout.single { grid-column:1/-1 }
.mouse-app-state { color:#18705b; font-size:12px; letter-spacing:.08em }
.mouse-app-state.off { color:#a0442b }
.mouse-readout small { display:block; color:var(--muted); font-size:10px }
.mouse-readout b { font:700 11px ui-monospace,monospace }
.mouse-mode-readout.single { grid-column:1/-1 }
.mouse-mode-readout.selected { box-shadow:inset 0 0 0 2px var(--blue) }
.mouse-mode-readout.selected small { color:var(--blue); font-weight:800 }
.mouse-readout .mouse-buttons { display:grid; grid-template-columns:repeat(3,19px);
  grid-column:1/-1; grid-template-rows:auto 19px; align-content:center;
  justify-content:start; gap:2px }
.mouse-readout .mouse-buttons:has(b.described) {
  grid-template-columns:repeat(3,max-content);
}
.mouse-readout .mouse-buttons small { grid-column:1/-1 }
.mouse-buttons b { display:inline-grid; place-items:center; width:19px; height:19px; margin:2px 2px 0 0;
  border-radius:5px; color:#87938f; background:#dfe6e2 }
.mouse-buttons b.described { width:auto; padding:0 4px; font-size:9px }
.mouse-buttons b.on { color:#fff; background:var(--blue) }
#event-log { flex:1 1 0; min-height:0; overflow-y:auto; list-style:none; margin:18px 0 0; padding:0 }
#event-log li { display:grid; grid-template-columns:92px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line) }
#event-log time { white-space:nowrap; color:var(--muted); font:12px ui-monospace,monospace }
.signal-track,.progress { height:7px; margin:20px 0; border-radius:20px; overflow:hidden; background:#e9eeea }
.signal-track i,.progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#ff6647,#b8df41,#178d7e) }
.progress i.indeterminate {
  background:#178d7e;
  animation:install-progress 1.1s ease-in-out infinite;
}
@keyframes install-progress {
  from { transform:translateX(-120%) }
  to { transform:translateX(320%) }
}
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 }
.metrics div { min-width:0; padding:10px; border-radius:12px; background:#eef5f1 }
.metrics dt { color:var(--muted); font-size:11px }.metrics dd { margin:2px 0 0; white-space:nowrap; font:700 12px ui-monospace,monospace }
.diagnostics-card.stale .local-diagnostics { opacity:.28; filter:grayscale(1) }
.input-card.stale .input-live { opacity:.28; filter:grayscale(1) }
.connections { margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.connection { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px }
.connection small { display:block; color:var(--muted) }
.notice,.error { position:relative; padding:13px 16px; margin-bottom:16px; border-radius:12px; background:#fff0e9; color:#8e2b0d }
.notice-line { display:block }
.notice-setting { margin:7px 24px; font-family:ui-monospace,monospace }
.notice-dismiss { position:absolute; right:8px; top:6px; width:28px; height:28px;
  padding:0; border:0; background:transparent; color:inherit; font-size:22px;
  line-height:1; opacity:.7 }
.notice-dismiss:hover { opacity:1 }
.backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:18px; background:#dce5df99; backdrop-filter:blur(1px) }
.modal { position:relative; width:min(520px,100%); max-height:90vh; overflow:auto; padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--paper) }
#usb-modal .modal { height:min(554px,calc(100vh - 36px)) }
@media (max-width:520px) {
  #usb-modal .modal { height:min(604px,calc(100vh - 36px)) }
}
#usb-choose { display:block; margin:8px 0 0 auto; font-size:12px }
#usb-content { min-height:48px }
#usb-content p { margin:0 0 8px }
#usb-content ol { margin:0; padding-left:24px }
#usb-content li { padding-left:5px; margin:3px 0 }
#usb-content .factory-feedback { color:#8e2b0d; font-weight:750 }
.modal-close { position:absolute; top:8px; right:11px; border:0; background:none; font-size:30px }
.modal label { display:grid; gap:6px; margin:14px 0 }
.modal input,.modal select { padding:11px; border:1px solid var(--line); border-radius:9px; background:var(--card) }
.update-detail { margin-top:14px }
.field-label { display:grid; gap:6px; margin-top:14px; font-size:12px; font-weight:800 }
.field-label select,.field-label input { width:100%; font:inherit }
@media (max-width:760px) {
  .shell { width:min(100% - 16px,540px); margin-top:12px }.grid { grid-template-columns:1fr }
  .device-card { grid-row:auto }
  .device-card,.log-card,.diagnostics-card { grid-column:1; grid-row:auto }.card { padding:20px 18px }
  .diagnostics-card { order:4 }.log-card { order:5 }.metrics { grid-template-columns:repeat(2,1fr) }
  .connection { grid-template-columns:1.3fr 1fr }.connection span:nth-child(n+3) { text-align:right }
  .device-actions { flex-direction:column }.device-actions button { width:100% }
}