/* Drawn white VINACAL, matching the reference in a 731 × 1470 canvas.
   Shell, keycaps and navigation controls are actual HTML/CSS/SVG controls.
   Only the logo and gold seal reuse tightly framed portions of the photograph. */
@font-face { font-family: "VINACAL LCD"; src: url("../assets/fonts/unifont-vinacal.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: block; }
html { color-scheme: light; }
html, body { background: #fff; color: #222; }
body { background-image: none; }
:root { --shift: #777981; --alpha: #408dc1; --vblue: #408dc1; }
[hidden] { display: none !important; }
#stage { padding: 3px 6px 46px; gap: 24px; }
.calc-wrap {
  width: min(520px, calc(100vw - 12px), calc((100svh - 52px) * 731 / 1470));
}
.calc { --px: calc(100cqw / 731); width: calc(var(--px) * 731); height: calc(var(--px) * 1470); }
.zoomed .calc-wrap { width: min(731px, calc(100vw - 12px)); }
.white-skin .shell {
  border-radius: calc(var(--px)*46) calc(var(--px)*46) calc(var(--px)*105) calc(var(--px)*105);
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--px)*2) #d7d9dd;
}
.white-skin .bezel {
  inset: calc(var(--px)*12);
  border: calc(var(--px)*1.5) solid #c8cbd0;
  border-radius: calc(var(--px)*34) calc(var(--px)*34) calc(var(--px)*92) calc(var(--px)*92);
  background: #fff; box-shadow: none;
}
.white-skin .brand {
  left: calc(var(--px)*59); top: calc(var(--px)*53);
  width: calc(var(--px)*239); height: calc(var(--px)*43);
  margin: 0; transform: none; color: transparent;
  /* Isolate the original black lettering; the photographed white becomes #fff. */
  background: url('../assets/vinacal-680ex-plus-iii-white.png') no-repeat;
  background-size: calc(var(--px)*1528.2917) calc(var(--px)*2264.2599);
  background-position: calc(var(--px)*-438.8333) calc(var(--px)*-450.13);
  filter: grayscale(1) contrast(12);
}
.white-skin .brand .reg { visibility: hidden; }
.white-skin .model {
  left: calc(var(--px)*63); top: calc(var(--px)*98);
  font-family: Arial, sans-serif; font-size: calc(var(--px)*28);
  font-weight: 700; letter-spacing: calc(var(--px)*.5); color: var(--vblue);
}
.auth-sticker {
  position: absolute; left: calc(var(--px)*411); top: calc(var(--px)*32);
  width: calc(var(--px)*252); height: calc(var(--px)*137);
  background: #eddb96 url('../assets/vinacal-680ex-plus-iii-white.png') no-repeat;
  background-size: calc(var(--px)*1528.2917) calc(var(--px)*2264.2599);
  background-position: calc(var(--px)*-790.8333) calc(var(--px)*-429.13);
  pointer-events: none;
}
.white-skin .sci-label {
  right: calc(var(--px)*65); top: calc(var(--px)*473);
  font: calc(var(--px)*18)/1 Arial, sans-serif;
  letter-spacing: 0; color: var(--vblue);
}
.white-skin .lcd-frame {
  left: calc(var(--px) * 83); top: calc(var(--px) * 201);
  width: calc(var(--px) * 562); height: calc(var(--px) * 218);
  padding: 0; border: 0; border-radius: calc(var(--px) * 12);
  box-shadow: none; background: #fff;
}
.white-skin .lcd-frame::before {
  content: ''; position: absolute;
  inset: calc(var(--px)*-16) calc(var(--px)*-21) calc(var(--px)*-36);
  border-radius: calc(var(--px)*20); background: #fff;
  box-shadow: inset calc(var(--px)*1) calc(var(--px)*3) calc(var(--px)*4) #dadddf;
  pointer-events: none;
}
.white-skin .lcd {
  border-radius: inherit; background: #b9c7bd; color: #101812;
  box-shadow: inset 0 calc(var(--px)*2) calc(var(--px)*4) #66776d;
  font-family: "VINACAL LCD", "DejaVu Sans Mono", monospace;
}
.white-skin .lcd.off { background: #b9c7bd; }
.white-skin .klabel { font-family: Arial, sans-serif; font-weight: 400; }
.white-skin .klabel > span { display: inline-block; }
.white-skin .key {
  background: #fff; color: #101116;
  border: calc(var(--px)*1.5) solid #74757b;
  box-shadow: 0 calc(var(--px)*2) calc(var(--px)*1) #b7b9bd;
  font-family: Arial, sans-serif;
  touch-action: manipulation;
}
.white-skin .key .lab { display: inline-block; line-height: 1; }
.white-skin .key .lab .lab { display: inline; }
.white-skin .key .fr { vertical-align: middle; }
.white-skin .key .fr i:first-child { background: currentColor; }
.white-skin .key .box { width: calc(var(--px)*12); height: calc(var(--px)*12); background: currentColor; }
.integral-mark { display: inline-block; position: relative; vertical-align: middle; width: calc(var(--px)*54); height: calc(var(--px)*39); }
.integral-sign { position: absolute; left: 0; top: calc(var(--px)*-4); font: calc(var(--px)*45)/1 'Times New Roman', serif; }
.integral-limit { position: absolute; left: calc(var(--px)*24); width: calc(var(--px)*7); height: calc(var(--px)*7); border: calc(var(--px)*1.5) solid currentColor; }
.integral-limit.upper { top: 0; }
.integral-limit.lower { bottom: 0; }
.integral-mark .box { position: absolute; right: 0; top: calc(var(--px)*13); }
.white-skin .key.fn { border-radius: calc(var(--px)*7); font-size: calc(var(--px)*31); font-weight: 500; }
.white-skin .key.pill { border-radius: calc(var(--px)*25); font-size: calc(var(--px)*25); font-weight: 500; }
.white-skin .key.num { border-radius: calc(var(--px)*10); font-size: calc(var(--px)*48); font-weight: 600; }
.white-skin .key.op { border-radius: calc(var(--px)*10); font-size: calc(var(--px)*51); font-weight: 500; }
.white-skin .key.big { border-radius: calc(var(--px)*10); font-size: calc(var(--px)*38); font-weight: 500; }
.white-skin .key[data-id='calc'], .white-skin .key[data-id='optn'],
.white-skin .key[data-id='rcl'], .white-skin .key[data-id='eng'] { font-size: calc(var(--px)*26); }
.white-skin .key[data-id='xvar'], .white-skin .key[data-id='sq'],
.white-skin .key[data-id='pow'] { font-family: 'Times New Roman', serif; font-size: calc(var(--px)*40); }
.white-skin .key[data-id='exp'] { font-size: calc(var(--px)*31); }
.white-skin .key[data-id='sd'] { font-size: calc(var(--px)*29); }
.white-skin .key[data-id='logab'] { font-size: calc(var(--px)*28); }
.white-skin .key.blue {
  background: #a6a7b3; color: #fff; border-color: #686975;
  box-shadow: 0 calc(var(--px)*2) calc(var(--px)*1) #b7b9bd;
  font-weight: 600;
}
.white-skin .key.big.blue { font-size: calc(var(--px)*40); }
.white-skin .key:active, .white-skin .key.is-pressed {
  transform: translateY(calc(var(--px)*2)); filter: none;
  box-shadow: inset 0 calc(var(--px)*1) calc(var(--px)*3) #b7b9bd;
}
.white-skin .key:focus-visible, .white-skin .arrow:focus-visible {
  outline: max(2px, calc(var(--px)*3)) solid #408dc1;
  outline-offset: calc(var(--px)*3);
}
.white-skin .key.armed { box-shadow: 0 0 0 calc(var(--px)*3) var(--shift); }
.white-skin .key.armed-a { box-shadow: 0 0 0 calc(var(--px)*3) var(--alpha); }
.white-skin .arrow { background: transparent; border: none; touch-action: manipulation; border-radius: calc(var(--px)*8); }
.white-skin .arrow::after { display: none; }
.white-skin .arrow svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.white-skin .arrow-face { fill: #fff; stroke: #8c8e93; stroke-width: 1.5; stroke-linejoin: round; }
.white-skin .arrow-glyph { fill: #fff; stroke: #c5c8cd; stroke-width: 1.7; stroke-linejoin: round; }
.white-skin .arrow:active, .white-skin .arrow.is-pressed { transform: translateY(calc(var(--px)*2)); }
.white-skin .arrow:active .arrow-glyph, .white-skin .arrow.is-pressed .arrow-glyph { stroke: #408dc1; }
.white-skin .arrow.up { left: calc(var(--px)*314); top: calc(var(--px)*538); width: calc(var(--px)*106); height: calc(var(--px)*39); }
.white-skin .arrow.down { left: calc(var(--px)*314); top: calc(var(--px)*659); width: calc(var(--px)*106); height: calc(var(--px)*34); }
.white-skin .arrow.left { left: calc(var(--px)*228); top: calc(var(--px)*563); width: calc(var(--px)*63); height: calc(var(--px)*105); }
.white-skin .arrow.right { left: calc(var(--px)*443); top: calc(var(--px)*563); width: calc(var(--px)*64); height: calc(var(--px)*105); }
.lcd-status { left: calc(var(--px)*5); right: calc(var(--px)*15); top: calc(var(--px)*8); height: calc(var(--px)*22); font-size: calc(var(--px)*19); gap: calc(var(--px)*4); letter-spacing: 0; }
.lcd-status .slot { min-width: calc(var(--px)*18); }
.lcd-status .ind { opacity: 1; }
.lcd-status .sq { display: none; }
.lcd-status .batt { width: calc(var(--px)*25); height: calc(var(--px)*15); border-width: calc(var(--px)*1.4); border-radius: 0; padding: calc(var(--px)*2); }
.lcd-status .batt::after { right: calc(var(--px)*-4); top: calc(var(--px)*3); width: calc(var(--px)*3); height: calc(var(--px)*6); }
.lcd-status .inv, .inv { background: #101812; color: #fff; }
/* Vung noi dung = dai chu that cua may: 4 dong chu lon vua khit tu tren xuong duoi.
   Do theo anh chup trong sach: dong dau cach mep tren 41 don vi, buoc dong 39 don vi,
   moi ky tu rong 31 don vi (22 be ngang chu + 9 gian cach) => 17-18 ky tu moi dong.
   Co chu 44 la muc lon nhat con chua du dau tieng Viet giua hai dong (0.88em + 0.13em). */
.lcd-body { top: calc(var(--px)*41); left: calc(var(--px)*7); right: calc(var(--px)*7);
  bottom: calc(var(--px)*18); }
.f-big { font-size: calc(var(--px)*44); line-height: calc(var(--px)*39); letter-spacing: calc(var(--px)*9); --ls: calc(var(--px)*9); }
.f-small { font-size: calc(var(--px)*30); line-height: calc(var(--px)*29); letter-spacing: calc(var(--px)*6.5); --ls: calc(var(--px)*6.5); }
.f-mini { font-size: calc(var(--px)*24); line-height: calc(var(--px)*24); letter-spacing: calc(var(--px)*5); --ls: calc(var(--px)*5); }
.cursor { width: calc(var(--px)*4); height: calc(var(--px)*30); background: #000; vertical-align: calc(var(--px)*-4); }
.cursor.full { width: calc(var(--px)*24); }
.cursor.ins { height: calc(var(--px)*11); width: calc(var(--px)*24); vertical-align: calc(var(--px)*-3); }
.lcd-content { display: block; width: max-content; min-width: 100%; }
/* ---- man hinh MENU: luoi 4x2 trai kin be ngang, cao dung 2 x 57 don vi ---- */
.modegrid { display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, calc(var(--px)*57)); width: 100%; }
.modecell { position: relative; overflow: hidden; }
.modename { margin-top: 0; }
.mode-native { display: block; width: 100%; height: 100%;
  background-repeat: no-repeat; image-rendering: pixelated; mix-blend-mode: multiply; }
.mode-native.original-selected { filter: invert(1); }
.mode-selected .mode-native { filter: invert(1); }
.mode-selected .mode-native.original-selected { filter: none; }
/* Du phong khi anh menu goc khong tai duoc: tu ve khung + so thu tu. */
.modegrid-plain .modecell { display: flex; align-items: center; justify-content: center;
  gap: calc(var(--px)*3); border-right: calc(var(--px)*2) solid currentColor;
  border-bottom: calc(var(--px)*2) solid currentColor; }
.modegrid-plain .modecell-empty { border: 0; }
.modegrid-plain .mode-selected { background: #101812; color: #fff; }
.modegrid-plain .modekey { font-size: .78em; align-self: flex-end; }
.app-tools { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; padding: 5px 8px max(5px,env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eee; z-index: 3; }
.app-tools button { font: 12px/1.4 system-ui,sans-serif; color: #4a4a4a; padding: 4px 9px; border: 1px solid #ddd; border-radius: 5px; background: #fff; cursor: pointer; }
.app-tools button:hover { background: #fff; color: #2877ad; border-color: #408dc1; }
#sidepanel { color: #333; }
#sidepanel h1 { color: #171717; }
#sidepanel .sub { color: #555; }
.tips { background: #fff; border-color: #ddd; }
kbd { background: #fff; border-color: #ccc; }
.btnrow button { background: #fff; color: #222; border-color: #ccc; }
.btnrow button:hover { background: #fff; color: #2877ad; border-color: #408dc1; }
#helpBox, #helpBox td:first-child { color: #333; }
@media (max-width: 900px) { .calc-wrap { width: min(520px, calc(100vw - 12px), calc((100svh - 52px) * 731 / 1470)); } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .app-tools, #sidepanel { display: none !important; } .calc-wrap { width: 340px; } }