/* Original StatRat teaching scenes. Their pacing is illustrative, not combat timing. */
.sr-class-demo{--demo-gold:#d5b37a;--demo-ink:#f0e5cb;--demo-edge:#856b45;color:var(--demo-ink);font:400 15px/1.6 'Source Sans 3',sans-serif;min-width:0;max-width:100%;padding:1.25rem;margin:1.75rem 0;border:1px solid var(--demo-edge);border-radius:4px;background:linear-gradient(145deg,#262b29,#141c1e);box-shadow:inset 0 1px #f0d59a36,inset 0 0 0 4px #080d1055,0 5px 0 #090e10,0 14px 28px #0005;box-sizing:border-box}
.sr-class-demo *{box-sizing:border-box}
.sr-class-demo [hidden]{display:none!important}
.sr-class-demo .sr-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.sr-class-demo .sr-demo-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#d5bc8d;margin:0 0 5px}
.sr-class-demo .sr-demo-heading h3{font:600 clamp(18px,2vw,23px)/1.3 Cinzel,Georgia,serif;color:#ffe3a9;margin:0}
.sr-class-demo .sr-demo-tag{padding:4px 8px;border:1px solid #92744a;background:#151b1c;border-radius:3px;font-size:11px;color:#d3c3a5;white-space:nowrap}
.sr-class-demo .sr-demo-stage{height:205px;position:relative;isolation:isolate;border:1px solid #716143;border-radius:3px;background:linear-gradient(0deg,#0c171df2,#15201acd),url(mechanics/images/forest-clearing.webp) center 60%/cover;box-shadow:inset 0 3px 15px #000a,inset 0 0 0 3px #090f1170;overflow:hidden}
.sr-class-demo .sr-demo-ground{position:absolute;left:8%;right:8%;top:66%;height:1px;background:linear-gradient(90deg,transparent,#ab947747,transparent)}
.sr-class-demo .sr-demo-unit{position:absolute;left:var(--unit-x);top:46%;transform:translate(-50%,-50%);width:56px;text-align:center;transition:left 700ms cubic-bezier(.2,.8,.2,1),opacity 400ms;z-index:2}
.sr-class-demo .sr-demo-unit img,.sr-class-demo .sr-demo-unit>svg{display:block;width:56px;height:56px;border:2px solid #ad8856;border-radius:50%;object-fit:cover;background:#1b2522;box-shadow:0 0 0 3px #0e171b,0 0 0 4px #7b694966,0 4px 0 #030809,0 8px 14px #0008}
.sr-class-demo .sr-demo-unit span{display:block;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 9px);color:#e9dfc7;font-size:12px;white-space:nowrap;padding:1px 6px;background:#0f181cde;border-radius:2px}
.sr-class-demo .sr-demo-player{--unit-x:18%}
.sr-class-demo .sr-demo-pet{--unit-x:69%}
.sr-class-demo[data-class=hunter][data-step=start] .sr-demo-pet{--unit-x:34%}
.sr-class-demo .sr-demo-pet img{border-color:#90aa77}
.sr-class-demo .sr-demo-enemy{--unit-x:82%}
.sr-class-demo .sr-demo-enemy>svg{border-color:#a76c52}
.sr-class-demo .sr-demo-effect{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;fill:none;stroke-linecap:round}
.sr-class-demo .sr-demo-effect path{opacity:0;stroke-width:3}
.sr-class-demo .sr-demo-shot{stroke:#b1d797;stroke-dasharray:18 490;stroke-dashoffset:508}
.sr-class-demo .sr-demo-judgement{stroke:#eac475;stroke-dasharray:30 520;stroke-dashoffset:550}
.sr-class-demo .sr-demo-slash{stroke:#fff0c6;stroke-width:4}
.sr-class-demo .sr-demo-event{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;color:#d6c6a1;font-size:12px;letter-spacing:.03em}
.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-shot{opacity:1;animation:sr-demo-projectile 850ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-player{--unit-x:11%}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-pet{--unit-x:59%}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-enemy{--unit-x:72%}
.sr-class-demo[data-class=hunter][data-step="3"] .sr-demo-pet{--unit-x:34%}
.sr-class-demo[data-class=hunter][data-step="3"] .sr-demo-enemy{opacity:.3}
.sr-class-demo[data-class=paladin] .sr-demo-player{--unit-x:27%}
.sr-class-demo[data-class=paladin] .sr-demo-enemy{--unit-x:74%}
.sr-class-demo .sr-demo-seal{display:flex;align-items:center;gap:7px;position:absolute;left:12px;top:10px;border:1px solid #b99a5b;background:#201f13ec;padding:4px 8px 4px 4px;border-radius:3px;color:#f1d992;font-size:11px;box-shadow:inset 0 1px #ffe8a421;z-index:3}
.sr-class-demo .sr-demo-seal img{width:24px;height:24px;border:1px solid #ac894d;border-radius:2px;object-fit:cover}
.sr-class-demo .sr-demo-seal b{color:#bfd896}
.sr-class-demo[data-step=start] .sr-demo-seal{visibility:hidden}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-slash,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-slash{animation:sr-demo-strike 750ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-judgement{opacity:1;animation:sr-demo-projectile 900ms ease-out both}
.sr-class-demo .sr-demo-controls{display:flex;align-items:center;gap:8px;margin:1rem 0}
.sr-class-demo button{font:600 13px/1.3 'Source Sans 3',sans-serif;color:#ebdfc6;border:1px solid #8c724b;border-radius:3px;background:linear-gradient(#35372b,#232820);box-shadow:inset 0 1px #e5cb8d26,0 2px 0 #080e0f;padding:9px 12px;min-height:40px;cursor:pointer;letter-spacing:normal;text-transform:none}
.sr-class-demo .sr-demo-play{background:linear-gradient(#783c2b,#51251f);border-color:#b58b58;color:#ffe7bf}
.sr-class-demo button:active{box-shadow:inset 0 2px 5px #0008}
.sr-class-demo button:focus-visible,.sr-class-demo a:focus-visible,.sr-class-demo summary:focus-visible{outline:2px solid #ffe3a2;outline-offset:3px}
.sr-class-demo .sr-demo-progress{margin-left:auto;font-size:12px;color:#bdbbaa;font-variant-numeric:tabular-nums}
.sr-class-demo .sr-demo-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sr-class-demo .sr-demo-steps button{display:flex;align-items:center;gap:7px;text-align:left;font-size:12px;min-width:0;padding:9px 8px}
.sr-class-demo .sr-demo-steps button b{color:#b7ae91;font-size:11px}
.sr-class-demo .sr-demo-steps button[aria-pressed=true]{background:linear-gradient(#4d472d,#2d301f);border-color:#d0b16a;color:#f7e3ac;box-shadow:inset 0 1px #f5d98144,0 2px 0 #080e0f}
.sr-class-demo .sr-demo-steps button:disabled{cursor:default}
.sr-class-demo .sr-demo-caption{margin:1rem 0 0;min-height:5.5rem}
.sr-class-demo .sr-demo-caption>strong{font-size:16px;color:#ecd09b}
.sr-class-demo .sr-demo-caption p{margin:4px 0 0;font:400 15px/1.65 'Source Sans 3',sans-serif;color:#e0dbcc}
.sr-class-demo .sr-demo-note{margin:12px 0 0;color:#b8b8a7;font:400 11px/1.6 'Source Sans 3',sans-serif}
.sr-class-demo a{color:#d8bd88;text-decoration:underline;text-underline-offset:3px}
.sr-class-demo .sr-demo-transcript{margin-top:12px;padding-top:10px;border-top:1px solid #78624466;font-size:12px;color:#c6c5b4}
.sr-class-demo .sr-demo-transcript summary{cursor:pointer;color:#d5bc8d}
.sr-class-demo .sr-demo-transcript ol{padding-left:20px;margin-bottom:0}
.sr-class-demo .sr-demo-transcript li{margin:9px 0}

/* Mechanics in motion: chunky portraits, anticipation, travel and two-part impact. */
.sr-class-demo{border-color:#aa8152;border-top:3px solid #ba9157;background:linear-gradient(140deg,#302c23,#17201d 60%);padding:1.25rem;position:relative}
.sr-class-demo .sr-demo-kicker{color:#ddb373;font-weight:700;letter-spacing:.14em}
.sr-class-demo .sr-demo-stage{--player-home:18%;--pet-home:34%;--impact-x:82%;height:280px;background:linear-gradient(0deg,#08120ee8,transparent 65%,#0b171e8c),url(mechanics/images/forest-clearing.webp) center 58%/cover;border:2px solid #a98752;box-shadow:inset 0 0 0 4px #101c1980,inset 0 -40px 50px #07101680,0 2px 0 #050b09}
.sr-class-demo .sr-demo-stage:after{content:'';position:absolute;inset:6px;border:1px solid #e0be752b;pointer-events:none;z-index:5}
.sr-class-demo .sr-demo-scene-label{position:absolute;left:16px;right:16px;top:15px;font:600 12px/1.4 Cinzel,Georgia,serif;letter-spacing:.08em;color:#e8d6ad;display:flex;justify-content:space-between;gap:12px;z-index:3}
.sr-class-demo .sr-demo-scene-label span{font:400 10px/1.6 'Source Sans 3',sans-serif;letter-spacing:.02em;color:#cdc5b2}
.sr-class-demo .sr-demo-ground{top:72%;height:18px;border-radius:50%;background:radial-gradient(ellipse,#060d0eb5,transparent 70%)}
.sr-class-demo .sr-demo-unit{width:64px;top:49%;transition:none}
.sr-class-demo .sr-demo-unit img{width:64px;height:64px;border:3px solid #c29b5c;box-shadow:0 0 0 3px #17251c,0 0 0 5px #685231,0 5px 0 #080f0b,0 12px 12px #0009;background:#17261b}
.sr-class-demo .sr-demo-unit span{top:calc(100% + 12px);font-weight:600;background:linear-gradient(#29251b,#151c17);border:1px solid #9a7747;padding:3px 9px;color:#f2e3be;box-shadow:0 3px 0 #09110a;line-height:1.3}
.sr-class-demo .sr-demo-player{--unit-x:var(--player-home)}
.sr-class-demo .sr-demo-pet{--unit-x:calc(var(--impact-x) - var(--strike-gap, 86px))}
.sr-class-demo .sr-demo-pet img{border-color:#92ad71}
.sr-class-demo[data-class=hunter][data-step=start] .sr-demo-pet,.sr-class-demo[data-class=hunter][data-step="3"] .sr-demo-pet{--unit-x:var(--pet-home)}
.sr-class-demo .sr-demo-enemy{--unit-x:var(--impact-x);width:78px;opacity:1}
.sr-class-demo .sr-demo-enemy img{width:78px;height:78px;object-fit:contain;padding:3px;background:radial-gradient(ellipse at 50% 80%,#694a2a,#251c13);border-color:#bc6943;box-shadow:0 0 0 3px #271b12,0 0 0 5px #865135,0 5px 0 #160d0a,0 12px 18px #000a}
.sr-class-demo .sr-demo-enemy span{color:#ffe0ad;border-color:#ae6940;background:linear-gradient(#4a2a1a,#281b12)}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-stage{--impact-x:76%}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-player{--unit-x:var(--retreat-x,10%)}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-pet{--unit-x:calc(var(--impact-x) - var(--strike-gap, 86px))}
.sr-class-demo[data-class=paladin] .sr-demo-stage{--player-home:27%;--impact-x:76%}
.sr-class-demo[data-class=paladin] .sr-demo-player{--unit-x:var(--player-home)}
.sr-class-demo[data-class=paladin] .sr-demo-enemy{--unit-x:var(--impact-x)}
.sr-class-demo .sr-demo-event{bottom:19px;left:20px;right:20px;font:600 12px/1.4 'Source Sans 3',sans-serif;color:#f0d49b;letter-spacing:.04em}
.sr-class-demo .sr-demo-event:before,.sr-class-demo .sr-demo-event:after{content:'◆';font-size:8px;margin:0 10px;color:#ac8146}
.sr-class-demo .sr-demo-aura{position:absolute;left:var(--player-home);top:49%;width:130px;height:130px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:1}
.sr-class-demo .sr-demo-aura svg{width:100%;height:100%;stroke:#d9b967;fill:none;stroke-width:2}
.sr-class-demo[data-class=paladin]:not([data-step=start]) .sr-demo-aura{opacity:.75}
.sr-class-demo .sr-demo-projectile{position:absolute;left:18%;top:49%;width:70px;transform:translate(-50%,-50%);z-index:4;opacity:0;pointer-events:none}
.sr-class-demo .sr-demo-projectile svg{width:100%;display:block}
.sr-class-demo .sr-demo-bolt{position:absolute;left:var(--impact-x);top:30px;height:145px;width:28px;transform:translateX(-50%);opacity:0;z-index:4;pointer-events:none;background:linear-gradient(#e2ac4455,#ffd886,#fff5c6);clip-path:polygon(35% 0,65% 0,58% 31%,89% 34%,68% 52%,83% 75%,60% 100%,39% 94%,17% 69%,31% 51%,12% 32%,40% 30%)}
.sr-class-demo .sr-demo-impact{position:absolute;left:var(--impact-x);top:49%;width:134px;height:134px;transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.sr-class-demo .sr-demo-impact svg{width:100%;height:100%;overflow:visible}
.sr-class-demo .sr-demo-burst{fill:#ffe5a5;stroke:#a66b2c;stroke-width:1;opacity:0;transform-origin:60px 60px}
.sr-class-demo .sr-demo-shards{fill:#dab068;opacity:0;transform-origin:60px 60px}
.sr-class-demo .sr-demo-claws{stroke:#f1ddad;stroke-width:5;stroke-linecap:round;opacity:0}
.sr-class-demo .sr-demo-swing{fill:#e4d3a8;stroke:#826c3d;stroke-width:1;opacity:0;transform-origin:60px 60px}
.sr-class-demo .sr-demo-hit-label{position:absolute;left:var(--impact-x);top:26%;transform:translateX(-50%);color:#f6e9d0;font:700 11px/1.3 'Source Sans 3',sans-serif;padding:3px 8px;background:#101a16ee;border:1px solid #7f6c47;opacity:0;pointer-events:none;z-index:5;white-space:nowrap}
.sr-class-demo .sr-demo-hit-holy{top:18%;color:#ffe19b;border-color:#c5994e}
.sr-class-demo .sr-demo-seal{top:auto;bottom:49px;left:13px;border-color:#c3a35e;background:#272719f2;box-shadow:inset 0 1px #f9df9744,0 3px 0 #0b130b}
.sr-class-demo .sr-demo-seal img{width:28px;height:28px}
.sr-class-demo .sr-demo-controls{gap:8px;flex-wrap:wrap}
.sr-class-demo .sr-demo-replay{width:40px;padding:8px;display:grid;place-items:center}
.sr-class-demo .sr-demo-replay svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-class-demo .sr-demo-replay:disabled{opacity:.4;cursor:default}
.sr-class-demo .sr-demo-play:before{content:'▶';font-size:10px;margin-right:7px}
.sr-class-demo[data-playing=true] .sr-demo-play:before{content:'Ⅱ'}
.sr-class-demo .sr-demo-steps button{position:relative;display:grid;grid-template-columns:26px 1fr;column-gap:8px;row-gap:0;padding:9px 8px;min-height:62px;background:linear-gradient(#393426,#20291f);border-bottom:3px solid #090f0a;box-shadow:inset 0 1px #dbb87230,0 2px 0 #0a130c}
.sr-class-demo .sr-demo-steps button img{grid-row:1/3;width:26px;height:26px;object-fit:cover;border:1px solid #ab8950;box-shadow:0 0 0 2px #0d180e;border-radius:2px}
.sr-class-demo .sr-demo-steps button b{font-size:9px;line-height:1.2;color:#bbad8b}
.sr-class-demo .sr-demo-steps button span{font-size:12px;line-height:1.25}
.sr-class-demo .sr-demo-steps button[aria-pressed=true]{border-color:#c49a59;border-bottom-color:#0b1107;background:linear-gradient(#5b492c,#323b23);color:#ffebbc}
.sr-class-demo .sr-demo-steps button:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:#e1b76d}
.sr-class-demo[data-playing=true] .sr-demo-steps button[aria-pressed=true]:after{animation:var(--demo-progress) 3500ms linear both}
.sr-class-demo[data-paused=true] .sr-demo-stage *,.sr-class-demo[data-paused=true] .sr-demo-steps button:after{animation-play-state:paused!important}
.sr-class-demo{--demo-arrow:sr-arrow-a;--demo-impact:sr-impact-a;--demo-shards:sr-shards-a;--demo-claw:sr-claw-a;--demo-aura:sr-aura-a;--demo-bolt:sr-bolt-a;--demo-melee:sr-melee-a;--demo-recoil:sr-recoil-a;--demo-pet:sr-pet-a;--demo-retreat:sr-retreat-a;--demo-recall:sr-recall-a;--demo-label:sr-label-a;--demo-progress:sr-progress-a}
.sr-class-demo[data-take=b]{--demo-arrow:sr-arrow-b;--demo-impact:sr-impact-b;--demo-shards:sr-shards-b;--demo-claw:sr-claw-b;--demo-aura:sr-aura-b;--demo-bolt:sr-bolt-b;--demo-melee:sr-melee-b;--demo-recoil:sr-recoil-b;--demo-pet:sr-pet-b;--demo-retreat:sr-retreat-b;--demo-recall:sr-recall-b;--demo-label:sr-label-b;--demo-progress:sr-progress-b}
.sr-class-demo[data-class=hunter][data-step="0"] .sr-demo-pet{animation:var(--demo-pet) 1150ms cubic-bezier(.22,.8,.3,1) both}
.sr-class-demo[data-class=hunter][data-step="0"] .sr-demo-claws{animation:var(--demo-claw) 550ms 650ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="0"] .sr-demo-enemy{animation:var(--demo-recoil) 550ms 650ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-projectile{animation:var(--demo-arrow) 850ms 180ms cubic-bezier(.3,0,.6,1) both}
.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-burst{animation:var(--demo-impact) 500ms 830ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-shards{animation:var(--demo-shards) 800ms 830ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-enemy{animation:var(--demo-recoil) 600ms 830ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-player{animation:var(--demo-retreat) 1000ms ease-out both}
.sr-class-demo[data-class=hunter][data-step="3"] .sr-demo-pet{animation:var(--demo-recall) 1100ms ease-in-out both}
.sr-class-demo[data-class=paladin][data-step="0"] .sr-demo-aura{animation:var(--demo-aura) 1300ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-player,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-player{animation:var(--demo-melee) 1550ms ease-in-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-swing,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-swing{animation:var(--demo-claw) 550ms 550ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-burst,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-burst{animation:var(--demo-impact) 650ms 900ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-hit-weapon,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-hit-weapon{animation:var(--demo-label) 1000ms 600ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-hit-holy,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-hit-holy{animation:var(--demo-label) 1000ms 1100ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-enemy,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-enemy{animation:var(--demo-recoil) 650ms 800ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-bolt{animation:var(--demo-bolt) 1250ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-burst{animation:var(--demo-impact) 650ms 500ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-shards{animation:var(--demo-shards) 900ms 500ms ease-out both}
.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-enemy{animation:var(--demo-recoil) 650ms 500ms ease-out both}
@keyframes sr-arrow-a{0%{left:18%;opacity:0;transform:translate(-50%,-50%) scale(.8)}12%{opacity:1}83%{opacity:1}100%{left:var(--impact-x);opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes sr-arrow-b{0%{left:18%;opacity:0;transform:translate(-50%,-50%) scale(.8)}12%{opacity:1}83%{opacity:1}100%{left:var(--impact-x);opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes sr-impact-a{0%{opacity:0;transform:scale(.2) rotate(-12deg)}18%{opacity:.95;transform:scale(.9)}100%{opacity:0;transform:scale(1.25) rotate(10deg)}}
@keyframes sr-impact-b{0%{opacity:0;transform:scale(.2) rotate(-12deg)}18%{opacity:.95;transform:scale(.9)}100%{opacity:0;transform:scale(1.25) rotate(10deg)}}
@keyframes sr-shards-a{0%{opacity:0;transform:scale(.6)}15%{opacity:1}100%{opacity:0;transform:scale(1.55) rotate(10deg)}}
@keyframes sr-shards-b{0%{opacity:0;transform:scale(.6)}15%{opacity:1}100%{opacity:0;transform:scale(1.55) rotate(10deg)}}
@keyframes sr-claw-a{0%{opacity:0;transform:translate(-5px,-5px)}30%{opacity:1}100%{opacity:0;transform:translate(5px,7px)}}
@keyframes sr-claw-b{0%{opacity:0;transform:translate(-5px,-5px)}30%{opacity:1}100%{opacity:0;transform:translate(5px,7px)}}
@keyframes sr-aura-a{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-25deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}100%{opacity:.75;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
@keyframes sr-aura-b{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-25deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}100%{opacity:.75;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
@keyframes sr-bolt-a{0%{opacity:0;transform:translateX(-50%) translateY(-70px) scaleY(.3)}25%{opacity:.9}45%{opacity:1;transform:translateX(-50%) translateY(0) scaleY(1)}100%{opacity:0;transform:translateX(-50%) translateY(0) scaleY(.65)}}
@keyframes sr-bolt-b{0%{opacity:0;transform:translateX(-50%) translateY(-70px) scaleY(.3)}25%{opacity:.9}45%{opacity:1;transform:translateX(-50%) translateY(0) scaleY(1)}100%{opacity:0;transform:translateX(-50%) translateY(0) scaleY(.65)}}
@keyframes sr-melee-a{0%,100%{left:var(--player-home);transform:translate(-50%,-50%)}20%{left:calc(var(--player-home) - 2%);transform:translate(-50%,-50%) rotate(-8deg)}45%,70%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%) rotate(7deg)}}
@keyframes sr-melee-b{0%,100%{left:var(--player-home);transform:translate(-50%,-50%)}20%{left:calc(var(--player-home) - 2%);transform:translate(-50%,-50%) rotate(-8deg)}45%,70%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%) rotate(7deg)}}
@keyframes sr-recoil-a{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}20%{transform:translate(calc(-50% + 7px),-50%) rotate(10deg)}45%{transform:translate(calc(-50% - 3px),-50%) rotate(-5deg)}}
@keyframes sr-recoil-b{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}20%{transform:translate(calc(-50% + 7px),-50%) rotate(10deg)}45%{transform:translate(calc(-50% - 3px),-50%) rotate(-5deg)}}
@keyframes sr-pet-a{0%{left:var(--pet-home);transform:translate(-50%,-50%) rotate(-5deg)}55%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-65%) rotate(9deg)}100%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%)}}
@keyframes sr-pet-b{0%{left:var(--pet-home);transform:translate(-50%,-50%) rotate(-5deg)}55%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-65%) rotate(9deg)}100%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%)}}
@keyframes sr-retreat-a{0%{left:18%;transform:translate(-50%,-50%) rotate(0deg)}35%{transform:translate(-50%,-55%) rotate(-8deg)}100%{left:var(--retreat-x,10%);transform:translate(-50%,-50%)}}
@keyframes sr-retreat-b{0%{left:18%;transform:translate(-50%,-50%) rotate(0deg)}35%{transform:translate(-50%,-55%) rotate(-8deg)}100%{left:var(--retreat-x,10%);transform:translate(-50%,-50%)}}
@keyframes sr-recall-a{0%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%)}40%{transform:translate(-50%,-55%) rotate(-7deg)}100%{left:var(--pet-home);transform:translate(-50%,-50%)}}
@keyframes sr-recall-b{0%{left:calc(var(--impact-x) - var(--strike-gap, 86px));transform:translate(-50%,-50%)}40%{transform:translate(-50%,-55%) rotate(-7deg)}100%{left:var(--pet-home);transform:translate(-50%,-50%)}}
@keyframes sr-label-a{0%{opacity:0;transform:translate(-50%,8px)}20%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
@keyframes sr-label-b{0%{opacity:0;transform:translate(-50%,8px)}20%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
@keyframes sr-progress-a{from{width:0}to{width:100%}}
@keyframes sr-progress-b{from{width:0}to{width:100%}}

@media(hover:hover){.sr-class-demo button:hover:not(:disabled){border-color:#dab47a;color:#fff0cc;background-color:#413d2a}}
@media(max-width:600px){.sr-class-demo{padding:1rem;margin:1.5rem 0}.sr-class-demo .sr-demo-heading{display:block}.sr-class-demo .sr-demo-tag{display:inline-block;margin-top:9px}.sr-class-demo .sr-demo-stage{height:250px;--pet-home:42%;--strike-gap:68px}.sr-class-demo .sr-demo-unit{width:48px}.sr-class-demo .sr-demo-unit img{width:48px;height:48px;border-width:2px}.sr-class-demo .sr-demo-enemy{width:58px}.sr-class-demo .sr-demo-enemy img{width:58px;height:58px}.sr-class-demo .sr-demo-unit span{font-size:10px;padding:3px 6px}.sr-class-demo .sr-demo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.sr-class-demo .sr-demo-steps button{min-height:60px}.sr-class-demo .sr-demo-controls button{font-size:12px;padding:8px}.sr-class-demo .sr-demo-caption{min-height:7rem}.sr-class-demo .sr-demo-scene-label{left:12px;right:12px;font-size:10px}.sr-class-demo .sr-demo-scene-label span{font-size:9px}.sr-class-demo .sr-demo-aura{width:98px;height:98px}.sr-class-demo .sr-demo-impact{width:100px;height:100px}.sr-class-demo .sr-demo-pet{--unit-x:calc(var(--impact-x) - 68px)}.sr-class-demo .sr-demo-stage{--impact-x:80%}.sr-class-demo[data-class=paladin] .sr-demo-stage{--impact-x:78%}.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-pet{--unit-x:calc(var(--impact-x) - 68px)}.sr-class-demo .sr-demo-seal{bottom:48px;left:10px;padding:3px 6px;font-size:10px}.sr-class-demo .sr-demo-seal img{width:23px;height:23px}.sr-class-demo .sr-demo-event{font-size:11px}.sr-class-demo .sr-demo-event:before,.sr-class-demo .sr-demo-event:after{margin:0 6px}}
@media(prefers-reduced-motion:reduce){.sr-class-demo .sr-demo-unit{transition:none}.sr-class-demo .sr-demo-effect path{animation:none!important}.sr-class-demo .sr-demo-stage *,.sr-class-demo .sr-demo-steps button:after{animation:none!important}.sr-class-demo[data-class=hunter][data-step="1"] .sr-demo-projectile{left:50%;opacity:1}.sr-class-demo[data-class=hunter][data-step="0"] .sr-demo-claws{opacity:.8}.sr-class-demo[data-class=paladin][data-step="2"] .sr-demo-bolt{opacity:.8}.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-swing,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-swing{opacity:.8}}

.sr-class-demo[data-class=hunter][data-step="2"] .sr-demo-enemy{--unit-x:var(--impact-x)}
.sr-class-demo[data-class=hunter][data-step="3"] .sr-demo-enemy{opacity:1}

.sr-class-demo .sr-demo-steps button{grid-template-columns:26px minmax(0,1fr);white-space:normal}
.sr-class-demo .sr-demo-steps button span{min-width:0;white-space:normal;overflow-wrap:break-word}
.sr-class-demo[data-class=paladin][data-step="1"] .sr-demo-aura,.sr-class-demo[data-class=paladin][data-step="3"] .sr-demo-aura{animation:var(--demo-melee) 1550ms ease-in-out both}
@media(max-width:600px){.sr-class-demo .sr-demo-stage{--retreat-x:12%}}

@media(max-width:600px){.sr-class-demo .sr-demo-seal{top:42px;bottom:auto;left:10px}}