:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--app-bg:#f1f5f9;--app-ink:#0f172a;--app-ink-soft:#1f2937;--app-muted:#475569;--app-surface:#fff;--app-surface-muted:#e2e8f0;--app-accent:#2563eb;--app-accent-dark:#1d4ed8;--app-accent-soft:#dbeafe;--app-radius-lg:24px;--app-radius-md:12px;--app-radius-sm:8px;--app-shadow-soft:0 24px 45px #0f172a1f;--app-transition:.16s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box}body.app-body{background:var(--app-bg);min-height:100dvh;color:var(--app-ink);-webkit-font-smoothing:antialiased;justify-content:center;align-items:stretch;margin:0;font-family:SF Pro Text,Segoe UI,system-ui,-apple-system,Noto Sans,sans-serif;font-size:16px;line-height:1.5;display:flex}main.app-main{flex-direction:column;gap:32px;width:100%;max-width:960px;min-height:100dvh;padding:48px 24px 80px;display:flex}.intro-section{justify-content:center;width:100%;display:flex}.intro-content{width:100%;max-width:520px}.intro-content h1{letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2.4rem,3vw + 1rem,3.4rem);line-height:1.05}.intro-content p{color:var(--app-muted);max-width:60ch;margin:0;font-size:1.05rem}.calculator-shell{background:var(--app-surface);border-radius:var(--app-radius-lg);box-shadow:var(--app-shadow-soft);flex-direction:column;gap:24px;width:100%;max-width:420px;margin:0 auto;padding:28px;display:flex}.calculator-display{color:#fff;border-radius:calc(var(--app-radius-md) + 4px);text-align:right;letter-spacing:.02em;background:linear-gradient(160deg,#0f172a,#1e293b);justify-content:flex-end;align-items:flex-end;min-height:90px;padding:24px;font-size:clamp(2.4rem,3.2vw + 1rem,3.6rem);font-weight:600;display:flex;overflow:hidden}.calculator-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.calculator-key{appearance:none;border-radius:var(--app-radius-md);background:var(--app-surface-muted);color:var(--app-ink);cursor:pointer;height:64px;transition:background var(--app-transition), transform 90ms ease, box-shadow var(--app-transition);border:none;justify-content:center;align-items:center;padding:0;font-size:1.35rem;font-weight:600;display:flex}.calculator-key:focus-visible{outline:3px solid var(--app-accent);outline-offset:2px}.calculator-key:hover{background:#d8e3f3}.calculator-key:active{transform:translateY(1px)}.key-control{color:var(--app-accent-dark);background:#cbd5f5}.key-control:hover{background:#bcc8f0}.key-operator{background:var(--app-accent-soft);color:var(--app-accent-dark)}.key-operator:hover{background:#c7dcff}.key-emphasis{background:var(--app-accent);color:#fff;box-shadow:0 10px 20px #2563eb40}.key-emphasis:hover{background:var(--app-accent-dark)}.key-zero{grid-column:span 2}.history-shell{background:var(--app-surface);border-radius:var(--app-radius-lg);box-shadow:var(--app-shadow-soft);flex-direction:column;gap:20px;width:100%;max-width:420px;margin:0 auto;padding:28px;display:flex}.history-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.history-header h2{letter-spacing:-.01em;margin:0;font-size:1.4rem}.history-clear{border-radius:var(--app-radius-sm);color:var(--app-accent-dark);cursor:pointer;transition:background var(--app-transition), color var(--app-transition), border-color var(--app-transition);background:0 0;border:1px solid #2563eb47;padding:8px 14px;font-size:.95rem;font-weight:600}.history-clear:hover{background:var(--app-accent-soft)}.history-clear:focus-visible{outline:3px solid var(--app-accent);outline-offset:2px}.history-empty{color:var(--app-muted);margin:0;font-size:.95rem}.history-empty[hidden]{display:none}.history-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.history-list li{border-radius:var(--app-radius-md);color:var(--app-ink-soft);background:#0f172a0a;justify-content:space-between;align-items:baseline;padding:12px 16px;font-size:.95rem;display:flex}.history-list li span{font-variant-numeric:tabular-nums}.history-list li strong{color:var(--app-ink);font-size:1.05rem}button{font-family:inherit}@media (width<=768px){main.app-main{gap:24px;padding:36px 18px 64px}.calculator-shell,.history-shell{padding:24px}.calculator-key{height:58px;font-size:1.25rem}}@media (width<=520px){.calculator-shell,.history-shell{max-width:100%}.calculator-display{font-size:2.4rem}}