/* SpeakSlava · Remember · look v2 · 2026-10-01 (v2: Back and Settings 52 px, word-for-word 17 px) — the family colours: cream, navy, flag blue, gold. */
:root{
  --rm-bg:#F6F2E8; --rm-card:#FFFDF7; --rm-ink:#1F3447; --rm-muted:#526577; --rm-line:#D9D0BD; --rm-soft:#ECE5D6;
  --rm-navy:#203B51; --rm-blue:#0057B7; --rm-tint:#E4EDF8; --rm-gold:#F2C744; --rm-gold-deep:#B47700; --rm-gold-ink:#2A2104;
  --rm-seg:#E8E1D1; --rm-warn-bg:#FBEBD9; --rm-warn:#7A4A08; --rm-dot:#CFC6B4;
  --rm-uk: var(--ss-font-slot-ukrainian, "Andika", "Noto Sans", system-ui, sans-serif);
  --rm-ui: var(--ss-font-slot-ui, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --rm-en: var(--ss-font-slot-natural, "Noto Sans", system-ui, sans-serif);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--rm-bg);color:var(--rm-ink)}
body{font-family:var(--rm-ui);font-size:16px;line-height:1.5;padding:0 16px 40px}
button,select,textarea,input{font-family:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--rm-blue);outline-offset:2px}
[hidden]{display:none!important}
h2,h3{margin:0}

.rmTop{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 8px}
.rmBrand{display:flex;align-items:center;gap:12px;min-width:0}
.rmBrand img{height:56px;width:auto;display:block}
.rmTitle{display:flex;flex-direction:column;line-height:1.15}
.rmTitle h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.rmTitle span{font-size:17px;color:var(--rm-muted);font-family:var(--rm-uk)}

.rmWrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.view{display:flex;flex-direction:column;gap:14px}
.card{background:var(--rm-card);border:1px solid var(--rm-line);border-radius:18px;padding:16px}
.block{display:flex;flex-direction:column;gap:8px}
.block h2{font-size:15px;font-weight:800}
.hint{margin:0;color:var(--rm-muted);font-size:14px}
.muted{color:var(--rm-muted)}
.small{font-size:13px;font-weight:700;color:var(--rm-muted)}
.status{margin:0;text-align:center;font-size:14px;color:var(--rm-muted);min-height:1.4em}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.center{justify-content:center}
.row.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.row.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

/* buttons */
.btnMain{min-height:50px;padding:0 20px;border-radius:14px;border:0;background:var(--rm-navy);color:#fff;font-size:16px;font-weight:800}
.btnMain.big{min-height:58px;padding:0 28px;font-size:18px}
.btnSoft{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--rm-line);background:#fff;font-size:15px;font-weight:700}
.btnSoft.tall{min-height:58px;font-size:16px}
.btnSoft[aria-pressed="true"]{background:var(--rm-tint);border-color:var(--rm-blue);color:var(--rm-blue)}
.bigGo{min-height:58px;border:0;border-radius:16px;background:var(--rm-gold);color:var(--rm-gold-ink);font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.bigGo.small{min-height:52px;font-size:17px}
.hear{display:inline-flex;align-items:center;gap:8px}

/* start */
.today{display:flex;flex-direction:column;gap:12px}
.todayTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.todayTop h2{font-size:17px;font-weight:800}
#rmToday{font-size:15px;color:var(--rm-muted)}
#rmToday b{color:var(--rm-ink)}
#rmStart{min-height:62px;font-size:21px}
.segs{display:grid;gap:4px;background:var(--rm-seg);border-radius:14px;padding:4px}
.segs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg{min-height:46px;border:0;border-radius:10px;background:transparent;color:#3E4C59;font-size:15px;font-weight:700}
.seg[aria-pressed="true"]{background:var(--rm-card);color:var(--rm-ink);box-shadow:0 1px 3px rgba(31,52,71,.2)}
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.lvl{min-height:68px;border-radius:12px;border:1px solid var(--rm-line);background:var(--rm-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px}
.lvl b{font-size:12px;font-weight:800}
.lvl span{font-size:12px}
.lvl small{font-size:11px;color:var(--rm-muted)}
.lvl[aria-pressed="true"]{border:2px solid var(--rm-navy);background:var(--rm-navy);color:#fff}
.lvl[aria-pressed="true"] small{color:#D6DEE6}
.scriptBox{display:flex;flex-direction:column;gap:10px}
.scriptBox label{font-weight:800}
.scriptBox h3{font-size:15px}
#rmScriptText{width:100%;min-height:180px;resize:vertical;border:2px solid var(--rm-blue);border-radius:14px;background:#fff;padding:12px;font-family:var(--rm-uk);font-size:19px;line-height:1.55}
.scriptBox input{min-height:46px;flex:1 1 180px;border:1px solid var(--rm-line);border-radius:12px;padding:0 12px;font-size:15px;background:#fff}
#rmScriptNote{margin:0;font-size:14px;color:var(--rm-muted);min-height:1.2em}
.scripts{display:flex;flex-direction:column;gap:6px}
.scriptRow{display:flex;gap:6px}
.scriptOpen{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--rm-line);background:#fff;text-align:left}
.scriptOpen[aria-current="true"]{border:2px solid var(--rm-blue);background:var(--rm-tint)}
.scriptName{font-weight:700}
.scriptMeta{font-size:13px;color:var(--rm-muted)}
.scriptDel{min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--rm-line);background:#fff;font-size:14px;font-weight:700;color:#8a2a2a}
.way{display:flex;align-items:center;gap:12px;min-height:66px;padding:0 14px;border-radius:14px;background:var(--rm-card);border:1px solid var(--rm-line);text-align:left}
.wayIco{flex:none;width:38px;height:38px;border-radius:10px;background:var(--rm-tint);color:var(--rm-blue);display:flex;align-items:center;justify-content:center}
.wayText{display:flex;flex-direction:column;min-width:0}
.wayText b{font-size:16px}
.wayText small{font-size:13px;color:var(--rm-muted)}
.kept{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 14px;border-radius:14px;border:1px dashed #A99F90;background:transparent;font-size:15px;font-weight:700}
.kept span + span{color:var(--rm-muted);font-weight:600}
.more summary{cursor:pointer;font-weight:800;min-height:52px;display:flex;align-items:center}
.more p{font-size:14px;color:var(--rm-muted);margin:6px 0}
.set{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.set h3{font-size:15px;font-weight:800}
.set.voiceRow{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.set.voiceRow label{font-weight:800}
#rmVoice{min-height:44px;border-radius:12px;border:1px solid var(--rm-line);background:#fff;padding:0 12px;font-size:16px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--rm-line);background:#fff;font-size:14px;font-weight:700}
.chip[aria-pressed="true"]{background:var(--rm-blue);border-color:var(--rm-blue);color:#fff}

/* practice screens */
.viewTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.viewTop h2{font-size:16px;font-weight:800;text-align:right}
.back{min-height:52px;padding:0 14px;border-radius:12px;border:1px solid var(--rm-line);background:var(--rm-card);font-size:15px;font-weight:700}
.progress{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.progress span{font-size:14px;font-weight:700;color:var(--rm-muted)}
.dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dot{width:8px;height:8px;border-radius:4px;background:var(--rm-dot)}
.dot.on{width:18px;background:var(--rm-blue)}
.dot.done{background:var(--rm-navy)}
.bar{width:140px;height:8px;border-radius:4px;background:var(--rm-soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--rm-blue)}
.stage{display:flex;flex-direction:column;gap:18px;min-height:460px;border-radius:20px}
.clue{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding-top:6px}
.clue p{margin:0;font-family:var(--rm-en);font-size:24px;font-weight:700;line-height:1.3}
.hiddenSide,.shownSide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.hiddenSide .muted{margin:0;font-size:17px;text-align:center}
.shownSide{border-top:1px solid var(--rm-soft);padding-top:16px;align-items:stretch}
.shownSide > .row{justify-content:center}
.words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.w{display:flex;flex-direction:column;align-items:center;gap:4px}
.w .uk{font-family:var(--rm-uk);font-size:34px;line-height:1.15}
.w .en{font-family:var(--rm-en);font-size:17px;color:var(--rm-muted)}
.words.small{gap:6px 12px}
.words.small .uk{font-size:20px}
.words.small .en{font-size:17px}
.words.long .uk{font-size:26px}
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gNot,.gKnow{min-height:58px;border-radius:14px;font-size:17px;font-weight:800}
.gNot{border:2px solid var(--rm-line);background:#fff}
.gKnow{border:2px solid var(--rm-blue);background:var(--rm-blue);color:#fff}
.after{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--rm-tint);border-radius:14px;padding:10px 12px}
.after span{font-size:15px;font-weight:700}
.doneCard{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.doneCard h3{font-size:22px;font-weight:800}
.doneCard p{margin:0;color:var(--rm-muted)}

/* rebuild */
.answer{min-height:120px;border:2px dashed var(--rm-line);border-radius:16px;padding:14px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px}
.answer .placeholder{font-size:15px;color:var(--rm-muted)}
.bank{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tile{min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--rm-line);background:#fff;font-family:var(--rm-uk);font-size:24px}
.tile.placed{border:2px solid var(--rm-blue);background:var(--rm-tint)}
.tile.used{border-style:dashed;color:#C9C0AE;background:transparent}
.answer.ok .tile{border-color:var(--rm-blue)}
.note{border-radius:14px;padding:12px;text-align:center;font-size:16px}
.note.good{background:var(--rm-tint);display:flex;flex-direction:column;gap:8px;align-items:center}
.note.good b{color:var(--rm-blue);font-size:16px}
.note.warn{background:var(--rm-warn-bg);color:var(--rm-warn);font-weight:700}

/* dictation */
.write{display:flex;flex-direction:column;gap:8px}
.write label{font-size:15px;font-weight:800}
#dcText{width:100%;min-height:84px;border:2px solid var(--rm-blue);border-radius:14px;background:#fff;padding:12px 14px;font-family:var(--rm-uk);font-size:24px;resize:vertical}
.letters{display:flex;flex-wrap:wrap;gap:6px}
.letter{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--rm-line);background:#fff;font-family:var(--rm-uk);font-size:20px}
.compare{display:flex;flex-direction:column;gap:12px}
.compare h3{font-size:15px;font-weight:800}
.cmpLine{margin:2px 0 0;font-family:var(--rm-uk);font-size:28px;line-height:1.3;word-break:break-word}
.cmpLine .miss{background:var(--rm-tint);color:var(--rm-blue);border-radius:4px;padding:0 2px}
.cmpLine .extra{background:var(--rm-warn-bg);color:var(--rm-warn);border-radius:4px;padding:0 2px}
#dcVerdict{margin:0;font-size:15px}
#dcEnglish{margin:0;font-size:17px}
.compare .words{justify-content:flex-start;border-top:1px solid var(--rm-soft);padding-top:10px}

/* questions */
.qStage{align-items:center;gap:20px}
.qStage .words{padding-top:12px}
.qStage .w .uk{font-size:36px}
.ring{position:relative;width:170px;height:170px}
.ring svg{display:block}
#qsArc{transition:stroke-dashoffset .25s linear}
.ringNum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringNum b{font-size:52px;font-weight:800;line-height:1}
.ringNum span{font-size:14px;color:var(--rm-muted)}
.qSay{margin:0;font-size:19px;font-weight:700;text-align:center;min-height:1.5em}
.qTime{align-self:stretch;margin-top:auto}
.qDone{display:flex;flex-direction:column;gap:10px;align-items:center}

.toggles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.toggle{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--rm-line);background:#fff;font-size:14px;font-weight:700}
.toggle[aria-pressed="true"]{background:var(--rm-navy);border-color:var(--rm-navy);color:#fff}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:420px){
  .rmBrand img{height:46px}
  .rmTitle h1{font-size:22px}
  .lvl b,.lvl span{font-size:11px}
  .w .uk{font-size:30px}
  .words.long .uk{font-size:23px}
  .clue p{font-size:21px}
  .tile{font-size:21px;padding:0 12px}
  .cmpLine{font-size:24px}
}
#rcHear,#rcHearFirst{min-height:56px}