Calculator

by Sam1_THE_GREAT

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grapes AI</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 
:root{
  --bg:#0e0c15;--bg2:#15111f;--bg3:#1c1729;--surface:#221d30;
  --border:#2e2845;--grape:#8b5cf6;--grape-dim:#6d3fcf;--grape-glow:#a78bfa;
  --text:#e2dff0;--text-mid:#9d98b8;--text-dim:#5c5778;--user-bg:#1f1a2e;
  --radius:14px;
}
.light{
  --bg:#f8f6ff;--bg2:#ffffff;--bg3:#f0ecff;--surface:#ede8ff;
  --border:#d8d0f5;--text:#1a1530;--text-mid:#6b5fa0;--text-dim:#a99fcc;--user-bg:#ede8ff;
}
 
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;display:flex;flex-direction:column}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(139,92,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.04) 1px,transparent 1px);background-size:40px 40px}
 
/* Header */
.header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem;border-bottom:1px solid var(--border);background:rgba(14,12,21,.85);backdrop-filter:blur(14px);flex-shrink:0}
.light .header{background:rgba(248,246,255,.85)}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:34px;height:34px;border-radius:10px;background:var(--grape);display:flex;align-items:center;justify-content:center;font-size:17px}
.logo-name{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.logo-name...