@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#f8fafc;background:#0b1020;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}.page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 15% 15%,rgba(59,130,246,.18),transparent 38%),radial-gradient(ellipse at 85% 85%,rgba(139,92,246,.16),transparent 38%),#0b1020}.calculator{width:min(100%,370px);padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:#141b2df0;box-shadow:0 28px 90px #00000073}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.brand{color:#94a3b8;font-size:11px;font-weight:700;letter-spacing:2.5px}.status-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 12px #34d399}.display{min-height:126px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:12px 4px 22px;overflow:hidden}.expression{min-height:24px;color:#94a3b8;font-size:16px}.result{max-width:100%;overflow:hidden;color:#f8fafc;font-family:Space Grotesk,sans-serif;font-size:clamp(38px,11vw,52px);font-weight:600;letter-spacing:-2px;text-overflow:ellipsis}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.key{min-height:64px;border:1px solid rgba(255,255,255,.035);border-radius:18px;color:#e2e8f0;background:#263149;font-size:21px;font-weight:600;cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease}.key:hover{filter:brightness(1.18)}.key:active{transform:scale(.94)}.key:focus-visible{outline:2px solid #93c5fd;outline-offset:3px}.key.clear,.key.delete,.key.percent,.key.utility{color:#a5b4fc;background:#303b59}.key.operator{color:#c4b5fd;background:#3a315c;font-size:25px}.key.equals{color:#fff;border-color:transparent;background:linear-gradient(145deg,#6366f1,#8b5cf6);box-shadow:0 8px 20px #6366f140}.footer{margin:18px 0 0;color:#64748b;font-size:11px;text-align:center;letter-spacing:.5px}@media(max-width:380px){.calculator{padding:18px}.key{min-height:58px;border-radius:15px}}