:root {
  color-scheme: light;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202520;
  background: #e4e7e1;
  --paper: #fafbf8;
  --rule: #a9b1a5;
  --muted: #535d51;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; margin: 0; }
button, textarea, input { font: inherit; }
button {
  min-height: 34px; border: 1px solid #7e8979; border-radius: 2px;
  padding: 5px 12px; color: #202520; background: #f7f9f3; font-weight: 600;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
button:hover:not(:disabled) { background: #e5eadd; border-color: #394636; }
button:active:not(:disabled) { background: #d2dbc9; }
button:disabled { color: #697264; border-color: #c0c7ba; background: #e8ece3; cursor: default; }
:focus-visible { outline: 2px solid #1748a0; outline-offset: -3px; }
kbd, code, time { font-family: var(--mono); font-size: .92em; }
kbd { font-weight: 500; border: 1px solid #aab2a3; padding: 0 3px; border-radius: 2px; }
p, h1, h2, h3 { margin: 0; }
.console { height: 100dvh; min-height: 774px; display: grid; grid-template-rows: 42px 46px minmax(310px, 1fr) 160px 130px 26px; padding: 10px; gap: 8px; max-width: 1800px; margin: 0 auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; border-bottom: 2px solid #313b2d; }
h1 { font: 700 14px/1 var(--mono); letter-spacing: .025em; white-space: nowrap; }
h1 span { font-weight: 400; }
.masthead-actions { display: flex; align-items: center; gap: 20px; }
.transport-label, .field-label, .state-label { font: 11px/1.3 var(--mono); letter-spacing: .035em; }
.transport-label, .field-label { color: var(--muted); }
.connection-bar { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 128px; align-items: center; gap: 10px; border: 1px solid var(--rule); padding: 5px 7px 5px 12px; background: var(--paper); }
.state-marker { width: 8px; height: 8px; border: 1px solid #626d5d; background: #9aa391; }
.connection-bar[data-state="connected"] .state-marker { background: #28703e; border-color: #225f35; }
.connection-bar[data-state="connecting"] .state-marker { background: #b67705; border-color: #945e00; }
.connection-bar[data-state="error"] .state-marker { background: #a33423; border-color: #a33423; }
#connection { font-weight: 650; overflow-wrap: anywhere; line-height: 1.2; }
#link-detail { font: 11px var(--mono); color: var(--muted); }
#connect { width: 128px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, 1fr); gap: 8px; min-height: 0; }
.panel { min-width: 0; min-height: 0; background: var(--paper); border: 1px solid var(--rule); }
.panel-heading { min-height: 30px; padding: 5px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); background: #e9ede3; }
h2 { font: 650 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.state-label { margin-left: auto; font-weight: 600; }
.parameter-panel { display: grid; grid-template-rows: 30px minmax(0, 1fr); }
.parameters { display: grid; min-height: 0; grid-template-rows: 29px minmax(72px, 1fr) 25px 47px 31px 27px; }
.editor-heading, .format-line { padding: 5px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.editor-heading label { font-weight: 650; }
#line-count { font-family: var(--mono); font-variant-numeric: tabular-nums; }
textarea { display: block; width: calc(100% - 20px); height: 100%; min-height: 0; margin: 0 10px; padding: 10px; resize: none; border: 1px solid #939e8d; border-radius: 0; background: #fff; color: #202520; font: 13px/1.7 var(--mono); tab-size: 2; overflow: auto; }
textarea:disabled { background: #eef1e9; color: #525d4e; }
.parameter-actions { padding: 6px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; border-top: 1px solid #d4dacd; }
#apply:not(:disabled) { background: #33432d; color: #fff; border-color: #33432d; }
#apply:hover:not(:disabled) { background: #263622; }
.write-result { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 3px 12px; border-top: 1px solid #d4dacd; }
#write-status { font-size: 12px; overflow-wrap: anywhere; line-height: 1.2; }
.parameter-note { padding: 4px 12px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.controller { display: grid; grid-template-rows: 30px 36px 66px minmax(54px, 1fr) 52px 71px; }
.motor-notice { padding: 8px 12px; background: #f2ead4; border-bottom: 1px solid #d6c8a6; font-size: 12px; line-height: 1.3; }
.transmission-readout { display: grid; grid-template-columns: 1.3fr .7fr .9fr; margin: 8px 12px; gap: 12px; }
.transmission-readout > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.transmission-readout strong { font: 600 20px/1.2 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.transmission-readout small { font: 12px var(--mono); }
#policy-status { font-size: 17px; }
.hold { margin: 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #ead7b3; border-color: #8a6d34; color: #473414; font-size: 17px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold:hover:not(:disabled) { background: #e0c79b; border-color: #644813; }
.hold[aria-pressed="true"] { color: #fff; background: #835015; border-color: #573108; }
.button-detail { font: 10px/1.2 var(--mono); letter-spacing: .05em; }
.command-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px; }
#stop:not(:disabled) { color: #922819; border-color: #aa4737; background: #fff0eb; }
#stop kbd { margin-left: 6px; }
.command-notes { margin: 0 12px; padding-top: 8px; border-top: 1px solid #d4dacd; font-size: 11px; line-height: 1.45; color: #4a5545; }
.command-notes p + p { margin-top: 3px; }
.journal { display: grid; grid-template-rows: 34px minmax(0, 1fr); }
.journal-heading { padding: 2px 10px; }
#event-position { font: 11px var(--mono); min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.journal-actions { display: flex; gap: 5px; }
.journal-actions button { min-height: 26px; padding: 2px 10px; font-size: 11px; }
.event-record { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 12px; padding: 10px 12px; min-height: 0; }
.event-metadata { display: flex; flex-direction: column; gap: 7px; font: 11px var(--mono); font-variant-numeric: tabular-nums; border-right: 1px solid #d4dacd; }
#event-level { font-weight: 650; }
#activity { font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.journal[data-level="ERROR"] #event-level, .journal[data-level="ERROR"] #activity { color: #982c1e; }
.journal[data-level="WARN"] #event-level { color: #85570d; }
.journal[data-level="OK"] #event-level { color: #286138; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 10px/1.2 var(--mono); color: var(--muted); }
footer span { min-width: 0; }
footer span:last-child { white-space: nowrap; }
dialog { padding: 0; width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 1px solid #53624b; border-radius: 0; color: #202520; background: var(--paper); }
dialog::backdrop { background: #20252077; }
dialog .panel-heading { justify-content: space-between; }
.reference-content { padding: 16px; font-size: 13px; }
.reference-content h3 { font: 650 12px var(--mono); margin: 12px 0 5px; }
.reference-content h3:first-child { margin-top: 0; }
.reference-content p { margin-bottom: 6px; }
.reference-content code { overflow-wrap: anywhere; }
.reference-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; border-bottom: 1px solid var(--rule); }
.reference-topics button { padding: 5px; font-size: 12px; }
.reference-topics button[aria-pressed="true"] { background: #33432d; color: #fff; border-color: #33432d; }
.reference-content { height: 250px; }
@media (min-width: 701px) and (max-height: 700px) {
  .console { padding: 6px; gap: 5px; min-height: 680px; grid-template-rows: 34px 40px minmax(265px, 1fr) 160px 105px 20px; }
  .parameter-panel { grid-template-rows: 27px minmax(0, 1fr); }
  .parameters { grid-template-rows: 23px minmax(65px, 1fr) 20px 41px 27px 23px; }
  textarea { padding-top: 6px; padding-bottom: 6px; }
  .controller { grid-template-rows: 27px 32px 49px minmax(46px, 1fr) 44px 61px; }
  .panel-heading { min-height: 27px; }
  .transmission-readout { margin: 5px 12px; gap: 8px; }
  .transmission-readout strong { font-size: 18px; }
  .hold { gap: 4px; font-size: 15px; }
  .command-actions { padding-top: 5px; padding-bottom: 5px; }
  .command-notes { padding-top: 5px; line-height: 1.3; }
  .journal { grid-template-rows: 30px minmax(0, 1fr); }
  .event-record { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 700px) {
  .console { height: auto; min-height: 100dvh; padding: 5px; gap: 5px; grid-template-rows: 34px 39px minmax(420px, 1fr) auto 140px 20px; }
  h1 { font-size: 12px; }
  h1 span { font-size: 10px; }
  .transport-label, #link-detail { display: none; }
  .masthead-actions { gap: 0; }
  .masthead button { font-size: 11px; min-height: 26px; padding: 2px 7px; }
  .connection-bar { grid-template-columns: 8px minmax(0, 1fr) 100px; padding: 3px 5px 3px 9px; gap: 7px; }
  #connect { width: 100px; min-height: 29px; }
  #connection { font-size: 12px; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(174px, 1fr) minmax(193px, 1fr); gap: 5px; }
  .parameter-panel { grid-template-rows: 24px minmax(0, 1fr); }
  .parameters { grid-template-rows: minmax(74px, 1fr) 18px 36px 24px; }
  .editor-heading { display: none; }
  .parameter-note { display: none; }
  .panel-heading { min-height: 24px; padding: 3px 8px; }
  h2, .state-label { font-size: 10px; }
  .editor-heading { padding: 2px 9px; font-size: 10px; }
  textarea { margin: 0 8px; width: calc(100% - 16px); padding: 4px 7px; font: 12px/1.5 var(--mono); }
  .format-line { padding: 1px 9px; font-size: 10px; }
  .parameter-actions { padding: 3px 8px; grid-template-columns: minmax(0, 1fr) 106px; }
  .parameter-actions button { min-height: 29px; font-size: 12px; }
  .write-result { padding: 2px 9px; }
  #write-status { font-size: 11px; }
  .controller { grid-template-rows: 24px 28px 39px minmax(40px, 1fr) 37px 25px; }
  .motor-notice { padding: 4px 9px; font-size: 10px; }
  .transmission-readout { margin: 3px 9px; gap: 8px; }
  .transmission-readout .field-label { font-size: 9px; }
  .transmission-readout strong, #policy-status { font-size: 14px; }
  .transmission-readout > div { gap: 1px; }
  .hold { margin: 0 9px; flex-direction: row; gap: 12px; font-size: 14px; }
  .button-detail { font-size: 9px; }
  .command-actions { padding: 4px 9px; gap: 7px; }
  .command-actions button { min-height: 29px; font-size: 12px; }
  .command-notes { margin: 0 9px; padding-top: 4px; font-size: 10px; }
  .command-notes p:first-child { display: none; }
  .command-notes p + p { font-size: 0; margin: 0; }
  .command-notes strong { font-size: 10px; }
  .journal { grid-template-rows: 29px minmax(0, 1fr); }
  .journal-heading { gap: 6px; }
  .journal-actions { gap: 3px; }
  .journal-actions button { padding: 1px 7px; min-height: 23px; }
  #event-position { min-width: 40px; font-size: 10px; }
  .event-record { grid-template-columns: 65px minmax(0, 1fr); gap: 8px; padding: 7px 9px; }
  .event-metadata { font-size: 10px; }
  #activity { font-size: 11px; line-height: 1.4; }
  footer { font-size: 9px; gap: 5px; }
  footer span:last-child { display: none; }
  .reference-content { font-size: 12px; padding: 10px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .console { gap: 3px; padding: 3px; grid-template-rows: 30px 35px minmax(420px, 1fr) auto 140px 17px; }
  .workspace { gap: 3px; }
}
@media (max-width: 700px) and (max-height: 610px) {
  .console { padding: 2px; gap: 2px; grid-template-rows: 26px 35px minmax(420px, 1fr) auto 140px; }
  footer { display: none; }
  .workspace { grid-template-rows: minmax(174px, 1fr) minmax(175px, 1fr); gap: 3px; }
  .parameters { grid-template-rows: minmax(78px, 1fr) 16px 32px 22px; }
  textarea { font-size: 12px; line-height: 1.4; }
  .parameter-actions { padding-top: 1px; padding-bottom: 1px; }
  .controller { grid-template-rows: 24px 24px 34px minmax(36px, 1fr) 33px 22px; }
  .motor-notice { padding-top: 2px; padding-bottom: 2px; }
  .transmission-readout { margin-top: 2px; margin-bottom: 2px; }
  .command-actions { padding-top: 2px; padding-bottom: 2px; }
  .command-notes { padding-top: 2px; }
}

.workspace-heading { padding: 2px 6px; gap: 5px; }
.workspace-heading button { min-height: 22px; padding: 2px 7px; font: 11px/1.3 var(--mono); }
.workspace-heading button[aria-pressed="true"] { color: #fff; background: #33432d; border-color: #33432d; }
.workspace-heading .state-label { font-size: 10px; }
.firmware-console { display: grid; grid-template-rows: 32px minmax(0, 1fr) 28px; min-height: 0; }
.console-toolbar { display: flex; align-items: center; gap: 5px; padding: 3px 8px; font: 10px var(--mono); }
#console-position { margin-left: auto; font-variant-numeric: tabular-nums; }
.console-toolbar button { min-height: 24px; padding: 2px 8px; font: 11px var(--mono); }
#console-pause { width: 54px; }
#firmware-output { min-width: 0; min-height: 0; margin: 0 8px; padding: 7px; overflow: hidden; white-space: pre; border: 1px solid #939e8d; background: #fff; color: #202520; font: 12px/18px var(--mono); tab-size: 4; }
.console-note { padding: 5px 9px; font-size: 10px; line-height: 1.2; }
.pose-panel { display: grid; grid-template-rows: 30px minmax(0, 1fr); }
.pose-age { margin-left: auto; font: 11px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pose-panel .state-label { margin-left: 8px; }
.pose-body { display: grid; grid-template-columns: minmax(290px, 1.2fr) minmax(230px, 1fr) minmax(260px, 1fr); gap: 18px; padding: 12px; }
.pose-connection { min-width: 0; }
.pose-address-row { display: flex; gap: 6px; margin: 5px 0; }
#pose-address { min-width: 0; width: 100%; border: 1px solid #939e8d; border-radius: 0; padding: 5px 7px; background: #fff; color: #202520; font: 12px var(--mono); }
#pose-address:disabled { background: #eef1e9; color: var(--muted); }
#pose-connect { min-width: 96px; flex-shrink: 0; }
#pose-status { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.pose-vector { min-width: 0; }
.pose-vector h3 { font: 11px var(--mono); text-transform: uppercase; }
.pose-vector h3 span { font-size: 10px; color: var(--muted); text-transform: none; }
.pose-components { display: grid; gap: 8px; margin: 9px 0 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.position-components { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quaternion-components { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pose-components dt { font-size: 10px; color: var(--muted); }
.pose-components dd { margin: 2px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.pose-sample { font: 10px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pose-panel[data-state="live"] .state-label { color: #286138; }
.pose-panel[data-state="stale"] .state-label, .pose-panel[data-state="connecting"] .state-label { color: #85570d; }
.pose-panel[data-state="stale"] .pose-components { color: #73796e; }
.pose-panel[data-state="error"] .state-label, .pose-panel[data-state="error"] #pose-status { color: #982c1e; }
@media (min-width: 701px) and (max-width: 1000px) {
  .pose-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
  #pose-connect { min-width: 0; padding-inline: 7px; }
  #pose-address { font-size: 10px; }
  .pose-components { gap: 4px; }
  .pose-components dd { font-size: 13px; }
  .pose-vector h3 span { display: block; margin-top: 3px; }
  .pose-vector:last-child h3 span { display: inline; }
  .quaternion-components { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; margin-top: 5px; }
}
@media (max-width: 700px) {
  .pose-panel { grid-template-rows: 28px auto; }
  .pose-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 10px; }
  .pose-age { font-size: 10px; }
  .pose-components dd { font-size: 18px; }
  .workspace-heading { padding: 1px 5px; }
  .workspace-heading button { min-height: 20px; font-size: 10px; padding: 1px 5px; }
  .firmware-console { grid-template-rows: 28px minmax(0, 1fr) 24px; }
  .console-toolbar { padding: 2px 7px; }
  .console-toolbar button { min-height: 22px; padding: 1px 7px; }
  #firmware-output { font-size: 11px; line-height: 16px; padding: 4px; }
  .console-note { padding: 3px 8px; font-size: 9px; }
}