.protocol-workspace, .protocol-console, .protocol-evidence, .protocol-helpers, .protocol-history, .protocol-reset { min-width: 0; }
.protocol-heading, .protocol-response-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.protocol-device { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr); gap: 32px; padding: 24px 0; align-items: center; }
.protocol-face { background: var(--surface, #0b0b0b); color: var(--text, #eaeae7); border: 1px solid var(--line-strong, #303030); border-radius: var(--radius-panel, 12px); padding: 20px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.protocol-mechanism { position: relative; height: 124px; border: 1px solid var(--line-strong, #303030); border-radius: var(--radius, 8px); background: var(--background, #000); overflow: hidden; }
.protocol-moving-part { position: absolute; inset: 12px; border: 1px solid var(--field-line, #626262); border-radius: 4px; background: var(--surface-raised, #161616); transition: transform .25s ease-out, background-color .25s ease-out; }
.protocol-indicator { position: absolute; width: 8px; height: 8px; border: 1px solid var(--quiet, #999995); border-radius: 50%; bottom: 8px; right: 12px; background: var(--surface-raised, #161616); }
.protocol-device[data-active="true"] .protocol-indicator { border-color: var(--text, #eaeae7); background: var(--text, #eaeae7); }
.protocol-display { background: var(--background, #000); color: var(--text, #eaeae7); border: 1px solid var(--line-strong, #303030); border-radius: 4px; padding: 8px; text-align: center; font: 500 14px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.protocol-device[data-power="off"] .protocol-display { color: var(--muted, #a0a09c); background: var(--surface-raised, #161616); }
.protocol-device[data-kind="second-bell"] .protocol-mechanism, .protocol-device[data-kind="setup-still-open"] .protocol-mechanism { width: 124px; margin-inline: auto; border-radius: 50%; }
.protocol-device[data-kind="second-bell"] .protocol-moving-part { border-radius: 50%; inset: 7px; border-top-width: 5px; }
.protocol-device[data-kind="setup-still-open"][data-active="true"] .protocol-moving-part { border-color: var(--text, #eaeae7); }
.protocol-device[data-kind="stale-map"] .protocol-mechanism { background: var(--surface-raised, #161616); border-top: 8px solid var(--muted, #a0a09c); }
.protocol-device[data-kind="stale-map"] .protocol-moving-part { inset: 48px 0 0; background: var(--surface, #0b0b0b); border: 0; border-top: 1px solid var(--field-line, #626262); border-radius: 0; }
.protocol-device[data-kind="stale-map"][data-brightness="low"] .protocol-mechanism { background: var(--background, #000); border-top-color: var(--line-strong, #303030); }
.protocol-device[data-kind="stale-map"][data-brightness="high"] .protocol-mechanism { background: var(--button-secondary-hover, #2a2a2a); border-top-color: var(--text, #eaeae7); }
.protocol-device[data-kind="shared-queue"] .protocol-mechanism { height: 90px; border: 0; background: transparent; border-radius: 0; }
.protocol-device[data-kind="shared-queue"] .protocol-moving-part { inset: 44px 0 8px; background: var(--surface-raised, #161616); border-radius: 4px; border-bottom: 4px solid var(--field-line, #626262); }
.protocol-device[data-kind="torn-enrollment"] .protocol-moving-part, .protocol-device[data-kind="the-transfer-desk"] .protocol-moving-part { inset: 8px; border-radius: 2px; border-right: 4px solid var(--field-line, #626262); transform-origin: left; }
.protocol-device[data-open="true"] .protocol-moving-part { transform: perspective(280px) rotateY(-45deg); }
.protocol-device[data-kind="eight-bits-later"] .protocol-moving-part { background: var(--text, #eaeae7); width: 12px; inset: 16px auto auto 12px; height: 16px; border: 0; border-radius: 0; }
.protocol-device[data-kind="pocket-directory"] .protocol-moving-part { width: 84px; height: 84px; border-radius: 50%; margin: auto; border: 12px solid var(--field-line, #626262); background: var(--surface-raised, #161616); }
.protocol-device[data-kind="good-checksum"] .protocol-moving-part { inset: 20px; border-radius: 50%; border: 8px solid var(--field-line, #626262); background: var(--surface-raised, #161616); }
.protocol-device[data-kind="echo-chamber"] .protocol-moving-part { inset: 20px 64px; border-radius: 4px; box-shadow: -52px 0 0 -8px var(--field-line, #626262), 52px 0 0 -8px var(--field-line, #626262); }
.protocol-readings h3 { margin-top: 0; }
.protocol-readings dl { margin: 0; display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 8px 16px; font-size: 14px; }
.protocol-readings dt { color: var(--muted, #a0a09c); }
.protocol-readings dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.protocol-data { font-family: ui-monospace, monospace; font-size: .82rem; }
.protocol-model-note { max-width: 75ch; }
.protocol-evidence ul { padding-left: 1.25rem; line-height: 1.9; overflow-wrap: anywhere; }
.protocol-console label, .protocol-helpers label { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin: 16px 0 8px; }
.protocol-console select, .protocol-console input, .protocol-console textarea, .protocol-helpers textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px; border: 1px solid var(--field-line); background: var(--surface); color: inherit; border-radius: var(--radius, 6px); font: inherit; caret-color: var(--text); }
.protocol-console textarea, .protocol-helpers textarea { font: .86rem/1.5 ui-monospace, monospace; resize: vertical; }
.protocol-fields { margin-bottom: 20px; }
.protocol-fields .small-copy { margin: 8px 0 0; }
.protocol-console form { max-width: 780px; }
.protocol-response { white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 440px; padding: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--radius, 6px); font: 13px/1.65 ui-monospace, monospace; tab-size: 2; scrollbar-color: var(--field-line) var(--surface); }
.protocol-response-heading { margin-top: 24px; }
.protocol-response-heading h3 { margin: 0; }
.protocol-helpers button { margin-top: 12px; }
.protocol-helpers h3 { margin-top: 28px; }
.protocol-helpers input[type="checkbox"] { margin-right: 8px; accent-color: var(--text, #eaeae7); }
.protocol-console [data-error="true"] { color: #ffad9d; }
.protocol-workspace ::selection, .protocol-console ::selection, .protocol-helpers ::selection { background: var(--text, #eaeae7); color: var(--background, #000); }
.protocol-evidence a { text-underline-offset: .2em; }
.protocol-console :focus-visible, .protocol-helpers :focus-visible, .protocol-evidence :focus-visible { outline: 2px solid var(--focus, #eaeae7); outline-offset: 3px; }
.protocol-helpers > summary, .protocol-history > summary { min-height: 44px; padding-block: 8px; cursor: pointer; font-size: 15px; }
.protocol-reset button:disabled, .protocol-console button:disabled, .protocol-helpers button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 640px) { .protocol-device { grid-template-columns: 1fr; gap: 20px; } .protocol-face { min-height: 152px; padding: 16px; } .protocol-mechanism { height: 92px; } .protocol-readings dl { grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr); } .protocol-response { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .protocol-moving-part { transition: none; } }