:root { font-family: Bahnschrift, 'Segoe UI', sans-serif; color: #222c2c; background: #f1f4f3; --accent: #087b67; --line: #cbd7d2; --muted: #5c6d67; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background-image: linear-gradient(120deg, #edf2f0, #fafafa); }
[hidden] { display: none !important; }
.sensor-source-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-block: 12px; }
.sensor-source-controls label { display: grid; gap: 5px; min-width: 0; }
.sensor-source-note { border-left: 3px solid #297da4; padding-left: 10px; font-size: 13px; overflow-wrap: anywhere; }
.sensor-source-note:empty { display: none; }
.sensor-image-figure { margin: 12px 0; }
#sensor-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.sensor-image-figure figcaption, #sensor-image-status { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sensor-image-objects { display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.sensor-image-objects article { min-width: 0; border: 1px solid var(--line); padding: 10px; border-radius: 4px; }
.sensor-image-objects button { max-width: 100%; text-align: left; overflow-wrap: anywhere; font-weight: 600; }
.sensor-image-objects button[aria-pressed=true] { border-color: var(--accent); background: #dcece5; }
.sensor-image-objects p { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
#sensor-image-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
button, input, select { font: inherit; }
button { cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #253a32; min-height: 36px; }
button:hover:not(:disabled) { background: #e5efeb; border-color: #8da89b; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: #096957; }
button.danger { color: #fff; background: #b93540; border-color: #b93540; }
input, select { padding: 8px; border: 1px solid #acbdb5; border-radius: 4px; background: #fff; max-width: 100%; min-width: 0; }
input:focus, button:focus-visible, select:focus { outline: 2px solid #148d76; outline-offset: 2px; }
input[type=range] { padding: 0; accent-color: var(--accent); }
label { font-size: 13px; color: var(--muted); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.brand > div { min-width: 0; }
.brand-mark { display: grid; place-items: center; height: 36px; width: 36px; font-size: 24px; font-weight: 700; color: #fff; background: #163b30; border-radius: 4px; }
.brand strong { font-size: 22px; display: block; line-height: 1.1; }
.brand div > span { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.account { display: flex; align-items: center; gap: 12px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
main { width: 100%; max-width: 1680px; margin: 0 auto; padding: 24px 28px; flex: 1; }
.login-view { display: grid; place-items: center; min-height: 60vh; }
#login-form { width: min(100%, 390px); display: grid; gap: 12px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 23px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
.workspace-bar { display: flex; align-items: end; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.workspace-bar > div:first-child { display: grid; gap: 6px; }
.workspace-bar select { min-width: 170px; }
.modes { display: flex; }
.modes button { border-radius: 0; min-width: 110px; }
.modes button:first-child { border-radius: 4px 0 0 4px; }
.modes button:last-child { border-radius: 0 4px 4px 0; }
.modes button[aria-pressed=true] { background: #173f32; color: #fff; border-color: #173f32; }
#headless-toggle[aria-pressed=true] { background: #173f32; color: #fff; border-color: #173f32; }
.workspace-bar { flex-wrap: wrap; }
.workspace-recovery { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block: 12px; }
.recovery-status:empty { display: none; }
.recovery-status:not(:empty) { display: block; padding: 10px 12px; border-left: 3px solid #b93540; color: #872d37; background: #fff4f5; }
#session-control summary { cursor: pointer; padding: 10px 0; }
#setup-test-output { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.vision-consumer { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); }
.admin-metrics > div { min-width: 0; padding: 18px; }
.admin-metrics span { display: block; min-height: 36px; font-size: 12px; }
.admin-metrics strong { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.admin-metrics canvas { display: block; width: 100%; height: 48px; }
.admin-dispatch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-block: 18px; border-block: 1px solid var(--line); }
.admin-dispatch section { min-width: 0; overflow-wrap: anywhere; }
#admin-admission-queue, #admin-command-lanes { max-height: 240px; overflow: auto; }
.admin-filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.admin-inventory { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 22px; margin-top: 18px; }
.admin-inventory .table-scroll { max-height: 560px; }
.admin-inventory .data-table { min-width: 800px; }
.admin-inventory td { font-size: 12px; overflow-wrap: anywhere; }
.admin-inventory tr[data-selected=true] { background: #dcece5; }
.admin-note-editor { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); }
.admin-note-editor textarea { width: 100%; resize: vertical; font: inherit; }
.admin-note-editor p, #panel-admin > p { font-size: 12px; color: var(--muted); line-height: 1.5; }
#admin-status[data-stale=true] { color: #aa321b; }
@media (max-width: 1100px) { .admin-inventory { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 650px) { .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-dispatch { grid-template-columns: minmax(0,1fr); } }
.connection { margin-left: auto; padding: 9px 0; color: var(--accent); font-size: 13px; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; padding-top: 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 38px; margin-bottom: 12px; }
.section-heading h1, .section-heading h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.section-heading button { font-size: 12px; }
.camera-surface { width: 100%; aspect-ratio: 16 / 10; min-height: 220px; background: #111716; position: relative; }
.camera-surface iframe { border: 0; width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.camera-placeholder { display: grid; place-items: center; position: absolute; inset: 0; color: #a4bbb0; font-size: 14px; pointer-events: none; padding: 18px; text-align: center; overflow-wrap: anywhere; }
.camera-section, .camera-view { min-width: 0; }
.environment-heading { flex-wrap: wrap; }
.environment-preview-notice { padding: 12px 28px; background: #94344a; color: white; font-size: 14px; overflow-wrap: anywhere; }
.environment-heading label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.environment-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.environment-model { min-width: 0; border-top: 2px solid #168571; padding-top: 16px; }
.environment-model + .environment-model { border-color: #297da4; }
.environment-model .section-heading { flex-wrap: wrap; }
.environment-model output { font-size: 12px; overflow-wrap: anywhere; }
.environment-canvas { position: relative; width: 100%; height: 330px; overflow: hidden; background: #f0f4f4; }
.environment-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.environment-overlay { position: absolute; bottom: 12px; left: 12px; right: 12px; pointer-events: none; color: #41575f; }
.environment-selection { display: block; min-height: 42px; padding: 9px 12px; border-left: 3px solid #b3394d; background: #fff4f5; color: #263238; overflow-wrap: anywhere; }
.data-table tbody tr[aria-selected="true"] { background: #ffe8eb; box-shadow: inset 3px 0 #b3394d; }
.data-table tbody tr[tabindex] { cursor: pointer; }
.environment-view-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 16px; font-size: 12px; color: var(--muted); }
.environment-view-tools button { font-size: 12px; }
.sensor-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
.sensor-controls label { display: flex; align-items: center; gap: 7px; }
#sensor-resources { margin-bottom: 16px; }
.environment-model .object-toolbar { flex-wrap: wrap; }
.environment-model .table-scroll { max-height: 300px; }
.environment-model details { margin-top: 16px; font-size: 13px; }
.environment-model pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.environment-model tbody tr { cursor: pointer; }
.environment-model tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 1000px) { .environment-models { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .environment-canvas { height: 260px; } }
.camera-section > .section-heading { flex-wrap: wrap; }
.camera-quality { display: flex; align-items: center; gap: 8px; }
.camera-quality select { padding: 6px 8px; font-size: 13px; }
.velocity-test-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.velocity-test-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.velocity-test-controls label { display: grid; gap: 5px; width: 80px; }
.velocity-test-controls input { width: 100%; }
.liquid-drop-controls label { width: 280px; max-width: 100%; min-width: 0; }
.liquid-drop-controls select { width: 100%; min-width: 0; }
.liquid-drop-controls .liquid-force-label { width: 140px; }
.liquid-drop-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; }
.liquid-drop-checks[hidden] { display: none; }
#liquid-drop-output { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.pickup-criteria { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0; }
#velocity-test-output, #velocity-test-previous-output { max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.camera-views { display: grid; gap: 20px; }
.camera-view .section-heading { flex-wrap: wrap; }
.camera-view .section-heading h2 { font-size: 15px; }
.camera-view .camera-surface { aspect-ratio: 16 / 10; min-height: 0; }
.overview-interaction { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.overview-interaction:active { cursor: grabbing; }
.overview-interaction:focus-visible { outline: 2px solid #63baaa; outline-offset: -3px; }
.overview-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
.overview-toolbar .modes button { min-width: 58px; padding: 8px; font-size: 12px; }
.overview-toolbar label { flex: 1 1 110px; display: grid; gap: 5px; }
.overview-toolbar input { width: 100%; }
.overview-toolbar > button { font-size: 12px; }
.overview-control-status { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.telemetry-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 16px 0; gap: 12px; }
.telemetry-strip span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.telemetry-strip strong { font: 14px 'Cascadia Code', Consolas, monospace; }
.live-diagnostics { border-bottom: 1px solid var(--line); padding: 18px 0; min-width: 0; }
.live-diagnostics .developer-actions { margin: 12px 0; flex-wrap: wrap; }
.live-diagnostics select { width: 100%; max-width: 100%; }
.live-diagnostics label { min-width: 0; max-width: 100%; }
.live-diagnostics .telemetry-record { display: flex; align-items: center; gap: 8px; }
.telemetry-record input { width: 16px; height: 16px; }
.live-diagnostics dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.telemetry-history { height: 180px; overflow: auto; margin: 8px 0; }
.live-diagnostics pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
#telemetry-health { font-weight: 600; }
#telemetry-health[data-status="live"] { color: var(--accent); }
#telemetry-health[data-status="stale"], #telemetry-health[data-status="frozen"], #telemetry-health[data-status="restarted"] { color: #aa321b; }
.board-section { min-width: 0; margin-top: 24px; }
.board-section .section-heading { flex-wrap: wrap; }
#board-freshness { font-size: 12px; color: var(--muted); }
.board-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(120px, 1fr); gap: 20px; align-items: start; }
.board-map { width: 100%; max-width: 380px; aspect-ratio: 1; position: relative; }
.board-plane { position: absolute; inset: 18px; }
.board-surface { position: absolute; width: 85%; aspect-ratio: 1; container-type: inline-size; }
#chess-board { display: grid; width: 100%; aspect-ratio: 1; grid-template-columns: minmax(0,.5fr) repeat(8,minmax(0,1fr)); grid-template-rows: repeat(8,minmax(0,1fr)) minmax(0,.5fr); }
#chess-board colgroup { display: none; }
#chess-board tbody, #chess-board tfoot, #chess-board tr { display: contents; }
#chess-board th { padding: 0; font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; }
#chess-board th, .board-square { display: grid; place-items: center; min-width: 0; min-height: 0; }
.board-square { padding: 0; text-align: center; background: #e4edeb; }
.board-square.dark { background: #668e9b; }
.board-square.conflict { box-shadow: inset 0 0 0 3px #b94343; }
.board-piece { font-family: 'Segoe UI Symbol', 'DejaVu Sans', serif; font-size: min(30px, 9cqi); line-height: 1; color: #203a3b; -webkit-text-stroke: .4px #f9fcfb; }
.board-piece.white { color: #fff; -webkit-text-stroke: 1px #203a3b; }
.board-conflict { font-size: 18px; font-weight: 700; color: #8c1925; }
.board-arm-base { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; transform: translate(-50%,-50%); border: 2px solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #203a3b26; }
.board-arm-base svg { width: 28px; height: 22px; }
.board-arm-key { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--accent); }
.board-arm-key svg { width: 26px; height: 20px; flex: 0 0 auto; }
.board-details { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#board-unplaced { padding-left: 18px; max-height: 280px; overflow: auto; }
@media (max-width: 1250px) { .board-layout { grid-template-columns: minmax(0, 380px); } }
.control-section { border-left: 1px solid var(--line); padding-left: 24px; min-width: 0; }
.badge { font-size: 12px; color: #426253; }
.control-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.control-actions button { font-size: 12px; padding: 8px; }
.joint-guide { margin: 18px 0 0; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.joint-guide figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.joint-guide figcaption span { color: var(--muted); font-size: 12px; }
#joint-map { display: block; width: 100%; max-width: 340px; aspect-ratio: 34 / 21; height: auto; margin: 0 auto; }
.joint-map-ground { fill: none; stroke: #a6b9b0; stroke-width: 2; }
.joint-map-base, .joint-map-tool { fill: #dce4e4; stroke: #526969; stroke-width: 2; stroke-linejoin: round; }
.joint-map-outline, .joint-map-link, .joint-map-coupling { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.joint-map-outline { stroke: #526969; stroke-width: 22; }
.joint-map-link { stroke: #dce4e4; stroke-width: 16; }
.joint-map-coupling { stroke: #8ac2ce; stroke-width: 16; }
.joint-map-marker circle { fill: #0b705e; stroke: #fff; stroke-width: 2; }
.joint-map-marker text { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.joint-map-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 12px; }
.joint-map-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.joint-map-legend span { color: var(--accent); font-weight: 700; }
.step-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.step-row input { width: 80px; }
.joint-row { display: grid; grid-template-columns: 35px 1fr 42px 42px; gap: 8px; align-items: center; border-bottom: 1px solid #dce4e0; padding: 7px 0; min-height: 51px; }
.joint-row strong { font-size: 14px; }
.joint-value { font: 14px 'Cascadia Code', Consolas, monospace; text-align: right; padding-right: 12px; }
.joint-row button { font-size: 20px; padding: 0; width: 42px; height: 36px; }
.joint-target-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 88px 56px; gap: 8px; align-items: end; padding-bottom: 6px; }
.joint-target-controls > input { width: 100%; min-width: 0; margin-bottom: 12px; }
.joint-target-controls label { display: grid; gap: 4px; font-size: 11px; }
.joint-target-controls label input { width: 100%; padding: 6px; height: 36px; }
.joint-target-controls button { width: 56px; font-size: 12px; }
.gripper-section { margin-top: 22px; }
.gripper-section h2 { margin-bottom: 12px; }
.gripper-section > label { display: flex; justify-content: space-between; }
.gripper-section > input { width: 100%; margin: 10px 0; }
.gripper-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gripper-settings label { display: grid; gap: 5px; }
#gripper-apply { width: 100%; }
.command-status { display: block; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.error, #login-error { color: #a22633; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; margin: 8px 0 0; }
.fault-panel { border-left: 3px solid #b93540; padding: 12px; margin-top: 16px; background: #fff2f1; font-size: 13px; overflow-wrap: anywhere; }
.fault-panel p { margin: 6px 0 10px; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 28px; color: #6a7972; font-size: 12px; border-top: 1px solid var(--line); }
.workspace-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-top: 16px; }
.workspace-tabs { flex-wrap: wrap; }
#reset-workspace { color: #872d37; background: #fff; border-color: #b87179; }
.workspace-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; }
.workspace-tabs button[aria-selected=true] { border-bottom-color: var(--accent); color: #075949; }
.discovery-section { padding-top: 22px; min-width: 0; }
.object-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.object-toolbar label { display: grid; gap: 6px; flex: 1 1 150px; }
.object-toolbar button { flex: 0 1 auto; }
.table-scroll { overflow: auto; max-height: 480px; border-top: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.data-table th { position: sticky; top: 0; background: #edf2f0; }
.data-table td:first-child { overflow-wrap: anywhere; min-width: 130px; }
.data-table td:not(:first-child) { white-space: nowrap; }
.data-table caption { text-align: left; padding: 12px 0; color: var(--muted); }
#object-feedback { color: var(--muted); font-size: 13px; }
.capability-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0 0 20px; }
.capability-summary dt { font-size: 12px; color: var(--muted); }
.capability-summary dd { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.capability-table td:not(:first-child) { white-space: normal; }
.capability-table code { display: block; overflow-wrap: anywhere; color: var(--muted); margin-top: 6px; }
.capability-table p { margin: 6px 0 0; color: var(--muted); }
.api-guide { border-top: 1px solid var(--line); padding: 18px 0 24px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.api-guide h3 { font-size: 14px; margin: 16px 0 8px; }
.api-guide .section-heading { flex-wrap: wrap; }
.api-guide .section-heading h3 { margin: 0; }
.api-guide pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; background: #e5ece8; padding: 12px; max-width: 100%; }
.developer-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.developer-actions a { color: #076752; font-size: 13px; overflow-wrap: anywhere; }
.developer-actions a[aria-disabled="true"] { color: #69726e; pointer-events: none; text-decoration: none; }
.developer-actions select { max-width: 100%; min-width: 0; }
.setup-run-figure { margin: 16px 0 20px; }
.setup-run-figure img { display: block; width: min(100%, 1100px); height: auto; border: 1px solid var(--line); }
.setup-run-figure figcaption { margin-top: 8px; color: var(--muted); }
.website-flow { margin: 24px 0; }
.website-flow h3 { margin-bottom: 12px; }
.website-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.website-flow-steps li { position: relative; min-width: 0; padding: 14px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 4px; background: #fff; }
.website-flow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + 8px); width: 12px; height: 12px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.website-flow-steps strong, .website-flow-steps span { display: block; }
.website-flow-steps span { margin-top: 5px; color: var(--muted); line-height: 1.4; }
.website-flow figcaption { margin-top: 12px; color: var(--muted); }
@media (max-width: 850px) {
	.website-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.website-flow-steps li:not(:last-child)::after { top: calc(100% + 7px); left: 50%; transform: translateX(-50%) rotate(135deg); }
}
.scene-pose-fields { min-width: 0; margin: 12px 0; border: 1px solid var(--line); }
.scene-pose-fields label { flex: 1 1 110px; min-width: 0; }
.scene-pose-fields input { width: 100%; min-width: 0; }
.object-spawn-controls label { display: grid; gap: 4px; width: 110px; }
.object-spawn-controls input, .object-spawn-controls select { width: 100%; min-width: 0; }
.api-guide .developer-inspection-output { max-height: 320px; overflow: auto; }
.api-tool { border-top: 1px solid var(--line); }
.discovery-section { overflow-wrap: anywhere; }
.discovery-section summary { cursor: pointer; padding: 8px 0; }
.discovery-section summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.badge-todo { color: #80330e; background: #fff0d6; padding: 2px 8px; }
.discovery-section .badge-implemented, .discovery-section .badge-todo { display: inline-block; padding: 2px 8px; border-radius: 3px; font-weight: 600; vertical-align: middle; }
.discovery-section .badge-implemented { color: #175735; background: #dcefe2; border: 1px solid #8ac29b; }
.discovery-section .badge-todo { color: #80330e; background: #fff0d6; border: 1px solid #dbac64; }
.skills-heading { margin-top: 26px; }
.skill-examples { display: grid; grid-template-columns: minmax(0,1fr); }
.skill-example { border-top: 1px solid var(--line); padding: 14px 0; min-width: 0; }
.skill-example h3 { display: inline; font-size: 15px; margin: 0 12px 0 0; }
.skill-example .badge-experimental { color: #805300; font-weight: 600; }
.skill-mode-note { font-size: 13px; line-height: 1.5; margin: 10px 0; color: var(--muted); }
.skill-loop { margin: 16px 0; }
.feedback-loop { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; padding-left: 24px; }
.feedback-loop li { min-width: 0; padding: 8px 0; border-top: 1px solid var(--line); }
.feedback-loop span, .feedback-loop strong { display: block; }
.feedback-loop span { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.skill-loop figcaption, .composition-list p { font-size: 13px; line-height: 1.6; }
.composition-list { padding-left: 24px; }
.composition-list li { padding: 8px 0; }
@media (max-width: 640px) { .feedback-loop { grid-template-columns: minmax(0,1fr); } }
.skill-example pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; background: #f1f4f3; padding: 10px; }
.skill-example .skill-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.skill-example .skill-output { max-height: 280px; overflow: auto; }
.transfer-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.transfer-form label { display: grid; gap: 6px; }
.transfer-form input { min-width: 0; width: 100%; }
.transfer-form .skill-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.checkmate-result .skill-output { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: #f1f4f3; }
.transfer-form .skill-actions { grid-column: 1 / -1; }
.test-scope { max-width: 900px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.test-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 28px; }
.test-case { border-top: 1px solid var(--line); padding-top: 14px; min-width: 0; }
.test-case h3 { font-size: 15px; margin: 0 0 6px; }
.test-case p, .test-case output { display: block; font-size: 13px; line-height: 1.5; margin: 0 0 10px; overflow-wrap: anywhere; }
.test-case p { color: var(--muted); }
.test-case output[data-result=PASS] { color: #076752; }
.test-case output[data-result=FAIL] { color: #a22633; }
.test-case output[data-result=BLOCKED], #setup-test-status[data-result=INCOMPLETE] { color: #855d10; }
#setup-test-status[data-result=PASS] { color: #076752; }
#setup-test-status[data-result=FAIL] { color: #a22633; }
#setup-test-cases { display: flex; flex-direction: column; }
#setup-test-cases .test-case { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 4px 24px; padding: 12px 0; }
@media (max-width: 640px) { #setup-test-cases .test-case { grid-template-columns: minmax(0,1fr); } }
.test-actions, #desktop-test-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; }
.test-actions a, #desktop-test-sources a { color: #076752; }
.test-output { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; padding: 12px; background: #e5ece8; font-size: 12px; }
.ros-topic-table { min-width: 920px; }
.ros-topic-table td { vertical-align: top; }
.ros-topic-table td:first-child { min-width: 200px; max-width: 270px; }
.ros-topic-table code { display: block; font-size: 11px; margin-top: 6px; overflow-wrap: anywhere; }
.ros-topic-table td:nth-child(6), .ros-topic-table td:nth-child(7) { white-space: pre-line; overflow-wrap: anywhere; max-width: 190px; }
.ros-topic-table pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; min-width: 190px; max-width: 270px; font-size: 11px; }
#ros-health[data-health=live] { color: #076752; }
#ros-health[data-health=offline] { color: #a22633; }
#ros-status { margin-bottom: 12px; }
.skill-example a, .skills-heading a { color: #076752; font-size: 13px; }
.proposed-skills { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.skill-roadmap-group { margin-top: 22px; }
.skill-roadmap-group h3 { font-size: 16px; margin: 0 0 12px; }
.skill-placeholder { border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; min-width: 0; }
.skill-placeholder[open] { padding-bottom: 12px; }
.skill-placeholder-title h4 { display: inline; font-size: 14px; margin: 0 12px 0 0; overflow-wrap: anywhere; }
.proposed-skills p { margin: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
.skill-placeholder-requirement { color: var(--muted); }
@media (max-width: 700px) { .capability-summary { grid-template-columns: 1fr 1fr; } .data-table th, .data-table td { padding: 8px; } }
@media (min-width: 1500px) { .camera-views { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .workbench { grid-template-columns: 1fr; } .control-section { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; } .joints { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } }
@media (max-width: 560px) { .topbar { padding: 12px 16px; } main { padding: 16px; } .brand strong { font-size: 20px; } .workspace-bar { flex-wrap: wrap; gap: 12px; } .workspace-bar select { min-width: 140px; } .modes button { min-width: 88px; padding: 8px; } .connection { margin-left: 0; width: 100%; padding: 0; } .telemetry-strip { grid-template-columns: 1fr 1fr; } .joints { grid-template-columns: 1fr; } .camera-surface { min-height: 180px; } .account { flex-wrap: wrap; justify-content: flex-end; } footer { padding: 12px 16px; font-size: 11px; } }