@font-face { font-family: 'Unbounded'; font-weight: 400 900; font-display: swap; src: url(/fonts/unbounded-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 400 900; font-display: swap; src: url(/fonts/unbounded-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f8fafd;
  --grid: #dce6f2;
  --margin: #f0646e;
  --ink: #1e2a4a;
  --ink-soft: #5d6886;
  --pen: #2f4fd0;
  --pen-dark: #213a9e;
  --marker: #ffe15a;
  --ok: #1f9d63;
  --sheet: #ffffff;
  --cell: 24px;
  --display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--text);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.01em; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  color: inherit;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, input:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 22px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: #fff; background: var(--pen);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--pen-dark);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pen-dark); }
.btn:disabled { background: #b8c2da; box-shadow: 0 4px 0 #9aa5c0; cursor: default; }
.btn.quiet { color: var(--ink); background: var(--sheet); box-shadow: 0 0 0 2px var(--ink) inset, 0 4px 0 var(--ink); }

.avatar {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  font-size: 26px; line-height: 1;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 0 0 0 3px var(--c, var(--ink));
}

/* The word mask: one notebook cell per letter, opened letters under the marker. */
.cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.cells span {
  display: inline-grid; place-items: center;
  width: var(--w, 34px); height: var(--w, 34px);
  font-family: var(--display); font-weight: 700; font-size: calc(var(--w, 34px) * .58);
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  margin-left: -1.5px;
  background: var(--sheet);
}
.cells span:first-child { margin-left: 0; }
.cells span.open { background: var(--marker); }
.cells span.gap { border: 0; background: none; width: calc(var(--w, 34px) * .6); }
.cells span.gap + span { margin-left: 0; }
.cells.revealed span:not(.gap) { background: var(--marker); }

.timer {
  --p: 1;
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-family: var(--display); font-weight: 700; font-size: 22px;
  background: conic-gradient(var(--pen) calc(var(--p) * 360deg), #e4e9f3 0);
  position: relative;
}
.timer::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sheet); }
.timer b { position: relative; font-weight: 700; }
.timer.hurry { background: conic-gradient(var(--margin) calc(var(--p) * 360deg), #f6dfe1 0); }

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

/* Play buttons: a spinner while the clip loads, then the button fills up as it plays. */
.btn.playing {
  --progress: 0;
  background: linear-gradient(90deg, var(--marker) calc(var(--progress) * 100%), var(--sheet) 0);
}
.btn.loading::before {
  content: ''; width: 1em; height: 1em; border-radius: 50%; flex: none;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }