/* TDesign palette, with a task-led layout for the standalone guide. */
:root {
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #20252f; background: #f5f7fa; font-synthesis: none; line-height: 1.6;
  --blue: #0052d9; --orange: #c76a0a; --border: #dfe5ee; --muted: #526176;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select { min-height: 44px; font-size: 14px; border: 1px solid #b8c4d5; border-radius: 6px; background: white; color: inherit; padding: 8px 12px; }
button { cursor: pointer; }
button:hover { border-color: var(--blue); color: var(--blue); background: #f2f6ff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
a { color: var(--blue); text-underline-offset: 3px; }
input[type=range], input[type=checkbox] { accent-color: var(--blue); }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1 { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.3; font-weight: 650; letter-spacing: -.5px; }
h2 { font-size: 16px; line-height: 1.5; font-weight: 650; }
h3 { font-size: 13px; font-weight: 600; }
p { overflow-wrap: anywhere; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px max(24px, calc((100vw - 1632px)/2)); background: #fff; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #20252f; text-decoration: none; font-size: 23px; font-weight: 750; letter-spacing: -.6px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 21px; }
.brand-section { margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--border); font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.header-tools { display: flex; align-items: center; gap: 16px; }
.model-tag { font-size: 12px; color: #415678; background: #eef3fb; border-radius: 4px; padding: 4px 9px; }
.guide-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); align-items: start; gap: 32px; max-width: 1680px; padding: 32px 24px 24px; margin: auto; }
.guide-sidebar { position: sticky; top: 24px; min-width: 0; }
.eyebrow { font-size: 11px; letter-spacing: 1.5px; font-weight: 650; color: var(--blue); margin-bottom: 10px; }
.sidebar-intro { margin-top: 8px; font-size: 13px; color: var(--muted); }
.scene-picker { display: grid; gap: 7px; min-width: 0; margin-top: 24px; font-size: 12px; color: var(--muted); }
.scene-picker select { width: 100%; min-width: 0; color: #20252f; }
.guide-nav { display: grid; gap: 6px; margin-top: 24px; padding-block: 20px; border-block: 1px solid var(--border); }
.guide-nav a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 8px 10px; text-decoration: none; color: #364a68; font-size: 13px; border-radius: 6px; }
.guide-nav a:hover { background: #e9f0ff; color: var(--blue); }
.guide-nav a > span:first-child { font: 12px ui-monospace, monospace; color: var(--blue); }
.guide-key { padding-top: 22px; }
.sidebar-title { font-size: 16px; font-weight: 650; }
.guide-key .guide-key-title { font-size: 13px; font-weight: 600; color: #334966; margin: 0; }
.guide-key p { display: grid; gap: 3px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.guide-key strong { font-size: 13px; color: #334966; }
.topic-links { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 24px; font-size: 12px; }
.topic-links > span { flex-basis: 100%; color: var(--muted); }
.guide-content { min-width: 0; scroll-margin-top: 24px; }
.intro { padding: 0 0 26px; max-width: 850px; }
.intro > p[data-i18n=intro] { margin-top: 12px; color: var(--muted); font-size: 14px; max-width: 720px; }
.scene-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 160px 100px auto; gap: 12px; align-items: end; padding: 16px 18px; border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; background: #fff; }
.scene-toolbar label { display: grid; min-width: 0; gap: 5px; font-size: 12px; color: var(--muted); }
.scene-toolbar select { width: 100%; min-width: 0; }
.scene-toolbar:not(.is-orbit) .projection-picker { grid-column: 2 / 4; }
.view-heading { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; }
.section-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; background: #eaf1ff; color: var(--blue); border-radius: 7px; font: 12px ui-monospace, monospace; }
.workbench { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); align-items: stretch; border: 1px solid var(--border); border-radius: 0 0 10px 10px; background: #fff; overflow: hidden; }
.drawing-panel { min-width: 0; }
.figure-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 20px 20px 12px; }
.figure-heading h2 { font-size: 15px; overflow-wrap: anywhere; }
.figure-heading p { font-size: 12px; color: var(--muted); margin-top: 7px; max-width: 560px; }
.status { flex-shrink: 0; font-size: 11px; padding: 4px 7px; max-width: 106px; border-radius: 4px; white-space: normal; background: #edf2fb; color: #22497d; }
.status[data-tone=good] { background: #e4f5ec; color: #166441; }
.status[data-tone=bad] { background: #fff1e9; color: #8e420c; }
#diagram{display:block;width:100%;height:auto;touch-action:pan-y;background:#fcfdff}#diagram text{font-family:inherit;fill:#4e5c70;paint-order:stroke;stroke:#fcfdff;stroke-width:5px;stroke-linejoin:round}#diagram .shape{stroke-width:2;vector-effect:non-scaling-stroke}#diagram .receiver{stroke:#0052d9;fill:#0052d9;fill-opacity:.055}#diagram .sender{stroke:#ca7612;fill:#eeaa3a;fill-opacity:.14}#diagram .reference{stroke:#748096;fill:#e5e9ef;fill-opacity:.75;stroke-width:2;vector-effect:non-scaling-stroke}#diagram .active-shape{stroke-width:3;fill-opacity:.14}#diagram .inactive-shape{stroke-opacity:.28;fill-opacity:.025}#diagram .dimension{fill:none;stroke:#5d6e85;stroke-width:1.3;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}#diagram .dimension-label{fill:#334761}#diagram .axis{stroke:#8997aa;stroke-width:1.5;vector-effect:non-scaling-stroke}#diagram .grid{stroke:#e9edf3;stroke-width:1;vector-effect:non-scaling-stroke}#diagram .center{fill:#0052d9;stroke:white;stroke-width:2;vector-effect:non-scaling-stroke}#diagram .moving{cursor:grab;fill:#d7801c;stroke:white;stroke-width:3;vector-effect:non-scaling-stroke}#diagram .moving:active{cursor:grabbing}#moving-root{touch-action:none}#diagram .moving-hit{fill:transparent;stroke:none;pointer-events:all}#moving-root:focus-visible .moving{stroke:#0052d9;stroke-width:4}#diagram .anchor-label{fill:#1b407c;font-weight:650}#diagram .box-edge{stroke:#6881ac;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}#diagram .sps-edge{stroke:#9cb1d2;stroke-width:1.2;stroke-dasharray:5 4;fill:none;vector-effect:non-scaling-stroke}#diagram .grid-axis-label{fill:#617187}
.legend { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; padding: 12px 20px 16px; border-top: 1px solid #edf0f4; }
.legend label { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 12px; color: #45536a; }
.legend input[type=checkbox] { margin: 0; width: 15px; height: 15px; }
.key { width: 10px; height: 10px; border: 1.5px solid; border-radius: 50%; display: inline-block; }
.receiver-key { border-color: #0052d9; background: #e9f0fc; }
.sender-key { border-color: #c76a0a; background: #fff0dc; }
.reference-key { border-color: #748096; background: #e5e9ef; }
.coverage-key { border-color: #07806a; background: #bde8d6; }
.zoom-label { margin-left: auto; }
.zoom-label input { width: 76px; }
figcaption { font-size: 12px; color: var(--muted); padding: 0 20px 14px; }
.readout-panel { padding: 20px 18px; border-left: 1px solid var(--border); min-width: 0; background: #fafcff; }
.readout-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.caption { font-size: 12px; color: var(--muted); }
.code, output, .number { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.path-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin: 16px 0 6px; }
.path-heading .path { margin: 0; color: #1b407c; font-size: 13px; overflow-wrap: anywhere; }
.path-assembly { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#row-hint { margin-top: 12px; }
.table-scroll { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 14px; }
th { font-weight: 500; color: #526176; text-align: left; border-bottom: 1px solid var(--border); padding: 8px 5px; }
th:not(:first-child) { text-align: right; }
td { padding: 8px 5px; border-bottom: 1px solid #e7edf6; vertical-align: middle; }
td:first-child { max-width: 170px; overflow-wrap: anywhere; }
td button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; padding: 3px 0; min-height: 28px; background: transparent; text-align: left; color: #174b91; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
td.number { text-align: right; white-space: nowrap; font-size: 13px; }
tr.selected { background: #eaf1ff; }
#parameter-meaning { margin-top: 14px; padding: 12px; background: #edf4ff; color: #244a7b; border-radius: 6px; }
.metric-list { display: grid; gap: 10px; margin-top: 18px; }
.metric { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e7edf6; padding-bottom: 9px; font-size: 12px; }
.metric span { color: var(--muted); }
.metric strong { font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.explanation { font-size: 12px; line-height: 1.75; margin-top: 18px; color: #45536a; }
.controls-panel { scroll-margin-top: 24px; margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 20px 22px; }
.controls-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.controls-heading > p { max-width: 650px; }
.control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.control { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: start; gap: 8px 12px; font-size: 12px; min-width: 0; }
.control > span { word-break: keep-all; }
.control output { color: #184883; text-align: right; font-size: 12px; }
.control input[type=range] { grid-column: 1/-1; width: 100%; margin: 0; height: 24px; }
.toggle-control { align-items: start; justify-items: start; }
.toggle-control input { width: 18px; height: 18px; margin: 0; }
.controls-panel > p { margin-top: 18px; }
.signal-simulation { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.signal-simulation summary { cursor: pointer; color: #334966; font-size: 13px; min-height: 30px; }
.signal-simulation > p { margin: 10px 0 16px; }
.signal-simulation .control-grid { margin-bottom: 14px; }
.shader-technical { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px 32px; margin-top: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.shader-technical > div { min-width: 0; }
.shader-technical #metrics { margin-top: 14px; }
.shader-technical #explanation { margin-top: 14px; }
.workbench.is-shader td { padding-block: 3px; }
.workbench.is-shader td button { min-height: 22px; padding-block: 2px; }
.encoding-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; margin: 0 0 12px; }
#bit-grid { display: block; width: 100%; height: auto; background: #fff; image-rendering: pixelated; shape-rendering: crispEdges; border: 1px solid #e2e7ef; border-radius: 2px; }
.encoding-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.encoding-facts span { padding: 3px 7px; border-radius: 4px; font-size: 11px; color: #35547d; background: #edf3fc; }
#encoding-hint { margin-top: 10px; }
.parameter-reference { scroll-margin-top: 24px; margin-top: 32px; min-width: 0; }
.parameter-reference > p { margin-top: 8px; max-width: 880px; }
.parameter-reference-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 18px; min-width: 0; }
.parameter-reference-card { min-width: 0; background: white; border: 1px solid var(--border); border-radius: 8px; }
.parameter-reference-card[data-selected=true] { border-color: #8baded; }
.parameter-reference-card > summary { cursor: pointer; padding: 15px 16px; overflow-wrap: anywhere; line-height: 1.6; }
.parameter-reference-card > summary::marker { color: var(--blue); }
.parameter-reference-name { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-size: 13px; color: #1b407c; overflow-wrap: anywhere; }
.parameter-reference-subtitle { display: block; margin: 5px 0 0 18px; color: var(--muted); font-size: 12px; }
.parameter-reference-body { padding: 0 18px 18px; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.parameter-reference-body > p { margin-top: 8px; }
.parameter-reference-body h3 { font-size: 12px; font-weight: 600; margin: 16px 0 5px; }
.parameter-reference-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; border-block: 1px solid #edf0f4; padding: 12px 0; margin: 16px 0; }
.parameter-reference-facts > div { min-width: 0; }
.parameter-reference-facts dt { font-size: 11px; color: var(--muted); }
.parameter-reference-facts dd { font-size: 12px; margin: 4px 0 0; overflow-wrap: anywhere; }
.parameter-reference-sources { margin: 6px 0 0; padding-left: 20px; font-size: 12px; }
.parameter-reference-sources li + li { margin-top: 6px; }
.parameter-reference-sources a { overflow-wrap: anywhere; }
.calculation-notes { margin-top: 24px; border-block: 1px solid var(--border); }
.calculation-notes > summary { cursor: pointer; padding: 18px 4px; font-size: 14px; font-weight: 600; color: #334966; }
.reading-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 2px 4px 24px; }
.reading-notes p { font-size: 13px; color: #46536a; margin-top: 10px; }
.reading-notes p.caption { font-size: 12px; color: var(--muted); }
footer { display: flex; gap: 12px 20px; flex-wrap: wrap; padding-top: 20px; margin-top: 8px; font-size: 12px; }
footer span { flex-basis: 100%; color: var(--muted); }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { display: block; padding: 12px 24px; background: #fff; }
.three-scene{background:#fcfdff}.three-viewport{position:relative;width:100%;height:clamp(320px,30vw,420px);overflow:hidden}.three-canvas{display:block;width:100%;height:100%;touch-action:none}.three-canvas:focus-visible{outline-offset:-4px}.three-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.three-label{position:absolute;display:block;max-width:calc(100% - 16px);padding:1px 4px;white-space:nowrap;font-size:12px;line-height:20px;color:#40516b;background:rgba(252,253,255,.92);border-radius:3px}.three-label--anchor{color:var(--anchor-color,#1b407c);font-weight:600}.three-label--active{background:#e6efff}.three-label--anchor.three-label--active{background:#fcfdff;outline:1px solid currentColor;outline-offset:0}.three-label--moving{color:#8c4806}.three-label--decoded{color:#0052d9}.three-label--dimension{color:#46566c;font-variant-numeric:tabular-nums}.three-label--axis,.three-label--origin{color:#5e6c80}.three-controls{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 20px 6px}.three-control-group{display:flex;gap:4px}.three-controls button{min-width:32px;padding:4px 8px;font-size:16px;line-height:22px}.three-hint{padding:0 24px 14px;font-size:12px;color:var(--muted)}.three-fallback{margin:12px 20px;padding:10px 12px;background:#fff2e5;border-left:3px solid #c76a0a;color:#7e4108;font-size:12px}
.anchor-swatch{display:inline-block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--anchor-color)}td button{display:inline-flex;align-items:center;gap:6px;max-width:100%}.metric.anchor-colored>span{color:var(--anchor-color);font-weight:600}.receiver-key.is-multiple{display:inline-flex;gap:2px;width:auto;height:10px;border:0;border-radius:0;background:none}.anchor-key-color{width:5px;height:10px;border-radius:1px;background:var(--anchor-color)}#diagram .receiver.anchor-colored{stroke:var(--anchor-color);fill:var(--anchor-color)}#diagram .center.anchor-colored{fill:var(--anchor-color)}#diagram .anchor-label.anchor-colored,#diagram .dimension-label.anchor-colored{fill:var(--anchor-color)}#diagram .dimension.anchor-colored{stroke:var(--anchor-color)}#diagram .reference-rim{fill:none;stroke:#748096;stroke-width:1.6;vector-effect:non-scaling-stroke}#diagram .reference-socket{fill-opacity:.65}#diagram .reference-plug{fill-opacity:.8}

#diagram .coverage-region { fill: #07806a; fill-opacity: .2; stroke: #08765f; stroke-width: 2; vector-effect: non-scaling-stroke; }
#diagram .coverage-exclusion { fill: #fcfdff; stroke: #a23d67; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 1200px) {
  .guide-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding-inline: 20px; }
  .workbench { grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); }
  .scene-toolbar { grid-template-columns: minmax(0, 1fr) 140px 90px auto; gap: 9px; }
  .view-heading { font-size: 12px; }
  .figure-heading { padding-inline: 16px; }
  .readout-panel { padding: 18px 14px; }
  .shader-technical { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 24px; }
}
@media (max-width: 1000px) {
  .guide-shell { display: block; padding: 24px 20px; }
  .guide-sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 24px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .guide-sidebar > .eyebrow { grid-column: 1; margin-bottom: 0; }
  .guide-sidebar > .sidebar-title { grid-column: 1; }
  .sidebar-intro { grid-column: 1; margin-top: 0; }
  .scene-picker { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; }
  .guide-nav { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0 0; margin-top: 8px; border: 0; }
  .guide-nav a { padding-inline: 0; }
  .guide-key, .topic-links { display: none; }
  .workbench { grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); }
}
@media (max-width: 760px) {
  .page-header { padding: 12px 16px; }
  .brand-section, .model-tag { display: none; }
  .guide-shell { padding: 22px 16px; }
  .guide-sidebar { display: block; margin-bottom: 22px; padding-bottom: 16px; }
  .guide-sidebar > .sidebar-title { font-size: 15px; }
  .sidebar-intro { margin-top: 5px; font-size: 12px; }
  .scene-picker { margin-top: 16px; }
  .guide-nav { gap: 4px 14px; margin-top: 12px; }
  .guide-nav a { font-size: 11px; gap: 6px; min-height: 36px; }
  .intro { padding-bottom: 22px; }
  .intro > p[data-i18n=intro] { font-size: 13px; }
  .scene-toolbar { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; gap: 10px; }
  .view-heading { grid-column: 1/-1; font-size: 14px; min-height: 30px; }
  .scene-toolbar.is-orbit .projection-picker { grid-column: 1 / -1; }
  .scene-toolbar:not(.is-orbit) .projection-picker { grid-column: 1; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .readout-panel { padding: 18px 16px; border-left: 0; border-top: 1px solid var(--border); }
  .figure-heading { padding: 16px 14px 12px; }
  .figure-heading h2 { font-size: 14px; }
  .figure-heading p { font-size: 12px; }
  .status { max-width: 95px; }
  figcaption { padding-inline: 14px; }
  .legend { padding: 12px 14px; gap: 6px 12px; }
  .zoom-label { margin-left: 0; }
  .controls-panel { padding: 18px 16px; }
  .controls-heading { display: block; }
  .controls-heading p { margin-top: 8px; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .shader-technical { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px 16px; }
  .shader-technical #shader-encoded-preview { width: 100%; max-width: 360px; justify-self: center; }
  .parameter-reference-cards, .reading-notes { grid-template-columns: minmax(0, 1fr); }
  .reading-notes { gap: 20px; }
  .parameter-reference-card > summary { padding: 13px 14px; }
  .parameter-reference-body { padding: 0 16px 16px; }
}
@media (max-width: 420px) { .parameter-reference-facts { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) {
  .three-label { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
  .three-label--anchor.three-label--active { background: Canvas; outline-color: CanvasText; }
  .three-fallback { color: CanvasText; background: Canvas; border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
@media (pointer: coarse) { .three-controls button { min-width: 44px; } .control input[type=range] { height: 28px; } }

.encoding-steps { list-style: none; counter-reset: decode-step; margin: 20px 0; padding: 0; display: grid; gap: 18px; }
.encoding-steps li { counter-increment: decode-step; position: relative; padding-left: 36px; }
.encoding-steps li::before { content: counter(decode-step, decimal-leading-zero); position: absolute; left: 0; top: 1px; color: var(--blue); font: 12px/24px ui-monospace, monospace; }
.encoding-steps strong { display: block; font-size: 13px; font-weight: 600; }
.encoding-steps span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
#shader-statistics { border-top: 1px solid var(--border); padding-top: 14px; }
#shader-statistics > summary { cursor: pointer; min-height: 32px; font-size: 13px; color: #334966; }
/* Parameter search and the signal workbench follow the desktop control layout. */
.parameter-search { margin-top: 20px; display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.parameter-search > input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #b8c4d5; border-radius: 6px; padding: 8px 10px; background: #fff; }
#parameter-search-results { display: grid; gap: 6px; max-height: 380px; overflow: auto; }
#parameter-search-results button { display: grid; gap: 3px; text-align: left; min-width: 0; padding: 8px; }
#parameter-search-results strong { font-size: 12px; overflow-wrap: anywhere; }
#parameter-search-results span { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.signal-workbench { margin-top: 24px; padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.signal-heading, .signal-connect { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.signal-heading p, .signal-connect p { margin-top: 6px; }
.signal-reading { font: 600 30px ui-monospace, monospace; color: var(--blue); min-width: 90px; text-align: right; }
.signal-settings { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(80px, .6fr) repeat(2, minmax(120px, 1fr)) auto; gap: 14px; margin-top: 20px; align-items: end; }
.signal-settings > label { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.signal-settings select, .signal-settings input[type=number] { width: 100%; min-width: 0; min-height: 44px; font: inherit; color: #20252f; border: 1px solid #b8c4d5; border-radius: 6px; background: #fff; padding: 8px 10px; }
.signal-settings > .signal-invert { display: flex; align-items: center; min-height: 44px; }
.signal-invert input { width: 18px; height: 18px; }
.signal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.signal-actions output { font-size: 12px; color: var(--muted); }
.signal-actions button:disabled, .signal-connect button:disabled { opacity: .55; cursor: default; }
#signal-trace { display: block; width: 100%; height: auto; max-height: 180px; margin-top: 18px; background: #f7faff; border-radius: 7px; }
#signal-trace text { font: 11px ui-monospace, monospace; fill: #526176; }
.trace-grid { fill: none; stroke: #dfe5ee; }
.trace-line { fill: none; stroke: #0052d9; stroke-width: 2; vector-effect: non-scaling-stroke; }
.signal-connect { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 20px; justify-content: start; }
.signal-connect > div { flex: 1 1 300px; }
@media (max-width: 1100px) { .signal-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .signal-workbench { padding: 16px; } .signal-settings { grid-template-columns: minmax(0, 1fr); } .signal-reading { font-size: 26px; } }
.signal-workbench > summary { min-height: 28px; cursor: pointer; font-size: 15px; font-weight: 600; color: #244a7b; }
.signal-workbench[open] > summary { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; }

.movement-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 20px; }
.movement-presets > span { color: var(--muted); font-size: 12px; margin-right: 5px; }
.movement-presets button { font-size: 12px; }