/* The hero carousel dressed in each skin's own material (website/readme.md, "Hero designs"). Every rule is scoped to a
   skin and its own design, so a design picked in another skin keeps site.css's plain look. The drawn skins' art comes
   from the art generator (heroes/<skin>.py, build.py --hero) into img/ui/<skin>/hero/: pictures, and light masks white
   on clear that are filled here with the accent (mask-image), so one set serves every colour.

   The autoplay line of a drawn design is a window sliding open over art that stays put: .hero-grow slides in from the
   left while its inner span slides the other way by as much, so a torn hem's ember or a vine shows from its start to
   the front, and nothing is stretched. Everything moves on transforms and opacity, and stands still under reduced
   motion. */
@keyframes hero-grow-open { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes hero-grow-hold { from { transform: translateX(100%); } to { transform: none; } }
:is([data-skin='arcane'] .hero-style-rail, [data-skin='parchment'] .hero-style-pager, [data-skin='vine_live'] .hero-style-strip) .hero-grow {
  position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; transform: translateX(-100%);
}
:is([data-skin='arcane'] .hero-style-rail, [data-skin='parchment'] .hero-style-pager, [data-skin='vine_live'] .hero-style-strip) .hero-grow > span { position: absolute; inset: 0; transform: translateX(100%); }
:is([data-skin='arcane'] .hero-style-rail, [data-skin='parchment'] .hero-style-pager, [data-skin='vine_live'] .hero-style-strip) .is-on > .hero-grow { animation: hero-grow-open var(--autoplay, 7s) linear forwards; }
:is([data-skin='arcane'] .hero-style-rail, [data-skin='parchment'] .hero-style-pager, [data-skin='vine_live'] .hero-style-strip) .is-on > .hero-grow > span { animation: hero-grow-hold var(--autoplay, 7s) linear forwards; }
:is(.hero-wrap.is-still, .thumbs.is-still) .is-on > .hero-grow, :is(.hero-wrap.is-still, .thumbs.is-still) .is-on > .hero-grow > span { animation: none; transform: none; }
.is-paused .is-on > .hero-grow, .is-paused .is-on > .hero-grow > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .is-on > .hero-grow, .is-on > .hero-grow > span { animation: none !important; transform: none !important; } }

/* ---------- Arcane: the rail as tabs of the woven cloth ----------
   Each slide hangs as a small tab of cloth from a stitched, rolled hem, torn along its foot, its number a Cistercian
   numeral glowing in a roundel burned into the weave. The slide shown lights the weave round it, and an ember runs
   along its torn foot while autoplay runs; the hero's foot is the cloth's burnt edge, smouldering. */
[data-skin='arcane'] .hero-style-rail {
  --arc-art: url("../img/ui/arcane/hero/tab_cloth.webp");
  --arc-lit: url("../img/ui/arcane/hero/tab_lit.webp");
  --arc-ember: url("../img/ui/arcane/hero/tab_ember.webp");
  --arc-num: url("../img/ui/arcane/hero/numerals.webp");
}
[data-skin='arcane'] .hero-style-rail .hero-rail { gap: 3px; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item {
  height: 56px; padding: 16px 14px 10px 15px; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; border-radius: 0;
  background: var(--arc-art) center / 100% 100% no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #b9b4c6; font: 600 13px/1.25 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 3px #000;
  transform-origin: 50% 0; transition: color 250ms var(--ease), rotate 500ms var(--spring), translate 300ms var(--ease);
}
[data-skin='arcane'] .hero-style-rail .hero-rail-item:hover { translate: -6px 0; rotate: -0.6deg; color: #fff; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item.is-on { background: var(--arc-art) center / 100% 100% no-repeat; color: #fff; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item::after { display: none; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--accent-hot);
  -webkit-mask: var(--arc-lit) center / 100% 100% no-repeat; mask: var(--arc-lit) center / 100% 100% no-repeat; opacity: 0; transition: opacity 600ms var(--ease);
}
[data-skin='arcane'] .hero-style-rail .hero-rail-item:hover::before { opacity: 0.35; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item.is-on::before { opacity: 1; animation: arc-hero-flicker 3.4s ease-in-out infinite; }
@keyframes arc-hero-flicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.78; } 55% { opacity: 0.95; } 70% { opacity: 0.7; } }
/* the numeral: halo in the accent, core in its hot light, from one sprite (row 1 the halo, row 2 the core) */
[data-skin='arcane'] .hero-style-rail .hero-rail-item i {
  position: relative; width: 22px; height: 30px; font-size: 0; background: var(--accent);
  -webkit-mask: var(--arc-num) calc(var(--n, 0) * -22px) 0 / 330px 60px no-repeat; mask: var(--arc-num) calc(var(--n, 0) * -22px) 0 / 330px 60px no-repeat;
  opacity: 0.5; transition: opacity 400ms var(--ease);
}
[data-skin='arcane'] .hero-style-rail .hero-rail-item i::before {
  content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent-hot) 60%, #fff);
  -webkit-mask: var(--arc-num) calc(var(--n, 0) * -22px) -30px / 330px 60px no-repeat; mask: var(--arc-num) calc(var(--n, 0) * -22px) -30px / 330px 60px no-repeat;
}
[data-skin='arcane'] .hero-style-rail .hero-rail-item:hover i { opacity: 0.8; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item.is-on i { opacity: 1; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(2) { --n: 1; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(3) { --n: 2; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(4) { --n: 3; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(5) { --n: 4; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(6) { --n: 5; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(7) { --n: 6; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(8) { --n: 7; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(9) { --n: 8; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(10) { --n: 9; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(11) { --n: 10; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(12) { --n: 11; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(13) { --n: 12; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(14) { --n: 13; }
[data-skin='arcane'] .hero-style-rail .hero-rail-item:nth-child(n + 15) { --n: 14; }
/* the ember along the torn foot, and its burning front */
[data-skin='arcane'] .hero-style-rail .hero-rail-item .hero-grow > span {
  background: color-mix(in srgb, var(--accent-hot) 75%, #fff);
  -webkit-mask: var(--arc-ember) center / 100% 100% no-repeat; mask: var(--arc-ember) center / 100% 100% no-repeat;
}
[data-skin='arcane'] .hero-style-rail .hero-rail-item .hero-grow::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  background: radial-gradient(closest-side, #fff 0 12%, var(--accent-hot) 32%, rgba(var(--accent-rgb), 0.35) 62%, transparent);
  animation: arc-hero-front 600ms steps(3) infinite;
}
@keyframes arc-hero-front { 50% { opacity: 0.7; } }
@media (max-width: 760px) {
  [data-skin='arcane'] .hero-style-rail {
    --arc-art: url("../img/ui/arcane/hero/tab_s_cloth.webp");
    --arc-lit: url("../img/ui/arcane/hero/tab_s_lit.webp");
    --arc-ember: url("../img/ui/arcane/hero/tab_s_ember.webp");
  }
  [data-skin='arcane'] .hero-style-rail .hero-rail { bottom: 40px; justify-content: center; gap: 4px; }
  [data-skin='arcane'] .hero-style-rail .hero-rail-item { flex: 0 1 64px; min-width: 40px; height: 52px; padding: 13px 0 9px; grid-template-columns: 1fr; justify-items: center; }
  [data-skin='arcane'] .hero-style-rail .hero-rail-item:hover { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin='arcane'] .hero-style-rail .hero-rail-item.is-on::before, [data-skin='arcane'] .hero-style-rail .hero-grow::after { animation: none; }
}

/* ---------- Parchment: the pager as an illuminated banderole ----------
   The pager is a banderole of vellum ruled in ink and rolled up at both ends (its middle repeats, so it is as long as
   the slides need), its numerals laid in gold leaf, the slide shown set in an illuminated initial (the accent's field in
   a gold frame, white penwork on it) with a rubric drawn under it while autoplay runs; the arrows are gilded fleurons.
   The hero's foot is a strip of the skin's torn, singed paper the banderole lies on. */
[data-skin='parchment'] .hero-style-pager .hero-pager {
  bottom: 18px; gap: 2px; height: 56px; padding: 0 34px; border: 0 solid transparent; border-radius: 0;
  border-image: url("../img/ui/parchment/hero/banderole.webp") 0 90 fill / 0 70px / 0 round;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  filter: drop-shadow(0 4px 6px rgba(10, 5, 1, 0.6));
}
[data-skin='parchment'] .hero-style-pager .hero-page {
  min-width: 44px; height: 48px; padding: 0 4px 10px; overflow: hidden; border-radius: 0;
  background: url("../img/ui/parchment/hero/gold.webp") 0 0 / 48px 48px; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0.7px rgba(52, 30, 10, 0.95);
  font: 700 19px/38px Georgia, 'Times New Roman', serif; letter-spacing: 0.02em; transition: font-size 300ms var(--ease);
}
[data-skin='parchment'] .hero-style-pager .hero-page:hover { color: transparent; background-position: 12px 6px; }
[data-skin='parchment'] .hero-style-pager .hero-page.is-on { color: transparent; font-size: 23px; background: url("../img/ui/parchment/hero/gold.webp") 0 0 / 48px 48px; -webkit-background-clip: text; background-clip: text; }
/* the initial: behind the numeral, scaling in like a drop cap being laid */
[data-skin='parchment'] .hero-style-pager .hero-page::before {
  content: ''; position: absolute; top: 1px; left: calc(50% - 19px); z-index: -1; width: 38px; height: 38px;
  background: url("../img/ui/parchment/hero/initial.webp") center / 100% 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent) 88%, #2b1a0b), color-mix(in srgb, var(--accent) 88%, #2b1a0b)) center / 78% 78% no-repeat;
  opacity: 0; scale: 0.4; rotate: -8deg; transition: opacity 350ms var(--ease), scale 600ms var(--spring), rotate 600ms var(--spring);
}
[data-skin='parchment'] .hero-style-pager .hero-page.is-on::before { opacity: 1; scale: 1; rotate: 0deg; }
[data-skin='parchment'] .hero-style-pager .hero-page::after { display: none; }
[data-skin='parchment'] .hero-style-pager .hero-page .hero-grow > span {
  background: color-mix(in srgb, var(--accent) 80%, #3a2410);
  -webkit-mask: url("../img/ui/parchment/hero/rubric.webp") 50% calc(100% - 2px) / 36px 7px no-repeat; mask: url("../img/ui/parchment/hero/rubric.webp") 50% calc(100% - 2px) / 36px 7px no-repeat;
}
/* the fleurons */
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow { position: relative; width: 38px; height: 38px; background: url("../img/ui/parchment/hero/arrow.webp") center / 100% 100% no-repeat; transition: scale 300ms var(--spring), translate 300ms var(--ease); }
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow.is-prev { scale: -1 1; }
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow::before { display: none; }
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow::after {
  content: ''; position: absolute; inset: 0; background: #fff6d8;
  -webkit-mask: url("../img/ui/parchment/hero/arrow_glints.webp") center / 100% 100% no-repeat; mask: url("../img/ui/parchment/hero/arrow_glints.webp") center / 100% 100% no-repeat;
  opacity: 0; transition: opacity 300ms var(--ease);
}
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow:hover { background: url("../img/ui/parchment/hero/arrow.webp") center / 100% 100% no-repeat; translate: 2px 0; }
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow.is-prev:hover { translate: -2px 0; }
[data-skin='parchment'] .hero-style-pager .hero-pager .hero-arrow:hover::after { opacity: 0.9; }

/* ---------- Living vines: the strip framed in chrome, a vine along it ----------
   The thumbnail strip is the skin's moss weave between two chrome rails, a living vine winding along the top one (its
   buds breathing in the accent). Each thumbnail has a bud in a cup of chrome sepals that opens into a flower of light
   on the slide shown, and autoplay grows a vine along that thumbnail, its tip lit; the arrows are curled leaf buds. */
[data-skin='vine_live'] .hero-style-strip .thumbs {
  border: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  background: url("../img/ui/vine_live/hero/rail_foot.webp") 0 100% / 480px 10px repeat-x,
    linear-gradient(rgba(4, 6, 4, 0.72), rgba(4, 6, 4, 0.5)), var(--ui-weave) 0 0 / 256px 256px, #0b0d0b;
}
[data-skin='vine_live'] .hero-style-strip .thumbs::before, [data-skin='vine_live'] .hero-style-strip .thumbs::after {
  content: ''; position: absolute; top: -39px; right: 0; left: 0; z-index: 3; height: 60px; pointer-events: none;
}
[data-skin='vine_live'] .hero-style-strip .thumbs::before { background: url("../img/ui/vine_live/hero/rail.webp") 0 0 / 960px 60px repeat-x; animation: vine-hero-sway 9s ease-in-out infinite; }
[data-skin='vine_live'] .hero-style-strip .thumbs::after {
  background: var(--accent-hot); -webkit-mask: url("../img/ui/vine_live/hero/rail_buds.webp") 0 0 / 960px 60px repeat-x; mask: url("../img/ui/vine_live/hero/rail_buds.webp") 0 0 / 960px 60px repeat-x;
  animation: vine-hero-sway 9s ease-in-out infinite, vine-hero-breathe 4.5s ease-in-out infinite;
}
@keyframes vine-hero-sway { 50% { translate: 0 -1.5px; } }
@keyframes vine-hero-breathe { 50% { opacity: 0.45; } }
[data-skin='vine_live'] .hero-style-strip .thumbs-row { height: 96px; padding-top: 6px; }
[data-skin='vine_live'] .hero-style-strip .thumbs-list { gap: 8px; }
[data-skin='vine_live'] .hero-style-strip .thumb {
  padding-left: 54px; border-radius: 10px; background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 0 0 1px rgba(190, 205, 225, 0.08); color: #c3cbc4;
}
[data-skin='vine_live'] .hero-style-strip .thumb.is-on {
  background: radial-gradient(ellipse 120px 70px at 30px 50%, rgba(var(--accent-rgb), 0.38), transparent 70%), linear-gradient(to right, rgba(var(--accent-rgb), 0.2), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35); color: #fff;
}
/* the bud, and the flower of light it opens into */
[data-skin='vine_live'] .hero-style-strip .thumb::before {
  content: ''; position: absolute; top: calc(50% - 20px); left: 10px; width: 36px; height: 36px; pointer-events: none;
  background: url("../img/ui/vine_live/hero/bud.webp") center / 100% 100% no-repeat;
}
[data-skin='vine_live'] .hero-style-strip .thumb::after {
  left: 10px; top: calc(50% - 20px); bottom: auto; width: 36px; height: 36px; box-shadow: none; background: var(--accent-hot);
  -webkit-mask: url("../img/ui/vine_live/hero/bloom.webp") center / 100% 100% no-repeat; mask: url("../img/ui/vine_live/hero/bloom.webp") center / 100% 100% no-repeat;
  transform-origin: 50% 50%; scale: 0.28; opacity: 0.6; animation: none; transition: scale 900ms var(--spring), opacity 500ms var(--ease);
}
[data-skin='vine_live'] .hero-style-strip .thumb:hover::after { scale: 0.42; opacity: 0.85; }
[data-skin='vine_live'] .hero-style-strip .thumb.is-on::after { scale: 1.15; opacity: 1; animation: vine-hero-turn 30s linear infinite; }
@keyframes vine-hero-turn { to { rotate: 360deg; } }
/* the vine autoplay grows, and its lit tip */
[data-skin='vine_live'] .hero-style-strip .thumb .hero-grow { top: auto; bottom: -10px; height: 40px; }
[data-skin='vine_live'] .hero-style-strip .thumb .hero-grow > span { background: url("../img/ui/vine_live/hero/grow.webp") 0 50% / 640px 40px no-repeat; }
[data-skin='vine_live'] .hero-style-strip .thumb .hero-grow::after {
  content: ''; position: absolute; top: 9px; right: 0; width: 22px; height: 22px;
  background: radial-gradient(closest-side, #fff 0 12%, var(--accent-hot) 30%, rgba(var(--accent-rgb), 0.3) 60%, transparent);
}
/* the arrows: curled leaf buds, lit along their seam on hover */
[data-skin='vine_live'] .hero-style-strip .thumb-arrow { position: relative; background: url("../img/ui/vine_live/hero/arrow.webp") center / 100% 100% no-repeat; }
[data-skin='vine_live'] .hero-style-strip .thumb-arrow:hover { background-image: url("../img/ui/vine_live/hero/arrow.webp"); }
[data-skin='vine_live'] .hero-style-strip .thumb-arrow::after {
  content: ''; position: absolute; inset: 0; background: var(--accent-hot);
  -webkit-mask: url("../img/ui/vine_live/hero/arrow_glow.webp") center / 100% 100% no-repeat; mask: url("../img/ui/vine_live/hero/arrow_glow.webp") center / 100% 100% no-repeat;
  opacity: 0.25; transition: opacity 300ms var(--ease);
}
[data-skin='vine_live'] .hero-style-strip .thumb-arrow:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-skin='vine_live'] .hero-style-strip .thumbs::before, [data-skin='vine_live'] .hero-style-strip .thumbs::after,
  [data-skin='vine_live'] .hero-style-strip .thumb.is-on::after { animation: none; }
}
@media (max-width: 760px) {
  [data-skin='vine_live'] .hero-style-strip .thumb { padding-left: 42px; padding-right: 10px; }
  [data-skin='vine_live'] .hero-style-strip .thumb::before, [data-skin='vine_live'] .hero-style-strip .thumb::after { left: 4px; }
}

/* ---------- Modern: the stories on glass ----------
   No images: a frosted plate with a hairline holds the story bars, each named by its slide (its title attribute) in
   small capitals, the one showing filling in the accent with its glow, those shown before it a quiet white; the side
   arrows are glass discs. */
[data-skin='modern'] .hero-style-stories .hero-stories {
  bottom: 26px; gap: 14px; padding: 12px 18px 12px; border-radius: 14px; background: rgba(12, 13, 17, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 40px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
[data-skin='modern'] .hero-style-stories .hero-story { display: grid; min-width: 0; gap: 9px; padding: 0; text-align: left; }
[data-skin='modern'] .hero-style-stories .hero-story::before {
  content: attr(title); overflow: hidden; color: rgba(255, 255, 255, 0.42); font: 600 11px/1.2 var(--font-display); letter-spacing: 0.12em;
  text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; transition: color 300ms var(--ease);
}
[data-skin='modern'] .hero-style-stories .hero-story:hover::before { color: rgba(255, 255, 255, 0.78); }
[data-skin='modern'] .hero-style-stories .hero-story.is-on::before { color: #fff; }
[data-skin='modern'] .hero-style-stories .hero-story i { height: 3px; background: rgba(255, 255, 255, 0.12); overflow: visible; }
[data-skin='modern'] .hero-style-stories .hero-story i::after { background: rgba(255, 255, 255, 0.55); }
[data-skin='modern'] .hero-style-stories .hero-story.is-on i::after {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), var(--accent-hot)); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75), 0 0 2px var(--accent-hot);
}
[data-skin='modern'] .hero-style-stories .hero-story:hover i { background: rgba(255, 255, 255, 0.22); }
[data-skin='modern'] .hero-style-stories .hero-arrow.is-side {
  width: 46px; height: 46px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
[data-skin='modern'] .hero-style-stories .hero-arrow.is-side:hover { background: var(--accent); box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), 0.9); }
@media (max-width: 760px) {
  [data-skin='modern'] .hero-style-stories .hero-stories { bottom: 16px; width: calc(100% - 24px); gap: 8px; padding: 10px 12px; }
  [data-skin='modern'] .hero-style-stories .hero-story::before { font-size: 10px; letter-spacing: 0.08em; }
}

/* ---------- The page under the hero (the floor) ----------
   The hero and what follows it share one holder (kernel/hero.php floor_open(): data-mode, data-floor and the values).
   Full site (the default): nothing here draws; the site's background shows behind the whole page, as ever. Divided: what
   follows the hero lies on a solid floor (.floor) in the skin's own dark colour, and the hero ends above it in the skin's
   edge. The edge's upper part (its torn line and its light) is drawn inside the hero, over the slides and under the
   hero's own buttons; its lower part at the floor's top. The floor's fill (a pattern the admin picks: img/ui/floor/,
   white masks the accent fills faintly, auto the skin's own; none; a pattern of the admin's own, tiled; a picture,
   dimmed) reaches up to the edge's tips: under the edge in the floor, and inside the hero through .hero-floor, masked to
   the edge's own shape (--fill-up px of it, where the skin's edge is the floor's material: cloth, ink). The strip design
   ends on its own bar; the boxed designs (panel, showcase) have the whole edge at the floor's top. */
.main:has(> .floor-page) { display: flex; flex-direction: column; }
.floor-page { --floor-w: 256px; --floor-h: 256px; display: flex; flex: 1 0 auto; flex-direction: column; }
.floor { position: relative; flex: 1 0 auto; isolation: isolate; margin-bottom: -56px; padding-bottom: 56px; }
.floor-edge, .hero-floor { display: none; }
/* the patterns, and each skin's own */
.floor-page[data-floor='weave'] { --floor-pattern: url("/config/resources/img/ui/floor/weave.webp"); }
.floor-page[data-floor='damask'] { --floor-pattern: url("/config/resources/img/ui/floor/damask.webp"); }
.floor-page[data-floor='runes'] { --floor-pattern: url("/config/resources/img/ui/floor/runes.webp"); }
.floor-page[data-floor='vellum'] { --floor-pattern: url("/config/resources/img/ui/floor/vellum.webp"); }
.floor-page[data-floor='scales'] { --floor-pattern: url("/config/resources/img/ui/floor/scales.webp"); }
.floor-page[data-floor='hex'] { --floor-pattern: url("/config/resources/img/ui/floor/hex.webp"); --floor-w: 222px; --floor-h: 192px; }
.floor-page[data-floor='knots'] { --floor-pattern: url("/config/resources/img/ui/floor/knots.webp"); }
.floor-page[data-floor='stone'] { --floor-pattern: url("/config/resources/img/ui/floor/stone.webp"); }
.floor-page[data-floor='stars'] { --floor-pattern: url("/config/resources/img/ui/floor/stars.webp"); }
.floor-page[data-floor='ink'] { --floor-pattern: url("/config/resources/img/ui/floor/ink.webp"); }
.floor-page[data-floor='waves'] { --floor-pattern: url("/config/resources/img/ui/floor/waves.webp"); }
.floor-page[data-floor='leaves'] { --floor-pattern: url("/config/resources/img/ui/floor/leaves.webp"); }
.floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/stars.webp"); }
[data-skin='arcane'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/runes.webp"); }
[data-skin='parchment'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/vellum.webp"); }
[data-skin='vine_live'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/weave.webp"); }
[data-skin='modern'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/hex.webp"); --floor-w: 222px; --floor-h: 192px; }
[data-skin='gilded'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/damask.webp"); }
[data-skin='samurai'] .floor-page[data-floor='auto'] { --floor-pattern: url("/config/resources/img/ui/floor/waves.webp"); }
/* each skin's floor colour and the edge it meets the hero with: a picture or mask (--edge-art, --edge-w x --edge-h,
   repeating across), --edge-up of it inside the hero, its light (--edge-light, a mask filled with --edge-glow), and how
   far up into the hero the fill follows it (--fill-up) */
[data-skin='arcane'] {
  --floor-base-skin: #110f15; --edge-art: url("/config/resources/img/ui/arcane/hero/edge.webp"); --edge-light: url("/config/resources/img/ui/arcane/hero/edge_ember.webp");
  --edge-glow: var(--accent-hot); --edge-w: 960px; --edge-h: 120px; --edge-up: 70px; --fill-up: 70px;
}
[data-skin='parchment'] { --floor-base-skin: #1b130c; --edge-art: url("/config/resources/img/ui/parchment/hero/foot.webp"); --edge-w: 960px; --edge-h: 46px; --edge-up: 30px; }
[data-skin='vine_live'] {
  --floor-base-skin: #0b0e0b; --edge-art: url("/config/resources/img/ui/vine_live/hero/rail.webp"); --edge-light: url("/config/resources/img/ui/vine_live/hero/rail_buds.webp");
  --edge-glow: var(--accent-hot); --edge-w: 960px; --edge-h: 60px; --edge-up: 39px;
}
[data-skin='modern'] { --floor-base-skin: #0b0c10; }
[data-skin='gilded'] { --floor-base-skin: var(--gd-bg, #15120c); }
[data-skin='samurai'] { --floor-base-skin: var(--sm-ink, #060505); --edge-art: url("/config/resources/img/ui/samurai/hero/edge.webp"); --edge-w: 960px; --edge-h: 110px; --edge-up: 64px; --fill-up: 64px; }

/* divided: the floor and its fill */
.floor-page[data-mode='divided'] .floor { background: var(--floor-base-skin, #0c0c0f); }
.floor-page[data-mode='divided'] .floor::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--accent); opacity: calc(var(--floor-strength, 0.4) * 0.35);
  -webkit-mask: var(--floor-pattern) 0 0 / calc(var(--floor-w) * var(--floor-scale, 1)) calc(var(--floor-h) * var(--floor-scale, 1)) repeat;
  mask: var(--floor-pattern) 0 0 / calc(var(--floor-w) * var(--floor-scale, 1)) calc(var(--floor-h) * var(--floor-scale, 1)) repeat;
}
.floor-page[data-mode='divided'][data-floor='none'] .floor::after, .floor-page[data-mode='divided'][data-floor='none'] .hero-floor { display: none; }
.floor-page[data-mode='divided'][data-floor='own'] .floor::after { background: var(--floor-media) 0 0 repeat; opacity: var(--floor-strength, 0.4); -webkit-mask: none; mask: none; }
/* a picture is fixed to the window, so its part in the hero and its part on the floor meet exactly */
.floor-page[data-mode='divided'][data-floor='picture'] .floor::after {
  background: linear-gradient(rgba(0, 0, 0, var(--floor-dim, 0.6)), rgba(0, 0, 0, var(--floor-dim, 0.6))) fixed, var(--floor-media) center / cover no-repeat fixed;
  opacity: 1; -webkit-mask: none; mask: none;
}
/* the fill's upper part, inside the hero over the edge's own shape up to its tips (under the hero's buttons and the
   edge's light); a pattern's tiles end at its foot where the floor's begin, so the two run on without a seam */
.floor-page[data-mode='divided'] .hero-wrap:not(.wrap, .hero-style-strip) .hero-floor {
  position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: block; height: var(--fill-up, 0px); pointer-events: none;
  background: var(--accent); opacity: calc(var(--floor-strength, 0.4) * 0.35);
  -webkit-mask-image: var(--floor-pattern), var(--edge-art); mask-image: var(--floor-pattern), var(--edge-art);
  -webkit-mask-position: 0 100%, 0 0; mask-position: 0 100%, 0 0;
  -webkit-mask-size: calc(var(--floor-w) * var(--floor-scale, 1)) calc(var(--floor-h) * var(--floor-scale, 1)), var(--edge-w) var(--edge-h);
  mask-size: calc(var(--floor-w) * var(--floor-scale, 1)) calc(var(--floor-h) * var(--floor-scale, 1)), var(--edge-w) var(--edge-h);
  -webkit-mask-repeat: repeat, repeat-x; mask-repeat: repeat, repeat-x;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.floor-page[data-mode='divided'][data-floor='own'] .hero-wrap .hero-floor {
  background: var(--floor-media) 0 100% repeat; opacity: var(--floor-strength, 0.4);
  -webkit-mask: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x; mask: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
}
.floor-page[data-mode='divided'][data-floor='picture'] .hero-wrap .hero-floor {
  background: linear-gradient(rgba(0, 0, 0, var(--floor-dim, 0.6)), rgba(0, 0, 0, var(--floor-dim, 0.6))) fixed, var(--floor-media) center / cover no-repeat fixed; opacity: 1;
  -webkit-mask: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x; mask: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
}

/* divided: the edges (arcane, parchment, living vines: a picture; its light over it) */
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='parchment'] *, [data-skin='vine_live'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::before,
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='parchment'] *, [data-skin='vine_live'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after {
  content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: var(--edge-up); pointer-events: none;
  background: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
}
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='vine_live'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after {
  background: var(--edge-glow);
  -webkit-mask: var(--edge-light) 0 0 / var(--edge-w) var(--edge-h) repeat-x; mask: var(--edge-light) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
  animation: floor-smoulder 5s ease-in-out infinite;
}
.floor-page[data-mode='divided']:is([data-skin='parchment'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after { display: none; }
@keyframes floor-smoulder { 0%, 100% { opacity: 0.85; } 35% { opacity: 0.5; } 60% { opacity: 1; } 80% { opacity: 0.65; } }
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='parchment'] *, [data-skin='vine_live'] *) .hero-wrap:not(.wrap, .hero-style-strip) + .floor::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: -2; height: calc(var(--edge-h) - var(--edge-up)); pointer-events: none;
  background: var(--edge-art) 0 calc(var(--edge-up) * -1) / var(--edge-w) var(--edge-h) repeat-x;
}
/* the boxed designs: the whole edge at the floor's top, its light on the floor's own element */
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='parchment'] *, [data-skin='vine_live'] *, [data-skin='samurai'] *) .hero-wrap.wrap + .floor { margin-top: 40px; }
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='parchment'] *, [data-skin='vine_live'] *) .hero-wrap.wrap + .floor::before {
  content: ''; position: absolute; top: calc(var(--edge-up) * -1); right: 0; left: 0; z-index: -2; height: var(--edge-h); pointer-events: none;
  background: var(--edge-art) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
}
.floor-page[data-mode='divided']:is([data-skin='arcane'] *, [data-skin='vine_live'] *) .hero-wrap.wrap + .floor > .floor-edge {
  position: absolute; top: calc(var(--edge-up) * -1); right: 0; left: 0; z-index: 0; display: block; height: var(--edge-h); pointer-events: none; background: var(--edge-glow);
  -webkit-mask: var(--edge-light) 0 0 / var(--edge-w) var(--edge-h) repeat-x; mask: var(--edge-light) 0 0 / var(--edge-w) var(--edge-h) repeat-x;
  animation: floor-smoulder 5s ease-in-out infinite;
}
/* samurai: one dry stroke of the skin's ink (a mask, so it takes the ink's tint), a thin stroke of blood dragged in it */
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::before,
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after,
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap.wrap + .floor::before,
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap.wrap + .floor > .floor-edge {
  content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: block; height: 64px; pointer-events: none; background: var(--sm-ink, #060505);
  -webkit-mask: url("/config/resources/img/ui/samurai/hero/edge.webp") 0 0 / 960px 110px repeat-x; mask: url("/config/resources/img/ui/samurai/hero/edge.webp") 0 0 / 960px 110px repeat-x;
}
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after,
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap.wrap + .floor > .floor-edge {
  background: var(--sm-blood, var(--accent));
  -webkit-mask-image: url("/config/resources/img/ui/samurai/hero/edge_blood.webp"); mask-image: url("/config/resources/img/ui/samurai/hero/edge_blood.webp");
}
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap.wrap + .floor::before { top: -64px; bottom: auto; z-index: -2; }
.floor-page[data-mode='divided']:is([data-skin='samurai'] *) .hero-wrap.wrap + .floor > .floor-edge { top: -64px; bottom: auto; z-index: 0; }
/* modern: the hero settles into the floor's colour and a hairline of the accent divides them; gilded: a double gold rule */
.floor-page[data-mode='divided']:is([data-skin='modern'] *, [data-skin='gilded'] *) .hero-wrap:not(.wrap, .hero-style-strip) .hero::after {
  content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: 120px; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--floor-base-skin) 92%, transparent));
}
.floor-page[data-mode='divided']:is([data-skin='modern'] *) .floor::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(var(--accent-rgb), 0.8) 50%, rgba(255, 255, 255, 0.1) 80%, transparent);
  box-shadow: 0 0 18px 1px rgba(var(--accent-rgb), 0.35);
}
.floor-page[data-mode='divided']:is([data-skin='gilded'] *) .floor::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-hot) 50%, var(--accent) 78%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 88%) 0 4px / 100% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}
.floor-page[data-mode='divided']:is([data-skin='modern'] *, [data-skin='gilded'] *) .hero-wrap.wrap + .floor { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
  .hero-wrap .hero::after, .floor > .floor-edge { animation: none !important; }
}