@font-face {
  font-family: Literata;
  font-weight: 200 900;
  src: url(fonts/literata-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Literata;
  font-weight: 200 900;
  src: url(fonts/literata-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nord0: #2e3440; --nord1: #3b4252; --nord2: #434c5e; --nord3: #4c566a;
  --nord4: #d8dee9; --nord8: #88c0d0; --nord11: #bf616a; --nord13: #ebcb8b; --nord14: #a3be8c;
  --bg: var(--nord0); --fg: var(--nord4); --faint: var(--nord3); --accent: var(--nord8);
  --ok: var(--nord14); --bad: var(--nord11); --hint: var(--nord13);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 1.5rem/1.7 Literata, Georgia, serif; font-optical-sizing: auto; }
[hidden] { display: none !important; }

.screen { max-width: 62ch; min-height: 100vh; margin: 0 auto; padding: 3rem 1.5rem 7rem; }
h1 { font-size: 2rem; font-weight: 500; letter-spacing: 0.02em; margin: 0 0 2rem; }
h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 1rem; }
.empty { opacity: 0.7; }

kbd { font: inherit; font-size: 0.85em; color: var(--accent); }
.keys { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; padding: 1rem 1.5rem; font-size: 0.85rem; background: linear-gradient(transparent, var(--bg) 40%); }
.keys span { opacity: 0.55; }
.overlay .keys { position: static; padding: 1.25rem 0 0; background: none; }

.texts, .sections { list-style: none; margin: 0; padding: 0; }
.texts li, .sections li { padding: 0.6rem 1rem; border-left: 2px solid transparent; display: flex; flex-direction: column; }
.texts li.sel, .sections li.sel { border-color: var(--accent); background: var(--nord1); }
.texts .title { font-size: 1.3rem; }
.meta, .sections li span:not(:first-child) { font-size: 0.85rem; opacity: 0.6; }
.sections li { flex-direction: row; gap: 1rem; align-items: baseline; }
.sections li span:first-child { width: 11rem; }
.sections .ok { color: var(--ok); opacity: 1; }
.sections .bad { color: var(--bad); opacity: 1; margin-left: auto; text-decoration: none; }

.editor input, .editor textarea, .editor select { width: 100%; margin-bottom: 1rem; padding: 0.6rem 0.8rem; color: var(--fg); background: var(--nord1); border: 1px solid var(--nord2); border-radius: 3px; font: inherit; font-size: 1.1rem; line-height: 1.5; }
.editor textarea { resize: vertical; }
.editor input:focus, .editor textarea:focus, .editor select:focus { outline: none; border-color: var(--accent); }
.screen.editor { max-width: 84rem; }
.editor .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.editor .settings { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; font-size: 1rem; }
.editor .settings label { display: flex; flex-direction: column; gap: 0.3rem; }
.editor .settings input { margin: 0; }
.error { color: var(--bad); min-height: 1.5em; margin: 0.5rem 0; font-size: 1rem; }
.preview { font-size: 1rem; padding-left: 2.2rem; }
.preview .count { opacity: 0.6; }
.preview section { display: flex; flex-direction: column; margin: 1rem 0; padding: 0.5rem 1rem; border-left: 2px solid var(--nord3); position: relative; line-height: 1.5; }
.preview b { position: absolute; left: -2.2rem; font-size: 0.8rem; font-weight: 400; opacity: 0.5; }
.preview .gapline { height: 0.7rem; }

.status { display: flex; justify-content: space-between; margin-bottom: 4rem; font-size: 0.95rem; opacity: 0.6; }
.dots i { display: inline-block; width: 0.55rem; height: 0.55rem; margin-left: 0.4rem; border: 1px solid var(--faint); border-radius: 50%; }
.dots i.done { background: var(--faint); }
.dots i.now { border-color: var(--accent); background: var(--accent); }

.practice .text { padding-bottom: 40vh; }
.line { margin-bottom: 0.2rem; }
.line.gap { margin-top: 1.7rem; }
.word { display: inline-block; white-space: pre; }
.word span { font-variant-ligatures: none; }
.ok { color: var(--ok); }
.bad { color: var(--bad); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hint { color: var(--hint); }
.close { color: var(--hint); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prompt { color: var(--fg); opacity: 0.55; }
.blank { color: transparent; border-bottom: 1px solid var(--faint); }
.blank.gap { border-bottom-color: transparent; }
.word.missed { background: rgba(191, 97, 106, 0.12); border-radius: 3px; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin: 0 -1px; vertical-align: text-bottom; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.practice.read .text { color: var(--fg); }

.banner { margin-top: -38vh; position: relative; text-align: center; font-size: 1rem; color: var(--accent); }
.summary { position: sticky; bottom: 4.5rem; margin-top: -36vh; padding: 0.8rem 1rem; text-align: center; background: var(--nord1); border-radius: 3px; font-size: 1.1rem; }
.summary.pass { color: var(--ok); }
.summary.fail { color: var(--hint); }
.by-section { margin-top: 0.3rem; font-size: 0.9rem; color: var(--fg); opacity: 0.7; }

#overlay:not(:empty) { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(46, 52, 64, 0.85); }
.panel { width: min(34rem, 90vw); max-height: 80vh; overflow: auto; padding: 1.5rem 2rem; background: var(--nord1); border: 1px solid var(--nord3); border-radius: 4px; font-size: 1.1rem; }
.panel p { margin: 0; }
.panel input { width: 100%; margin-top: 1rem; padding: 0.6rem 0.8rem; color: var(--fg); background: var(--nord0); border: 1px solid var(--nord2); border-radius: 3px; font: inherit; font-size: 1.1rem; }
.panel input:focus { outline: none; border-color: var(--accent); }
.sync { margin: 1.5rem 0 0; font-size: 0.95rem; opacity: 0.6; cursor: pointer; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1.5rem; margin: 0; font-size: 1rem; }
dt.group { grid-column: 1 / -1; margin-top: 0.8rem; color: var(--hint); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
dd { margin: 0; opacity: 0.8; }

html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

#kb { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; }

.bar, .dialog-buttons { display: none; }
.btn { flex: 1; min-height: 44px; padding: 0 0.9rem; font: inherit; font-size: 1rem; color: var(--fg); background: var(--nord2); border: 1px solid var(--nord3); border-radius: 6px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.btn.primary { color: var(--nord0); background: var(--accent); border-color: var(--accent); font-weight: 600; }

@media (pointer: coarse) {
  .keys { display: none; }
  .bar { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 5; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--nord1); border-top: 1px solid var(--nord3); }
  .bar-row { display: flex; gap: 0.5rem; }
  .bar-row.nav { overflow-x: auto; scrollbar-width: none; }
  .bar-row.nav .btn { flex: 0 0 auto; min-height: 40px; font-size: 0.9rem; }
  .dialog-buttons { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
  .texts li { padding: 0.9rem 1rem; }
  .sections li { padding: 0.8rem 1rem; }
  .summary { bottom: calc(var(--kb, 0px) + 9.5rem); }
}

@media (max-width: 700px) {
  body { font-size: 1.3rem; }
  .screen { padding: max(1.5rem, env(safe-area-inset-top)) 1rem 11rem; }
  h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
  .status { flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 2rem; font-size: 0.85rem; }
  .practice .text { padding-bottom: 50vh; }
  .editor .grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .editor .settings { gap: 0.6rem 1rem; }
  .preview { padding-left: 2rem; }
  .panel { padding: 1.25rem 1.25rem; }
  dl { grid-template-columns: 1fr; }
  dd { margin-bottom: 0.4rem; }
  .sections li span:first-child { width: 7rem; }
}