:root {
  color-scheme: dark;
  --ink: #f0eee7;
  --muted: #aaa99f;
  --blue: #78c8f3;
  --panel: #1e211f;
  --line: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

html { min-height: 100%; background: #131513; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 78% 24%, rgba(117, 142, 126, .17), transparent 34rem),
    radial-gradient(circle at 14% 82%, rgba(77, 101, 90, .12), transparent 30rem),
    #131513;
}

button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(400px, 560px);
  gap: clamp(44px, 8vw, 120px);
  align-items: center;
  padding: 64px 0 40px;
}

.intro { align-self: center; max-width: 470px; }

.eyebrow {
  margin: 0 0 20px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(52px, 7vw, 92px);
  line-height: .88;
  letter-spacing: -.065em;
}

h1 span { color: #8d918c; font-weight: 400; }

.lede {
  max-width: 420px;
  margin: 34px 0 32px;
  color: #c8c7bf;
  font-size: 17px;
  line-height: 1.65;
}

.status-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 390px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.status-card > div { padding: 16px 0; display: flex; flex-direction: column; gap: 5px; }
.status-card > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.status-label { color: #797d78; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.status-card strong, .mode-switch { color: var(--ink); font: 700 13px/1 monospace; }
.mode-switch { width: max-content; padding: 0; border: 0; border-bottom: 1px dotted #6b7770; background: none; cursor: pointer; }

.tvm-card { max-width: 430px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tvm-card-head { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0 11px; color: #7f837e; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tvm-card-head strong { color: var(--blue); font-family: monospace; }
.tvm-registers { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.tvm-registers > div { min-width: 0; padding: 12px 8px 14px 0; }
.tvm-registers span { display: block; margin-bottom: 6px; color: #6f746f; font: 700 10px/1 monospace; }
.tvm-registers strong { display: block; overflow: hidden; color: #d7d9d3; font: 700 11px/1.2 monospace; text-overflow: ellipsis; }

.quick-guide { margin-top: 25px; color: #777b76; font: 12px/1.9 monospace; }
.quick-guide p { margin: 0; }
kbd { padding: 2px 5px; color: #aeb2ac; border: 1px solid #393d39; border-radius: 3px; background: #1a1d1a; }

.calculator-wrap { width: 100%; max-width: 510px; justify-self: center; }
.calculator {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 5.5% / 3%;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .43), 0 3px 9px rgba(0, 0, 0, .65);
  isolation: isolate;
  user-select: none;
}
.calculator::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 35px rgba(0,0,0,.13);
}
.calculator img { display: block; width: 100%; height: auto; }

.lcd {
  position: absolute;
  z-index: 2;
  left: 11.25%;
  top: 18.7%;
  width: 79.2%;
  height: 11.8%;
  padding: 3.6% 3.3% 2.1%;
  overflow: hidden;
  color: #202923;
  background: linear-gradient(145deg, rgba(194, 206, 180, .78), rgba(156, 172, 151, .7));
  border: 1px solid rgba(31, 39, 31, .45);
  border-radius: 5px;
  box-shadow: inset 0 1px 9px rgba(42, 50, 38, .24), 0 0 12px rgba(182, 197, 170, .1);
  font-family: "Courier New", Courier, monospace;
  text-shadow: 0 1px rgba(255,255,255,.28);
}

.lcd-meta { position: absolute; top: 8%; left: 3%; right: 3%; display: flex; gap: 9px; color: #455047; font-size: clamp(7px, 1.2vw, 10px); font-weight: 700; }
.lcd-meta span:last-child { margin-left: auto; }
.lcd-expression { height: 44%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(10px, 1.9vw, 17px); line-height: 1.2; }
.lcd-value { overflow: hidden; white-space: nowrap; text-align: right; font-size: clamp(20px, 4.6vw, 38px); line-height: 1.15; letter-spacing: -.05em; }
.lcd.has-menu { padding-bottom: 4.3%; }
.lcd.has-menu .lcd-expression { height: 35%; font-size: clamp(8px, 1.5vw, 13px); }
.lcd.has-menu .lcd-value { font-size: clamp(15px, 3.5vw, 29px); line-height: 1; }
.lcd-menu { position: absolute; right: 2.2%; bottom: 4%; left: 2.2%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2%; }
.lcd-menu span { min-width: 0; padding: 2.5% 0 2%; overflow: hidden; color: #1d261f; border: 1px solid rgba(32, 42, 34, .48); background: rgba(187, 199, 175, .36); font-size: clamp(6px, 1.15vw, 10px); font-weight: 700; line-height: 1; text-align: center; text-overflow: clip; }
.is-off .lcd { background: rgba(164, 177, 153, .2); }

.key { position: absolute; z-index: 4; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.key::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid transparent; transition: background .11s ease, border-color .11s ease, transform .08s ease; }
.key:hover::after, .key:focus-visible::after { border-color: rgba(129, 210, 250, .85); background: rgba(120, 200, 243, .1); outline: none; }
.key:focus-visible { outline: none; }
.key:active::after { transform: translateY(2px) scale(.96); background: rgba(120, 200, 243, .22); }
.shift-on .key.shift::after { border-color: rgba(129, 210, 250, .9); background: rgba(120, 200, 243, .3); box-shadow: 0 0 18px rgba(76, 184, 239, .55); }

.soft { width: 10.7%; height: 4.8%; }
.small { width: 10.9%; height: 4.8%; }
.number, .nav, .shift { height: 4.9%; }
.number { width: 13.8%; }
.nav, .shift { width: 10.8%; }
.input { left: 12.2%; width: 24.9%; height: 4.8%; }

.c1 { left: 12.1%; }
.c2 { left: 26.1%; }
.c3 { left: 40.4%; }
.c4 { left: 54.5%; }
.c5 { left: 68.3%; }
.c6 { left: 82.5%; }
.number.c2 { left: 26.1%; }
.number.c3 { left: 45.3%; }
.number.c4 { left: 62.1%; }
.number.c5 { left: 79.1%; }
.number.c1 { left: 12.2%; width: 10.8%; }
.nav.c1, .shift.c1 { left: 12.2%; }

.r1 { top: 41.05%; }
.r2 { top: 48.55%; }
.r3 { top: 56.0%; }
.r4 { top: 63.75%; }
.r5 { top: 71.4%; }
.r6 { top: 79.0%; }
.r7 { top: 86.65%; }

.secondary { width: 10.9%; height: 2.4%; border-radius: 3px; }
.secondary.percent { left: 54.5%; top: 53.1%; }
.secondary.pi { left: 68.3%; top: 53.1%; }

.tap-hint { margin: 18px 0 0; color: #686c67; font-size: 11px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }

footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #626661;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
footer a { color: #747b75; text-decoration: none; }
footer a:hover { color: var(--blue); }

@media (max-width: 820px) {
  .page-shell { grid-template-columns: 1fr; gap: 44px; padding-top: 40px; }
  .intro { max-width: 560px; }
  h1 { font-size: clamp(54px, 16vw, 86px); }
  .lede { margin-top: 26px; }
  .calculator-wrap { max-width: 500px; }
}

@media (max-width: 480px) {
  .page-shell { width: min(100% - 22px, 1180px); padding-top: 28px; }
  .intro { padding: 0 8px; }
  .quick-guide { display: none; }
  .calculator-wrap { width: calc(100% + 8px); margin-left: -4px; }
  footer { width: calc(100% - 30px); flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}