/* X Protocol W2 — Focus mode. Loaded after design-w2-training.css. */
.focus-v2 {
  position: fixed; inset: 0; z-index: 1500; display: none; overflow: hidden; color: var(--w2-text); background: var(--w2-bg); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.focus-v2.active {
  display: flex; align-items: flex-start; justify-content: center;
}
.focus-v2 *, .focus-v2 *::before, .focus-v2 *::after {
  box-sizing: border-box;
}
#focus-v2, #focus-v2 * {
  font-variant-numeric: tabular-nums;
}
.focus-v2 :is(.s1-name, .s15-done-title, .s15-next-name, .s2-name, .s5-next-name, .s6-title, .spr-title, .spr-ex-name) {
  text-wrap: balance;
}
.focus-v2 :is(.s15-done-sub, .plate-desc, .s2-goal, .s6-title-sub) {
  text-wrap: pretty;
}
/* The 16:9 frame is functional: all calibrated vw sizes resolve against it. */
.focus-v2 > .s1, .focus-v2 > .s15, .focus-v2 > .s2, .focus-v2 > .s5, .focus-v2 > .s6 {
  position: relative; inset: auto; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); flex-shrink: 0;
}
.focus-v2 :is(.s1, .s15, .s2, .s5, .s6, .spr) {
  overflow: hidden; color: var(--w2-text); background: var(--w2-bg); font-family: 'Inter', sans-serif;
}
.focus-v2 .spr {
  position: absolute; inset: 0; z-index: 50;
}
/* Shared session top bar. */
.focus-v2 .s2-top {
  position: absolute; top: 0; right: 0; left: 0; z-index: 4; display: flex; align-items: center; height: 6.6%; gap: var(--w2-s5); padding: 0 var(--w2-s5); border-bottom: 1px solid var(--w2-line); background: rgba(22, 24, 26, .92); backdrop-filter: blur(8px);
}
.focus-v2 .fm-logo {
  display: flex; align-items: center; justify-content: center; width: var(--w2-s7); height: var(--w2-s7); flex-shrink: 0;
}
.focus-v2 .fm-logo svg {
  width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(200, 241, 53, .28));
}
.focus-v2 .fm-logo .ring-main {
  fill: none; stroke: var(--w2-lime); stroke-width: 2.5;
}
.focus-v2 .fm-logo .ring-inner {
  fill: var(--w2-lime); opacity: .08;
}
.focus-v2 .s2-progress {
  display: flex; align-items: flex-end; flex: 1; height: 100%; gap: var(--w2-s3); padding: var(--w2-s4) 0 var(--w2-s3);
}
.focus-v2 .s2-seg {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0;
}
.focus-v2 .s2-seg.warm {
  flex: 1.4;
}
.focus-v2 .s2-seg.train {
  flex: 5;
}
.focus-v2 .s2-seg-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--w2-s2); margin-bottom: var(--w2-s2);
}
.focus-v2 :is(.s2-seg-lbl, .s2-seg-cnt, .s2-finish-lbl, .s2-total .lbl) {
  color: var(--w2-text-quiet); font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.focus-v2 .s2-seg.active .s2-seg-lbl, .focus-v2 .s2-seg.done .s2-seg-lbl, .focus-v2 .s2-seg.done .s2-seg-cnt, .focus-v2 .s2-finish.done .s2-finish-lbl {
  color: var(--w2-lime);
}
.focus-v2 .s2-seg.active .s2-seg-lbl::before {
  content: ''; display: inline-block; width: var(--w2-s1); height: var(--w2-s1); margin-right: var(--w2-s2); border-radius: 50%; background: var(--w2-lime); box-shadow: 0 0 6px rgba(200, 241, 53, .4); vertical-align: middle;
}
.focus-v2 .s2-seg.done .s2-seg-lbl::before {
  content: ''; display: inline-block; width: var(--w2-s2); height: var(--w2-s1); margin-right: var(--w2-s2); border-bottom: 2px solid var(--w2-lime); border-left: 2px solid var(--w2-lime); transform: translateY(-2px) rotate(-45deg);
}
.focus-v2 .s2-seg-track {
  position: relative; height: var(--w2-s2); overflow: hidden; border-radius: var(--w2-s1); background: var(--w2-line);
}
.focus-v2 .s2-seg-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--w2-lime); box-shadow: 0 0 8px rgba(200, 241, 53, .28);
}
.focus-v2 .s2-seg.warm.done .s2-seg-fill, .focus-v2 .s2-seg.train.done .s2-seg-fill {
  width: 100%;
}
.focus-v2 .s2-finish {
  display: flex; align-items: center; flex-direction: column; flex-shrink: 0; gap: var(--w2-s2);
}
.focus-v2 .s2-finish-dot {
  width: var(--w2-s3); height: var(--w2-s3); border: 1px solid var(--w2-text-quiet); border-radius: 50%;
}
.focus-v2 .s2-finish.done .s2-finish-dot {
  border-color: var(--w2-lime); background: var(--w2-lime); box-shadow: 0 0 8px rgba(200, 241, 53, .4);
}
.focus-v2 .s2-divider {
  width: 1px; height: 62%; flex-shrink: 0; background: var(--w2-line);
}
.focus-v2 .s2-total {
  display: flex; align-items: flex-end; flex-direction: column; flex-shrink: 0; gap: var(--w2-s1); padding-left: var(--w2-s1);
}
.focus-v2 .s2-total .v {
  color: var(--w2-text); font: 800 clamp(16px, 1.05vw, 22px)/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
/* Shared media and controls. */
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif, .spr-gif) {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--w2-line); border-radius: var(--w2-s3); background: var(--w2-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif) .play {
  display: flex; align-items: center; justify-content: center; width: var(--w2-s9); height: var(--w2-s9); border: 1px solid rgba(200, 241, 53, .28); border-radius: 50%; background: rgba(22, 24, 26, .72);
}
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif) .play::before {
  content: ''; width: 0; height: 0; margin-left: var(--w2-s1); border-top: var(--w2-s2) solid transparent; border-bottom: var(--w2-s2) solid transparent; border-left: var(--w2-s3) solid var(--w2-lime);
}
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real::before, .focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real::after {
  display: none;
}
/* Гифка ещё летит — значок внутри бокса пульсирует. Пустой прямоугольник без
   единого признака жизни читается как поломка: ровно так выглядели три упражнения
   подряд на скринах Романа с тренировки 03.09.2026. Картинка пришла (onload вешает
   .loaded) — значок убираем, чтобы он не просвечивал сквозь прозрачные края. */
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real .play {
  animation: fv2GifWait 1.3s ease-in-out infinite;
}
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real.loaded .play {
  display: none;
}
@keyframes fv2GifWait {
  0%, 100% { opacity: .3; }
  50% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real .play { animation: none; }
}
.focus-v2 :is(.s1-gif, .s15-next-gif, .s2-gif, .s5-next-gif).real img, .focus-v2 .spr-gif img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.focus-v2 .fv2-close {
  position: absolute; top: calc(6.6% + var(--w2-s2)); right: var(--w2-s5); z-index: 100; display: flex; align-items: center; justify-content: center; width: var(--w2-s8); height: var(--w2-s8); padding: 0; border: 1px solid var(--w2-line); border-radius: 50%; color: var(--w2-text-muted); background: var(--w2-surface); cursor: pointer; transition-property: color, background-color, border-color, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.focus-v2 .fv2-close:hover {
  border-color: rgba(255, 255, 255, .16); color: var(--w2-text); background: var(--w2-surface-raised);
}
.focus-v2 .fv2-close:active {
  transform: scale(.96);
}
.focus-v2 .fv2-close svg {
  width: var(--w2-s4); height: var(--w2-s4); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.focus-v2 .fv2-close.fv2-close-out {
  position: fixed; top: calc(min(100vh, 100vw * 9 / 16) * .066 + var(--w2-s2)); right: calc((100vw - min(100vw, 100vh * 16 / 9)) / 2 + var(--w2-s5)); z-index: 2000;
}
.focus-v2 :is(.s1-primary, .s15-primary, .s2-primary, .s5-action .btn, .s6-action .btn-primary, .s1-sec-btn, .s2-sec-btn) {
  min-height: var(--w2-s8); cursor: pointer; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.focus-v2 :is(.s1-primary, .s15-primary, .s2-primary, .s5-action .btn, .s6-action .btn-primary, .s1-sec-btn, .s2-sec-btn):active {
  transform: scale(.96);
}
.focus-v2 :is(.s1-primary, .s15-primary, .s2-primary) {
  display: flex; align-items: center; justify-content: center; gap: var(--w2-s3); width: min(320px, 24vw); padding: var(--w2-s4) var(--w2-s5); border: 1px solid var(--w2-lime); border-radius: var(--w2-s3); color: #101204; background: var(--w2-lime); box-shadow: 0 0 24px rgba(200, 241, 53, .22);
}
.focus-v2 :is(.s1-primary, .s15-primary, .s2-primary):hover {
  box-shadow: 0 0 32px rgba(200, 241, 53, .34);
}
.focus-v2 :is(.s1-primary, .s15-primary, .s2-primary) .lbl {
  color: #101204; font: 800 17px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 :is(.s1-primary, .s2-primary) .check {
  display: flex; align-items: center; justify-content: center; width: var(--w2-s6); height: var(--w2-s6); border: 2px solid #101204; border-radius: 50%;
}
/* глиф в процентах от кружка: медиа-квери масштабируют .check, фиксированные
   пиксели уводили галочку в левый верх (баг с тренировки 01.09) */
.focus-v2 :is(.s1-primary, .s2-primary) .check::before {
  content: ''; width: 42%; height: 21%; margin-top: -8%; border-bottom: 2px solid #101204; border-left: 2px solid #101204; transform: rotate(-45deg);
}
.focus-v2 :is(.s1-sec-btn, .s2-sec-btn) {
  display: flex; align-items: center; justify-content: center; min-width: 0; gap: var(--w2-s2); padding: var(--w2-s2) var(--w2-s3); border: 1px solid var(--w2-line); border-radius: var(--w2-s2); color: var(--w2-text-muted); background: transparent; white-space: nowrap;
}
.focus-v2 :is(.s1-sec-btn, .s2-sec-btn):hover {
  border-color: rgba(255, 255, 255, .16); color: var(--w2-text); background: var(--w2-surface);
}
.focus-v2 :is(.s1-sec-btn, .s2-sec-btn) :is(.lbl, .kbd) {
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 :is(.s1-sec-btn, .s2-sec-btn) .kbd, .focus-v2 .s15-hint kbd {
  flex-shrink: 0; padding: var(--w2-s1) var(--w2-s2); border: 1px solid var(--w2-line); border-radius: var(--w2-s1); color: var(--w2-text-quiet);
}
.focus-v2 .fv2-ui-icon, .focus-v2 .fv2-hint-icon {
  display: inline-block; width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em;
}
.s1-sec-btn .icon, .s2-sec-btn .icon {
  width: 14px; height: 14px; flex-shrink: 0;
}

/* S1 — warmup. */
.focus-v2 .s1-pips {
  position: absolute; top: 10%; left: 50%; z-index: 2; display: flex; gap: var(--w2-s2); transform: translateX(-50%);
}
.focus-v2 .s1-pips .p {
  width: var(--w2-s8); height: var(--w2-s1); border-radius: 2px; background: var(--w2-line); transition-property: background-color, box-shadow, opacity; transition-duration: 160ms;
}
.focus-v2 .s1-pips .p.done {
  background: var(--w2-lime); opacity: .55;
}
.focus-v2 .s1-pips .p.cur {
  background: var(--w2-lime); box-shadow: 0 0 8px rgba(200, 241, 53, .35);
}
.focus-v2 :is(.s1-side, .s2-side) {
  position: absolute; top: 50%; z-index: 2; width: 13%; padding: var(--w2-s4); border: 1px solid var(--w2-line); border-radius: var(--w2-s3); background: var(--w2-surface); transform: translateY(-50%); transition-property: opacity, background-color, border-color, transform; transition-duration: 160ms;
}
.focus-v2 :is(.s1-prev, .s2-prev) {
  left: var(--w2-s5); opacity: .45;
}
.focus-v2 :is(.s1-next, .s2-next) {
  right: var(--w2-s5); border-color: rgba(200, 241, 53, .2); background: rgba(200, 241, 53, .045);
}
.focus-v2 :is(.s1-side, .s2-side) .dir {
  margin-bottom: var(--w2-s2); color: var(--w2-text-quiet); font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 :is(.s1-next, .s2-next) .dir {
  color: var(--w2-lime);
}
.focus-v2 :is(.s1-side, .s2-side) .name {
  color: var(--w2-text); font: 600 15px/1.3 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 :is(.s1-side .time, .s2-side .meta) {
  margin-top: var(--w2-s2); color: var(--w2-text-muted); font: 600 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s1-col {
  position: absolute; top: 14%; bottom: 5%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 54%; transform: translateX(-50%);
}
.focus-v2 :is(.s1-top-cluster, .s1-mid-cluster, .s1-action) {
  display: flex; align-items: center; flex-direction: column; width: 100%;
}
.focus-v2 .s1-name {
  margin-bottom: var(--w2-s5); color: var(--w2-text); font: 700 clamp(20px, 1.9vw, 32px)/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center; text-transform: uppercase;
}
.focus-v2 .s1-gif {
  width: min(100%, 27vw);
}
.focus-v2 .s1-bump {
  margin-bottom: var(--w2-s3); padding: var(--w2-s2) var(--w2-s3); border: 1px solid var(--w2-line); border-radius: 999px; color: var(--w2-text-muted); background: var(--w2-surface); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s1-timer {
  margin-bottom: var(--w2-s3); color: var(--w2-lime); font: 700 clamp(40px, 4.2vw, 76px)/1 'Orbitron', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 20px rgba(200, 241, 53, .35);
}
.focus-v2 .s1-bar, .focus-v2 .s5-bar, .focus-v2 .spr-bar {
  position: relative; overflow: hidden; height: var(--w2-s1); border-radius: 2px; background: var(--w2-line);
}
.focus-v2 .s1-bar {
  width: 20vw;
}
.focus-v2 .s1-bar-fill, .focus-v2 .s5-fill {
  position: absolute; inset: 0; background: var(--w2-lime); box-shadow: 0 0 8px rgba(200, 241, 53, .32);
}
.focus-v2 .s1-action {
  gap: var(--w2-s3);
}
.focus-v2 .s1-secondary {
  display: flex; width: min(360px, 28vw); gap: var(--w2-s3);
}
.focus-v2 .s1-sec-btn {
  flex: 1 1 0;
}
/* S1.5 — warmup checkpoint. */
.focus-v2 .s15::before {
  content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(200, 241, 53, .07), transparent 60%); pointer-events: none;
}
.focus-v2 .s15-col {
  position: absolute; top: 9%; bottom: 5%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 56%; transform: translateX(-50%);
}
.focus-v2 :is(.s15-confirm, .s15-next-wrap, .s15-action) {
  display: flex; align-items: center; flex-direction: column; gap: var(--w2-s3);
}
.focus-v2 .s15-check, .focus-v2 .s6-check {
  position: relative; display: flex; align-items: center; justify-content: center; width: var(--w2-s9); height: var(--w2-s9); border: 2px solid var(--w2-lime); border-radius: 50%; color: var(--w2-lime); background: rgba(200, 241, 53, .06); box-shadow: 0 0 24px rgba(200, 241, 53, .2);
}
.focus-v2 .s15-check::before {
  content: ''; width: var(--w2-s4); height: var(--w2-s2); border-bottom: 3px solid var(--w2-lime); border-left: 3px solid var(--w2-lime); transform: translateY(-2px) rotate(-45deg);
}
.focus-v2 .s15-done-lbl, .focus-v2 .s15-next-lbl {
  color: var(--w2-lime); font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s15-done-title {
  color: var(--w2-text); font: 700 clamp(30px, 2.6vw, 48px)/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center; text-transform: uppercase;
}
.focus-v2 .s15-done-sub {
  max-width: 520px; color: var(--w2-text-muted); font: 400 15px/1.45 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}
.focus-v2 .s15-next {
  display: grid; grid-template-columns: minmax(180px, 18vw) 1fr; align-items: center; width: min(100%, 720px); gap: var(--w2-s5); padding: var(--w2-s5); border: 1px solid var(--w2-line); border-radius: var(--w2-s4); background: var(--w2-surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.focus-v2 .s15-next-info {
  display: flex; flex-direction: column; min-width: 0; gap: var(--w2-s3);
}
.focus-v2 .s15-next-type {
  width: fit-content; padding: var(--w2-s1) var(--w2-s2); border: 1px solid var(--w2-line); border-radius: 999px; color: var(--w2-text-muted); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s15-next-name {
  color: var(--w2-text); font: 600 17px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.focus-v2 .s15-next-meta {
  display: flex; align-items: center; gap: var(--w2-s3); color: var(--w2-text-muted); font: 500 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.focus-v2 .s15-next-meta .dot {
  width: var(--w2-s1); height: var(--w2-s1); border-radius: 50%; background: var(--w2-text-quiet);
}
.focus-v2 .s15-hint {
  color: var(--w2-text-quiet); font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
/* S2 — exercise input. */
.focus-v2 .s2-col {
  position: absolute; top: 8%; bottom: 2.5%; left: 50%; z-index: 2; display: flex; align-items: center; flex-direction: column; width: 62%; transform: translateX(-50%);
}
.focus-v2 .s2.s2-duo .s2-col {
  bottom: 9.5%;
}
.focus-v2 .s2-z1 {
  margin-bottom: var(--w2-s5);
}
.focus-v2 .s2-z2, .focus-v2 .s2-z4, .focus-v2 .s2-z5 {
  margin-bottom: var(--w2-s4);
}
.focus-v2 .s2-z3, .focus-v2 .s2-z6 {
  margin-bottom: var(--w2-s5);
}
.focus-v2 .s2-header {
  display: inline-flex; align-items: center; gap: var(--w2-s3); padding: var(--w2-s2) var(--w2-s4) var(--w2-s2) var(--w2-s2); border: 1px solid var(--w2-line); border-radius: 999px; background: var(--w2-surface);
}
.focus-v2 .s2-header .avatar, .focus-v2 .s2-timeline .tl-avatar {
  display: flex; align-items: center; justify-content: center; width: var(--w2-s7); height: var(--w2-s7); overflow: hidden; border: 1px solid var(--w2-line); border-radius: 50%; color: var(--w2-text-muted); background: var(--w2-surface-raised);
}
.focus-v2 :is(.s2-header .avatar, .s2-timeline .tl-avatar) svg {
  width: 70%; height: 70%;
}
.focus-v2 .s2-header .who-name {
  color: var(--w2-text); font: 600 15px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-header .who-dot {
  width: var(--w2-s2); height: var(--w2-s2); border-radius: 50%; background: var(--w2-lime); box-shadow: 0 0 6px rgba(200, 241, 53, .35); animation: w2FocusPulse 1.6s ease-in-out infinite;
}
.focus-v2 .s2-header .vsep {
  width: 1px; height: var(--w2-s5); background: var(--w2-line);
}
.focus-v2 .s2-header .state-lbl {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s2-header .state-val {
  color: var(--w2-lime); font: 800 17px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-name-row {
  display: flex; align-items: center; justify-content: center; gap: var(--w2-s4);
}
.focus-v2 .s2-name {
  color: var(--w2-text); font: 700 clamp(20px, 1.55vw, 30px)/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center; text-transform: uppercase;
}
.focus-v2 .s2-stars {
  display: flex; align-items: center; gap: var(--w2-s1);
}
.focus-v2 .s2-stars .star {
  width: var(--w2-s4); height: var(--w2-s4); color: var(--w2-line);
}
.focus-v2 .s2-stars .star.on {
  color: var(--w2-lime); filter: drop-shadow(0 0 4px rgba(200, 241, 53, .32));
}
.focus-v2 .s2-stars .star svg {
  display: block; width: 100%; height: 100%;
}
.focus-v2 .s2-gif {
  width: 19vw;
}
.focus-v2 .s2.s2-plain .s2-gif {
  width: 24vw;
}
.focus-v2 .s2-stats, .focus-v2 .s2-controls {
  display: flex; align-items: stretch; justify-content: center; gap: var(--w2-s4);
}
.focus-v2 .s2-stat-card {
  position: relative; display: flex; align-items: center; flex-direction: column; min-width: 160px; gap: var(--w2-s2); padding: var(--w2-s3) var(--w2-s4); border: 1px solid var(--w2-line); border-radius: var(--w2-s3); background: var(--w2-surface);
}
.focus-v2 .s2-stat-card .stat-lbl {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s2-stat-card .stat-val {
  display: flex; align-items: center; gap: var(--w2-s2); color: var(--w2-text-muted); font: 700 15px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-stat-card .reps {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
}
.focus-v2 .s2-stat-card.rec {
  border-color: rgba(255, 215, 64, .3); background: rgba(255, 215, 64, .045);
}
.focus-v2 .s2-stat-card.rec::before {
  content: ''; position: absolute; top: var(--w2-s2); right: var(--w2-s2); width: var(--w2-s2); height: var(--w2-s2); border-radius: 50%; background: var(--w2-gold); box-shadow: 0 0 6px rgba(255, 215, 64, .42);
}
.focus-v2 .s2-stat-card.rec :is(.stat-lbl, .reps) {
  color: var(--w2-gold);
}
.focus-v2 .band-dot {
  display: inline-block; width: var(--w2-s3); height: var(--w2-s3); flex-shrink: 0; border-radius: 50%;
}
.focus-v2 .band-dot.orange {
  background: #EE8A33; box-shadow: 0 0 5px rgba(238, 138, 51, .42);
}
.focus-v2 .band-dot.green {
  background: #35B96F; box-shadow: 0 0 5px rgba(53, 185, 111, .42);
}
.focus-v2 .band-dot.none {
  border: 1px solid var(--w2-text-muted);
}
.focus-v2 .s2-group {
  position: relative; display: flex; align-items: center; flex-direction: column; padding: var(--w2-s3) var(--w2-s4); border: 1px solid var(--w2-line); border-radius: var(--w2-s3); background: var(--w2-surface);
}
.focus-v2 .s2-group-label {
  margin-bottom: var(--w2-s2); color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s2-bands {
  display: flex; align-items: stretch; gap: var(--w2-s2);
}
.focus-v2 .s2-band-card {
  display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 88px; min-height: var(--w2-s9); gap: var(--w2-s1); padding: var(--w2-s2) var(--w2-s3); border: 1px solid var(--w2-line); border-radius: var(--w2-s2); background: var(--w2-surface-raised); cursor: pointer; transition-property: background-color, border-color, box-shadow, transform; transition-duration: 150ms;
}
.focus-v2 .s2-band-card:active {
  transform: scale(.96);
}
.focus-v2 .s2-band-card .name {
  font: 700 15px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-band-card .stats {
  color: var(--w2-text-muted); font: 500 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-band-card.orange {
  border-color: rgba(238, 138, 51, .32); color: #EE8A33;
}
.focus-v2 .s2-band-card.green {
  border-color: rgba(53, 185, 111, .32); color: #35B96F;
}
.focus-v2 .s2-band-card.none {
  color: var(--w2-text-muted);
}
.focus-v2 .s2-band-card.orange.active {
  border-color: #EE8A33; background: rgba(238, 138, 51, .1); box-shadow: 0 0 16px rgba(238, 138, 51, .2);
}
.focus-v2 .s2-band-card.green.active {
  border-color: #35B96F; background: rgba(53, 185, 111, .1); box-shadow: 0 0 16px rgba(53, 185, 111, .2);
}
.focus-v2 .s2-band-card.none.active {
  border-color: var(--w2-text); color: var(--w2-text); background: rgba(255, 255, 255, .06);
}
.focus-v2 .s2-input-wrap {
  display: flex; align-items: center; justify-content: center;
}
.focus-v2 input.s2-input {
  width: 128px; height: 56px; padding: 0 var(--w2-s4); border: 1px solid rgba(200, 241, 53, .32); border-radius: var(--w2-s2); outline: none; color: var(--w2-text); background: rgba(200, 241, 53, .045); font: 800 30px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: center; appearance: textfield;
}
.focus-v2 input.s2-input:focus {
  border-color: var(--w2-lime); box-shadow: 0 0 0 3px rgba(200, 241, 53, .08);
}
.focus-v2 input.s2-input::-webkit-outer-spin-button, .focus-v2 input.s2-input::-webkit-inner-spin-button {
  margin: 0; -webkit-appearance: none;
}
.focus-v2 .s2-goal {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--w2-s2); padding: var(--w2-s2) var(--w2-s4); border: 1px solid rgba(200, 241, 53, .22); border-radius: 999px; color: var(--w2-text); background: rgba(200, 241, 53, .045); font: 700 15px/1.3 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .focus-v2 .s2-goal .val {
  color: var(--w2-lime);
}
.focus-v2 .s2-action {
  display: flex; align-items: center; flex-direction: column; gap: var(--w2-s2);
}
/* Кнопок здесь две — «Пропустить» и «Завершить» (03.09.2026): без зазора они
   слипались бы в одну плашку на узком экране. */
.focus-v2 .s2-secondary {
  display: flex; gap: var(--w2-s3);
}
.s2-goal .s2-goal-hint {
  margin-left: var(--w2-s3); color: var(--w2-text-quiet); font-size: 12px; font-weight: 500;
}

/* Plateau is the only fire-colored state in Focus. */
.focus-v2 .s2-plt-plate {
  display: inline-flex; align-items: center; gap: var(--w2-s3); padding: var(--w2-s2) var(--w2-s4); border: 1px solid var(--w2-fire); border-radius: var(--w2-s3); background: rgba(241, 70, 44, .06); box-shadow: 0 0 18px rgba(241, 70, 44, .16);
}
.focus-v2 .s2-plt-plate .dot {
  width: var(--w2-s3); height: var(--w2-s3); flex-shrink: 0; border-radius: 50%; background: var(--w2-fire); box-shadow: 0 0 6px rgba(241, 70, 44, .42); animation: w2FocusPulse 1.4s ease-in-out infinite;
}
.focus-v2 .s2-plt-plate .plate-body {
  display: flex; flex-direction: column; min-width: 0; gap: var(--w2-s1);
}
.focus-v2 .s2-plt-plate .plate-name {
  color: var(--w2-text); font: 700 15px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-plt-plate .plate-desc {
  color: var(--w2-text-muted); font: 400 15px/1.45 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-group.s2-group-plt {
  border-color: rgba(241, 70, 44, .45); background: rgba(241, 70, 44, .06); box-shadow: 0 0 20px rgba(241, 70, 44, .12);
}
.focus-v2 .s2-group.s2-group-plt .s2-group-label, .focus-v2 .s2-plt-formula .delta {
  color: var(--w2-fire);
}
.focus-v2 .s2-group.s2-group-plt input.s2-input {
  border-color: var(--w2-fire); background: rgba(241, 70, 44, .04); box-shadow: 0 0 14px rgba(241, 70, 44, .12);
}
.focus-v2 .s2-plt-formula {
  display: flex; align-items: baseline; justify-content: center; gap: var(--w2-s2); margin-top: var(--w2-s2); color: var(--w2-text-muted); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
/* Duo timeline stays neutral; identity is carried by names and badges. */
.focus-v2 .s2-timeline {
  position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; height: 7%; gap: var(--w2-s3); padding: 0 var(--w2-s6); border-top: 1px solid var(--w2-line); background: var(--w2-surface);
}
.focus-v2 .s2-timeline :is(.tl-name, .tl-timer) {
  color: var(--w2-text); font: 700 15px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s2-timeline :is(.tl-state, .tl-max) {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s2-timeline .tl-bar {
  position: relative; flex: 1; height: var(--w2-s1); border-radius: 2px; background: var(--w2-line);
}
.focus-v2 .s2-timeline .tl-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--w2-lime); box-shadow: 0 0 8px rgba(200, 241, 53, .28);
}
.s5-action .btn .kbd, .s6-action .btn .kbd {
  margin-left: var(--w2-s2); padding: 2px var(--w2-s2);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--w2-s1);
  font: 700 11px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; opacity: .75;
}

/* S5 — solo rest, deliberately monochrome. */
.focus-v2 .s5-col {
  position: absolute; top: 8%; bottom: 2.5%; left: 50%; z-index: 2; display: flex; align-items: center; flex-direction: column; width: 62%; padding-top: var(--w2-s7); transform: translateX(-50%);
}
.focus-v2 .s5-label, .focus-v2 .s5-total, .focus-v2 .s5-next-label {
  color: var(--w2-text-quiet); font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s5-label {
  margin-bottom: var(--w2-s4);
}
.focus-v2 .s5-timer {
  margin-bottom: var(--w2-s5); color: var(--w2-text); font: 700 clamp(72px, 9.5vw, 180px)/.9 'Orbitron', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 24px rgba(255, 255, 255, .12);
}
.focus-v2 .s5-bar {
  width: 36vw; margin-bottom: var(--w2-s3);
}
.focus-v2 .s5-total {
  margin-bottom: var(--w2-s7);
}
.focus-v2 .s5-next-wrap {
  display: flex; align-items: center; flex-direction: column; gap: var(--w2-s2); padding: var(--w2-s4) var(--w2-s5); border: 1px solid var(--w2-line); border-radius: var(--w2-s4); background: var(--w2-surface);
}
.focus-v2 .s5-next-name {
  color: var(--w2-text); font: 600 17px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s5-next-meta {
  display: flex; gap: var(--w2-s3);
}
.focus-v2 .s5-next-meta .pill {
  display: flex; align-items: center; flex-direction: column; min-width: 96px; gap: var(--w2-s1); padding: var(--w2-s2) var(--w2-s3); border: 1px solid var(--w2-line); border-radius: var(--w2-s2); background: var(--w2-surface-raised);
}
.focus-v2 .s5-next-meta .lbl {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.focus-v2 .s5-next-meta .val {
  color: var(--w2-text); font: 700 15px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s5-next-gif {
  width: 17vw; margin-top: var(--w2-s2);
}
.focus-v2 .s5-action, .focus-v2 .s6-action {
  position: absolute; bottom: var(--w2-s5); left: 50%; z-index: 3; display: flex; align-items: center; gap: var(--w2-s3); transform: translateX(-50%);
}
.focus-v2 .s5-action .btn {
  display: flex; align-items: center; gap: var(--w2-s2); padding: var(--w2-s3) var(--w2-s5); border: 1px solid var(--w2-line); border-radius: var(--w2-s2); color: var(--w2-text-muted); background: var(--w2-surface); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s5-action .btn:hover {
  color: var(--w2-text); background: var(--w2-surface-raised);
}
.s5-action .btn.primary {
  border-color: transparent; background: var(--w2-lime); color: #101204;
}
.s5-action .btn.primary .kbd {
  border-color: rgba(16, 18, 4, .35); color: #101204;
}
.s5-action .btn.primary:hover {
  box-shadow: 0 0 14px rgba(200, 241, 53, .25);
}

/* Desktop distance scale. The middle value follows the functional 16:9 frame:
   min(Nvw, N * 16 / 9vh) is N percent of its actual letterboxed width. */
@media (min-width: 901px) and (min-height: 501px) {
  .focus-v2 .s2-top { gap: clamp(20px, min(1.3vw, 2.311vh), 28px); padding-inline: clamp(20px, min(1.5vw, 2.667vh), 32px); }
  .focus-v2 .fm-logo { width: clamp(36px, min(2.2vw, 3.911vh), 48px); height: clamp(36px, min(2.2vw, 3.911vh), 48px); }
  .focus-v2 .s2-progress { gap: clamp(12px, min(.8vw, 1.422vh), 18px); padding-block: clamp(12px, min(.85vw, 1.511vh), 18px); }
  .focus-v2 :is(.s2-seg-lbl, .s2-seg-cnt, .s2-finish-lbl, .s2-total .lbl) { font-size: clamp(11px, min(.7vw, 1.244vh), 14px); }
  .focus-v2 .s2-seg-track { height: clamp(6px, min(.45vw, .8vh), 9px); }
  .focus-v2 .s2-finish-dot { width: clamp(12px, min(.8vw, 1.422vh), 16px); height: clamp(12px, min(.8vw, 1.422vh), 16px); }
  .focus-v2 .s2-total .v { font-size: clamp(18px, min(1.25vw, 2.222vh), 26px); }
  .focus-v2 .fv2-close { width: clamp(40px, min(2.6vw, 4.622vh), 52px); height: clamp(40px, min(2.6vw, 4.622vh), 52px); }
  .focus-v2 .fv2-close svg { width: clamp(20px, min(1.25vw, 2.222vh), 26px); height: clamp(20px, min(1.25vw, 2.222vh), 26px); }
  .focus-v2 :is(.s1-side, .s2-side) { padding: clamp(16px, min(1.15vw, 2.044vh), 24px); }
  .focus-v2 :is(.s1-side, .s2-side) .dir,
  .focus-v2 :is(.s1-side .time, .s2-side .meta) { font-size: clamp(12px, min(.68vw, 1.209vh), 14px); }
  .focus-v2 :is(.s1-side, .s2-side) .name { font-size: clamp(15px, min(1vw, 1.778vh), 21px); }
  .focus-v2 .s1-col { top: 12%; bottom: 4%; width: 60%; }
  .focus-v2 .s1-name {
    margin-bottom: clamp(20px, min(1.5vw, 2.667vh), 32px); font-size: clamp(28px, min(3vw, 5.333vh), 58px);
  }
  .focus-v2 .s1-gif { width: clamp(320px, min(27vw, 48vh), 560px); }
  .focus-v2 .s1-bump { padding: clamp(8px, min(.55vw, .978vh), 12px) clamp(12px, min(.85vw, 1.511vh), 18px); font-size: clamp(12px, min(.7vw, 1.244vh), 14px); }
  .focus-v2 .s1-timer { font-size: clamp(48px, min(4.2vw, 7.467vh), 88px); }
  .focus-v2 .s1-bar { width: clamp(260px, min(22vw, 39.111vh), 440px); height: clamp(4px, min(.3vw, .533vh), 6px); }
  .focus-v2 :is(.s1-primary, .s15-primary, .s2-primary) {
    width: clamp(360px, min(26vw, 46.222vh), 480px); min-height: clamp(60px, min(4.2vw, 7.467vh), 82px); gap: clamp(12px, min(.85vw, 1.511vh), 18px);
    padding: clamp(16px, min(1.1vw, 1.956vh), 22px) clamp(20px, min(1.5vw, 2.667vh), 32px);
  }
  .focus-v2 :is(.s1-primary, .s15-primary, .s2-primary) .lbl { font-size: clamp(17px, min(1.15vw, 2.044vh), 23px); }
  .focus-v2 :is(.s1-primary, .s2-primary) .check { width: clamp(24px, min(1.55vw, 2.756vh), 32px); height: clamp(24px, min(1.55vw, 2.756vh), 32px); }
  .focus-v2 :is(.s1-secondary, .s2-secondary) { justify-content: center; width: auto; gap: clamp(12px, min(.8vw, 1.422vh), 16px); }
  .focus-v2 :is(.s1-sec-btn, .s2-sec-btn) {
    flex: 0 0 auto; height: clamp(48px, min(3.2vw, 5.689vh), 64px); gap: clamp(8px, min(.55vw, .978vh), 12px); padding-inline: clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 :is(.s1-sec-btn, .s2-sec-btn) :is(.lbl, .kbd) { font-size: clamp(12px, min(.7vw, 1.244vh), 15px); }
  .focus-v2 :is(.s1-sec-btn, .s2-sec-btn) .kbd { padding: clamp(4px, min(.3vw, .533vh), 6px) clamp(8px, min(.5vw, .889vh), 10px); }
  .focus-v2 :is(.s1-sec-btn, .s2-sec-btn) .icon {
    display: inline-flex; align-items: center; justify-content: center; width: clamp(16px, min(1.05vw, 1.867vh), 22px); height: clamp(16px, min(1.05vw, 1.867vh), 22px);
  }
  .focus-v2 .s15-col { top: 8%; bottom: 4%; width: 64%; }
  .focus-v2 .s15-done-title { font-size: clamp(30px, min(2.8vw, 4.978vh), 54px); }
  .focus-v2 .s15-done-sub { max-width: clamp(520px, min(42vw, 74.667vh), 760px); font-size: clamp(15px, min(1vw, 1.778vh), 20px); }
  .focus-v2 .s15-next {
    grid-template-columns: clamp(200px, min(20vw, 35.556vh), 360px) 1fr; width: clamp(680px, min(52vw, 92.444vh), 980px); gap: clamp(20px, min(1.6vw, 2.844vh), 32px);
    padding: clamp(20px, min(1.5vw, 2.667vh), 32px);
  }
  .focus-v2 .s15-next-name { font-size: clamp(17px, min(1.4vw, 2.489vh), 28px); }
  .focus-v2 .s15-next-meta, .focus-v2 .s15-hint { font-size: clamp(12px, min(.75vw, 1.333vh), 15px); }
  .focus-v2 .s2-col { top: 7.5%; bottom: 2.5%; width: 68%; }
  .focus-v2 .s2.s2-duo { padding-bottom: clamp(76px, min(6vw, 10.667vh), 116px); }
  .focus-v2 .s2.s2-duo .s2-col { bottom: clamp(76px, min(6vw, 10.667vh), 116px); }
  .focus-v2 .s2.s2-duo .s2-z1 { margin-bottom: clamp(10px, min(.7vw, 1.244vh), 14px); }
  .focus-v2 .s2.s2-duo :is(.s2-z2, .s2-z4, .s2-z5) { margin-bottom: clamp(8px, min(.55vw, .978vh), 12px); }
  .focus-v2 .s2.s2-duo :is(.s2-z3, .s2-z6) { margin-bottom: clamp(12px, min(.8vw, 1.422vh), 16px); }
  .focus-v2 .s2-z1 { margin-bottom: clamp(16px, min(1.3vw, 2.311vh), 26px); }
  .focus-v2 :is(.s2-z2, .s2-z4, .s2-z5) { margin-bottom: clamp(14px, min(1vw, 1.778vh), 20px); }
  .focus-v2 :is(.s2-z3, .s2-z6) { margin-bottom: clamp(18px, min(1.4vw, 2.489vh), 28px); }
  .focus-v2 .s2-header { gap: clamp(12px, min(.8vw, 1.422vh), 16px); padding: clamp(8px, min(.55vw, .978vh), 12px) clamp(16px, min(1.05vw, 1.867vh), 22px); }
  .focus-v2 .s2-header .avatar { width: clamp(36px, min(2.2vw, 3.911vh), 46px); height: clamp(36px, min(2.2vw, 3.911vh), 46px); }
  .focus-v2 .s2-header .who-name, .focus-v2 .s2-header .state-val { font-size: clamp(15px, min(1vw, 1.778vh), 20px); }
  .focus-v2 .s2-header .state-lbl { font-size: clamp(11px, min(.68vw, 1.209vh), 14px); }
  .focus-v2 .s2-name { font-size: clamp(26px, min(2.5vw, 4.444vh), 50px); }
  .focus-v2 .s2-stars .star { width: clamp(18px, min(1.2vw, 2.133vh), 24px); height: clamp(18px, min(1.2vw, 2.133vh), 24px); }
  .focus-v2 .s2-gif { width: clamp(240px, min(24vw, 42.667vh), 520px); }
  .focus-v2 .s2.s2-plain .s2-gif { width: clamp(280px, min(27vw, 48vh), 560px); }
  .focus-v2 .s2-stat-card {
    min-width: clamp(160px, min(11vw, 19.556vh), 220px); gap: clamp(8px, min(.55vw, .978vh), 12px);
    padding: clamp(12px, min(.9vw, 1.6vh), 18px) clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .s2-stat-card .stat-lbl { font-size: clamp(12px, min(.7vw, 1.244vh), 14px); }
  .focus-v2 .s2-stat-card .stat-val { font-size: clamp(15px, min(1.05vw, 1.867vh), 21px); }
  .focus-v2 .s2-stat-card .reps { font-size: clamp(16px, min(1.1vw, 1.956vh), 22px); }
  .focus-v2 .s2-controls { gap: clamp(16px, min(1.2vw, 2.133vh), 24px); }
  .focus-v2 .s2-group { padding: clamp(12px, min(.9vw, 1.6vh), 18px) clamp(16px, min(1.2vw, 2.133vh), 24px); }
  .focus-v2 .s2-group-label { margin-bottom: clamp(8px, min(.55vw, .978vh), 12px); font-size: clamp(12px, min(.72vw, 1.28vh), 15px); }
  .focus-v2 .s2-band-card {
    min-width: clamp(88px, min(6.2vw, 11.022vh), 124px); min-height: clamp(52px, min(4vw, 7.111vh), 76px); gap: clamp(4px, min(.3vw, .533vh), 6px);
    padding: clamp(10px, min(.65vw, 1.156vh), 14px) clamp(12px, min(.85vw, 1.511vh), 18px);
  }
  .focus-v2 .s2-band-card .name { font-size: clamp(15px, min(1vw, 1.778vh), 20px); }
  .focus-v2 .s2-band-card .stats { font-size: clamp(12px, min(.72vw, 1.28vh), 15px); }
  .focus-v2 input.s2-input {
    width: clamp(128px, min(9vw, 16vh), 180px); height: clamp(56px, min(4.2vw, 7.467vh), 84px); padding-inline: clamp(16px, min(1.1vw, 1.956vh), 22px);
    font-size: clamp(30px, min(2vw, 3.556vh), 42px);
  }
  .focus-v2 .s2-goal, .focus-v2 .s2-plt-plate {
    gap: clamp(8px, min(.55vw, .978vh), 12px); padding: clamp(10px, min(.7vw, 1.244vh), 14px) clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .s2-goal { font-size: clamp(15px, min(1.05vw, 1.867vh), 21px); }
  .focus-v2 .s2-goal .s2-goal-hint { font-size: clamp(12px, min(.75vw, 1.333vh), 15px); }
  .focus-v2 .s2-plt-plate .plate-name { font-size: clamp(15px, min(1.05vw, 1.867vh), 21px); }
  .focus-v2 .s2-plt-plate .plate-desc { font-size: clamp(15px, min(.95vw, 1.689vh), 19px); }
  .focus-v2 .s2-timeline {
    position: absolute; right: 0; bottom: 0; left: 0; min-height: clamp(64px, min(5vw, 8.889vh), 96px); height: auto; gap: clamp(14px, min(1.05vw, 1.867vh), 22px);
    padding-inline: clamp(24px, min(1.8vw, 3.2vh), 36px);
  }
  .focus-v2 .s2-timeline .tl-avatar { width: clamp(40px, min(2.6vw, 4.622vh), 54px); height: clamp(40px, min(2.6vw, 4.622vh), 54px); }
  .focus-v2 .s2-timeline :is(.tl-name, .tl-timer) { font-size: clamp(17px, min(1.4vw, 2.489vh), 28px); }
  .focus-v2 .s2-timeline :is(.tl-state, .tl-max) { font-size: clamp(11px, min(.72vw, 1.28vh), 15px); }
  .focus-v2 .s2-timeline .tl-bar { height: clamp(6px, min(.5vw, .889vh), 10px); }
  .focus-v2 .s5-col { top: 7.5%; bottom: 2.5%; width: 68%; padding-top: clamp(24px, min(1.8vw, 3.2vh), 36px); }
  .focus-v2 :is(.s5-label, .s5-total, .s5-next-label) { font-size: clamp(12px, min(.75vw, 1.333vh), 15px); }
  .focus-v2 .s5-timer { font-size: clamp(80px, min(9vw, 16vh), 184px); }
  .focus-v2 .s5-bar { width: clamp(420px, min(38vw, 67.556vh), 760px); height: clamp(5px, min(.35vw, .622vh), 7px); }
  .focus-v2 .s5-next-wrap {
    gap: clamp(8px, min(.55vw, .978vh), 12px); padding: clamp(16px, min(1.2vw, 2.133vh), 24px) clamp(24px, min(1.8vw, 3.2vh), 36px);
  }
  .focus-v2 .s5-next-name { font-size: clamp(17px, min(1.35vw, 2.4vh), 27px); }
  .focus-v2 .s5-next-meta .pill { min-width: clamp(96px, min(7vw, 12.444vh), 140px); padding: clamp(8px, min(.55vw, .978vh), 12px) clamp(12px, min(.9vw, 1.6vh), 18px); }
  .focus-v2 .s5-next-meta .lbl { font-size: clamp(11px, min(.65vw, 1.156vh), 13px); }
  .focus-v2 .s5-next-meta .val { font-size: clamp(15px, min(1vw, 1.778vh), 20px); }
  .focus-v2 .s5-next-gif { width: clamp(240px, min(19vw, 33.778vh), 380px); }
  .focus-v2 .s5-action .btn {
    min-height: clamp(48px, min(3.2vw, 5.689vh), 64px); gap: clamp(8px, min(.55vw, .978vh), 12px); padding-inline: clamp(20px, min(1.5vw, 2.667vh), 30px);
    font-size: clamp(12px, min(.8vw, 1.422vh), 16px);
  }
  .focus-v2 :is(.s5-action .btn .kbd, .s6-action .btn .kbd) { font-size: clamp(11px, min(.68vw, 1.209vh), 14px); }
}

/* Semantic groups enter on the W2 spring with an 80ms stagger. */
.focus-v2 :is(.s1-top-cluster, .s15-confirm, .s2-header, .s5-label, .s6-check, .spr-header) {
  animation: w2FocusEnter 300ms cubic-bezier(.2, .9, .2, 1) backwards;
}
.focus-v2 :is(.s1-mid-cluster, .s15-next-wrap, .s2-name-row, .s5-timer, .s6-time-wrap, .spr-card) {
  animation: w2FocusEnter 300ms cubic-bezier(.2, .9, .2, 1) 80ms backwards;
}
.focus-v2 :is(.s1-action, .s15-action, .s2-action, .s5-next-wrap, .s6-records, .s6-duo-grid, .spr-loader) {
  animation: w2FocusEnter 300ms cubic-bezier(.2, .9, .2, 1) 160ms backwards;
}
/* Non-blocking completion marker. */
.focus-v2 .fv2-ex-done-mini {
  position: absolute; top: var(--w2-s3); left: 50%; z-index: 10;
  display: inline-flex; align-items: center; max-width: 78%; gap: var(--w2-s2); overflow: hidden;
  padding: var(--w2-s2) var(--w2-s4); border: 1px solid rgba(200, 241, 53, .45); border-radius: 999px;
  color: var(--w2-lime); background: rgba(22, 24, 26, .9); box-shadow: 0 0 20px rgba(200, 241, 53, .18);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translate(-50%, -6px);
  transition-property: opacity, transform; transition-duration: 240ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.focus-v2 .fv2-ex-done-mini.show {
  opacity: 1; transform: translate(-50%, 0);
}
.focus-v2 .fv2-ex-done-mini .ic {
  display: inline-flex; align-items: center; justify-content: center; width: var(--w2-s5); height: var(--w2-s5); flex-shrink: 0; border-radius: 50%; color: #101204; background: var(--w2-lime);
}
.focus-v2 .fv2-ex-done-mini .txt {
  overflow: hidden; text-overflow: ellipsis;
}
.focus-v2 .fv2-ex-done-mini .done-suffix {
  color: rgba(200, 241, 53, .7);
}
@keyframes w2FocusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.76); }
}
@keyframes w2FocusDots {
  0%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes w2FocusEnter {
  0% { opacity: 0; transform: scale(.98); }
  72% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
/* Tablet, phone and short landscape: full viewport replaces the letterbox. */
@media (max-width: 900px), (max-height: 500px) {
  body:has(.focus-v2.active) :is(.sf-tbar, .xp-user-widget, #xp-sync-status) {
    display: none !important;
  }
  .focus-v2 :is(.s1, .s15) {
    overflow-y: auto;
  }
  body:has(.focus-v2.active) .screen {
    padding-bottom: 0 !important;
  }
  .focus-v2 {
    z-index: 99999 !important;
  }
  .focus-v2 > .s1, .focus-v2 > .s15, .focus-v2 > .s2, .focus-v2 > .s5, .focus-v2 > .s6 {
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
  }
  .focus-v2 .fv2-close, .focus-v2 .fv2-close.fv2-close-out {
    position: fixed; top: auto; right: var(--w2-s4); bottom: var(--w2-s4); z-index: 100001;
  }
  .focus-v2 :is(.s1-side, .s2-side) {
    display: none;
  }
  .focus-v2 .s2-top {
    height: auto; min-height: var(--w2-s8); gap: var(--w2-s2); padding: var(--w2-s2) var(--w2-s3);
  }
  .focus-v2 .fm-logo, .focus-v2 .s2-divider {
    display: none;
  }
  .focus-v2 .s2-progress {
    gap: var(--w2-s2); padding: 0;
  }
  .focus-v2 .s2-seg-head {
    gap: var(--w2-s1); margin-bottom: var(--w2-s1);
  }
  .focus-v2 :is(.s2-seg-lbl, .s2-seg-cnt, .s2-finish-lbl, .s2-total .lbl) {
    font-size: 9px; letter-spacing: .04em;
  }
  .focus-v2 .s2-seg-track {
    height: var(--w2-s1);
  }
  .focus-v2 .s2-finish {
    gap: var(--w2-s1);
  }
  .focus-v2 .s2-finish-dot {
    width: var(--w2-s2); height: var(--w2-s2);
  }
  .focus-v2 .s2-total .v {
    font-size: 14px;
  }
  .focus-v2 .s1-pips {
    top: var(--w2-s9);
  }
  .focus-v2 .s1-pips .p {
    width: var(--w2-s6);
  }
  .focus-v2 .s1-col, .focus-v2 .s15-col {
    top: 9%; bottom: var(--w2-s3); width: 90%;
  }
  .focus-v2 .s1-name {
    margin-bottom: var(--w2-s2);
  }
  .focus-v2 .s1-gif {
    width: min(75vw, 280px);
  }
  .focus-v2 .s1-timer {
    margin-bottom: var(--w2-s2); font-size: 56px;
  }
  .focus-v2 .s1-bar {
    width: 200px;
  }
  .focus-v2 :is(.s1-primary, .s15-primary, .s2-primary) {
    width: min(260px, 78vw);
  }
  .focus-v2 .s1-secondary {
    width: min(280px, 84vw); gap: var(--w2-s2);
  }
  .focus-v2 :is(.s1-sec-btn .kbd, .s15-hint) {
    display: none;
  }
  .focus-v2 .s15-confirm, .focus-v2 .s15-next-wrap, .focus-v2 .s15-action {
    gap: var(--w2-s2);
  }
  .focus-v2 .s15-done-title {
    font-size: 26px;
  }
  .focus-v2 .s15-done-sub {
    max-width: 90%; font-size: 13px;
  }
  .focus-v2 .s15-next {
    grid-template-columns: 100px 1fr; width: 100%; gap: var(--w2-s3); padding: var(--w2-s3);
  }
  .focus-v2 .s2-col {
    top: var(--w2-s9); right: -20px; bottom: var(--w2-s2); left: 4%; width: auto; padding-right: var(--w2-s6); padding-bottom: var(--w2-s3); overflow-y: auto; overflow-x: hidden; transform: none;
  }
  .focus-v2 .s2.s2-duo .s2-col {
    bottom: calc(var(--w2-s9) + var(--w2-s1));
  }
  .focus-v2 .s2-z1, .focus-v2 .s2-z2, .focus-v2 .s2-z3, .focus-v2 .s2-z4, .focus-v2 .s2-z5, .focus-v2 .s2-z6 {
    margin-bottom: var(--w2-s2);
  }
  .focus-v2 .s2-gif, .focus-v2 .s2.s2-plain .s2-gif {
    width: min(70vw, 280px);
  }
  .focus-v2 .s2-stats, .focus-v2 .s2-controls, .focus-v2 .s2-bands {
    flex-wrap: wrap; gap: var(--w2-s2);
  }
  .focus-v2 .s2-stat-card {
    min-width: 120px; padding: var(--w2-s2) var(--w2-s3);
  }
  .focus-v2 .s2-group {
    width: 100%; padding: var(--w2-s2) var(--w2-s3);
  }
  .focus-v2 input.s2-input {
    width: 100%; height: 56px;
  }
  .focus-v2 .s2-goal, .focus-v2 .s2-plt-plate {
    max-width: 100%; padding: var(--w2-s2) var(--w2-s3); text-align: center;
  }
  .focus-v2 .s2-timeline {
    min-height: 44px; height: auto; gap: var(--w2-s2); padding: var(--w2-s2) calc(var(--w2-s9) + var(--w2-s2)) var(--w2-s2) var(--w2-s3);
  }
  .focus-v2 .s2-timeline .tl-avatar {
    width: var(--w2-s6); height: var(--w2-s6);
  }
  .focus-v2 .s2-timeline :is(.tl-name, .tl-timer) {
    font-size: 13px;
  }
  .focus-v2 .s2-timeline :is(.tl-state, .tl-max) {
    font-size: 9px;
  }
  .focus-v2 .s5-col, .focus-v2 .s6-col, .focus-v2 .s6-col.s6-duo {
    top: var(--w2-s9); bottom: calc(var(--w2-s7) + var(--w2-s7)); width: 92%; padding-top: var(--w2-s3); overflow-y: auto;
  }
  .focus-v2 .s5-timer {
    margin-bottom: var(--w2-s3); font-size: clamp(64px, 22vw, 112px);
  }
  .focus-v2 .s5-bar {
    width: min(72vw, 320px);
  }
  .focus-v2 .s5-total {
    margin-bottom: var(--w2-s4);
  }
  .focus-v2 .s5-next-wrap {
    max-width: 90%; padding: var(--w2-s3);
  }
  .focus-v2 .s5-next-gif {
    width: min(54vw, 220px);
  }
  .focus-v2 :is(.s5-action, .s6-action) {
    bottom: var(--w2-s3); gap: var(--w2-s2);
  }
  .focus-v2 .s6-check {
    width: var(--w2-s8); height: var(--w2-s8); margin-bottom: var(--w2-s2);
  }
  .focus-v2 .s6-title-sub, .focus-v2 .s6-time-wrap {
    margin-bottom: var(--w2-s3);
  }
  .focus-v2 .s6-records {
    flex-wrap: wrap; justify-content: center;
  }
  .focus-v2 .s6-record {
    min-width: 140px; padding: var(--w2-s3);
  }
  .focus-v2 .s6-duo-grid {
    grid-template-columns: 1fr; gap: var(--w2-s2);
  }
  .focus-v2 .s6-duo-label {
    grid-column: 1;
  }
  .focus-v2 .s6-player-col {
    padding: var(--w2-s3);
  }
  .focus-v2 .spr {
    overflow-y: auto; overflow-x: hidden;
  }
  .focus-v2 .spr-col {
    top: 8%; bottom: 3%; width: 92%; justify-content: center; gap: var(--w2-s5);
  }
  .focus-v2 .spr-title {
    font-size: 36px;
  }
  .focus-v2 .spr-bolt {
    width: var(--w2-s7); height: var(--w2-s7);
  }
  .focus-v2 .spr-card {
    grid-template-columns: 110px 1fr; width: 90%; gap: var(--w2-s3); padding: var(--w2-s3); border-radius: var(--w2-s4);
  }
  .focus-v2 .spr-ex-name {
    font-size: 17px;
  }
  .focus-v2 .spr-val-col.new .v-val {
    font-size: 20px;
  }
  .focus-v2 .spr-bar {
    width: 200px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-v2 *, .focus-v2 *::before, .focus-v2 *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}