/* cartoon / anime-opening
   An anime opening sequence. Midnight navy, hot pink and electric cyan, white light.
   Speed lines, diagonal cuts and colour bands; a giant vertical katakana word in outline;
   the name slams in italic caps with a chromatic split and a screen shake, then the hero
   freezes in a diagonal frame. Sakura petals and sparkles drift over every screen.
   Sections are episodes: a numbered band wipes across, the content slides in on a skew.
   Shape language: parallelograms and slashes, never a circle except the petals. */

:root {
  --ao-night: #070b24;
  --ao-navy: color-mix(in oklab, #121a4d 88%, var(--wl-accent));
  --ao-pink: color-mix(in oklab, #ff2d87 78%, var(--wl-accent));
  --ao-cyan: #27e3ff;
  --ao-yellow: #ffe53d;
  --ao-white: #f7f8ff;
  --ao-petal: #ffb3d1;
  --ao-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif;
  --ao-cond: "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed Bold", "Liberation Sans Narrow", "Liberation Sans", sans-serif;
  --ao-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", "IPAGothic", "IPAPGothic", sans-serif;
  --ao-skew: -12deg;

  --v-bg: var(--ao-night);
  --v-fg: var(--ao-white);
  --v-soft: rgb(247 248 255 / 0.82);
  --v-faint: rgb(247 248 255 / 0.56);
  --v-line: rgb(247 248 255 / 0.16);
  --v-line-strong: rgb(247 248 255 / 0.4);
  --v-surface: #10173f;
  --v-surface-2: #1a2359;
  --v-card-bg: #0d1437;
  --v-accent: var(--ao-pink);
  --v-accent-text: #ff6aaa;
  --v-on-accent: #ffffff;
  --v-secondary: var(--ao-cyan);
  --v-seg-1: var(--ao-pink);
  --v-seg-2: var(--ao-cyan);
  --v-seg-3: var(--ao-yellow);
  --v-seg-4: #8f6bff;
  --v-seg-5: var(--ao-white);
  --v-seg-6: #4b5690;
  --v-font-body: var(--ao-sans);
  --v-font-display: var(--ao-sans);
  --v-font-mono: "Courier New", "Liberation Mono", monospace;
  --v-display-weight: 900;
  --v-display-tracking: -0.02em;
  --v-display-case: uppercase;
  --v-display-lh: 0.9;
  --v-title-size: clamp(2.2rem, 5.6vw, 4.8rem);
  --v-radius: 0px;
  --v-radius-sm: 0px;
  --v-border: 2px solid var(--ao-cyan);
  --v-shadow: 8px 8px 0 var(--ao-pink);
  --v-card-pad: clamp(18px, 2.2vw, 28px);
  --v-maxw: 1140px;
  --v-pad-x: clamp(14px, 5vw, 70px);
  --v-sec-gap: clamp(70px, 9vw, 130px);
  --v-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v-spring: cubic-bezier(0.2, 1.5, 0.4, 1);

  --wl-label-lore: "Prologue";
  --wl-label-features: "Abilities";
  --wl-label-supply: "Power level";
  --wl-label-flow: "Technique";
  --wl-label-timeline: "Episode list";
  --wl-label-comparison: "Rivals";
  --wl-label-stats: "Stats";
  --wl-label-tweet: "Transmission";
  --wl-label-gallery: "Eyecatch";
  --wl-label-facts: "Canon";
  --wl-label-quotes: "Lines";
  --wl-label-faq: "Next time";
  --wl-label-access: "Ending";
}

html { background: var(--ao-night); color-scheme: dark; }
body { background: radial-gradient(ellipse 80% 50% at 70% 0%, #1b2466, transparent 70%), var(--ao-night); color: var(--ao-white); font-family: var(--ao-sans); }
.ao-screen { position: relative; }

/* petals and sparkles */
.ao-petals { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.ao-petal {
  position: absolute; top: -40px; width: 14px; height: 11px;
  background: linear-gradient(135deg, #fff0f6, var(--ao-petal) 60%, #ff7fb2);
  border-radius: 100% 0 100% 0;
  opacity: 0.9;
  animation: ao-fall var(--d, 9s) linear var(--t, 0s) infinite;
}
.ao-petal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ao-flutter 1.3s ease-in-out infinite alternate; background: inherit; }

.ao-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 14px clamp(14px, 3vw, 36px); pointer-events: none; }
.ao-bar > * { pointer-events: auto; }
.ao-bar__name { flex: none; font: italic 900 1rem/1 var(--ao-sans); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--ao-white); padding: 6px 12px; background: var(--ao-pink); transform: skewX(var(--ao-skew)); }
.ao-bar__nav { flex: 1 1 0; min-width: 0; display: flex; gap: 2px; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
.ao-bar__nav::-webkit-scrollbar { display: none; }
.ao-bar__nav .wl-nav__link { flex: none; padding: 6px 10px; background: rgb(7 11 36 / 0.72); font: italic 800 0.74rem/1 var(--ao-sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: rgb(247 248 255 / 0.7); white-space: nowrap; transform: skewX(var(--ao-skew)); }
.ao-bar__nav .wl-nav__link:hover { color: var(--ao-night); background: var(--ao-cyan); }

/* ------------------------------------------------------------ the opening */
.ao-op { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; animation: ao-shake 0.36s steps(6) 0.78s 1 both; }
.ao-op__lines {
  position: absolute; inset: -20%; z-index: -3;
  background: repeating-conic-gradient(from 0deg at 62% 48%, rgb(247 248 255 / 0.13) 0deg 0.6deg, transparent 0.6deg 3.1deg, rgb(247 248 255 / 0.07) 3.1deg 3.5deg, transparent 3.5deg 6deg);
  -webkit-mask: radial-gradient(circle at 62% 48%, transparent 14%, #000 48%);
  mask: radial-gradient(circle at 62% 48%, transparent 14%, #000 48%);
  animation: ao-lines 0.3s steps(2) infinite;
}
.ao-op__bands { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.ao-op__bands span { position: absolute; left: -20%; right: -20%; height: 16vh; transform: rotate(-16deg); }
.ao-op__bands span:nth-child(1) { top: 58%; background: var(--ao-pink); animation: ao-band 0.6s var(--v-ease) 0.2s both; }
.ao-op__bands span:nth-child(2) { top: 71%; height: 5vh; background: var(--ao-cyan); animation: ao-band 0.6s var(--v-ease) 0.32s both; }
.ao-op__bands span:nth-child(3) { top: 20%; height: 2px; background: var(--ao-white); opacity: 0.6; animation: ao-band 0.6s var(--v-ease) 0.4s both; }
.ao-op__kana {
  position: absolute; z-index: -1; left: clamp(4px, 1.4vw, 20px); top: 50%; margin: 0;
  writing-mode: vertical-rl; translate: 0 -50%;
  font: 900 clamp(4.2rem, 13vh, 8.4rem)/1 var(--ao-jp); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 2px rgb(39 227 255 / 0.55);
  animation: ao-kana 1.1s var(--v-ease) 0.1s both;
}

/* the freeze-frame */
.ao-freeze {
  position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: 60%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--ao-navy);
  animation: ao-cut-in 0.55s var(--v-ease) 0.15s both;
}
.ao-freeze::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--ao-night) 0%, transparent 32%), linear-gradient(0deg, rgb(7 11 36 / 0.7), transparent 30%); }
.ao-freeze::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; animation: ao-freeze-flash 0.5s ease-out 1.05s both; }
.ao-freeze__media { position: absolute; inset: 0; }
.ao-freeze__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; animation: ao-push 14s linear 1.1s infinite alternate; transform-origin: 60% 40%; }
.ao-freeze__glint { position: absolute; z-index: 4; top: 0; bottom: 0; left: -30%; width: 18%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent); transform: skewX(-20deg); animation: ao-glint 4.5s ease-in-out 1.4s infinite; }

/* the OP cuts */
.ao-cuts { position: absolute; z-index: 5; right: clamp(16px, 3vw, 44px); bottom: clamp(18px, 4vh, 40px); display: flex; gap: 10px; }
.ao-cut { position: relative; display: block; width: clamp(90px, 9vw, 132px); aspect-ratio: 16 / 10; overflow: hidden; transform: skewX(var(--ao-skew)); border: 2px solid var(--ao-white); background: var(--ao-night); opacity: 0.45; filter: grayscale(0.6); animation: ao-cutlight 1.8s steps(1) infinite; }
.ao-cut img { width: 130%; max-width: none; height: 100%; margin-left: -15%; object-fit: cover; transform: skewX(12deg); }
.ao-cut--2 { animation-delay: 0.6s; }
.ao-cut--3 { animation-delay: 1.2s; }

/* the title */
.ao-title {
  position: relative; z-index: 4; min-height: 100svh; max-width: min(60%, 760px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.6vh, 18px);
  padding: 90px 0 110px clamp(84px, 11vw, 150px);
}
.ao-title__kicker { align-self: flex-start; margin: 0; padding: 6px 14px; background: var(--ao-cyan); color: var(--ao-night); font: italic 900 clamp(0.8rem, 1.1vw, 0.96rem)/1 var(--ao-sans); letter-spacing: 0.16em; text-transform: uppercase; transform: skewX(var(--ao-skew)); animation: ao-slide 0.5s var(--v-ease) 0.95s both; }
.ao-title__name {
  margin: 0 0 0 -0.04em; max-width: 100%; overflow: hidden; padding: 0 0.12em 0.04em 0;
  font: italic 900 clamp(4.2rem, 12vw, 10.6rem)/0.84 var(--ao-sans); letter-spacing: -0.05em; text-transform: uppercase;
  color: var(--ao-white);
  text-shadow: -5px 0 0 var(--ao-cyan), 5px 0 0 var(--ao-pink), 0 10px 30px rgb(0 0 0 / 0.5);
  animation: ao-slam 0.42s cubic-bezier(0.5, 0, 0.75, 0) 0.38s both;
}
.ao-title__headline { margin: 0; font: italic 900 clamp(1.4rem, 2.6vw, 2.4rem)/1.05 var(--ao-sans); letter-spacing: -0.01em; text-transform: uppercase; }
.ao-title__headline .wl-w { background: var(--ao-night); padding: 0.04em 0.18em; margin: 0 0.06em 0.12em 0; box-shadow: 4px 4px 0 var(--ao-pink); animation: ao-slide 0.45s var(--v-ease) both; animation-delay: calc(var(--i, 0) * 70ms + 1s); }
.ao-title__sub { margin: 0; max-width: 32rem; color: var(--v-soft); font-size: clamp(0.96rem, 1.15vw, 1.08rem); line-height: 1.5; text-shadow: 0 1px 8px var(--ao-night); animation: ao-slide 0.5s var(--v-ease) 1.2s both; }
.ao-title__cta { display: flex; flex-wrap: wrap; gap: 12px; animation: ao-slide 0.5s var(--v-ease) 1.3s both; }
.ao-title__cta .wl-btn, .ao-end .wl-link, .ao-flow .wl-link {
  border: 2px solid var(--ao-white); border-radius: 0; background: rgb(7 11 36 / 0.6); color: var(--ao-white);
  font: italic 900 0.92rem/1 var(--ao-sans); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.95em 1.3em; transform: skewX(var(--ao-skew));
}
.ao-title__cta .wl-btn > *, .ao-end .wl-link > *, .ao-flow .wl-link > * { transform: skewX(12deg); }
.ao-title__cta .wl-btn:hover, .ao-end .wl-link:hover, .ao-flow .wl-link:hover { transform: skewX(var(--ao-skew)) translateX(4px); background: var(--ao-cyan); color: var(--ao-night); border-color: var(--ao-cyan); }
.ao-title__cta .wl-btn--primary { background: var(--ao-pink); border-color: var(--ao-pink); box-shadow: 6px 6px 0 var(--ao-cyan); }
.ao-title__cta .wl-btn__ca { display: none; }

.ao-sparkles i { position: absolute; z-index: 6; width: 26px; height: 26px; background: var(--ao-white); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: ao-twinkle 1.8s ease-in-out infinite; }
.ao-sparkles i:nth-child(1) { left: 46%; top: 18%; }
.ao-sparkles i:nth-child(2) { left: 86%; top: 12%; width: 18px; height: 18px; animation-delay: -0.6s; background: var(--ao-yellow); }
.ao-sparkles i:nth-child(3) { left: 58%; top: 70%; width: 34px; height: 34px; animation-delay: -1.1s; }
.ao-sparkles i:nth-child(4) { left: 12%; top: 14%; width: 16px; height: 16px; animation-delay: -0.3s; background: var(--ao-cyan); }
.ao-sparkles i:nth-child(5) { left: 94%; top: 56%; width: 22px; height: 22px; animation-delay: -1.4s; background: var(--ao-pink); }
.ao-flash { position: absolute; inset: 0; z-index: 30; background: #fff; pointer-events: none; opacity: 0; animation: ao-flash 0.5s ease-out both; }

/* ------------------------------------------------------------ character intro card */
.ao-intro { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(60px, 8vw, 110px) var(--v-pad-x); overflow: hidden; }
.ao-intro__band { position: absolute; z-index: -1; left: -10%; right: -10%; top: 30%; height: 44%; background: var(--ao-pink); transform: rotate(-6deg); box-shadow: 0 16px 0 var(--ao-cyan); }
.ao-intro__portrait { justify-self: end; margin: 0; width: min(100%, 380px); aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); background: var(--ao-navy); border: 0; }
.ao-intro__img { width: 100%; height: 100%; object-fit: cover; }
.ao-intro__card { min-width: 0; display: grid; justify-items: start; gap: 8px; }
.ao-intro__role { margin: 0; padding: 4px 12px; background: var(--ao-night); color: var(--ao-cyan); font: 900 1rem/1.2 var(--ao-jp); letter-spacing: 0.2em; transform: skewX(var(--ao-skew)); }
.ao-intro__name { margin: 0; max-width: 100%; font: italic 900 clamp(3rem, 8vw, 7rem)/0.85 var(--ao-sans); letter-spacing: -0.05em; text-transform: uppercase; color: var(--ao-white); text-shadow: 6px 6px 0 var(--ao-night); }
.ao-intro__tick { margin: 0; padding: 6px 14px; background: var(--ao-white); color: var(--ao-night); font: italic 900 1.2rem/1 var(--ao-sans); letter-spacing: 0.06em; transform: skewX(var(--ao-skew)); }
.ao-intro__line { margin: 6px 0 0; max-width: 30rem; color: var(--ao-white); font: italic 800 clamp(1.05rem, 1.6vw, 1.35rem)/1.3 var(--ao-sans); text-shadow: 2px 2px 0 var(--ao-night); }
.ao-intro:not(:has(.ao-intro__img)) { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------ episodes */
.ao-flow { padding-bottom: var(--v-sec-gap); }
.ao-flow .wl-sec__head { position: relative; isolation: isolate; max-width: none; margin-bottom: clamp(26px, 3.4vw, 46px); padding: 0 0 0 clamp(8px, 1vw, 14px); }
.ao-flow .wl-sec__head::before { content: ""; position: absolute; z-index: -1; left: -12vw; right: 18%; top: 44%; height: 58%; background: linear-gradient(90deg, var(--ao-pink), color-mix(in srgb, var(--ao-pink) 30%, transparent)); transform: skewX(var(--ao-skew)); transform-origin: 0 50%; }
.ao-flow .wl-kicker { display: inline-flex; align-items: baseline; gap: 0.7em; margin: 0 0 10px; padding: 6px 14px; background: var(--ao-white); color: var(--ao-night); font: italic 900 0.82rem/1 var(--ao-sans); letter-spacing: 0.16em; transform: skewX(var(--ao-skew)); }
.ao-flow .wl-kicker .wl-ord { opacity: 1; font-family: var(--ao-jp); letter-spacing: 0.02em; }
.ao-flow .wl-kicker .wl-ord::before { content: "\7B2C"; }
.ao-flow .wl-kicker .wl-ord::after { content: "\8A71"; }
.ao-flow .wl-sec__title { font-style: italic; color: var(--ao-white); text-shadow: -3px 0 0 var(--ao-cyan), 3px 0 0 var(--ao-night); }
[data-wl-reveal="on"] .ao-flow .wl-reveal { opacity: 0; transform: translateX(14vw) skewX(-14deg); transition: transform 0.7s var(--v-ease), opacity 0.4s; }
[data-wl-reveal="on"] .ao-flow .wl-reveal.wl-in { opacity: 1; transform: none; }
[data-wl-reveal="on"] .ao-flow .wl-reveal .wl-sec__head::before { transform: skewX(var(--ao-skew)) scaleX(0); transition: transform 0.6s var(--v-ease) 0.25s; }
[data-wl-reveal="on"] .ao-flow .wl-reveal.wl-in .wl-sec__head::before { transform: skewX(var(--ao-skew)) scaleX(1); }

/* prologue */
.ao-flow .wl-lore { max-width: 48rem; padding-left: clamp(16px, 2vw, 26px); border-left: 6px solid var(--ao-cyan); }
.ao-flow .wl-lore__lead { font: italic 800 clamp(1.3rem, 2.2vw, 1.8rem)/1.35 var(--ao-sans); }
.ao-flow .wl-lore__p { color: var(--v-soft); }

/* abilities: character-intro cards */
.ao-flow .wl-features { gap: clamp(14px, 2vw, 24px); }
.ao-flow .wl-feature { overflow: hidden; padding: 26px 24px 24px; background: linear-gradient(160deg, #16205c, var(--ao-night) 70%); border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%); }
.ao-flow .wl-feature::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ao-pink); }
.ao-flow .wl-feature:nth-child(3n+2)::before { background: var(--ao-cyan); }
.ao-flow .wl-feature:nth-child(3n)::before { background: var(--ao-yellow); }
.ao-flow .wl-feature:hover { transform: translateX(6px); }
.ao-flow .wl-feature .wl-ord { top: -8px; right: 10px; font: italic 900 5.4rem/1 var(--ao-sans); color: transparent; -webkit-text-stroke: 2px rgb(247 248 255 / 0.28); letter-spacing: -0.06em; }
.ao-flow .wl-feature__icon { width: 64px; height: 64px; border-radius: 0; background: var(--ao-pink); color: #fff; transform: skewX(var(--ao-skew)); }
.ao-flow .wl-feature:nth-child(3n+2) .wl-feature__icon { background: var(--ao-cyan); color: var(--ao-night); }
.ao-flow .wl-feature:nth-child(3n) .wl-feature__icon { background: var(--ao-yellow); color: var(--ao-night); }
.ao-flow .wl-feature__icon > * { transform: skewX(12deg); }
.ao-flow .wl-feature__title { font: italic 900 1.6rem/1 var(--ao-sans); text-transform: uppercase; letter-spacing: -0.02em; }
.ao-flow .wl-feature__text { color: var(--v-soft); }

/* transmission */
.ao-flow .wl-post { background: #0d1437; border: 2px solid var(--ao-cyan); border-radius: 0; box-shadow: 8px 8px 0 var(--ao-pink); }
.ao-flow .wl-post__avatar--initial { background: var(--ao-pink); border-radius: 0; }
.ao-flow .wl-post__meta:empty { display: none; }
.ao-flow .wl-post__link { color: var(--ao-cyan); }

/* eyecatch */
.ao-flow .wl-gallery { gap: 18px; }
.ao-flow .wl-shot { border-radius: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: var(--ao-navy); }
.ao-flow .wl-shot__caption { left: 12%; right: auto; bottom: 14px; padding: 6px 12px; border-radius: 0; background: var(--ao-night); color: var(--ao-white); font: italic 900 0.86rem/1.2 var(--ao-sans); text-transform: uppercase; letter-spacing: 0.08em; backdrop-filter: none; transform: skewX(var(--ao-skew)); }

/* power level */
.ao-flow .wl-donut__track { stroke: #1a2359; }
.ao-flow .wl-donut__ticks line { stroke: rgb(39 227 255 / 0.5); }
.ao-flow .wl-donut__seg { filter: drop-shadow(0 0 8px currentColor); }
.ao-flow .wl-donut__value, .ao-flow .wl-ring__value, .ao-flow .wl-stat__value, .ao-flow .wl-legend__value, .ao-flow .wl-bar__value { font-style: italic; color: var(--ao-white); }
.ao-flow .wl-donut__label, .ao-flow .wl-ring__label, .ao-flow .wl-stat__label, .ao-flow .wl-caption { color: var(--ao-cyan); }
.ao-flow .wl-legend__item { border-bottom: 2px solid rgb(39 227 255 / 0.3); font-weight: 800; text-transform: uppercase; font-style: italic; }
.ao-flow .wl-legend__swatch { border-radius: 0; transform: skewX(var(--ao-skew)); }
.ao-flow .wl-ring__track { stroke: #1a2359; }
.ao-flow .wl-ring__fill { stroke: var(--ao-cyan); filter: drop-shadow(0 0 6px var(--ao-cyan)); }
.ao-flow .wl-stats { border: 2px solid var(--ao-cyan); border-radius: 0; background: rgb(39 227 255 / 0.3); }
.ao-flow .wl-stat { background: var(--ao-night); }
.ao-flow .wl-table-wrap { border: 2px solid var(--ao-cyan); border-radius: 0; }
.ao-flow .wl-table thead th { color: var(--ao-cyan); }
.ao-flow .wl-node__card { border: 2px solid var(--ao-cyan); border-radius: 0; background: var(--ao-night); }
.ao-flow .wl-node__card .wl-ord { border-radius: 0; background: var(--ao-pink); transform: skewX(var(--ao-skew)); }
.ao-flow .wl-edge__line, .ao-flow .wl-edge__head { stroke: var(--ao-cyan); }

/* episode list */
.ao-flow .wl-milestones { max-width: 56rem; gap: 12px; }
.ao-flow .wl-milestones::before { display: none; }
.ao-flow .wl-ms { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 0; background: linear-gradient(90deg, #16205c, transparent); }
.ao-flow .wl-ms__dot { display: none; }
.ao-flow .wl-ms__body { display: contents; }
.ao-flow .wl-ms__when { grid-row: 1 / span 2; margin: 0; padding: 14px 12px; background: var(--ao-pink); color: #fff; font: italic 900 0.86rem/1.2 var(--ao-sans); letter-spacing: 0.06em; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.ao-flow .wl-ms__title { margin: 0; padding: 12px 18px 2px; font: italic 900 1.4rem/1.1 var(--ao-sans); text-transform: uppercase; }
.ao-flow .wl-ms__text { padding: 0 18px 12px; color: var(--v-soft); }

/* canon */
.ao-flow .wl-facts { gap: 8px; }
.ao-flow .wl-fact { background: transparent; border: 0; border-left: 4px solid var(--ao-cyan); border-radius: 0; padding: 12px 16px; font: italic 800 1.1rem/1.35 var(--ao-sans); }
.ao-flow .wl-fact__mark { border-radius: 0; background: transparent; color: var(--ao-yellow); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); background: var(--ao-yellow); }
.ao-flow .wl-fact__mark .wl-glyph { display: none; }

/* lines: anime subtitles over a dark frame */
.ao-flow .wl-quotes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ao-flow .wl-quote { display: grid; justify-items: center; padding: 34px 20px 26px; background: linear-gradient(180deg, #111a4a, var(--ao-night)); border: 0; border-radius: 0; text-align: center; }
.ao-flow .wl-quote::before { content: none; }
.ao-flow .wl-quote__text { margin: 0 0 6px; max-width: 44rem; font: 800 clamp(1.2rem, 2.2vw, 1.8rem)/1.3 var(--ao-sans); color: #fff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000; }
.ao-flow .wl-quote__who { color: var(--ao-yellow); font: italic 800 0.9rem/1.2 var(--ao-sans); }
.ao-flow .wl-quote__who::before { content: "("; } .ao-flow .wl-quote__who::after { content: ")"; }

/* next time */
.ao-flow .wl-faq { gap: 12px; }
.ao-flow .wl-qa { background: #0d1437; border: 0; border-left: 6px solid var(--ao-pink); border-radius: 0; }
.ao-flow .wl-qa__q { font: italic 900 1.12rem/1.3 var(--ao-sans); text-transform: uppercase; }
.ao-flow .wl-qa[open] .wl-qa__q { color: var(--ao-cyan); }
.ao-flow .wl-qa__a { color: var(--v-soft); }

/* ending */
.ao-flow .wl-access { max-width: 50rem; gap: 18px; }
.ao-flow .wl-ca { background: var(--ao-night); border: 2px solid var(--ao-cyan); border-radius: 0; box-shadow: 8px 8px 0 var(--ao-pink); }
.ao-flow .wl-ca__label { color: var(--ao-cyan); }
.ao-flow .wl-ca__value { color: var(--ao-white); }
.ao-flow .wl-copy { border-radius: 0; background: var(--ao-pink); color: #fff; font: italic 900 0.95rem/1 var(--ao-sans); text-transform: uppercase; letter-spacing: 0.08em; transform: skewX(var(--ao-skew)); }

.ao-end { position: relative; display: grid; justify-items: center; gap: 16px; padding: 60px 16px 90px; text-align: center; overflow: hidden; }
.ao-end__word { margin: 0; font: 900 clamp(4rem, 12vw, 9rem)/1 var(--ao-jp); color: var(--ao-white); letter-spacing: 0.02em; text-shadow: -5px 0 0 var(--ao-cyan), 5px 0 0 var(--ao-pink); transform: rotate(-4deg); }
.ao-end__name { margin: 0; font: italic 900 1rem/1.2 var(--ao-sans); text-transform: uppercase; letter-spacing: 0.2em; color: var(--v-soft); }
.ao-end__tick { color: var(--ao-cyan); }
.ao-end .wl-links { justify-content: center; }

/* ------------------------------------------------------------ motion */
@keyframes ao-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ao-lines { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(1.2deg) scale(1.03); } }
@keyframes ao-band { from { transform: rotate(-16deg) translateX(-110%); } }
@keyframes ao-kana { from { opacity: 0; transform: translateY(20%); } }
@keyframes ao-cut-in { from { transform: translateX(40%); opacity: 0; } }
@keyframes ao-freeze-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes ao-push { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes ao-glint { 0%, 70% { left: -30%; } 100% { left: 130%; } }
@keyframes ao-cutlight { 0% { opacity: 1; filter: none; border-color: var(--ao-yellow); } 33% { opacity: 0.45; filter: grayscale(0.6); border-color: var(--ao-white); } }
@keyframes ao-slam { 0% { opacity: 0; transform: scale(2.8) skewX(-8deg); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes ao-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-10px, 6px); } 40% { transform: translate(9px, -7px); } 60% { transform: translate(-6px, -4px); } 80% { transform: translate(4px, 5px); } 100% { transform: none; } }
@keyframes ao-slide { from { opacity: 0; transform: translateX(-50px); } }
@keyframes ao-twinkle { 0%, 100% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes ao-fall { from { transform: translate(0, -5vh) rotate(0deg); } to { transform: translate(var(--dx, -20vw), 110vh) rotate(720deg); } }
@keyframes ao-flutter { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }

/* ------------------------------------------------------------ phone */
@media (max-width: 860px) {
  .ao-bar__nav { display: none; }
  .ao-op { display: grid; min-height: 0; }
  .ao-freeze { position: relative; width: 100%; height: 62vw; min-height: 240px; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .ao-freeze::before { background: linear-gradient(0deg, var(--ao-night), transparent 45%); }
  .ao-op__kana { top: 58vw; translate: 0 0; font-size: 3.6rem; }
  .ao-title { min-height: 0; max-width: none; margin-top: -18vw; padding: 0 16px 20px 64px; }
  .ao-title__name { font-size: clamp(3.2rem, 18vw, 5rem); }
  .ao-cuts { position: relative; right: auto; bottom: auto; padding: 0 16px 34px 64px; }
  .ao-cut { width: 30%; }
  .ao-op__bands span:nth-child(1) { top: 70%; }
  .ao-intro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: left; }
  .ao-intro__portrait { justify-self: center; width: 70%; }
  .ao-flow .wl-ms { grid-template-columns: minmax(0, 1fr); }
  .ao-flow .wl-ms__when { grid-row: auto; }
  [data-wl-reveal="on"] .ao-flow .wl-reveal { transform: translateX(8vw) skewX(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .ao-petals { display: none; } }
.wl-still .ao-petals { display: none; }

/* ------------------------------------------------------------ a brief whose hero is the quoted post */
.ao-freeze__media.wl-media--post { display: grid; place-items: center; padding: 40px 30px 40px 26%; }
.ao-freeze__media .wl-post--giant { background: rgb(7 11 36 / 0.85); border: 2px solid var(--ao-cyan); border-radius: 0; box-shadow: 8px 8px 0 var(--ao-pink); }
.ao-freeze__media .wl-post--giant .wl-post__text { font-size: clamp(1.1rem, 2vw, 1.8rem); }
.ao-freeze__media .wl-post__meta:empty { display: none; }
@media (max-width: 860px) {
  .ao-freeze { order: 1; }
  .ao-title { order: 2; }
  .ao-cuts { order: 3; }
}