:root{--bbv-bg: #06090f;--bbv-board-bg: #080c14;--bbv-surface: #0d1220;--bbv-surface-2: #111827;--bbv-accent: #f2555a;--bbv-accent-glow: rgba(242, 85, 90, .35);--bbv-accent-dim: rgba(242, 85, 90, .12);--bbv-overflow: #fde047;--bbv-overflow-glow: rgba(253, 224, 71, .35);--bbv-carry: #7dd3fc;--bbv-carry-glow: rgba(125, 211, 252, .4);--bbv-border: rgba(255, 255, 255, .06);--bbv-border-strong: rgba(255, 255, 255, .12);--bbv-text: #c8d4e8;--bbv-text-muted: rgba(200, 212, 232, .66);--bbv-msb-border: rgba(242, 85, 90, .5);--bbv-rail-inset: 20px}.binary-bit-visualizer-page{background:var(--bbv-bg);--color-bg: var(--bbv-bg);--color-surface: var(--bbv-surface);--color-surface-2: var(--bbv-surface-2);--color-text: var(--bbv-text);--color-text-muted: var(--bbv-text-muted);--color-border: var(--bbv-border)}.binary-bit-visualizer-page .tool-frame{max-width:920px}.binary-bit-visualizer-page .tool-header-block{max-width:660px}.binary-bit-visualizer-page .page-title{font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1;color:var(--bbv-accent);letter-spacing:-.02em}.binary-bit-visualizer-page .page-subtitle{max-width:52ch;color:var(--bbv-text-muted)}.bbv-tool{display:flex;flex-direction:column;gap:12px}.bbv-board{position:relative;border:1px solid var(--bbv-border-strong);border-radius:20px;background-color:var(--bbv-board-bg);background-image:radial-gradient(circle,rgba(255,255,255,.1) 1.2px,transparent 1.2px);background-size:12px 12px;padding:20px var(--bbv-rail-inset);display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px #f2555a0f,0 16px 48px #0000008c}.bbv-board:before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,85,90,.45),transparent);border-radius:1px}.bbv-controls-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bbv-strip{display:inline-flex;border:1px solid var(--bbv-border-strong);border-radius:10px;overflow:hidden;background:var(--bbv-surface)}.bbv-strip--sm{font-size:.78rem}.bbv-strip-btn{padding:6px 14px;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--bbv-text-muted);background:transparent;border:none;cursor:pointer;transition:color .15s,background .15s;min-height:0;line-height:1.4;white-space:nowrap}.bbv-strip-btn:hover{color:var(--bbv-text)}.bbv-strip-btn.is-active{background:#f2555a1f;color:var(--bbv-accent);box-shadow:inset 0 0 0 1px #f2555a40}.bbv-strip-btn:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:-2px;z-index:1;position:relative}.bbv-rail-header{display:flex;align-items:baseline;gap:10px;min-width:0}.bbv-rail-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bbv-text-muted);white-space:nowrap;flex:0 0 auto}.bbv-result-readout{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.bbv-result-readout-label{font-size:.68rem;color:var(--bbv-text-muted);letter-spacing:.06em}.bbv-result-readout-sep{color:var(--bbv-border-strong)}.bbv-result-val{font-family:var(--font-mono, "Courier New", monospace);font-size:.85rem;color:var(--bbv-text)}.bbv-rail-scroll-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(242,85,90,.3) transparent;border-radius:12px;touch-action:pan-y}.bbv-rail-scroll-wrap::-webkit-scrollbar{height:4px}.bbv-rail-scroll-wrap::-webkit-scrollbar-track{background:transparent}.bbv-rail-scroll-wrap::-webkit-scrollbar-thumb{background:#f2555a4d;border-radius:2px}.bbv-bit-row{display:inline-flex;align-items:center;gap:6px;padding:6px 2px;min-width:100%}.bbv-byte-group{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:6px;background:#00000040}.bbv-bit{display:inline-flex;align-items:center;justify-content:center;width:34px;min-height:44px;border:none;border-radius:6px;cursor:pointer;transition:box-shadow .08s ease,background .08s ease;position:relative;user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;background:#0a1018;box-shadow:inset 0 2px 4px #000000b3,inset 0 -1px 2px #0006,0 0 0 1px #ffffff0f;color:#ffffff26}.bbv-bit:after{content:attr(data-bit-label)}.bbv-bit:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#ffffff14;transition:background .08s,box-shadow .08s}.bbv-bit.bbv-bit--on{background:#1c0810;box-shadow:0 2px 5px #0000008c,0 0 10px var(--bbv-accent-glow),0 0 20px #f2555a26,0 0 0 1px #f2555a99}.bbv-bit.bbv-bit--on:before{background:var(--bbv-accent);box-shadow:0 0 6px var(--bbv-accent),0 0 12px var(--bbv-accent-glow)}.bbv-bit.bbv-bit--msb{box-shadow:inset 0 2px 4px #000000b3,inset 0 -1px 2px #0006,0 0 0 1px var(--bbv-msb-border)}.bbv-bit.bbv-bit--msb.bbv-bit--on{box-shadow:0 2px 5px #0000008c,0 0 10px var(--bbv-accent-glow),0 0 0 1.5px var(--bbv-accent)}.bbv-bit.bbv-bit--overflow{box-shadow:0 2px 5px #0000008c,0 0 0 2px var(--bbv-overflow),0 0 16px var(--bbv-overflow-glow);animation:overflow-pulse 1.5s ease forwards}@keyframes overflow-pulse{0%{box-shadow:0 0 0 2px var(--bbv-overflow),0 0 20px var(--bbv-overflow-glow)}50%{box-shadow:0 0 0 3px var(--bbv-overflow),0 0 28px var(--bbv-overflow-glow)}to{box-shadow:0 0 0 1px #fde04733,0 0 4px transparent}}.bbv-bit.bbv-bit--carry,.bbv-bit.bbv-bit--borrow{transition:none;box-shadow:0 0 0 1.5px var(--bbv-carry),0 0 14px var(--bbv-carry-glow)!important;background:#06131c!important}.bbv-bit.bbv-bit--borrow-stop{box-shadow:0 2px 5px #0000008c,0 0 0 2px var(--bbv-carry),0 0 20px var(--bbv-carry-glow)!important}.bbv-bit.bbv-bit--borrow:before,.bbv-bit.bbv-bit--borrow-stop:before{background:var(--bbv-carry)!important;box-shadow:0 0 8px var(--bbv-carry)!important}.bbv-bit.bbv-bit--carry:before{background:var(--bbv-carry)!important;box-shadow:0 0 8px var(--bbv-carry)!important}.bbv-bit.bbv-bit--carry-stop{box-shadow:0 2px 5px #0000008c,0 0 0 2px var(--bbv-carry),0 0 20px var(--bbv-carry-glow)!important}.bbv-bit.bbv-bit--carry-stop:before{background:var(--bbv-carry)!important;box-shadow:0 0 10px var(--bbv-carry)!important}.bbv-rail-group{display:flex;flex-direction:column;gap:4px}.bbv-place-row{display:inline-flex;align-items:flex-end;gap:6px;padding:0 2px;min-width:100%}.bbv-place-row[hidden]{display:none}.bbv-byte-group--place{border-color:transparent;background:transparent;padding:0 6px 3px}.bbv-place{width:34px;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;font-family:var(--font-mono, "Courier New", monospace);font-size:.62rem;line-height:1.2;color:var(--bbv-text-muted);white-space:nowrap;overflow:hidden}.bbv-place--msb{color:var(--bbv-accent)}.bbv-place--msb b{font-weight:700}.bbv-place--msb i{font-style:normal;font-weight:400;color:var(--bbv-text-muted)}.bbv-sum-line{margin:0;font-family:var(--font-mono, "Courier New", monospace);font-size:1rem;font-weight:600;line-height:1.5;color:var(--bbv-text);overflow-wrap:anywhere}.bbv-signflip-note{margin:0;font-size:.8rem;font-weight:600;color:var(--bbv-overflow);display:flex;align-items:center;gap:6px}.bbv-signflip-note[hidden]{display:none}.bbv-signflip-note:before{content:"";width:10px;height:10px;flex:0 0 auto;border-radius:2px;border:2px solid var(--bbv-overflow)}.bbv-rail-hint{font-size:.72rem;color:var(--bbv-text-muted);line-height:1.4}.bbv-stack-label{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--bbv-text-muted)}.bbv-readout--wide{grid-column:1 / -1}.bbv-readout--wide .bbv-readout-value{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}.bbv-bit--differs{box-shadow:0 0 0 2px var(--bbv-overflow),0 0 14px var(--bbv-overflow-glow)!important;opacity:1!important}.bbv-bit.bbv-bit--invert{box-shadow:inset 0 1px 3px #00000080,0 0 0 1px #c8d4e84d!important;background:#14203a!important}.bbv-bit:after{content:"";position:absolute;inset:0 -2px}.bbv-bit.bbv-bit--readonly{cursor:default;pointer-events:none;min-height:36px;width:30px;border-radius:4px;opacity:.75}.bbv-bit:focus-visible{outline:2px solid var(--bbv-carry);outline-offset:2px;z-index:1}.bbv-row--width-change .bbv-bit{animation:bit-slide-in .3s ease}@keyframes bit-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.bbv-ops-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bbv-ops-sep{flex:0 0 auto;align-self:stretch;width:1px;min-height:24px;margin:0 4px;background:var(--bbv-border-strong)}.bbv-action-btn{padding:6px 16px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--bbv-text);background:var(--bbv-surface-2);border:1px solid var(--bbv-border-strong);border-radius:8px;cursor:pointer;min-height:0;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.bbv-action-btn:hover{background:#f2555a1a;border-color:#f2555a59;color:var(--bbv-accent)}.bbv-action-btn:active{background:#f2555a33}.bbv-action-btn:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:2px}.bbv-action-btn--muted{color:var(--bbv-text-muted);font-weight:500}.bbv-action-btn--muted:hover{color:var(--bbv-text);background:#ffffff0a;border-color:var(--bbv-border-strong)}.bbv-bitop-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.bbv-op-btn{padding:5px 14px;font-size:.78rem;font-weight:700;font-family:var(--font-mono, monospace);letter-spacing:.06em;color:var(--bbv-text-muted);background:var(--bbv-surface);border:1px solid var(--bbv-border-strong);border-radius:6px;cursor:pointer;min-height:0;transition:all .12s}.bbv-op-btn:hover{color:var(--bbv-text)}.bbv-op-btn.is-active{background:#f2555a1f;border-color:#f2555a66;color:var(--bbv-accent)}.bbv-op-btn:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:2px}.bbv-amount-label{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--bbv-text-muted)}.bbv-amount-input{width:48px;padding:4px 8px;font-size:.82rem;font-family:var(--font-mono, monospace);background:var(--bbv-surface);border:1px solid var(--bbv-border-strong);border-radius:6px;color:var(--bbv-text);text-align:center;min-height:0}.bbv-amount-input:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:2px;border-color:var(--bbv-accent)}.bbv-setval-bar,.bbv-setval-wrap{display:flex;flex-direction:column;gap:4px}.bbv-setval{width:100%;max-width:260px;padding:7px 12px;font-size:.85rem;font-family:var(--font-mono, "Courier New", monospace);background:var(--bbv-surface);border:1px solid var(--bbv-border-strong);border-radius:8px;color:var(--bbv-text);box-sizing:border-box;transition:border-color .12s}.bbv-setval::placeholder{color:var(--bbv-text-muted);opacity:.7}.bbv-setval:focus{outline:none;border-color:#f2555a80;box-shadow:0 0 0 3px #f2555a1a}.bbv-setval-hint{font-size:.72rem;margin:0;min-height:1.2em;color:var(--bbv-text-muted);transition:color .15s}.bbv-setval-hint[data-tone=error]{color:#fc8181}.bbv-setval-hint[data-tone=warn]{color:var(--bbv-overflow)}.bbv-row-b-section{display:flex;flex-direction:column;gap:10px}.bbv-result-section{display:flex;flex-direction:column;gap:6px}.bbv-readout-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bbv-readout{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bbv-surface-2);border:1px solid var(--bbv-border);border-radius:12px;transition:background .18s,border-color .18s,box-shadow .18s;min-width:0}.bbv-readout--changed{background:#f2555a14;border-color:#f2555a4d;box-shadow:0 0 12px #f2555a1a}.bbv-readout--overflow{background:#fde04714;border-color:#fde04766;box-shadow:0 0 12px var(--bbv-overflow-glow);animation:overflow-pulse 1.5s ease forwards}.bbv-readout-inner{display:flex;flex-direction:column;gap:1px;min-width:0;flex:0 0 auto}.bbv-readout-label{font-size:.78rem;font-weight:700;color:var(--bbv-accent);white-space:nowrap;letter-spacing:.02em}.bbv-readout-sublabel{font-size:.62rem;color:var(--bbv-text-muted);white-space:nowrap}.bbv-readout-value{font-family:var(--font-mono, "Courier New", monospace);font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:600;color:var(--bbv-text);line-height:1;flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bbv-readout-value--mono{letter-spacing:.06em}.bbv-copy-btn{flex:0 0 auto;padding:4px 8px;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bbv-text-muted);background:transparent;border:1px solid var(--bbv-border-strong);border-radius:6px;cursor:pointer;min-height:0;transition:color .12s,border-color .12s,background .12s;white-space:nowrap}.bbv-copy-btn:hover{color:var(--bbv-accent);border-color:#f2555a66;background:#f2555a0f}.bbv-copy-btn--ok{color:#86efac;border-color:#86efac66;background:#86efac0f}.bbv-copy-btn:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:2px}.bbv-shift-result{display:flex;flex-direction:column;gap:10px;padding:12px 0 0;border-top:1px solid var(--bbv-border)}.bbv-shift-row-block{display:flex;flex-direction:column;gap:6px}.bbv-meta-note{font-size:.72rem;color:var(--bbv-text-muted);line-height:1.5;margin:0}.bbv-meta-note a{color:var(--bbv-accent);text-decoration:none}.bbv-meta-note a:hover{text-decoration:underline}.bbv-bit-index{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--font-mono, "Courier New", monospace);font-size:.75rem;line-height:1;color:var(--bbv-text-muted);pointer-events:none}.bbv-bit--msb .bbv-bit-index{color:var(--bbv-accent)}@media(min-width:681px){.bbv-bit-row,.bbv-place-row{display:flex;width:100%}.bbv-bit-index{display:block;position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:var(--font-mono, "Courier New", monospace);font-size:.6875rem;line-height:1;color:var(--bbv-text-muted);pointer-events:none}.bbv-bit--msb .bbv-bit-index{color:var(--bbv-accent)}.bbv-byte-group{flex:1 1 auto;min-width:0}.bbv-bit,.bbv-bit.bbv-bit--readonly,.bbv-place{flex:1 1 0;width:auto;min-width:20px;max-width:110px}.bbv-bit{min-height:64px;border-radius:8px}.bbv-bit.bbv-bit--readonly{min-height:44px}.bbv-setval{max-width:100%}}@media(min-width:681px)and (max-height:900px){.bbv-board{padding:14px var(--bbv-rail-inset);gap:10px}.bbv-bit{min-height:56px}.bbv-readout{padding:8px 12px}}@media(min-width:681px)and (max-height:520px){.bbv-bit{min-height:40px;max-width:64px}.bbv-bit.bbv-bit--readonly{min-height:30px}.bbv-place{font-size:.55rem}.bbv-bit-row,.bbv-place-row{flex-wrap:wrap;row-gap:4px}.bbv-byte-group{flex:1 0 45%;min-width:0}}@media(max-width:680px){:root{--bbv-rail-inset: 14px}.bbv-board{padding:14px var(--bbv-rail-inset);gap:12px}.bbv-controls-bar{gap:8px}.bbv-strip-btn,.bbv-action-btn,.bbv-op-btn,.bbv-copy-btn{min-height:44px}.bbv-strip-btn{padding:0 12px;font-size:.875rem}#bbv-ops-shift{gap:6px}#bbv-ops-shift .bbv-strip-btn{padding:0 8px}#bbv-ops-shift .bbv-action-btn{padding:0 10px}.bbv-amount-label{gap:4px}.bbv-amount-input{width:44px;min-height:44px}.bbv-rail-scroll-wrap{overflow-x:visible}.bbv-bit-row,.bbv-place-row{display:flex;flex-wrap:wrap;width:100%;row-gap:6px}.bbv-byte-group{flex:1 0 100%;min-width:0}.bbv-bit,.bbv-bit.bbv-bit--readonly,.bbv-place{flex:1 1 0;width:auto;min-width:0}.bbv-bit{min-height:44px;border-radius:5px}.bbv-place{font-size:.5625rem}.bbv-bit.bbv-bit--readonly{min-height:22px;border-radius:4px}.bbv-bit--readonly .bbv-bit-index{font-size:.5rem;bottom:0}.bbv-bit--readonly:before{width:4px;height:4px}.bbv-bit-row--readonly{padding:2px;row-gap:3px}.bbv-bit-row--readonly .bbv-byte-group{padding:2px 4px}.bbv-shift-row-block{gap:3px}.bbv-shift-result{gap:6px;padding-top:8px}.bbv-readout-stack{grid-template-columns:1fr}.bbv-readout{padding:9px 12px;gap:8px}.bbv-readout-value{font-size:1.1rem}.bbv-action-btn{padding:0 14px;font-size:.875rem}.bbv-copy-btn{padding:0 10px;font-size:.875rem}.bbv-rail-label,.bbv-result-readout-label,.bbv-amount-label,.bbv-setval-hint,.bbv-readout-label,.bbv-meta-note,.bbv-readout-sublabel,.bbv-sum-line,.bbv-stack-label,.bbv-signflip-note{font-size:.875rem}.bbv-result-val{font-size:.75rem;min-width:0;overflow-wrap:anywhere}.bbv-rail-hint{display:none}.bbv-strip-btn{min-width:44px}.bbv-setval{max-width:100%}}@media(max-width:420px){.bbv-byte-group{padding:5px;gap:3px}.bbv-bit-row,.bbv-place-row{gap:4px}.bbv-strip-btn{padding:0 9px}}.binary-bit-visualizer-page .tool-discovery__card{background:var(--bbv-surface-2);border-color:var(--bbv-border)}.binary-bit-visualizer-page .tool-discovery__faq-q{color:var(--bbv-text)}.binary-bit-visualizer-page .tool-discovery__faq-a{color:var(--bbv-text-muted)}.binary-bit-visualizer-page .button-primary:focus-visible,.binary-bit-visualizer-page .button-secondary:focus-visible{outline:2px solid var(--bbv-accent);outline-offset:2px}
