:root {
  color-scheme: dark;
  --page: #151515;
  --case: #0c0d0f;
  --case-hi: #242529;
  --bezel: #050607;
  --lcd: #9db68f;
  --lcd-dark: #172312;
  --lcd-soft: rgba(23, 35, 18, .78);
  --white: #f2f4f6;
  --muted: #9aa3ad;
  --gold: #f2c14e;
  --blue: #69c8f2;
  --red: #ee6f73;
  --key: #20252b;
  --key-hi: #303842;
  --num: #14181d;
  --op: #2b3035;
  --clear: #7b2020;
  --enter: #29313a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.09), transparent 28rem),
    linear-gradient(135deg, #111, #252525 52%, #101010);
  color: var(--white);
  overscroll-behavior: none;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.app-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 24px);
}

.calculator {
  width: min(100%, 430px);
  border-radius: 28px 28px 34px 34px;
  padding: 18px 16px 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 8%, transparent 92%, rgba(255,255,255,.06)),
    linear-gradient(180deg, var(--case-hi), var(--case) 20%, #090a0c 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 20px rgba(0,0,0,.42),
    0 28px 90px rgba(0,0,0,.62);
}

.brand-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 4px 8px 12px;
}
.brand {
  font-size: 1.1rem;
  font-weight: 760;
  letter-spacing: .01em;
}
.subtitle {
  color: #d8dde2;
  font-size: .9rem;
  margin-top: 2px;
}
.install-button {
  border: 1px solid rgba(255,255,255,.2);
  color: #111;
  background: #d8dde2;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
}

.lcd {
  margin: 0 6px 16px;
  min-height: 204px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 22%),
    var(--lcd);
  color: var(--lcd-dark);
  border: 8px solid var(--bezel);
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,.34),
    0 2px 0 rgba(255,255,255,.1);
  font-family: "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  display: grid;
  grid-template-rows: auto minmax(54px, 1fr) auto auto;
  gap: 5px;
}
.annunciators {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  color: rgba(23, 35, 18, .76);
  min-height: 1.05rem;
}
.history {
  overflow-y: auto;
  max-height: 74px;
  padding-right: 4px;
  font-size: .9rem;
  line-height: 1.26;
  color: rgba(23, 35, 18, .74);
  scrollbar-width: thin;
}
.history-item {
  border-bottom: 1px solid rgba(23,35,18,.18);
  padding: 3px 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.history-item strong { color: var(--lcd-dark); }
.expression {
  min-height: 54px;
  max-height: 112px;
  overflow-y: auto;
  text-align: right;
  font-size: clamp(1.7rem, 9vw, 3.1rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: none;
  outline: none;
}
.expression::after {
  content: "_";
  animation: blink 1.1s steps(1) infinite;
}
.preview {
  min-height: 1.35rem;
  text-align: right;
  color: rgba(23, 35, 18, .86);
  font-size: 1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
@keyframes blink { 50% { opacity: 0; } }

.keys {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 7px;
  padding: 0 2px;
  user-select: none;
}
.key {
  position: relative;
  min-height: 52px;
  border: 0;
  border-radius: 8px 8px 11px 11px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 28%),
    linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -3px 0 rgba(0,0,0,.38),
    0 2px 2px rgba(0,0,0,.45);
  cursor: pointer;
  padding: 12px 4px 5px;
  transition: transform .05s ease, filter .1s ease;
}
.key:active, .key.pressed {
  transform: translateY(2px);
  filter: brightness(1.12);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
}
.key b {
  display: block;
  font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1;
  font-weight: 850;
}
.key small {
  display: block;
  margin-top: 4px;
  color: var(--blue);
  font-size: .56rem;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fn-label {
  position: absolute;
  top: -10px;
  left: 4px;
  right: 4px;
  color: var(--gold);
  font-size: .62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.num {
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 26%), linear-gradient(180deg, #222930, var(--num));
}
.op {
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 28%), linear-gradient(180deg, #454b52, var(--op));
}
.sci b, .constant b { color: #e9f8ff; }
.shift-gold b { color: var(--gold); }
.shift-blue b { color: var(--blue); }
.clear {
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 26%), linear-gradient(180deg, #9a2a2a, var(--clear));
}
.enter {
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%), linear-gradient(180deg, #48515b, var(--enter));
}
.wide { grid-column: span 2; }
.shift-on-f .key[data-f] small,
.shift-on-f #shiftAnn { color: var(--gold); }
.shift-on-g #shiftAnn { color: var(--blue); }
.shift-on-f .shift-gold,
.shift-on-g .shift-blue {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .app-shell { padding: 0; place-items: stretch; }
  .calculator {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom));
  }
  .lcd { min-height: 212px; margin-inline: 2px; }
  .keys { gap: 9px 6px; }
  .key { min-height: 50px; border-radius: 7px 7px 10px 10px; }
  .fn-label { font-size: .56rem; top: -9px; }
}