.sr-frame{position:relative;isolation:isolate;inline-size:100%;block-size:clamp(520px,calc(100svh - 120px),780px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;border-radius:var(--radius-card);background:color-mix(in srgb,var(--accent-primary) 3%,var(--content-bg));border:1px solid var(--border-default);overflow:hidden;container:sr-frame/inline-size}.sr-frame:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--accent-primary) 9%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask:linear-gradient(180deg,transparent 0,var(--text-primary) 110px,var(--text-primary) 70%,transparent);mask:linear-gradient(180deg,transparent 0,var(--text-primary) 110px,var(--text-primary) 70%,transparent)}.sr-frame--calm{background:var(--content-bg)}.sr-frame--calm:before{display:none}.sr-frame--page{block-size:auto}.sr-top{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16) 0;min-inline-size:0}.sr-top__trail{flex:1;min-inline-size:0}.sr-trail{align-items:center;gap:var(--space-8);block-size:34px}.sr-trail,.sr-trail__beads{display:flex;min-inline-size:0}.sr-trail__beads{position:relative;flex:1;gap:3px;block-size:10px}.sr-trail__bead{position:relative;flex:1 1 0;min-inline-size:2px;border-radius:999px;background:var(--kit-track);overflow:hidden}.sr-trail__bead:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bead,var(--accent-primary));transform:scaleX(0);transform-origin:left;transition:transform calc(.6s * var(--kit-dur)) var(--ease-spring)}.sr-trail__bead:is(.is-ok,.is-no,.is-part,.is-seen,.is-flag):after{transform:scaleX(1)}.sr-trail__bead.is-ok{--bead:color-mix(in srgb,var(--qs-status-mastered) 88%,var(--text-primary))}.sr-trail__bead.is-no{--bead:color-mix(in srgb,var(--qs-status-unfamiliar) 55%,var(--surface-elevated))}.sr-trail__bead.is-part{--bead:color-mix(in srgb,var(--qs-status-learning) 80%,var(--surface-elevated))}.sr-trail__bead.is-seen{--bead:color-mix(in srgb,var(--accent-primary) 45%,var(--surface-elevated))}.sr-trail__bead.is-flag{--bead:color-mix(in srgb,var(--palette-orange) 70%,var(--surface-elevated))}.sr-trail__bead.is-now{box-shadow:inset 0 0 0 2px var(--kit-ink)}.sr-trail__bead.is-retry{background:repeating-linear-gradient(-45deg,var(--kit-track) 0 4px,color-mix(in srgb,var(--qs-status-learning) 45%,var(--kit-track)) 4px 7px)}.sr-trail__rider{position:absolute;inset-block-start:-12px;margin-inline-start:-15px;pointer-events:none;transition:inset-inline-start calc(.6s * var(--kit-dur)) var(--ease-spring)}.sr-trail__rider,.sr-trail__rider svg{inline-size:30px;block-size:30px}.sr-trail__rider.is-hop svg{animation:sr-hop calc(.52s * var(--kit-dur)) var(--ease-spring)}@keyframes sr-hop{35%{transform:translateY(calc(-9px * var(--kit-amp))) rotate(-6deg)}70%{transform:translateY(1px)}}.sr-trail__end{position:relative;inline-size:28px;block-size:28px;flex:none;display:grid;place-items:center}.sr-trail__slot.is-closed{background:color-mix(in srgb,var(--kit-ink) 18%,var(--surface-elevated))}.sr-trail__slot{inline-size:24px;block-size:24px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--border-default) 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,transparent 9px,var(--text-primary) 10px);mask:radial-gradient(circle,transparent 9px,var(--text-primary) 10px)}.sr-goal{display:inline-flex;align-items:center;gap:var(--space-8);block-size:36px;padding:0 var(--space-12) 0 3px;border-radius:999px;background:var(--surface-elevated);border:1px solid var(--border-default);font-size:var(--text-caption);color:var(--text-secondary)}.sr-goal__lbl{display:grid;line-height:1.15}.sr-goal__lbl b{color:var(--text-primary);font-variant-numeric:tabular-nums}.sr-goal__lbl small{font-size:var(--text-micro);color:var(--text-muted)}.sr-goal.is-met{border-color:color-mix(in srgb,var(--qs-status-mastered) 55%,var(--border-default))}@container sr-frame (max-width: 560px){.sr-goal__lbl{display:none}.sr-goal{padding-inline-end:3px}}.sr-sub{justify-content:space-between;flex-wrap:wrap;padding:var(--space-4) var(--space-16) var(--space-8)}.sr-sub,.sr-sub__title{display:flex;align-items:center;gap:var(--space-8);min-inline-size:0}.sr-sub__title{color:var(--accent-primary)}.sr-sub__title>span{display:grid;min-inline-size:0}.sr-sub__title b{font-size:var(--text-body);color:var(--text-primary)}.sr-sub__title b,.sr-sub__title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-sub__title small{font-size:var(--text-micro);color:var(--text-muted)}.sr-sub__modes{max-inline-size:100%;overflow-x:auto;scrollbar-width:none}.sr-sub__tools{display:flex;align-items:center;gap:var(--space-4)}.sr-sound{position:relative}.sr-sound.is-muted{color:var(--text-secondary)}.sr-sound.is-muted:after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:22%;inline-size:56%;block-size:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg);pointer-events:none}.sr-flow{display:inline-flex;align-items:center;gap:var(--space-8);block-size:32px;padding:0 var(--space-12) 0 var(--space-8);border-radius:999px;background:var(--surface-elevated);border:1px solid var(--border-default);font-size:var(--text-caption);color:var(--text-muted);transition:background-color calc(.3s * var(--kit-dur)) ease,border-color calc(.3s * var(--kit-dur)) ease,opacity calc(.3s * var(--kit-dur)) ease}.sr-flow__pips{display:inline-flex;gap:3px}.sr-flow__pips i{inline-size:6px;block-size:14px;border-radius:3px;background:var(--kit-track)}.sr-flow__pips i.is-on{background:var(--flow,var(--palette-teal));animation:sr-pip calc(.45s * var(--kit-dur)) var(--ease-spring)}@keyframes sr-pip{40%{transform:scaleY(calc(1 + .3 * var(--kit-amp)))}}.sr-flow b{color:var(--text-primary);font-variant-numeric:tabular-nums;min-inline-size:1.4ch}.sr-flow.is-tier1{--flow:var(--palette-teal);border-color:color-mix(in srgb,var(--palette-teal) 45%,var(--border-default));color:var(--text-secondary)}.sr-flow.is-tier2{--flow:var(--accent-primary);border-color:color-mix(in srgb,var(--accent-primary) 45%,var(--border-default));background:color-mix(in srgb,var(--accent-primary) 7%,var(--surface-elevated));color:var(--text-secondary)}.sr-flow.is-tier3{--flow:var(--palette-purple);border-color:color-mix(in srgb,var(--palette-purple) 50%,var(--border-default));background:color-mix(in srgb,var(--palette-purple) 9%,var(--surface-elevated));color:var(--text-primary)}.sr-flow.is-paused{opacity:.6}@container sr-frame (max-width: 560px){.sr-flow__name{display:none}}.sr-stage{position:relative;container:sr-stage/size;display:grid;align-content:safe center;justify-items:center;gap:var(--space-12);padding:var(--space-8) clamp(12px,2.4vw,28px) var(--space-12);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-block-size:0}.sr-stage>*{min-inline-size:0;max-inline-size:100%}.sr-frame--page .sr-stage{container:sr-stage/inline-size;overflow:visible;align-content:start}.sr-companion{position:absolute;inset-inline-start:clamp(8px,2vw,20px);inset-block-end:var(--space-8);z-index:3;display:flex;align-items:flex-end;gap:var(--space-4);pointer-events:none}.sr-companion__octo svg{inline-size:52px;block-size:52px}.sr-companion__octo.is-cheer svg{animation:sr-cheer calc(.7s * var(--kit-dur)) var(--ease-spring)}.sr-companion__octo.is-encourage svg{animation:sr-lean calc(.7s * var(--kit-dur)) ease}.sr-companion__octo.is-party svg{animation:sr-party calc(1.1s * var(--kit-dur)) var(--ease-spring)}.sr-companion__octo.is-think svg{animation:sr-think calc(.9s * var(--kit-dur)) ease}@keyframes sr-cheer{30%{transform:translateY(calc(-14px * var(--kit-amp))) rotate(-8deg) scale(1.06)}60%{transform:translateY(2px) scale(.98,1.03)}}@keyframes sr-lean{35%{transform:translateX(4px) rotate(6deg)}70%{transform:translateX(2px) rotate(2deg)}}@keyframes sr-party{20%{transform:translateY(calc(-18px * var(--kit-amp))) rotate(-10deg)}45%{transform:rotate(8deg)}70%{transform:translateY(calc(-8px * var(--kit-amp))) rotate(-4deg)}}@keyframes sr-think{40%,70%{transform:rotate(-9deg) translateX(-2px)}}.sr-companion__say{margin-block-end:36px;max-inline-size:170px;padding:6px 10px;border-radius:14px 14px 14px 4px;background:var(--surface-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-1);font-size:var(--text-caption);color:var(--text-primary);animation:sr-say calc(.35s * var(--kit-dur)) var(--ease-spring)}@keyframes sr-say{0%{opacity:0;transform:translateY(6px) scale(.96)}}.sr-frame.is-finished .sr-companion{display:none}@container sr-stage (max-height: 420px){.sr-companion{display:none}}@container sr-frame (max-width: 560px){.sr-companion{display:none}}.sr-dock{position:relative;z-index:4;padding:var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));border-block-start:1px solid var(--border-subtle);background:color-mix(in srgb,var(--surface-elevated) 92%,transparent);transition:background-color calc(.3s * var(--kit-dur)) ease}.sr-dock.is-ok{background:var(--qs-correct-tint);border-color:color-mix(in srgb,var(--qs-correct-border) 35%,transparent)}.sr-dock.is-no{background:var(--qs-incorrect-tint);border-color:color-mix(in srgb,var(--qs-incorrect-border) 30%,transparent)}.sr-dock.is-part{background:color-mix(in srgb,var(--qs-status-learning) 12%,var(--surface-elevated))}.sr-dock__in{max-inline-size:920px;margin-inline:auto;justify-content:space-between}.sr-dock__in,.sr-verdict{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap}.sr-verdict{inline-size:100%}.sr-verdict__main{display:flex;gap:var(--space-12);align-items:flex-start;flex:1;min-inline-size:0;animation:sr-up calc(.42s * var(--kit-dur)) var(--ease-spring)}@keyframes sr-up{0%{transform:translateY(14px);opacity:0}}.sr-verdict__badge{position:relative;inline-size:34px;block-size:34px;flex:none;display:grid;place-items:center;border-radius:11px;color:var(--text-on-accent);box-shadow:0 3px 0 var(--badge-base);background:var(--badge)}.sr-verdict__main.is-ok .sr-verdict__badge{--badge:var(--qs-correct-border);--badge-base:color-mix(in srgb,var(--qs-correct-border) 55%,var(--text-primary))}.sr-verdict__main.is-no .sr-verdict__badge{--badge:var(--qs-incorrect-border);--badge-base:color-mix(in srgb,var(--qs-incorrect-border) 55%,var(--text-primary))}.sr-verdict__main.is-part .sr-verdict__badge{--badge:var(--palette-orange);--badge-base:color-mix(in srgb,var(--palette-orange) 55%,var(--text-primary))}.sr-verdict__mark{inline-size:22px;block-size:22px}.sr-verdict__text{display:grid;gap:2px;min-inline-size:0}.sr-verdict__title{font-size:var(--text-body)}.sr-verdict__main.is-ok .sr-verdict__title{color:var(--qs-correct-text)}.sr-verdict__main.is-no .sr-verdict__title{color:var(--qs-incorrect-text)}.sr-verdict__main.is-part .sr-verdict__title{color:var(--text-warning)}.sr-verdict__body{font-size:var(--text-caption);color:var(--text-secondary);line-height:1.5}.sr-verdict__more{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-block-start:var(--space-4)}.sr-verdict__actions{display:flex;gap:var(--space-8);margin-inline-start:auto}@container sr-frame (max-width: 520px){.sr-verdict__body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.sr-verdict__more{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}.sr-finish{inline-size:100%;max-inline-size:920px;display:grid;gap:var(--space-16);align-items:center}@container sr-stage (min-width: 720px){.sr-finish{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.sr-finish__l,.sr-finish__r{display:grid;gap:var(--space-12);min-inline-size:0}.sr-finish__hero{display:grid;gap:var(--space-4);justify-items:start}@container sr-stage (max-width: 719px){.sr-finish__hero{justify-items:center;text-align:center}.sr-finish__acts{justify-content:center}}.sr-finish__octo svg{inline-size:clamp(52px,15cqh,88px);block-size:clamp(52px,15cqh,88px)}.sr-finish__octo.is-party svg{animation:sr-party calc(1.1s * var(--kit-dur)) var(--ease-spring)}.sr-finish__title{margin:0;font-size:clamp(20px,5cqh,27px);font-weight:600;letter-spacing:-.03em;text-wrap:balance}.sr-finish__sub{margin:0;font-size:var(--text-caption);color:var(--text-secondary)}.sr-finish__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}@container sr-stage (max-width: 520px){.sr-finish__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}.sr-stat{display:grid;justify-items:center;gap:2px;padding:var(--space-8) var(--space-4);border-radius:14px;background:var(--surface-elevated);border:1px solid var(--border-default);color:var(--accent-primary);animation:sr-in calc(.55s * var(--kit-dur)) var(--ease-spring) both;animation-delay:calc(var(--i, 0) * 70ms * var(--kit-dur))}.sr-stat b{font-size:18px;color:var(--text-primary);font-variant-numeric:tabular-nums}.sr-stat small{font-size:var(--text-micro);color:var(--text-muted)}.sr-stat.is-best{border-color:color-mix(in srgb,var(--qs-status-mastered) 50%,var(--border-default));background:color-mix(in srgb,var(--qs-status-mastered) 7%,var(--surface-elevated))}@keyframes sr-in{0%{opacity:0;transform:translateY(10px) scale(.96)}}.sr-finish__acts{display:flex;flex-wrap:wrap;gap:var(--space-8)}.sr-finish__note{font-size:var(--text-caption);color:var(--text-secondary)}.sr-moves{list-style:none;margin:0;padding:0;display:grid;gap:6px}.sr-move{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-12);align-items:center;padding:6px 10px;border-radius:12px;background:var(--surface-elevated);border:1px solid var(--border-subtle);font-size:var(--text-caption);animation:sr-in calc(.5s * var(--kit-dur)) var(--ease-spring) both;animation-delay:calc((.3s + var(--i, 0) * 60ms) * var(--kit-dur))}.sr-move__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-move__strands{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted)}.sr-move__lv,.sr-move__more{font-size:var(--text-micro);color:var(--text-muted)}.sr-move__more{padding-inline-start:10px}@media (prefers-reduced-motion:reduce){.sr-frame *,.sr-frame :after,.sr-frame :before{animation-duration:0s!important;transition-duration:0s!important}}