/*
 * 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; }
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__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px 0 9px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 16px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.lt-mode__btn svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.lt-mode__btn[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.lt-mode__btn[data-lt="practice"][aria-pressed="true"] { color: var(--lt-on-gold); background: var(--lt-gold); box-shadow: var(--shadow-sm); }
html:not([data-input="touch"]) .lt-mode__btn[aria-pressed="false"]:hover { color: var(--ink); background: var(--brand-tint); }
.lt-close, .lt-hbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px 0 11px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: var(--shadow-xs); font-size: 16px; font-weight: 750; white-space: nowrap; cursor: pointer;
}
.lt-close svg, .lt-hbtn svg { flex: none; width: 21px; height: 21px; fill: currentColor; }
/* Ses (lab-voice.js): the speaker with waves while the lab speaks, crossed out while it is silent. */
.lt-voice[aria-pressed="false"] .lt-voice__on, .lt-voice[aria-pressed="true"] .lt-voice__off { display: none; }
html:not([data-input="touch"]) .lt-close:hover, html:not([data-input="touch"]) .lt-hbtn:hover { background: var(--brand-tint); border-color: var(--brand); }

/* ---- 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__play {
  display: inline-flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 32px 0 10px;
  color: var(--on-primary); background: var(--brand-grad); border: 0; border-radius: 999px; box-shadow: var(--shadow-brand); font-size: 22px; font-weight: 800; cursor: pointer;
}
.lt-poster__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--lt-on-gold); background: var(--lt-gold); animation: ltPulse 1.6s var(--ease-out) 3; }
.lt-poster__icon svg { width: 26px; height: 26px; fill: currentColor; transform: translateX(2px); }
html:not([data-input="touch"]) .lt-poster__play:hover { background: var(--primary-hover); }
/* 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"] .lt-poster__play { gap: 10px; min-height: 48px; padding: 0 22px 0 6px; font-size: 18px; }
.lt-poster[data-fit="compact"] .lt-poster__icon { width: 36px; height: 36px; }
.lt-poster[data-fit="compact"] .lt-poster__icon svg { width: 20px; height: 20px; }
@keyframes ltPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.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-btn:disabled { cursor: default; opacity: .45; box-shadow: none; }
.lt-btn--quiet { min-height: 44px; padding: 0 14px; color: var(--ink-2); background: transparent; border-style: dashed; font-size: 15px; }
/* 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); }
.lt-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; font-size: 17px; font-weight: 750; cursor: pointer;
}
.lt-btn svg { width: 22px; height: 22px; fill: currentColor; }
.lt-btn--primary { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-brand); }
html:not([data-input="touch"]) .lt-btn:not(.lt-btn--primary):hover { background: var(--brand-tint); border-color: var(--brand); }
@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;
}
.lt-mine__reset {
  min-height: 44px; padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
html:not([data-input="touch"]) .lt-mine__reset:hover { background: var(--brand-tint); border-color: var(--brand); }
.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-tbtn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-xs); cursor: pointer;
}
.lt-tbtn svg { width: 24px; height: 24px; fill: currentColor; }
html:not([data-input="touch"]) .lt-tbtn:hover { background: var(--brand-tint); border-color: var(--brand); }
.lt-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 176px; height: 56px; padding: 0 22px 0 16px;
  color: var(--on-primary); background: var(--brand-grad); border: 0; border-radius: 16px; box-shadow: var(--shadow-brand); font-size: 19px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.lt-play__icon svg { width: 26px; height: 26px; fill: currentColor; }
html:not([data-input="touch"]) .lt-play:hover { background: var(--primary-hover); }
.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-step {
  min-width: 52px; height: 50px; padding: 0 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 15px;
  box-shadow: 0 3px 0 var(--line-strong); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
.lt-step:disabled { color: var(--ink-3); background: var(--surface-2); box-shadow: none; cursor: default; opacity: .6; }
html:not([data-input="touch"]) .lt-step:not(:disabled):hover { background: var(--brand-tint); border-color: var(--brand); }
.lt-step:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
.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); }
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 .lt-btn--primary { min-width: 168px; justify-content: center; }

/* ---- 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%; }
.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-check { min-width: 200px; min-height: 56px; justify-content: center; font-size: 19px; }
.lt-next { min-height: 56px; }
.lt-next:not(:disabled) { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-brand); }
.lt-pcontrols .lt-btn--primary, .lt-pcontrols [data-lt="watch"] { min-height: 56px; }
.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-btn:disabled, body.high-contrast .lt-step: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, Kendi sayıların and Kapat share one header row up to 1600 px; the Kendi
   sayıların and Kapat labels give way first (the buttons keep their accessible names) and 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; }
  .lt-hbtn, .lt-close { justify-content: center; min-width: 48px; padding: 0 12px; }
  .lt-hbtn__label, .lt-close__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* One header row needs the named rail (~683 px), the actions with Ses (~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 Kapat on the first row, the rail (glyphs only) on the second. */
  /* 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__btn { flex: 1; justify-content: center; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 15px; }
  .lt-hbtn, .lt-close { justify-content: center; min-width: 46px; min-height: 46px; padding: 0 11px; }
  .lt-hbtn__label, .lt-close__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .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-play { flex: 1; min-width: 0; height: 52px; }
  .lt-tbtn { width: 50px; height: 50px; }
  .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__play { min-height: 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 .lt-btn { justify-content: center; min-height: 46px; padding: 0 8px; font-size: 15px; }
  .lt-end .lt-btn svg { width: 18px; height: 18px; }
  .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-mine__reset { flex: none; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .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-step { min-width: 44px; height: 46px; padding: 0 4px; font-size: 16px; }
  .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 .lt-btn { flex: 1 1 auto; justify-content: center; min-height: 46px; padding: 0 10px; font-size: 15px; }
  .lt-custom__actions .lt-btn--primary { min-width: 0; }
  .lt-practice { gap: 4px; padding: 6px 10px 10px; }
  .lt-pip { width: 24px; height: 24px; font-size: 12px; }
  .lt-pcount { font-size: 14px; }
  .lt-btn--quiet { 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 .lt-btn { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 52px; 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-close { min-height: 44px; }
  .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; }
  .lt-play { height: 48px; }
  .lt-tbtn { width: 46px; height: 46px; }
}

/* ==== 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; }
.rl-flag__foot { position: absolute; bottom: -6px; left: 50%; width: 20px; height: 12px; margin-left: -10px; background: var(--ink); border-radius: 50%; }
.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); }
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; }
}