.practice__option{cursor:pointer;display:block}.practice__chip{border:1px solid var(--color-hairline-input);background:var(--color-canvas);min-height:2.75rem;color:var(--color-ink);font-size:var(--text-body-lg);border-radius:9999px;justify-content:center;align-items:center;padding:.5rem 1rem;transition:border-color .15s,background-color .15s,color .15s;display:flex}.practice__option:hover .practice__chip{border-color:var(--color-primary)}.practice__option:focus-within .practice__chip{outline:2px solid var(--color-primary);outline-offset:2px}.practice__option:has(input:checked[data-correct]) .practice__chip,[data-practice]:has(input:checked) .practice__option:has(input[data-correct]) .practice__chip{border-color:var(--color-primary);background:var(--color-primary-subdued);color:var(--color-primary-press)}.practice__option:has(input:checked:not([data-correct])) .practice__chip{border-color:var(--color-ruby-text);color:var(--color-ruby-text);background:var(--color-canvas)}.practice__option[data-state=right] .practice__chip{border-color:var(--color-primary);background:var(--color-primary-subdued);color:var(--color-primary-press)}.practice__option[data-state=wrong] .practice__chip{border-color:var(--color-ruby-text);color:var(--color-ruby-text);background:var(--color-canvas)}.practice__tally--right{color:var(--color-primary-press)}.practice__tally--wrong{color:var(--color-ruby-text)}.practice__verdict,.practice__explain{font-size:var(--text-body-md);display:none}.practice__verdict{font-size:var(--text-body-lg);align-items:center;gap:.5rem}.practice__verdict--right{color:var(--color-primary-press)}.practice__verdict--wrong{color:var(--color-ruby-text)}.practice__explain{color:var(--color-ink-secondary);margin-top:.5rem}[data-practice]:has(input:checked[data-correct]) .practice__verdict--right,[data-practice]:has(input:checked:not([data-correct])) .practice__verdict--wrong,[data-practice][data-answered=right] .practice__verdict--right,[data-practice][data-answered=wrong] .practice__verdict--wrong{display:flex}[data-practice]:has(input:checked) .practice__explain,[data-practice][data-answered] .practice__explain{display:block}.practice__result{min-height:3.5rem}.practice__next{min-height:2.75rem;color:var(--color-primary-press);font-size:var(--text-button-sm);visibility:hidden;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;display:inline-flex}[data-practice]:has(input:checked) .practice__next,[data-practice][data-answered] .practice__next{visibility:visible}.practice__next:hover{background:var(--color-primary-subdued)}@supports not selector(:has(*)){.practice__explain{display:block}}.stories{grid-template-columns:minmax(0,1fr);gap:1.5rem;display:grid}@media (min-width:768px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}.story--lead{grid-column:1/-1}}.story{border:1px solid var(--color-hairline);border-radius:var(--radius-xl);background:var(--color-canvas);min-width:0;box-shadow:var(--shadow-level-1);flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}@media (min-width:1024px){.story{padding:2rem}.story--lead .story-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:2.5rem;display:grid}}.story-body{flex-direction:column;gap:1.5rem;display:flex}.story-stage{isolation:isolate;border-radius:var(--radius-lg);background:color-mix(in oklab, var(--accent) 9%, var(--color-canvas-soft));padding:1rem;position:relative;overflow:hidden}.story-stage:before{content:"";z-index:-1;aspect-ratio:1;background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 34%, transparent), transparent);filter:blur(8px);border-radius:9999px;width:70%;position:absolute;inset:-45% -25% auto auto}.story-points{gap:1rem;display:grid}.story-points li{border-inline-start:2px solid color-mix(in oklab, var(--accent) 55%, var(--color-hairline));padding-inline-start:1rem}.story-svg{width:100%;height:auto;color:var(--color-ink);display:block}.story-svg text{stroke:none;fill:var(--color-ink);font-variant-numeric:tabular-nums;font-family:inherit}.story-svg .sa-tm{fill:var(--color-ink-mute)}.story-svg .sa-t-ruby{fill:var(--color-ruby-text)}.story-svg .sa-t-primary{fill:var(--color-primary)}.story-svg .sa-t-accent{fill:var(--accent)}.story-svg .sa-t-magenta{fill:var(--color-magenta)}.story-svg .sa-ink{stroke:var(--color-ink)}.story-svg .sa-faint{stroke:var(--color-hairline-input)}.story-svg .sa-accent{stroke:var(--accent)}.story-svg .sa-primary{stroke:var(--color-primary)}.story-svg .sa-ruby{stroke:var(--color-ruby)}.story-svg .sa-magenta{stroke:var(--color-magenta)}.story-svg .sa-c{stroke:var(--c)}.story-svg .sa-paper{fill:var(--color-canvas)}.story-svg .sa-tint{fill:color-mix(in oklab, var(--accent) 22%, var(--color-canvas))}.story-svg .sa-c-tint{fill:color-mix(in oklab, var(--c) 14%, var(--color-canvas))}.story-svg .sa-fill{fill:var(--accent)}.story-svg .sa-ink-fill{fill:var(--color-ink)}.story-svg .sa-c-glow{fill:color-mix(in oklab, var(--c) 30%, var(--color-canvas))}.story-svg .sa-draw{stroke-dasharray:1}.story-svg :is(.sa-pop,.sa-lean){transform-box:fill-box;transform-origin:50%}.story-svg :is(.sa-grow,.sa-wave){transform-box:fill-box;transform-origin:var(--o,50% 100%)}.story-svg .sa-lean{transform-origin:0 100%}.story-svg :is(.sa-blip,.sa-gone,.sa-later){opacity:0}.story-svg :is(.sa-cycle>:first-child,.sa-first){opacity:1}.story-svg .sa-drive{transform:translate(380px)}.story-svg .sa-plot{transform:translate(390px,-160px)}.story-svg .sa-sweep{transform:translate(400px)}[data-playing] .sa-reset{animation:sa-reset var(--loop,10s) linear both}[data-playing] .sa-pop{animation:sa-pop var(--t,.5s) cubic-bezier(.3, 1.4, .5, 1) var(--d,0s) both}[data-playing] .sa-in{animation:sa-in var(--t,.5s) ease var(--d,0s) both}[data-playing] .sa-later{animation:sa-in var(--t,.4s) ease var(--d,0s) both}[data-playing] .sa-gone,[data-playing] .sa-fade{animation:sa-gone var(--t,.3s) ease var(--d,0s) both}[data-playing] .sa-bubble{animation:sa-bubble var(--t,1.8s) ease-in var(--d,0s) infinite backwards}[data-playing] .sa-blip{animation:sa-blip var(--t,2s) ease-in-out var(--d,0s) both}[data-playing] .sa-move{animation:sa-move var(--t,1s) var(--ease,cubic-bezier(.3, 1.2, .5, 1)) var(--d,0s) both}[data-playing] .sa-slide{animation:sa-slide var(--t,1s) var(--ease,cubic-bezier(.3, 1.1, .5, 1)) var(--d,0s) both}[data-playing] .sa-go{animation:sa-go var(--t,1s) var(--ease,cubic-bezier(.4, 0, .3, 1)) var(--d,0s) both}[data-playing] .sa-grow{animation:sa-grow var(--t,.8s) var(--ease,cubic-bezier(.3, 1.1, .5, 1)) var(--d,0s) both}[data-playing] .sa-wave{animation:sa-wave var(--t,.5s) ease-in-out var(--d,0s) infinite alternate}[data-playing] .sa-draw{animation:sa-draw var(--t,1s) ease-in-out var(--d,0s) both}[data-playing] .sa-lean{animation:7.2s ease-in-out both sa-lean}[data-playing] .sa-hand{animation:sa-turn var(--t,9s) linear var(--d,0s) both}[data-playing] .sa-arc{animation:sa-arc var(--t,1s) linear var(--d,0s) both}[data-playing] .sa-drive{animation:sa-drive var(--t,7s) linear both}[data-playing] .sa-plot{animation:sa-plot var(--t,7s) linear both}[data-playing] .sa-sweep{animation:sa-sweep var(--t,7s) linear both}@keyframes sa-reset{0%{opacity:0}3%,94%{opacity:1}to{opacity:0}}@keyframes sa-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes sa-in{0%{opacity:0}to{opacity:1}}@keyframes sa-gone{0%{opacity:1}to{opacity:0}}@keyframes sa-blip{0%{opacity:0}12%,88%{opacity:1}to{opacity:0}}@keyframes sa-move{0%{opacity:0;transform:translate(var(--fx,0px), var(--fy,0px))}30%{opacity:1}to{opacity:1;transform:none}}@keyframes sa-slide{0%{transform:translate(var(--fx,0px), var(--fy,0px))}}@keyframes sa-go{to{transform:translate(var(--tx,0px), var(--ty,0px))}}@keyframes sa-grow{0%{transform:scale(var(--sx,1), var(--sy,0))}}@keyframes sa-bubble{0%{opacity:0;transform:translateY(12px)}20%{opacity:1}to{opacity:0;transform:translateY(-48px)}}@keyframes sa-wave{0%{transform:scaleY(.25)}}@keyframes sa-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes sa-lean{0%,to{transform:none}8%{transform:rotate(-4deg)translateY(-4px)}25%{transform:rotate(-2.5deg)translateY(-4px)}45%{transform:rotate(-4.5deg)translateY(-4px)}65%{transform:rotate(-3deg)translateY(-4px)}88%{transform:rotate(-3.5deg)translateY(-4px)}}@keyframes sa-turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes sa-arc{0%{stroke-dasharray:0 100}}@keyframes sa-drive{0%{transform:none}40%{transform:translate(120px)}80%,to{transform:translate(380px)}}@keyframes sa-plot{0%{transform:none}40%{transform:translate(156px,-50.5px)}80%{transform:translate(312px,-160px)}to{transform:translate(390px,-160px)}}@keyframes sa-sweep{0%{transform:none}to{transform:translate(390px)}}html[data-lightweight=true] .story-svg *{animation:none!important}