@font-face { font-family: "Daruma"; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/daruma.woff2) format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/plex-400.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --ground: #141631;
  --paper: #f3ebdd;
  --haze: #a19dc2;
  --vermilion: #ff5a36;
  --cobalt: #3d6bff;
  --saffron: #ffb627;
  --jade: #19c2a0;
  --orchid: #ff7eb6;
  --display: "Daruma", "Darumadrop One", "Cooper Black", ui-rounded, system-ui, sans-serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font: 400 13px/1.6 var(--mono);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#paper { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

.top, .foot, .center { position: relative; pointer-events: none; }

.top, .foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--haze);
  text-shadow: 0 0 12px var(--ground);
}

.drops, .year { font-variant-numeric: tabular-nums; }

.center {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

h1 {
  margin: 0 0 0.6rem;
  font: 400 clamp(4.2rem, 19vw, 9.5rem)/0.9 var(--display);
  letter-spacing: -0.01em;
  color: var(--paper);
  mix-blend-mode: difference;
}

.line { margin: 0; font-size: 15px; letter-spacing: 0.04em; text-shadow: 0 0 14px var(--ground), 0 0 4px var(--ground); }
.line.soft { color: var(--haze); }
.hint { margin: 1.4rem 0 0; font-size: 11px; letter-spacing: 0.2em; color: var(--haze); opacity: 0.8; text-shadow: 0 0 10px var(--ground); }

.letter { pointer-events: auto; margin-top: 2rem; display: grid; gap: 0.6rem; justify-items: center; width: min(26rem, 100%); }
.letter label { font-size: 11px; letter-spacing: 0.14em; color: var(--haze); text-shadow: 0 0 10px var(--ground); }
.letter .row { display: flex; width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--ground) 82%, transparent); border: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent); backdrop-filter: blur(6px); }
.letter .row:focus-within { border-color: var(--saffron); }
.letter input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0.7rem 1.1rem; font: 400 14px var(--mono); color: var(--paper); outline: none; }
.letter input::placeholder { color: color-mix(in srgb, var(--haze) 70%, transparent); }
.letter button { border: 0; margin: 4px; padding: 0 1.1rem; border-radius: 999px; background: var(--vermilion); color: var(--ground); font: 400 1.05rem var(--display); cursor: pointer; }
.letter button:hover { background: var(--saffron); }
.letter button:disabled { opacity: 0.6; cursor: default; }
.letter button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.letter .note { margin: 0; min-height: 1.6em; font-size: 12px; color: var(--haze); text-shadow: 0 0 10px var(--ground); }
.letter .note.ok { color: var(--jade); }
.letter .note.bad { color: var(--orchid); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) {
  .line { font-size: 13px; }
  .foot span:first-child { max-width: 60%; }
}