.reading-distance-container{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.calc-card{background:#fff;border-radius:32px;padding:1.5rem;box-shadow:0 25px 50px -12px #00000014;display:flex;flex-direction:column;gap:1.5rem;border:1px solid rgba(0,0,0,.03)}:global(.dark) .calc-card{background:#0f172a;border-color:#ffffff0d;box-shadow:0 25px 50px -12px #0000004d}.instruction-banner{background:#eff6ff;padding:1rem;border-radius:16px;display:flex;align-items:center;gap:.75rem;color:#1e40af;font-size:.9rem}:global(.dark) .instruction-banner{background:#1e40af33;color:#93c5fd}.instruction-banner svg{width:20px;height:20px;flex-shrink:0}.instruction-banner p{margin:0;font-weight:500}.preview-box{background:#f8fafc;border-radius:24px;padding:1.5rem;border:1px dashed #cbd5e1;display:flex;flex-direction:column;gap:1.5rem}:global(.dark) .preview-box{background:#020617;border-color:#334155}.preview-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem}.btn-circle{width:40px;height:40px;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 6px -1px #0000001a;cursor:pointer;font-weight:800;color:#3b82f6;transition:all .2s cubic-bezier(.4,0,.2,1)}:global(.dark) .btn-circle{background:#1e293b;color:#60a5fa}.btn-circle:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.btn-circle:active{transform:scale(.95)}.font-indicator{display:flex;align-items:baseline;gap:2px}#fontSizeDisplay{font-size:2.5rem;font-weight:900;color:#1e293b}:global(.dark) #fontSizeDisplay{color:#f1f5f9}.font-indicator small{font-size:.9rem;font-weight:700;color:#64748b}.preview-text{text-align:center;transition:font-size .2s ease-out;color:#1e293b;line-height:1.2}:global(.dark) .preview-text{color:#f1f5f9}.slider-container{width:100%}input[type=range]{width:100%;height:6px;background:#e2e8f0;border-radius:10px;appearance:none;cursor:pointer}:global(.dark) input[type=range]{background:#1e293b}input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:#3b82f6;border-radius:50%;box-shadow:0 0 0 4px #fff;border:1px solid rgba(0,0,0,.1)}.result-hub{display:grid;grid-template-columns:1fr;gap:1rem}.result-box-premium{background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:20px;padding:1.5rem;color:#fff;text-align:center;position:relative;overflow:hidden}.hub-label{text-transform:uppercase;font-size:.75rem;font-weight:800;letter-spacing:.1em;opacity:.9}.hub-value{display:flex;justify-content:center;align-items:baseline;gap:.25rem;margin-top:.5rem}#distanceValue{font-size:4.5rem;font-weight:900;line-height:1}.hub-value small{font-size:1.25rem;font-weight:700;opacity:.8}.status-indicator{padding:1rem;border-radius:20px;display:flex;align-items:center;gap:1rem;background:#f1f5f9;transition:all .3s ease}:global(.dark) .status-indicator{background:#1e293b}.indicator-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-indicator[data-state=ideal] .indicator-icon{background:#dcfce7;color:#166534}.status-indicator[data-state=warning] .indicator-icon{background:#fee2e2;color:#991b1b}.status-indicator[data-state=safe] .indicator-icon{background:#dbeafe;color:#1e40af}.status-indicator p{margin:0;font-weight:700;font-size:.9rem;color:#475569}:global(.dark) .status-indicator p{color:#94a3b8}.explanation-cards{display:grid;grid-template-columns:1fr;gap:1.25rem}.concept-card{background:#fff;padding:1.5rem;border-radius:24px;border:1px solid rgba(0,0,0,.05);box-shadow:0 4px 15px #00000005}:global(.dark) .concept-card{background:#1e293b;border-color:#ffffff0d}.concept-card.highlight{background:#f0fdf4;border-color:#bcf6d4}:global(.dark) .concept-card.highlight{background:#14532d33;border-color:#166534}.concept-card h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:1.1rem;font-weight:800;color:#1e293b}:global(.dark) .concept-card h4{color:#f1f5f9}.concept-card.highlight h4{color:#166534}:global(.dark) .concept-card.highlight h4{color:#4ade80}.concept-card h4 svg{width:22px;height:22px}.concept-card p{margin:0;font-size:.95rem;color:#475569;line-height:1.6}:global(.dark) .concept-card p{color:#94a3b8}.hub-footer{margin-top:.75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.8}@media(min-width:640px){.result-hub{grid-template-columns:1.5fr 1fr}.explanation-cards{grid-template-columns:1fr 1fr}}