/* Dragonslayer: one pinned stage. Type is ink-sharp (no glows on text), the palette is the world's own. */
.dragonslayer_wrap {
  --ds-void: #0b0d0f; --ds-bone: #e6e1d8; --ds-bone-dim: rgba(230, 225, 216, .56); --ds-blood: #8e1b1b; --ds-blood-hi: #c8322a;
  --ds-ember: #ff7a3d; --ds-paper: #e9e3d6;
  --ds-display: 'DS Caslon Display', Georgia, serif; --ds-statement: 'DS Caslon Text', Georgia, serif;
  --ds-book: 'DS Garamond', Georgia, serif; --ds-mono: 'DS Plex Mono', ui-monospace, monospace;
  --ds-gutter: clamp(16px, 2.2vw, 32px); --ds-heavy: cubic-bezier(.7, 0, .2, 1);
  position: relative; height: 100svh; overflow: hidden; background: var(--ds-void); color: var(--ds-bone); font-family: var(--ds-book); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.dragonslayer_wrap .dragonslayer_contain { position: relative; width: 100%; height: 100%; overflow: hidden; }
.dragonslayer_wrap .dragonslayer_caps { font-family: var(--ds-display); text-transform: uppercase; letter-spacing: .06em; }
.dragonslayer_wrap .dragonslayer_mono { font-family: var(--ds-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dragonslayer_wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dragonslayer_wrap a { color: inherit; }

.dragonslayer_wrap .dragonslayer_world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ds-heavy); }
.dragonslayer_wrap.is-in .dragonslayer_world { opacity: 1; }
.dragonslayer_wrap .dragonslayer_grain { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: dragonslayer-grain .6s steps(4) infinite; }
@keyframes dragonslayer-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* chrome */
.dragonslayer_wrap .dragonslayer_top { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: var(--ds-gutter); padding-right: calc(var(--ds-gutter) + 128px); pointer-events: none;
  opacity: 0; transition: opacity 1.2s .6s; }
.dragonslayer_wrap.is-in .dragonslayer_top { opacity: 1; }
.dragonslayer_wrap .dragonslayer_top > * { pointer-events: auto; }
.dragonslayer_wrap .dragonslayer_label { margin: 0; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .04em; }
.dragonslayer_wrap .dragonslayer_controls { position: relative; display: flex; gap: 22px; align-items: flex-start; }
.dragonslayer_wrap .dragonslayer_sound, .dragonslayer_wrap .dragonslayer_gfx { padding-top: .5em; }
.dragonslayer_wrap .dragonslayer_gfx { color: var(--ds-bone-dim); transition: color .3s; }
.dragonslayer_wrap .dragonslayer_gfx:hover, .dragonslayer_wrap .dragonslayer_gfx.is-raised { color: var(--ds-bone); }
/* which GPU is drawing, and how to get the discrete one when the browser picked the integrated */
.dragonslayer_wrap .dragonslayer_gpu {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(300px, 70vw); margin: 0; text-align: right;
  font-size: 10px; line-height: 1.5; color: var(--ds-bone-dim); text-transform: none; letter-spacing: .04em;
  opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; pointer-events: none;
}
.dragonslayer_wrap .dragonslayer_gpu.is-on { opacity: 1; transform: none; }
.dragonslayer_wrap .dragonslayer_sound[aria-pressed="true"] { color: var(--ds-ember); }
.dragonslayer_wrap .dragonslayer_foot { position: absolute; z-index: 10; inset: auto 0 0; display: flex; justify-content: space-between; padding: var(--ds-gutter); color: var(--ds-bone-dim); pointer-events: none; }
.dragonslayer_wrap .dragonslayer_progress { position: absolute; z-index: 10; left: 50%; bottom: calc(var(--ds-gutter) + 4px); width: 120px; height: 1px; transform: translateX(-50%); background: rgba(230, 225, 216, .18); }
.dragonslayer_wrap .dragonslayer_progress span { position: absolute; inset: 0; background: var(--ds-blood-hi); transform: scaleX(0); transform-origin: left; }

/* the chapter nav: hidden until the sword leaves the wound; the brand bleeds open into a rail */
.dragonslayer_wrap .dragonslayer_nav { position: fixed; z-index: 30; top: calc(var(--ds-gutter) - 6px); right: var(--ds-gutter); width: 44px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .9s var(--ds-heavy), transform .9s var(--ds-heavy), visibility 0s .9s; }
.dragonslayer_wrap .dragonslayer_nav.is-unlocked { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ds-heavy), transform .9s var(--ds-heavy), visibility 0s; }
.dragonslayer_wrap .dragonslayer_nav_mark { position: relative; display: block; width: 44px; height: 44px; color: var(--ds-blood-hi); }
.dragonslayer_wrap .dragonslayer_nav_mark svg { width: 100%; height: 100%; overflow: visible; }
.dragonslayer_wrap .dragonslayer_nav_mark path { fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-miterlimit: 6; }
.dragonslayer_wrap .dragonslayer_nav_mark .dragonslayer_nav_fill { fill: currentColor; stroke: none; }
.dragonslayer_wrap .dragonslayer_nav.is-fresh .dragonslayer_nav_mark path { animation: dragonslayer-bleed 1.6s var(--ds-heavy) both; }
@keyframes dragonslayer-bleed { from { stroke-dasharray: 600; stroke-dashoffset: 600; } to { stroke-dasharray: 600; stroke-dashoffset: 0; } }
.dragonslayer_wrap .dragonslayer_nav_now { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); color: var(--ds-bone-dim); white-space: nowrap; }
.dragonslayer_wrap .dragonslayer_rail { position: absolute; top: calc(100% + 14px); right: 21px; margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--ds-blood-hi);
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ds-heavy); }
.dragonslayer_wrap .dragonslayer_nav.is-open .dragonslayer_rail { clip-path: inset(0 -40px -10px -400px); }
.dragonslayer_wrap .dragonslayer_rail li { position: relative; }
.dragonslayer_wrap .dragonslayer_rail a { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 7px 16px 7px 24px; font-family: var(--ds-display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--ds-bone-dim); transition: color .3s; }
.dragonslayer_wrap .dragonslayer_rail a .dragonslayer_mono { order: 2; width: 3.2em; text-align: left; font-size: 10px; }
.dragonslayer_wrap .dragonslayer_rail a:hover, .dragonslayer_wrap .dragonslayer_rail a.is-here { color: var(--ds-bone); }
.dragonslayer_wrap .dragonslayer_rail li::after { content: ''; position: absolute; right: -4px; top: 50%; width: 7px; height: 1px; background: var(--ds-blood-hi); }
.dragonslayer_wrap .dragonslayer_rail a.is-here::before { content: ''; position: absolute; right: -4px; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ds-blood-hi); }

/* layers: one per beat, faded and parallaxed by the scroll */
.dragonslayer_wrap .dragonslayer_layers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dragonslayer_wrap .dragonslayer_layer { position: absolute; inset: 0; padding: calc(var(--ds-gutter) * 4) var(--ds-gutter); opacity: 0; visibility: hidden; }
.dragonslayer_wrap .dragonslayer_layer.is-on .dragonslayer_hold, .dragonslayer_wrap .dragonslayer_layer.is-on .dragonslayer_hud, .dragonslayer_wrap .dragonslayer_layer.is-on button { pointer-events: auto; }
.dragonslayer_wrap .dragonslayer_layer > * { will-change: transform; }
.dragonslayer_wrap .dragonslayer_char { display: inline-block; will-change: transform, opacity; }
.dragonslayer_wrap .dragonslayer_word { display: inline-block; white-space: nowrap; }

/* the column: every beat's words on one grid (left gutter, one top line, one rhythm between the parts) */
.dragonslayer_wrap .dragonslayer_col { position: absolute; left: var(--ds-gutter); top: var(--ds-col-top, 28vh); width: var(--ds-col-w, min(40vw, 620px)); display: flex; flex-direction: column; align-items: flex-start; }
.dragonslayer_wrap .dragonslayer_kicker { margin: 0 0 clamp(14px, 1.6vh, 22px); color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_kicker::before { content: ''; display: inline-block; width: 22px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--ds-blood-hi); }
.dragonslayer_wrap .dragonslayer_display { margin: 0; font-family: var(--ds-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--ds-display-size, clamp(34px, min(4.4vw, 8vh), 92px)); line-height: .96; letter-spacing: .005em; }
.dragonslayer_wrap .dragonslayer_aside { max-width: 26ch; margin: clamp(22px, 3vh, 36px) 0 0; font-size: 18px; line-height: 1.4; color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_attr { margin: clamp(20px, 2.6vh, 32px) 0 0; color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_attr::before { content: '— '; }
/* what a character says: the book voice, italic, set large and loose */
.dragonslayer_wrap .dragonslayer_spoken { margin: 0; font-family: var(--ds-book); font-style: italic; font-size: clamp(26px, min(2.7vw, 5vh), 46px); line-height: 1.16; letter-spacing: -.005em; }
.dragonslayer_wrap .is-brand { --ds-col-top: 34vh; --ds-col-w: calc(50vw - 30vh - var(--ds-gutter) * 2); }
.dragonslayer_wrap .is-wound { --ds-col-top: 24vh; --ds-col-w: min(36vw, 560px); --ds-display-size: clamp(34px, min(3.9vw, 7.4vh), 80px); }
.dragonslayer_wrap .is-blade { --ds-col-top: 26vh; --ds-col-w: min(34vw, 520px); }
.dragonslayer_wrap .is-night { --ds-col-top: 13vh; --ds-col-w: min(46vw, 680px); }
.dragonslayer_wrap .dragonslayer_cue { position: absolute; left: 50%; bottom: 9vh; margin: 0; transform: translateX(-50%); color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_cue::after { content: ''; display: block; width: 1px; height: 36px; margin: 12px auto 0; background: var(--ds-blood-hi); animation: dragonslayer-drip 2.4s var(--ds-heavy) infinite; }
@keyframes dragonslayer-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* what to do here: small instructions on a dark glass chip, legible over any ground */
.dragonslayer_wrap .dragonslayer_hold, .dragonslayer_wrap .dragonslayer_hint, .dragonslayer_wrap .dragonslayer_night_hint {
  padding: 11px 22px; border-radius: 999px; background: rgba(11, 13, 15, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ds-bone);
}
.dragonslayer_wrap .dragonslayer_hold { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); isolation: isolate; overflow: hidden; padding: 14px 32px; border: 1px solid rgba(200, 50, 42, .75); font-size: 13px; letter-spacing: .3em; white-space: nowrap; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dragonslayer_wrap .dragonslayer_hold:focus-visible, .dragonslayer_wrap button:focus-visible, .dragonslayer_wrap a:focus-visible { outline: 1px solid var(--ds-ember); outline-offset: 4px; }
.dragonslayer_wrap .dragonslayer_hold_fill { position: absolute; inset: 0; z-index: -1; background: var(--ds-blood); transform: scaleX(0); transform-origin: left; }

.dragonslayer_wrap .dragonslayer_hint { position: absolute; left: 50%; bottom: 9vh; margin: 0; transform: translateX(-50%); color: var(--ds-bone-dim); white-space: nowrap; letter-spacing: .24em; }

.dragonslayer_wrap .dragonslayer_hud { position: absolute; top: 14vh; right: 6vw; width: min(320px, 84vw); padding: 22px; border: 1px solid rgba(230, 225, 216, .16); border-radius: 4px; background: rgba(12, 14, 16, .62); backdrop-filter: blur(14px); }
.dragonslayer_wrap .dragonslayer_hud_head { padding-bottom: 14px; border-bottom: 1px solid rgba(230, 225, 216, .12); }
.dragonslayer_wrap .dragonslayer_hud_head h2 { margin: 0; font-family: var(--ds-display); font-weight: 400; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.dragonslayer_wrap .dragonslayer_parts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 12px; }
.dragonslayer_wrap .dragonslayer_parts button { width: 100%; padding: 7px 0; border: 1px solid rgba(230, 225, 216, .14); border-radius: 3px; font: inherit; letter-spacing: inherit; transition: border-color .3s, color .3s; }
.dragonslayer_wrap .dragonslayer_parts button:hover, .dragonslayer_wrap .dragonslayer_parts .is-on { border-color: var(--ds-ember); color: var(--ds-ember); }
.dragonslayer_wrap .dragonslayer_hud_read { min-height: 2.8em; margin: 0 0 14px; font-size: 16px; line-height: 1.35; }
.dragonslayer_wrap .dragonslayer_specs { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(230, 225, 216, .1); }
.dragonslayer_wrap .dragonslayer_specs div { display: flex; justify-content: space-between; gap: 16px; }
.dragonslayer_wrap .dragonslayer_specs dt { color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_specs dd { margin: 0; text-align: right; }
.dragonslayer_wrap .dragonslayer_who_btn { padding: 0 0 2px; border-bottom: 1px dashed rgba(200, 50, 42, .7); color: var(--ds-bone); letter-spacing: inherit; transition: color .3s, border-color .3s; }
.dragonslayer_wrap .dragonslayer_who_btn:hover, .dragonslayer_wrap .dragonslayer_who_btn.is-on { color: var(--ds-ember); border-bottom-style: solid; border-color: var(--ds-ember); }
/* a hand on the sword: a page torn from the manga beside the HUD. Newsprint, Miura's panel inked in a heavy frame with the
   name lettered down its edge, the story in a narration box, the folio at the foot */
.dragonslayer_wrap .dragonslayer_who {
  --ink: #0d0b0a; --news: #ece6d8;
  position: absolute; top: 14vh; right: calc(6vw + min(320px, 84vw) + 24px); width: min(320px, 28vw); margin: 0; padding: 10px;
  color: var(--ink); background-color: var(--news);
  background-image: radial-gradient(rgba(13, 11, 10, .07) .6px, transparent .9px), repeating-linear-gradient(97deg, rgba(13, 11, 10, .018) 0 2px, transparent 2px 5px);
  background-size: 3px 3px, auto;
  box-shadow: 0 0 0 1px rgba(13, 11, 10, .35), 14px 18px 0 -4px rgba(0, 0, 0, .6), 0 24px 60px rgba(0, 0, 0, .5); transform: rotate(.8deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .55s var(--ds-heavy), opacity .3s; pointer-events: none;
}
.dragonslayer_wrap .dragonslayer_who:not(.is-on) { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 0; transition: clip-path .35s var(--ds-heavy), opacity .3s .1s; }
.dragonslayer_wrap .dragonslayer_who_frame { position: relative; overflow: hidden; border: 3px solid var(--ink); background: var(--ink); aspect-ratio: 4 / 3; }
.dragonslayer_wrap .dragonslayer_who_img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(1.04); transform: scale(1.06); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
.dragonslayer_wrap .dragonslayer_who.is-on .dragonslayer_who_img { transform: scale(1); }
.dragonslayer_wrap .dragonslayer_who_jp {
  position: absolute; top: 6px; right: 6px; padding: 7px 3px; writing-mode: vertical-rl; text-orientation: upright;
  background: var(--news); border: 2px solid var(--ink); font-size: 14px; line-height: 1; letter-spacing: .12em; font-weight: 700;
}
.dragonslayer_wrap .dragonslayer_who_cap { display: grid; gap: 8px; padding: 10px 0 0; }
.dragonslayer_wrap .dragonslayer_who_name {
  position: relative; padding-bottom: 6px; border-bottom: 3px solid var(--ink); font-family: var(--ds-display); font-size: 28px; line-height: .95; text-transform: uppercase;
}
.dragonslayer_wrap .dragonslayer_who_name::before {
  content: ''; position: absolute; z-index: -1; left: -4px; right: 0; top: -3px; bottom: 3px;
  background-image: radial-gradient(circle, var(--ink) .8px, transparent 1.1px); background-size: 4px 4px; opacity: .22;
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 80%); mask-image: linear-gradient(100deg, #000 10%, transparent 80%);
}
.dragonslayer_wrap .dragonslayer_who_text { padding: 9px 11px; border: 2px solid var(--ink); background: #f4efe4; font-family: var(--ds-book); font-size: 15px; line-height: 1.36; }
.dragonslayer_wrap .dragonslayer_who_credit { font-size: 8.5px; letter-spacing: .12em; color: rgba(13, 11, 10, .55); }

.dragonslayer_wrap .dragonslayer_night_hint { position: absolute; left: 50%; bottom: 9vh; margin: 0; transform: translateX(-50%); white-space: nowrap; letter-spacing: .24em; }
.dragonslayer_wrap .dragonslayer_night_count { position: absolute; right: var(--ds-gutter); top: 13vh; margin: 0; text-align: right; color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_night_count b { display: block; margin-top: 10px; font-family: var(--ds-statement); font-size: clamp(40px, 4.4vw, 72px); line-height: 1; font-weight: 700; color: var(--ds-blood-hi); letter-spacing: .02em; font-variant-numeric: tabular-nums; transform-origin: right center; }
.dragonslayer_wrap .dragonslayer_night_count b.is-hit { animation: dragonslayer-hit .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dragonslayer-hit { 0% { transform: scale(1.22); color: var(--ds-bone); } 100% { transform: scale(1); } }
.dragonslayer_wrap .dragonslayer_combo { display: block; height: 1.4em; margin-top: 8px; color: var(--ds-bone); opacity: 0; transition: opacity .5s; }
.dragonslayer_wrap .dragonslayer_combo.is-on { opacity: 1; transition: opacity .05s; }
/* the cut */
.dragonslayer_wrap .dragonslayer_slash { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.dragonslayer_wrap[data-beat="nightfall"] .dragonslayer_slash { visibility: visible; }

.dragonslayer_wrap .dragonslayer_statement { position: absolute; left: 0; right: 0; top: 30vh; margin: 0; font-family: var(--ds-statement); font-weight: 700; text-transform: uppercase; text-align: center; font-size: clamp(56px, min(8vw, 12vh), 150px); line-height: .96; letter-spacing: .01em; }
.dragonslayer_wrap .dragonslayer_homage { position: absolute; left: 0; right: 0; bottom: 8vh; margin: 0; text-align: center; font-size: 18px; letter-spacing: .02em; }

.dragonslayer_wrap .dragonslayer_inter { position: absolute; left: 0; right: 0; top: 44vh; z-index: 6; margin: 0; text-align: center; font-family: var(--ds-book); font-style: italic; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.3; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }

/* the cursor: a small drop of blood; a ring at nightfall and in the specs */
.dragonslayer_wrap .dragonslayer_cursor { position: fixed; left: -5px; top: -5px; z-index: 60; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; background: var(--ds-blood-hi); opacity: 0; transition: width .3s, height .3s, left .3s, top .3s, background .3s; }
.dragonslayer_wrap.is-in .dragonslayer_cursor { opacity: 1; }
.dragonslayer_wrap[data-beat="specs"] .dragonslayer_cursor, .dragonslayer_wrap[data-beat="nightfall"] .dragonslayer_cursor { width: 28px; height: 28px; left: -14px; top: -14px; background: none; border: 1px solid var(--ds-blood-hi); }
.dragonslayer_wrap.is-past .dragonslayer_cursor { opacity: 0; }
@media (hover: none) { .dragonslayer_wrap .dragonslayer_cursor { display: none; } }
/* at nightfall a sideways swipe is a swing; up and down still scroll the page on */
.dragonslayer_wrap[data-beat="nightfall"] .dragonslayer_contain { touch-action: pan-y; }

/* preloader */
.dragonslayer_wrap .dragonslayer_loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--ds-void); transition: background 1.6s var(--ds-heavy), opacity 1.2s 1.2s; }
.dragonslayer_wrap .dragonslayer_loader.is-gone { background: transparent; opacity: 0; pointer-events: none; }
.dragonslayer_wrap .dragonslayer_loader_brand { width: 58.6vh; height: 58.6vh; max-width: 92vw; max-height: 92vw; }
.dragonslayer_wrap .dragonslayer_loader_brand svg { width: 100%; height: 100%; overflow: visible; }
.dragonslayer_wrap .dragonslayer_brand_stroke { fill: none; stroke: var(--ds-blood-hi); stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 6; }
.dragonslayer_wrap .dragonslayer_brand_fill { fill: var(--ds-blood-hi); opacity: 0; transition: opacity .5s; }
.dragonslayer_wrap .dragonslayer_loader.is-done .dragonslayer_brand_fill { opacity: 1; }
.dragonslayer_wrap .dragonslayer_loader.is-done .dragonslayer_loader_brand { animation: dragonslayer-beat 1.4s var(--ds-heavy) infinite; }
@keyframes dragonslayer-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.012); } 24% { transform: scale(1); } 36% { transform: scale(1.008); } }
.dragonslayer_wrap .dragonslayer_loader.is-gone .dragonslayer_brand_stroke, .dragonslayer_wrap .dragonslayer_loader.is-gone .dragonslayer_brand_fill { transition: opacity 1.4s .3s; opacity: 0; }
.dragonslayer_wrap .dragonslayer_loader_count { position: absolute; left: 50%; bottom: 13vh; margin: 0; transform: translateX(-50%); font-size: 13px; letter-spacing: .3em; }
.dragonslayer_wrap .dragonslayer_loader_of { color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_loader_line { position: absolute; left: 0; right: 0; top: 9vh; margin: 0; text-align: center; font-style: italic; font-size: 18px; color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_loader_credit { position: absolute; left: 0; right: 0; bottom: var(--ds-gutter); margin: 0; text-align: center; color: rgba(230, 225, 216, .35); }
.dragonslayer_wrap .dragonslayer_loader_enter { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); display: flex; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .9s var(--ds-heavy); }
.dragonslayer_wrap .dragonslayer_loader.is-done .dragonslayer_loader_enter { opacity: 1; pointer-events: auto; }
.dragonslayer_wrap .dragonslayer_loader.is-done .dragonslayer_loader_count { opacity: 0; transition: opacity .6s; }
.dragonslayer_wrap .dragonslayer_loader.is-gone .dragonslayer_loader_enter, .dragonslayer_wrap .dragonslayer_loader.is-gone .dragonslayer_loader_line, .dragonslayer_wrap .dragonslayer_loader.is-gone .dragonslayer_loader_credit { opacity: 0; transition: opacity .6s; }
/* once entered, nothing of the loader can take a press (its buttons sat over Hold to pull on phones) */
.dragonslayer_wrap .dragonslayer_loader.is-gone, .dragonslayer_wrap .dragonslayer_loader.is-gone * { pointer-events: none !important; }
/* while it's up, a finger on it can't pull the page behind it */
.dragonslayer_wrap .dragonslayer_loader:not(.is-gone) { touch-action: none; overscroll-behavior: contain; }
.dragonslayer_wrap .dragonslayer_loader_btn { padding: 13px 26px; border: 1px solid rgba(200, 50, 42, .7); border-radius: 999px; font-size: 12px; letter-spacing: .26em; white-space: nowrap; transition: background .4s, color .4s; }
.dragonslayer_wrap .dragonslayer_loader_btn:hover { background: var(--ds-blood); }
.dragonslayer_wrap .dragonslayer_loader_btn.is-quiet { border-color: rgba(230, 225, 216, .3); color: var(--ds-bone-dim); }
.dragonslayer_wrap .dragonslayer_loader_btn.is-quiet:hover { background: rgba(230, 225, 216, .08); color: var(--ds-bone); }

/* phones: composed for portrait, not a shrunk desktop */
/* small words over the ground: a shadow of ink under them, so the texture never reads through */
.dragonslayer_wrap .dragonslayer_kicker, .dragonslayer_wrap .dragonslayer_aside, .dragonslayer_wrap .dragonslayer_attr, .dragonslayer_wrap .dragonslayer_cue,
.dragonslayer_wrap .dragonslayer_hint, .dragonslayer_wrap .dragonslayer_night_hint, .dragonslayer_wrap .dragonslayer_homage, .dragonslayer_wrap .dragonslayer_top,
.dragonslayer_wrap .dragonslayer_foot, .dragonslayer_wrap .dragonslayer_night_count { text-shadow: 0 1px 2px rgba(10, 8, 8, .95), 0 0 16px rgba(10, 8, 8, .85); }
@media (max-width: 767px) {
  .dragonslayer_wrap .dragonslayer_label { display: none; }
  .dragonslayer_wrap .dragonslayer_aside { color: rgba(230, 225, 216, .82); }
  .dragonslayer_wrap .dragonslayer_cue { bottom: calc(var(--ds-gutter) + 30px); }
  .dragonslayer_wrap .dragonslayer_cue::after { height: 22px; margin-top: 8px; }
  .dragonslayer_wrap .dragonslayer_layer { --ds-col-top: 11vh; --ds-col-w: calc(100vw - 2 * var(--ds-gutter)); }
  .dragonslayer_wrap .dragonslayer_display { font-size: min(11vw, 6.6vh); }
  .dragonslayer_wrap .is-wound .dragonslayer_display { font-size: min(10vw, 6vh); }
  .dragonslayer_wrap .dragonslayer_spoken { font-size: min(7.4vw, 4.4vh); }
  .dragonslayer_wrap .is-brand .dragonslayer_aside { position: absolute; left: 0; right: 0; top: 60vh; margin: 0; font-size: 16px; }
  .dragonslayer_wrap .dragonslayer_hint { white-space: normal; width: calc(100vw - 2 * var(--ds-gutter)); text-align: center; }
  .dragonslayer_wrap .dragonslayer_hud { top: auto; bottom: 10vh; right: var(--ds-gutter); left: var(--ds-gutter); width: auto; padding: 16px; }
  .dragonslayer_wrap .dragonslayer_hud .dragonslayer_specs div:nth-child(2) { display: none; }
  .dragonslayer_wrap .dragonslayer_who { top: 9vh; right: var(--ds-gutter); left: var(--ds-gutter); width: auto; display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: start; }
  .dragonslayer_wrap .dragonslayer_who_cap { padding: 0; }
  .dragonslayer_wrap .dragonslayer_who_name { font-size: 20px; }
  .dragonslayer_wrap .dragonslayer_who_text { font-size: 13.5px; padding: 7px 9px; }
  .dragonslayer_wrap .dragonslayer_who_jp { font-size: 11px; }
  .dragonslayer_wrap .is-night { --ds-col-top: 16vh; }
  .dragonslayer_wrap .dragonslayer_night_count { top: 9vh; right: var(--ds-gutter); }
  .dragonslayer_wrap .dragonslayer_combo { position: absolute; right: 0; top: 100%; white-space: nowrap; }
  .dragonslayer_wrap .dragonslayer_night_count b { display: inline; margin: 0 0 0 8px; font-size: 28px; }
  .dragonslayer_wrap .dragonslayer_statement { top: 22vh; }
  .dragonslayer_wrap .dragonslayer_homage { font-size: 15px; padding: 0 var(--ds-gutter); }
  .dragonslayer_wrap .dragonslayer_inter { font-size: 21px; padding: 0 var(--ds-gutter); }
  .dragonslayer_wrap .dragonslayer_loader_enter { flex-direction: column; align-items: center; bottom: 9vh; }
}
/* tablets held upright: the brand fills the middle, so its words stand above it, the line below */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
  .dragonslayer_wrap .is-brand { --ds-col-top: 11vh; --ds-col-w: 80vw; }
  .dragonslayer_wrap .is-brand .dragonslayer_aside { position: absolute; left: 0; top: 66vh; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dragonslayer_wrap .dragonslayer_grain, .dragonslayer_wrap .dragonslayer_cue::after, .dragonslayer_wrap .dragonslayer_loader.is-done .dragonslayer_loader_brand { animation: none; }
}

/* the editor's canvas: the section runs alone in a frame, so it shows labelled stills of the live page (stage.js) */
.dragonslayer_wrap.is-canvas { height: auto !important; min-height: 0 !important; margin: 0 !important; overflow: visible !important; background: #0b0d0f; }
.dragonslayer_wrap.is-canvas .dragonslayer_contain { position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; opacity: 1 !important; }
.dragonslayer_wrap.is-canvas > :not(.dragonslayer_contain), .dragonslayer_wrap.is-canvas .dragonslayer_contain > :not(.dragonslayer_poster) { display: none !important; }
.dragonslayer_wrap .dragonslayer_poster { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(230, 225, 216, 0.14); }
.dragonslayer_wrap .dragonslayer_poster figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #e6e1d8; background: rgba(11, 13, 15, 0.78); }
@media (max-width: 767px) { .dragonslayer_wrap .dragonslayer_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }