.byte-converter-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.byte-workspace [hidden] { display: none !important; }
.byte-workspace *, .byte-workspace *::before, .byte-workspace *::after { box-sizing: border-box; }
.byte-workspace :is(input, select, textarea, button) { font: inherit; }
.byte-workspace :is(button, select) { font-family: var(--font-display); min-height: var(--tool-control-height); }
.byte-workspace :is(button, input, select, summary):focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.byte-workspace .view-tabs button[aria-pressed="true"] { border-color: var(--line-strong); color: #031006; background: var(--phosphor); }
.byte-workspace .workspace-bar { gap: 12px; }
.width-option { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.75rem; }
.byte-workspace select { border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: #061009; padding: 6px 8px; max-width: 100%; }
.numeric-content { padding: 10px 16px 0; }
.byte-hint, .byte-assessment { margin: 10px 0 0; font-family: var(--font-body); font-size: 0.73rem; line-height: 1.6; overflow-wrap: anywhere; }
.byte-hint { color: var(--muted); }
.byte-workspace .entry-hint { margin: 0; }
.numeric-field { margin-top: 12px; }
.field-head { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 6px; font-size: 0.78rem; color: var(--phosphor-soft); }
.field-head label, .field-head > span:first-child { font-weight: 600; }
.field-head button { margin-left: auto; flex-shrink: 0; padding: 4px 10px; font-size: 0.74rem; }
.byte-auto-note { color: var(--muted); font-size: 0.68rem; }
.byte-input { display: block; width: 100%; resize: vertical; border: 1px solid rgba(126, 215, 255, 0.24); border-radius: 5px; color: var(--text); background: rgba(1, 6, 3, 0.9); padding: 10px 12px; font-size: 0.9rem !important; line-height: 1.6; tab-size: 4; }
.byte-input::placeholder { color: #8aaa91; }
.byte-input:focus { outline: 2px solid var(--ice); outline-offset: -2px; }
.byte-input[aria-invalid="true"] { border-color: var(--amber); }
.numeric-input { min-height: 46px; height: 46px; }
#datatype-binary { height: 68px; }
.numeric-field[data-source="true"] .field-head label, [data-ascii-pane][data-source="true"] .field-head label { color: var(--ice); }
.stored-result { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.stored-result > output { display: block; color: var(--text); font-size: 1.12rem; overflow-wrap: anywhere; line-height: 1.5; }
.result-badge { color: var(--ice); font-size: 0.7rem; }
.byte-assessment { min-height: 3.2em; color: var(--phosphor-soft); }
.byte-assessment[data-state="error"] { color: var(--amber); }
.representation-list { margin: 0; }
.representation-row { border-top: 1px solid rgba(95, 255, 135, 0.12); padding: 10px 0; }
.representation-row dt { color: var(--muted); font-size: 0.7rem; margin-bottom: 5px; }
.representation-row dd { display: flex; align-items: start; gap: 10px; margin: 0; }
.representation-row output { flex: 1; min-width: 0; color: var(--text); font-size: 0.84rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.representation-row button { flex: 0 0 auto; font-size: 0.74rem; padding: 4px 10px; }
.byte-details { margin-top: 10px; border-top: 1px solid var(--line); }
.byte-details summary { min-height: 44px; padding: 12px 0; color: var(--ice); cursor: pointer; font-size: 0.76rem; }
.byte-details .representation-list { max-height: 260px; overflow: auto; padding-right: 6px; }
.bit-inspector { border-top: 1px solid var(--line); padding: 10px 0; }
.bit-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0; color: var(--phosphor-soft); font-size: 0.74rem; }
.bit-sign-label { color: #ffc879; }
.bit-exponent-label { color: var(--ice); }
.bit-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.bit-grid button { min-width: 0; min-height: 40px; padding: 4px 0; border-radius: 3px; font-family: var(--font-body); color: var(--phosphor-soft); }
.bit-grid button[data-part="sign"] { color: #ffc879; border-color: #b58b45; }
.bit-grid button[data-part="exponent"] { color: var(--ice); border-color: #527e8f; }
.bit-grid button[aria-pressed="true"] { background: rgba(95, 255, 135, 0.17); }
.byte-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.byte-pair .workspace-pane { min-height: 0; min-width: 0; }
.ascii-pair .byte-input { height: clamp(144px, 22dvh, 200px); min-height: 120px; }
.byte-input::selection { background: #326644; color: #fff; }
.ascii-context { position: relative; padding: 0 12px; border-top: 1px solid var(--line); }
.ascii-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 44px; padding: 6px 74px 6px 0; }
.ascii-facts .byte-assessment { margin: 0; min-height: 0; flex-shrink: 0; }
.ascii-selection { color: var(--ice); font-size: 0.72rem; line-height: 1.5; overflow-wrap: anywhere; }
.ascii-context .byte-details { margin: 0; border: 0; }
.ascii-context summary { position: absolute; top: 0; right: 12px; padding: 12px 6px; }
.ascii-more { border-top: 1px solid var(--line); padding: 12px 0; }
.ascii-field-status { display: flex; align-items: center; }
.ascii-field-status > button { margin-top: 4px; }
.byte-workspace :is(.ascii-issue, .ascii-controls) { min-width: 0; min-height: 32px; padding: 4px 0; text-align: left; background: transparent; border: 0; border-radius: 2px; font-family: var(--font-body); font-size: 0.7rem; line-height: 1.5; text-transform: none; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; }
.byte-workspace .ascii-issue { color: var(--amber); }
.byte-workspace .ascii-controls { color: var(--ice); }
.byte-workspace .ascii-issue:disabled { opacity: 1; }
.ascii-pair [data-ascii-copy], .ascii-more [data-ascii-copy] { width: 72px; }
[data-ascii-copy][data-feedback="success"] { color: var(--ice); }
[data-ascii-copy][data-feedback="error"] { color: var(--amber); }
.ascii-more #ascii-escape-input { min-height: 80px; height: 100px; }
.ascii-escape-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
#ascii-escape-status { font-size: 0.72rem; color: var(--ice); }
.byte-options { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 6px 0 12px; }
.byte-options > label { display: grid; gap: 5px; color: var(--muted); font-size: 0.75rem; min-width: 0; }
.byte-workspace .status-line { min-height: 40px; overflow-wrap: anywhere; }
[data-byte-tool="datatype"] .numeric-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
[data-byte-tool="datatype"] .numeric-field { margin: 0; min-width: 0; }
.numeric-field--binary { grid-column: 1 / -1; }
[data-byte-tool="datatype"][data-mode="integer"] .numeric-field--binary { grid-column: auto; }
[data-byte-tool="datatype"] #datatype-binary { height: 48px; }
[data-byte-tool="datatype"] [data-copy] { width: 72px; flex-shrink: 0; }
[data-byte-tool="datatype"] [data-copy][data-feedback="success"] { color: var(--ice); }
[data-byte-tool="datatype"] [data-copy][data-feedback="error"] { color: var(--amber); }
.datatype-field-issue { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--amber); font-size: 0.73rem; line-height: 1.6; overflow-wrap: anywhere; }
.datatype-field-issue > span { flex: 1; min-width: 180px; }
.byte-workspace .datatype-field-issue button { padding: 4px 0; border: 0; background: transparent; color: var(--ice); font-family: var(--font-body); font-size: 0.73rem; text-transform: none; letter-spacing: normal; }
.datatype-context { position: relative; margin-top: 12px; border-top: 1px solid var(--line); }
.datatype-context .byte-assessment { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 124px 6px 0; }
.datatype-context .result-badge { color: var(--phosphor-soft); font-size: inherit; }
.datatype-context [data-state="warning"] .result-badge, .datatype-context [data-state="error"] .result-badge { color: var(--amber); }
.datatype-context > .byte-details { margin: 0; border: 0; }
.datatype-context > .byte-details > summary { position: absolute; top: 0; right: 0; padding: 12px 4px; }
.datatype-inspection { border-top: 1px solid var(--line); padding: 12px 0; }
.datatype-inspection .bit-inspector { border: 0; padding-top: 0; }
.datatype-bit-selection { min-height: 2em; margin: 6px 0; color: var(--ice); font-size: 0.73rem; line-height: 1.5; }
@media (min-width: 901px) {
    [data-byte-tool="datatype"][data-mode="integer"][data-width="64"] #datatype-binary { height: 72px; }
}
@media (max-width: 900px) {
    .byte-pair { grid-template-columns: minmax(0, 1fr); }
    .byte-pair .workspace-pane + .workspace-pane { border-left: 0; border-top: 1px solid var(--line); }
    .bit-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    [data-byte-tool="datatype"] .numeric-fields { grid-template-columns: minmax(0, 1fr); }
    [data-byte-tool="datatype"][data-width="64"] #datatype-binary { height: 72px; }
}
@media (max-width: 720px) {
    .byte-workspace .workspace-bar { flex-direction: row; align-items: center; gap: 8px; }
    .byte-workspace .workspace-bar--controls .view-tabs { width: auto; }
    .byte-workspace .workspace-actions--inline { display: flex; width: auto; margin-left: auto; }
    .byte-workspace .workspace-actions--inline > button { width: auto; padding-inline: 10px; }
    [data-byte-tool="datatype"] .workspace-actions--inline > button { font-size: 0.75rem; }
    .byte-workspace .view-tabs button { font-size: 0.75rem; padding-inline: 8px; }
    .byte-workspace .workspace-actions--inline, .byte-workspace .view-tabs { flex-wrap: wrap; }
    .byte-workspace :is(button, select, .check-option) { min-height: 44px; }
    .numeric-content { padding-left: 10px; padding-right: 10px; }
    .byte-input { font-size: 1rem !important; }
    .numeric-input { height: 48px; min-height: 48px; }
    #datatype-binary { height: 96px; }
    [data-byte-tool="datatype"] #datatype-binary { height: 72px; }
    [data-byte-tool="datatype"][data-width="64"] #datatype-binary { height: 104px; }
    .byte-workspace .datatype-field-issue button { min-height: 44px; }
    .ascii-pair .byte-input { height: 132px; }
    [data-byte-tool="ascii"] .entry-hint { display: none; }
    .byte-workspace :is(.ascii-issue, .ascii-controls) { min-height: 44px; }
    .field-head { flex-wrap: wrap; gap: 6px; }
    .stored-result .field-head .result-badge { order: 3; flex-basis: 100%; }
    .representation-row output { font-size: 0.8rem; }
}
@media (max-width: 370px) { .bit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 371px) and (max-width: 720px) {
    [data-byte-tool="datatype"] .workspace-bar--controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    [data-byte-tool="datatype"] .workspace-bar--controls .view-tabs { grid-column: 1 / -1; }
    [data-byte-tool="datatype"] .workspace-actions--inline { justify-self: end; }
}