:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: #e7e1d6;
  color: #1b1916;
  font: 18px/1.4 ui-sans-serif, system-ui, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

body[data-state="wait"] { background: #8e2f2a; color: #fff8f4; }
body[data-state="go"] { background: #1f8a4c; color: #f3fff6; }
body[data-state="soon"] { background: #c47b1a; color: #1b1408; }
body[data-state="result"] { background: #f7f4ee; color: #1b1916; }

main { max-width: 32rem; margin: 0 auto; }

.kicker {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 750;
}

h1 { margin: 0.1rem 0 0.6rem; font-size: 1.6rem; }

#pad {
  width: 100%;
  min-height: 52vh;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
  font: 700 2.4rem/1.1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

body[data-state="result"] #pad {
  background: white;
  font-size: 3.4rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

#pad:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.detail { font-size: 1.05rem; }