.runner {
  position: relative; isolation: isolate; block-size: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--gap);
  padding-block: calc(112px + var(--safe-t)) max(8px, var(--safe-b));
  padding-inline: max(12px, var(--safe-s)) max(12px, var(--safe-e));
  background: var(--bg); color: var(--text);
}
.disc { position: absolute; inset-block-start: calc(16px + var(--safe-t)); inset-inline-start: max(16px, var(--safe-s)); display: flex; align-items: center; gap: 10px; }
.disc__svg { inline-size: 64px; block-size: 64px; transform: rotate(-90deg) scaleY(-1); }
.disc__arc, .disc__track { fill: none; stroke-width: 10; }
.disc__track { stroke: var(--border); }
.disc__arc { stroke: var(--accent); }
.disc__digits { font-size: clamp(20px, 5vw, 44px); font-variant-numeric: tabular-nums; font-weight: 650; }
.runner-dots { position: absolute; inset-block-start: calc(38px + var(--safe-t)); inset-inline-end: max(16px, var(--safe-e)); display: flex; gap: 7px; }
.runner-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid var(--accent); }
.runner-dot[data-done="true"] { background: var(--accent); }
.runner-steps { flex: 1; min-block-size: 0; display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; overscroll-behavior: contain; }
.step { position: relative; isolation: isolate; overflow: hidden; flex: 1 0 80px; min-block-size: 80px; inline-size: 100%; border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); padding-block: 8px; padding-inline: 12px; text-align: start; }
.step[data-active="true"] { flex-grow: 3; min-block-size: 25dvh; border-color: var(--accent); }
.step[data-next="true"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.step__fill { position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; inline-size: 100%; background: var(--accent-soft); transform-origin: left center; transform: scaleX(var(--fill, 0)); will-change: transform; }
.step:dir(rtl) .step__fill { transform-origin: right center; }
.step__content { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); }
.step__title { font-size: clamp(16px, 3vw, 28px); font-weight: 650; overflow-wrap: anywhere; flex: 1; }
.step__emoji { font-size: clamp(32px, 6vw, 64px); line-height: 1.2; }
.step[data-active="true"] .step__title { font-size: clamp(22px, 5.7vw, 54px); font-weight: 800; }
.step[data-active="true"] .step__emoji { font-size: clamp(52px, 13.7vw, 130px); }
.step__check { visibility: hidden; font-size: 1.3rem; }
.step[data-state="done"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step[data-state="done"] .step__check { visibility: visible; }
.step[data-state="overrun"] { --accent: var(--overrun); background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--overrun) 8%, transparent) 7px 14px); }
.step__badge { display: block; font-size: .8rem; color: var(--overrun); margin-block-start: 4px; }
.step[data-flash="true"] { outline: 4px solid var(--done); outline-offset: -6px; }
.runner[data-motion="full"] .step[data-flash="true"] { animation: step-pulse 180ms cubic-bezier(.2,.9,.3,1); }
.runner[data-literacy="icon"] .step__title { display: none; }
.runner[data-literacy="icon"] .step__content { justify-content: center; }
.runner[data-literacy="icon"] .step__emoji { font-size: clamp(70px, 15vw, 160px); }
.runner[data-literacy="text"] .step__emoji { font-size: 1.5em; }
.runner-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.runner-pause, .runner-exit { min-inline-size: 80px; min-block-size: 80px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: var(--radius); padding: 8px; }
.runner-exit { max-inline-size: 8rem; user-select: none; -webkit-user-select: none; }
.runner-reserve { font-size: .85rem; font-variant-numeric: tabular-nums; text-align: center; }
.sound-indicator { position: absolute; inset-block-start: calc(82px + var(--safe-t)); inset-inline-start: max(16px, var(--safe-s)); font-size: .8rem; color: var(--text-dim); border: 0; padding: 4px; background: var(--bg); }
.runner-status:empty, .runner-message:empty { display: none; }
.runner-status, .runner-message, .runner-paused { font-size: .9rem; text-align: center; }
.runner-status { color: var(--overrun); }
.runner-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.runner-finish h1 { font-size: 1.3rem; }
.boundary { flex: 0 0 auto; padding: 12px; border: 2px solid var(--overrun); border-radius: var(--radius); background: var(--surface); }
.boundary p { text-align: center; margin-block-end: 8px; }
.boundary-actions { flex-wrap: nowrap; }
.boundary-actions .button { flex: 1; min-block-size: 80px; padding: 8px; }
.confetti { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 10; }
@keyframes step-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .runner *, .runner *::before { animation: none !important; transition: none !important; } }

.step[data-state="skipped"] .step__check { visibility: visible; }
.runner-dot[data-skipped="true"] { border-style: dashed; }