:root{--calc-line:#ffffff17;--calc-surface:#171923;--calc-muted:#a29caf;--calc-ink:#f4f0ff;--calc-violet:#a17cff;--calc-lime:#d3ff4e;--calc-cyan:#52e1d2}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:#0b0c12;scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:radial-gradient(ellipse at 4% 7%,#38205a55 0,transparent 29%),radial-gradient(ellipse at 99% 17%,#074c4a35 0,transparent 27%),radial-gradient(ellipse at 73% 100%,#54321f33 0,transparent 35%),linear-gradient(140deg,#0b0c12,#10111a 54%,#0b0c12);color:var(--calc-ink);font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid var(--calc-lime);outline-offset:3px}
.topbar{width:min(1080px,calc(100% - 48px));height:68px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--calc-line)}
.brand{display:flex;align-items:center;gap:9px;color:#f8f4ff;text-decoration:none;font-size:16px;font-weight:800;letter-spacing:-.45px}
.brand-mark{width:48px;height:36px;display:block;flex:none;object-fit:contain}
.brand-period{color:var(--calc-lime)}
.privacy-pill{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #d3ff4e35;border-radius:99px;background:#d3ff4e12;color:#d8ff78;font-size:8px;font-weight:800;letter-spacing:.8px}
.privacy-pill span{width:6px;height:6px;border-radius:50%;background:var(--calc-lime);box-shadow:0 0 0 4px #d3ff4e17,0 0 12px #d3ff4e90}
.page-shell{width:min(1000px,calc(100% - 48px));margin:auto;padding:39px 0 24px}
.intro{margin:0 auto 23px;text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--calc-lime);font-size:8px;font-weight:850;letter-spacing:1.45px}
.sparkle{color:#ff55b8}
.intro h1{margin:10px 0 7px;color:#f5f1ff;font-size:clamp(34px,5vw,46px);font-weight:850;line-height:1.08;letter-spacing:-2px}
.intro h1 span{background:linear-gradient(95deg,var(--calc-lime),var(--calc-cyan) 52%,#ff55b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{margin:0 auto;color:#aaa4b8;font-size:11px;line-height:1.7}
.calculator-card{width:min(440px,100%);margin:0 auto;padding:20px;border:1px solid var(--calc-line);border-radius:17px;background:linear-gradient(145deg,#191a25f2,#14151df5);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.calculator-heading{display:flex;align-items:center;justify-content:space-between;margin:0 1px 15px}
.section-kicker{color:var(--calc-lime);font-size:8px;font-weight:800;letter-spacing:1.3px}
.calculator-heading h2{margin:4px 0 0;color:#f1edfa;font-size:17px;letter-spacing:-.4px}
.live-indicator{display:flex;align-items:center;gap:7px;color:#aaa3b7;font-size:8px;font-weight:800;letter-spacing:.8px}
.live-indicator i{width:6px;height:6px;border-radius:50%;background:var(--calc-lime);box-shadow:0 0 10px #d3ff4e90}
.display{min-height:126px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:8px;margin-bottom:14px;padding:15px 16px;border:1px solid #ffffff12;border-radius:12px;background:radial-gradient(ellipse at 100% 0,#a17cff15,transparent 58%),#101119;overflow:hidden}
.display-expression{width:100%;min-height:25px;color:#a9a2b6;font-size:16px;line-height:1.5;text-align:right;overflow-wrap:anywhere}
.display-result{width:100%;color:#f5f1ff;font-size:clamp(32px,8vw,43px);font-weight:650;line-height:1.12;letter-spacing:-1.6px;text-align:right;overflow-wrap:anywhere}
.display-result.is-error{color:#ff7893;font-size:23px}
.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.key{min-width:0;min-height:58px;border:1px solid #ffffff13;border-radius:11px;background:linear-gradient(145deg,#ffffff0c,#ffffff05);color:#eeeaf5;font-size:18px;font-weight:650;cursor:pointer;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
.key:hover{transform:translateY(-2px);border-color:#a17cff6b;background:#a17cff17;box-shadow:0 8px 20px #0003}
.key:active{transform:scale(.97)}
.key-utility{border-color:#d3ff4e18;background:#d3ff4e0b;color:#d3ff4e;font-size:12px;font-weight:800;letter-spacing:.2px}
.key-operator{border-color:#a17cff29;background:linear-gradient(145deg,#a17cff20,#52e1d20b);color:#c7a9ff;font-size:21px}
.key-zero{grid-column:span 2;text-align:left;padding-left:23px}
.key-equals{border-color:transparent;background:linear-gradient(115deg,#b95cff,#7653f0 56%,#37c9bb);color:#fff;font-size:23px;box-shadow:0 7px 20px #874cff30}
.key-equals:hover{border-color:#ffffff52;background:linear-gradient(115deg,#c778ff,#896cff 56%,#55ded0);box-shadow:0 9px 23px #874cff50}
.keyboard-hint{margin:14px 0 0;color:#898396;font-size:9px;line-height:1.8;text-align:center}
kbd{display:inline-block;margin:0 1px;padding:2px 5px;border:1px solid #ffffff1c;border-radius:5px;background:#ffffff08;color:#c7bfd6;font:inherit}
.page-footer{display:flex;justify-content:space-between;gap:12px;margin:19px auto 0;width:min(440px,100%);color:#898396;font-size:8px;letter-spacing:.35px}
.page-footer b{color:#ff55b8}
@media(max-width:520px){.topbar,.page-shell{width:calc(100% - 30px)}.topbar{height:61px}.page-shell{padding-top:30px}.intro{margin-bottom:19px}.intro h1{font-size:34px;letter-spacing:-1.5px}.calculator-card{padding:16px;border-radius:15px}.keypad{gap:8px}.key{min-height:56px;border-radius:10px}.display{min-height:116px}}
@media(max-width:360px){.calculator-card{padding:13px}.keypad{gap:6px}.key{min-height:52px}.keyboard-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}