/* White VINACAL faceplate from the user's unmodified 1706 × 2560 photo.
   Frame source rectangle (424, 449, 816, 1662) in a 731 × 1470 virtual canvas.
   Key hit areas in keymap.js use this same virtual coordinate system. */
@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, body { background: #fff; color: #222; }
body { background-image: none; }
[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)); }
.photo-skin .shell {
  border-radius: 7% 7% 15% 15% / 3.5% 3.5% 7% 7%;
  background: #e2dfda; box-shadow: none;
}
.machine-photo {
  position: absolute;
  left: calc(var(--px) * -379.8333); top: calc(var(--px) * -397.13);
  width: calc(var(--px) * 1528.2917); height: calc(var(--px) * 2264.2599);
  max-width: none; pointer-events: none;
}
.photo-skin .bezel, .photo-skin .brand, .photo-skin .model,
.photo-skin .sci-label, .photo-skin .klabel, .photo-skin .cursorpad { display: none; }
.photo-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: transparent;
}
.photo-skin .lcd {
  border-radius: inherit; background: transparent; box-shadow: none; color: #101812;
  /* Blend the complete display with the photographed LCD, including selected menu icons. */
  mix-blend-mode: multiply;
}
.photo-skin .lcd { font-family: "VINACAL LCD", "DejaVu Sans Mono", monospace; }
.photo-skin .lcd.off { background: transparent; }
.photo-skin .key, .photo-skin .key.blue, .photo-skin .arrow {
  background: transparent; color: transparent; box-shadow: none;
  touch-action: manipulation; border: none; transform: none;
}
.photo-skin .key .lab { visibility: hidden; }
.photo-skin .key:active, .photo-skin .key.is-pressed, .photo-skin .arrow:active, .photo-skin .arrow.is-pressed {
  background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 calc(var(--px) * 7) rgba(0, 0, 0, .35);
}
.photo-skin .key:focus-visible, .photo-skin .arrow:focus-visible {
  outline: calc(var(--px) * 3) solid #69c9ea; outline-offset: calc(var(--px) * 2);
}
.photo-skin .key.armed { box-shadow: inset 0 0 0 calc(var(--px) * 3) #747680; }
.photo-skin .key.armed-a { box-shadow: inset 0 0 0 calc(var(--px) * 3) #438dbe; }
.photo-skin .arrow::after { display: none; }
.photo-skin .arrow.up { left: calc(var(--px)*314); top: calc(var(--px)*538); width: calc(var(--px)*106); height: calc(var(--px)*39); clip-path: polygon(0 0,100% 0,86% 100%,16% 100%); }
.photo-skin .arrow.down { left: calc(var(--px)*314); top: calc(var(--px)*659); width: calc(var(--px)*106); height: calc(var(--px)*34); clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); }
.photo-skin .arrow.left { left: calc(var(--px)*228); top: calc(var(--px)*563); width: calc(var(--px)*63); height: calc(var(--px)*105); border-radius: 70% 15% 15% 70%; }
.photo-skin .arrow.right { left: calc(var(--px)*443); top: calc(var(--px)*563); width: calc(var(--px)*64); height: calc(var(--px)*105); border-radius: 15% 70% 70% 15%; }
.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; }
.lcd-body { top: calc(var(--px)*39); left: calc(var(--px)*7); right: calc(var(--px)*7); }
.f-big { font-size: calc(var(--px)*40); line-height: calc(var(--px)*55); letter-spacing: calc(var(--px)*.4); }
.f-small { font-size: calc(var(--px)*31); line-height: calc(var(--px)*37); letter-spacing: 0; }
.f-mini { font-size: calc(var(--px)*26); line-height: calc(var(--px)*29); letter-spacing: 0; }
.cursor { width: calc(var(--px)*3); height: calc(var(--px)*39); background: #000; }
.cursor.full { width: calc(var(--px)*16); }
.lcd-content { display: block; width: max-content; min-width: 100%; }
.mode-native { display: inline-block; width: calc(var(--px)*99); height: calc(var(--px)*57);
  background-repeat: no-repeat; background-size: calc(var(--px)*509) calc(var(--px)*238);
  background-position: calc(var(--px)*var(--icon-x)*-1.45) calc(var(--px)*var(--icon-y)*-1.45);
  image-rendering: pixelated; vertical-align: middle; }
.mode-native.original-selected { filter: invert(1); }
.mode-selected .mode-native { filter: invert(1); }
.mode-selected .mode-native.original-selected { filter: none; }
.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: rgba(255,255,255,.96); 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: #f1f1f1; }
#sidepanel { color: #333; }
#sidepanel h1 { color: #171717; }
#sidepanel .sub { color: #555; }
.tips { background: #fafafa; border-color: #ddd; }
kbd { background: #eee; border-color: #ccc; }
.btnrow button { background: #fff; color: #222; border-color: #ccc; }
.btnrow button:hover { background: #eee; }
#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; } }