.file-sizes-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}.file-sizes-shell{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:32px}.file-sizes-topbar{display:flex;flex-direction:column;gap:16px;justify-content:space-between;align-items:flex-start}@media (min-width:640px){.file-sizes-topbar{flex-direction:row;align-items:center}}.file-sizes-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}.file-sizes-header{text-align:center;display:flex;flex-direction:column;gap:18px}.file-sizes-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}.file-sizes-header p{margin:0 auto;max-width:720px;font-size:1.15rem;line-height:1.9;color:#cbd5f5}.file-sizes-tabs{display:flex;flex-wrap:wrap;gap:12px;border-bottom:1px solid rgba(148,163,184,.25);padding-bottom:20px;margin-bottom:32px}.file-sizes-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}.file-sizes-tab:hover{border-color:rgba(148,163,184,.5);color:#f8fafc;background:rgba(15,23,42,.6)}.file-sizes-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)}.file-sizes-content{display:flex;flex-direction:column;gap:32px}.file-sizes-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}.file-sizes-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){.file-sizes-page{padding:48px 18px}.file-sizes-article{padding:36px 28px}}@media (max-width:600px){.file-sizes-page{padding:36px 16px}.file-sizes-article{padding:26px 20px}}.guided-practice-demo{display:flex;flex-direction:column;gap:32px;margin:32px 0}.demo-header{text-align:center;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.demo-header h3{margin:0;font-size:1.75rem;font-weight:600;color:#f8fafc}.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)}.calculation-box{margin:24px 0;padding:20px;background:rgba(15,23,42,.6);border-radius:12px;border:1px solid rgba(148,163,184,.25)}.calculation-step{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:1.25rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#e2e8f0;margin:12px 0}.calculation-label{margin:0 0 16px;font-size:1.05rem;color:#cbd5e1;text-align:center}.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;margin-top:24px}.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{font-size:1.1rem;color:#e2e8f0;margin:0;line-height:1.6}.question-number{font-weight:600;color:#94a3b8}.answer-input-wrapper{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:24px}.answer-input{flex:1;min-width:200px;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::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}@media (max-width:768px){.practice-question{padding:16px 20px;gap:16px}.question-text{font-size:1rem}.answer-input{width:100%;font-size:1.1rem}}