/* The ground everything else stands on: the two palettes, the type, and the
   handful of shapes -- buttons, the view frame -- that both screens share. */

:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --ink: #17171c;
  --sel: #17171c;
  --sel-ink: #fafaf8;
  --muted: #70707a;
  --border: #e7e6e1;
  --border-strong: #d8d7d1;
  --seal: #d6402f;
  --seal-ink: #ffffff;
  --indigo: #4361b2;
  --indigo-soft: #e4e9f6;
  --good: #2f9e63;
  --good-soft: #e2f3ea;
  --bad-soft: #fbe9e6;
  --warn: #d99a26;
  --track: #dedcd6;
  --shadow: 0 1px 2px rgba(23,23,28,.04), 0 8px 24px rgba(23,23,28,.06);
  --shadow-lift: 0 2px 4px rgba(23,23,28,.05), 0 12px 32px rgba(23,23,28,.10);
}
/* Darcula: the JetBrains editor palette — warm grey ground, muted blue-grey
   text, and the syntax accents (orange keyword, string green, number blue)
   doing the work of the seal, the verdicts and the progress bars. */
[data-theme="dark"] {
  --bg: #2b2b2b;
  --surface: #3c3f41;
  --ink: #a9b7c6;
  --sel: #3b5f9e;
  --sel-ink: #f0f2f6;
  --muted: #a3a9b1;
  --border: #4e5254;
  --border-strong: #646b70;
  --seal: #d98c46;
  --seal-ink: #2b2b2b;
  --indigo: #7cb0d6;
  --indigo-soft: #2d3a45;
  --good: #98c379;
  --good-soft: #2f3a2b;
  --bad-soft: #402d29;
  --warn: #bbb529;
  --track: #4e5254;
  --shadow: none;
  --shadow-lift: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; overscroll-behavior: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.kana-font {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}
.mono {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  /* no double-tap zoom to wait on, and no pan gesture to lose the tap to */
  touch-action: manipulation;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 8px;
}
.view { max-width: 30rem; margin: 0 auto; padding: 1rem .75rem 3rem; }
.hidden { display: none !important; }

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