/* Deviatak – Test9 – web. Same look as the app („Zošit“, a school exercise book): ruled paper
   with a red margin line, serif headings, ink-blue text, notebook covers in the subject colours, a
   sticky note and red stamps. Dark mode is a chalkboard. System fonts only, no scripts. */
:root {
  --paper: #fbf8f1;
  --surface: #fffefa;
  --surface-muted: #f3eee2;
  --ink: #1f2a5c;
  --muted: #555c7d;
  --faint: #9499af;
  --border: #e4dccb;
  --edge: #cdc3ad;
  --rule: #ece5d5;
  --margin: #edb5ab;
  --math: #7f77dd;
  --math-edge: #534ab7;
  --sjl: #d85a30;
  --sjl-edge: #993c1d;
  --amber: #e39b18;
  --red: #c8372d;
  --green: #2e7d4f;
  --note: #ffe680;
  --note-edge: #e9c94a;
  --note-ink: #3a3000;
  --highlight: rgba(255, 221, 64, 0.55);
  /* green and red pen, pale fills (answers in the promo phone) */
  --ok-soft: #e5f2e8;
  --ok-border: #8cc5a0;
  --ok-edge: #21603b;
  --ok-text: #1d4f31;
  --on-ok: #fff;
  --bad-soft: #fbe9e6;
  --bad-border: #e8a097;
  --bad-text: #7e1f17;
  --sjl-soft: #faece7;
  --amber-soft: #fff1c2;
  --amber-text: #6b4a00;
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --line: 28px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1e2925;
    --surface: #25332d;
    --surface-muted: #2c3b35;
    --ink: #eeece5;
    --muted: #aeb8b1;
    --faint: #76847c;
    --border: #36483f;
    --edge: #4c6157;
    --rule: #25322d;
    --margin: #5c3e39;
    --math: #8a82e3;
    --math-edge: #4b43a0;
    --sjl: #e0704a;
    --sjl-edge: #8a3a1e;
    --amber: #f2c14e;
    --red: #f08a7e;
    --green: #7fcb96;
    --note: #e9d27a;
    --note-edge: #c9ae4e;
    --note-ink: #2f2a10;
    --highlight: rgba(242, 212, 107, 0.3);
    --ok-soft: #203b2c;
    --ok-border: #5fa176;
    --ok-edge: #3f7f55;
    --ok-text: #b9e6c6;
    --on-ok: #14261b;
    --bad-soft: #3e2522;
    --bad-border: #a9564c;
    --bad-text: #f7c3bc;
    --sjl-soft: #45302a;
    --amber-soft: #3b3417;
    --amber-text: #f6d98a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The page: ruled lines every --line px; the red margin line sits just left of the content. */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(10px, calc(50% - 486px));
  width: 2px;
  background: var(--margin);
  pointer-events: none;
}

/* The privacy page is narrower, so its margin line moves in with the text. */
body.narrow::before { left: max(10px, calc(50% - 376px)); }

a { color: var(--math-edge); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: #c9c4f6; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; font-variant-numeric: lining-nums; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px 0 26px; }

/* hero */
.hero { position: relative; text-align: center; padding: 56px 0 24px; }
.hero img { width: 120px; height: 120px; border-radius: 27px; border: 1.5px solid var(--border); box-shadow: 0 8px 24px rgba(31, 42, 92, 0.18); }
.hero h1 { font-size: clamp(36px, 7vw, 56px); line-height: 1.08; margin: 22px 0 12px; letter-spacing: -0.3px; }
.hero .lead { font-size: clamp(18px, 3.5vw, 22px); color: var(--muted); margin: 0 auto; max-width: 580px; }
.marked { color: var(--ink); background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 62% / 100% 62%; animation: sweep 0.8s 0.3s ease-out both; }

.hero-notes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; margin-top: 30px; }

/* A sticky note with the test date. */
.sticky {
  background: var(--note);
  color: var(--note-ink);
  border-bottom: 4px solid var(--note-edge);
  border-radius: 3px;
  padding: 10px 18px 12px;
  text-align: left;
  line-height: 1.2;
  transform: rotate(3deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  animation: drop 0.5s 0.15s ease-out both;
}
.sticky small { display: block; font-size: 13px; }
.sticky strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; margin: 2px 0; font-variant-numeric: lining-nums; }

/* The official store badges – Apple's and Google's artwork, unchanged. Google's PNG has transparent
   space above and below the badge (29 of its 250 px each), so it is drawn taller and pulled in to the
   same visible height as Apple's; the gap keeps Apple's clear space of a quarter of the height. */
.badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.badges a { display: block; line-height: 0; border-radius: 9px; }
.badges img { display: block; width: auto; height: 48px; }
.badges .badge-google { height: 62.5px; margin: -7.25px 0; }
/* Until the Android version is on Google Play: a dashed placeholder as tall as the badge, no Google logo. */
.badges .soon { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border: 1.5px dashed var(--edge); border-radius: 9px; color: var(--muted); font-size: 15px; font-weight: 600; }
.stores { text-align: center; }
.stores p { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* the closing call to download */
.get { text-align: center; }
.get h2 { text-align: left; }
.get > p { margin: 0 auto 20px; max-width: 560px; color: var(--muted); }

/* sections */
section { padding: 26px 0; }
h2 { font-size: 28px; margin: 0 0 18px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }

/* Subjects as school exercise books: coloured cover, darker spine, a name label. */
.subjects { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cover {
  position: relative;
  border-radius: 12px;
  padding: 18px 18px 20px 34px;
  color: #fff;
  border-bottom: 4px solid;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: rgba(0, 0, 0, 0.18); }
.cover.math { background: var(--math); border-color: var(--math-edge); }
.cover.sjl { background: var(--sjl); border-color: var(--sjl-edge); }
.cover:hover { transform: rotate(-0.6deg) translateY(-2px); }
.cover .label {
  display: inline-block;
  min-width: 62%;
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 14px 8px;
  margin-bottom: 14px;
}
.cover .label h3 { margin: 0; font-size: 24px; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.cover p { margin: 0; }

/* Feature cards: white paper with a darker bottom edge, like the app's cards. */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-bottom: 3px solid var(--edge);
  border-radius: 12px;
  padding: 18px 20px 20px;
}
.card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.card h3 > span { display: flex; flex: none; }
.card h3 svg { width: 26px; height: 26px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.c-math { color: var(--math); }
.c-sjl { color: var(--sjl); }
.c-amber { color: var(--amber); }
.c-green { color: var(--green); }

/* The app's screens in a row; scrolls sideways on narrow screens. */
.screens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  margin: 0 -4px;
}
.screens figure { margin: 0; scroll-snap-align: start; }
.screens img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: 26px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(31, 42, 92, 0.14);
}
.screens figcaption { margin-top: 10px; text-align: center; font-family: var(--serif); font-size: 16px; color: var(--muted); }

/* A teacher's note in the margin: the unofficial disclaimer. */
.note {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--red);
  border-radius: 8px;
  padding: 18px 22px;
}
.note p { margin: 0 0 8px; }
.note p:last-child { margin-bottom: 0; }

/* privacy page */
.doc { max-width: 700px; padding-top: 40px; padding-bottom: 20px; }
.doc h1 { font-size: 38px; line-height: 1.15; margin: 18px 0 6px; }
.doc h2 { font-size: 22px; margin: 30px 0 8px; }
.doc .back { font-weight: 700; text-decoration: none; }
.doc .meta { color: var(--muted); margin: 0 0 18px; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 30px 0 46px;
}
footer a { color: inherit; }

@keyframes drop { from { opacity: 0; transform: rotate(3deg) translateY(-10px); } to { opacity: 1; transform: rotate(3deg) translateY(0); } }
@keyframes sweep { from { background-size: 0 62%; } to { background-size: 100% 62%; } }

@media (prefers-reduced-motion: reduce) {
  .marked, .sticky { animation: none; }
  .cover { transition: none; }
}

/* ── „Ako to funguje“: a phone that plays one practice session, CSS only ───────────────────────
   A 25 s loop: a math task with the typical mistake and its solution (0–7 s), i/y in a sentence
   (7–13 s), the result with a new star (13–18 s), the home screen with readiness (18–21.8 s) and
   the end card. The scenes and the steps beside the phone run on absolute keyframes. The pieces
   inside a scene share a few keyframes and start by animation-delay; those keyframes go back to
   the start 10 s later (40 %), long after their scene has faded out. The styles outside the
   motion block are the still picture: the first scene, answered – shown with Reduce Motion and
   while paused. */
.promo { position: relative; }
.promo-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px 46px; align-items: center; }
.promo-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-width: 720px) { .promo-grid { grid-template-columns: 1fr; justify-items: center; } }

.phone {
  position: relative;
  width: 300px;
  height: 630px;
  padding: 9px;
  border-radius: 48px;
  background: #171b36;
  box-shadow: inset 0 0 0 1.5px #3a4170, 0 20px 44px rgba(31, 42, 92, 0.24);
}
.pr-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 39px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 19px, var(--rule) 19px 20px);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.38;
  text-align: left;
}
.pr-screen::before { content: ""; position: absolute; top: 40px; bottom: 0; left: 9px; width: 1.5px; background: var(--margin); }
:where(.pr-screen p) { margin: 0; }
.pr-status { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 3px 24px 0 32px; font: 600 14px/1 var(--sans); }
.pr-island { position: absolute; left: 50%; top: 10px; width: 82px; height: 24px; margin-left: -41px; border-radius: 12px; background: #000; }
.pr-status svg { width: 58px; height: 11px; }

.pr-scene { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; opacity: 0; }
.pr-s1 { opacity: 1; }
.pr-head { padding: 6px 14px 8px 20px; text-align: center; }
.pr-title { font-weight: 600; font-size: 14px; }
.pr-body { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 4px 14px 10px 20px; }
.pr-prompt { margin-bottom: 12px; font-size: 14px; line-height: 20px; }

/* the drill's answer boxes: green tick, red cross */
.pr-boxes { display: flex; align-items: center; gap: 3.5px; margin-top: 9px; }
.pr-boxes i { position: relative; width: 17px; height: 17px; border: 1.5px solid var(--edge); border-radius: 4px; background: var(--surface); }
.pr-boxes i.cur { border: 2px solid var(--math); }
.pr-boxes.sjl i.cur { border-color: var(--sjl); }
.pr-boxes span { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pr-boxes b { position: absolute; inset: -2px; border: 1.5px solid; border-radius: 4px; }
.pr-boxes i.ok, .pr-boxes b.ok { border-color: var(--green); background: var(--ok-soft); }
.pr-boxes i.ok::after, .pr-boxes b.ok::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pr-boxes b.bad { border-color: var(--red); background: var(--bad-soft); }
.pr-boxes b.bad::before, .pr-boxes b.bad::after { content: ""; position: absolute; left: 6.3px; top: 2.5px; width: 1.8px; height: 9px; border-radius: 1px; background: var(--red); transform: rotate(45deg); }
.pr-boxes b.bad::after { transform: rotate(-45deg); }

/* pen strokes: drawn by animating the dash offset */
.pr-pen { width: 18px; height: 18px; flex: none; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; }
.pr-pen.ok { stroke: var(--green); }
.pr-pen.bad { stroke: var(--red); }

.pr-input { position: relative; display: flex; align-items: center; height: 44px; padding: 0 12px; border: 1.5px solid var(--bad-border); border-radius: 12px; background: var(--bad-soft); font: 600 17px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.pr-placeholder { position: absolute; left: 12px; color: var(--faint); font: 400 14px/1 var(--sans); opacity: 0; }
.pr-typed b { display: inline-block; overflow: hidden; font-weight: inherit; vertical-align: bottom; }
.pr-caret { width: 1.5px; height: 20px; margin-left: 1px; opacity: 0; }
.pr-caret::after { content: ""; display: block; height: 100%; background: var(--math); }
.pr-unit { margin-left: auto; color: var(--muted); font-family: var(--serif); }

/* a teacher's note under the answer */
.pr-fb { margin-top: 10px; padding: 9px 11px 10px; border-left: 4px solid; border-radius: 10px; font-size: 12px; line-height: 1.4; }
.pr-fb > * + * { margin-top: 4px; }
.pr-fb.bad { border-color: var(--red); background: var(--bad-soft); color: var(--bad-text); }
.pr-fb.good { border-color: var(--green); background: var(--ok-soft); color: var(--ok-text); }
.pr-verdict { display: flex; align-items: center; gap: 7px; font: 600 17px/1.2 var(--serif); }
.pr-fb .pr-big-line { font-size: 13px; }

.pr-foot { display: grid; padding: 8px 14px 20px; border-top: 1px solid var(--border); background: var(--paper); }
.pr-foot > * { grid-area: 1 / 1; }
.pr-row { display: flex; gap: 7px; }
.pr-btn { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; height: 40px; border-radius: 12px; border-bottom: 3px solid var(--math-edge); background: var(--math); color: #fff; font: 700 14px/1 var(--rounded); }
.pr-btn.sjl { border-color: var(--sjl-edge); background: var(--sjl); }
.pr-btn.ok { border-color: var(--ok-edge); background: var(--green); color: var(--on-ok); }
.pr-btn.sec { flex: 1.3; border: 1.5px solid var(--border); border-bottom: 3px solid var(--edge); background: var(--surface); color: var(--math); }
.pr-s1 .pr-foot > .pr-btn { opacity: 0; }
.pr-s2 .pr-foot > .sjl { opacity: 0; }

/* a finger tap and a pulse around a button */
.pr-tap { position: absolute; left: 50%; top: 50%; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(31, 42, 92, 0.4); border-radius: 50%; background: rgba(31, 42, 92, 0.18); opacity: 0; pointer-events: none; }
.pr-ring { position: absolute; inset: -4px; border: 2px solid var(--math); border-radius: 15px; opacity: 0; }

.pr-sentence { margin-bottom: 12px; font-size: 14px; line-height: 22px; }
.pr-w { white-space: nowrap; }
.pr-gap { display: inline-block; min-width: 0.5em; border-bottom: 1.5px solid currentColor; line-height: 1.05; text-align: center; }
.pr-gap b { display: inline-block; color: var(--green); }
.pr-opt { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; margin-bottom: 7px; padding: 0 10px; border: 1.5px solid var(--border); border-bottom-width: 3px; border-radius: 12px; background: var(--surface); font: 500 15px/1 var(--rounded); }
.pr-opt > i { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--edge); border-radius: 7px; font: normal 700 12px/1 var(--rounded); }
.pr-opt.right { border-color: var(--ok-border); background: var(--ok-soft); }
.pr-opt.right > i { border-color: var(--green); border-radius: 50%; background: var(--green); color: var(--on-ok); }
.pr-opt .pr-pen { margin-left: auto; }
.pr-scroll { --scroll: -130px; transform: translateY(var(--scroll)); }

/* result: stamp, sticky notes, confetti */
.pr-center { display: flex; flex-direction: column; align-items: center; padding-top: 44px; text-align: center; }
.pr-stamp { --rot: -4deg; display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 4px; border: 2.5px solid currentColor; border-radius: 9px; color: var(--green); font: 800 19px/1.2 var(--rounded); transform: rotate(var(--rot)); }
.pr-stamp.red { color: var(--red); }
.pr-stamp svg { width: 14px; height: 14px; }
.pr-big { margin-top: 12px; font: 700 31px/1.15 var(--serif); }
.pr-sub { margin-top: 4px; color: var(--muted); font-size: 13px; }
.pr-note { --rot: -1.2deg; display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 14px; padding: 10px 12px 11px; border-bottom: 3px solid var(--note-edge); border-radius: 3px; background: var(--note); color: var(--note-ink); text-align: left; transform: rotate(var(--rot)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.pr-note.n2 { --rot: 1deg; }
.pr-note > svg { width: 22px; height: 22px; flex: none; }
.pr-note strong { display: block; font: 600 15px/1.25 var(--serif); }
.pr-note span { display: block; margin-top: 2px; font-size: 12px; }
.pr-note .pr-starrow { display: flex; justify-content: space-between; gap: 8px; }
/* the note is light in both themes, so its stars keep the light-theme pens */
.pr-stars { color: #d98a00; font-size: 15px; font-style: normal; letter-spacing: 1px; white-space: nowrap; }
.pr-stars b { display: inline-block; color: #c8372d; }
.pr-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 5px 14px; border: 2px solid var(--amber-text); border-radius: 9px; background: var(--amber-soft); color: var(--amber-text); font: 700 13px/1.2 var(--rounded); }
.pr-pill svg { width: 15px; height: 15px; color: var(--amber); }
.pr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pr-confetti i { position: absolute; top: -20px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; }

/* home screen: greeting, daily goal, the two notebooks with readiness, tip */
@property --v { syntax: "<integer>"; inherits: true; initial-value: 0; }
.pr-hometop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pr-hometop small { color: var(--muted); font-size: 11.5px; }
.pr-hello { margin-top: 2px; font: 700 26px/1.15 var(--serif); }
.pr-sticky { flex: none; padding: 6px 10px 7px; border-bottom: 3px solid var(--note-edge); border-radius: 2px; background: var(--note); color: var(--note-ink); line-height: 1.15; transform: rotate(3deg); }
.pr-sticky small { display: block; color: inherit; font-size: 10.5px; }
.pr-sticky b { display: block; font: 700 18px/1.2 var(--serif); }
.pr-card { position: relative; margin-top: 14px; padding: 11px 13px 12px; border: 1.5px solid var(--border); border-bottom: 3px solid var(--edge); border-radius: 12px; background: var(--surface); }
.pr-card small { color: var(--muted); font-size: 11.5px; }
.pr-card-h { font: 600 16px/1.25 var(--serif); }
.pr-goal .pr-stamp { --rot: -5deg; position: absolute; top: 42px; right: 10px; padding: 1px 8px 2px; border-width: 2px; font-size: 13px; }
.pr-goal .pr-stamp svg { width: 11px; height: 11px; }
.pr-squares { display: flex; gap: 5px; margin: 9px 0 6px; }
.pr-squares i { display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid var(--ink); border-radius: 5px; }
.pr-squares svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; }
.pr-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.pr-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 104px; padding: 10px 8px 9px 16px; border-bottom: 3px solid; border-radius: 10px; color: #fff; overflow: hidden; }
.pr-cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: rgba(0, 0, 0, 0.18); }
.pr-cover.math { --v: 72; border-color: var(--math-edge); background: var(--math); }
.pr-cover.sjl { --v: 64; border-color: var(--sjl-edge); background: var(--sjl); }
.pr-cover-icon { font: italic 600 14px/1 var(--serif); }
.pr-cover > svg { width: 18px; height: 18px; }
.pr-label { padding: 5px 7px 6px; border: 1.5px solid var(--math-edge); border-radius: 5px; background: var(--surface); color: var(--ink); }
.sjl .pr-label { border-color: var(--sjl-edge); }
.pr-label b { display: block; font: 700 13.5px/1.2 var(--serif); }
.pr-label small { display: block; color: var(--muted); font-size: 10.5px; }
.pr-pct { display: block; margin-top: 1px; font: 700 15px/1.1 var(--rounded); font-variant-numeric: tabular-nums; }
.pr-num { counter-reset: ready var(--v); }
.pr-num::before { content: counter(ready); }
.pr-meter { display: block; height: 3px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: var(--rule); }
.pr-meter::after { content: ""; display: block; width: calc(var(--v) * 1%); height: 100%; background: var(--math); }
.sjl .pr-meter::after { background: var(--sjl); }
.pr-h2 { margin-top: 16px; padding-bottom: 2px; border-bottom: 1.5px solid var(--ink); font: 700 19px/1.2 var(--serif); }
.pr-tip { margin-top: 10px; }
.pr-tip small:first-child { color: var(--math); font-weight: 700; }
.pr-tip b { display: block; margin: 1px 0 2px; font-size: 14.5px; font-weight: 600; }
.pr-hl { background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 75% / 100% 55%; }

/* end card */
.pr-end { justify-content: center; padding-top: 0; padding-bottom: 60px; }
.pr-end img { width: 104px; height: 104px; border: 1.5px solid var(--border); border-radius: 24px; box-shadow: 0 8px 20px rgba(31, 42, 92, 0.18); }
.pr-name { margin-top: 16px; font: 700 25px/1.15 var(--serif); }
.pr-tag { margin: 6px 8px 20px; color: var(--muted); font-size: 13.5px; }
.pr-end .pr-stamp { --rot: -6deg; padding: 4px 16px 5px; font-size: 22px; }
.pr-end .pr-sub { margin-top: 16px; }

/* the steps beside the phone: table-of-contents rows, the current one highlighted */
.promo-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.promo-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 12px 4px 12px 0; }
.st-n { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50%; font: 700 18px/1 var(--serif); }
.promo-steps h3 { margin: 4px 0; font-size: 21px; line-height: 1.25; }
.promo-steps h3 span { background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 75% / 0 55%; }
.promo-steps p { margin: 0; color: var(--muted); font-size: 16px; }
.st-bar { display: none; position: relative; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: var(--rule); }
.st-bar::after { content: ""; position: absolute; inset: 0; background: var(--c, var(--math)); transform: scaleX(0); transform-origin: left; }

/* pause: a visually hidden checkbox before the grid, its label under the phone */
.promo-pause { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.promo-toggle { display: none; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.promo-toggle:hover { color: var(--ink); }
.promo-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.promo-toggle span { display: contents; }
.promo-toggle .t-play, .promo-pause:checked ~ .promo-grid .t-pause { display: none; }
.promo-pause:checked ~ .promo-grid .t-play { display: contents; }
.promo-pause:focus-visible ~ .promo-grid .promo-toggle { outline: 2px solid var(--math); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .phone { background: #0d1210; box-shadow: inset 0 0 0 1.5px #3a4a42, 0 20px 44px rgba(0, 0, 0, 0.4); }
  .pr-tap { border-color: rgba(238, 236, 229, 0.5); background: rgba(238, 236, 229, 0.22); }
}

@media (prefers-reduced-motion: no-preference) {
  .promo { --loop: 25s; }
  .promo-toggle { display: inline-flex; }
  .st-bar { display: block; }
  .promo-pause:checked ~ .promo-grid *,
  .promo-pause:checked ~ .promo-grid *::before,
  .promo-pause:checked ~ .promo-grid *::after { animation-play-state: paused !important; }

  .pr-s1 { animation: pr-scene1 var(--loop) infinite; }
  .pr-s2 { animation: pr-scene2 var(--loop) infinite; }
  .pr-s3 { animation: pr-scene3 var(--loop) infinite; }
  .pr-s4 { animation: pr-scene4 var(--loop) infinite; }
  .pr-s5 { animation: pr-scene5 var(--loop) infinite; }

  /* 1 · math (0–7 s): types 71,40, checks, red pen, the solution and the typical mistake */
  .pr-placeholder { animation: pr-out var(--loop) 1s infinite both; }
  .pr-typed b { animation: pr-type var(--loop) 1s infinite both; }
  .pr-typed b:nth-child(2) { animation-delay: 1.2s; }
  .pr-typed b:nth-child(3) { animation-delay: 1.4s; }
  .pr-typed b:nth-child(4) { animation-delay: 1.6s; }
  .pr-typed b:nth-child(5) { animation-delay: 1.8s; }
  .pr-caret { animation: pr-caret var(--loop) 0.6s infinite both; }
  .pr-caret::after { animation: pr-blink 0.8s steps(1) infinite; }
  .pr-s1 .pr-foot > .pr-btn { animation: pr-out var(--loop) 2.6s infinite both; }
  .pr-s1 .pr-foot > .pr-btn .pr-tap { animation: pr-tap var(--loop) 2s infinite both; }
  .pr-s1 .pr-row { animation: pr-in var(--loop) 2.6s infinite both; }
  .pr-input { animation: pr-bad var(--loop) 2.6s infinite both; }
  .pr-s1 .pr-boxes b { animation: pr-in var(--loop) 2.6s infinite both; }
  .pr-s1 .pr-fb { animation: pr-rise var(--loop) 2.8s infinite both; }
  .pr-s1 .pr-fb .pr-pen { animation: pr-draw var(--loop) 3.1s infinite both; }
  .pr-ring { animation: pr-ring var(--loop) 4.6s infinite both; }

  /* 2 · slovenčina (7–13 s): picks B, checks, the letters drop into the gaps, the solution */
  .pr-s2 .pr-foot > .sjl { animation: pr-check2 var(--loop) 8.4s infinite both; }
  .pr-s2 .pr-foot > .sjl .pr-tap { animation: pr-tap var(--loop) 8.6s infinite both; }
  .pr-opt.right { animation: pr-pick var(--loop) 8.4s infinite both; }
  .pr-opt.right .pr-tap { animation: pr-tap var(--loop) 8s infinite both; }
  .pr-opt.right > i { animation: pr-badge var(--loop) 9.2s infinite both; }
  .pr-opt.right .pr-pen { animation: pr-draw var(--loop) 9.3s infinite both; }
  .pr-s2 .pr-foot > .ok { animation: pr-in var(--loop) 9.3s infinite both; }
  .pr-s2 .pr-boxes b { animation: pr-in var(--loop) 9.3s infinite both; }
  .pr-gap b { animation: pr-drop var(--loop) 9.6s infinite both; }
  .pr-w:nth-of-type(2) b { animation-delay: 9.85s; }
  .pr-w:nth-of-type(3) b { animation-delay: 10.1s; }
  .pr-w:nth-of-type(4) b { animation-delay: 10.35s; }
  .pr-scroll { animation: pr-scroll var(--loop) 10.8s infinite both; }
  .pr-s2 .pr-fb { animation: pr-in var(--loop) 11s infinite both; }
  .pr-s2 .pr-fb .pr-pen { animation: pr-draw var(--loop) 11.2s infinite both; }

  /* 3 · result (13–18 s): stamp, praise, daily goal, a new star, streak, confetti */
  .pr-s3 .pr-stamp { animation: pr-thump var(--loop) 13.4s infinite both; }
  .pr-s3 .pr-big { animation: pr-rise var(--loop) 13.8s infinite both; }
  .pr-s3 .pr-sub { animation: pr-in var(--loop) 14s infinite both; }
  .pr-s3 .n1 { animation: pr-pop var(--loop) 14.4s infinite both; }
  .pr-s3 .n2 { animation: pr-pop var(--loop) 15s infinite both; }
  .pr-stars b { animation: pr-pop var(--loop) 15.6s infinite both; }
  .pr-s3 .pr-pill { animation: pr-pop var(--loop) 16.2s infinite both; }
  .pr-confetti i { animation: pr-fall var(--loop) var(--d) infinite both cubic-bezier(0.3, 0.2, 0.6, 1); }

  /* 4 · home (18–21.8 s): the goal ticks, the streak stamp, readiness counts up, the tip */
  .pr-squares svg { animation: pr-draw var(--loop) 18.3s infinite both; }
  .pr-squares i:nth-child(2) svg { animation-delay: 18.45s; }
  .pr-squares i:nth-child(3) svg { animation-delay: 18.6s; }
  .pr-squares i:nth-child(4) svg { animation-delay: 18.75s; }
  .pr-squares i:nth-child(5) svg { animation-delay: 18.9s; }
  .pr-goal .pr-stamp { animation: pr-thump var(--loop) 19.3s infinite both; }
  .pr-cover.math { animation: pr-count-m var(--loop) 18.6s infinite both ease-out; }
  .pr-cover.sjl { animation: pr-count-s var(--loop) 18.8s infinite both ease-out; }
  .pr-hl { animation: pr-mark var(--loop) 20.2s infinite both; }

  /* 5 · end card (21.8–25 s) */
  .pr-end img { animation: pr-pop var(--loop) 22s infinite both; }
  .pr-end .pr-name { animation: pr-rise var(--loop) 22.3s infinite both; }
  .pr-end .pr-tag { animation: pr-in var(--loop) 22.5s infinite both; }
  .pr-end .pr-stamp { animation: pr-thump var(--loop) 22.9s infinite both; }
  .pr-end .pr-sub { animation: pr-in var(--loop) 23.3s infinite both; }

  /* the steps follow the scenes */
  .promo-steps li:nth-child(1) { animation: pr-step1 var(--loop) infinite; }
  .promo-steps li:nth-child(2) { --c: var(--sjl); animation: pr-step2 var(--loop) infinite; }
  .promo-steps li:nth-child(3) { --c: var(--amber); animation: pr-step3 var(--loop) infinite; }
  .promo-steps li:nth-child(4) { --c: var(--green); animation: pr-step4 var(--loop) infinite; }
  .promo-steps li:nth-child(1) h3 span { animation: pr-hl1 var(--loop) infinite; }
  .promo-steps li:nth-child(2) h3 span { animation: pr-hl2 var(--loop) infinite; }
  .promo-steps li:nth-child(3) h3 span { animation: pr-hl3 var(--loop) infinite; }
  .promo-steps li:nth-child(4) h3 span { animation: pr-hl4 var(--loop) infinite; }
  .promo-steps li:nth-child(1) .st-bar::after { animation: pr-bar1 var(--loop) linear infinite; }
  .promo-steps li:nth-child(2) .st-bar::after { animation: pr-bar2 var(--loop) linear infinite; }
  .promo-steps li:nth-child(3) .st-bar::after { animation: pr-bar3 var(--loop) linear infinite; }
  .promo-steps li:nth-child(4) .st-bar::after { animation: pr-bar4 var(--loop) linear infinite; }
}

/* scene windows (1 s = 4 %) */
@keyframes pr-scene1 { 0% { opacity: 0; } 1.6%, 26.4% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes pr-scene2 { 0%, 28% { opacity: 0; } 29.6%, 50.4% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes pr-scene3 { 0%, 52% { opacity: 0; } 53.6%, 70.4% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes pr-scene4 { 0%, 72% { opacity: 0; } 73.6%, 85.6% { opacity: 1; } 87.2%, 100% { opacity: 0; } }
@keyframes pr-scene5 { 0%, 87.2% { opacity: 0; } 88.8%, 98.4% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pr-step1 { 0%, 26.4% { opacity: 1; } 28%, 98.4% { opacity: 0.42; } 100% { opacity: 1; } }
@keyframes pr-step2 { 0%, 26.4% { opacity: 0.42; } 28%, 50.4% { opacity: 1; } 52%, 100% { opacity: 0.42; } }
@keyframes pr-step3 { 0%, 50.4% { opacity: 0.42; } 52%, 70.4% { opacity: 1; } 72%, 100% { opacity: 0.42; } }
@keyframes pr-step4 { 0%, 70.4% { opacity: 0.42; } 72%, 98.4% { opacity: 1; } 100% { opacity: 0.42; } }
@keyframes pr-hl1 { 0% { background-size: 0 55%; } 2.4%, 26.4% { background-size: 100% 55%; } 28%, 100% { background-size: 0 55%; } }
@keyframes pr-hl2 { 0%, 28% { background-size: 0 55%; } 30.4%, 50.4% { background-size: 100% 55%; } 52%, 100% { background-size: 0 55%; } }
@keyframes pr-hl3 { 0%, 52% { background-size: 0 55%; } 54.4%, 70.4% { background-size: 100% 55%; } 72%, 100% { background-size: 0 55%; } }
@keyframes pr-hl4 { 0%, 72% { background-size: 0 55%; } 74.4%, 98.4% { background-size: 100% 55%; } 100% { background-size: 0 55%; } }
@keyframes pr-bar1 { 0% { transform: scaleX(0); } 28% { transform: scaleX(1); } 28.1%, 100% { transform: scaleX(0); } }
@keyframes pr-bar2 { 0%, 28% { transform: scaleX(0); } 52% { transform: scaleX(1); } 52.1%, 100% { transform: scaleX(0); } }
@keyframes pr-bar3 { 0%, 52% { transform: scaleX(0); } 72% { transform: scaleX(1); } 72.1%, 100% { transform: scaleX(0); } }
@keyframes pr-bar4 { 0%, 72% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* pieces, started by animation-delay; back to the start at 40 % (10 s later) */
@keyframes pr-in { 0% { opacity: 0; } 1.6%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes pr-type { 0% { max-width: 0; } 0.4%, 40% { max-width: 1em; } 41%, 100% { max-width: 0; } }
@keyframes pr-out { 0% { opacity: 1; } 1.2%, 40% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes pr-rise { 0% { opacity: 0; transform: translateY(14px); } 2%, 40% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes pr-pop {
  0% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.6); }
  1.2% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1.08); }
  2%, 40% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  41%, 100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.6); }
}
@keyframes pr-thump {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(1.9); animation-timing-function: cubic-bezier(0.3, 1.6, 0.6, 1); }
  1.6%, 40% { opacity: 1; transform: rotate(var(--rot)) scale(1); }
  41%, 100% { opacity: 0; transform: rotate(var(--rot)) scale(1.9); }
}
@keyframes pr-draw { 0% { stroke-dashoffset: 30; } 1.6%, 40% { stroke-dashoffset: 0; } 41%, 100% { stroke-dashoffset: 30; } }
@keyframes pr-tap {
  0% { opacity: 0; transform: scale(1.6); }
  1.2% { opacity: 1; transform: scale(1); }
  2% { opacity: 1; transform: scale(0.82); }
  3.2%, 100% { opacity: 0; transform: scale(0.82); }
}
@keyframes pr-ring {
  0% { opacity: 0; transform: scale(1); }
  0.4% { opacity: 0.9; transform: scale(1); }
  4% { opacity: 0; transform: scale(1.12, 1.45); }
  4.4% { opacity: 0; transform: scale(1); }
  4.8% { opacity: 0.9; transform: scale(1); }
  8.4%, 100% { opacity: 0; transform: scale(1.12, 1.45); }
}
@keyframes pr-caret { 0% { opacity: 0; } 0.4%, 7.2% { opacity: 1; } 7.6%, 100% { opacity: 0; } }
@keyframes pr-blink { 50% { opacity: 0; } }
@keyframes pr-bad {
  0% { border-color: var(--border); background-color: var(--surface); }
  1.2%, 40% { border-color: var(--bad-border); background-color: var(--bad-soft); }
  41%, 100% { border-color: var(--border); background-color: var(--surface); }
}
@keyframes pr-check2 { 0% { opacity: 0.45; } 1.2%, 3.6% { opacity: 1; } 4%, 40% { opacity: 0; } 41%, 100% { opacity: 0.45; } }
@keyframes pr-pick {
  0% { border-color: var(--border); background-color: var(--surface); }
  0.8%, 3.2% { border-color: var(--sjl); background-color: var(--sjl-soft); }
  4%, 40% { border-color: var(--ok-border); background-color: var(--ok-soft); }
  41%, 100% { border-color: var(--border); background-color: var(--surface); }
}
@keyframes pr-badge {
  0% { border-color: var(--edge); border-radius: 7px; background-color: transparent; color: var(--ink); }
  0.8%, 40% { border-color: var(--green); border-radius: 50%; background-color: var(--green); color: var(--on-ok); }
  41%, 100% { border-color: var(--edge); border-radius: 7px; background-color: transparent; color: var(--ink); }
}
@keyframes pr-drop { 0% { opacity: 0; transform: translateY(-10px); } 1.2%, 40% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes pr-scroll { 0% { transform: none; } 2.4%, 40% { transform: translateY(var(--scroll)); } 41%, 100% { transform: none; } }
@keyframes pr-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 7.2%, 100% { opacity: 1; transform: translate(var(--dx), 620px) rotate(var(--r)); } }
@keyframes pr-count-m { 0% { --v: 0; } 6.4%, 40% { --v: 72; } 41%, 100% { --v: 0; } }
@keyframes pr-count-s { 0% { --v: 0; } 6.4%, 40% { --v: 64; } 41%, 100% { --v: 0; } }
@keyframes pr-mark { 0% { background-size: 0 55%; } 2.4%, 40% { background-size: 100% 55%; } 41%, 100% { background-size: 0 55%; } }