Web UI — стимпанк-тема (#6)

web/index.html

@@ -3,16 +3,16 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Калькулятор — Firefox</title>
+<title>Калькулятор — Стимпанк</title>
 <link rel="stylesheet" href="style.css">
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>🦊</text></svg>">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>⚙</text></svg>">
 </head>
 <body>
 <div class="ff-window">
 
   <!-- Заголовок окна -->
   <div class="titlebar">
-    <span class="titlebar-caption">Калькулятор — Mozilla Firefox</span>
+    <span class="titlebar-caption">Калькулятор — Медная мастерская v0.6</span>
     <span class="titlebar-dots"></span>
     <span class="titlebtn min" title="Свернуть">&#8211;</span>
     <span class="titlebtn max" title="Развернуть">&#9633;</span>
@@ -22,7 +22,7 @@
   <!-- Панель вкладок -->
   <div class="tabbar">
     <div class="tab active">
-      <span class="tab-icon">🦊</span>
+      <span class="tab-icon">⚙</span>
       <span class="tab-title">Калькулятор</span>
       <span class="tab-close">&#10005;</span>
     </div>
@@ -60,6 +60,12 @@
   <!-- Контент -->
   <div class="content">
 
+    <div class="steam-gears" aria-hidden="true">
+      <svg class="g1" viewBox="0 0 100 100"><path fill="#b08d3c" d="M50 12l6 8h-12zM50 88l-6-8h12zM12 50l8-6v12zM88 50l-8 6v-12zM23 23l10 2-8 8zM77 77l-10-2 8-8zM77 23l-2 10-8-8zM23 77l2-10 8 8z"/><circle cx="50" cy="50" r="30" fill="none" stroke="#b08d3c" stroke-width="12"/><circle cx="50" cy="50" r="12" fill="#b08d3c"/></svg>
+      <svg class="g2" viewBox="0 0 100 100"><path fill="#a05a2c" d="M50 8l5 9h-10zM50 92l-5-9h10zM8 50l9-5v10zM92 50l-9 5v-10zM20 20l11 1-9 9zM80 80l-11-1 9-9zM80 20l-1 11-9-9zM20 80l1-11 9 9z"/><circle cx="50" cy="50" r="32" fill="none" stroke="#a05a2c" stroke-width="10"/><circle cx="50" cy="50" r="10" fill="#a05a2c"/></svg>
+      <svg class="g3" viewBox="0 0 100 100"><path fill="#e8c56a" d="M50 10l6 8h-12zM50 90l-6-8h12zM10 50l8-6v12zM90 50l-8 6v-12zM22 22l10 3-9 8zM78 78l-10-3 9-8zM78 22l-3 10-8-9zM22 78l3-10 9 8z"/><circle cx="50" cy="50" r="28" fill="none" stroke="#e8c56a" stroke-width="11"/><circle cx="50" cy="50" r="11" fill="#e8c56a"/></svg>
+    </div>
+
     <main class="page">
       <section class="display-card">
         <div class="display-expr" id="exprEcho">&nbsp;</div>
@@ -151,7 +157,7 @@
 
   <!-- Строка состояния -->
   <div class="statusbar">
-    <span id="statusText">Готово — движок AST v0.5</span>
+    <span id="statusText">Готово — медный движок AST v0.6</span>
     <span class="status-right" id="statusVars">ans = 0</span>
   </div>
 </div>

web/style.css

@@ -1,23 +1,29 @@
-/* Firefox Proton-style theme (dark) for the calculator shell. */
+/* Steam Punk theme — brass, copper, rivets, gears, aged parchment. */
 
 :root {
-  --chrome: #1c1b22;
-  --chrome-alt: #2a2a3a;
-  --content-bg: #15141a;
-  --field: #42414d;
-  --field-hover: #525268;
-  --text: #fbfbfe;
-  --subtext: #cfcfd8;
-  --dimtext: #9b9bab;
-  --accent: #00ddff;
-  --orange: #ff9500;
-  --red: #ff5f70;
-  --pink: #ff7bd5;
-  --border: #3a3944;
-  --fox-gradient: linear-gradient(90deg, #ff3650, #ff9500, #9059ff, #00ddff);
-  --shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
-  --radius: 8px;
-  --font: "Segoe UI", "Ubuntu", "Helvetica Neue", system-ui, sans-serif;
+  --brass: #b08d3c;
+  --brass-hi: #e8c56a;
+  --brass-lo: #7a5f24;
+  --copper: #a05a2c;
+  --copper-hi: #d2854a;
+  --iron: #2e2a26;
+  --iron-dk: #1d1a17;
+  --wood: #3b2a1c;
+  --parchment: #d9c393;
+  --parchment-dk: #b99e6b;
+  --ink: #322515;
+  --glow: #ffb347;
+  --glow-hi: #ffd98a;
+  --danger: #b3382c;
+  --green: #7fae6a;
+  --plate: linear-gradient(160deg, #6b5426 0%, #4a3a1c 45%, #5d4a22 70%, #3c2f16 100%);
+  --plate-raised: linear-gradient(160deg, #8a6c30, #5d4a22 60%, #71592a);
+  --frame: linear-gradient(90deg, #8a5a2e, #b08d3c, #7a4c26, #c99b52, #8a5a2e);
+  --rivet: radial-gradient(circle at 35% 35%, #f0d28a, #96762c 55%, #4c3c15 80%, #241b0b);
+  --shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
+  --radius: 6px;
+  --font: Georgia, "Palatino Linotype", "Book Antiqua", serif;
+  --mono: "Courier New", Courier, monospace;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -29,191 +35,215 @@ body {
   place-items: center;
   padding: 24px 12px;
   background:
-    radial-gradient(1100px 500px at 15% -10%, rgba(144, 89, 255, 0.25), transparent 60%),
-    radial-gradient(900px 480px at 95% 110%, rgba(0, 221, 255, 0.16), transparent 55%),
-    radial-gradient(700px 400px at 60% 40%, rgba(255, 54, 80, 0.10), transparent 60%),
-    #0c0b14;
-  color: var(--text);
+    radial-gradient(900px 500px at 20% -10%, rgba(255, 179, 71, 0.10), transparent 60%),
+    radial-gradient(700px 500px at 90% 110%, rgba(160, 90, 44, 0.16), transparent 55%),
+    repeating-linear-gradient(45deg, rgba(0,0,0,0.14) 0 6px, transparent 6px 12px),
+    linear-gradient(180deg, #171209, #241a10 50%, #140f0a);
+  color: var(--parchment);
 }
 
+/* ---------- window frame ---------- */
+
 .ff-window {
   width: min(1020px, 100%);
-  border-radius: 10px 10px 4px 4px;
-  box-shadow: var(--shadow);
+  border-radius: 10px;
+  box-shadow: var(--shadow), 0 0 0 1px #000;
   overflow: hidden;
-  background: var(--chrome);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--iron-dk);
+  border: 3px solid #6e4a22;
+  outline: 1px solid var(--brass-lo);
+  position: relative;
+}
+.ff-window::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12px 12px, var(--rivet) 0 5px, transparent 6px),
+    radial-gradient(circle at calc(100% - 12px) 12px, var(--rivet) 0 5px, transparent 6px),
+    radial-gradient(circle at 12px calc(100% - 12px), var(--rivet) 0 5px, transparent 6px),
+    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--rivet) 0 5px, transparent 6px);
+  z-index: 60;
 }
 
 /* ---------- titlebar ---------- */
 
 .titlebar {
   position: relative;
-  height: 36px;
-  background: var(--chrome);
+  height: 38px;
+  background: var(--frame);
+  border-bottom: 2px solid #241b0b;
   display: flex;
   align-items: center;
 }
 .titlebar-caption {
-  padding-left: 14px;
-  font-size: 12px;
-  color: var(--subtext);
-  opacity: 0.85;
+  padding-left: 16px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: #2a1d0b;
+  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.6);
   user-select: none;
 }
-.titlebar-dots {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 74px;
-  height: 10px;
-  background:
-    radial-gradient(circle at 8% 50%, #4fc3f7 0 4px, transparent 5px),
-    radial-gradient(circle at 30% 28%, #ffb74d 0 4px, transparent 5px),
-    radial-gradient(circle at 52% 62%, #ef7d57 0 5px, transparent 6px),
-    radial-gradient(circle at 75% 35%, #ba68c8 0 4px, transparent 5px),
-    radial-gradient(circle at 93% 55%, #f06292 0 3px, transparent 4px);
-  opacity: 0.8;
-}
+.titlebar-dots { display: none; }
 .titlebtn {
   margin-left: auto;
-  width: 46px;
-  height: 36px;
+  width: 40px;
+  height: 30px;
   display: grid;
   place-items: center;
   font-size: 13px;
-  color: var(--subtext);
+  color: #2a1d0b;
   cursor: default;
   user-select: none;
+  border: 1px solid #55391a;
+  border-radius: 4px;
+  background: radial-gradient(circle at 35% 30%, #e8c56a, #96762c 60%, #5c4718);
+  box-shadow: inset 0 1px 1px rgba(255,240,200,.7), 0 2px 3px rgba(0,0,0,.6);
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
-.titlebtn:hover { background: var(--chrome-alt); }
-.titlebtn.close:hover { background: #d43a3a; color: #fff; }
-.titlebtn.max { margin-left: 0; }
+.titlebtn + .titlebtn { margin-left: 4px; }
+.titlebtn:hover { filter: brightness(1.12); }
+.titlebtn.close { background: radial-gradient(circle at 35% 30%, #e08a6a, #96412c 60%, #5c2418); color: #fff2dd; }
+.titlebtn.max { margin-left: 4px; }
 
 /* ---------- tabstrip ---------- */
 
 .tabbar {
-  background: #18181b;
+  background: #201912;
+  border-bottom: 2px solid var(--brass-lo);
   display: flex;
   align-items: flex-end;
-  padding: 5px 5px 0;
-  gap: 3px;
+  padding: 6px 8px 0;
+  gap: 4px;
 }
 .tab {
   display: flex;
   align-items: center;
   gap: 8px;
-  max-width: 240px;
-  height: 34px;
+  max-width: 250px;
+  height: 36px;
   padding: 0 10px 0 12px;
-  background: #2a2a3a;
-  border-radius: 8px 8px 0 0;
-  color: var(--subtext);
+  border-radius: 10px 10px 0 0;
+  border: 1px solid #4c3a1c;
+  border-bottom: none;
+  background: linear-gradient(180deg, #38291a, #241b10);
+  color: var(--parchment-dk);
   font-size: 13px;
   position: relative;
   cursor: default;
 }
 .tab.active {
-  background: var(--chrome);
-  color: var(--text);
+  background: var(--plate-raised);
+  color: #ffe9b8;
+  text-shadow: 0 1px 0 rgba(0,0,0,.6);
+  border-color: var(--brass);
 }
 .tab.active::before {
   content: "";
   position: absolute;
   top: 0; left: 10px; right: 10px;
-  height: 2px;
-  border-radius: 2px;
-  background: var(--fox-gradient);
+  height: 3px;
+  border-radius: 0 0 3px 3px;
+  background: linear-gradient(90deg, transparent, var(--glow-hi), var(--brass-hi), var(--glow-hi), transparent);
+  box-shadow: 0 0 8px rgba(255, 200, 100, 0.8);
 }
-.tab-icon { font-size: 14px; }
+.tab-icon { font-size: 15px; filter: sepia(0.5); }
 .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tab-close { margin-left: auto; opacity: 0.6; font-size: 11px; padding: 2px 4px; border-radius: 4px; }
-.tab-close:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
+.tab-close:hover { background: rgba(255, 230, 170, 0.15); opacity: 1; }
 .tab.newtab {
-  width: 30px;
+  width: 32px;
   justify-content: center;
-  font-size: 16px;
-  color: var(--subtext);
+  font-size: 17px;
+  color: var(--brass-hi);
   background: transparent;
-  border: none;
-  border-radius: 6px;
-  height: 30px;
+  border: 1px dashed #5b4522;
+  border-radius: 8px 8px 0 0;
+  height: 32px;
   align-self: center;
 }
-.tab.newtab:hover { background: var(--chrome-alt); }
+.tab.newtab:hover { background: rgba(176, 141, 60, 0.15); }
 
 /* ---------- nav toolbar / urlbar ---------- */
 
 .navtoolbar {
-  background: var(--chrome);
+  background: var(--plate);
+  border-bottom: 2px solid #241b0b;
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 10px;
+  padding: 10px 12px;
   position: relative;
 }
-.nav-btns { display: flex; gap: 2px; }
+.nav-btns { display: flex; gap: 4px; }
 .nav-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text);
+  width: 34px;
+  height: 34px;
+  border: 1px solid #55391a;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #caa24f, #7a5f24 55%, #463412 90%);
+  box-shadow: inset 0 1px 2px rgba(255,240,200,.55), inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.6);
+  color: #241a08;
   font-size: 15px;
   display: grid;
   place-items: center;
   cursor: pointer;
 }
-.nav-btn:hover { background: rgba(255, 255, 255, 0.08); }
-.nav-btn:active { transform: scale(0.94); }
+.nav-btn:hover { filter: brightness(1.15); }
+.nav-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
 .nav-btn.fwd { opacity: 0.35; pointer-events: none; transform: scaleX(-1); }
 .nav-btn.reload { font-size: 17px; }
-.nav-btn.active { background: rgba(0, 221, 255, 0.12); color: var(--accent); }
-.nav-right { display: flex; gap: 2px; margin-left: auto; }
+.nav-btn.active {
+  background: radial-gradient(circle at 35% 30%, #ffd98a, #c98a2e 55%, #6e4a12 90%);
+  box-shadow: 0 0 10px rgba(255, 190, 90, 0.7), inset 0 1px 2px rgba(255,240,200,.6);
+}
+.nav-btn svg path { stroke: #241a08; }
+.nav-btn:hover svg path { stroke: #1a1206; }
+.nav-right { display: flex; gap: 4px; margin-left: auto; }
 
 .urlbar-wrap { flex: 1; position: relative; }
 .urlbar {
   display: flex;
   align-items: center;
   gap: 8px;
-  height: 36px;
-  padding: 0 10px;
-  border-radius: 4px;
-  border: 2px solid transparent;
+  height: 38px;
+  padding: 0 12px;
+  border-radius: var(--radius);
+  border: 2px solid var(--brass-lo);
   background:
-    linear-gradient(var(--field), var(--field)) padding-box,
-    transparent border-box;
-  transition: background 120ms ease;
-}
-.urlbar:hover {
-  background:
-    linear-gradient(var(--field-hover), var(--field-hover)) padding-box,
-    transparent border-box;
+    linear-gradient(180deg, #cbb488, #b99e6b),
+    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
+  box-shadow: inset 0 2px 5px rgba(60, 40, 10, 0.5), 0 1px 0 rgba(255, 230, 170, 0.25);
+  color: var(--ink);
 }
 .urlbar:focus-within {
-  background:
-    linear-gradient(#38384a, #38384a) padding-box,
-    var(--fox-gradient) border-box;
+  border-color: var(--glow);
+  box-shadow: inset 0 2px 5px rgba(60, 40, 10, 0.5), 0 0 12px rgba(255, 179, 71, 0.55);
 }
-.urlbar-icon { opacity: 0.85; font-size: 13px; }
+.urlbar-icon { opacity: 0.9; font-size: 14px; filter: sepia(0.6) saturate(1.4); }
 .urlbar input {
   flex: 1;
   min-width: 0;
   background: transparent;
   border: none;
   outline: none;
-  color: var(--text);
+  color: #2e2008;
   font-size: 14px;
-  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
+  font-family: var(--mono);
+  font-weight: 700;
 }
-.urlbar input::placeholder { color: var(--dimtext); font-family: var(--font); }
+.urlbar input::placeholder { color: #7c653a; font-family: var(--font); font-weight: 400; }
 .urlbar-kbd {
   font-size: 10px;
-  color: var(--dimtext);
-  border: 1px solid var(--border);
+  color: #5b4726;
+  border: 1px solid #8a6f3d;
   border-radius: 3px;
   padding: 1px 5px;
+  background: rgba(255, 245, 220, 0.5);
+  font-family: var(--mono);
 }
 .urlbar:focus-within .urlbar-kbd { display: none; }
 
@@ -222,12 +252,13 @@ body {
   position: absolute;
   top: calc(100% + 4px);
   left: 0; right: 0;
-  background: var(--chrome-alt);
-  border: 1px solid var(--border);
+  background: linear-gradient(180deg, #d9c393, #c3aa77);
+  border: 2px solid var(--brass-lo);
   border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
   z-index: 40;
   overflow: hidden;
+  color: var(--ink);
 }
 .sugg {
   display: flex;
@@ -236,130 +267,202 @@ body {
   padding: 8px 12px;
   cursor: pointer;
   font-size: 13px;
+  border-bottom: 1px dotted rgba(80, 55, 20, 0.4);
 }
-.sugg:hover { background: rgba(0, 221, 255, 0.08); }
-.sugg-icon { color: var(--dimtext); width: 16px; text-align: center; }
-.sugg-expr { flex: 1; font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sugg-res { color: var(--accent); font-family: Consolas, monospace; }
+.sugg:last-child { border-bottom: none; }
+.sugg:hover { background: rgba(176, 141, 60, 0.35); }
+.sugg-icon { color: var(--brass-lo); width: 16px; text-align: center; }
+.sugg-expr { flex: 1; font-family: var(--mono); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sugg-res { color: #7a3c10; font-family: var(--mono); font-weight: 700; }
 
 /* ---------- content ---------- */
 
 .content {
   display: flex;
-  background: var(--content-bg);
+  background:
+    radial-gradient(1200px 400px at 50% 0%, rgba(255, 179, 71, 0.05), transparent 60%),
+    linear-gradient(180deg, #241a10, #1a130b);
   min-height: 420px;
+  position: relative;
 }
+
+/* background gears */
+.steam-gears { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.16; }
+.steam-gears svg { position: absolute; }
+.g1 { top: -40px; right: 60px; width: 170px; animation: spin 26s linear infinite; }
+.g2 { bottom: -55px; left: 30px; width: 130px; animation: spin 18s linear infinite reverse; }
+.g3 { top: 42%; right: 34%; width: 90px; animation: spin 12s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .steam-gears svg { animation: none; }
+}
+
 .page {
   flex: 1;
   padding: 22px 24px 26px;
   display: flex;
   flex-direction: column;
   gap: 18px;
+  position: relative;
+  z-index: 1;
 }
 
+/* display — round brass dial with amber glow */
 .display-card {
-  background: var(--chrome);
-  border: 1px solid var(--border);
+  background:
+    radial-gradient(circle at 30% 20%, rgba(255, 230, 170, 0.10), transparent 45%),
+    var(--plate-raised);
+  border: 2px solid var(--brass);
   border-radius: var(--radius);
   padding: 16px 18px 14px;
+  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.6);
+  position: relative;
 }
+.display-card::before,
+.display-card::after {
+  content: "";
+  position: absolute;
+  top: 8px; bottom: 8px;
+  width: 4px;
+  background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(30, 20, 5, 0.7) 6px 7px);
+}
+.display-card::before { left: 8px; }
+.display-card::after { right: 8px; }
 .display-expr {
   font-size: 13px;
-  color: var(--dimtext);
-  font-family: Consolas, monospace;
+  color: var(--parchment-dk);
+  font-family: var(--mono);
   min-height: 17px;
   text-align: right;
   overflow-wrap: anywhere;
 }
 .display-value {
   font-size: 44px;
-  font-weight: 200;
+  font-weight: 700;
   text-align: right;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
   overflow-wrap: anywhere;
   margin-top: 4px;
+  font-family: var(--mono);
+  color: var(--glow);
+  text-shadow: 0 0 14px rgba(255, 179, 71, 0.75), 0 0 34px rgba(255, 150, 40, 0.35);
 }
-.display-value.is-err { color: var(--red); }
+.display-value.is-err { color: #e26d5c; text-shadow: 0 0 14px rgba(220, 90, 60, 0.7); }
 .display-error {
   margin-top: 6px;
   text-align: right;
-  color: var(--red);
+  color: #e26d5c;
   font-size: 13px;
+  font-family: var(--font);
 }
 
-/* keypad */
+/* keypad — riveted brass buttons on iron plate */
 .keypad {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
+  gap: 9px;
+  background: linear-gradient(180deg, #262019, #1b1612);
+  border: 2px solid #4c3a1c;
+  border-radius: var(--radius);
+  padding: 14px;
+  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
 }
 .k {
-  height: 50px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: var(--chrome-alt);
-  color: var(--text);
+  height: 52px;
+  border: 1px solid #55391a;
+  border-radius: 6px;
+  background:
+    radial-gradient(circle at 30% 25%, rgba(255, 240, 200, 0.5), transparent 45%),
+    linear-gradient(180deg, #a8843b, #7a5f24 65%, #55401a);
+  color: #241a08;
   font-size: 17px;
+  font-weight: 700;
+  font-family: var(--mono);
   cursor: pointer;
-  transition: background 90ms ease, transform 60ms ease;
+  box-shadow: inset 0 1px 1px rgba(255, 245, 210, 0.7), inset 0 -3px 4px rgba(0, 0, 0, 0.45),
+    0 3px 5px rgba(0, 0, 0, 0.55);
+  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
+  position: relative;
 }
-.k:hover { background: #3a3944; border-color: var(--border); }
-.k:active { transform: scale(0.96); background: #003e96; }
-.k.num { background: #363644; font-weight: 600; }
-.k.num:hover { background: #44445a; }
-.k.op { color: var(--orange); font-weight: 700; }
-.k.fn { color: var(--subtext); font-size: 15px; }
-.k.warn { color: var(--pink); }
+.k::after {
+  content: "";
+  position: absolute;
+  right: 4px; bottom: 4px;
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: var(--rivet);
+}
+.k:hover { filter: brightness(1.12); }
+.k:active { transform: translateY(2px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7); }
+.k.num {
+  background:
+    radial-gradient(circle at 30% 25%, rgba(255, 246, 220, 0.55), transparent 45%),
+    linear-gradient(180deg, #d9c393, #b99e6b 65%, #8a6f3d);
+  font-size: 19px;
+}
+.k.op { color: #5c1e10; }
+.k.fn { font-size: 14px; color: #3a2a10; }
+.k.warn { color: #fff; text-shadow: none; background: radial-gradient(circle at 30% 25%, #e08a6a, transparent 45%), linear-gradient(180deg, #b3482c, #7c2e1a 65%, #4e1a0c); border-color: #5c2418; }
 .k.eq {
-  background: linear-gradient(135deg, #ff9500, #e66000);
-  color: #fff;
-  font-weight: 800;
-  font-size: 22px;
+  background:
+    radial-gradient(circle at 30% 25%, rgba(255, 255, 210, 0.8), transparent 45%),
+    linear-gradient(180deg, #e0a52e, #c07818 60%, #8a5410);
+  color: #2e1604;
+  font-size: 24px;
+  border-color: #8a5410;
+  box-shadow: 0 0 14px rgba(255, 180, 60, 0.55), inset 0 1px 1px rgba(255, 245, 210, 0.8),
+    inset 0 -3px 4px rgba(0, 0, 0, 0.4), 0 3px 5px rgba(0, 0, 0, 0.55);
 }
-.k.eq:hover { background: linear-gradient(135deg, #ffae3d, #ff7a1a); }
-.k.eq:active { transform: scale(0.96); }
+.k.eq:hover { filter: brightness(1.1); }
 
-.chipshelp { color: var(--dimtext); font-size: 12px; }
+.chipshelp { color: var(--parchment-dk); font-size: 12px; font-style: italic; }
 
 /* ---------- library sidebar ---------- */
 
 .library {
   width: 272px;
   flex-shrink: 0;
-  background: var(--chrome);
-  border-left: 1px solid var(--border);
+  background: linear-gradient(180deg, #2a2015, #1d1610);
+  border-left: 3px solid var(--brass-lo);
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 1;
 }
 .library.hidden { display: none; }
 .lib-header {
   padding: 14px 16px 10px;
   font-weight: 700;
-  font-size: 15px;
+  font-size: 16px;
+  letter-spacing: 1px;
+  color: var(--brass-hi);
+  text-shadow: 0 1px 0 rgba(0,0,0,.7);
 }
-.lib-tabs { display: flex; border-bottom: 1px solid var(--border); }
+.lib-tabs { display: flex; border-bottom: 2px solid var(--brass-lo); }
 .lib-tab {
   flex: 1;
   background: none;
   border: none;
-  color: var(--dimtext);
+  color: var(--parchment-dk);
   font-size: 13px;
+  font-family: var(--font);
   padding: 8px 0 10px;
   cursor: pointer;
   position: relative;
 }
-.lib-tab.active { color: var(--text); }
+.lib-tab.active { color: var(--glow-hi); }
 .lib-tab.active::after {
   content: "";
   position: absolute;
   left: 18%; right: 18%; bottom: 0;
-  height: 2px;
+  height: 3px;
   border-radius: 2px;
-  background: var(--fox-gradient);
+  background: linear-gradient(90deg, transparent, var(--glow), transparent);
+  box-shadow: 0 0 8px rgba(255, 179, 71, 0.8);
 }
 .lib-panel { padding: 6px 0; overflow-y: auto; }
 .history-list { list-style: none; }
-.history-empty { padding: 18px 16px; color: var(--dimtext); font-size: 13px; }
+.history-empty { padding: 18px 16px; color: var(--parchment-dk); font-size: 13px; font-style: italic; }
 .history-item {
   display: flex;
   gap: 8px;
@@ -367,55 +470,62 @@ body {
   padding: 8px 16px;
   cursor: pointer;
   font-size: 13px;
+  border-bottom: 1px solid rgba(122, 95, 36, 0.25);
 }
-.history-item:hover { background: var(--chrome-alt); }
+.history-item:hover { background: rgba(176, 141, 60, 0.14); }
 .h-main {
   flex: 1;
   min-width: 0;
-  font-family: Consolas, monospace;
+  font-family: var(--mono);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.h-res { color: var(--accent); font-family: Consolas, monospace; }
-.history-item.bad .h-res { color: var(--red); }
+.h-res { color: var(--glow); font-family: var(--mono); font-weight: 700; }
+.history-item.bad .h-res { color: #e26d5c; }
 .history-item.bad .h-main { opacity: 0.6; }
 
 .funcs-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 7px;
+  gap: 8px;
   padding: 12px 16px;
 }
 .func {
-  background: var(--chrome-alt);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text);
+  background: linear-gradient(180deg, #8a6c30, #5d4a22 70%, #463412);
+  border: 1px solid #6e5222;
+  border-radius: 14px / 8px;
+  color: #ffe9b8;
   font-size: 13px;
+  font-family: var(--mono);
   padding: 7px 0;
   cursor: pointer;
+  box-shadow: inset 0 1px 1px rgba(255, 240, 200, 0.4), 0 2px 3px rgba(0,0,0,.5);
 }
-.func:hover { background: #3a3944; border-color: var(--accent); }
+.func:hover { filter: brightness(1.15); border-color: var(--glow); }
 .lib-note {
   padding: 4px 16px 14px;
-  color: var(--dimtext);
+  color: var(--parchment-dk);
   font-size: 12px;
   line-height: 1.5;
+  font-style: italic;
 }
 
 /* ---------- statusbar ---------- */
 
 .statusbar {
-  height: 26px;
-  background: var(--chrome);
-  border-top: 1px solid var(--border);
+  height: 28px;
+  background: var(--frame);
+  border-top: 2px solid #241b0b;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 12px;
+  padding: 0 14px;
   font-size: 11px;
-  color: var(--dimtext);
+  color: #2a1d0b;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 0 rgba(255, 230, 170, 0.5);
 }
 
 /* ---------- modal ---------- */
@@ -423,7 +533,7 @@ body {
 .modal-veil {
   position: fixed;
   inset: 0;
-  background: rgba(8, 8, 15, 0.72);
+  background: rgba(15, 10, 4, 0.8);
   display: grid;
   place-items: center;
   z-index: 100;
@@ -433,46 +543,53 @@ body {
   width: min(560px, 92vw);
   max-height: 80vh;
   overflow-y: auto;
-  background: var(--chrome-alt);
-  border: 1px solid var(--border);
-  border-radius: 10px;
+  background: linear-gradient(180deg, #d9c393, #c8ae7d);
+  border: 3px solid var(--brass-lo);
+  border-radius: 8px;
   box-shadow: var(--shadow);
+  color: var(--ink);
 }
 .modal-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 18px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 2px solid var(--brass-lo);
   font-weight: 700;
+  font-size: 16px;
+  background: var(--plate-raised);
+  color: #ffe9b8;
+  text-shadow: 0 1px 0 rgba(0,0,0,.6);
 }
 .modal-close {
   background: none;
-  border: none;
-  color: var(--subtext);
-  font-size: 14px;
+  border: 1px solid #55391a;
+  border-radius: 50%;
+  color: #ffe9b8;
+  font-size: 12px;
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
+  width: 26px; height: 26px;
 }
-.modal-close:hover { background: rgba(255, 255, 255, 0.1); }
+.modal-close:hover { filter: brightness(1.2); }
 .modal-body { padding: 16px 20px; font-size: 14px; }
-.modal-body h3 { margin: 12px 0 6px; font-size: 14px; color: var(--accent); }
+.modal-body h3 { margin: 12px 0 6px; font-size: 15px; color: #6e3c10; letter-spacing: 1px; }
 .modal-body h3:first-child { margin-top: 0; }
 .modal-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
 .modal-body code {
-  background: #1c1b22;
+  background: rgba(60, 40, 12, 0.15);
+  border: 1px solid rgba(122, 95, 36, 0.5);
   padding: 1px 6px;
   border-radius: 3px;
   font-size: 13px;
-  color: var(--orange);
+  color: #4a2c0c;
+  font-weight: 700;
 }
 
 /* ---------- responsive ---------- */
 
 @media (max-width: 860px) {
   .content { flex-direction: column; }
-  .library { width: auto; border-left: none; border-top: 1px solid var(--border); }
+  .library { width: auto; border-left: none; border-top: 3px solid var(--brass-lo); }
   .keypad { grid-template-columns: repeat(3, 1fr); }
   .display-value { font-size: 34px; }
 }