.live-bitstream{padding:10px 12px 8px;background:linear-gradient(125deg,#102c2d,#102326);border:1px solid #294b49;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff08;color:#c8e3dc}
.bitstream-heading{align-items:center;margin-bottom:7px;gap:8px}.bitstream-heading strong{font-size:9px;letter-spacing:1.1px;white-space:nowrap}.bitstream-heading i{box-shadow:0 0 8px #69d9ac55}.bitstream-heading #bitstream-status{margin-left:auto;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bits-inspect{background:#ffffff08;border:1px solid #43605b;color:#c7e9df;padding:3px 6px;font-size:9px;white-space:nowrap}#bits-inspect:disabled{opacity:.35}
.bits-summary{display:flex;gap:14px;align-items:center;font-size:9px;color:#8eada8;font-variant-numeric:tabular-nums}.bits-summary b{font-size:13px;font-weight:600;color:#e3f8ef}.bits-legend{margin-left:auto;display:flex;align-items:center;gap:4px}.bits-legend i{display:inline-block;width:7px;height:7px;border-radius:1px}.bits-legend .zero{background:#204242;border:1px solid #40635e}.bits-legend .one{background:#66e8bf;margin-left:6px}
.bits-progress{height:2px;background:#254340;margin:7px 0 6px;overflow:hidden}.bits-progress>div{height:100%;width:0;background:#66e8bf;transition:width .15s ease-out}.bits-axis,.bits-foot{display:flex;justify-content:space-between;font-size:8px;color:#87aaa2;gap:6px}.bits-axis{margin-bottom:4px}.bits-foot{margin-top:5px;color:#83a79c}
#bitstream-lines{height:66px;overflow:hidden;display:flex;flex-direction:column;gap:2px}.bitstream-empty{font-size:10px;text-align:center;margin:auto;color:#8eada8;line-height:1.8}
.bits-row{display:grid;grid-template-columns:67px minmax(0,1fr) 34px;gap:7px;align-items:center;height:9px;min-height:9px;width:100%;padding:0;border:none;background:transparent;border-radius:0;text-align:left;cursor:pointer}.bits-row:hover,.bits-row:focus-visible{background:#ffffff14;outline:1px solid #97f1cc;outline-offset:1px}.bits-prefix{font:8px ui-monospace,monospace;letter-spacing:.5px;color:#a2c4b9}.bits-row canvas{width:100%;height:7px;min-width:0;display:block}.bits-hits{position:relative;text-align:right;color:#c7f3df;font:9px ui-monospace,monospace;background:linear-gradient(to right,#4cbd922a var(--hit),transparent var(--hit))}
.bits-marginal{display:flex;align-items:center;gap:7px;font-size:8px;color:#94b7ac;border-top:1px solid #294541;padding-top:5px;margin-top:3px}.bits-marginal span{white-space:nowrap}.bits-marginal canvas{display:block;flex:1;width:0;height:7px;min-width:0}
#bits-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:24px;background:#112b2c;color:#d5ece3;border:1px solid #426258;border-radius:14px;box-shadow:0 24px 100px #00171380}#bits-dialog::backdrop{background:#08242199;backdrop-filter:blur(4px)}.bits-dialog-head{display:flex;justify-content:space-between;align-items:center}.bits-dialog-head p{font-size:10px;letter-spacing:2px;color:#80b6a4;margin:0 0 6px}.bits-dialog-head h2{font-size:23px;margin:0;letter-spacing:-.5px}#bits-close{background:transparent;color:#c7e9df;border:1px solid #43605b;width:32px;height:32px;padding:0}#bits-detail-meta{font:11px ui-monospace,monospace;color:#a7c9ba;line-height:1.7;overflow-wrap:anywhere;margin:17px 0}.bits-detail-tools{display:flex;align-items:center;gap:8px}.bits-detail-tools label{font-size:10px;margin:0;white-space:nowrap;color:#a6c4b9}.bits-detail-tools select{flex:1;min-width:0;color:#d5ece3;background:#183b3a;border-color:#43605b;font-size:11px}#bits-copy{color:#d5ece3;background:#25473f;border-color:#527763;font-size:11px;padding:7px 10px;white-space:nowrap}#bits-copy-status{font-size:10px;color:#8eddb8;margin:8px 0;min-height:12px}
#bits-full{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;font:17px/2 ui-monospace,monospace;letter-spacing:1.5px;background:#091f23;padding:16px;border:1px solid #294b49;border-radius:7px;max-height:220px;overflow:auto;margin:0}.bits-group{display:inline-block;margin-right:9px}.tone-0{color:#87efc1}.tone-1{color:#8bcde6}.tone-2{color:#d9c797}.bits-detail-note{font-size:10px;line-height:1.7;color:#97b7ac;margin:10px 0 16px}#bits-domains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bits-domain{display:flex;align-items:center;gap:7px;background:#1b3838;padding:9px;border:1px solid #2b4845;border-radius:5px;font-size:10px}.bits-domain span{color:#a5c0b6}.bits-domain code{font-size:12px}.bits-domain b{margin-left:auto;font-size:12px}
@media(max-width:800px){.bitstream-heading strong{font-size:8px;letter-spacing:.5px}.live-bitstream{padding:9px}.bits-summary{gap:9px}.bits-row{grid-template-columns:58px minmax(0,1fr) 26px;gap:5px}.bits-prefix{font-size:7px}#bits-dialog{padding:17px}#bits-domains{grid-template-columns:repeat(2,minmax(0,1fr))}.bits-detail-tools{flex-wrap:wrap}.bits-detail-tools label{width:100%}#bits-full{font-size:14px}}
@media(prefers-reduced-motion:reduce){.bits-progress>div{transition:none}}

/* Reserve the board area on desktop; the inspector carries the long records. */
.live-bitstream{padding:7px 10px}.bitstream-heading{margin-bottom:4px}#bits-inspect{height:18px;line-height:12px;padding:1px 6px}.bits-progress{margin:4px 0}.bits-axis{margin-bottom:2px}#bitstream-lines{height:53px}.bits-marginal{padding-top:3px;margin-top:2px}.bits-foot{margin-top:3px}
@media(max-width:800px){#bitstream-lines{height:118px;gap:2px}.bits-row{height:22px;min-height:22px}.bits-row canvas{height:12px}.bits-prefix,.bits-hits{font-size:9px}#bits-inspect{height:25px}}

#bits-dialog:not([open]){display:none}
#bits-dialog.dialog-fallback[open]{display:block;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;z-index:100;box-shadow:0 0 0 100vmax #12362bc0;max-height:85vh;overflow:auto}

/* Readable cumulative bitstrings with a full-width pattern underneath. */
#bitstream-lines{height:138px;overflow-y:auto;gap:4px;padding:2px;scrollbar-width:thin}
.bits-row{grid-template-columns:18px minmax(0,1fr) 64px;gap:8px;height:auto;min-height:38px;flex-shrink:0;padding:5px 4px;border-radius:5px;background:#ffffff05;box-sizing:border-box}
.bits-row:first-child{background:#5ce9b316;box-shadow:inset 2px 0 #76f0c4}
.bits-prefix{font:11px ui-monospace,monospace;color:#b3d6cd;text-align:center;letter-spacing:0}
.bits-pattern{display:block;min-width:0}.bits-digits{display:block;font:11px/1.4 ui-monospace,monospace;color:#d9fff0;letter-spacing:.35px;overflow-wrap:anywhere;margin-bottom:4px}
.bits-row canvas{height:10px}.bits-hits{font-size:12px;color:#e4fff3;white-space:nowrap}.bits-hits small{display:block;font:10px/1.5 ui-monospace,monospace;color:#a6c9be}
.bits-axis,.bits-foot{font-size:9px}.bits-summary{font-size:10px}#bits-inspect{height:28px;font-size:10px;padding:3px 8px}
@media(max-width:800px){#bitstream-lines{height:190px}.bits-row{grid-template-columns:16px minmax(0,1fr) 58px;min-height:48px;gap:6px;padding:6px 3px}.bits-digits{font-size:12px;line-height:1.5;letter-spacing:.2px}.bits-row canvas{height:13px}.bits-hits{font-size:12px}.bits-summary b{font-size:15px}.bits-axis,.bits-foot{font-size:10px}.bitstream-heading strong{font-size:10px}.bits-marginal{font-size:10px}.bits-marginal canvas{height:11px}}