.card, .frame {
  background: var(--card-fill);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  box-shadow: inset 0 0 0 1px var(--rule-hi), var(--card-shadow);
}
.frame { overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule-hi), var(--frame-shadow); }
.frame img { width: 100%; }


.blk-wide { max-width: 820px; margin-inline: auto; }
.blk-wide img { display: block; height: auto; }


.blk-split__media--native { max-width: fit-content; margin-inline: auto; }
.blk-split__media--native img { max-width: 100%; height: auto; }


.ui { margin: 0; position: relative; isolation: isolate; perspective: 1100px; }
.ui img {
  display: block; height: auto;
  max-width: min(100%, var(--ui-max, 560px));
  margin-inline: auto;
  filter: drop-shadow(0 2px 3px rgb(var(--shadow-rgb) / .45))
          drop-shadow(0 14px 28px rgb(var(--shadow-rgb) / .5));
  
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ui-scale, 1));
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.ui.is-tilting { --ui-scale: 1.02; }

.ui__sweep {
  position: absolute; z-index: 1; pointer-events: none;
  -webkit-mask: var(--ui-src) 0 0 / 100% 100% no-repeat;
          mask: var(--ui-src) 0 0 / 100% 100% no-repeat;
  
  
  background: linear-gradient(105deg, transparent 34%, rgb(150 100 55 / .04) 39%, rgb(176 122 70 / .1) 44%, rgb(196 142 86 / .17) 48.5%, rgb(204 152 96 / .19) 50%, rgb(196 142 86 / .17) 51.5%, rgb(176 122 70 / .1) 56%, rgb(150 100 55 / .04) 61%, transparent 66%) 85% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ui-scale, 1));
  transition: transform var(--dur-slow) var(--ease-out);
}
.ui.is-tilting .ui__sweep { transition-duration: 140ms; }

.ui:is(.ink-done, :not(.ink-reveal).is-in) .ui__sweep.is-ready {
  animation: ui-sweep 8s cubic-bezier(.42, 0, .58, 1) var(--sweep-delay, .5s) infinite;
}

@keyframes ui-sweep {
  0%    { background-position: 85% 0; opacity: 0; }
  4%    { opacity: 1; }
  26%   { opacity: 1; }
  30%   { background-position: 15% 0; opacity: 0; }
  100%  { background-position: 15% 0; opacity: 0; }
}
.ui.is-tilting img { transition-duration: 140ms; }

.ui::before {
  content: ""; position: absolute; inset: 10% 8%; z-index: -1;
  background: radial-gradient(closest-side, var(--ui-glow), transparent);
  filter: blur(30px);
  opacity: .75;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.ui.is-tilting::before { opacity: 1; transform: scale(1.06); }

.js-reveal .ui.ink-reveal:not(.ink-done) img { filter: none; }
.js-reveal .ui.ink-reveal:not(.ink-done)::before { opacity: 0; }
.blk-wide.ui { max-width: fit-content; --ui-max: 780px; }

.blk-shots {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--sp-6) var(--sp-7);
  margin-block-start: var(--sp-6);
}
.blk-lede + .blk-shots { margin-block-start: 0; }   

.guidebook { display: grid; }
.guidebook > img { grid-area: 1 / 1; opacity: 0; transition: opacity 220ms var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.guidebook > img.is-on { opacity: 1; }

.guidebook__arrow {
  position: absolute; z-index: 2; inset-block-start: 5.7%;
  width: 9.7%; height: 6.8%;
  padding: 0; border: 0; border-radius: 2px;
  background: transparent; cursor: var(--cursor-hover);
}
.guidebook__arrow--prev { inset-inline-start: 2.15%; }
.guidebook__arrow--next { inset-inline-start: 88.35%; }
.guidebook__arrow:hover { background: radial-gradient(closest-side, rgb(255 236 200 / .22), transparent); }

.guidebook__arrow::after {
  content: ""; position: absolute; inset: -14% -10%; border-radius: 4px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--brass-300-rgb) / .4), rgb(var(--brass-300-rgb) / .12) 62%, transparent);
  box-shadow: 0 0 0 1px rgb(var(--brass-300-rgb) / .6), 0 0 12px rgb(var(--brass-300-rgb) / .5);
  animation: arrow-call 1.8s ease-in-out infinite;
}
@keyframes arrow-call { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.guidebook.is-used .guidebook__arrow::after { animation: none; opacity: .3; }
.guidebook .guidebook__arrow:is(:hover, :focus-visible)::after { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .guidebook__arrow::after { animation: none; opacity: .7; } }
@media (pointer: coarse) { .guidebook__arrow::before { content: ""; position: absolute; inset: -8px; } }
@media (prefers-reduced-motion: reduce) { .guidebook > img { transition: none; } }

.guidebook--tp .guidebook__arrow { inset-block-start: 63.1%; width: 4.1%; height: 6.4%; }

.guidebook--bp .guidebook__tab { inset-inline-start: .2%; width: 5.7%; height: 10.1%; }
.guidebook--bp .guidebook__tab--1 { inset-block-start: 10.1%; }
.guidebook--bp .guidebook__tab--2 { inset-block-start: 20.8%; }

.guidebook--bp .guidebook__tab[aria-pressed="true"]::after,
.guidebook--bp.is-used .guidebook__tab[aria-pressed="true"]::after { animation: none; opacity: 1; }
.guidebook--bp.is-used .guidebook__tab[aria-pressed="false"]::after { opacity: .25; }
.guidebook--tp .guidebook__arrow--prev { inset-inline-start: 70.8%; }
.guidebook--tp .guidebook__arrow--next { inset-inline-start: 93.3%; }


.section:has(.scene) { container: scenesec / inline-size; }
.scene {
  --sk-w: min(1200px, 100cqw - 2 * var(--gutter));
  width: var(--sk-w); max-width: none;
  margin-inline: calc((100% - var(--sk-w)) / 2);
}
.scene__pic {
  position: relative;
  -webkit-mask-position: center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: 100% 100%;         mask-repeat: no-repeat;
}
.scene__bg { display: block; width: 100%; height: auto; }

.scene__render {
  position: absolute; inset-block-start: 6%; inset-inline-start: 50%;
  height: 97%; translate: -50% 0;
  pointer-events: none;
}

.scene__render, .js-reveal .scene__render.ink-reveal {
  filter: drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .5));
}
.scene__render :is(img, video) { display: block; height: 100%; width: auto; max-width: none; }
.scene__ui {
  position: relative; z-index: 1;
  width: fit-content; max-width: 100%; margin: var(--sp-4) auto 0;
}

@container (min-width: 900px) {
  .scene__ui { margin-block-start: calc(-1 * clamp(24px, 4%, 48px)); }
}

.scene--pop .scene__pic { aspect-ratio: 1.2496; }
.scene--pop .scene__bg { position: absolute; inset-inline-start: 0; inset-block-start: 23.6%; width: 100%; }
.scene--pop .scene__render {
  inset-block: auto 0; inset-inline-start: var(--pop-x, -2.062%); translate: none;
  width: var(--pop-w, 75.98%); height: auto;
}
.scene--pop .scene__render :is(img, video) { width: 100%; height: auto; }

.scene__render--pier img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent 1%, #000 14%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent 1%, #000 14%);
          mask-composite: intersect;
}

.scene--horse { --pop-w: 51.55%; --pop-x: 4.124%; }

.scene--horse .scene__pic { aspect-ratio: 996 / 498; }
.scene--horse .scene__bg { inset-block-start: 0; }
.scene--horse .scene__render { inset-block: 3.371% auto; }

.scene { position: relative; }
.scene__ui--fish { width: min(100%, 560px); }
.scene__ui--fish video { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .scene.scene--pop .scene__ui--fish {
    position: absolute; margin: 0;
    inset-inline-start: 47.42%; inset-block-start: 46.5%; width: min(51.55%, 560px);
  }
  .scene.scene--horse .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 67.01%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--gaya .scene__pic { aspect-ratio: 996 / 498; }
.scene--gaya .scene__bg { position: static; }
.scene--gaya .scene__render { inset-block-start: 4%; height: 94%; }
.js-reveal .scene__render--fx.ink-reveal, .scene__render--fx { filter: none; isolation: isolate; }
.scene__render--fx .stage-render__fig { display: block; height: 100%; filter: drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .5)); }
.scene__render--fx video {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%);
          mask-image: linear-gradient(180deg, transparent, #000 7%);
}
.scene__render .stage-fx {
  display: block; position: absolute; inset-inline: -12%; inset-block-end: 0;
  height: 130%; pointer-events: none; filter: blur(1.6px);
}
.scene__render .stage-fx--back  { z-index: -1; }
.scene__render .stage-fx--front { z-index: 1; }
@media (min-width: 1024px) {
  .scene--gaya .scene__render { inset-inline-start: 42%; translate: none; }
  .scene.scene--gaya .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 14%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--pet .scene__pic {
  aspect-ratio: 1.8182;
  -webkit-mask-image: url("../assets/theme/8165aa9c47459125.webp"), linear-gradient(#000 80%, transparent 90%);
          mask-image: url("../assets/theme/8165aa9c47459125.webp"), linear-gradient(#000 80%, transparent 90%);
  -webkit-mask-size: 100% 90.91%, 100% 100%;   -webkit-mask-position: 0 100%, 0 0;
          mask-size: 100% 90.91%, 100% 100%;           mask-position: 0 100%, 0 0;
}
.scene--pet .scene__bg { position: absolute; inset-inline: 0; inset-block-end: 0; }
.scene--pet .scene__render { inset-block-start: .9%; inset-inline-start: 57%; translate: none; height: 127.3%; }
@media (min-width: 1024px) {
  .scene.scene--pet .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 13%; inset-block-start: 54.5%; translate: 0 -50%;
  }
}

.scene--alch .scene__pic {
  aspect-ratio: 996 / 630;
  -webkit-mask-image: url("../assets/theme/529f7cca2a646f89.webp"), linear-gradient(#000 84%, transparent 92.5%);
          mask-image: url("../assets/theme/529f7cca2a646f89.webp"), linear-gradient(#000 84%, transparent 92.5%);
  -webkit-mask-size: 100% 79.05%, 100% 100%;   -webkit-mask-position: 0 100%, 0 0;
          mask-size: 100% 79.05%, 100% 100%;           mask-position: 0 100%, 0 0;
}
.scene--alch .scene__bg { position: absolute; inset-inline: 0; inset-block-end: 0; }
.scene--alch .scene__render { inset-block-start: 0; inset-inline-start: 47.51%; translate: none; height: 115.87%; }
.alch-stones { position: absolute; inset: 0; pointer-events: none; }
.alch-stone {
  position: absolute; height: auto; max-width: none;
  will-change: transform;
}
.alch-stone--ruby     { inset-inline-start: 61.49%; inset-block-start: 11.13%; width: 12.25%; }
.alch-stone--jade     { inset-inline-start: 46.58%; inset-block-start: 24.22%; width: 12.45%; }
.alch-stone--sapphire { inset-inline-start: 39.85%; inset-block-start: 48.94%; width: 15.46%; }
.alch-stones__fx {
  position: absolute; inset-inline-start: 28%; inset-block-start: 0;
  width: 58%; height: 90%; filter: blur(1.2px);
}
.scene--alch { --alch-ring: min(calc(100vw - 2 * var(--gutter)), 480px); }

.scene--alch .kit__disc { inset: calc(var(--orb) / 2); }
.scene--alch .kit__stage::before { z-index: 1; }
.scene .kit { width: min(100%, var(--ring)); }

@media (min-width: 1024px) {
  .scene--alch { --alch-ring: 378px; }
  
  .scene.scene--alch .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 20.4%; inset-block-start: 60.48%; translate: -50% -50%;
    --ink: var(--text-primary); --ink-muted: var(--text-secondary);
  }
  
  .scene.scene--alch .kit__stage::before {
    border-color: rgb(var(--brass-400-rgb) / .5);
    background: none;
  }
  .scene.scene--alch .kit__stage::after { border-color: rgb(var(--brass-400-rgb) / .24); }
  .scene.scene--alch .kit__name { text-shadow: 0 1px 6px rgb(var(--shadow-rgb) / .9); }
  
  .scene.scene--alch .kit__name {
    padding: 2px 10px;
    background: radial-gradient(closest-side, rgb(var(--bg-900-rgb) / .92), rgb(var(--bg-900-rgb) / .7) 72%, transparent);
  }
  
  .scene.scene--alch .kit__disc {
    background: radial-gradient(closest-side, rgb(var(--bg-900-rgb) / .3), rgb(var(--bg-900-rgb) / .42) 45%, rgb(var(--bg-900-rgb) / .72) 92%);
  }
  .scene.scene--alch .kit__hint { text-shadow: 0 1px 4px rgb(var(--shadow-rgb) / .9); }
  
  .scene.scene--alch .kit__hint {
    --tb-edge-y: 12px; --tb-edge-x: 24px;
    position: relative; isolation: isolate; padding: .4em .9em;
  }
  .scene.scene--alch .kit__hint::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: calc(var(--tb-edge-y) * -1) calc(var(--tb-edge-x) * -1);
    background: rgb(var(--bg-900-rgb) / .72);
    -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--tb-edge-y) var(--tb-edge-x) round;
    mask-border: var(--brush-block) var(--brush-slice) fill / var(--tb-edge-y) var(--tb-edge-x) round;
  }
}

.scene--bio .scene__pic { aspect-ratio: 996 / 498; }
.scene--bio .scene__render { inset-block-start: 6%; height: 124%; }
@media (min-width: 1024px) {
  .scene--bio .scene__render { inset-inline-start: 68%; }
  .scene.scene--bio .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 24%; inset-block-start: 50%; translate: -50% -50%;
  }
}

.scene--boss { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: var(--sp-5); }
.scene--boss .scene__pic { flex: 0 0 100%; aspect-ratio: 996 / 498; }
.scene--boss .scene__render { inset-block-start: 5.5%; }
.scene.scene--boss .scene__ui { margin: var(--sp-4) 0 0; }
@media (min-width: 1024px) {
  .scene--boss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .scene--boss .scene__pic { grid-area: 1 / 1 / 2 / 4; }
  .scene--boss .scene__render { inset-inline-start: calc(49.75% + 9px); }
  .scene.scene--boss .scene__ui { grid-row: 1; margin: 0; }
  
  .scene.scene--boss .scene__ui--l { grid-column: 1; margin-inline-start: 52px; }   
  .scene.scene--boss .scene__ui--r { grid-column: 3; margin-inline-end: 52.8px; }   
}

.scene--v4b .scene__pic {
  aspect-ratio: 996 / 598.28;
  -webkit-mask-image: url("../assets/theme/4b7328c40bdc68f5.webp"), linear-gradient(#000 83%, transparent 92%);
          mask-image: url("../assets/theme/4b7328c40bdc68f5.webp"), linear-gradient(#000 83%, transparent 92%);
  -webkit-mask-size: 100% 83.24%, 100% 100%;   -webkit-mask-position: 0 100%, 0 0;
          mask-size: 100% 83.24%, 100% 100%;           mask-position: 0 100%, 0 0;
}
.scene--v4b .scene__bg { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 100%; }
.scene--v4b .scene__render { inset-block-start: 2.507%; inset-inline-start: 17.48%; translate: none; height: 114.49%; }
.scene--v4b .scene__render .stage-fx { inset: 0; width: 100%; height: 100%; filter: blur(1.2px); }
.scene.scene--v4b .scene__ui { margin: var(--sp-4) auto 0; }
@media (min-width: 1024px) {
  .scene.scene--v4b .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 21.28%; inset-block-start: 43.96%; translate: -50% -50%;
  }
}

.scene--tali { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: var(--sp-5); }
.scene--tali .scene__pic { flex: 0 0 100%; aspect-ratio: 996 / 498; }
.scene--tali .scene__render { inset-inline-start: 40%; }
.scene.scene--tali .scene__ui { margin: var(--sp-4) 0 0; }
.tali-loop {
  --mode: 0; --cx: .733; --cy: .5; --rx: .0904; --ry: .299; --size: .1245; --tilt: 0;
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 100%; aspect-ratio: 996 / 498; pointer-events: none;
}
.js-reveal .tali-loop[data-reveal], .js-reveal .tali-loop[data-reveal].is-in { transform: none; filter: none; }
.tali {
  position: absolute; width: calc(var(--size) * 100%); height: auto; max-width: none;
  translate: -50% -50%; will-change: transform;
}
.tali-loop__fx {
  position: absolute; inset-inline-start: 50%; inset-block-start: 0;
  width: 48%; height: 100%; filter: blur(1.2px);
}
.tali-loop__fx--back { z-index: 0; }
.tali-loop__fx--mid { z-index: 11; }
.tali-loop__fx--front { z-index: 30; }
@media (min-width: 1024px) {
  .scene--tali .scene__render { inset-inline-start: 44%; }
  
  .tali-loop { --mode: 1; --cx: .765; --cy: .56; --rx: .1425; --ry: .15; --size: .085; --tilt: -10; }
  
  .scene.scene--tali .scene__ui { position: absolute; z-index: 10; margin: 0; inset-block-start: 50%; }
  .scene.scene--tali .scene__ui--char   { inset-inline-start: 76.5%; translate: -50% -50%; }
  .scene.scene--tali .scene__ui--refine { inset-inline-start: 4.67%; translate: 0 -50%; }
}

.scene--mine .scene__pic { aspect-ratio: 996 / 498; }

.crystal-shine {
  --b1: 85%; --b2: 89%;   
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../assets/theme/8918223610755bb2.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/theme/8918223610755bb2.webp") 0 0 / 100% 100% no-repeat;
  background:
    linear-gradient(105deg, transparent 44%, rgb(255 255 255 / .85) 49.5%, rgb(215 240 255 / .55) 51%, transparent 56%) var(--b1) 0 / 300% 100% no-repeat,
    linear-gradient(105deg, transparent 38%, rgb(255 110 190 / .32) 43%, rgb(110 215 255 / .34) 48%, rgb(150 255 160 / .3) 53%, rgb(255 225 110 / .26) 58%, transparent 63%) var(--b2) 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
}
.scene__render--crystals .crystal-glints { inset: 0; width: 100%; height: 100%; filter: blur(.5px); z-index: 1; }
.scene__uis {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--sp-4) var(--sp-5); margin-block-start: var(--sp-4);
}

.itemlist {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--sp-4) var(--sp-8); margin: var(--sp-5) 0 var(--sp-6); padding: 0; list-style: none;
}
.itemlist__item { display: flex; align-items: flex-start; gap: var(--sp-3); text-align: start; }
.itemlist__item .medal { flex: none; }
.itemlist__slots { display: flex; gap: 8px; flex: none; }
.blk-split__body .itemlist__text p { max-width: none; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-muted); }
.blk-split__body .itemlist__text .itemlist__name {
  margin-block-end: 2px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.itemlist__text strong { color: var(--ink); }

.scene--wardrobe .scene__pic {
  aspect-ratio: 996 / 498;
  -webkit-mask-image: url("../assets/theme/ce35f3d2740ea958.webp"), linear-gradient(#000 84%, transparent 93%);
          mask-image: url("../assets/theme/ce35f3d2740ea958.webp"), linear-gradient(#000 84%, transparent 93%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.scene--wardrobe .scene__render { translate: none; height: auto; }
.scene--wardrobe .scene__render img { width: 100%; height: auto; }
.scene__render--cabinet { inset-block-start: 3.45%; inset-inline-start: 24.66%; width: 70.61%; }
.scene__render--shaman  { inset-block-start: 8.01%; inset-inline-start: 20.02%; width: 19.18%; z-index: 2; }
.scene__over {
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 100%; aspect-ratio: 996 / 498; pointer-events: none;
}

.scene .scene__render.scene__render--shaman, .js-reveal .scene .scene__render--shaman.ink-reveal { filter: none; }
.scene__render--shaman .scene__cut img { filter: drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .5)); }
.scene__render--shaman .scene__cut {
  -webkit-mask: url("../assets/theme/ce35f3d2740ea958.webp") 24.77% -69.84% / 521.38% 89.71% no-repeat;
          mask: url("../assets/theme/ce35f3d2740ea958.webp") 24.77% -69.84% / 521.38% 89.71% no-repeat;
}
.scene.scene--wardrobe .scene__ui { margin: var(--sp-5) auto 0; }
@media (min-width: 1024px) {
  .scene.scene--wardrobe .scene__ui {
    position: absolute; margin: 0; z-index: 1;
    inset-inline-start: 4%; inset-block-start: 50%; translate: 0 -50%;
  }
  
  .scene.scene--wardrobe .scene__ui img {
    -webkit-mask-image: linear-gradient(90deg, #000 42%, rgb(0 0 0 / .2));
            mask-image: linear-gradient(90deg, #000 42%, rgb(0 0 0 / .2));
  }
  .scene.scene--wardrobe .scene__ui::before { display: none; }
  .scene.scene--wardrobe .ui__sweep {
    -webkit-mask: var(--ui-src) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, #000 42%, rgb(0 0 0 / .2));
    -webkit-mask-composite: source-in;
            mask: var(--ui-src) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, #000 42%, rgb(0 0 0 / .2));
            mask-composite: intersect;
  }
}

.scene--events { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: var(--sp-5); }
.scene--events .scene__pic { flex: 0 0 100%; aspect-ratio: 996 / 498; }
.scene.scene--events .scene__ui { margin: var(--sp-4) 0 0; }
@media (min-width: 1024px) {
  .scene--events .scene__render { inset-inline-start: 7%; translate: none; }
  .scene.scene--events .scene__ui--cal {
    position: absolute; margin: 0;
    inset-inline-end: 4.5%; inset-block-start: 6%;
  }
  .scene.scene--events .scene__ui--day {
    position: absolute; margin: 0; z-index: 2;
    inset-inline-end: calc(4.5% + 159px); inset-block-end: 6%;
  }
}

.scene--map1 .scene__render img {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 1.5%);
          mask-image: linear-gradient(to left, transparent, #000 1.5%);
}

.scene--map1 .scene__pic { aspect-ratio: 996 / 498; }
@media (min-width: 1024px) {
  .scene--map1 .scene__render { inset-inline-start: 40.5%; translate: none; }
  .scene.scene--map1 .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 4%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--mfb .scene__pic { aspect-ratio: 996 / 498; }
@media (min-width: 1024px) {
  .scene--mfb .scene__render { inset-inline-start: 46%; translate: none; }
  .scene.scene--mfb .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 22%; inset-block-start: 50%; translate: -50% -50%;
  }
}

.scene--settings .scene__pic { aspect-ratio: 996 / 498; }
@media (min-width: 1024px) {
  .scene--settings .scene__render { inset-inline-start: 5%; translate: none; }
  .scene.scene--settings .scene__ui {
    position: absolute; margin: 0;
    inset-inline-end: 4.5%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--tp .scene__pic { aspect-ratio: 996 / 498; }
@media (min-width: 1024px) {
  .scene--tp .scene__render { inset-inline-start: 57%; translate: none; }
}
@media (min-width: 1024px) {
  .scene--tp .scene__render { inset-inline-start: 59%; }
  .scene.scene--tp .scene__ui {
    position: absolute; margin: 0; max-width: none;
    inset-inline-start: 3.5%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--wiki .scene__pic { aspect-ratio: 996 / 498; }

.scene--wiki .scene__over {
  z-index: 2;
  -webkit-mask: url("../assets/theme/41993b713af8c083.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/theme/41993b713af8c083.webp") 0 0 / 100% 100% no-repeat;
}
.scene.scene--wiki .scene__ui { z-index: 1; --ui-max: 793px; }   
@media (min-width: 1024px) {
  .scene--wiki .scene__render { inset-inline-start: 60%; translate: none; }
  .scene.scene--wiki .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 7%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--ph .scene__pic, .scene--hunting .scene__pic { aspect-ratio: 996 / 498; }

.scene--ph .scene__pic { overflow: clip; }

.scene.scene--ochao .scene__render { inset-block-start: 12.4%; inset-inline-start: 9%; translate: none; }

.scene--ochao .scene__render::before {
  content: ""; position: absolute; inset: -6% -55% 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 32%, rgb(120 255 140 / .42), rgb(90 220 120 / .14) 55%, transparent 76%);
  mix-blend-mode: screen;
  animation: ochao-breathe 3.4s ease-in-out infinite alternate;
}
@keyframes ochao-breathe { from { opacity: .55; scale: .96; } to { opacity: 1; scale: 1.04; } }
.scene--ochao .scene__render img { filter: drop-shadow(0 0 3px rgb(150 255 140 / .55)) drop-shadow(0 0 16px rgb(110 255 140 / .35)); }
.scene__magic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scene--ochao .scene__render::before { animation: none; } }
.scene.scene--ph-guide .scene__uis { --ui-max: 771px; }
.scene.scene--hunting .scene__uis { --ui-max: 634px; }
@media (min-width: 1024px) {
  .scene--ph-l .scene__render { inset-inline-start: 3%; translate: none; }
  .scene--ph-r .scene__render { inset-inline-start: auto; inset-inline-end: 3%; translate: none; }
  
  .scene--ph-guide .scene__render { inset-block-start: 3%; height: 116%; }
  .scene--ph-guide.scene--ph-r .scene__render { inset-inline-end: 8%; }
  .scene.scene--ph > .scene__uis, .scene.scene--hunting > .scene__uis {
    position: absolute; margin: 0; width: 54.4%;
    inset-block-start: 50%; translate: 0 -50%;
    flex-wrap: nowrap; justify-content: center; align-items: center;
  }
  .scene.scene--ph-l > .scene__uis { inset-inline-end: 4%; }
  
  .scene--ph-bp .scene__render { inset-inline-start: 2%; inset-block-start: 1%; height: 112%; }
  
  .scene.scene--ph-bp > .scene__uis { inset-inline-end: 3.2%; width: 50%; justify-content: flex-end; }
  .scene.scene--ph-bp > .scene__uis.scene__uis { zoom: calc(var(--k, 1) * 1.06); }
  .scene.scene--ph-r > .scene__uis { inset-inline-start: 4%; }
  
  .scene.scene--ph-pvm > .scene__uis { width: 44%; }
  
  
  .scene.scene--ph-guild > .scene__uis.scene__uis { align-items: flex-start; zoom: calc(var(--k, 1) * .8); }
  
  .scene.scene--ph-guild .scene__render { inset-inline-start: 46%; inset-inline-end: auto; inset-block-start: -35%; height: 149%; translate: none; }
  .scene.scene--ph-guild > .scene__uis { inset-inline-start: 3%; width: 42%; }
  .scene--ph-guild .scene__uis > :last-child { margin-inline-start: -250px; margin-block-start: 190px; }
  
  
  .scene--hunting .scene__render { inset-inline-start: 3%; translate: none; }
  .scene.scene--hunting > .scene__uis { inset-inline-end: 4%; width: auto; }
}

.scene--challenges .scene__pic { aspect-ratio: 996 / 498; }
@media (min-width: 1024px) {
  .scene--challenges .scene__render { inset-inline-start: 60%; translate: none; }
  .scene.scene--challenges .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 14%; inset-block-start: 50%; translate: 0 -50%;
  }
}

.scene--shop .scene__pic { aspect-ratio: 996 / 498; }
.scene--shop .scene__over {
  z-index: 2;
  -webkit-mask: url("../assets/theme/1fdf1bce34fe7b9b.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/theme/1fdf1bce34fe7b9b.webp") 0 0 / 100% 100% no-repeat;
}
.scene.scene--shop .scene__ui--search { z-index: 1; --ui-max: 787px; }   
.scene.scene--shop .scene__ui--trade { z-index: 3; }
@media (min-width: 1024px) {
  .scene.scene--shop .scene__ui {
    position: absolute; margin: 0;
    inset-block-start: 50%; translate: 0 -50%;
  }
  .scene.scene--shop .scene__ui--search { inset-inline-start: 3.5%; }
  .scene.scene--shop .scene__ui--trade { inset-inline-end: 3.5%; }
  .scene.scene--shop > .scene__ui.scene__ui--search { zoom: calc(var(--k, 1) * .66); }
}

.scene__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.js-reveal .scene__pic:has(> .scene__bg.ink-reveal:not(.ink-done)) > :is(.scene__dust, .evwall__grid--scene) { opacity: 0; }
.scene__dust, .evwall__grid--scene { transition: opacity 600ms var(--ease-out); }


.scene:not([class*="scene--"]) > .scene__over {
  z-index: 2;
  -webkit-mask: url("../assets/theme/a8aa1851940a8850.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/theme/a8aa1851940a8850.webp") 0 0 / 100% 100% no-repeat;
}
@media (min-width: 1024px) {
  .scene:not([class*="scene--"]) > .scene__ui {
    position: absolute; margin: 0;
    inset-inline-start: 50%; inset-block-start: 8.5%; translate: -50% 0;
  }
}


@media (min-width: 1024px) {
  .scene > :is(.scene__ui, .scene__uis):not(.scene__ui--fish) { zoom: var(--k, 1); }
  
  .scene--alch { --alch-ring: 378px; }
  
  .scene.scene--boss > .scene__ui.scene__ui--l { zoom: calc(var(--k, 1) * .9); }   
  
  .scene:not([class*="scene--"]) > .scene__ui.scene__ui { zoom: var(--k, 1); }   
}


.scene.is-stacked {
  --stack-pad: clamp(16px, calc(var(--sk-w) * .055), 48px);   
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--sp-4) var(--sp-5);
  padding: clamp(30px, calc(var(--sk-w) * .06), 56px) var(--stack-pad) 0;
  isolation: isolate;
}

.scene.is-stacked::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--scene-bg) 50% 100% / cover no-repeat;
  -webkit-mask: var(--scene-bg) 0 100% / 100% auto no-repeat, var(--scene-bg) 0 0 / 100% auto no-repeat, var(--scene-bg) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-over;
          mask: var(--scene-bg) 0 100% / 100% auto no-repeat add, var(--scene-bg) 0 0 / 100% auto no-repeat add, var(--scene-bg) 0 0 / 100% 100% no-repeat add;
}
.scene.is-stacked > .scene__pic {
  order: 2; flex: 0 0 calc(100% + 2 * var(--stack-pad));
  margin-inline: calc(-1 * var(--stack-pad));
}
.scene.is-stacked > .scene__pic > .scene__bg { visibility: hidden; }
.scene.scene.is-stacked > :is(.scene__ui, .scene__uis) { order: 1; margin: 0; }
.scene.is-stacked > :is(.tali-loop, .scene__over) { inset-block: auto 0; }

.scene--pop .scene__ui { margin: var(--sp-4) auto 0; }
@container (min-width: 900px) {
  .scene--pop .scene__ui { margin-block-start: calc(-1 * clamp(0px, 2.5%, 28px)); }
}
.shot { max-width: 100%; }


@property --kit-spin  { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --kit-orbit { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.kit {
  --ring: min(calc(100vw - 2 * var(--gutter)), 660px);   
  --orb: calc(var(--slot) * 2);   
  width: min(100%, var(--ring));
  margin: 0 auto;
  display: grid; justify-items: center; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
.kit__cap { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
.kit__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ornament-hi);
}
.kit__hint { font-size: var(--fs-micro); color: var(--ink-muted); }

.kit__tabs {
  display: flex; gap: 3px;
  max-width: 100%;
}
.kit__tab {
  min-height: 30px; padding: 0 var(--sp-4);
  border-radius: 1px;
  background: var(--btn-grain), var(--btn-fill);
  box-shadow: inset 0 0 0 1px var(--btn-rim), inset 0 0 0 3px var(--btn-inset);
  font: 12px/1 var(--font-game);
  color: var(--btn-text); white-space: nowrap; cursor: var(--cursor-hover);
  text-shadow: 0 1px 0 rgb(var(--shadow-rgb) / .9);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kit__tab:hover { --btn-fill: var(--btn-fill-over); color: var(--btn-text-on); }
.kit__tab:active { --btn-fill: var(--btn-fill-down); }
@media (max-width: 559px) { .kit__more { display: none; } }   
.kit__tab[aria-selected="true"] {
  --btn-fill: var(--btn-fill-down);
  box-shadow: inset 0 0 0 1px var(--brass-300), inset 0 0 0 3px var(--btn-inset), inset 0 2px 6px rgb(var(--shadow-rgb) / .7);
  color: var(--tip-name);
}

@media (pointer: coarse) { .kit__tab { min-height: 44px; } }
.kit__stage {
  position: relative;
  width: var(--ring); max-width: 100%; aspect-ratio: 1;
  container-type: inline-size;   
  
  animation: kit-orbit 48s linear infinite;
}
.kit__stage:hover, .kit__stage:focus-within,
.kit__stage:has(.kit__item[aria-expanded="true"]) { animation-play-state: paused; }
@keyframes kit-orbit { to { --kit-orbit: 360deg; } }

.kit__stage::before, .kit__stage::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.kit__stage::before {
  inset: calc(var(--orb) / 2);
  border: 1px solid rgb(var(--brass-400-rgb) / .38);
  background: radial-gradient(closest-side, rgb(var(--bg-900-rgb) / .5), rgb(var(--bg-900-rgb) / .15) 80%, transparent);
}
.kit__stage::after {
  inset: calc(var(--orb) / 2 + var(--orb) * .42);
  border: 1px solid rgb(var(--brass-400-rgb) / .16);
}

.ground-light .kit__stage::before {
  border-color: rgb(var(--bg-900-rgb) / .3);
  background: radial-gradient(closest-side, rgb(var(--highlight-rgb) / .38), rgb(var(--highlight-rgb) / .12) 80%, transparent);
}
.ground-light .kit__stage::after { border-color: rgb(var(--bg-900-rgb) / .16); }

.kit__disc {
  position: absolute; inset: 9.5%;
  background: var(--wash);
  -webkit-mask: var(--brush-disc) center / 100% 100% no-repeat;
          mask: var(--brush-disc) center / 100% 100% no-repeat;
  pointer-events: none;
}

.kit__disc--bg {
  background:
    radial-gradient(closest-side, transparent 56%, rgb(var(--bg-900-rgb) / .6) 100%),
    url("../assets/theme/8681056c8edba10e.webp") 50% 50% / auto 116% no-repeat;
}
.kit__stage:has(.kit__disc)::before { background: none; }
.kit__stage:has(.kit__disc)::after { content: none; }

.kit__render {
  position: absolute; z-index: 1;
  inset-inline-start: 50%; inset-block-end: calc(var(--orb) * .9);
  height: 80%;
  translate: var(--render-x, -71%) 0;
  pointer-events: none;
  
  filter: drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .5));
}
.kit__render img { height: 100%; width: auto; max-width: none; }

.kit__cut {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 52%), var(--brush-disc);
          mask-image: linear-gradient(#000 40%, transparent 52%), var(--brush-disc);
  -webkit-mask-size: 100% 100%, 81% 81%;   mask-size: 100% 100%, 81% 81%;
  -webkit-mask-position: 0 0, 50% 50%;     mask-position: 0 0, 50% 50%;
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
}
.kit__ring {
  --n: 8; --kit-spin: -28deg;
  --glow: var(--slot-glow-boost-rgb); --glow-a: .08;
  position: absolute; inset: 0; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  visibility: hidden;
  transition: --kit-spin 520ms var(--ease-out);
}
.kit__ring.is-active { visibility: visible; --kit-spin: 0deg; }
.kit__ring--gear  { --glow: var(--slot-glow-gear-rgb); --glow-a: .22; }
.kit__ring--shop  { --n: 7;  --glow: var(--slot-glow-shop-rgb); --glow-a: .28; }
.kit__ring--boost { --n: 12; }
.kit__orb {
  --a: calc(-90deg + (var(--i) + .5) * 360deg / var(--n) + var(--kit-spin) + var(--kit-orbit));
  position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  width: var(--slot); height: calc(var(--slot) * var(--h, 1));
  margin: calc(var(--slot) * var(--h, 1) / -2) 0 0 calc(var(--slot) / -2);
  transform: rotate(var(--a)) translate(calc(50cqi - var(--orb) / 2)) rotate(calc(var(--a) * -1));
  opacity: 0; scale: .5;
  transition: opacity 200ms var(--ease-out), scale 380ms var(--ease-out);
}
.kit__ring.is-active .kit__orb { opacity: 1; scale: 1; transition-delay: calc(var(--i) * 30ms); }
.kit__orb:nth-child(1)  { --i: 0; }  .kit__orb:nth-child(2)  { --i: 1; }
.kit__orb:nth-child(3)  { --i: 2; }  .kit__orb:nth-child(4)  { --i: 3; }
.kit__orb:nth-child(5)  { --i: 4; }  .kit__orb:nth-child(6)  { --i: 5; }
.kit__orb:nth-child(7)  { --i: 6; }  .kit__orb:nth-child(8)  { --i: 7; }
.kit__orb:nth-child(9)  { --i: 8; }  .kit__orb:nth-child(10) { --i: 9; }
.kit__orb:nth-child(11) { --i: 10; } .kit__orb:nth-child(12) { --i: 11; }

.kit__orb > :first-child, .medal__btn, .slot, .kit__core {
  --h: 1;
  display: grid; place-items: center;
  width: var(--slot); height: calc(var(--slot) * var(--h));
  padding: 0; border: 0; border-radius: 0;
  position: relative;
  
  background:
    radial-gradient(closest-side, rgb(var(--glow, var(--slot-glow-boost-rgb)) / var(--glow-a, .1)), transparent) 0 0 / var(--slot) var(--slot) repeat-y,
    var(--slot-frame-n, var(--slot-frame)) 0 0 / var(--slot) calc(var(--slot) * var(--h)) no-repeat;
}

@media (pointer: coarse) {
  .kit__item::before { content: ""; position: absolute; inset: -6px; }
  .itemrow { gap: 14px; }   
}

.medal__btn, .slot {
  background:
    radial-gradient(closest-side, rgb(var(--glow, var(--slot-glow-boost-rgb)) / var(--glow-a, .1)), transparent) 0 0 / var(--slot) var(--slot) repeat-y,
    #0b0908;
  border: 0 solid transparent;
  border-image: url("../assets/theme/6829ed291dda663f.png") 10 / 10px / 4px stretch;
}
:is(.kit__orb, .medal, .slot-holder):has(img[height="64"]) { --h: 2; --slot-frame-n: var(--slot-frame-2); }
:is(.kit__orb, .medal, .slot-holder):has(img[height="96"]) { --h: 3; --slot-frame-n: var(--slot-frame-3); }
:is(.kit__orb, .medal, .slot-holder):has(img[height="64"]) > :first-child { --h: 2; }
:is(.kit__orb, .medal, .slot-holder):has(img[height="96"]) > :first-child { --h: 3; }
:is(.kit__orb, .medal, .kit__core, .slot) img, .kit__orb > img {
  width: var(--slot); height: auto; max-width: none;
  transition: filter var(--dur-fast) var(--ease-out);
}

.kit__ring--gear .kit__orb::after {
  content: "+9"; content: "+9" / "";
  position: absolute; inset-inline-end: 9px; inset-block-end: 10px;
  padding: 1px 2px;
  background: rgb(14 9 7 / .9);
  font: 700 9px/1 var(--font-game); color: var(--tip-name);
  pointer-events: none;
}
.kit__item { cursor: var(--cursor-hover); }
:is(.kit__orb, .medal) { transition: filter var(--dur-fast) var(--ease-out); }
:is(.kit__orb, .medal):has(.kit__item:hover, .kit__item[aria-expanded="true"]) {
  filter: drop-shadow(0 0 5px rgb(var(--glow, var(--brass-300-rgb)) / .75));
}
.kit__item:hover, .kit__item[aria-expanded="true"] { --glow-a: .5; }
.kit__item:hover img, .kit__item[aria-expanded="true"] img { filter: brightness(1.15); }

.kit__orb, .kit__orb:has(img[height="64"]), .kit__orb:has(img[height="96"]) {
  width: var(--socket); height: var(--socket);
  margin: calc(var(--socket) / -2) 0 0 calc(var(--socket) / -2);
}
.kit__orb > :first-child, .kit__orb:has(img[height="64"]) > :first-child, .kit__core {
  width: var(--socket); height: var(--socket);
  border-radius: 50%;   
  background: var(--socket-frame) center / var(--socket) var(--socket) no-repeat;
}
.kit__orb img[height="64"], .kit__orb img[height="96"] { width: auto; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .kit__ring, .kit__orb, .kit__ring.is-active .kit__orb { transition: none; }
  .kit__stage { animation: none; }
}

.shot-stage--ring {
  --alch-ring: min(calc(100vw - 2 * var(--gutter)), 480px);
  width: min(100%, var(--alch-ring));   
}
.kit--alch {
  --ring: var(--alch-ring, 480px);
}
.kit__ring--alch { --n: 6; }
.kit__orb--garnet   { --glow: var(--gem-garnet-rgb); }
.kit__orb--onyx     { --glow: var(--gem-onyx-rgb); }
.kit__orb--diamond  { --glow: var(--gem-diamond-rgb); }
.kit__orb--ruby     { --glow: var(--gem-ruby-rgb); }
.kit__orb--jade     { --glow: var(--gem-jade-rgb); }
.kit__orb--sapphire { --glow: var(--gem-sapphire-rgb); }
.kit__ring--alch { --glow-a: .34; }

.kit__name {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 1px 6px rgb(var(--shadow-rgb) / .9);
}

.ground-light .kit__name { text-shadow: 0 0 6px rgb(var(--highlight-rgb) / .6); }

.kit__core {
  --glow: var(--brass-300-rgb); --glow-a: .4;
  position: absolute; z-index: 2;
  inset-inline-start: 50%; inset-block-start: 50%;
  translate: -50% -50%;
}

.kit__cap--below { order: 1; margin-block-start: var(--sp-5); max-width: 44ch; }

.note--goal { max-width: 760px; margin: var(--sp-6) auto 0; }
.note__icon {
  width: 56px; height: auto; margin: 0 auto var(--sp-3);
  filter: drop-shadow(0 4px 10px rgb(var(--brass-400-rgb) / .35));
}
.note.note--goal p { max-width: 62ch; font-size: var(--fs-body); }
.note.note--goal .note__small { font-size: var(--fs-sm); }

.blk-clips {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-block-start: var(--sp-6);
}
@media (min-width: 900px) { .blk-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clip {
  margin: 0;
  filter: drop-shadow(0 14px 24px rgb(var(--shadow-rgb) / .45));   
}
.clip video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-900);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--clip-edge-y) var(--clip-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--clip-edge-y) var(--clip-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .clip video { mask: var(--brush-block) center / 100% 100% no-repeat; }
}
.clip__cap {
  margin-block-start: var(--sp-3);
  text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}

.ground-light .clip__cap {
  width: fit-content; max-width: 100%; margin-inline: auto; padding: 3px 16px;
  position: relative; isolation: isolate;
}

.ground-light .clip__cap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -9px -18px;
  background: rgb(var(--highlight-rgb) / .62);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / 10px 18px round;
  mask-border: var(--brush-block) var(--brush-slice) fill / 10px 18px round;
}

.chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-6) auto 0; padding: 0; list-style: none;
}
.chips li {
  padding: 6px var(--sp-4);
  border: 1px solid var(--note-border); border-radius: 999px;
  background: var(--note-fill);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}


.shot-stage--card { width: min(100%, 340px); }
.itemcard { margin: 0; display: grid; justify-items: center; gap: var(--sp-5); }
.gtip.gtip--static {   
  position: relative; inset: auto; z-index: auto;
  width: 100%; min-width: 0; max-width: 320px;
  pointer-events: auto;
}
.gtip--static p + p { margin-block-start: 2px; }
.gtip .gtip__info { margin-block-start: 0; }
.gtip .gtip__icons { display: flex; justify-content: center; align-items: center; gap: 6px; margin-block: 4px 6px; color: var(--tip-text); }
.gtip .gtip__icons img { width: 32px; height: 32px; }
.gtip .gtip__dur { margin-block-start: var(--sp-2); color: var(--tip-name); }
.gtip .gtip__max { color: var(--tip-name); }
.itemrow {
  --glow: var(--slot-glow-gear-rgb); --glow-a: .22;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px;   
  justify-self: stretch;   
  margin: 0; padding: 0; list-style: none;
}
.medal { width: var(--slot); }

.itemcard--tip { gap: var(--sp-3); }
.itemcard--tip .itemrow { --glow-a: .3; }
.shot-stage--tip { width: min(100%, 270px); }
.shot-row > .itemcard--tip { width: min(100%, 270px); }

.shot-stage--card, .shot-stage--tip { --render-overlap: 0px; }

.itemcard--inbody { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.itemcard--inbody .itemrow { flex: none; }
.itemcard--inbody .gtip.gtip--static { width: auto; }
@media (min-width: 1024px) { .blk-split.is-row .itemcard--inbody { justify-content: flex-start; } }
.gtip .gtip__gap { margin-block-start: 8px; }
.gtip .gtip__rule { margin: 8px 4px; border: 0; border-block-start: 1px solid var(--tip-border); }

.fishart { margin: 0; }
.fishart img { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgb(var(--shadow-rgb) / .35)); }
@media (min-width: 1024px) { .blk-split.is-row .shot-stage--tip { width: 270px; } }


.lstones { margin: 0; display: grid; justify-items: center; gap: var(--sp-6); width: min(100%, 720px); }

.blk-split__body > .lstones { width: auto; margin: var(--sp-4) auto var(--sp-5); }
.forge { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; max-width: 100%; }

.forge__step { display: grid; grid-template-rows: 56px auto; justify-items: center; gap: var(--sp-2); width: 112px; text-align: center; }
.forge__step > :first-child { align-self: end; }
.forge__holder { position: relative; }
.forge__medal { --glow: var(--slot-glow-gear-rgb); --glow-a: .26; }
.forge__medal--crystal { --glow-a: .4; }

.forge__stone { width: auto; height: 56px; filter: drop-shadow(0 3px 5px rgb(var(--shadow-rgb) / .45)); }
.forge__count {
  position: absolute; inset-inline-start: calc(100% - 6px); inset-block-end: -4px;
  font: 700 12px/1 var(--font-game); color: var(--tip-name);
  text-shadow: 0 1px 0 rgb(var(--shadow-rgb)), 0 0 4px rgb(var(--shadow-rgb));
}
.forge__label {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}

.forge__arrow {
  align-self: flex-start; margin-block-start: 39px;
  width: 40px; height: 2px; border-radius: 1px; background: var(--title-rust);
  position: relative;
  animation: forge-nudge 1.8s ease-in-out infinite;
}
.forge__arrow::after {
  content: ""; position: absolute; inset-inline-end: -3px; inset-block-start: -5px;
  border: 6px solid transparent; border-inline-start: 10px solid var(--title-rust);
  border-inline-end: 0;
}
.forge__arrow + .forge__step ~ .forge__arrow { animation-delay: -.9s; }
@keyframes forge-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { .forge__arrow { animation: none; } }

@media (max-width: 479px) {
  .forge { flex-wrap: nowrap; gap: var(--sp-2); }
  .forge__step { width: 80px; }
  .forge__arrow { width: 22px; }
}

.scene--legend .scene__pic { aspect-ratio: 996 / 498; overflow: clip; }
.scene--legend .scene__render { translate: none; isolation: isolate; }
.scene--legend .scene__render--lstone { inset-inline-start: 14%; inset-block-start: 26%; height: 76%; }
.scene--legend .scene__render--lboss { inset-inline-start: auto; inset-inline-end: 3.5%; inset-block-start: 26%; height: 74%; }
.scene--legend .scene__render::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -8% -30% 10%;
  background: radial-gradient(ellipse 46% 44% at 50% 40%, rgb(var(--lg-rgb) / .38), rgb(var(--lg-rgb) / .12) 55%, transparent 75%);
  animation: legend-breathe 3.8s ease-in-out infinite alternate;
}
.scene--legend .scene__render--lstone { --lg-rgb: 255 150 60; }
.scene--legend .scene__render--lboss { --lg-rgb: 255 205 110; }
.scene--legend .scene__render--lboss::before { inset: -6% -8% 14%; animation-delay: -1.9s; }
@keyframes legend-breathe { from { opacity: .55; scale: .97; } to { opacity: 1; scale: 1.03; } }
.lbadge {
  position: absolute; width: 10%; aspect-ratio: 1; translate: -50% 0;
  pointer-events: none;
}
.lbadge--stone { inset-inline-start: 27.3%; inset-block-start: 6.55%; }
.lbadge--boss  { inset-inline-start: 69.5%; inset-block-start: 6.55%; }
.lbadge img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 4px 8px rgb(var(--shadow-rgb) / .55));
  animation: lbadge-float 3.2s ease-in-out infinite alternate;
}
.lbadge--boss img { animation-delay: -1.6s; }
@keyframes lbadge-float { from { translate: 0 3%; opacity: .6; } to { translate: 0 -3%; opacity: 1; } }

.lveins { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; animation: lveins-pulse 2.8s ease-in-out infinite alternate; }
.lveins > i {
  position: absolute; inset: 0; background: rgb(255 196 92);
  -webkit-mask: url("../assets/theme/3cfc81a5f0a37234.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/theme/3cfc81a5f0a37234.webp") 0 0 / 100% 100% no-repeat;
}
.lveins--bloom { filter: blur(4px); animation-delay: -.9s; }
.lveins--bloom > i { background: rgb(255 140 40); }
@keyframes lveins-pulse { from { opacity: .2; } to { opacity: .95; } }

.scene__render--lstone { --aura: url("../assets/theme/3b2949f5574e2933.webp"); --aura-cut: linear-gradient(#000, #000);
  --aura-0: 255 110 25; --aura-1: 255 160 60; --aura-2: 255 200 110; }
.scene__render--lboss { --aura: url("../assets/theme/693a6f45ba4d1b2d.webp"); --aura-cut: linear-gradient(#000, #000);
  --aura-0: 255 135 30; --aura-1: 255 190 80; --aura-2: 255 222 140; }
.scene__render--lboss img { filter: drop-shadow(0 0 1.5px rgb(255 228 160 / .85)); }
.laura {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: blur(6px); transform-origin: 50% 100%;
  animation: laura-flicker 2.3s ease-in-out infinite alternate;
}
.laura--wide { filter: blur(14px); animation-duration: 3.4s; animation-delay: -1.3s; }
.laura--wide > i { opacity: .5; }
.scene__render--lstone .laura { filter: blur(7px); animation-duration: 2.8s; animation-delay: -.7s; }
.laura > i {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgb(var(--aura-0)), rgb(var(--aura-1)) 55%, rgb(var(--aura-2)));
  -webkit-mask-image: var(--aura), var(--aura-cut);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
          mask-image: var(--aura), var(--aura-cut);
          mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect;
}
@keyframes laura-flicker {
  0% { opacity: .32; scale: 1.01; translate: 0 0; }
  45% { opacity: .58; scale: 1.03; translate: 0 -.8%; }
  70% { opacity: .44; scale: 1.025; translate: 0 -.5%; }
  100% { opacity: .7; scale: 1.045; translate: 0 -1.4%; }
}
.legend-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .scene--legend .scene__render::before, .lbadge img, .lveins, .laura { animation: none; }
}
.blk-trio--2 { max-width: 960px; margin-inline: auto; }

.blk-trio--maps .card {
  background: none; overflow: visible; gap: var(--sp-2);
  -webkit-mask-box-image: none; mask-border: none;
}
.blk-trio--maps .card img {
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / 16px 22px round;
  mask-border: var(--brush-block) var(--brush-slice) fill / 16px 22px round;
}
.blk-trio--maps .card figcaption {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border: 0;
  background: var(--card-fill);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / 14px 22px round;
  mask-border: var(--brush-block) var(--brush-slice) fill / 14px 22px round;
}

.blk-trio .card figcaption p.card__lv {
  display: inline-block; margin-block-start: var(--sp-3);
  padding: 3px 10px 4px;
  border: 1px solid rgb(var(--brass-400-rgb) / .7); border-radius: 2px;
  background: rgb(var(--bg-900-rgb) / .7);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .6);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); line-height: 1.2; letter-spacing: .04em;
  color: var(--text-primary);
}

@media (min-width: 480px) {
  .blk-trio.blk-trio--maps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blk-trio--maps > * { grid-column: span 2; }
  .blk-trio--maps > :last-child { grid-column: 2 / 4; }
}
@media (min-width: 768px) {
  .blk-trio.blk-trio--maps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .blk-trio--maps > :nth-child(4) { grid-column: 2 / 4; }
  .blk-trio--maps > :last-child { grid-column: 4 / 6; }
}
@media (min-width: 768px) { .blk-trio.blk-trio--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.evwall { margin-block-start: var(--sp-7); text-align: center; }
.evwall__title { margin-block-end: var(--sp-5); }

.evwall__grid {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  max-width: 1040px; margin: 0 auto; padding: 0; list-style: none;
  background: radial-gradient(60% 55% at 50% 50%, rgb(var(--bg-900-rgb) / .55), rgb(var(--bg-900-rgb) / .2) 70%, transparent);
}
.evwall__grid.is-field { display: block; height: var(--field-h, 420px); }

.evwall.is-around { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.evwall.is-around .evwall__grid { position: absolute; inset: 0; height: auto; max-width: none; background: none; }
.evwall__grid.is-field > li {
  pointer-events: auto;
  position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y);
  width: 57px; height: 57px;   
  translate: -50% -50%; scale: var(--s, 1);
  opacity: var(--o, 1);
  animation: ev-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.evwall__grid.is-field > li:hover, .evwall__grid.is-field > li:focus-within { opacity: 1; animation-play-state: paused; z-index: 1; }
@keyframes ev-float {
  from { transform: translate(0, 0) rotate(calc(var(--r, 0deg) * -1)); }
  to   { transform: translate(var(--fx, 0px), var(--fy, -8px)) rotate(var(--r, 0deg)); }
}

.evwall__grid.is-rising > li { animation: none; opacity: 0; }
.evwall__grid.is-rising .evwall__btn { animation: ev-sway var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.evwall__grid.is-field > li.is-held { opacity: 1 !important; pointer-events: auto !important; z-index: 1; }
.evwall__grid.is-field > li.is-held .evwall__btn { animation-play-state: paused; }
@keyframes ev-sway {
  from { transform: translateX(calc(var(--fx, 0px) * -1)) rotate(calc(var(--r, 0deg) * -1)); }
  to   { transform: translateX(var(--fx, 0px)) rotate(var(--r, 0deg)); }
}

.evwall__btn { aspect-ratio: 1; border-radius: 50%; padding: 0; }
.evwall__btn img { max-width: none; }
.evwall__btn img { width: 57px; height: 57px; filter: drop-shadow(0 6px 8px rgb(var(--shadow-rgb) / .55)); transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.evwall__btn:hover img, .evwall__btn[aria-expanded="true"] img { transform: scale(1.12); filter: drop-shadow(0 8px 10px rgb(var(--shadow-rgb) / .6)) brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .evwall__grid.is-field > li, .evwall__grid .evwall__btn { animation: none; } }


.evwall--tips { margin: 0; }

.scene__hits { position: absolute; inset: 0; pointer-events: none; }
.scene__hit { position: absolute; pointer-events: auto; }
.evwall__grid.evwall__grid--scene {
  position: absolute; inset: 0; z-index: 0;
  display: block; max-width: none; margin: 0; background: none; pointer-events: none;
}


.blk-split--table { --split-text: max-content; }

.blk-split--table {
  --bio-head: var(--brass-300); --bio-line: rgb(var(--brass-300-rgb) / .3); --bio-row: rgb(var(--brass-300-rgb) / .1);
  --bio-bonus: var(--tip-bonus); --bio-fill: rgb(var(--bg-900-rgb) / .35);
  --bio-frame: #9a846b; --bio-frame-edge: rgb(var(--shadow-rgb) / .9);
  --bio-key-tl: var(--frame-key-tl); --bio-key-tr: var(--frame-key-tr);
  --bio-key-bl: var(--frame-key-bl); --bio-key-br: var(--frame-key-br);
}
.ground-light .blk-split--table {
  --bio-head: var(--accent); --bio-line: rgb(var(--bg-900-rgb) / .35); --bio-row: rgb(var(--bg-900-rgb) / .14);
  --bio-bonus: var(--accent); --bio-fill: rgb(var(--highlight-rgb) / .16);
  --bio-frame: #3d2d0b; --bio-frame-edge: rgb(var(--highlight-rgb) / .55);
  --bio-key-tl: var(--frame-key-tl-light); --bio-key-tr: var(--frame-key-tr-light);
  --bio-key-bl: var(--frame-key-bl-light); --bio-key-br: var(--frame-key-br-light);
}

.biotable {
  position: relative;
  width: fit-content; max-width: 100%; margin-inline: auto;
  margin-block-start: var(--sp-4);
  padding: 12px 14px;              
  border: 2px solid var(--bio-frame);
  
  box-shadow: 0 0 0 1px var(--bio-frame-edge), inset 0 0 0 1px var(--bio-frame-edge);
  background: var(--bio-fill);
}

.biotable::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  background: var(--bio-key-tl) 0 0 no-repeat, var(--bio-key-tr) 100% 0 no-repeat,
              var(--bio-key-bl) 0 100% no-repeat, var(--bio-key-br) 100% 100% no-repeat;
}
.bio { margin-inline: auto; border-collapse: collapse; font-size: .875rem; line-height: 1.35; }
.bio :is(th, td) { padding: 6px 10px; vertical-align: middle; text-align: start; font-weight: 400; }
.bio thead th {
  padding-block: 8px 7px;
  font: 500 .75rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bio-head);
  border-block-end: 1px solid var(--bio-line);
}
.bio thead th:first-child, .bio__lv { text-align: center; }
.bio tbody tr + tr > * { border-block-start: 1px solid var(--bio-row); }
.bio tbody tr:hover > * { background: var(--bio-row); }
.bio__lv { font: 500 1rem/1 var(--font-display); color: var(--bio-head); font-variant-numeric: tabular-nums; }
.bio__item { display: flex; align-items: center; gap: 10px; }
.bio__item .slot { flex: none; }
.bio__count {
  position: absolute; inset-inline-end: 1px; inset-block-end: 0;
  font: 700 9px/1 var(--font-game); color: #fff;
  text-shadow: 0 1px 0 rgb(var(--shadow-rgb)), 0 0 3px rgb(var(--shadow-rgb));
  pointer-events: none;
}
.bio__name { color: var(--ink); font-weight: 500; }
:is(.bio__cd, .bio__ch) { white-space: nowrap; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bio__bonus { margin: 0; padding: 0; list-style: none; color: var(--ink-muted); }
.bio__bonus b { font-weight: 600; color: var(--bio-bonus); white-space: nowrap; }
@media (max-width: 639px) {
  .bio, .bio tbody { display: block; }
  .bio thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bio tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 9px 4px; }
  .bio tbody tr + tr { border-block-start: 1px solid var(--bio-row); }
  .bio tbody tr + tr > *, .bio tbody tr:hover > * { border: 0; background: none; }
  .bio :is(th, td) { padding: 0; }
  
  .bio th[scope="row"] { grid-area: 1 / 1; }
  .bio .bio__lv { grid-area: 1 / 2; align-self: center; justify-self: end; font-size: .9rem; }
  .bio__lv::before { content: "Lv. "; }
  .bio td:last-child { grid-area: 2 / 1 / 3 / 3; padding-inline-start: 42px; }
  .bio :is(.bio__cd, .bio__ch) { grid-row: 3; font-size: .8125rem; }
  .bio .bio__cd { grid-column: 1; padding-inline-start: 42px; }
  .bio .bio__ch { grid-column: 2; justify-self: end; }
  :is(.bio__cd, .bio__ch)::before { content: attr(data-label) "\00A0\00A0"; color: var(--bio-head); }
}


.h3-icon { display: inline-block; width: 32px; height: 32px; margin-inline-end: var(--sp-2); vertical-align: -9px; }


.qol {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--sp-3);
  max-width: 1040px; margin: 0 auto; padding: 0; list-style: none;
}
.qol__item {
  display: grid; align-content: center; gap: var(--sp-1);
  min-height: 68px; padding: var(--sp-3) var(--sp-4);
  text-align: center;
  background: var(--note-fill);
  border: 1px solid var(--note-border); border-radius: var(--card-radius);
}
.qol__item h3 { font-size: 1rem; }
.qol__item p { margin: 0 auto; font-size: var(--fs-sm); }
.qol__item--more { background: none; border-style: dashed; }
.qol__item--more h3 { color: var(--ornament); }

.ground-light .qol__item--more h3 { color: var(--ink); }

.ground-light .qol__item--more { --bfill: var(--note-fill); }


.blk-lede .closing__thanks {
  margin-block-start: var(--sp-6);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: .06em; line-height: 1.5; color: var(--ink);
}
.ground-dark .blk-lede .closing__thanks { color: var(--brass-300); }

.kit__tips { display: none; }            
.gtip {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  z-index: var(--z-nav);
  width: max-content; min-width: 200px; max-width: min(290px, calc(100vw - 24px));
  padding: 3px 9px 5px;              
  border: 7px solid transparent;
  border-image: var(--tip-frame) 7 fill / 7px stretch;
  box-shadow: 0 10px 22px rgb(var(--shadow-rgb) / .55);
  font: 12px/1.5 var(--font-game);
  color: var(--tip-text);
  text-align: center;
  pointer-events: none;
}
.gtip[hidden] { display: none; }
.gtip p { max-width: none; color: inherit; overflow-wrap: normal; }

.gtip > :first-child { font-weight: 700; margin-block-end: 5px; }
.gtip .gtip__name  { color: var(--tip-name); }
.gtip .gtip__title { margin-block-end: var(--sp-1); }
.gtip .gtip__event { margin-block-end: var(--sp-2); }
.gtip .gtip__stat  { color: var(--tip-stat); }
.gtip .gtip__bonus { color: var(--tip-bonus); }
.gtip .gtip__neg   { color: var(--tip-neg); }


.shot-stage { position: relative; isolation: isolate; width: fit-content; max-width: 100%; }

.shot-stage--frame { width: min(100%, 460px); }
.stage-render { display: none; }

.shot-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: var(--sp-6) var(--sp-7);
  max-width: 100%;
}
.shot-row[data-side="right"] { flex-direction: row-reverse; }

.shot-row.is-wrap { width: fit-content; margin-inline: auto; flex-direction: column; align-items: center; }
@media (min-width: 1024px) {
  
  .shot-stage {
    margin-inline: auto;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: var(--stage-render-h);
  }
  
  .shot-stage[data-side="left"]  { translate: var(--shift, var(--solo-shift)) 0; }
  .shot-stage[data-side="right"] { translate: calc(var(--shift, var(--solo-shift)) * -1) 0; }
  
  .shot-row .shot-stage { margin-inline: 0; translate: none; }
  .shot-row[data-side="left"]  { translate: var(--shift, var(--solo-shift)) 0; }
  .shot-row[data-side="right"] { translate: calc(var(--shift, var(--solo-shift)) * -1) 0; }
  
  :is(.shot-stage, .shot-row).is-noroom .stage-render { display: none; }
  .shot-stage.is-noroom, .shot-row.is-noroom .shot-stage { min-height: 0; }
  .stage-render {
    display: block;
    position: absolute; z-index: 1;           
    inset-block-end: 0;
    
    height: var(--stage-render-h);
    pointer-events: none;
  }
  
  .js-reveal .stage-render.ink-reveal:not(.stage-render--fx),
  .stage-render:not(.stage-render--fx), .stage-render__fig {
    filter: drop-shadow(0 14px 22px rgb(var(--shadow-rgb) / .5));
  }
  .stage-render__fig { display: block; height: 100%; }
  .stage-render :is(img, video) {
    height: 100%; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 64%, transparent 98%);
  }
  
  .shot-stage[data-side="left"]  .stage-render { inset-inline-end: 100%;   translate: var(--render-overlap) 0; }
  .shot-stage[data-side="right"] .stage-render { inset-inline-start: 100%; translate: calc(var(--render-overlap) * -1) 0; }
  .shot-stage[data-side="right"] .stage-render img[src*="render-placeholder"] { transform: scaleX(-1); }
  
  .stage-fx {
    display: block; position: absolute; inset-inline: -12%; inset-block-end: 0;
    height: 130%;
    pointer-events: none;
    filter: blur(1.6px);   
  }
  .stage-fx--back  { z-index: -1; }
  .stage-fx--front { z-index: 1; }
  
  .blk-split--stack > .shot-stage[data-side="right"] { translate: calc(var(--render-room) / -2) 0; }
  .blk-split--stack > .shot-stage[data-side="left"]  { translate: calc(var(--render-room) / 2) 0; }
  
  .stage-render video[data-fx="gaya"] {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 64%, transparent 98%);
            mask-image: linear-gradient(180deg, transparent, #000 7%, #000 64%, transparent 98%);
  }
}



.legend {
  list-style: none; padding: 0; margin: var(--sp-5) auto 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  max-width: 560px;
}
.legend li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  text-align: start; font-size: var(--fs-sm);
  background: var(--note-fill);
  border: 1px solid var(--note-border);
  border-radius: var(--card-radius);
}
.legend img { flex: none; width: 32px; height: 32px; }

.legend--items .medal { flex: none; --glow: var(--slot-glow-gear-rgb); --glow-a: .3; }
.legend strong { display: block; }

.label {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--ornament);
}


.blk-lede { text-align: center; }
.blk-lede p {
  margin-inline: auto;
  max-width: 60ch;
  color: var(--ink-muted);
}
.blk-lede p + p { margin-block-start: var(--sp-5); }


.blk-split {
  display: grid;
  
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(var(--brush-bleed-y) + var(--sp-4));   
}
.blk-split > *, .blk-trio > * { min-width: 0; }
.blk-split__body { text-align: center; }
.blk-split__body > * + * { margin-block-start: var(--sp-4); }
.blk-split__body h3 + p { margin-block-start: var(--sp-3); }

.blk-split__body > h3 { width: fit-content; max-width: 100%; margin-inline: auto; }
.blk-split__body > h3::after {
  content: ""; display: block; height: 17px; min-width: 9em;
  margin-block-start: var(--sp-2);
  background: var(--title-rust);
  -webkit-mask: var(--knot-end-r) calc(50% - 11.5px) 0 / 17px 17px no-repeat,
                var(--knot-end) calc(50% + 11.5px) 0 / 17px 17px no-repeat,
                linear-gradient(90deg, transparent, #000 70%) 0 7.5px / calc(50% - 19px) 1.6px no-repeat,
                linear-gradient(90deg, #000 30%, transparent) 100% 7.5px / calc(50% - 19px) 1.6px no-repeat;
          mask: var(--knot-end-r) calc(50% - 11.5px) 0 / 17px 17px no-repeat,
                var(--knot-end) calc(50% + 11.5px) 0 / 17px 17px no-repeat,
                linear-gradient(90deg, transparent, #000 70%) 0 7.5px / calc(50% - 19px) 1.6px no-repeat,
                linear-gradient(90deg, #000 30%, transparent) 100% 7.5px / calc(50% - 19px) 1.6px no-repeat;
}
.blk-split__body p { max-width: 60ch; margin-inline: auto; }

.blk-duo { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
.blk-duo > .blk-duo__col { margin: 0; }
.blk-duo__col > * + * { margin-block-start: var(--sp-4); }
.blk-duo__col > h3 + p { margin-block-start: var(--sp-3); }
.blk-duo__col > h3 { width: fit-content; max-width: 100%; margin-inline: auto; }
.blk-duo__col > h3::after {
  content: ""; display: block; height: 17px; min-width: 9em;
  margin-block-start: var(--sp-2);
  background: var(--title-rust);
  -webkit-mask: var(--knot-end-r) calc(50% - 11.5px) 0 / 17px 17px no-repeat,
                var(--knot-end) calc(50% + 11.5px) 0 / 17px 17px no-repeat,
                linear-gradient(90deg, transparent, #000 70%) 0 7.5px / calc(50% - 19px) 1.6px no-repeat,
                linear-gradient(90deg, #000 30%, transparent) 100% 7.5px / calc(50% - 19px) 1.6px no-repeat;
          mask: var(--knot-end-r) calc(50% - 11.5px) 0 / 17px 17px no-repeat,
                var(--knot-end) calc(50% + 11.5px) 0 / 17px 17px no-repeat,
                linear-gradient(90deg, transparent, #000 70%) 0 7.5px / calc(50% - 19px) 1.6px no-repeat,
                linear-gradient(90deg, #000 30%, transparent) 100% 7.5px / calc(50% - 19px) 1.6px no-repeat;
}

.blk-duo__col > h3 { position: relative; }
.blk-duo__col > h3 .note__icon {
  position: absolute; inset-inline-end: calc(100% + .45em); inset-block-start: -.3em;
  width: auto; height: 1.6em; margin: 0;
}
.blk-duo .blk-duo__small { font-size: var(--fs-sm); opacity: .9; }
@media (min-width: 900px) {
  .blk-duo { grid-template-columns: 1fr 1fr; column-gap: clamp(var(--sp-6), 4vw, var(--sp-8)); }
  .section:has(.scene) .blk-duo p { max-width: none; }
}


@media (min-width: 1024px) {
  .blk-split.is-row {
    grid-template-columns: max-content minmax(0, var(--split-text));
    justify-content: center; justify-items: start; align-items: center;
    column-gap: var(--split-gap);
  }
  .blk-split--rev.is-row { grid-template-columns: minmax(0, var(--split-text)) max-content; justify-items: end; }
  .blk-split--rev.is-row > :first-child { order: 2; }
  .blk-split.is-row > :first-child { justify-self: center; translate: none; margin-inline: 0; }
  .blk-split.is-row > .shot-row { flex-wrap: nowrap; }   
  
  .blk-split.is-row .shot-stage--frame { width: 460px; }
  .blk-split.is-row .shot-stage--card  { width: 340px; }
  .blk-split.is-row .shot-stage--ring  { width: var(--alch-ring); }
  .blk-split.is-row > .kit             { width: var(--ring); }
  .blk-split.is-row > .lstones         { width: 720px; }
  .blk-split.is-row .blk-split__body, .is-lede-row > .blk-lede { text-align: start; }
  .blk-split.is-row .blk-split__body p, .is-lede-row > .blk-lede p { margin-inline: 0; }
  .blk-split.is-row .blk-split__body > h3 { margin-inline: 0; }
  .blk-split.is-row .blk-split__body > h3::after {
    -webkit-mask: var(--knot-end) 0 0 / 17px 17px no-repeat,
                  linear-gradient(90deg, #000 40%, transparent) 16px 7.5px / calc(100% - 16px) 1.6px no-repeat;
            mask: var(--knot-end) 0 0 / 17px 17px no-repeat,
                  linear-gradient(90deg, #000 40%, transparent) 16px 7.5px / calc(100% - 16px) 1.6px no-repeat;
  }

  .shell.is-lede-row {
    display: grid; grid-template-columns: minmax(0, var(--split-text)) max-content;
    justify-content: center; align-items: center; column-gap: var(--split-gap);
  }
  
  .shell.is-lede-row > * { grid-column: 1 / -1; contain: inline-size; }
  .shell.is-lede-row > :is(.blk-lede, .blk-lede + *) { contain: none; }
  .shell.is-lede-row > .blk-lede { grid-column: 1; grid-row: 2; justify-self: end; margin: 0; }
  .shell.is-lede-row > .blk-lede + * { grid-column: 2; grid-row: 2; margin: 0; justify-self: center; }
  .shell.is-lede-row.is-media-first { grid-template-columns: max-content minmax(0, var(--split-text)); }
  .shell.is-lede-row.is-media-first > .blk-lede { grid-column: 2; justify-self: start; }
  .shell.is-lede-row.is-media-first > .blk-lede + * { grid-column: 1; }
  .is-lede-row > .blk-lede + * :is(.shot-stage, .shot-row), .is-lede-row > .blk-lede + .shot-stage { translate: none; margin-inline: 0; }

  
  :is(.blk-split.is-row > *, .is-lede-row > .blk-lede + *, .is-lede-row > .blk-lede + * > *)[data-side="left"]  { margin-inline-start: var(--render-room); }
  :is(.blk-split.is-row > *, .is-lede-row > .blk-lede + *, .is-lede-row > .blk-lede + * > *)[data-side="right"] { margin-inline-end: var(--render-room); }
  
  .blk-split.blk-split.is-row > * { translate: var(--keep, 0px) 0; }
  .shell.is-lede-row > :is(.blk-lede, .blk-lede + *) { translate: var(--keep, 0px) 0; }
}


.shell > .blk-lede:not(:last-child) { margin-block-end: calc(var(--brush-bleed-y) + var(--sp-4)); }
.shell > * + .blk-trio { margin-block-start: var(--sp-6); }

.section:has(.scene) .shell > .blk-trio {
  --sk-w: min(1200px, 100cqw - 2 * var(--gutter));
  width: var(--sk-w); max-width: none;
  margin-inline: calc((100% - var(--sk-w)) / 2);
}
@media (min-width: 480px) {
  .section:has(.scene) .shell > .blk-trio.blk-trio--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container scenesec (min-width: 1150px) {
  .section:has(.scene) .shell > .blk-trio.blk-trio--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.blk-lede, .blk-split__body {
  position: relative; isolation: isolate;
  width: fit-content; max-width: 100%;
  padding: var(--brush-pad-y) var(--brush-pad-x);   
}

.sec-head + .blk-lede { margin-block-start: var(--sp-3); }
.blk-lede { margin-inline: auto; }

:is(.blk-lede, .blk-split__body)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--brush-bleed-y) * -1) calc(var(--brush-bleed-x) * -1);
  background: var(--wash);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--brush-edge-y) var(--brush-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--brush-edge-y) var(--brush-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  :is(.blk-lede, .blk-split__body)::before {
    mask: var(--brush-block) center / 100% 100% no-repeat;
  }
}

#biolog .blk-split__body::before {
  background:
    linear-gradient(rgb(var(--bg-900-rgb) / .88), rgb(var(--bg-900-rgb) / .88)),
    url("../assets/theme/19c5cdb4444323b6.webp") 50% 40% / cover no-repeat;
}

.section:has(.scene) :is(.shell > .blk-lede, .blk-split--stack > .blk-split__body) {
  --sk-w: min(1200px, 100cqw - 2 * var(--gutter));
  width: calc(var(--sk-w) - 2 * var(--brush-bleed-x));
  max-width: none;
  margin-inline: calc((100% - var(--sk-w)) / 2 + var(--brush-bleed-x));
}
.section:has(.scene) :is(.shell > .blk-lede, .blk-split--stack > .blk-split__body) p { max-width: var(--measure); }

@supports selector(:has(*)) {
  .js-reveal .blk-lede::before { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
  .js-reveal .blk-lede:has(.is-in)::before { opacity: 1; }
}


.section:has(.blk-split--spin) { container: spinsec / inline-size; }
.blk-split--spin { justify-items: stretch; }
.spinpanel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5);
  padding: var(--brush-pad-y) var(--brush-pad-x);
}
.spinpanel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--brush-bleed-y) * -1) calc(var(--brush-bleed-x) * -1);
  background: var(--wash);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--brush-edge-y) var(--brush-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--brush-edge-y) var(--brush-edge-x) round;
}

.spinpanel__clip { width: min(100%, 704px); }
.spinpanel__clip video { aspect-ratio: 704 / 320; object-fit: contain; }
.spinpanel__ui { margin: 0; }
.blk-split--spin > .blk-split__body { width: auto; }
@container spinsec (min-width: 1000px) {
  .blk-split.blk-split--spin {
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
    column-gap: calc(2 * var(--brush-bleed-x) + var(--sp-4));
  }
  .blk-split--spin > .blk-split__body { display: flex; flex-direction: column; justify-content: center; text-align: start; }
  .blk-split--spin > .blk-split__body > * { margin-inline: 0; }
  .blk-split--spin > .blk-split__body > h3::after {
    -webkit-mask: var(--knot-end) 0 0 / 17px 17px no-repeat,
                  linear-gradient(90deg, #000 40%, transparent) 16px 7.5px / calc(100% - 16px) 1.6px no-repeat;
            mask: var(--knot-end) 0 0 / 17px 17px no-repeat,
                  linear-gradient(90deg, #000 40%, transparent) 16px 7.5px / calc(100% - 16px) 1.6px no-repeat;
  }
}


.blk-trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.blk-trio .card { overflow: hidden; display: flex; flex-direction: column; }
.blk-trio .card img { width: 100%; }
.blk-trio .card figcaption {
  padding: var(--sp-5);
  border-block-start: 1px solid var(--rule);
}
.blk-trio .card figcaption p {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.note {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  text-align: center;
  background: var(--note-fill);
  border: 1px solid var(--note-border);
  border-radius: var(--card-radius);
}
.note p { margin: var(--sp-3) auto 0; font-size: var(--fs-sm); }



:where(.note, .legend li, .qol__item, .tile) {
  --bfill: var(--note-fill); --be-y: 14px; --be-x: clamp(16px, 1.8vw, 24px);
}
:is(.note, .legend li, .qol__item, .tile) {
  position: relative; isolation: isolate;
  background: none; border: 0; border-radius: 0;
}
:is(.note, .legend li, .qol__item, .tile)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bfill);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--be-y) var(--be-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--be-y) var(--be-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  :is(.note, .legend li, .qol__item, .tile)::before { mask: var(--brush-block) center / 100% 100% no-repeat; }
}
.note { padding: calc(var(--sp-4) + 4px) calc(var(--sp-5) + 6px) calc(var(--sp-5) + 4px); }
.legend li, .qol__item { --be-y: 10px; --be-x: 14px; }
.legend li { padding: calc(var(--sp-3) + 2px) calc(var(--sp-4) + 4px); }

.ground-dark .legend li { --bfill: rgb(var(--brass-400-rgb) / .14); }
.qol__item { padding: calc(var(--sp-3) + 2px) calc(var(--sp-4) + 6px); }

.ground-dark .qol__item.qol__item--more { --bfill: rgb(var(--bg-900-rgb) / .22); }


.tile.tile--dark    { --bfill: var(--pattern) center / var(--pattern-size) repeat, var(--bg-800); }
.tile.tile--brass   { --bfill: var(--pattern) center / var(--pattern-size) repeat, linear-gradient(180deg, var(--brass-300), var(--brass-400)); }
.tile.tile--crimson { --bfill: var(--pattern) center / var(--pattern-size) repeat, var(--crimson-500); }
.tile { --be-y: 16px; --be-x: 22px; }

.blk-trio .card, .blk-atlas .atlas {
  border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / 16px 22px round;
  mask-border: var(--brush-block) var(--brush-slice) fill / 16px 22px round;
}
.blk-atlas .atlas { -webkit-mask-box-image-width: 22px 30px; mask-border-width: 22px 30px; }
.blk-atlas .atlas__tools { inset-block-end: calc(var(--sp-4) + 22px); inset-inline-end: calc(var(--sp-4) + 26px); }
.blk-atlas .atlas__scale { inset-block-end: calc(var(--sp-4) + 22px); inset-inline-start: calc(var(--sp-4) + 26px); }
.blk-trio:has(.card), .blk-atlas { filter: drop-shadow(0 10px 20px rgb(var(--bg-900-rgb) / .28)); }

.blk-atlas { position: relative; isolation: isolate; }
.blk-atlas:has(> .atlas:focus-visible)::before {
  content: ""; position: absolute; inset: -6px -8px; z-index: -1; pointer-events: none;
  background: var(--focus-ring);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / 22px 30px round;
  mask-border: var(--brush-block) var(--brush-slice) fill / 22px 30px round;
}


.blk-compare { --pos: 50; position: relative; }
.cmp {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px var(--rule-hi), var(--frame-shadow);
  touch-action: pan-y;            
  user-select: none;
}
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__after { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }

.cmp__tag {
  position: absolute; inset-block-start: var(--sp-4);
  z-index: 3;
  padding: var(--sp-2) var(--sp-4);
  background: rgb(var(--bg-900-rgb) / .82);
  border: 1px solid var(--brass-400);
  border-radius: 999px;
  font-family: var(--font-display); font-size: var(--fs-micro);
  letter-spacing: var(--track-micro); text-transform: uppercase;
  color: var(--text-primary);
}
.cmp__tag--before { inset-inline-start: var(--sp-4); }
.cmp__tag--after  { inset-inline-end: var(--sp-4); }


.cmp__knob {
  position: absolute; inset-block: 0; z-index: 4;
  inset-inline-start: calc(var(--pos) * 1%);
  width: 2px; margin-inline-start: -1px;
  background: var(--brass-300);
  pointer-events: none;
}
.cmp__knob::after {
  content: "";
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(var(--bg-900-rgb) / .86);
  border: 2px solid var(--brass-300);
  box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / .5), 0 10px 26px rgb(var(--shadow-rgb) / .6);
  background-image:
    url("../assets/theme/b7915f6e70278646.svg");
  background-repeat: no-repeat; background-position: center;
}

.cmp__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize;
}
.cmp__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2px; height: 100%; background: transparent; cursor: ew-resize;
}
.cmp__range::-moz-range-thumb {
  width: 2px; height: 100%; border: 0; background: transparent; cursor: ew-resize;
}
.cmp__range::-moz-range-track { background: transparent; }

.cmp__range:focus,
.cmp__range:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.cmp__range:focus-visible ~ .cmp__knob::after {
  outline: 3px solid var(--brass-300);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(var(--bg-900-rgb) / .9);
}
.cmp__hint {
  margin-block-start: var(--sp-4);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-muted);
}


.blk-atlas { --scale: 1; --tx: 0px; --ty: 0px; }
.atlas {
  position: relative;
  aspect-ratio: 16 / 9;   
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px var(--rule-hi), var(--frame-shadow);
  background: var(--bg-900);
  cursor: grab;
  touch-action: pan-y;
}
.atlas.is-grabbing { cursor: grabbing; }
.atlas__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.atlas.is-grabbing .atlas__img { transition: none; }
.atlas__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgb(var(--brass-400-rgb) / .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--brass-400-rgb) / .16) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.atlas__tools {
  position: absolute; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4);
  z-index: 3; display: flex; gap: var(--sp-2);
}
.atlas__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgb(var(--bg-900-rgb) / .84);
  border: 1px solid var(--brass-400);
  border-radius: var(--card-radius);
  color: var(--brass-300);
  cursor: var(--cursor-hover);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.atlas__btn:hover { background: var(--crimson-500); border-color: var(--brass-300); color: var(--text-primary); }
.atlas__btn:disabled { opacity: .4; cursor: not-allowed; }
.atlas__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.atlas__scale {
  position: absolute; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4);
  z-index: 3;
  padding: var(--sp-2) var(--sp-4);
  background: rgb(var(--bg-900-rgb) / .84);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro); color: var(--text-secondary);
}


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-7);
  border-radius: var(--card-radius);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: var(--track-micro);
  text-transform: uppercase; text-decoration: none;
  cursor: var(--cursor-hover);
  border: 1px solid transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--crimson-500); color: var(--text-primary);
  border-color: var(--crimson-600);
  box-shadow: inset 0 1px 0 rgb(var(--brass-300-rgb) / .22), var(--card-shadow);
}
.btn--primary:hover { background: var(--crimson-600); }

.btn--brass {
  background: transparent; color: var(--brass-300);
  border-color: var(--brass-400);
}
.btn--brass:hover { background: rgb(var(--brass-400-rgb) / .14); border-color: var(--brass-300); }

.btn--ghost {
  background: var(--bg-700); color: var(--text-primary);
  border-color: var(--bg-600);
}
.btn--ghost:hover { background: var(--bg-600); border-color: var(--brass-400); }


:root { --topbar-h: clamp(56px, 5.6vw, 72px); --nav-w: 300px; --nav-shift: 0px; }

.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-inline: clamp(10px, 1.6vw, 20px);
  background: rgb(var(--bg-900-rgb) / .88);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--bg-600);
  box-shadow: 0 1px 0 rgb(var(--brass-400-rgb) / .14), 0 10px 30px rgb(var(--shadow-rgb) / .5);
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: clamp(6px, 1vw, 14px); }

.topbar__toggle {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--card-radius);
  border: 1px solid var(--bg-600);
  background: var(--bg-800);
  color: var(--brass-300);
  cursor: var(--cursor-hover);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.topbar__toggle:hover { border-color: var(--brass-400); background: var(--bg-700); }
.topbar__toggle .icon { width: 22px; height: 22px; grid-area: 1 / 1; }
.topbar__toggle .i-close { display: none; }
.topbar__toggle[aria-expanded="true"] .i-open  { display: none; }
.topbar__toggle[aria-expanded="true"] .i-close { display: block; }

.topbar__logo { display: flex; align-items: center; min-height: 44px; line-height: 0; }   
.topbar__logo img { height: calc(var(--topbar-h) * .56); width: auto; }

.topbar__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding-inline: var(--sp-4);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.topbar__link .icon { width: 18px; height: 18px; color: var(--brass-400); }
.topbar__link:hover { color: var(--text-primary); background: var(--bg-800); }


.sidenav {
  position: fixed;
  inset-block-start: var(--topbar-h); inset-block-end: 0; inset-inline-start: 0;
  z-index: var(--z-chrome);
  width: var(--nav-w); max-width: 86vw;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-800), var(--bg-900));
  border-inline-end: 1px solid var(--bg-600);
  box-shadow: inset -1px 0 0 rgb(var(--brass-400-rgb) / .10), 12px 0 40px rgb(var(--shadow-rgb) / .55);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}
body.nav-open .sidenav { transform: translateX(0); }

.sidenav::before, .sidenav__quick::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pattern) 0 0 / var(--pattern-size) repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}
.sidenav__scroll:hover, .lang__menu:hover { scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-track); }

.sidenav__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  
  scrollbar-gutter: stable;
  padding: var(--sp-3) var(--sp-1) var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sidenav__jump {
  flex: none;
  display: grid; place-items: center;
  min-height: 44px;
  border-radius: var(--card-radius);
  background: var(--bg-700);
  border: 1px solid var(--bg-600);
  color: var(--brass-300);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sidenav__jump:hover { background: var(--bg-600); border-color: var(--brass-400); }
.sidenav__jump .icon { width: 20px; height: 20px; }


.navsearch {
  position: sticky; z-index: 2; flex: none;
  inset-block-start: calc(var(--sp-3) * -1);
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0;
  padding: var(--sp-3);
  background: var(--bg-800);
}
.navsearch__field {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-3);
  border-radius: var(--card-radius);
  background: var(--bg-900);
  border: 1px solid var(--bg-600);
  box-shadow: inset 0 0 0 1px rgb(var(--brass-400-rgb) / .08);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.navsearch__field:focus-within {
  border-color: var(--brass-400);
  box-shadow: inset 0 0 0 1px rgb(var(--brass-400-rgb) / .55);
}
.navsearch__icon { width: 18px; height: 18px; flex: none; color: var(--brass-400); }
.navsearch__input {
  flex: 1; min-width: 0;
  min-height: 44px; padding: 0;
  background: none; border: 0;
  color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--fs-sm);
}
.navsearch__input::placeholder { color: var(--text-secondary); opacity: .8; }

.navsearch__input:focus,
.navsearch__input:focus-visible {
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

.navsearch__input::-webkit-search-cancel-button,
.navsearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.navsearch__clear {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--bg-700);
  color: var(--text-secondary);
  cursor: var(--cursor-hover);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navsearch__clear:hover { background: var(--crimson-500); color: var(--text-primary); }
.navsearch__clear .icon { width: 14px; height: 14px; }

.navsearch__clear:focus-visible { border-radius: 999px; outline-offset: 2px; box-shadow: none; }

.navsearch__clear[hidden] { display: none !important; }


.navsearch__status {
  max-width: none;
  clip-path: inset(50%); position: absolute; width: 1px; height: 1px; overflow: hidden;
}
.navsearch__status--empty {
  clip-path: none; position: static; width: auto; height: auto;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-secondary); text-align: center;
}
.navsearch__status--empty b { color: var(--brass-300); font-weight: 600; }


.navcat { flex: none; }
.navcat__head {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding-inline: var(--sp-4);
  border-radius: var(--card-radius);
  background: var(--bg-700);
  border: 1px solid transparent;
  cursor: var(--cursor-hover);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.navcat__head:hover { background: var(--bg-600); border-color: rgb(var(--brass-400-rgb) / .35); }
.navcat__title {
  margin-inline-end: auto;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-300); text-align: start;
}
.navcat__arrow {
  width: 18px; height: 18px; flex: none; color: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-out);
}
.navcat__head[aria-expanded="true"] .navcat__arrow { transform: rotate(180deg); }
.navcat__head[aria-expanded="true"] { background: var(--bg-600); }


.navcat__items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.navcat__head[aria-expanded="true"] + .navcat__items { grid-template-rows: 1fr; }
.navcat__inner { overflow: hidden; min-height: 0; }

.navcat__head[aria-expanded="false"] + .navcat__items .navcat__inner {
  visibility: hidden; transition: visibility 0s linear var(--dur-base);
}
.navcat__head[aria-expanded="true"] + .navcat__items .navcat__inner {
  visibility: visible; transition: visibility 0s;
}

.navitem {
  display: flex; align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6);
  border-inline-start: 3px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.navitem__label { flex: 1; min-width: 0; }

.navitem:hover { color: var(--text-primary); background: var(--bg-700); }

.navitem:focus-visible { outline-offset: -3px; box-shadow: none; border-radius: var(--card-radius); }

.navitem.is-current {
  position: relative;
  color: var(--text-primary);
  background: rgb(var(--crimson-500-rgb) / .22);
}
.navitem.is-current::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rust-300) 50%, transparent);
  pointer-events: none;
}

.navitem mark { background: none; color: var(--brass-300); font-weight: 600; }


.navitem[hidden], .navcat[hidden] { display: none !important; }


.sidenav__quick {
  flex: none;
  display: flex; gap: var(--sp-4); justify-content: center;
  padding: var(--sp-4);
  border-block-start: 1px solid var(--bg-600);
  position: relative; isolation: isolate;
  background: var(--bg-800);
}
.quickbtn {
  width: 56px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--card-radius);
  background: var(--crimson-500);
  border: 1px solid var(--crimson-600);
  box-shadow: inset 0 1px 0 rgb(var(--brass-300-rgb) / .22);
  color: var(--text-primary);
  cursor: var(--cursor-hover);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quickbtn:hover { background: var(--crimson-600); transform: translateY(-1px); }
.quickbtn .icon { width: 20px; height: 20px; }


.sidenav__scrim {
  position: fixed; inset: var(--topbar-h) 0 0 0;
  z-index: calc(var(--z-chrome) - 1);
  background: rgb(var(--bg-900-rgb) / .6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sidenav__scrim[hidden] { display: block !important; }
body.nav-open .sidenav__scrim { opacity: 1; pointer-events: auto; }


.section, .footer, .hero { scroll-margin-top: calc(var(--topbar-h) + 10px); }
main, .footer { margin-inline-start: var(--nav-shift); transition: margin-inline-start var(--dur-base) var(--ease-out); }

body.nav-boot :is(main, .footer, .sidenav, .sidenav__scrim, .topbar) { transition: none !important; }

@media (min-width: 1024px) {
  .blk-trio--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.nav-open { --nav-shift: var(--nav-w); }
  body.nav-open .sidenav__scrim { opacity: 0; pointer-events: none; }
}


.lang { position: relative; }
.lang__toggle {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding-inline: var(--sp-3);
  border-radius: 999px;
  background: var(--bg-800);
  border: 1px solid var(--bg-600);
  box-shadow: inset 0 0 0 1px rgb(var(--brass-400-rgb) / .12);
  color: var(--text-secondary);
  cursor: var(--cursor-hover);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang__toggle:hover { color: var(--text-primary); border-color: var(--brass-400); }
.lang__code {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.lang__arrow {
  width: 16px; height: 16px; flex: none; color: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-out);
}
.lang__toggle[aria-expanded="true"] .lang__arrow { transform: rotate(180deg); }
.lang__toggle[aria-expanded="true"] { border-color: var(--brass-400); color: var(--text-primary); }

.lang__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


.lang__flag, .lang__opt img {
  flex: none;
  width: 22px; height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(var(--brass-400-rgb) / .45);
}

.lang__menu {
  position: absolute; z-index: 1;
  inset-block-start: calc(100% + var(--sp-2)); inset-inline-end: 0;
  min-width: 190px;
  max-height: min(62vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-2);
  border-radius: var(--card-radius);
  background: var(--bg-800);
  border: 1px solid var(--bg-600);
  box-shadow: inset 0 0 0 1px rgb(var(--brass-400-rgb) / .12),
              0 18px 44px rgb(var(--shadow-rgb) / .6);
}
.lang__menu[hidden] { display: none; }
.lang__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 40px; padding-inline: var(--sp-3);
  border-radius: 6px;
  border-inline-start: 3px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm); white-space: nowrap; cursor: var(--cursor-hover);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lang__opt:hover, .lang__opt:focus-visible {
  color: var(--text-primary); background: var(--bg-700);
  border-inline-start-color: var(--rust-400);
  outline: none;
}
.lang__opt[aria-selected="true"] {
  color: var(--text-primary);
  background: rgb(var(--crimson-500-rgb) / .22);
  border-inline-start-color: var(--rust-300);
}

@media (max-width: 767px) {
  .topbar__link span { display: none; }
  .topbar__link { padding-inline: var(--sp-3); }
}
@media (max-width: 479px) {
  .lang__code { display: none; }          
  .topbar__link { display: none; }
}

.footer { position: relative; padding-block: var(--section-pad) var(--sp-8); text-align: center; }

.footer__embers {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(75% 60% at 50% 108%, rgb(var(--ember-rgb) / .34), rgb(var(--ember-rgb) / .1) 50%, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
          mask-image: linear-gradient(180deg, transparent, #000 30%);
}

.ground-light .footer__embers {
  background: radial-gradient(75% 60% at 50% 108%, rgb(var(--highlight-rgb) / .34), rgb(var(--highlight-rgb) / .1) 50%, transparent 75%);
}

.footer__mark { max-width: none; line-height: 0; }
.footer__mark img {
  width: min(72vw, 360px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 4px 14px rgb(var(--shadow-rgb) / .55));
}
.footer__line { margin-block-start: var(--sp-4); margin-inline: auto; max-width: 48ch; color: var(--ink-muted); }
.footer__cta {
  margin-block-start: var(--sp-8);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: center;
}
.footer__legal {
  margin-block-start: var(--sp-9);
  margin-inline: auto;            
  max-width: none;
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--ink-muted);
}
.footer__legal a { color: var(--ornament-hi); }
.ground-light .footer__legal { color: var(--ink); }   


@media (max-width: 479px) {
  .lang__toggle { min-width: 44px; justify-content: center; }   
  .lang__menu { min-width: 172px; }
}

@media (min-width: 480px) {
  .blk-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-trio > :only-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .blk-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__cta { gap: var(--sp-5); }
}

@media (min-width: 1024px) {
  .sec-head--left { align-items: flex-start; text-align: left; }
}


@media (min-width: 1440px) {
  :root { --shell: 1520px; }   
}


@media (pointer: coarse) {
  .cmp__knob::after { width: 56px; height: 56px; }
}


.navcat__ko, .navitem__ko {
  flex: none;
  color: var(--rust-200);
  font-family: var(--font-ko);
  font-weight: 500;             
  letter-spacing: 0;
  line-height: 1;
}

.navcat__ko  { min-width: 28px; font-size: .85rem; }
.navitem__ko { min-width: 35px; font-size: .95rem; margin-inline-end: var(--sp-2); opacity: .92; }

.progress {
  position: fixed; inset-block-start: var(--topbar-h); inset-inline: 0;
  z-index: calc(var(--z-nav) + 1);
  height: 3px;
  background: rgb(var(--brass-400-rgb) / .14);
  pointer-events: none;
}
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass-400), var(--brass-300));
  box-shadow: 0 0 10px rgb(var(--brass-300-rgb) / .55);
  transform: scaleX(var(--progress, 0));   
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .progress__fill { transition: transform 120ms linear; }
}

@supports (animation-timeline: scroll()) {
  .progress__fill {
    transform: scaleX(0);
    transition: none;
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);   
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}


.btn--primary {
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgb(var(--shadow-rgb) / .55));
}

@media (forced-colors: active) {
  :is(.blk-lede, .blk-split__body)::before { display: none; }
  .tear, .progress, .hero__dust, .hero__veil, .stage-render, .kit__cut, .kit__disc { display: none; }
  
  .ground-dark, .ground-light { background-image: none; }
  .btn, .navcat__head, .navitem, .topbar__toggle, .quickbtn,
  .sidenav__jump, .atlas__btn, .card, .frame,
  .navsearch__field, .navsearch__clear,
  .lang__toggle, .lang__menu { border: 1px solid; }
  
  .lang__opt[aria-selected="true"] { outline: 2px solid; outline-offset: -2px; }
  .btn--primary { clip-path: none; }
  .navitem.is-current { outline: 2px solid; outline-offset: -2px; }
  
  .navitem mark { text-decoration: underline; }
}


.tiles {
  margin-block-start: var(--sp-8);
  
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  max-width: 880px; margin-inline: auto;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 136px; padding: var(--sp-5) var(--sp-4);
  text-decoration: none; text-align: center;
  border: 1px solid var(--bg-600);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.tile .icon { width: 26px; height: 26px; }
.tile__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-body); letter-spacing: .1em; text-transform: uppercase;
}
.tile__sub { font-size: var(--fs-sm); opacity: .82; }

.tile--dark    { background: var(--pattern) center / var(--pattern-size) repeat, var(--bg-800); color: var(--text-primary); }
.tile--dark .icon { color: var(--brass-300); }
.tile--brass   { background: var(--pattern) center / var(--pattern-size) repeat, linear-gradient(180deg, var(--brass-300), var(--brass-400)); color: var(--bg-900); border-color: var(--brass-300); }
.tile--crimson { background: var(--pattern) center / var(--pattern-size) repeat, var(--crimson-500); color: var(--text-primary); border-color: var(--crimson-600); }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); filter: brightness(1.08); }
@media (max-width: 640px) { .tiles { grid-template-columns: minmax(0, 1fr); } }


.kbd {
  display: inline-block;
  font: 700 .74em/1 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase;
  padding: .5em .7em .44em;
  margin-inline: .14em;
  vertical-align: .16em;
  color: #efe4cf;
  background: linear-gradient(180deg, #4d433a 0%, #342c26 55%, #2a231e 100%);
  border: 1px solid #0c0907;
  border-radius: .42em;
  box-shadow:
    inset 0 1px 0 rgb(255 245 225 / .22),    
    inset 0 -2px 0 rgb(0 0 0 / .28),
    0 .3em 0 #17110d,                        
    0 .36em .6em rgb(0 0 0 / .35);
  text-shadow: 0 1px 0 rgb(0 0 0 / .6);
  white-space: nowrap;
  animation: kbd-press 2.6s cubic-bezier(.3, .7, .4, 1) infinite;
}
@keyframes kbd-press {
  0%, 58%, 100% {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgb(255 245 225 / .22), inset 0 -2px 0 rgb(0 0 0 / .28), 0 .3em 0 #17110d, 0 .36em .6em rgb(0 0 0 / .35);
    color: #efe4cf;
  }
  64%, 76% {
    transform: translateY(.24em);
    box-shadow: inset 0 1px 0 rgb(255 245 225 / .1), inset 0 -1px 0 rgb(0 0 0 / .3), 0 .06em 0 #17110d, 0 .1em .2em rgb(0 0 0 / .3);
    color: var(--tip-name);
  }
}
@media (prefers-reduced-motion: reduce) { .kbd { animation: none; } }


.scene--dungeons {
  position: relative;
  --dl-ink: var(--ink); --dl-muted: var(--ink-muted);
  --dl-orn: var(--ornament); --dl-orn-hi: var(--ornament-hi);
  --dl-arrow: url("../assets/theme/1a31bfc23c6e4c4a.svg");
}
.dstage { position: relative; }

.dhead {
  --tb-edge-y: 14px; --tb-edge-x: clamp(16px, 2.6vw, 30px);
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-3);
  width: fit-content; max-width: 100%;
  margin: calc(var(--sk-w) * .0567 + 24px) auto calc(var(--sk-w) * .035 + var(--sp-2) + var(--tb-edge-y));
  padding: var(--sp-1) var(--sp-4);
}
.dhead::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--tb-edge-y) * -1) calc(var(--tb-edge-x) * -1);
  background: rgb(var(--bg-900-rgb) / .84);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--tb-edge-y) var(--tb-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--tb-edge-y) var(--tb-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .dhead::before { -webkit-mask: var(--brush-block) center / 100% 100% no-repeat; mask: var(--brush-block) center / 100% 100% no-repeat; }
}
.dhead__icon {
  position: relative; flex: none;
  width: var(--socket); height: var(--socket);
  background: var(--socket-frame) center / 100% 100% no-repeat;
}
.dhead__icon > img {
  position: absolute; inset: 4.5px; width: calc(100% - 9px); height: calc(100% - 9px);
  border-radius: 50%; opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.dhead__icon > .is-on { opacity: 1; }
.dhead__ko {
  font-family: var(--font-ko); font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1;
  color: var(--rust-250); text-shadow: 0 3px 10px rgb(var(--rust-glow-rgb) / .75);
}
.dhead__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.1; letter-spacing: .02em;
  color: var(--brass-300);
  text-shadow: 0 2px 10px rgb(var(--shadow-rgb) / .6);
}
.dhead__lv {
  padding: 3px 10px 4px;
  border: 1px solid rgb(var(--brass-400-rgb) / .7); border-radius: 2px;
  background: rgb(var(--bg-900-rgb) / .7);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .6);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); line-height: 1.2; letter-spacing: .04em;
  color: var(--text-primary);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .dhead__icon > img { transition: none; } }
.scene--dungeons .scene__bg-alt {
  position: absolute; inset: 0; width: 100%; height: auto;
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.scene--dungeons .scene__bg-alt.is-on { opacity: 1; }

.scene__aura {
  position: absolute; inset: 0; pointer-events: none;
  color: rgb(var(--fx-rgb, 255 255 255));
  background: radial-gradient(ellipse 34% 60% at 50% 44%,
    color-mix(in srgb, currentColor 62%, transparent),
    color-mix(in srgb, currentColor 22%, transparent) 55%, transparent 80%);
  mix-blend-mode: screen;
  transition: color 600ms var(--ease-out);
  animation: aura-breathe 4.2s ease-in-out infinite alternate;
}
@keyframes aura-breathe { from { opacity: .7; } to { opacity: 1; } }

.scene--dungeons .scene__render {
  inset: -10% 0 -22%; height: auto; translate: none; z-index: 1;
}

.dclip, .dfx {
  -webkit-mask-image: linear-gradient(#000 37.9%, transparent 53%), var(--d-bg, linear-gradient(#000, #000));
          mask-image: linear-gradient(#000 37.9%, transparent 53%), var(--d-bg, linear-gradient(#000, #000));
  -webkit-mask-size: 100% 100%, 100% 75.7576%;   mask-size: 100% 100%, 100% 75.7576%;
  -webkit-mask-position: 0 0, 0 31.25%;           mask-position: 0 0, 0 31.25%;
  -webkit-mask-repeat: no-repeat;                 mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;            mask-composite: add;
}
.dclip { position: absolute; inset: 0; }
.scene--dungeons .scene__render .dclip > img {
  position: absolute;
  inset-block-start: calc((var(--r-top, -7) + 10) * 100% / 132);
  inset-inline-start: 50%;
  height: calc(var(--r-h, 125) * 100% / 132); width: auto; max-width: none;
  translate: calc(var(--face, .5) * -100%) 0;
  opacity: 0; transition: opacity 420ms var(--ease-out);
}
.scene--dungeons .scene__render .dclip > img.is-on {
  opacity: 1;
  
  filter: drop-shadow(0 0 3px rgb(var(--fx-rgb) / .55)) drop-shadow(0 0 18px rgb(var(--fx-rgb) / .4));
}
.dfx {
  position: absolute; inset: -10% 0 -22%; z-index: 2;
  width: 100%; height: 132%;
  pointer-events: none;
}


.dslide {
  --tb-edge-y: 14px; --tb-edge-x: clamp(12px, 2vw, 28px);
  --dl-ink: var(--text-primary); --dl-muted: var(--text-secondary);
  --dl-orn: var(--brass-400); --dl-orn-hi: var(--brass-300);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  column-gap: var(--sp-1);
  margin-block-start: calc(var(--sp-4) + var(--tb-edge-y));
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}
.dslide::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--tb-edge-y) * -1) calc(var(--tb-edge-x) * -1);
  background: rgb(var(--bg-900-rgb) / .86);
  -webkit-mask-box-image: var(--brush-block) var(--brush-slice) / var(--tb-edge-y) var(--tb-edge-x) round;
  mask-border: var(--brush-block) var(--brush-slice) fill / var(--tb-edge-y) var(--tb-edge-x) round;
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .dslide::before { -webkit-mask: var(--brush-block) center / 100% 100% no-repeat; mask: var(--brush-block) center / 100% 100% no-repeat; }
}
.dslide__track {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr);
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.dslide__track::-webkit-scrollbar { display: none; }
.dslide__track > li { position: relative; scroll-snap-align: center; }

.dslide__track > li::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 15px; height: 1.6px;
  background: rgb(var(--brass-400-rgb) / .55);
}
.dslide__track > li:first-child::before { background: linear-gradient(90deg, transparent, rgb(var(--brass-400-rgb) / .55) 50%); }
.dslide__track > li:last-child::before { background: linear-gradient(90deg, rgb(var(--brass-400-rgb) / .55) 50%, transparent); }
.dslide__node {
  position: relative;
  display: grid; grid-template-rows: 22px auto; justify-items: center; align-items: center; row-gap: 8px;
  width: 100%; margin: 0; padding: 4px 4px 2px;
  border: 0; border-radius: 4px; background: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: .8125rem; line-height: 1.25; letter-spacing: .02em; text-wrap: balance;
  color: var(--dl-muted);
  cursor: var(--cursor-hover, pointer);
  transition: color var(--dur-fast) var(--ease-out);
}
.dslide__node::before {
  content: ""; grid-row: 1;
  width: 7px; height: 7px; rotate: 45deg;
  background: var(--dl-orn);
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dslide__node:hover { color: var(--dl-ink); }
.dslide__node:hover::before { background: var(--dl-orn-hi); }
.dslide__node[aria-pressed="true"] { color: var(--dl-ink); }
.dslide__node[aria-pressed="true"]::before {
  width: 11px; height: 11px;
  background: var(--dl-orn-hi);
  outline: 1.5px solid rgb(var(--brass-300-rgb) / .75); outline-offset: 3px;
  filter: drop-shadow(0 0 6px rgb(var(--brass-300-rgb) / .85));
}
.dslide__node:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dslide__arrow {
  position: relative;
  width: 38px; height: 30px; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: none;
  color: var(--dl-orn);
  cursor: var(--cursor-hover, pointer);
  transition: color var(--dur-fast) var(--ease-out);
}

.dslide__arrow::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--dl-arrow) center / 30px 30px no-repeat;
          mask: var(--dl-arrow) center / 30px 30px no-repeat;
}
.dslide__arrow--next::before { scale: -1 1; }
.dslide__arrow:hover { color: var(--dl-orn-hi); }
.dslide__arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (pointer: coarse) { .dslide__arrow::after { content: ""; position: absolute; inset: -7px -3px; } }


@container scenesec (min-width: 960px) {
  .scene--dungeons .dslide { margin-inline: 4%; }
  .scene--dungeons .dslide__track { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .scene--dungeons :is(.scene__bg-alt, .dclip > img) { transition: none; }
  .scene__aura { animation: none; }
}
.dungeon-info { width: fit-content; margin: var(--sp-6) auto 0; }


.ground-light .scene .scene__render,
.js-reveal .ground-light .scene .scene__render.ink-reveal,
.ground-light .scene__render--fx .stage-render__fig { filter: none; }
.ground-light .scene--dungeons .scene__render .dclip > img.is-on { filter: none; }


.hand-fire {
  position: absolute; inset-inline-start: 92.5%; inset-block-start: 43.4%;
  width: 15%; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none;
}
.hand-fire__glow {
  position: absolute; inset: -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 236 170 / .55), rgb(255 150 50 / .4) 32%, rgb(230 70 20 / .22) 60%, transparent 100%);
  mix-blend-mode: screen;
  animation: hand-flicker 2.6s steps(1, end) infinite, hand-breathe 1.7s ease-in-out infinite alternate;
}
@keyframes hand-breathe { from { scale: .9; } to { scale: 1.08; } }
@keyframes hand-flicker {
  0% { opacity: .85; } 9% { opacity: 1; } 17% { opacity: .78; } 26% { opacity: .95; } 38% { opacity: .82; }
  47% { opacity: 1; } 58% { opacity: .74; } 66% { opacity: .92; } 79% { opacity: .8; } 88% { opacity: 1; }
}
.hand-fire__embers {
  position: absolute; inset-inline-start: -110%; inset-block-start: -260%;
  width: 320%; height: 380%;
}
@media (prefers-reduced-motion: reduce) { .hand-fire__glow { animation: none; } }


.scene--ph-onechar { margin-block-start: calc(var(--sk-w) * .01); }
.onechar-cut {
  position: absolute; inset: -10% 0 0;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 48%), url("../assets/theme/10bab302f29e32dc.webp");
          mask-image: linear-gradient(#000 30%, transparent 48%), url("../assets/theme/10bab302f29e32dc.webp");
  -webkit-mask-size: 100% 100%, 100% 90.909%;   mask-size: 100% 100%, 100% 90.909%;
  -webkit-mask-position: 0 0, 0 100%;           mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat;               mask-repeat: no-repeat;
}
.scene.scene--ph-onechar .onechar-cut .scene__render { inset-block-start: 8.18%; height: 98.18%; inset-inline-start: 50%; translate: -50% 0; }
.orb {
  position: absolute; inset-inline-start: 52.5%; inset-block-start: 41.6%;
  width: 62%; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none;
}
.orb__fx { position: absolute; inset: 0; width: 100%; height: 100%; }

.orb-light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orb-light--soft { mix-blend-mode: soft-light; }
.orb-light--add { mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { .orb-light--add { mix-blend-mode: plus-lighter; } }


.scene--cbonus .scene__pic { aspect-ratio: 996 / 498; overflow: clip; }
.scene--cbonus .cbset { height: auto; translate: none; }
.scene--cbonus .cbset img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .6)) drop-shadow(0 0 9px rgb(225 235 255 / .34));
  --bob: calc(var(--sk-w) * .0065);
  animation: cb-bob var(--bob-t, 5s) ease-in-out var(--bob-d, 0s) infinite alternate;
}
.scene--cbonus .cbset--wings   { inset-inline-start: 25%;    inset-block-start: 3%;  width: 44%;   --bob-t: 6.2s; }
.scene--cbonus .cbset--costume { inset-inline-start: 68.5%;  inset-block-start: 19%; width: 27.9%; }
.scene--cbonus .cbset--hair    { inset-inline-start: 50.5%;  inset-block-start: 66%; width: 11.7%; --bob-t: 4.6s; --bob-d: -2.1s; }
.scene--cbonus .cbset--sword   { inset-inline-start: 6.5%;   inset-block-start: 12%; width: 32.5%; --bob-t: 5.4s; --bob-d: -3.7s; }
.scene--cbonus .cbset--costume img { animation: none; }
@keyframes cb-bob { from { translate: 0 var(--bob); } to { translate: 0 calc(var(--bob) * -1); } }
.cb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.blk-split__body > .itemcard { margin: var(--sp-4) auto var(--sp-5); }
@media (prefers-reduced-motion: reduce) { .scene--cbonus .cbset img { animation: none; } }


.js-defer .section:not(.is-near) :is(.scene__pic, .scene__over, .onechar-cut, .dclip, .dfx, .scene__cut, .crystal-shine, .lveins > i, .laura > i),
.js-defer .section:not(.is-near) .scene::before {   
  -webkit-mask-image: none !important; mask-image: none !important;
}
.js-defer .section:not(.is-near) .scene::before,
.js-defer .section:not(.is-near) .blk-split__body::before,
.js-defer .section:not(.is-near) .kit__disc--bg { background-image: none !important; }