.card { margin: 14px 0; }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.warn { color: #d9534f; min-height: 1.2em; margin: 4px 0; }
.hint { color: var(--muted); font-size: .9rem; margin: 6px 0; }
.mono, .out dd, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre.mono { white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
.out { margin: 8px 0; }
.out > div { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; }
.out > div.target { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 1px solid var(--accent); }
.out dt { width: 5.5em; color: var(--muted); flex: none; }
.out dd { margin: 0; word-break: break-all; }
.out dd:nth-of-type(1) { flex: 1; }
.bitgrid { display: flex; flex-wrap: wrap; gap: 3px; }
.bitgrid .gap { width: 8px; }
.bit { width: 26px; height: 30px; padding: 0; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }
.bit.on { background: var(--accent); color: var(--accent-text); }
.floatbits span, .hint .f-sign, .hint .f-exp, .hint .f-man { padding: 0 2px; border-radius: 3px; }
.f-sign { background: #d9534f; color: #fff; }
.f-exp { background: #2f80ed; color: #fff; }
.f-man { background: #2e9e6b; color: #fff; }
#num, #opA, #opB, #fl, #ts { min-width: 12em; }
@media (max-width: 520px) { .bit { width: 20px; height: 28px; font-size: .8rem; } }