.number-conversions-page{min-height:100vh;background:linear-gradient(135deg,#020617,#0b1220 45%,#111827);padding:64px 24px;display:flex;justify-content:center;color:#e2e8f0;font-family:var(--font-teachers),"Sono",system-ui,sans-serif}.number-conversions-shell{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:32px}.number-conversions-topbar{display:flex;flex-direction:column;gap:16px;justify-content:space-between;align-items:flex-start}@media (min-width:640px){.number-conversions-topbar{flex-direction:row;align-items:center}}.number-conversions-article{background-color:#0f172a;border-radius:24px;padding:48px;box-shadow:0 32px 80px rgba(8,12,24,.45);border:1px solid rgba(148,163,184,.25);display:flex;flex-direction:column;gap:48px}.number-conversions-header{text-align:center;display:flex;flex-direction:column;gap:18px}.number-conversions-header h1{margin:0;font-size:clamp(2.75rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;text-align:center;color:transparent;background-image:linear-gradient(90deg,#fbbf24,#f472b6 45%,#38bdf8);background-clip:text;-webkit-background-clip:text}.number-conversions-header p{margin:0 auto;max-width:720px;font-size:1.15rem;line-height:1.9;color:#cbd5f5}.number-conversions-tabs{display:flex;flex-wrap:wrap;gap:12px;border-bottom:1px solid rgba(148,163,184,.25);padding-bottom:20px;margin-bottom:32px}.number-conversions-tab{padding:12px 24px;border-radius:9999px;border:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.4);color:#cbd5f5;font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease}.number-conversions-tab:hover{border-color:rgba(148,163,184,.5);color:#f8fafc;background:rgba(15,23,42,.6)}.number-conversions-tab.active{border-color:rgba(56,189,248,.6);background:rgba(56,189,248,.15);color:#bae6fd;box-shadow:0 0 20px rgba(56,189,248,.3)}.number-conversions-content{display:flex;flex-direction:column;gap:32px}.number-conversions-content h2{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:600;margin:0 0 24px;text-align:center;color:transparent;background-image:linear-gradient(90deg,#c084fc,#f472b6 50%,#60a5fa);background-clip:text;-webkit-background-clip:text}.number-conversions-content p{color:#e2e8f0;font-size:1.05rem;line-height:1.9;margin:0}.method-box-wrapper{margin:40px 0;padding:2px;background:linear-gradient(135deg,rgba(251,191,36,.4),rgba(244,114,182,.4) 45%,rgba(56,189,248,.4));border-radius:20px;box-shadow:0 8px 32px rgba(8,12,24,.3)}.method-box{background:rgba(15,23,42,.6);border-radius:18px;padding:40px 48px;width:100%;height:100%}.method-intro{font-size:1.2rem;font-weight:600;color:#f8fafc;margin:0 0 24px;text-align:center}.method-steps{margin:0;padding-left:32px;list-style:decimal;display:flex;flex-direction:column;gap:16px}.method-steps li{font-size:1.1rem;line-height:1.8;color:#e2e8f0;padding-left:8px}.method-steps li::marker{color:#fbbf24;font-weight:600;font-size:1.2rem}@media (max-width:768px){.method-box{padding:24px 28px}.method-intro{font-size:1.1rem}.method-steps li{font-size:1.05rem}}@media (max-width:900px){.number-conversions-page{padding:48px 18px}.number-conversions-article{padding:36px 28px}}@media (max-width:600px){.number-conversions-page{padding:36px 16px}.number-conversions-article{padding:26px 20px}}.binary-to-denary-demo{display:flex;flex-direction:column;gap:32px;margin:32px 0}.binary-demo-header{text-align:center;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.binary-demo-header h3{margin:0;font-size:1.75rem;font-weight:600;color:#f8fafc}.place-value-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin:24px 0}.place-value-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:2px solid rgba(148,163,184,.25);border-radius:12px;background:rgba(15,23,42,.6);transition:all .3s ease}.place-value-cell.active{border-color:#60a5fa;background:rgba(96,165,250,.15);box-shadow:0 0 20px rgba(96,165,250,.3);transform:scale(1.05)}.place-value-cell.show-value{border-color:#34d399;background:rgba(52,211,153,.15)}.place-value{font-size:1.1rem;font-weight:600;color:#94a3b8}.place-value-cell.active .place-value{color:#60a5fa}.place-value-cell.show-value .place-value{color:#34d399}.binary-digit{font-size:1.5rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#e2e8f0;min-height:1.8rem;display:flex;align-items:center;justify-content:center}.place-value-cell.active .binary-digit{color:#60a5fa;font-size:1.75rem}.value-display{font-size:1rem;font-weight:600;color:#34d399;margin-top:4px}.remainder-display{font-size:.85rem;font-weight:600;color:#fbbf24;margin-top:4px;text-align:center}.place-value-cell.completed{border-color:#34d399;background:rgba(52,211,153,.1)}.addition-steps{margin:24px 0;padding:20px;background:rgba(15,23,42,.6);border-radius:12px;border:1px solid rgba(148,163,184,.25)}.addition-label{margin:0 0 16px;font-size:1.05rem;color:#cbd5e1;text-align:center}.addition-expression{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;font-size:1.5rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#e2e8f0}.plus{color:#94a3b8;margin:0 4px}.equals{color:#94a3b8;margin:0 8px}.calculating{color:#fbbf24;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.answer{color:#34d399;font-size:1.75rem}.final-answer{display:flex;flex-direction:column;gap:20px}.answer-box{text-align:center;padding:24px;background:rgba(52,211,153,.1);border:2px solid #34d399;border-radius:12px;font-size:1.5rem;font-weight:600;color:#34d399;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.step-control-wrapper{margin:0 0 32px;padding:2px;background:linear-gradient(135deg,rgba(251,191,36,.4),rgba(244,114,182,.4) 45%,rgba(56,189,248,.4));border-radius:14px}.step-control-box{padding:16px 24px;background:rgba(15,23,42,.6);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.step-label{margin:0;font-size:1.1rem;color:#e2e8f0;font-weight:500;flex:1;min-width:200px}.next-step-button{padding:10px 20px;font-size:.9rem;font-weight:600;color:#0f172a;background:linear-gradient(90deg,#fbbf24,#f472b6 45%,#38bdf8);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(251,191,36,.25);white-space:nowrap;flex-shrink:0}.next-step-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(251,191,36,.4)}.next-step-button:active{transform:translateY(0)}@media (max-width:768px){.place-value-grid{grid-template-columns:repeat(4,1fr);gap:8px}.place-value{font-size:.95rem}.addition-expression,.binary-digit{font-size:1.25rem}}@media (max-width:480px){.place-value-grid{grid-template-columns:repeat(2,1fr)}}.independent-practice{margin-top:48px}.practice-heading{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:600;margin:0 0 32px;text-align:center;color:transparent;background-image:linear-gradient(90deg,#c084fc,#f472b6 50%,#60a5fa);background-clip:text;-webkit-background-clip:text}.practice-question,.practice-questions{display:flex;flex-direction:column;gap:20px}.practice-question{padding:20px 24px;background:rgba(15,23,42,.6);border:2px solid rgba(148,163,184,.25);border-radius:12px;transition:all .3s ease}.practice-question.correct{border-color:#34d399;background:rgba(52,211,153,.1);box-shadow:0 0 20px rgba(52,211,153,.2)}.practice-question.incorrect{border-color:#f87171;background:rgba(248,113,113,.1);box-shadow:0 0 20px rgba(248,113,113,.2)}.question-text{display:flex;align-items:baseline;gap:12px;font-size:1.1rem;color:#e2e8f0;margin:0}.question-number{font-weight:600;color:#94a3b8}.question-binary{flex:1}.question-binary strong{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1.15rem;color:#fbbf24;font-weight:700}.answer-input-wrapper{display:flex;align-items:center;gap:12px}.answer-input{flex:1;width:100%;padding:12px 16px;font-size:1.2rem;font-weight:600;color:#e2e8f0;background:rgba(15,23,42,.8);border:2px solid rgba(148,163,184,.3);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;transition:all .2s ease;caret-color:#60a5fa;-moz-appearance:textfield}.answer-input::-webkit-inner-spin-button,.answer-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.answer-input.binary-input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.1em}.answer-input::placeholder{color:rgba(148,163,184,.5)}.answer-input:focus{outline:none;border-color:#60a5fa;background:rgba(15,23,42,.95);box-shadow:0 0 0 3px rgba(96,165,250,.2);caret-color:#60a5fa}.answer-input:focus::placeholder{color:rgba(148,163,184,.3)}.practice-question.correct .answer-input{border-color:#34d399;background:rgba(52,211,153,.15);color:#e2e8f0;caret-color:#34d399}.practice-question.incorrect .answer-input{border-color:#f87171;background:rgba(248,113,113,.15);color:#e2e8f0;caret-color:#f87171}.answer-feedback{font-size:1.5rem;font-weight:700;line-height:1}.practice-question.correct .answer-feedback{color:#34d399}.practice-question.incorrect .answer-feedback{color:#f87171}.practice-place-value-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:16px 0}.practice-place-value-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:2px solid rgba(148,163,184,.25);border-radius:8px;background:rgba(15,23,42,.8);transition:all .3s ease}.practice-place-value-cell.active{border-color:#60a5fa;background:rgba(96,165,250,.15);box-shadow:0 0 15px rgba(96,165,250,.25)}.practice-place-value{font-size:.9rem;font-weight:600;color:#94a3b8}.practice-place-value-cell.active .practice-place-value{color:#60a5fa}.practice-binary-digit{font-size:1.2rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#e2e8f0;min-height:1.5rem;display:flex;align-items:center;justify-content:center}.practice-place-value-cell.active .practice-binary-digit{color:#60a5fa;font-size:1.4rem}.practice-place-value-cell.animating{border-color:#fbbf24;background:rgba(251,191,36,.15);box-shadow:0 0 20px rgba(251,191,36,.3);transform:scale(1.05)}.practice-place-value-cell.animating .practice-place-value{color:#fbbf24}.practice-place-value-cell.animating .practice-binary-digit{color:#fbbf24;font-size:1.4rem}.practice-place-value-cell.completed{border-color:#34d399;background:rgba(52,211,153,.1)}.practice-place-value-cell.completed .practice-place-value{color:#34d399}.practice-remainder-display{font-size:.85rem;font-weight:600;color:#fbbf24;margin-top:4px;text-align:center}@media (max-width:768px){.practice-question{padding:16px 20px;gap:16px}.question-text{font-size:1rem;flex-direction:column;gap:8px}.question-binary strong{font-size:1.05rem}.answer-input{width:100%;font-size:1.1rem}.practice-place-value-grid{grid-template-columns:repeat(4,1fr);gap:6px}.practice-place-value{font-size:.85rem}.practice-binary-digit{font-size:1.1rem}.practice-place-value-cell.active .practice-binary-digit{font-size:1.25rem}}@media (max-width:480px){.practice-place-value-grid{grid-template-columns:repeat(2,1fr)}}.binary-hex-grid{display:flex;align-items:flex-start;gap:24px;margin:32px 0;justify-content:center;flex-wrap:wrap}.binary-hex-section{display:flex;flex-direction:column;gap:12px;flex:1;min-width:200px}.nibble-label{text-align:center;font-size:.9rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em}.place-value-grid-nibble{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.binary-hex-divider{width:3px;min-height:200px;background:transparent;border-radius:2px;transition:all .3s ease;margin:0 8px}.binary-hex-divider.visible{background:linear-gradient(180deg,rgba(251,191,36,.5),rgba(244,114,182,.5),rgba(56,189,248,.5));box-shadow:0 0 20px rgba(251,191,36,.4)}.place-value-cell.converting{border-color:#fbbf24;background:rgba(251,191,36,.15);box-shadow:0 0 20px rgba(251,191,36,.3)}.place-value-cell.converting .place-value{color:#fbbf24}.hex-result{font-size:1.1rem;font-weight:700;color:#34d399;margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.binary-hex-grid-practice{display:flex;align-items:flex-start;gap:16px;margin:24px 0;justify-content:center;flex-wrap:wrap}.binary-hex-grid-practice .place-value-grid-nibble{gap:8px}.binary-hex-grid-practice .nibble-label{font-size:.85rem;margin-bottom:8px}.answer-input.hex-input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.2em;text-transform:uppercase;text-align:center}.hex-display-box{margin:32px 0;display:flex;justify-content:center}.hex-display{font-size:2.5rem;font-weight:700;color:#60a5fa;padding:24px 40px;background:rgba(96,165,250,.1);border:2px solid #60a5fa;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:center}.hex-digit-display{font-size:1.5rem;padding:8px 16px}.hex-digit-display,.hex-digit-display-practice{text-align:center;font-weight:700;color:#60a5fa;margin-bottom:12px;background:rgba(96,165,250,.1);border:2px solid #60a5fa;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.hex-digit-display-practice{font-size:1.25rem;padding:6px 12px}.hex-result-center{text-align:center;font-size:1.5rem;font-weight:700;color:#34d399;margin-top:16px;padding:12px;background:rgba(52,211,153,.1);border:2px solid #34d399;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}@media (max-width:768px){.binary-hex-grid{flex-direction:column;gap:16px}.binary-hex-divider{width:100%;min-height:3px;margin:8px 0}.binary-hex-grid-practice{flex-direction:column;gap:12px}.binary-hex-divider.visible{background:linear-gradient(90deg,rgba(251,191,36,.5),rgba(244,114,182,.5),rgba(56,189,248,.5))}}