.bytes{--tint:13%;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);overflow:hidden}.bytes-head{border-bottom:1px solid var(--line);background:var(--bg-2);align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 18px;display:flex}.bytes-title{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.bytes-size{font-family:var(--font-mono);font-size:var(--step--2);color:var(--subtle);flex:none}.bytes-copy,.code-copy{min-height:36px;color:var(--muted);font-size:var(--step--2);transition:color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);border:1px solid #0000;border-radius:9px;flex:none;align-items:center;gap:6px;margin-left:auto;padding:0 12px;font-weight:600;display:inline-flex}.bytes-copy:hover,.code-copy:hover{color:var(--text-strong);background:var(--surface-2);border-color:var(--line)}.bytes-copy .icon,.code-copy .icon{width:15px;height:15px}.bytes-copy[data-copied=true],.code-copy[data-copied=true]{color:var(--good)}.bytes-hex{font-family:var(--font-mono);font-variant-ligatures:none;letter-spacing:.02em;color:var(--subtle);padding:18px 18px 16px;font-size:.86rem;line-height:2.05}.bytes-hex .fld{color:var(--f,var(--text));background:color-mix(in srgb, var(--f,var(--text)) var(--tint), transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t) var(--ease), box-shadow var(--t-fast) var(--ease);cursor:default;border-radius:5px;padding:.18em .1em}.bytes-hex .b{padding-inline:.16em;display:inline-block}.bytes-hex .fld+.fld{margin-left:.22em}.bytes-hex .fld:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.bytes-hex .fld.is-on{--tint:30%;color:var(--text-strong);box-shadow:0 0 0 1px color-mix(in srgb, var(--f) 70%, transparent)}.bytes.has-active .fld:not(.is-on),.bytes .fld.is-dim:not(.is-on){--tint:0%;color:var(--subtle);box-shadow:inset 0 0 0 1px var(--line)}:root[data-theme=light] .bytes-hex .fld:not(.is-on){color:color-mix(in srgb, var(--f,var(--text)) 82%, var(--text-strong))}:root[data-theme=light] .bytes.has-active .bytes-hex .fld:not(.is-on),:root[data-theme=light] .bytes .bytes-hex .fld.is-dim:not(.is-on){color:var(--subtle)}.bytes-readout{border:1px dashed var(--line-strong);min-height:44px;font-size:var(--step--1);border-radius:10px;align-items:center;margin:0 18px 16px;padding:8px 14px;display:flex;position:relative}.readout-idle{color:var(--subtle);font-size:var(--step--2);font-family:var(--font-mono)}.bytes.has-active .readout-idle{display:none}.readout{flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;display:none}.readout.is-on{display:flex}.readout-label{color:var(--f);font-weight:650}.readout-range{font-family:var(--font-mono);font-size:var(--step--2);color:var(--subtle)}.readout-value{font-family:var(--font-mono);color:var(--text-strong);overflow-wrap:anywhere;min-width:0;font-size:.8rem}.bytes:has(.fld.is-on) .bytes-readout{border-style:solid;border-color:color-mix(in srgb, var(--line-strong) 60%, transparent);background:var(--bg-2)}.bytes-legend-wrap{border-top:1px solid var(--line)}.bytes-legend{border-collapse:collapse;width:100%;font-size:var(--step--1)}.bytes-legend th,.bytes-legend td{text-align:left;vertical-align:top;padding:9px 18px;line-height:1.4}.bytes-legend thead th{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);border-bottom:1px solid var(--line);padding-block:10px;font-size:.66rem;font-weight:500}.bytes-legend tbody tr{cursor:pointer;transition:background-color var(--t-fast) var(--ease), opacity var(--t) var(--ease)}.bytes-legend tbody tr+tr>*{border-top:1px solid var(--line)}.bytes-legend tbody tr.is-on{background:color-mix(in srgb, var(--f) 10%, transparent)}.bytes-legend tbody tr.is-on .lg-chip{box-shadow:0 0 0 4px color-mix(in srgb, var(--f) 30%, transparent)}.bytes .bytes-legend tr.is-dim:not(.is-on) :is(.lg-label,.lg-size,.lg-value,.lg-note){color:var(--subtle)}.bytes .bytes-legend tr.is-dim:not(.is-on) .lg-chip{opacity:.4}.lg-name{align-items:flex-start;gap:10px;display:flex}.lg-chip{background:var(--f);width:10px;height:10px;transition:box-shadow var(--t-fast) var(--ease);border-radius:3px;flex:none;margin-top:.3em}.lg-label{color:var(--text-strong);font-weight:600;display:block}.lg-path{font-family:var(--font-mono);color:var(--subtle);font-size:.72rem;display:block}.lg-bytes{white-space:nowrap;width:1%;font-family:var(--font-mono)}.lg-size{color:var(--text);font-size:.82rem}.lg-range{color:var(--subtle);font-size:.7rem;display:block}.lg-value{font-family:var(--font-mono);color:var(--text);overflow-wrap:anywhere;word-break:break-all;font-size:.8rem}.lg-note{font-family:var(--font-sans);font-size:var(--step--2);color:var(--muted);word-break:normal;margin-top:3px;display:block}.bytes-meta{border-top:1px solid var(--line);background:var(--line);flex-wrap:wrap;gap:1px;display:flex}.bytes-meta div{background:var(--bg-2);flex:170px;min-width:0;padding:12px 18px}.bytes-meta div:first-child:has(.tok){flex-basis:100%}.bytes-meta dt{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);font-size:.66rem}.bytes-meta dd{font-family:var(--font-mono);color:var(--text-strong);overflow-wrap:anywhere;margin:4px 0 0;font-size:.82rem}.bytes-meta .tok{word-break:break-all;font-size:.8rem}.bytes-caption{border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted);padding:12px 18px 14px}@media (width<=640px){.bytes-hex{padding:14px 12px;font-size:.8rem}.bytes-readout{margin:0 12px 12px}.bytes-legend thead{display:none}.bytes-legend,.bytes-legend tbody,.bytes-legend tr{display:block}.bytes-legend tbody tr{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 14px;display:grid}.bytes-legend tbody tr+tr{border-top:1px solid var(--line)}.bytes-legend tbody tr+tr>*{border-top:0}.bytes-legend th,.bytes-legend td{padding:0;display:block}.bytes-legend .lg-value{grid-column:1/-1;padding-left:20px}.bytes-legend .lg-bytes{text-align:right;width:auto}.bytes-head{padding-left:14px}}