*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark}body{min-height:100dvh;background:radial-gradient(circle at 15% 15%,#ffe6f2 0%,transparent 45%),radial-gradient(circle at 85% 0%,#e8e0ff 0%,transparent 40%),linear-gradient(160deg,#fff0f7,#f3ecff 55%,#e6fbf3);background-attachment:fixed}@media(prefers-color-scheme:dark){body{background:radial-gradient(circle at 15% 15%,#3a2440 0%,transparent 45%),radial-gradient(circle at 85% 0%,#2a2350 0%,transparent 40%),linear-gradient(160deg,#241a2e,#1d1830 55%,#15222a)}}#app{margin-inline:auto}.calc{--pink: #ff9ec4;--pink-deep: #ff6fa5;--lavender: #c9b6ff;--mint: #9ee7c8;--butter: #ffd98a;--ink: #5b4358;--card: #fffafc;--screen: #fff1f7;--key: #ffffff;--key-shadow: #f0c6da;--shadow: rgba(123, 80, 110, .25);display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:100dvh;padding:clamp(1rem,4vw,2.5rem)}.calc__title{font-size:clamp(1.75rem,6vw,2.5rem);font-weight:800;letter-spacing:-.01em;color:var(--pink-deep);text-shadow:2px 2px 0 #fff,3px 3px 0 var(--lavender)}.calc__card{width:100%;max-width:22rem;padding:1.25rem;border-radius:2rem;background:var(--card);box-shadow:0 1.25rem 2.5rem var(--shadow),inset 0 0 0 3px #fff;border:3px solid var(--pink)}.calc__screen{display:grid;gap:.15rem;padding:1rem 1.25rem;margin-bottom:1rem;border-radius:1.25rem;background:var(--screen);box-shadow:inset 0 3px 8px #ff6fa52e;min-height:6.5rem;text-align:right}.calc__face{font-size:1.1rem;color:var(--pink-deep);text-align:left}.calc__expression{min-height:1.25rem;font-size:1rem;color:var(--lavender);font-weight:600}.calc__display{font-size:clamp(2rem,9vw,3rem);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;word-break:break-all;line-height:1.1}.calc__keys{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.calc__key{appearance:none;border:none;cursor:pointer;aspect-ratio:1 / 1;border-radius:1rem;font-size:clamp(1.1rem,4.5vw,1.5rem);font-weight:700;color:var(--ink);background:var(--key);box-shadow:0 4px 0 var(--key-shadow);transition:transform .06s ease,box-shadow .06s ease,filter .12s ease}.calc__key:hover{filter:brightness(1.03)}.calc__key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--key-shadow)}.calc__key:focus-visible{outline:3px solid var(--lavender);outline-offset:2px}.calc__key--op{background:var(--lavender);color:#fff;box-shadow:0 4px #a98fe6}.calc__key--fn{background:var(--mint);color:#2f6f55;box-shadow:0 4px #76c9a4;font-size:clamp(.9rem,3.5vw,1.15rem)}.calc__key--equals{background:var(--pink-deep);color:#fff;box-shadow:0 4px #e0508a}.calc__hint{font-size:.9rem;color:var(--ink);opacity:.7}@media(prefers-color-scheme:dark){.calc{--ink: #ffe9f4;--card: #2b2333;--screen: #211b29;--key: #3a3047;--key-shadow: #1f1928;--shadow: rgba(0, 0, 0, .45);--pink-deep: #ff8fbb}.calc__title{text-shadow:2px 2px 0 #1f1929,3px 3px 0 var(--lavender)}.calc__key--fn{color:#0f3b2b}}@media(prefers-reduced-motion:reduce){.calc__key{transition:none}}