:root {
  --bg: #1f1a2e;
  --bar: #2b2540;
  --ink: #f2e9dc;
  --muted: #b3a6c0;
  --accent: #f0c25e;
  --button: #f2e9dc;
  --button-ink: #2e2236;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #e9e2d6; --bar: #f6f1e8; --ink: #2e2236; --muted: #6f6378; --button: #2e2236; --button-ink: #f6f1e8; }
}
:root[data-theme="light"] { --bg: #e9e2d6; --bar: #f6f1e8; --ink: #2e2236; --muted: #6f6378; --button: #2e2236; --button-ink: #f6f1e8; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); }
#app { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 12px 16px; gap: 10px; }

#stage { position: relative; width: 100%; max-width: calc((100vh - 120px) * 16 / 9); min-width: 0; }
#screen {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  image-rendering: pixelated; border-radius: 8px; background: #1f1a2e; outline: none;
}
#screen:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
#nokeys {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(31, 26, 46, 0.92); color: #f2e9dc; border-radius: 8px; padding: 16px; font-size: 20px;
}
#nokeys[hidden] { display: none; }

#savebar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  background: var(--bar); border-radius: 8px; padding: 8px 14px; width: 100%; max-width: 1280px; font-size: 16px;
}
#savebar.nudge { box-shadow: 0 0 0 2px var(--accent); }
button {
  font: inherit; font-weight: 700; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer;
  background: var(--button); color: var(--button-ink);
}
button.link { background: none; color: var(--muted); text-decoration: underline; padding: 0; font-weight: 600; }
#copied { color: var(--accent); font-weight: 700; min-width: 4ch; }

#about { max-width: 900px; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.5; }
#about h1 { font-size: 16px; margin: 4px 0; color: var(--ink); }
#about p { margin: 0 0 6px; }
footer { max-width: 1280px; color: var(--muted); font-size: 13px; text-align: center; }
footer p { margin: 0; }

dialog {
  border: 0; border-radius: 12px; padding: 20px 24px; max-width: min(460px, calc(100vw - 32px));
  background: #faf7f2; color: #2e2236; font-size: 18px; text-align: center;
}
dialog::backdrop { background: rgba(20, 16, 30, 0.6); }
dialog .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
dialog button { background: #2e2236; color: #faf7f2; }
dialog button + button { background: #e9e2d6; color: #2e2236; }

@media (max-width: 600px) {
  #app { padding: 8px; }
  #savebar { font-size: 14px; }
}