.binaryPage{--toolbox-w: 360px;--toolbox-gap: 22px;--toolbox-toggle-top: calc(var(--nav-h) + 16px);--toolbox-top: calc(var(--toolbox-toggle-top) + 60px);position:relative;padding-top:16px;flex:1;display:flex;flex-direction:column}.binaryPage:not(.toolboxCollapsed){padding-right:calc(var(--toolbox-w) + var(--toolbox-gap))}.binaryPage.toolboxCollapsed{padding-right:0}.topGrid{display:flex;align-items:stretch;gap:28px;flex:1}.leftCol{flex:1 1 auto;min-width:0;container-type:inline-size;display:flex;flex-direction:column}.readoutContainer{display:flex;align-items:center;justify-content:center;gap:64px;width:100%}.readout{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:4px}.readoutBlock{display:flex;flex-direction:column;align-items:center;gap:8px}.label{font-family:var(--bit-font);letter-spacing:.14em;text-transform:uppercase;font-size:18px;opacity:.75;margin:0}.num{font-family:var(--num-font);color:#28f07a;text-shadow:0 0 18px rgba(40,240,122,.35);letter-spacing:2px}.denaryValue,.hexValue,.binaryValue{display:flex;gap:16px;justify-content:center;white-space:pre-wrap;text-align:center;margin:0;line-height:1}.denaryValue{font-size:56px}.hexValue{font-size:48px}.binaryValue{font-size:40px}.bitsWrap{width:100%}.bitsGrid{--cols: 8;display:grid;grid-template-columns:repeat(var(--cols),minmax(92px,1fr));gap:26px 22px;align-items:start;justify-items:center}.bitsGrid.bitsFew{justify-content:center}.bit{width:100%;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:8px;container-type:inline-size}.bitVal{font-family:var(--bit-font);font-size:min(32px,calc(140cqw / var(--len, 1)));letter-spacing:2px;color:#e8e8eed9;white-space:nowrap;line-height:1}.hexGrid{--cols: 4;display:grid;grid-template-columns:repeat(var(--cols),minmax(160px,1fr));gap:32px 20px;align-items:start;justify-items:center;width:100%}.hexGrid.bitsFew{justify-content:center}.hexCol{display:flex;flex-direction:column;align-items:center;width:100%}.colorGroupWrap{display:flex;flex-wrap:nowrap;gap:16px;justify-content:center;width:100%}.colorGroup{display:flex;gap:12px;padding:12px;background:#ffffff05;border-radius:20px;border:1px solid rgba(255,255,255,.05);flex:0 1 auto;min-width:0}.colorPreviewSide{display:flex;gap:24px;align-items:center;justify-content:center}.colorBoxWrap{display:flex;flex-direction:column;align-items:center;gap:8px}.colorBox{width:60px;height:60px;border-radius:12px;border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 16px #0006;background-color:#000;transition:background-color .2s ease}.colorBoxLabel{font-family:var(--ui-font);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.text-red{color:#f55!important;text-shadow:0 0 18px rgba(255,85,85,.35)!important}.text-green{color:#28f07a!important;text-shadow:0 0 18px rgba(40,240,122,.35)!important}.text-blue{color:#5af!important;text-shadow:0 0 18px rgba(85,170,255,.35)!important}.hexCard{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:190px;flex:0 1 auto;min-width:0;box-shadow:0 4px 24px #0003;backdrop-filter:blur(10px)}.hexCardButtons{display:flex;gap:10px}.hexCardBtn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);font-family:var(--bit-font);font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:#e8e8eeeb;transition:all .2s ease}.hexCardBtn.inc{background:#28f07a26;border-color:#28f07a40}.hexCardBtn.inc:hover{background:#28f07a40;border-color:#28f07a66}.hexCardBtn.dec{background:#ff50502e;border-color:#ff505040}.hexCardBtn.dec:hover{background:#ff505047;border-color:#ff505066}.hexDigitDisplay{font-family:var(--num-font);font-size:48px;color:#28f07a;text-shadow:0 0 18px rgba(40,240,122,.35);line-height:1}.hexNibbleRow{display:flex;gap:10px;justify-content:center;width:100%}.hexNibbleBit{display:flex;flex-direction:column;align-items:center;gap:6px}.hexNibbleBulb{width:32px!important;height:32px!important;margin-bottom:2px!important}.hexNibbleLabel{font-family:var(--bit-font);font-size:24px;color:#e8e8ee99}.hexColWeight{font-family:var(--bit-font);font-size:40px;color:#e8e8ee99;margin-top:14px}.panelCol{position:fixed;top:var(--toolbox-top);right:22px;width:var(--toolbox-w);z-index:80;display:flex;flex-direction:column;gap:16px;transform:translate(0);opacity:1;transition:transform .42s cubic-bezier(.2,.9,.2,1),opacity .22s ease;bottom:110px;overflow-y:auto;scrollbar-width:none}.panelCol::-webkit-scrollbar{display:none}.panelCol .card{flex-shrink:0}.binaryPage.toolboxCollapsed .panelCol{transform:translate(calc(var(--toolbox-w) + 32px));opacity:0;pointer-events:none}.toggleRow{display:flex;align-items:center;justify-content:space-between;gap:12px}.toggleLabel{font-family:var(--bit-font);font-size:16px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted);transition:color .2s,text-shadow .2s}.toggleLabel.activeMode{color:#28f07a;text-shadow:0 0 12px rgba(40,240,122,.45)}.subCard{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0000001f}.subTitle{font-family:var(--bit-font);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:16px;margin-bottom:10px;opacity:.85}.bitWidthRow{display:flex;align-items:center;gap:10px}.miniBtn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#e8e8eee6;font-family:var(--bit-font);font-weight:900;font-size:22px;cursor:pointer}.miniBtn:hover{border-color:#ffffff38}.bitInputWrap{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;padding:10px 12px}.bitInputLabel{font-family:var(--bit-font);font-size:16px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}.bitInput{width:70px;text-align:right;font-family:var(--num-font);font-size:28px;letter-spacing:2px;color:#28f07a;background:transparent;border:none;outline:none}.controlsRow{display:flex;gap:12px;margin-bottom:12px}.toolRowCentered{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.toolBtn{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#e8e8eeeb;font-family:var(--bit-font);font-size:16px;font-weight:900;cursor:pointer}.toolDec{background:#ff505033;border-color:#ff505040}.toolInc{background:#28f07a2e;border-color:#28f07a40}@container (max-width: 1050px){.readoutContainer{gap:40px}.colorGroupWrap{gap:10px}.colorGroup{padding:10px;gap:8px;border-radius:16px}.hexCard{padding:12px 8px;width:140px;gap:12px}.hexDigitDisplay{font-size:40px}.hexNibbleBulb{width:24px!important;height:24px!important}.hexNibbleLabel{font-size:20px}.hexColWeight{font-size:26px;margin-top:10px}.hexCardBtn{width:34px;height:34px;font-size:14px}}@container (max-width: 800px){.readoutContainer{flex-direction:column;gap:24px}.colorPreviewSide{padding-top:0}.colorGroupWrap{gap:6px}.colorGroup{padding:6px;gap:6px;border-radius:12px}.hexCard{padding:8px 4px;width:90px;gap:8px;border-radius:10px}.hexDigitDisplay{font-size:32px}.hexNibbleBulb{width:16px!important;height:16px!important}.hexNibbleLabel{font-size:16px}.hexColWeight{font-size:20px;margin-top:6px}.hexCardBtn{width:28px;height:28px;font-size:12px}.denaryValue,.hexValue,.binaryValue{font-size:32px;gap:10px}}@media(max-width:1100px){.binaryPage{--toolbox-w: 330px}.denaryValue{font-size:48px}.hexValue{font-size:40px}.binaryValue{font-size:32px}}@media(max-width:900px){.binaryPage{--toolbox-w: 320px}.bitsGrid{grid-template-columns:repeat(var(--cols),minmax(84px,1fr))}.hexGrid{grid-template-columns:repeat(var(--cols),minmax(130px,1fr))}}