/*
 * Lab theatre — the shared chapter player shell (lab-theatre.js; docs/specs/rational-lab.md (c)), modelled on the
 * integer lab's player. Colours come only from tokens.css, so light, dark and high contrast follow the theme. No
 * color-mix(), SVG filters, blur or container queries: classroom boards run older browsers on integrated GPUs. Stage
 * motion is driven by script (attributes and transforms per frame); CSS animates only small chrome (poster pulse,
 * caption fade) and nothing under reduced motion. Renderer styles (rl-*) live with their lab below the shell.
 */
.lt [hidden] { display: none !important; }
/* While the theatre is open the page behind it neither scrolls nor extends past the viewport. */
html.lt-lock, html.lt-lock body { height: 100%; overflow: hidden; }
.lt { --lt-gold: var(--gold-base); --lt-on-gold: var(--inverse); }
.arena-dialog.lt[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
}
.lt :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:where(.lt) button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lt svg { display: block; }
.lt .lt-stroke { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lt-head { grid-row: 1; grid-column: 1; }
.lt-stage { grid-row: 2; grid-column: 1; }
.lt-caption { grid-row: 3; grid-column: 1; }
.lt-transport { grid-row: 4; grid-column: 1; }
/* Sen dene: the practice band takes the caption band's and the transport's rows. */
.lt-practice { grid-row: 3 / 5; grid-column: 1; }
.lt[data-mode="practice"] .lt-caption, .lt[data-mode="practice"] .lt-transport { display: none; }

/* ---- Header: titles · chapter rail · Anlatım | Sen dene · Kendi sayıların · Kapat ---------- */
.lt-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--glass-line);
}
.lt-head::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--brand-sheen); pointer-events: none; }
.lt-titles { min-width: 0; }
.lt-eyebrow { margin: 0; color: var(--brand-ink); font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
/* The title wraps to two lines rather than losing words; the rail beside it already names the chapter. */
.lt-titles h2 { margin: 1px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.lt-rail { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.lt-rail__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px 0 6px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 15px; font-weight: 750; white-space: nowrap; cursor: pointer;
}
.lt-rail__glyph {
  display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  color: var(--brand-ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 17px; font-weight: 800; line-height: 1;
}
.lt-rail__btn[aria-current="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.lt-rail__btn[aria-current="true"] .lt-rail__glyph { color: var(--on-brand); background: var(--brand); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .lt-rail__btn:not([aria-current="true"]):hover { color: var(--ink); background: var(--brand-tint); }
}
.lt-head__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lt-mode { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 15px; }
.lt-mode > .uk-btn {
  --uk-size: 44px; --uk-icon: 20px;
  gap: 6px; padding: 0 11px 0 9px; color: var(--ink-2); background: transparent; border-color: transparent; border-radius: 12px; font-size: 16px; font-weight: 800; white-space: nowrap;
}
.lt-mode > .uk-btn[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: transparent; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.lt-mode > .uk-btn[data-lt="practice"][aria-pressed="true"] { color: var(--lt-on-gold); background: var(--lt-gold); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .lt-mode > .uk-btn[aria-pressed="false"]:hover { color: var(--ink); background: var(--brand-tint); }
}
/* Kendi sayıların, Sesli anlatım (lab-voice.js; pressed while the lab speaks) and Kapat: the kit's icon buttons. */
.lt-head__actions > .uk-btn { box-shadow: var(--shadow-xs); }

/* ---- Stage ---------------------------------------------------------------------------------- */
.lt-stage {
  position: relative;
  min-height: 0;
  margin: 12px 16px 0;
  overflow: hidden;
  background-color: var(--surface);
  background-image: radial-gradient(var(--bg-grid) 1.1px, transparent 1.4px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  outline: none;
  contain: layout paint;
}
.lt-stage::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 4px; background: var(--brand-sheen); pointer-events: none; }
.lt-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.lt-svg { position: absolute; top: 0; left: 0; overflow: visible; font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.lt-svg text { font-weight: 750; font-variant-numeric: tabular-nums; }
.lt-layer { position: absolute; inset: 0; pointer-events: none; }

/* Poster (before the first play) and end card */
.lt-poster { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; }
.lt-poster__card {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); box-sizing: border-box; max-width: min(900px, 100%); padding: clamp(18px, 3vw, 36px) clamp(20px, 3.4vw, 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg);
}
.lt-poster__panda { flex: none; width: clamp(110px, 15vw, 200px); height: auto; }
.lt-poster__copy { min-width: 0; }
.lt-poster__eyebrow { margin: 0; color: var(--brand-ink); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lt-poster__title { margin: 6px 0 8px; font-size: clamp(26px, 3.3vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.lt-poster__instruction { margin: 0 0 20px; color: var(--ink-2); font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; line-height: 1.35; }
.lt-poster [data-lt="play"] { --uk-size: 66px; --uk-icon: 30px; gap: 12px; padding: 0 32px 0 24px; border-radius: 999px; box-shadow: var(--shadow-brand); font-size: 22px; font-weight: 800; }
/* A stage too short for the whole card (a phone's stage is the viewport less the header, caption band and transport, so
   it changes with the chapter's captions) gets a leaner one, chosen by fitPoster() in lab-theatre.js: first without the
   panda, then only the title and a 48 px play button (the caption band under the stage reads the scene). */
.lt-poster[data-fit] .lt-poster__panda { display: none; }
.lt-poster[data-fit="compact"] { padding: 8px; }
.lt-poster[data-fit="compact"] .lt-poster__card { gap: 0; padding: 12px 16px; border-radius: 20px; }
.lt-poster[data-fit="compact"] .lt-poster__eyebrow, .lt-poster[data-fit="compact"] .lt-poster__instruction { display: none; }
.lt-poster[data-fit="compact"] .lt-poster__title { margin: 0 0 10px; font-size: 19px; }
.lt-poster[data-fit="compact"] [data-lt="play"] { --uk-size: 48px; --uk-icon: 22px; gap: 10px; padding: 0 22px 0 16px; font-size: 18px; }
.lt-end {
  position: absolute; z-index: 5; bottom: 16px; left: 50%; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translateX(-50%); white-space: nowrap;
}
.lt-end__title { margin: 0; font-size: 20px; font-weight: 800; }
.lt-end__actions { display: flex; gap: 8px; }
.lt-end__actions > .uk-btn { font-weight: 750; }
/* Shown in place of the caption once the chapter is over. */
.lt-caption.has-end { align-content: center; }
.lt-caption.has-end > :not(.lt-end) { display: none; }
.lt-caption .lt-end { position: static; transform: none; box-shadow: var(--shadow-md); animation: ltRise .35s var(--ease-out); }
@keyframes ltRise { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---- Caption band: scene tag and "Kendi örneğin" chip, caption, equation chip ------------ */
.lt-caption { display: grid; justify-items: center; gap: 4px; padding: 10px 24px 6px; text-align: center; }
.lt-capmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.lt-scene { margin: 0; color: var(--brand-ink); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lt-mine {
  display: inline-flex; align-items: center; gap: 10px; padding: 2px 3px 2px 14px;
  color: var(--gold-ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* Varsayılan örneğe dön sits inside the chip, so it keeps the 44 px floor rather than the board's 56. */
.lt-mine > .uk-btn { --uk-size: 44px; flex: none; border-radius: 999px; }
.lt-caption__text {
  max-width: 1260px; min-height: 2.48em; margin: 0; color: var(--ink);
  font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.012em; line-height: 1.24; text-wrap: balance;
}
.lt-caption__text.is-new { animation: ltCaption .38s var(--ease-out); }
@keyframes ltCaption { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lt-equation {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 100%; min-height: calc(1.9em + 10px); margin: 0; padding: 3px 22px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: clamp(19px, 1.8vw, 26px); font-weight: 800; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lt-equation.is-empty { visibility: hidden; }
/* Plain runs keep their spaces (a flex item would trim " < " to "<"); in the practice task, a block, they wrap. */
.lt-run { white-space: pre; }
.lt-round .lt-run { white-space: normal; }
.lt-tp { color: var(--sign-pos-ink); }
.lt-tn { color: var(--sign-neg-ink); }
/* A stacked fraction: the sign and whole part beside a numerator over a denominator. */
.lt-num { display: inline-flex; align-items: center; gap: .08em; }
.lt-frac { display: inline-flex; flex-direction: column; align-items: stretch; font-size: .74em; line-height: 1.02; text-align: center; }
.lt-frac__num { padding: 0 .12em .06em; border-bottom: .12em solid currentColor; }
.lt-frac__den { padding: .06em .12em 0; }

/* ---- Transport ------------------------------------------------------------------------------ */
.lt-transport { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 16px 12px; }
.lt-buttons { display: flex; flex: none; align-items: center; gap: 8px; }
.lt-buttons > .uk-btn { border-radius: 14px; box-shadow: var(--shadow-xs); }
.lt-buttons > [data-lt="play"] { min-width: 176px; padding: 0 22px 0 16px; border-radius: 16px; box-shadow: var(--shadow-brand); font-size: 19px; font-weight: 800; white-space: nowrap; }
.lt-dots { display: flex; flex: none; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lt-dot {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--ink-2); background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 50%; font-size: 15px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums;
}
.lt-dot.is-done { color: var(--brand-ink); background: var(--brand-tint-2); border-color: var(--brand); }
.lt-dot[aria-current="step"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.lt-scrub { position: relative; display: flex; flex: 1 1 200px; align-items: center; min-width: 140px; height: 44px; }
.lt .lt-scrub__range {
  --lt-p: 0%;
  width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lt-scrub__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) 0, var(--brand) var(--lt-p), var(--surface-3) var(--lt-p), var(--surface-3) 100%); }
.lt-scrub__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -9px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
.lt-scrub__range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--surface-3); }
.lt-scrub__range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--brand); }
.lt-scrub__range::-moz-range-thumb { width: 22px; height: 22px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; }
.lt-scrub__marks { position: absolute; top: 50%; right: 14px; left: 14px; height: 0; pointer-events: none; }
.lt-scrub__marks span { position: absolute; top: -9px; width: 4px; height: 18px; margin-left: -2px; background: var(--surface); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--line-strong); }
.lt-time { flex: none; min-width: 86px; color: var(--ink-2); font-size: 15px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.lt-speed { display: flex; flex: none; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.lt-speed__btn {
  min-width: 56px; height: 44px; padding: 0 6px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 11px; font-size: 16px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums;
}
.lt-speed__btn[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.lt-switch {
  display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 15px; font-weight: 750; cursor: pointer;
}
.lt-switch__track { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lt-switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out); }
.lt-switch[aria-pressed="true"] { color: var(--ink); }
.lt-switch[aria-pressed="true"] .lt-switch__track { background: var(--brand); box-shadow: none; }
.lt-switch[aria-pressed="true"] .lt-switch__track::after { transform: translateX(16px); }

/* ---- Kendi sayıların: the custom panel over the stage, caption band and transport ---------- */
.lt-custom {
  position: relative; z-index: 20; grid-row: 2 / 5; grid-column: 1; display: grid; place-items: center; min-height: 0; padding: 12px 16px 16px;
  overflow: auto; background: var(--scrim); overscroll-behavior: contain;
}
.lt-custom__card {
  display: grid; gap: 14px; box-sizing: border-box; width: min(820px, 100%); padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow-lg); animation: ltRise .3s var(--ease-out);
}
.lt-custom__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.lt-custom__head h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.lt-custom__preview {
  margin: 0; padding: 4px 18px; color: var(--ink); background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 999px;
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lt-custom__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lt-field { display: grid; align-content: start; gap: 6px; padding: 12px 14px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; }
.lt-field--op { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 12px; }
.lt-field__label { color: var(--ink); font-size: 16px; font-weight: 800; }
.lt-field__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.lt-field__row > .uk-btn { border-radius: 15px; box-shadow: 0 3px 0 var(--line-strong); }
.lt-field__row > .uk-btn:disabled { box-shadow: none; }
.lt-field__value { color: var(--ink); font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.lt .lt-field__range {
  width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lt-field__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.lt-field__range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
.lt-field__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-3); }
.lt-field__range::-moz-range-thumb { width: 24px; height: 24px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; }
.lt-ops { display: flex; gap: 3px; justify-self: start; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.lt-op { min-width: 120px; min-height: 46px; padding: 0 16px; color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 17px; font-weight: 800; cursor: pointer; }
.lt-op[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .lt-op[aria-pressed="false"]:hover { color: var(--ink); background: var(--brand-tint); }
}
.lt-custom__status { min-height: 1.35em; margin: -4px 0 0; color: var(--gold-ink); font-size: 16px; font-weight: 750; line-height: 1.35; }
.lt-custom__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.lt-custom__actions > .uk-btn { font-weight: 750; }
.lt-custom__actions > [data-lt="apply"] { min-width: 168px; }

/* ---- Sen dene: practice band (pips, task, feedback, controls) and the finish card --------- */
.lt-practice { display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 10px 16px 12px; text-align: center; }
.lt-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; width: 100%; }
/* Cevabı göster is the teacher's quiet way out: dashed, on the band's own background. */
.lt-phead > [data-lt="reveal"] { color: var(--ink-2); background: transparent; border-style: dashed; font-size: 15px; }
.lt-pips, .lt-finish__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lt-pip, .lt-finish__dot {
  display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink-3); background: var(--surface); border: 2px solid var(--line-strong); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lt-pip[aria-current="step"] { color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.lt-pip[data-done="true"], .lt-finish__dot { color: var(--lt-on-gold); background: var(--lt-gold); border-color: var(--lt-gold); }
.lt-pip.is-pop { animation: ltPop .5s var(--ease-out); }
.lt-pcount { color: var(--ink-2); font-size: 16px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lt-round {
  max-width: 1100px; margin: 0; color: var(--ink); font-size: clamp(20px, 2.1vw, 28px); font-weight: 750; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance;
}
.lt-feedback {
  box-sizing: border-box; max-width: 1100px; min-height: 2.6em; margin: 0; padding: 2px 10px; color: var(--ink-2);
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; line-height: 1.3; text-wrap: balance;
}
.lt-feedback:empty { visibility: hidden; }
.lt-feedback[data-kind="hint"] { color: var(--gold-ink); }
.lt-feedback[data-kind="win"] { color: var(--green-ink); }
.lt-feedback[data-kind="answer"] { color: var(--ink); }
.lt-feedback.is-new { animation: ltRise .35s var(--ease-out); }
.lt-pcontrols { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.lt-pcontrols > .uk-btn { font-weight: 750; }
.lt-pcontrols > [data-lt="check"] { min-width: 200px; font-size: 19px; }
/* Sonraki görev becomes the main action once the round is answered. */
.lt-pcontrols > [data-lt="next-round"]:not(:disabled),
.lt-pcontrols > [data-lt="next-round"]:not(:disabled):active { color: var(--uk-on-accent); background: var(--uk-accent); border-color: var(--uk-accent); }
.lt-finish { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; }
.lt-finish__panda { width: clamp(110px, 16vw, 190px); height: auto; }
.lt-finish__title { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -.03em; }
.lt-finish__dots { gap: 10px; }
.lt-finish__dot { width: 40px; height: 40px; font-size: 18px; }
.lt-finish.is-in .lt-finish__dot { animation: ltPop .5s var(--ease-out) backwards; }
.lt-finish.is-in .lt-finish__dot:nth-child(2) { animation-delay: .1s; }
.lt-finish.is-in .lt-finish__dot:nth-child(3) { animation-delay: .2s; }
.lt-finish.is-in .lt-finish__dot:nth-child(4) { animation-delay: .3s; }
.lt-finish.is-in .lt-finish__dot:nth-child(5) { animation-delay: .4s; }
@keyframes ltPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ltShake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 45% { translate: 6px 0; } 70% { translate: -4px 0; } }

/* ---- Themes and preferences ----------------------------------------------------------------- */
body.high-contrast .lt-stage { background-image: none; border-color: var(--ink); }
body.high-contrast .lt-mine, body.high-contrast .lt-custom__card, body.high-contrast .lt-field { border-color: var(--ink); }
body.high-contrast .lt-pip, body.high-contrast .lt-finish__dot { border-color: var(--ink); }
body.high-contrast .lt .uk-btn:disabled { opacity: 1; border-style: dashed; }
body.reduced-motion .lt *,
body.reduced-motion .lt *::before,
body.reduced-motion .lt *::after { animation: none !important; transition: none !important; }

/* ---- Narrower screens ----------------------------------------------------------------------- */
/* A chapter with seven scene dots needs ~1340 px on one transport row; below that the scrub gets its own row. */
@media (max-width: 1300px) {
  /* The lab's name gives way so the title fits in two lines; the launcher and the title already name the lab. */
  .lt-eyebrow { display: none; }
  .lt-transport { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .lt-scrub { flex-basis: 100%; order: 5; }
}
/* Five chapter names, the mode switch and the icon tools (Kendi sayıların, Sesli anlatım, Kapat) share one header row
   up to 1600 px; the title takes two lines, kept even when it fits on one so the stage does not shift between chapters. */
@media (max-width: 1600px) {
  .lt-head { gap: 10px; }
  .lt-titles h2 { min-height: 2.2em; font-size: 18px; line-height: 1.1; }
}
/* One header row needs the named rail (~683 px), the actions (at most ~406 px), gaps and padding (~52 px) and ~175 px
   for the longest chapter title in two lines: ~1320 px. Narrower, the header takes two rows like the integer lab's:
   titles and the actions on the first, the named rail centred on the second; its labels may wrap rather than leave the screen. */
@media (max-width: 1319px) {
  .lt-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .lt-head__actions { grid-column: 2; grid-row: 1; }
  .lt-rail { box-sizing: border-box; grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; }
  .lt-rail__btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.1; }
}
@media (max-width: 760px) {
  /* Header: titles and the actions on the first row (the titles give way to the mode switch), the rail on the second. */
  .lt-head { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 10px; gap: 6px 8px; }
  .lt-eyebrow { display: none; }
  .lt-titles h2 { min-height: 0; font-size: 17px; }
  .lt.has-modes .lt-titles { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lt-head__actions { grid-column: 2; grid-row: 1; gap: 6px; }
  .lt.has-modes .lt-head__actions { grid-column: 1 / -1; justify-content: stretch; }
  .lt-mode { flex: 1; min-width: 0; }
  .lt-mode > .uk-btn { flex: 1; min-width: 0; padding: 0 8px; font-size: 15px; }
  /* The mode switch shares the first row with three tools: they keep 46 px, two over the floor. */
  .lt-head__actions > .uk-btn--icon { --uk-size: 46px; }
  .lt-rail { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding: 3px; gap: 2px; }
  .lt-rail__btn { justify-content: center; min-width: 48px; padding: 0 6px; }
  .lt-rail__label { display: none; }
  .lt-stage { margin: 8px 10px 0; border-radius: 18px; }
  .lt-caption { gap: 2px; padding: 8px 12px 4px; }
  .lt-scene { font-size: 12px; }
  .lt-caption__text { min-height: 4.96em; font-size: 20px; }
  .lt-equation { min-height: calc(1.9em + 8px); padding: 2px 16px; font-size: 19px; }
  .lt-transport { flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 4px 10px 10px; }
  .lt-buttons { flex: 1 1 100%; justify-content: space-between; }
  .lt-buttons > [data-lt="play"] { flex: 1; min-width: 0; }
  .lt-dots { flex: none; }
  .lt-scrub { flex: 1 1 120px; order: 0; min-width: 0; }
  .lt-time { display: none; }
  .lt-speed__btn { min-width: 48px; padding: 0 4px; font-size: 15px; }
  .lt-poster { padding: 12px; }
  .lt-poster__card { flex-direction: column; gap: 6px; padding: 18px; text-align: center; }
  .lt-poster__panda { width: 84px; }
  .lt-poster__title { font-size: 24px; }
  .lt-poster__instruction { margin-bottom: 14px; font-size: 16px; }
  .lt-poster [data-lt="play"] { --uk-size: 58px; font-size: 20px; }
  .lt-caption.has-end { padding-top: 6px; }
  .lt-caption .lt-end { box-sizing: border-box; width: 100%; }
  .lt-end { right: 10px; bottom: 10px; left: 10px; flex-direction: column; gap: 6px; padding: 8px 10px 10px; transform: none; white-space: normal; }
  .lt-end__title { font-size: 16px; }
  .lt-end__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .lt-end__actions > .uk-btn { --uk-icon: 20px; padding: 0 8px; font-size: 15px; }
  .lt-capmeta { width: 100%; }
  .lt-mine { box-sizing: border-box; justify-content: space-between; width: 100%; max-width: 420px; gap: 6px; padding-left: 10px; font-size: 13px; white-space: nowrap; }
  .lt-mine__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lt-custom { padding: 8px; }
  .lt-custom__card { gap: 10px; padding: 14px 12px; border-radius: 22px; }
  .lt-custom__head h3 { font-size: 20px; }
  .lt-custom__preview { padding: 2px 14px; font-size: 20px; }
  .lt-custom__fields { gap: 8px; }
  .lt-field { gap: 4px; padding: 8px 8px 4px; border-radius: 16px; }
  .lt-field--op { gap: 8px; padding-bottom: 8px; }
  .lt-field__label { font-size: 14px; }
  .lt-field__row { gap: 4px; }
  .lt-field__value { font-size: 24px; }
  .lt-op { min-width: 0; flex: 1; }
  .lt-ops { justify-self: stretch; }
  .lt-custom__actions { justify-content: stretch; gap: 8px; }
  .lt-custom__actions > :is(.uk-btn--labelled, .uk-btn--primary) { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 15px; }
  .lt-practice { gap: 4px; padding: 6px 10px 10px; }
  .lt-pip { width: 24px; height: 24px; font-size: 12px; }
  .lt-pcount { font-size: 14px; }
  .lt-phead > [data-lt="reveal"] { padding: 0 10px; font-size: 14px; }
  .lt-round { font-size: 18px; }
  .lt-feedback { min-height: 2.6em; font-size: 16px; }
  .lt-pcontrols { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .lt-pcontrols > .uk-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 16px; }
}
/* Short phones (e.g. 320x568): tighter header, caption band and transport so the stage keeps some height. */
@media (max-width: 760px) and (max-height: 680px) {
  .lt-head { padding-top: 4px; padding-bottom: 5px; row-gap: 4px; }
  .lt-stage { margin-top: 6px; }
  .lt-caption { padding: 4px 10px 2px; }
  .lt-caption__text { font-size: 16px; }
  .lt-transport { gap: 4px 8px; padding: 2px 10px 6px; }
}

/* ==== Rasyonel sayı laboratuvarı: the renderers of rational-lab.js (line, lines, area, rules) ===== */
.rl-band--neg { fill: var(--sign-neg-tint); }
.rl-band--pos { fill: var(--sign-pos-tint); }
.rl-axis__line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.rl-axis__end { fill: var(--ink); }
.rl-tick line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.rl-tick.is-zero line { stroke-width: 4; }
.rl-tick.is-part line { stroke: var(--ink-2); stroke-width: 2; }
.rl-int { fill: var(--ink-2); }
.rl-int.is-pos { fill: var(--sign-pos-ink); }
.rl-int.is-neg { fill: var(--sign-neg-ink); }
.rl-int.is-zero { fill: var(--ink); font-weight: 800; }
.rl-tag__box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.rl-tag text { fill: var(--ink); font-weight: 800; }
.rl-tag__bar { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rl-tag { color: var(--ink); }
.rl-tag.is-pos { color: var(--sign-pos-ink); }
.rl-tag.is-neg { color: var(--sign-neg-ink); }
.rl-tag.is-unit { color: var(--ink-2); }
.rl-tag.is-pos text { fill: var(--sign-pos-ink); }
.rl-tag.is-neg text { fill: var(--sign-neg-ink); }
.rl-tag.is-unit text { fill: var(--ink-2); font-weight: 750; }
.rl-tag.is-pos .rl-tag__box { stroke: var(--sign-pos-line); }
.rl-tag.is-neg .rl-tag__box { stroke: var(--sign-neg-line); }
.rl-tag.is-unit .rl-tag__box { stroke: var(--line); }
.rl-bracket { color: var(--gold-ink); }
.rl-bracket__path { fill: none; stroke: var(--gold-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rl-bracket text { fill: var(--gold-ink); font-weight: 800; }
.rl-bracket .rl-tag__bar { stroke: var(--gold-ink); }
.rl-panda, .rl-ghost {
  position: absolute; z-index: 1; top: 0; left: 0; width: 100px; height: 100px;
  transform-origin: 50% 95.5%; pointer-events: none; user-select: none; -webkit-user-select: none; will-change: transform;
}
.rl-ghost { z-index: 0; }
.rl-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.rl-arc.is-pos { stroke: var(--sign-pos-ink); }
.rl-arc.is-neg { stroke: var(--sign-neg-ink); }
body.high-contrast .rl-tag__box { stroke-width: 3; }
body.high-contrast .rl-tag.is-neg .rl-tag__box { stroke-dasharray: 6 4; }
/* Bölme on the line: the span 0…|a|, a hop arc per hop of |b| (the partial last one dashed) and its count */
.rl-span { fill: var(--gold-base); fill-opacity: .45; stroke: var(--gold-line); stroke-width: 2; }
.rl-arc.is-partial { stroke: var(--gold-line); stroke-dasharray: 8 7; }
.rl-count { color: var(--brand-ink); }
.rl-count text { fill: var(--brand-ink); font-weight: 800; }
.rl-count.is-pos, .rl-count.is-pos text { color: var(--sign-pos-ink); fill: var(--sign-pos-ink); }
.rl-count.is-neg, .rl-count.is-neg text { color: var(--sign-neg-ink); fill: var(--sign-neg-ink); }
.rl-count .rl-tag__box { stroke: var(--brand); }
/* Çarpma: the unit square with its painted rows (brand) and chosen columns (gold), both see-through so their overlap
   reads as the two mixed, then the product cells and the result */
.rl-area__sheet { fill: var(--surface); }
.rl-area__frame { fill: none; stroke: var(--ink); stroke-width: 3; }
.rl-band.is-row { fill: var(--brand); fill-opacity: .2; }
.rl-band.is-col { fill: var(--gold-base); fill-opacity: .32; stroke: var(--gold-line); stroke-width: 2.5; stroke-dasharray: 9 6; }
html[data-theme="dark"] .rl-band.is-row { fill-opacity: .34; }
html[data-theme="dark"] .rl-band.is-col { fill-opacity: .3; }
.rl-grid__line { stroke: var(--ink-2); stroke-width: 2; }
.rl-cell { fill: var(--brand); }
.rl-factor.is-row { color: var(--brand-ink); }
.rl-factor.is-col { color: var(--gold-ink); }
.rl-factor.is-row text { fill: var(--brand-ink); font-weight: 800; }
.rl-factor.is-col text { fill: var(--gold-ink); font-weight: 800; }
.rl-factor.is-row .rl-tag__box { stroke: var(--brand); }
.rl-factor.is-col .rl-tag__box { stroke: var(--gold-line); }
.rl-result { color: var(--ink); }
.rl-result text { fill: var(--ink); font-weight: 800; }
.rl-result .rl-tag__box { stroke: var(--line-strong); stroke-width: 2.5; }
.rl-result .rl-result__sign.is-pos { fill: var(--sign-pos-ink); }
.rl-result .rl-result__sign.is-neg { fill: var(--sign-neg-ink); }
/* Karşılaştırma's marks on its two lines */
.rl-mark circle, .rl-mark rect { fill: var(--sign-zero); stroke: var(--surface); stroke-width: 3; }
.rl-mark.is-pos circle, .rl-mark.is-pos rect { fill: var(--sign-pos); }
.rl-mark.is-neg circle, .rl-mark.is-neg rect { fill: var(--sign-neg); }
/* Rule cards, HTML in the stage layer in the integer lab's .il-rule look: the two cards of Toplama ve çıkarma (T7),
   Çarpma (Ç5) and Bölme (B4) side by side, the one being read highlighted; Karşılaştırma's one K5 card large (is-single), with its example drawn like the chip. */
.rl-rules {
  position: absolute; inset: 0; z-index: 2; box-sizing: border-box; display: flex; flex-flow: row wrap; align-items: center;
  align-content: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: 18px 16px; visibility: hidden;
}
.rl-rule {
  position: relative; display: grid; flex: 1 1 280px; gap: 8px; box-sizing: border-box; max-width: 460px; padding: 22px 24px 22px 32px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-md);
}
.rl-rule::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 12px; width: 6px; border-radius: 3px; background: var(--brand); }
.rl-rule__title { font-size: clamp(19px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.rl-rule__text { color: var(--ink-2); font-size: clamp(17px, 1.65vw, 23px); font-weight: 650; line-height: 1.3; }
.rl-rule__example { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .25em; font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; line-height: 1.2; }
.rl-rule.is-active { border-color: var(--gold-base); box-shadow: 0 0 0 4px var(--gold-tint), var(--shadow-lg); }
.rl-rule.is-active::before { background: var(--gold-base); }
@media (max-width: 760px) {
  .rl-rules { gap: 10px; padding: 10px; }
  .rl-rule { flex-basis: 100%; gap: 4px; padding: 14px 16px 14px 26px; border-radius: 18px; }
}
.rl-rules.is-single { padding: 18px 24px; }
.rl-rules.is-single .rl-rule { flex: 0 1 760px; gap: 12px; max-width: 760px; padding: 26px 34px 28px 42px; border-radius: 22px; }
.rl-rules.is-single .rl-rule::before { top: 16px; bottom: 16px; left: 16px; width: 7px; border-radius: 4px; }
.rl-rules.is-single .rl-rule__title { font-size: clamp(26px, 3vw, 42px); line-height: 1.15; }
.rl-rules.is-single .rl-rule__text { font-size: clamp(19px, 1.9vw, 27px); }
.rl-rules.is-single.is-phone { padding: 12px; }
.rl-rules.is-single.is-phone .rl-rule { gap: 8px; padding: 18px 18px 20px 30px; border-radius: 18px; }
.rl-rules.is-single.is-phone .rl-rule::before { left: 12px; width: 6px; }
.rl-rules.is-single.is-phone .rl-rule__title { font-size: 23px; }
.rl-rules.is-single.is-phone .rl-rule__text { font-size: 17px; }
.rl-rules.is-single.is-phone .rl-rule__example { font-size: 22px; }
body.high-contrast .rl-mark circle, body.high-contrast .rl-mark rect { stroke: var(--ink); }
body.high-contrast .rl-rule { border-color: var(--ink); box-shadow: none; }
body.high-contrast .rl-rule.is-active { border-width: 4px; }
body.high-contrast .rl-rules.is-single .rl-rule { border-width: 3px; }
body.high-contrast .rl-arc, body.high-contrast .rl-area__frame { stroke-width: 4; }
body.high-contrast .rl-band.is-row, body.high-contrast .rl-band.is-col { fill-opacity: .45; }
body.high-contrast .rl-span { stroke-width: 3; }
body.high-contrast .rl-cell { stroke: var(--ink); stroke-width: 2; }
/* Sen dene: the flag of a line round (a slider in the stage), its tick targets, and the option buttons of a tap round */
.rl-tick__hit { fill: transparent; }
.rl-flag {
  --rl-flag-h: 92px;
  position: absolute; z-index: 2; top: 0; left: 0; box-sizing: border-box; width: 52px; height: var(--rl-flag-h);
  margin: calc(-1 * var(--rl-flag-h)) 0 0 -26px; cursor: grab; outline: none; touch-action: none; user-select: none; -webkit-user-select: none;
}
.rl-flag:active { cursor: grabbing; }
.rl-flag[aria-disabled="true"] { cursor: default; }
.rl-flag:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }
.rl-flag__pole { position: absolute; top: 4px; bottom: 0; left: 50%; width: 5px; margin-left: -2.5px; background: var(--ink); border-radius: 3px; }
.rl-flag__cloth {
  position: absolute; top: 0; left: calc(50% + 2px); display: flex; align-items: center; box-sizing: border-box; min-width: 62px; min-height: 46px; padding: 3px 22px 3px 10px;
  color: var(--lt-on-gold); background: var(--lt-gold); border-radius: 4px 0 0 4px; box-shadow: inset 0 -4px 0 var(--gold-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
  font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rl-flag__cloth .lt-tp, .rl-flag__cloth .lt-tn { color: inherit; }
/* The flag stands on a kit knob (ui-kit.css), its centre just above the axis so the number under the flag stays clear;
   it grows a little while the flag is dragged ([data-uk-dragging] on the flag). */
.rl-flag__knob { position: absolute; bottom: calc(8px - var(--uk-knob-size) / 2); left: 50%; translate: -50% 0; --uk-knob: var(--surface); --uk-knob-ring: var(--ink); }
.rl-flag.is-shake { animation: ltShake .42s var(--ease-out); }
.rl-pick {
  position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 3vh, 28px); padding: 16px;
}
.rl-pick__eq {
  display: inline-flex; align-items: center; margin: 0; padding: 6px 26px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 999px;
  box-shadow: var(--shadow-sm); font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rl-pick__options { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 20px); }
.rl-pick--choice .rl-pick__options { display: grid; grid-template-columns: repeat(6, auto); }
.rl-option {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 72px; padding: 6px 18px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 18px; box-shadow: 0 3px 0 var(--line-strong);
  font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; cursor: pointer;
}
.rl-pick--greater .rl-option, .rl-pick--order .rl-option { min-width: 140px; min-height: 104px; font-size: clamp(32px, 3.6vw, 48px); }
.rl-option.is-pos { color: var(--sign-pos-ink); }
.rl-option.is-neg { color: var(--sign-neg-ink); }
.rl-option .lt-tp, .rl-option .lt-tn { color: inherit; }
.rl-option__badge {
  position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--on-brand); background: var(--brand); font-size: 18px; font-weight: 800; visibility: hidden;
}
.rl-option__badge:not(:empty) { visibility: visible; animation: ltPop .3s var(--ease-out); }
.rl-option[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint), 0 3px 0 var(--brand); }
.rl-option:disabled { cursor: default; }
.rl-option:disabled:not(.is-right) { opacity: .55; box-shadow: none; }
.rl-option.is-wrong { text-decoration: line-through; text-decoration-thickness: 3px; border-style: dashed; }
.rl-option.is-right { opacity: 1; color: var(--lt-on-gold); background: var(--lt-gold); border-color: var(--lt-gold); box-shadow: 0 3px 0 var(--gold-ink); }
.rl-option.is-right .rl-option__badge { color: var(--lt-on-gold); background: var(--surface); box-shadow: inset 0 0 0 2px var(--gold-ink); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .rl-option:not(:disabled):hover { background: var(--brand-tint); border-color: var(--brand); }
}
.rl-pick.is-phone { gap: 12px; padding: 10px; }
.rl-pick.is-phone .rl-pick__eq { padding: 4px 16px; font-size: 24px; }
.rl-pick.is-phone .rl-pick__options { gap: 8px; }
.rl-pick--choice.is-phone .rl-pick__options { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.rl-pick.is-phone .rl-option { min-width: 0; min-height: 60px; padding: 4px 8px; font-size: 24px; }
.rl-pick--greater.is-phone .rl-option, .rl-pick--order.is-phone .rl-option { min-width: 96px; min-height: 80px; font-size: 30px; }
body.high-contrast .rl-option { border-color: var(--ink); }
body.high-contrast .rl-option:disabled:not(.is-right) { opacity: 1; border-style: dashed; }
@media (max-width: 760px) {
  .rl-flag__cloth { min-width: 52px; min-height: 40px; padding: 2px 16px 2px 8px; font-size: 18px; }
}