@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--primary:#facc15;--primary-glow:#facc1533;--bg-dark:#0f172a;--bg-darker:#020617;--text-main:#f8fafc;--text-muted:#94a3b8;--glass-bg:#1e293b80;--glass-border:#ffffff1a;--accent-blue:#38bdf8;--accent-green:#4ade80}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-darker);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 10% 20%,#facc150d 0%,#0000 20%),radial-gradient(circle at 90% 80%,#38bdf80d 0%,#0000 20%);min-height:100vh;font-family:Outfit,sans-serif}.container{max-width:1200px;margin:0 auto;padding:2rem}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1.5rem;padding:2rem;box-shadow:0 8px 32px #0000005e}.glass-card:hover{border-color:#facc154d;transition:border-color .3s}h1{background:linear-gradient(to right, var(--primary), var(--accent-blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem}.input-group{margin-bottom:1.5rem}label{color:var(--text-muted);margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}input[type=number],select{border:1px solid var(--glass-border);color:#fff;background:#0f172acc;border-radius:.75rem;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:all .2s}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow);outline:none}input[type=range]{appearance:none;background:#334155;border-radius:5px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;width:18px;height:18px;box-shadow:0 0 10px var(--primary-glow);border-radius:50%}.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.result-val{color:var(--primary);font-size:2rem;font-weight:700}.unit{color:var(--text-muted);margin-left:.25rem;font-size:.9rem}@media (width<=768px){.container{padding:1rem}h1{font-size:2rem}}