html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 669px;
  height: 951px;
  transform-origin: 0 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#shell {
  position: absolute;
  left: 0;
  top: 0;
  width: 669px;
  height: 951px;
  display: block;
  pointer-events: none;
}

/* Screen: origin (67.667, 62) pt, 533.333 x 333.333 pt = 1600 x 1000 px @3x */
#lcd {
  position: absolute;
  left: 67.6666667px;
  top: 62px;
  width: 533.3333333px;
  height: 333.3333333px;
  display: block;
  image-rendering: pixelated; /* no smoothing if the browser has to scale the canvas */
  pointer-events: none;
  z-index: 2;
}
/* Keys */
.key .top { transition: transform 40ms linear; }
.key.down .top { transform: translateY(1.5px); }
.key.down .face { fill: url(#gKeyTopDown); }
.key.button.down .face { fill: url(#gBtnDown); }
/* photo keycaps (PHOTO in shell.js): swap normal/pressed images */
.key.photo .cap-down { visibility: hidden; }
.key.photo.down .cap-down { visibility: visible; }
.key.photo.down .cap-up { visibility: hidden; }

/* Settings dialog, styled after a System 6 modal */
#menu {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.15);
  touch-action: auto;
}
#menu[hidden] { display: none; }
.mac-dialog {
  position: absolute;
  left: 104px;
  top: 78px;
  width: 460px;
  background: #fff;
  border: 1.5px solid #000;
  box-shadow: 3px 3px 0 #000;
  font: 600 14px/1.25 -apple-system, "Helvetica Neue", sans-serif;
  color: #000;
}
.mac-title {
  height: 22px;
  border-bottom: 1.5px solid #000;
  background: repeating-linear-gradient(#fff 0 2px, #000 2px 3px);
  background-clip: content-box;
  padding: 4px 6px;
  box-sizing: border-box;
  text-align: center;
  line-height: 14px;
}
.mac-title span { background: #fff; padding: 0 8px; font-weight: 700; }
.mac-body { padding: 12px 16px 12px; display: grid; gap: 9px; }
.mac-body label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mac-body label.check { justify-content: flex-start; }
.mac-body select, .mac-body input[type=range] {
  font: inherit;
  width: 250px;
  border: 1.5px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  padding: 2px 4px;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 1.5px 1.5px 0 #000;
}
.mac-body input[type=range] { box-shadow: none; border: 0; padding: 0; accent-color: #000; -webkit-appearance: auto; appearance: auto; }
.mac-body input[type=checkbox] { width: 16px; height: 16px; accent-color: #000; }
.mac-value { font-weight: 400; width: 250px; }
.mac-spacer { flex: 1; }
.mac-status { font-weight: 400; font-size: 12px; min-height: 15px; color: #333; }
.mac-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }
.mac-buttons button {
  font: inherit;
  background: #fff;
  color: #000;
  border: 1.5px solid #000;
  border-radius: 9px;
  padding: 4px 12px;
  min-width: 70px;
}
.mac-buttons button:active { background: #000; color: #fff; }
.mac-buttons button.default { outline: 3px solid #000; outline-offset: 1.5px; border-radius: 9px; }
.mac-note { font-weight: 400; font-size: 11px; color: #555; }

/* invisible real switches over keys/button for iOS haptics (see haptics.js) */
.haptic-switches { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.haptic-switches label { position: absolute; display: block; pointer-events: auto; opacity: 0.011;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.haptic-switches input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; border: 0; outline: 0; }

/* install instructions when opened in a browser tab (install-card.js) */
.install-card { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); touch-action: auto; }
.install-sheet { width: min(86vw, 420px); padding: 22px 22px 18px; border-radius: 18px; background: #DDD6CA; color: #2a2925;
  font: 16px/1.4 -apple-system, system-ui, sans-serif; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); -webkit-user-select: none; user-select: none; }
.install-sheet h2 { margin: 0 0 10px; font-size: 19px; }
.install-sheet ol { margin: 0 0 16px; padding-left: 22px; }
.install-sheet li { margin: 6px 0; }
.install-sheet button { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: #2a2925; color: #fff;
  font: 600 16px -apple-system, system-ui, sans-serif; }
.share-glyph { display: inline-block; width: 13px; height: 16px; vertical-align: -2px; margin: 0 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16' fill='none' stroke='%232a2925' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 1v9M3.5 4l3-3 3 3M4 6.5H2v8.5h9V6.5H9'/%3E%3C/svg%3E"); }