:root{--motion-fast:160ms;--motion-enter:380ms;--motion-ease:cubic-bezier(.2,.75,.25,1)}
html{scroll-padding-top:20px}
button{font:inherit;touch-action:manipulation}
[hidden]{display:none!important}
button:focus-visible,.cast:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.primary,.soft-btn{transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}
.primary:active,.soft-btn:active{transform:translateY(2px);box-shadow:0 1px #682c26}
.primary .icon,.soft-btn .icon{transition:transform var(--motion-fast) var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
 .primary:hover .icon{transform:translateX(3px)}
}
.cast{
  --cast-card-width:224px;
  position:relative;
  margin-inline-end:var(--p);
  padding:10px 0 16px;
  overscroll-behavior-x:contain;
  overflow-anchor:none;
}
.cast::before,.cast::after{
  content:"";
  flex:0 0 max(0px,calc((100% - var(--cast-card-width)) / 2 - 12px));
}
.cast figure{
  flex:0 0 var(--cast-card-width);
  scroll-snap-align:center;
  transition:transform 450ms cubic-bezier(.2,1.2,.4,1),opacity 450ms ease;
}
.cast[data-enhanced] figure{transform:scale(.88);opacity:.55}
.cast[data-enhanced] figure.is-current{transform:scale(1);opacity:1}
@keyframes cast-bob{
  0%,100%{transform:none}
  50%{transform:translateY(-5px) rotate(-2deg)}
}
html[data-motion="on"]:not([data-tab-hidden]) .cast[data-visible] figure.is-current .character{
  animation:cast-bob 2.2s ease-in-out infinite;
}
.cast-dots{display:flex;justify-content:center;margin-inline-end:var(--p)}
.cast-dots button{
  display:grid;
  place-items:center;
  width:24px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:width 300ms ease;
}
.cast-dots button[aria-current="true"]{width:44px}
.cast-dots button::after{
  content:"";
  box-sizing:border-box;
  width:9px;
  height:9px;
  border:1px solid var(--red);
  border-radius: 999px;
  background:#1e395f;
  transition:width 300ms ease,background-color 300ms ease,border-color 300ms ease;
}
.cast-dots button:nth-child(1){--cast-color:#a4372d}
.cast-dots button:nth-child(2){--cast-color:#268b87}
.cast-dots button:nth-child(3){--cast-color:#c26491}
.cast-dots button:nth-child(4){--cast-color:#c99525}
.cast-dots button:nth-child(5){--cast-color:#628f59}
.cast-dots button[aria-current="true"]::after{
  width:28px;
  border-color:var(--cast-color);
  background:var(--cast-color);
}
.cast-hint{font-size:12px;color:var(--muted);padding:6px var(--p) 0 0}
.motion-toggle{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:6px 12px;border:1px solid var(--muted);border-radius: 8px;color:var(--ink);background:var(--white);cursor:pointer;font-size:13px}
.motion-toggle[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.motion-toggle:disabled{opacity:.85;cursor:default}
.rail-index a[aria-current="location"]{color:var(--red);background:#f2e3ca}
.team-portrait { position: relative; }
:is(.character, .char, .team-portrait) > .lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}