:root{font-family:Space Grotesk,system-ui,-apple-system,sans-serif;color:#0f172a;background:radial-gradient(circle at 20% 20%,#eef2ff,transparent 35%),radial-gradient(circle at 80% 0%,#e0f2fe,transparent 35%),#f8fafc;min-height:100vh}*{box-sizing:border-box}body{margin:0}.page{display:grid;place-items:center;min-height:100vh;padding:48px 16px}.card{width:min(720px,100%);background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:32px;box-shadow:0 30px 60px #0f172a14}.header h1{margin:8px 0;font-size:clamp(22px,3vw,30px)}.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#64748b;margin:0 0 4px}.subtle{color:#475569;margin:0;line-height:1.6}.form{margin-top:24px;display:grid;gap:8px}.label{font-weight:600;color:#0f172a}.input-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.input{width:100%;padding:12px 14px;font-size:16px;border:1px solid #cbd5e1;border-radius:10px;transition:border-color .12s ease,box-shadow .12s ease}.input:focus{outline:none;border-color:#0f172a;box-shadow:0 0 0 3px #0f172a1f}.button{border:none;border-radius:10px;padding:12px 16px;background:#0f172a;color:#f8fafc;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.button:hover{transform:translateY(-1px);box-shadow:0 10px 20px #0f172a2e}.button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.error{margin-top:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 12px}.result{margin-top:24px;border-top:1px solid #e2e8f0;padding-top:16px}.metric{margin:8px 0 16px;display:flex;align-items:baseline;gap:8px}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.highlight{background:#0f172a;color:#f8fafc;padding:14px 16px;border-radius:12px}.highlight .metric-label{color:#e2e8f0}.metric-label{font-size:14px;color:#475569}.metric-value{font-size:28px;font-weight:700}details{margin-top:8px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;padding:10px 12px}details summary{cursor:pointer;font-weight:600}pre{overflow:auto;font-size:13px;background:#0f172a;color:#e2e8f0;padding:12px;border-radius:10px}@media(max-width:640px){.card{padding:24px}.input-row{grid-template-columns:1fr}.button{width:100%}}