* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: var(--font-body-16);
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

img,
video {
  display: block;
  max-width: 100%;
}

img,
video,
picture,
svg,
canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

a,
button {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.page-main {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-header-gap);
  height: var(--site-header-height);
  min-height: var(--space-64);
  padding: var(--site-header-padding);
  background: var(--gradient-header);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.site-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 86px;
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
}

.site-brand:hover {
  transform: translateY(-1px);
}

.site-logo {
  width: auto;
  height: 86px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: var(--site-nav-height);
  flex: 1 1 auto;
}

.mobile-header-actions,
.mobile-hero-download,
.mobile-menu-overlay {
  display: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-item-gap);
  height: var(--site-nav-height);
  color: var(--color-text-primary);
  opacity: 0.6;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 1 1 0;
}

.nav-item:hover {
  transform: translateY(-1px);
  opacity: 0.86;
}

.nav-item:focus,
.nav-item:focus-visible {
  outline: none;
}

.nav-item.is-active {
  opacity: 1;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--nav-active-width);
  height: var(--nav-active-height);
  background: center / contain no-repeat var(--nav-active-ink);
  transform: translate(-50%, -50%) rotate(-0.48deg);
}

.nav-item.is-active:hover::before,
.nav-item.is-active.is-ink-writing::before {
  animation: nav-active-ink-write 0.76s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.nav-icon {
  position: relative;
  z-index: 1;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  background: center / cover no-repeat var(--icon-url);
  flex: 0 0 auto;
}

.nav-item[data-target="screen-home"] .nav-icon {
  --icon-url: var(--asset-nav-home);
}

.nav-item[data-target="screen-features"] .nav-icon {
  --icon-url: var(--asset-nav-features);
}

.nav-item[data-target="screen-roles"] .nav-icon {
  --icon-url: var(--asset-nav-roles);
}

.nav-item[data-target="screen-news"] .nav-icon {
  --icon-url: var(--asset-nav-news);
}

.nav-item[data-target="screen-follow"] .nav-icon {
  --icon-url: var(--asset-nav-contact);
}

.nav-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
}

.nav-label {
  font-size: var(--font-body-18);
  font-weight: 500;
}

.nav-label--home {
  letter-spacing: var(--nav-home-letter-spacing);
}

.nav-en {
  margin-top: 0;
  font-size: var(--font-label-10);
  line-height: 1;
  letter-spacing: var(--nav-en-letter-spacing);
  opacity: 0.7;
}

.fullpage {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.fullpage::-webkit-scrollbar {
  display: none;
}

body.is-article-detail-open .fullpage {
  overflow: hidden;
  scroll-snap-type: none;
}

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
}

.section-bg,
.hero-background {
  position: absolute;
  inset: 0;
}

.section-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.01);
}

.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-section);
}

.section-bg--news {
  background-image: var(--screen-news-bg);
}

.section-bg--news::after {
  display: none;
}

.section-bg--features {
  background-image: var(--screen-features-bg);
  pointer-events: none;
}

.section-bg--features::after {
  display: none;
}

.section-bg--hub {
  background-image: var(--screen-hub-bg);
}

.section-bg--roles {
  background-image: var(--screen-roles-bg);
}

.section-bg--roles::after {
  display: none;
}

.section-bg--follow {
  background-image: var(--screen-follow-bg);
}

.screen-follow {
  --follow-content-padding-y: clamp(var(--space-8), 2svh, var(--space-24));
  --follow-footer-padding-y: clamp(var(--space-8), 2svh, var(--space-24));
  --follow-footer-padding-x: clamp(var(--space-40), 5vw, var(--space-96));

  height: 100vh;
  height: 100svh;
}

.section-shell {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
  padding: calc(var(--space-4) * 28) var(--space-24) var(--space-64);
}

.hero-screen {
  background: var(--color-bg-hero);
  --video-shift-x: 0;
  --video-shift-y: 0;
  --foreground-shift-x: 0;
  --foreground-shift-y: 0;
  --video-scale: 1.05;
  --foreground-scale: 1.03;
}

.hero-background {
  overflow: hidden;
}

.hero-background__video,
.hero-background__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--video-shift-x), var(--video-shift-y), 0) scale(var(--video-scale));
  transition: transform var(--transition-parallax);
  will-change: transform;
}

.hero-background__image {
  display: none;
}

.hero-foreground {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-foreground__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--foreground-shift-x), var(--foreground-shift-y), 0) scale(var(--foreground-scale));
  transition: transform var(--transition-parallax);
  will-change: transform;
}

.hero-copy {
  position: absolute;
  top: clamp(99.2px, 14vh, 140.8px);
  left: 50%;
  z-index: var(--z-content);
  transform: translate(-50%, -20px);
}

.hero-title {
  width: min(34.4vw, 704px);
  min-width: 290px;
  height: auto;
  filter: drop-shadow(var(--shadow-hero-title));
  transform: scale(1.5);
  transform-origin: top center;
}

.download-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(60px, 8.5vh, 100px);
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}

.download-card {
  display: flex;
  align-items: center;
  gap: var(--download-card-gap);
  padding: var(--download-card-padding);
  background: var(--color-surface-panel);
  border: 2px solid var(--color-bg-section-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-download);
}

.download-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--download-label-width);
  height: var(--download-label-height);
  color: var(--color-text-download-vertical);
  font-size: var(--font-body-14);
  line-height: var(--download-label-line-height);
  text-align: center;
  flex: 0 0 var(--download-label-width);
}

.download-content {
  display: flex;
  align-items: center;
  gap: var(--download-content-gap);
}

.download-qr-frame {
  position: relative;
  display: block;
  width: var(--download-qr-size);
  height: var(--download-qr-size);
  overflow: visible;
  flex: 0 0 auto;
}

.download-qr {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download-qr-scan {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 8px;
  height: var(--download-scan-line-height);
  background: var(--gradient-scan-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-scan-line);
  pointer-events: none;
  animation: qr-scan 2.2s ease-in-out infinite;
}

.download-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--download-actions-width);
  height: var(--download-actions-height);
  gap: var(--download-content-gap);
  flex: 0 0 auto;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: var(--download-store-button-gap);
  width: var(--download-store-button-width);
  min-height: var(--download-store-button-min-height);
  padding: var(--download-store-button-padding);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition:
    transform var(--transition-fast),
    filter var(--transition-fast);
}

.store-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.store-btn--apple {
  background: var(--color-store-apple);
  border: 1.5px solid var(--color-border-store-apple);
}

.store-btn--android {
  background: var(--color-store-android);
}

.store-btn__icon {
  width: var(--download-store-icon-size);
  height: var(--download-store-icon-size);
  flex: 0 0 auto;
}

.store-btn__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--download-store-copy-width);
  padding-bottom: var(--space-4);
  font-size: var(--download-store-button-font-size);
  line-height: normal;
  letter-spacing: var(--letter-spacing-store-button);
}

.store-btn__name {
  font-weight: 600;
  white-space: nowrap;
}

.store-btn__label {
  opacity: 0.8;
}

.screen-features {
  --features-header-height: var(--site-header-height);
  --features-slider-track-height: calc(
    100svh - var(--features-header-height) - var(--scroll-hint-height)
  );
  --features-slide-inline-reserve: clamp(220px, 22.9167vw, 330px);
  --features-preferred-image-height: calc(var(--features-slider-track-height) * 0.88);
  --features-slide-width: min(
    calc(var(--features-preferred-image-height) * 2),
    calc(100vw - var(--features-slide-inline-reserve)),
    1495px
  );
  --features-image-height: calc(var(--features-slide-width) / 2);

  background: var(--color-bg-section-dark);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * var(--size-hairline));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.features-stage {
  position: absolute;
  left: 0;
  top: calc(var(--features-header-height) - 24px);
  width: 100%;
  height: var(--features-slider-track-height);
  transform-origin: center;
  pointer-events: none;
}

.features-slider {
  --features-edge-mask-width: 30px;

  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--features-slide-width);
  height: var(--features-image-height);
  overflow: hidden;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--color-ink-1000) var(--features-edge-mask-width),
    var(--color-ink-1000) calc(100% - var(--features-edge-mask-width)),
    transparent
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--color-ink-1000) var(--features-edge-mask-width),
    var(--color-ink-1000) calc(100% - var(--features-edge-mask-width)),
    transparent
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: auto;
}

.features-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--feature-track-index, var(--feature-index, 0)) * -100%), 0, 0);
  transition: transform 620ms ease;
  will-change: transform;
}

.features-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
  flex: 0 0 100%;
  overflow: hidden;
  pointer-events: none;
}

.features-stage__picture {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.features-stage__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: auto;
}

.features-download,
.roles-download {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: var(--z-floating);
  transform: translateY(-50%);
}

.download-panel {
  --download-panel-gap: var(--download-content-gap);

  display: flex;
  gap: var(--download-panel-gap);
  width: var(--download-panel-width);
  padding: var(--download-card-padding);
  background: var(--color-surface-download-side);
  border: 2px solid var(--color-border-download-side);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.download-panel--vertical {
  --download-panel-gap: var(--download-card-gap);
  --download-panel-scale: 0.8;

  flex-direction: column;
  transform: scale(var(--download-panel-scale));
  transform-origin: right center;
}

.features-carousel {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 1%;
  z-index: var(--z-carousel);
  width: 108px;
  height: 14px;
  box-sizing: content-box;
  transform: translateX(-50%);
  pointer-events: auto;
}

.pagination {
  --pagination-dot-width: 28px;
  --pagination-dot-height: 28px;
  --pagination-gap: calc(var(--space-4) * 5);

  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--pagination-gap);
}

.pagination--feature {
  --pagination-dot-width: 14px;
  --pagination-dot-height: 14px;
  --pagination-gap: var(--space-16);

  justify-content: center;
  padding-left: 0;
}

.pagination__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pagination-dot-width);
  height: var(--pagination-dot-height);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.pagination__dot:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.pagination__dot img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.pagination__dot:hover,
.pagination__dot.is-active {
  filter: brightness(1.1);
}

.download-panel__qr {
  position: relative;
  width: var(--download-panel-qr-size);
  height: var(--download-panel-qr-size);
  overflow: hidden;
}

.download-panel__qr-code {
  position: absolute;
  display: block;
}

.download-panel__qr-code {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-panel__qr-scan {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 8%;
  height: var(--download-scan-line-height);
  border-radius: var(--radius-pill);
  background: var(--gradient-scan-line);
  box-shadow: var(--shadow-scan-line);
  pointer-events: none;
  animation: download-panel-qr-scan 2.2s ease-in-out infinite;
}

.download-panel__button {
  display: flex;
  align-items: center;
  gap: var(--download-store-button-gap);
  width: var(--download-store-button-width);
  min-height: var(--download-store-button-min-height);
  padding: var(--download-store-button-padding);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.download-panel__button:hover,
.download-panel__button:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.download-panel__button--apple {
  background-color: var(--color-store-apple);
  border: 1.5px solid var(--color-border-store-apple);
}

.download-panel__button--apple:hover,
.download-panel__button--apple:focus-visible {
  background-color: var(--color-store-apple-hover);
  border-color: color-mix(in srgb, var(--color-ink-400) 95%, transparent);
}

.download-panel__button--android {
  background-color: var(--color-store-android);
}

.download-panel__button--android:hover,
.download-panel__button--android:focus-visible {
  background-color: var(--color-store-android-hover);
}

.download-panel__button img {
  width: var(--download-store-icon-size);
  height: var(--download-store-icon-size);
}

.download-panel__button span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--download-store-button-font-size);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-store-button);
}

.download-panel__button strong {
  font-weight: 600;
}

.download-panel__button small {
  font-size: var(--download-store-button-font-size);
  opacity: 0.9;
}

.screen-news {
  background: var(--color-bg-section-dark);
}

.section-shell--news {
  --news-shell-padding-top: clamp(calc(var(--space-4) * 38), 18.52svh, calc(var(--space-4) * 50));
  --news-shell-padding-bottom: var(--space-40);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: var(--news-shell-padding-top) var(--space-24) var(--news-shell-padding-bottom);
}

.news-stage {
  --news-stage-width: 1446px;
  --news-stage-min-height: 758px;
  --news-stage-height: min(
    var(--news-stage-min-height),
    calc(100svh - var(--news-shell-padding-top) - var(--news-shell-padding-bottom))
  );
  --news-stage-body-height: calc(
    var(--news-stage-height) - var(--news-stage-padding-top) - var(--news-stage-padding-bottom)
  );
  --news-stage-paper-bleed: 3px;
  --news-stage-gap: var(--space-24);
  --news-stage-padding-left: var(--space-4);
  --news-stage-padding-right: calc(var(--space-4) * 36);
  --news-stage-padding-top: var(--space-12);
  --news-stage-padding-bottom: var(--space-24);
  --news-banner-min-width: 250px;
  --news-banner-max-width: 569px;
  --news-banner-width: clamp(
    var(--news-banner-min-width),
    29.6354vw,
    var(--news-banner-max-width)
  );
  --news-banner-current-width: min(
    var(--news-banner-width),
    calc(var(--news-stage-body-height) * 577 / 734)
  );
  --news-banner-current-height: calc(var(--news-banner-current-width) * 734 / 577);
  --news-content-offset-top: 44px;
  --news-tag-width: 418px;
  --news-tag-height: 162px;
  --news-list-mask-size: 10px;
  --news-paper-content-ratio: 0.522727;
  --news-paper-content-ratio-rest: calc(1 - var(--news-paper-content-ratio));
  --news-stage-fixed-width: calc(
    var(--news-stage-padding-left)
    + var(--news-stage-padding-right)
    + var(--news-stage-gap)
    + var(--news-banner-current-width)
  );
  --news-stage-ratio-width: calc(
    (
      var(--news-stage-fixed-width)
      + var(--news-stage-paper-bleed) * 2 * var(--news-paper-content-ratio)
    )
    / var(--news-paper-content-ratio-rest)
  );

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--news-banner-current-width) minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  column-gap: var(--news-stage-gap);
  width: min(var(--news-stage-width), calc(100vw - 48px), var(--news-stage-ratio-width));
  height: var(--news-stage-height);
  min-height: 0;
  padding:
    var(--news-stage-padding-top)
    var(--news-stage-padding-right)
    var(--news-stage-padding-bottom)
    var(--news-stage-padding-left);
  color: var(--color-warm-1000);
  isolation: isolate;
  transform: translateY(-40px);
}

.news-paper-surface {
  position: absolute;
  top: 0;
  right: calc(var(--news-stage-paper-bleed) * -1);
  bottom: 0;
  left: calc(var(--news-stage-paper-bleed) * -1);
  z-index: 0;
  min-height: 100%;
  background: center / 100% 100% no-repeat var(--asset-news-paper);
  pointer-events: none;
}

.news-paper-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: var(--news-tag-width);
  height: var(--news-tag-height);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.news-banner {
  position: relative;
  z-index: 1;
  width: var(--news-banner-current-width);
  height: var(--news-banner-current-height);
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.news-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  width: 100%;
  height: max(64px, var(--news-stage-body-height));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: var(--news-content-offset-top);
}

.news-tabs {
  min-height: var(--news-tabs-min-height);
  flex: 0 0 54.4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.news-tabs::-webkit-scrollbar {
  display: none;
}

.news-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--news-tab-min-width);
  padding: var(--news-tab-padding);
  border: 0;
  border-bottom: 3px solid color-mix(in srgb, var(--color-gold-800) 15%, transparent);
  background: transparent;
  color: var(--color-warm-1000);
  font-size: var(--news-tab-font-size);
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    filter var(--transition-fast);
}

.news-tab:hover,
.news-tab:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--color-red-800) 65%, transparent);
  color: var(--color-red-800);
}

.news-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-red-800) 50%, transparent);
  outline-offset: 4px;
}

.news-tab.is-active {
  border-bottom-color: var(--color-red-800);
  color: var(--color-warm-1000);
  font-weight: 600;
}

.news-list-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* gap: 14px; */
  min-height: 0;
  overflow: hidden;
}

.news-list-scroll {
  position: relative;
  top: -20px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: var(--news-list-mask-size) 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink-1000) var(--news-list-mask-size),
    var(--color-ink-1000) calc(100% - var(--news-list-mask-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink-1000) var(--news-list-mask-size),
    var(--color-ink-1000) calc(100% - var(--news-list-mask-size)),
    transparent 100%
  );
  scrollbar-width: none;
}

.news-list-scroll::-webkit-scrollbar {
  display: none;
}

.news-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.news-link {
  display: flex;
  align-items: center;
  gap: var(--news-link-gap);
  width: var(--news-link-width);
  min-height: var(--news-link-min-height);
  padding: var(--news-link-padding);
  margin-right: var(--space-4);
  border-bottom: 1px solid rgba(113, 96, 81, 0.2);
  border-bottom-color: color-mix(in srgb, var(--color-warm-800) 20%, transparent);
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}


.news-link--placeholder {
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

.news-link:hover,
.news-link:focus-visible {
  color: var(--color-red-800);
  transform: translateX(2px);
}

.news-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-red-800) 50%, transparent);
  outline-offset: 3px;
}

.news-item-main {
  display: flex;
  align-items: center;
  gap: var(--news-link-gap);
  min-width: 0;
  flex: 1 1 auto;
}

.news-item-category {
  color: var(--color-red-800);
  font-size: var(--news-item-meta-font-size);
  flex: 0 0 auto;
}

.news-list strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-warm-1000);
  font-size: var(--news-item-title-font-size);
  font-weight: 400;
  text-overflow: ellipsis;
}

.news-list time {
  color: var(--color-warm-800);
  font-size: var(--news-item-meta-font-size);
  opacity: 0.6;
  flex: 0 0 auto;
}

.news-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--news-pagination-gap);
  flex: 0 0 auto;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  color: var(--color-warm-800);
  font-size: var(--news-pagination-font-size);
  white-space: nowrap;
}

.news-page-controls,
.news-page-numbers,
.news-page-jump,
.news-page-input-label {
  display: flex;
  align-items: center;
}

.news-page-controls,
.news-page-numbers {
  gap: var(--space-8);
}

.news-page-jump {
  gap: var(--space-12);
}

.news-page-input-label {
  gap: var(--space-8);
}

.news-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--news-page-control-height);
  border: 1px solid rgba(143, 49, 49, 0.36);
  border-color: color-mix(in srgb, var(--color-red-800) 36%, transparent);
  border-radius: var(--control-radius-sm);
  background: color-mix(in srgb, var(--color-warm-100) 28%, transparent);
  color: var(--color-warm-1000);
  font-family: inherit;
  font-size: var(--font-body-14);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}



.news-page-button {
  width: var(--news-page-control-height);
  padding: var(--space-0);
}

.news-page-arrow-icon {
  display: block;
  width: 14px;
  height: 19.6px;
  color: inherit;
  pointer-events: none;
}

.news-page-button--arrow[data-news-page-prev] .news-page-arrow-icon {
  transform: scaleX(-1);
}

.news-page-button:hover,
.news-page-button:focus-visible {
  border-color: var(--color-red-800);
  background: color-mix(in srgb, var(--color-red-800) 10%, transparent);
  color: var(--color-red-800);
}

.news-page-button:focus-visible,
.news-page-input:focus-visible {
  outline: 2px solid rgba(143, 49, 49, 0.42);
  outline-color: color-mix(in srgb, var(--color-red-800) 42%, transparent);
  outline-offset: 2px;
}


.news-page-button.is-active {
  border-color: var(--color-red-800);
  background: var(--color-red-800);
  color: var(--color-warm-400);
  font-weight: 600;
}

.news-page-button:disabled {
  cursor: default;
  opacity: 0.38;
}



.news-page-status {
  color: color-mix(in srgb, var(--color-warm-800) 82%, transparent);
}

.news-page-input {
  width: var(--news-page-input-width);
  height: var(--news-page-control-height);
  border: 1px solid rgba(143, 49, 49, 0.36);
  border-color: color-mix(in srgb, var(--color-red-800) 36%, transparent);
  border-radius: var(--control-radius-sm);
  background: color-mix(in srgb, var(--color-warm-100) 34%, transparent);
  color: var(--color-warm-1000);
  font-family: inherit;
  font-size: var(--font-body-14);
  text-align: center;
}

.news-page-input::-webkit-outer-spin-button,
.news-page-input::-webkit-inner-spin-button {
  margin: 0;
}

.screen-roles {
  background: var(--color-bg-section-dark);
}

.section-shell--roles {
  --roles-shell-padding-top: clamp(calc(var(--space-4) * 30), 17.4svh, calc(var(--space-4) * 47));
  --roles-shell-padding-bottom: clamp(calc(var(--space-4) * 15), 6svh, calc(var(--space-4) * 17));
  --roles-toolbar-height: 59px;
  --roles-stage-breathing-room: clamp(var(--space-12), 2svh, var(--space-24));
  --roles-stage-raise: 20px;
  --roles-stage-height: min(
    clamp(430px, 54.907svh, 593px),
    calc(
      100svh
      - var(--roles-shell-padding-top)
      - var(--roles-shell-padding-bottom)
      - var(--roles-toolbar-height)
      - var(--roles-stage-breathing-room)
      - var(--roles-stage-breathing-room)
    )
  );

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: var(--roles-shell-padding-top) var(--space-24) var(--roles-shell-padding-bottom);
}

.roles-download {
  z-index: 8;
}

.screen-roles.is-detail-open .section-shell--roles {
  visibility: hidden;
  pointer-events: none;
}

.roles-toolbar {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1458px, calc(100vw - 96px));
  min-height: 59px;
  flex: 0 0 var(--roles-toolbar-height);
  pointer-events: auto;
}

.role-filter {
  position: relative;
  width: clamp(238px, 15.84vw, 304px);
  height: clamp(46px, 3.073vw, 59px);
}

.role-filter__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--role-filter-trigger-padding);
  border: 0;
  background: center / 100% 100% no-repeat url("../assets/roles/btn_select.svg");
  color: var(--color-gold-600);
  cursor: pointer;
}

.role-filter__trigger span {
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(180deg, var(--color-warm-500) 0%, var(--color-gold-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--role-filter-trigger-font-size);
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-filter__trigger img {
  position: absolute;
  right: var(--role-filter-trigger-icon-right);
  top: 50%;
  width: var(--role-filter-trigger-icon-width);
  height: auto;
  transform: translateY(-50%);
  transition: transform var(--transition-fast);
}

.role-filter.is-open .role-filter__trigger img {
  transform: translateY(-50%) rotate(180deg);
}

.role-filter__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  z-index: 30;
  width: calc(100% - 16px);
  overflow: hidden;
  padding: var(--role-filter-menu-padding);
  border: 1px solid color-mix(in srgb, var(--color-warm-500) 45%, transparent);
  border-radius: var(--role-filter-menu-radius);
  background: color-mix(in srgb, var(--color-ink-900) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--color-ink-1000) 38%, transparent);
  backdrop-filter: blur(10px);
}

.role-filter__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--role-filter-option-height);
  padding: var(--role-filter-option-padding);
  border: 0;
  border-radius: var(--role-filter-option-radius);
  background: transparent;
  color: var(--color-gold-100);
  font-size: var(--role-filter-option-font-size);
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.role-filter__option:hover,
.role-filter__option:focus-visible,
.role-filter__option.is-active {
  background: color-mix(in srgb, var(--color-gold-600) 18%, transparent);
  color: var(--color-warm-500);
}

.role-controls {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-16), 1.386vw, var(--space-24));
}

.role-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(57px, 3.899vw, 75px);
  height: clamp(27px, 1.82vw, 35px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.role-control:hover,
.role-control:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.role-control:disabled {
  cursor: default;
  filter: grayscale(0.7) brightness(0.72);
  opacity: 0.62;
  transform: none;
}

.role-control:focus-visible,
.role-filter__trigger:focus-visible,
.role-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.role-control img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.role-stage {
  --role-stage-content-shift-y: -40px;
  --role-card-width: min(
    clamp(144px, 11.25vw, 216px),
    calc(var(--roles-stage-height) * 0.3643)
  );
  --role-card-selected-width: min(
    clamp(194.4px, 15vw, 288px),
    calc(var(--roles-stage-height) * 0.4858)
  );
  --role-card-offset-1: calc(var(--role-card-selected-width) * 0.93);
  --role-card-offset-2: calc(var(--role-card-selected-width) * 1.755);
  --role-card-offset-3: calc(var(--role-card-selected-width) * 2.55);
  --role-card-offset-4: calc(var(--role-card-selected-width) * 3.105);
  --role-card-y-1: calc(var(--role-card-selected-width) * 0.0585);
  --role-card-y-2: calc(var(--role-card-selected-width) * 0.2);
  --role-card-y-3: calc(var(--role-card-selected-width) * 0.4);
  --role-card-y-4: calc(var(--role-card-selected-width) * 0.5);

  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  pointer-events: auto;
}

.role-card {
  --card-x: 0;
  --card-y: 0;
  --card-rotate: 0deg;
  --card-opacity: 1;
  --card-scale: 1;
  --card-z: 1;

  position: absolute;
  left: 50%;
  top: calc(50% + var(--role-stage-content-shift-y, 0px));
  z-index: var(--card-z);
  width: var(--role-card-width);
  aspect-ratio: 640 / 1272;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 160px;
  cursor: pointer;
  opacity: var(--card-opacity);
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translate3d(var(--card-x), var(--card-y), 0)
    rotate(var(--card-rotate))
    scale(var(--card-scale));
  transform-origin: center;
  transition:
    width 520ms cubic-bezier(0.2, 0.78, 0.22, 1),
    opacity 320ms ease,
    filter 220ms ease,
    transform 520ms cubic-bezier(0.2, 0.78, 0.22, 1);
  will-change: transform;
}

.role-card[hidden] {
  display: none;
}

.role-card:hover {
  filter: brightness(1.08);
}

.role-card.role-card--no-transition {
  transition: none;
}

.role-card.is-selected {
  --card-z: 20;

  width: var(--role-card-selected-width);
  cursor: pointer;
}

.role-card[data-offset="-4"],
.role-card[data-offset="4"] {
  --card-opacity: 0;
  pointer-events: none;
}

.role-card[data-offset="-4"] {
  --card-x: calc(var(--role-card-offset-4) * -1);
  --card-y: var(--role-card-y-4);
  --card-rotate: -16.8deg;
  --card-z: 0;
}

.role-card[data-offset="4"] {
  --card-x: var(--role-card-offset-4);
  --card-y: var(--role-card-y-4);
  --card-rotate: 16.8deg;
  --card-z: 0;
}

.role-card[data-offset="-3"] {
  --card-x: calc(var(--role-card-offset-3) * -1);
  --card-y: var(--role-card-y-3);
  --card-rotate: -13.2deg;
  --card-opacity: 0.36;
  --card-z: 1;
}

.role-card[data-offset="-2"] {
  --card-x: calc(var(--role-card-offset-2) * -1);
  --card-y: var(--role-card-y-2);
  --card-rotate: -8.8deg;
  --card-opacity: 0.78;
  --card-z: 4;
}

.role-card[data-offset="-1"] {
  --card-x: calc(var(--role-card-offset-1) * -1);
  --card-y: var(--role-card-y-1);
  --card-rotate: -4.4deg;
  --card-z: 10;
}

.role-card[data-offset="0"] {
  --card-x: 0;
  --card-y: 0;
  --card-rotate: 0deg;
  --card-z: 20;
}

.role-card[data-offset="1"] {
  --card-x: var(--role-card-offset-1);
  --card-y: var(--role-card-y-1);
  --card-rotate: 4.4deg;
  --card-z: 10;
}

.role-card[data-offset="2"] {
  --card-x: var(--role-card-offset-2);
  --card-y: var(--role-card-y-2);
  --card-rotate: 8.8deg;
  --card-opacity: 0.78;
  --card-z: 4;
}

.role-card[data-offset="3"] {
  --card-x: var(--role-card-offset-3);
  --card-y: var(--role-card-y-3);
  --card-rotate: 13.2deg;
  --card-opacity: 0.36;
  --card-z: 1;
}

.role-card__art,
.role-card__back,
.role-card__title,
.role-card__character,
.role-card__spine {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.role-card__art,
.role-card__back,
.role-card__title {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.role-card--spine {
  --role-spine-card-center-y: 32%;
  --role-spine-character-scale: 160%;
  --role-spine-animation-scale: 190%;
}

.role-card__back,
.role-card__title {
  z-index: 1;
}
.role-card__spine-container {
  margin-top: 200%;
}
.role-card__character {width: 100%;
  top: 11%;
  left: 0%;
  right: 0;
  height: auto;
  transform: scale(1.33);
  z-index: 2;
  object-fit: contain;
  opacity: 1;
  transition: opacity 200ms ease;
}

.role-card__spine {
  left: 50%;
  top: 36%; 
  width: 160%;
  height: 190%;
  z-index: 3;
  overflow: hidden;
  object-fit: contain;
  /* transform: scale(1.8); */
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.role-card--spine.is-selected.is-spine-ready.is-character-hidden .role-card__character {
  opacity: 0;
}

.role-card--spine.is-selected.is-spine-ready .role-card__spine {
  opacity: 1;
  visibility: visible;
}

.role-card__spine .spine-player,
.role-card__spine canvas {
  width: 100%;
  height: 100%;
}

.role-card__title {
  z-index: 4;
}

.role-card__icon {
  position: absolute;
  left: 50%;
  bottom: 18.6%;
  width: 18.75%;
  aspect-ratio: 1;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 5;
}

.role-card.is-selected .role-card__icon {
  opacity: 0;
  visibility: hidden;
}

.role-card__detail {
  --role-detail-color: var(--color-blue-100);
  --role-detail-glow: var(--color-blue-400);

  position: absolute;
  left: 50%;
  bottom: 20.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-8), 0.52vw, var(--space-12));
  color: var(--role-detail-color);
  font-size: clamp(var(--font-body-14), 10vh, var(--font-body-18));
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
  text-shadow: 0 0 0 transparent;
  will-change: opacity, text-shadow;
  z-index: 6;
}

.role-card--spine.is-selected .role-card__detail {
  font-size: calc(var(--role-card-selected-width) * 0.08);
}

.role-card.is-selected .role-card__detail {
  animation: role-detail-pulse 2.4s ease-in-out infinite;
  animation-delay: 120ms;
  opacity: 1;
}

.role-card.is-selected .role-card__detail::after {
  animation: role-detail-icon-pulse 2.4s ease-in-out infinite;
  animation-delay: 120ms;
}

.screen-roles[data-active-faction="wolf"] .role-card.is-selected .role-card__detail,
.role-card.is-selected[data-faction="wolf"] .role-card__detail {
  --role-detail-color: var(--color-red-100);
  --role-detail-glow: var(--color-red-300);
}

.role-card__detail img {
  display: none;
}

.role-card__detail::after {
  content: "";
  display: block;
  width: clamp(25px, 1.93vw, 37px);
  height: clamp(20px, 1.56vw, 30px);
  background: currentColor;
  filter: drop-shadow(0 0 0 transparent);
  will-change: filter;
  mask: url("../assets/roles/ic_go.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/roles/ic_go.svg") center / contain no-repeat;
}

.role-detail-view {
  --role-detail-paper-width: 1450px;
  --role-detail-paper-height: 676px;
  --role-detail-toolbar-top: clamp(108px, 10.46svh, 113px);
  --role-detail-toolbar-height: 149px;
  --role-detail-panel-gap: clamp(var(--space-8), 1.4svh, var(--space-16));
  --role-detail-panel-top-adjust: 30px;
  --role-detail-panel-height-adjust: 30px;
  --role-detail-panel-top: calc(
    var(--role-detail-toolbar-top)
    + var(--role-detail-toolbar-height)
    + var(--role-detail-panel-gap)
    - var(--role-detail-panel-top-adjust)
  );
  --role-detail-panel-bottom: clamp(24px, 4svh, 40px);
  --role-detail-panel-height: min(
    calc(var(--role-detail-paper-height) + var(--role-detail-panel-height-adjust) - var(--space-40)),
    calc(100svh - var(--role-detail-panel-top) - var(--role-detail-panel-bottom) - var(--space-40))
  );
  --role-detail-card-width-current: min(
    320px,
    calc((var(--role-detail-panel-height) - 60px) * 640 / 1272)
  );
  --role-detail-small-width: 64.8px;
  --role-detail-small-height: 80.8px;
  --role-detail-small-gap: var(--space-16);
  --role-detail-edge-mask: 10px;
  --role-detail-small-selected-inset: 2.4px;
  --role-detail-small-selected-size-grow: 5px;
  --role-detail-small-selected-size-grow-half: 2.5px;
  --role-detail-small-selected-glow-large: 22.4px;
  --role-detail-small-selected-glow-small: 12.8px;
  --role-detail-selected-card-left: 0;
  --role-detail-selected-card-top: 0;
  --role-detail-selected-card-width: 0;
  --role-detail-selected-card-height: 0;

  position: absolute;
  inset: 0;
  z-index: 7;
  color: var(--color-gold-1000);
  pointer-events: auto;
}

.role-detail-view[hidden] {
  display: none;
}

.role-detail-toolbar {
  position: absolute;
  left: 50%;
  top: var(--role-detail-toolbar-top);
  z-index: 2;
  display: grid;
  grid-template-columns: clamp(238px, 15.84vw, 304px) minmax(0, 1064px);
  align-items: start;
  column-gap: clamp(var(--space-32), 5.2vw, calc(var(--space-4) * 25));
  width: min(1468px, calc(100vw - 224px));
  height: var(--role-detail-toolbar-height);
  transform: translateX(calc(-50% - 4px));
}

.role-detail-toolbar .role-filter {
  margin-top: var(--space-40);
}

.role-detail-selector {
  position: relative;
  display: block;
  height: var(--role-detail-small-height);
  min-width: 0;
  margin-top: var(--space-24);
}

.role-detail-arrow {
  --role-detail-arrow-mask: url("../assets/roles/btn_next.svg");
  --role-detail-arrow-mask-position: 53% center;

  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33.088px;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
  transform: translateY(-50%);
}

.role-detail-arrow--prev {
  --role-detail-arrow-mask: url("../assets/roles/btn_prev.svg");
  --role-detail-arrow-mask-position: 47% center;

  left: 33.088px;
}

.role-detail-arrow--next {
  right: 0;
}

.role-detail-arrow:hover,
.role-detail-arrow:focus-visible {
  filter: brightness(1.14);
  transform: translateY(calc(-50% - 1px));
}

.role-detail-arrow:disabled {
  cursor: default;
  filter: none;
  opacity: 0.42;
  transform: translateY(-50%);
}

.role-detail-arrow::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-gold-100);
  opacity: 0.7;
  mask: var(--role-detail-arrow-mask) var(--role-detail-arrow-mask-position) / 107px 50px no-repeat;
  -webkit-mask: var(--role-detail-arrow-mask) var(--role-detail-arrow-mask-position) / 107px 50px no-repeat;
  pointer-events: none;
}

.role-detail-arrow:focus-visible,
.role-detail-small-card:focus-visible,
.role-detail-close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.role-detail-arrow img {
  display: none;
}

.role-detail-small-viewport {
  position: absolute;
  left: 63.088px;
  top: 0;
  z-index: 1;
  width: calc(100% - 126.176px);
  min-width: 35vw;
  height: var(--role-detail-small-height);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--role-detail-edge-mask);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--color-ink-1000) var(--role-detail-edge-mask),
    var(--color-ink-1000) calc(100% - var(--role-detail-edge-mask)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--color-ink-1000) var(--role-detail-edge-mask),
    var(--color-ink-1000) calc(100% - var(--role-detail-edge-mask)),
    transparent 100%
  );
}

.role-detail-small-viewport::-webkit-scrollbar {
  display: none;
}

.role-detail-small-list {
  display: flex;
  align-items: center;
  gap: var(--role-detail-small-gap);
  width: max-content;
  min-height: var(--role-detail-small-height);
}

.role-detail-small-card {
  position: relative;
  width: var(--role-detail-small-width);
  height: var(--role-detail-small-height);
  flex: 0 0 var(--role-detail-small-width);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.role-detail-small-card:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.role-detail-small-selected-frame {
  position: absolute;
  left: calc(var(--role-detail-selected-card-left) + var(--role-detail-small-selected-inset) - var(--role-detail-small-selected-size-grow-half));
  top: calc(var(--role-detail-selected-card-top) + var(--role-detail-small-selected-inset) - var(--role-detail-small-selected-size-grow-half));
  z-index: 2;
  width: calc(var(--role-detail-selected-card-width) - var(--role-detail-small-selected-inset) - var(--role-detail-small-selected-inset) + var(--role-detail-small-selected-size-grow));
  height: calc(var(--role-detail-selected-card-height) - var(--role-detail-small-selected-inset) - var(--role-detail-small-selected-inset) + var(--role-detail-small-selected-size-grow));
  border: var(--role-detail-small-selected-inset) solid var(--color-warm-300);
  box-sizing: border-box;
  box-shadow:
    0 0 var(--role-detail-small-selected-glow-large) var(--color-gold-500),
    0 0 var(--role-detail-small-selected-glow-small) var(--color-gold-500);
  pointer-events: none;
}

.role-detail-small-selected-frame[hidden] {
  display: none;
}

.role-detail-small-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.role-detail-panel {
  --role-detail-close-right: var(--space-64);
  --role-detail-scrollbar-gap-from-close: var(--space-12);
  --role-detail-scrollbar-offset: var(--space-40);

  position: absolute;
  left: 50%;
  top: var(--role-detail-panel-top);
  z-index: 1;
  display: grid;
  grid-template-columns: var(--role-detail-card-width-current) minmax(0, 1fr);
  column-gap: var(--space-40);
  width: min(var(--role-detail-paper-width), calc(100vw - 236px));
  height: var(--role-detail-panel-height);
  min-height: 0;
  padding: var(--space-24) calc(var(--space-4) * 20) var(--space-24) var(--space-32);
  transform: translateX(-50%);
}

.role-detail-scroll-area {
  display: contents;
}

.role-detail-panel__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / 100% 100% no-repeat var(--asset-news-paper);
  pointer-events: none;
}

.role-detail-close {
  position: absolute;
  right: var(--role-detail-close-right);
  top: 40px;
  z-index: 3;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.role-detail-close:hover {
  filter: brightness(1.08);
  transform: scale(0.96);
}

.role-detail-close img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.role-detail-card-wrap {
  position: relative;
  z-index: 1;
  width: var(--role-detail-card-width-current);
  min-width: 0;
  align-self: center;
}

.role-detail-card-wrap .role-card {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  aspect-ratio: 640 / 1272;
  max-width: none;
  cursor: default;
  filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--color-gold-1000) 25%, transparent));
  pointer-events: none;
  transform: none;
  transition: none;
}

.role-detail-card-wrap .role-card--spine.is-spine-ready.is-character-hidden .role-card__character {
  opacity: 0;
}

.role-detail-card-wrap .role-card--spine.is-spine-ready .role-card__spine {
  opacity: 1;
  visibility: visible;
}

.role-detail-card-wrap .role-card.is-selected .role-card__icon {
  opacity: 1;
  visibility: visible;
}

.role-detail-card-wrap .role-card__detail {
  display: none;
}

.role-detail-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: calc(var(--role-detail-scrollbar-offset) * -1);
  padding: var(--space-40) var(--role-detail-scrollbar-offset) 0 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.role-detail-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.role-detail-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.role-detail-section--skill,
.role-detail-section--character {
  padding-bottom: var(--space-24);
}

.role-detail-section--related {
  min-height: 182px;
}

.role-detail-tag {
  width: 142px;
  height: 35px;
  max-width: none;
  object-fit: contain;
}

.role-detail-section p {
  width: 100%;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-40);
  color: var(--color-warm-900);
  font-size: var(--font-body-16);
  text-align: left;
}

.role-detail-section--skill p {
  line-height: 2.25;
}

.role-detail-section--character p {
  line-height: 1.8;
  white-space: pre-line;
}

.role-detail-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0 0 0 var(--space-40);
  list-style: none;
}

.role-detail-related-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--color-warm-900);
  font-size: var(--font-body-16);
  font-weight: 600;
  line-height: 2.125;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--transition-fast),
    filter var(--transition-fast);
}

.role-detail-related-link:hover,
.role-detail-related-link:focus-visible {
  color: var(--color-red-800);
}

.role-detail-related-link::after {
  content: "";
  width: 11.7504px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("../assets/roles/btn_next.svg") 53% center / 85.6px 40px no-repeat;
  -webkit-mask: url("../assets/roles/btn_next.svg") 53% center / 85.6px 40px no-repeat;
}

.article-detail-view {
  --article-paper-width: 1405px;
  --article-paper-height: 906px;
  --article-paper-top: 130px;
  --article-paper-bottom: 66px;
  --article-paper-current-height: min(
    var(--article-paper-height),
    calc(100svh - var(--article-paper-top) - var(--article-paper-bottom))
  );
  --article-content-width: 886px;
  --article-content-top-space: calc(var(--space-4) * 15);
  --article-content-bottom-space: var(--space-64);
  --article-back-left: 93px;
  --article-back-top: 70px;
  --article-paper-shift-x: 24.5px;
  --article-detail-scrollbar-inset-right: var(--space-32);

  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  overflow: hidden;
  background: var(--color-bg-section-dark);
  color: var(--color-red-900);
}

.article-detail-view[hidden] {
  display: none;
}

.article-detail-topbar {
  position: absolute;
  top: var(--article-back-top);
  left: var(--article-back-left);
  z-index: 3;
  display: flex;
  align-items: center;
}

.article-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-warm-600);
  font-family: var(--font-serif);
  font-size: var(--font-heading-30);
  font-weight: 500;
  line-height: var(--space-32);
  cursor: pointer;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.article-detail-back:hover,
.article-detail-back:focus-visible {
  filter: brightness(1.08);
  transform: translateX(-2px);
}

.article-detail-back:focus-visible,
.article-detail-content-scroll:focus-visible,
.article-detail-related .role-detail-related-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.article-detail-back img {
  width: 27px;
  height: 30px;
  max-width: none;
  pointer-events: none;
}

.article-detail-paper {
  position: absolute;
  top: var(--article-paper-top);
  left: calc(50% + var(--article-paper-shift-x));
  z-index: 2;
  display: block;
  width: min(var(--article-paper-width), calc(100vw - 200px));
  height: var(--article-paper-current-height);
  min-height: 0;
  transform: translateX(-50%);
}

.article-detail-paper__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / 100% 100% no-repeat var(--asset-news-paper);
  pointer-events: none;
}

.article-detail-content-scroll {
  --article-scroll-mask-size: 15px;
  --article-scroll-top-guard: 20px;

  position: relative;
  z-index: 1;
  width: calc(100% - var(--article-detail-scrollbar-inset-right));
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--article-content-top-space) 0 var(--article-content-bottom-space);
  overscroll-behavior: contain;
  clip-path: inset(var(--article-scroll-top-guard) 0 0);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink-1000) var(--article-scroll-mask-size),
    var(--color-ink-1000) calc(100% - var(--article-scroll-mask-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--color-ink-1000) var(--article-scroll-mask-size),
    var(--color-ink-1000) calc(100% - var(--article-scroll-mask-size)),
    transparent 100%
  );
}

.article-detail-content-scroll,
.role-detail-content {
  --detail-scrollbar-thumb-width: 6px;
  --detail-scrollbar-shift-left: 10px;

  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-warm-900) 32%, transparent) transparent;
}

.article-detail-content-scroll::-webkit-scrollbar,
.role-detail-content::-webkit-scrollbar {
  width: calc(var(--detail-scrollbar-thumb-width) + var(--detail-scrollbar-shift-left));
}

.article-detail-content-scroll::-webkit-scrollbar-track,
.role-detail-content::-webkit-scrollbar-track {
  background: transparent;
}

.article-detail-content-scroll::-webkit-scrollbar-thumb,
.role-detail-content::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-warm-900) 32%, transparent);
  background-clip: content-box;
  border-right: var(--detail-scrollbar-shift-left) solid transparent;
}

.article-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: min(var(--article-content-width), calc(100% - 288px));
  margin: 0 auto;
  min-width: 0;
}

.article-detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  text-align: center;
}

.article-detail-header h1 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-red-900);
  font-size: var(--font-heading-30);
  font-weight: 500;
  line-height: 1.5;
}

.article-detail-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  width: 100%;
  padding-bottom: var(--space-4);
  color: var(--color-warm-900);
  font-size: var(--font-body-16);
  line-height: 1.8;
  white-space: nowrap;
}

.article-detail-divider {
  width: 100%;
  height: 4px;
  max-width: none;
  object-fit: cover;
  opacity: 0.72;
  pointer-events: none;
}

.article-detail-main-figure {
  width: 100%;
  margin: 0;
}

.article-detail-main-figure[hidden] {
  display: none;
}

.article-detail-main-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.article-detail-main-image2 {
  display: inline-block;
  width: 48%;
  margin: 0;
  padding: 0;
  height: auto;
  max-width: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.article-detail-body {
  color: color-mix(in srgb, var(--color-red-900) 80%, transparent);
  font-size: var(--font-body-16);
  line-height: 1.95;
}

.article-detail-body p {
  margin: 0 0 var(--space-16);
  text-indent: 2em;
}

.article-detail-body .article-detail-main-figure + :is(p, h2, h3, h4, ul, ol) {
  margin-top: var(--space-24);
}

.article-detail-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-detail-body table {
  width: 100%;
  margin: var(--space-24) 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-gold-800) 8%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-gold-1000) 6%, transparent);
}

.article-detail-body th,
.article-detail-body td {
  padding: var(--space-12) var(--space-16);
  border: 0;
  background: color-mix(in srgb, var(--color-warm-100) 42%, transparent);
  color: color-mix(in srgb, var(--color-red-900) 82%, transparent);
  font-size: var(--font-body-16);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.article-detail-body tr:first-child > th,
.article-detail-body tr:first-child > td {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-gold-800) 18%, transparent), color-mix(in srgb, var(--color-gold-800) 10%, transparent));
  color: var(--color-red-900);
  font-weight: 600;
  text-align: center;
}

.article-detail-body tr + tr > th,
.article-detail-body tr + tr > td {
  border-top: 1px solid color-mix(in srgb, var(--color-gold-800) 18%, transparent);
}

.article-detail-body th:not(:last-child),
.article-detail-body td:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--color-gold-800) 16%, transparent);
}

.article-detail-body table b,
.article-detail-body table strong {
  color: inherit;
  font-weight: 600;
}

.article-detail-body tr:last-child > th,
.article-detail-body tr:last-child > td,
.article-detail-body tr:last-child b,
.article-detail-body tr:last-child strong {
  font-weight: 400;
}

.article-detail-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding-top: var(--space-4);
  color: var(--color-warm-900);
}

.article-detail-related > p {
  margin: 0;
  font-size: var(--font-body-16);
  font-weight: 600;
  line-height: 2.125;
}

.article-detail-related-list {
  margin-top: 0;
  padding-left: 0;
}

body.is-article-detail-open .scroll-hint {
  opacity: 0;
  pointer-events: none;
}

body.is-article-detail-open .ui-debug-trigger {
  opacity: 0;
  pointer-events: none;
}

body.is-follow-screen-active .ui-debug-trigger {
  opacity: 0;
  pointer-events: none;
}

.role-empty {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--role-stage-content-shift-y, 0px));
  z-index: 3;
  margin: 0;
  color: var(--color-warm-500);
  font-size: clamp(var(--font-body-18), 1.25vw, var(--font-heading-26));
  font-weight: 600;
  transform: translate(-50%, -50%);
}

.section-shell--follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding:
    calc(var(--site-header-height) - var(--space-24))
    0
    0;
  scrollbar-width: none;
}

.section-shell--follow::-webkit-scrollbar {
  display: none;
}

.section-bg--follow::after {
  display: none;
}

.follow-content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: min(100%, 1001px);
  margin-top: 0;
  padding: 0 0 2svh 0;
}

.follow-title {
  width: min(38.15vw, 381.5px);
  min-width: 315px;
  height: 5vh;
  flex: 0 0 auto;
  margin: 1svh 0 3svh 0;
  object-fit: contain;
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  justify-content: center;
  align-content: stretch;
  align-items: center;
  flex: 1 1 auto;
  gap:
    clamp(var(--space-16), 3vh, var(--space-40))
    clamp(var(--space-24), 4vh, var(--space-64));
  width: 100%;
  max-height: calc(400px + clamp(var(--space-16), 2vh, var(--space-24)));
  min-height: 0;
}

.follow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  aspect-ratio: 300 / 347;
  justify-self: center;
  padding: var(--space-16);
  background: none;
  color: var(--color-gold-900);
  perspective: 800px;
  text-align: center;
  transition:
    transform var(--transition-fast),
    filter var(--transition-fast);
}

.follow-card:nth-child(n + 5) {
  transform: translateX(calc(50% + clamp(var(--space-12), 2vh, var(--space-32))));
}

.follow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / contain no-repeat var(--follow-card-frame);
  pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.follow-card__media,
.follow-card__label {
  position: relative;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.follow-card:hover,
.follow-card:focus-visible {
  filter: brightness(1.02);
  transform: translateY(-2px);
}

.follow-card:nth-child(n + 5):hover,
.follow-card:nth-child(n + 5):focus-visible {
  transform: translate(calc(50% + clamp(var(--space-12), 2vh, var(--space-32))), -2px);
}

.follow-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.follow-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform 420ms ease;
}

.follow-card.has-qrcode:hover .follow-card__media,
.follow-card.has-qrcode:focus-visible .follow-card__media {
  transform: rotateY(180deg);
}

.follow-card__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.follow-card__face--back {
  transform: rotateY(180deg);
}

.follow-card__label {
  margin-top: var(--space-4);
  font-size: 1.9vh;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.follow-copy {
  margin: 1.7vh 0 1.7vh 0 ;
  color: var(--color-gold-700);
  flex: 0 0 auto;
  font-size: 1.7vh;
  line-height: 2;
  text-align: center;
  white-space: nowrap;
}

.game-footer {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding:
    var(--follow-footer-padding-y)
    max(var(--follow-footer-padding-x), env(safe-area-inset-right))
    calc(var(--follow-footer-padding-y) + env(safe-area-inset-bottom))
    max(var(--follow-footer-padding-x), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--color-ink-1000) 50%, transparent);
}

.game-footer__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-40);
  width: fit-content;
  max-width: min(100%, 1380px);
}

.game-footer__logo {
  width: 166px;
  height: 54px;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.game-footer__content {
  display: flex;
  width: fit-content;
  flex: 0 1 fit-content;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  font-size: clamp(var(--font-label-10), 1.2vh, var(--font-body-14));
  line-height: 1.4;
}

.game-footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  min-width: 0;
}

.game-footer__nav,
.game-footer__brand-guide {
  display: flex;
  align-items: center;
  color: var(--color-red-600);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

.game-footer__nav {
  gap: var(--space-4);
}

.game-footer__brand-guide {
  gap: var(--space-4);
}

.game-footer__brand-guide img {
  width: 16px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
}

.game-footer__legal {
  color: color-mix(in srgb, var(--color-ink-100) 50%, transparent);
  letter-spacing: var(--letter-spacing-tight);
}

.game-footer__legal p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.game-footer__mobile-legal {
  display: none;
}

.game-footer__record {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.game-footer__record img {
  width: auto;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

.game-footer__record-link {
  display: flex;
  align-items: center;
}

.game-footer__record-icon {
  display: inline-block;
}

.game-footer__age {
  width: 46px;
  height: 59px;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-assets-page {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--color-bg-section-dark);
  color: var(--color-warm-1000);
}

.brand-assets-page .section-bg {
  position: fixed;
}

.brand-assets-main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(calc(var(--space-4) * 28), 11vh, calc(var(--space-4) * 34)) var(--space-24) clamp(var(--space-40), 5vh, var(--space-64));
  isolation: isolate;
}

.brand-assets-page .article-detail-topbar {
  position: fixed;
  left: clamp(20px, 4vw, 72px);
  top: clamp(24px, 4vh, 48px);
}

.brand-asset-download:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.brand-assets-paper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-24), 2vw, var(--space-32));
  width: min(1420px, calc(100vw - 48px));
  min-height: min(758px, calc(100svh - clamp(152px, 16vh, 200px)));
  margin: 0 auto;
  padding:
    clamp(var(--space-64), 5.1vw, var(--space-96))
    clamp(var(--space-40), 5.6vw, var(--space-96))
    clamp(var(--space-40), 4vw, var(--space-64));
  isolation: isolate;
}

.brand-assets-paper__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / 100% 100% no-repeat var(--asset-brand-paper);
  pointer-events: none;
}

.brand-assets-header,
.brand-assets-list {
  position: relative;
  z-index: 1;
}

.brand-assets-header {
  display: grid;
  grid-template-columns: minmax(192px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-24), 3vw, var(--space-40));
  padding-bottom: var(--space-24);
  border-bottom: 1px solid color-mix(in srgb, var(--color-warm-800) 20%, transparent);
}

.brand-assets-header__logo {
  width: min(100%, 200px);
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--color-gold-1000) 12%, transparent));
}

.brand-assets-header__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
  min-width: 0;
  text-align: right;
}

.brand-assets-header__copy span {
  color: var(--color-red-800);
  font-size: var(--font-label-12);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
}

.brand-assets-header__copy h1 {
  margin: 0;
  color: var(--color-warm-1000);
  font-size: var(--font-heading-36);
  font-weight: 500;
  line-height: 1.18;
}

.brand-assets-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(var(--space-16), 1.7vw, var(--space-24));
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-asset-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb thumb"
    "name download";
  align-items: center;
  gap: var(--space-16) var(--space-16);
  min-height: 0;
  padding: var(--space-16);
  border: 1px solid color-mix(in srgb, var(--color-warm-800) 22%, transparent);
  border-radius: var(--radius-base);
  background: color-mix(in srgb, var(--color-warm-100) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-ink-100) 22%, transparent),
    0 12px 28px color-mix(in srgb, var(--color-gold-1000) 8%, transparent);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.brand-asset-item:hover,
.brand-asset-item:focus-within {
  border-color: color-mix(in srgb, var(--color-red-800) 38%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-ink-100) 25%, transparent),
    0 16px 36px color-mix(in srgb, var(--color-gold-1000) 12%, transparent);
  transform: translateY(-2px);
}

.brand-asset-thumb {
  grid-area: thumb;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  justify-self: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-red-800) 18%, transparent);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--color-warm-100) 45%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--color-warm-100) 45%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-warm-100) 45%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-warm-100) 45%, transparent) 75%),
    color-mix(in srgb, var(--color-warm-100) 36%, transparent);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
  overflow: hidden;
}

.brand-asset-thumb--dark {
  background: color-mix(in srgb, var(--color-warm-1000) 76%, transparent);
}

.brand-asset-thumb--paper {
  background: color-mix(in srgb, var(--color-warm-100) 72%, transparent);
}

.brand-asset-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.brand-asset-thumb--wide img {
  object-fit: cover;
  object-position: center 16%;
}

.brand-asset-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: var(--color-warm-1000);
  font-size: var(--font-body-14);
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-asset-download {
  grid-area: download;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 27.2px;
  height: 27.2px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.brand-asset-download img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.brand-asset-download:hover,
.brand-asset-download:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.brand-asset-download:disabled {
  cursor: wait;
  filter: saturate(0.85);
}

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(2px, calc(env(safe-area-inset-bottom) + 2px));
  z-index: var(--z-scroll-indicator);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scroll-hint-width);
  padding: 0 0 var(--scroll-hint-padding-bottom);
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--color-ink-1000) 36%, transparent));
  transform: translateX(-50%);
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast),
    filter var(--transition-fast);
}

.scroll-hint:hover {
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--color-ink-1000) 42%, transparent)) brightness(1.08);
}

.scroll-hint:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 6px;
  border-radius: var(--radius-pill);
}

.scroll-hint__motion {
  display: block;
  width: 100%;
  aspect-ratio: 99 / 88;
  animation: scroll-hint-float 1.55s ease-in-out infinite;
  will-change: transform, opacity;
}

.scroll-hint__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.scroll-hint.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ui-debug-trigger[hidden] {
  display: none;
}

.ui-debug-trigger {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-debug-trigger);
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-debug-trigger);
  color: var(--color-text-debug-trigger);
  font-size: var(--font-body-14);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-ui);
  box-shadow: var(--shadow-debug-trigger);
  cursor: pointer;
  backdrop-filter: blur(16px);
}

.ui-debug-modal[hidden] {
  display: none;
}

.ui-debug-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-debug-modal);
}

.ui-debug-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-surface-debug-backdrop);
  backdrop-filter: blur(6px);
}

.ui-debug-panel {
  position: absolute;
  top: 50%;
  right: clamp(16px, 3vw, 32px);
  width: min(512px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: var(--space-16);
  border: 1px solid var(--color-border-panel);
  border-radius: var(--radius-panel);
  background: var(--color-surface-debug);
  color: var(--color-text-debug);
  transform: translateY(-50%);
  box-shadow: var(--shadow-debug-panel);
  overflow: auto;
}

.ui-debug-panel__header,
.ui-debug-panel__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

.ui-debug-panel__header h2 {
  margin: 0;
  font-size: var(--font-body-18);
}

.ui-debug-panel__header p {
  margin: var(--space-4) 0 0;
  color: var(--color-text-debug-secondary);
  font-size: var(--font-body-14);
}

.ui-debug-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-debug-ghost);
  color: var(--color-text-primary);
  font-size: var(--font-body-18);
  line-height: 1;
  cursor: pointer;
}

.ui-debug-panel__body {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.ui-debug-row {
  padding: var(--space-16) var(--space-16);
  border-radius: var(--radius-xl);
  background: var(--color-surface-debug-row);
}

.ui-debug-row__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-8);
  font-size: var(--font-body-14);
}

.ui-debug-row__label span {
  color: var(--color-text-debug-value);
  font-variant-numeric: tabular-nums;
}

.ui-debug-row__controls {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: var(--space-12);
}

.ui-debug-row input[type="range"] {
  width: 100%;
}

.ui-debug-row input[type="number"] {
  width: 100%;
  padding: var(--space-8) var(--space-8);
  border: 1px solid var(--color-border-field);
  border-radius: var(--radius-12);
  background: var(--color-surface-debug-control);
  color: var(--color-text-primary);
}

.ui-debug-panel__footer {
  flex-direction: column;
  margin-top: var(--space-16);
}

.ui-debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.ui-debug-action {
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-13-6);
  background: var(--color-accent-action);
  color: var(--color-text-primary);
  font-size: var(--font-body-14);
  font-weight: 600;
  cursor: pointer;
}

.ui-debug-action.is-ghost {
  background: var(--color-surface-debug-ghost);
}

.ui-debug-status {
  margin: 0;
  color: var(--color-text-debug-muted);
  font-size: var(--font-body-14);
}

@keyframes scroll-hint-float {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, -3px, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes qr-scan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  12%,
  88% {
    opacity: 1;
  }

  50% {
    transform: translateY(101px);
    opacity: 1;
  }
}

@keyframes download-panel-qr-scan {
  0%,
  100% {
    top: 8%;
    opacity: 0.45;
  }

  12%,
  88% {
    opacity: 1;
  }

  50% {
    top: calc(92% - 3px);
    opacity: 1;
  }
}

@keyframes nav-active-ink-write {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0.58;
  }

  38% {
    clip-path: polygon(0 0, 44% 6%, 36% 94%, 0 100%);
    opacity: 0.92;
  }

  72% {
    clip-path: polygon(0 0, 78% 0, 88% 100%, 0 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@keyframes role-detail-pulse {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }

  50% {
    text-shadow: 0 0 20px var(--role-detail-glow);
  }
}

@keyframes role-detail-icon-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }

  50% {
    filter: drop-shadow(0 0 20px var(--role-detail-glow));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.is-active:hover::before,
  .nav-item.is-active.is-ink-writing::before,
  .download-qr-scan,
  .download-panel__qr-scan,
  .scroll-hint__motion {
    animation: none;
  }

  .follow-card,
  .follow-card__media {
    transition: none;
  }

  .features-slider__track {
    transition: none;
  }

  .role-card,
  .role-card__detail,
  .role-card__icon,
  .role-card__character,
  .role-card__spine,
  .role-detail-arrow,
  .role-detail-close,
  .role-detail-small-card,
  .role-filter__trigger img {
    transition: none;
  }

  .role-card.is-selected .role-card__detail {
    animation: none;
    text-shadow: none;
  }

  .role-card__detail::after {
    animation: none;
    filter: none;
  }

  .role-detail-small-viewport {
    scroll-behavior: auto;
  }

  .scroll-hint__motion {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .download-qr-scan {
    transform: translateY(50px);
  }

  .download-panel__qr-scan {
    top: 50%;
  }
}

@media (min-width: 851px) and (max-width: 1440px) {
  :root {
    --layout-breakpoint: small-pc;
  }

  .site-header {
    gap: var(--space-16);
    padding: var(--site-header-padding-compact);
  }

  .nav-icon {
    width: var(--nav-icon-size-compact);
    height: var(--nav-icon-size-compact);
  }

  .nav-label {
    font-size: var(--font-body-16);
  }

  .nav-label--home {
    letter-spacing: var(--nav-home-letter-spacing-compact);
  }

  .nav-en {
    font-size: var(--font-label-10);
    letter-spacing: var(--nav-en-letter-spacing-compact);
  }

  .nav-item.is-active::before {
    width: var(--nav-active-width-compact);
    height: var(--nav-active-height-compact);
  }

  .article-detail-view {
    --article-paper-top: 142px;
    --article-paper-bottom: 32px;
    --article-content-width: 816px;
    --article-content-top-space: calc(var(--space-4) * 13);
    --article-content-bottom-space: calc(var(--space-4) * 12);
    --article-back-left: 70px;
    --article-back-top: 64px;
  }

  .article-detail-paper {
    width: min(94vw, var(--article-paper-width));
    height: var(--article-paper-current-height);
  }

  .screen-follow .download-panel--vertical {
    --download-panel-scale: 0.72;
  }

  .screen-follow .game-footer {
    padding-inline:
      max(var(--follow-footer-padding-x), env(safe-area-inset-left))
      max(var(--follow-footer-padding-x), env(safe-area-inset-right));
  }

  .screen-follow .game-footer__inner {
    gap: clamp(var(--space-16), 3vw, var(--space-40));
    width: min(100%, 1380px);
  }

  .screen-follow .game-footer__logo {
    width: 120px;
    height: auto;
  }

  .screen-follow .game-footer__content {
    width: auto;
    flex: 1 1 auto;
  }

  .screen-follow .game-footer__links {
    gap: clamp(var(--space-16), 2.5vw, var(--space-40));
  }

  .screen-follow .game-footer__age {
    width: clamp(34px, 3.2vw, 46px);
    height: auto;
  }
}

@media (min-width: 1441px) {
  :root {
    --layout-breakpoint: large-pc;
  }
}

@media (max-width: 850px) {
  :root {
    --layout-breakpoint: mobile;
    --scroll-hint-width: 40px;
    --mobile-header-bar-height: clamp(69px, 19.1667vw, 115px);
    --mobile-header-height: var(--mobile-header-bar-height);
    --mobile-header-padding-x: clamp(calc(var(--space-4) * 5), 5vw, var(--space-32));
    --mobile-header-padding-y: clamp(var(--space-12), 3.3334vw, calc(var(--space-4) * 5));
    --mobile-header-gap: clamp(var(--space-12), 3.3334vw, calc(var(--space-4) * 5));
    --mobile-logo-width: clamp(104.6512px, 29.07vw, 174.4192px);
    --mobile-logo-height: clamp(45px, 12.5vw, 75px);
    --mobile-download-small-width: clamp(68.4px, 19vw, 114px);
    --mobile-download-small-height: clamp(31.8px, 8.8334vw, 53px);
    --mobile-menu-icon-size: clamp(27px, 7.5vw, 45px);
    --mobile-menu-panel-top: clamp(103.5px, 28.75vw, 172.5px);
    --mobile-menu-list-width: clamp(225px, 62.5vw, 375px);
    --mobile-menu-list-gutter: clamp(36px, 10vw, 60px);
    --mobile-menu-item-height: clamp(63px, 17.5vw, 105px);
    --mobile-menu-divider-width: clamp(213px, 59.1667vw, 355px);
    --mobile-menu-divider-height: clamp(2.4px, 0.6667vw, 4px);
    --mobile-menu-close-size: clamp(30px, 8.3334vw, 50px);
    --mobile-menu-close-gap: clamp(calc(var(--space-4) * 13), 14.1667vw, calc(var(--space-4) * 21));
    --mobile-hero-copy-top: clamp(11.4px, 3.1667vw, 19px);
    --mobile-hero-title-width: clamp(316.8px, 88vw, 528px);
    --mobile-hero-download-width: clamp(175.2px, 48.6667vw, 292px);
    --mobile-hero-download-height: clamp(77.4px, 21.5vw, 129px);
    --mobile-hero-download-bottom: clamp(45px, 12.5vw, 75px);
  }

  /* iOS 刘海屏：顶部布局需要叠加 safe-area；安卓默认不加，避免异常值。 */
  @supports (padding-top: env(safe-area-inset-top)) and (-webkit-touch-callout: none) {
    :root {
      --mobile-header-height: calc(env(safe-area-inset-top) + var(--mobile-header-bar-height));
    }
  }

  body {
    overflow-x: hidden;
  }

  body.is-mobile-menu-open {
    overflow: hidden;
  }

  html {
    overflow-x: hidden;
  }

  .brand-assets-main {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(var(--space-96), 18vw, calc(var(--space-4) * 25)) var(--space-16) var(--space-32);
  }

  .brand-assets-page .article-detail-topbar {
    position: absolute;
    left: 20px;
    top: 20px;
  }

  .brand-assets-paper {
    width: min(94vw, 688px);
    min-height: auto;
    padding:
      clamp(var(--space-40), 9vw, var(--space-64))
      clamp(var(--space-16), 5vw, var(--space-24))
      clamp(var(--space-24), 6vw, var(--space-32));
  }

  .brand-assets-header {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    gap: var(--space-16);
  }

  .brand-assets-header__logo {
    width: min(72vw, 200px);
  }

  .brand-assets-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
    gap: var(--space-16);
  }

  .brand-asset-item {
    min-height: 0;
    padding: var(--space-16);
  }

  .brand-asset-thumb {
    width: 100%;
    padding: 0;
  }

  .brand-asset-name {
    font-size: var(--font-body-14);
  }

  .brand-asset-download {
    width: 27.2px;
    height: 27.2px;
  }

  .page-main {
    -webkit-display: flex;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: var(--mobile-header-height);
  }

  .fullpage {
    height: auto;
    min-height: 0;
    max-width: 100vw;
    /* -webkit-flex: 1 1 auto;
    flex: 1 1 auto; */
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
  }

  body.is-role-detail-open .fullpage {
    overflow: hidden;
    scroll-snap-type: none;
  }

  .screen {
    height: 100%;
    min-height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .screen-news,
  .screen-roles,
  .screen-follow {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .screen-follow {
    --follow-footer-padding-y: max(8px, 1vh);

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
  }

  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 700;
    height: var(--mobile-header-height);
    flex: 0 0 var(--mobile-header-height);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mobile-header-gap);
    padding: var(--mobile-header-padding-y) var(--mobile-header-padding-x) var(--mobile-header-padding-y);
    border-bottom: 2px solid var(--color-ink-1000);
    background: var(--color-red-1000);
    pointer-events: auto;
  }

  /* iOS 刘海屏：顶部需要叠加 safe-area；安卓部分浏览器会给出异常值，所以默认不使用。 */
  @supports (padding-top: env(safe-area-inset-top)) and (-webkit-touch-callout: none) {
    .site-header {
      padding-top: calc(env(safe-area-inset-top) + var(--mobile-header-padding-y));
    }  }

  .site-brand {
    align-self: auto;
    width: var(--mobile-logo-width);
    height: var(--mobile-logo-height);
    min-height: var(--space-64);
    min-width: calc(var(--space-4) * 30);
    transform: none;
  }

  .site-logo {
    width: 100%;
    height: 100%;
  }

  .site-nav {
    display: none;
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mobile-header-gap);
    flex: 0 0 auto;
  }

  .mobile-download-small {
    display: block;
    width: var(--mobile-download-small-width);
    height: var(--mobile-download-small-height);
  }

  .mobile-download-small img,
  .mobile-menu-toggle img,
  .mobile-hero-download img,
  .mobile-menu-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mobile-menu-toggle,
  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-toggle:focus,
  .mobile-menu-toggle:focus-visible,
  .mobile-menu-close:focus,
  .mobile-menu-close:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .mobile-menu-toggle {
    width: var(--mobile-menu-icon-size);
    height: var(--mobile-menu-icon-size);
  }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 710;
    display: block;
  }

  .mobile-menu-overlay[hidden] {
    display: none;
  }

  .mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 81.6667vw;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding-top: var(--mobile-menu-panel-top);
    background: color-mix(in srgb, var(--color-ink-900) 95%, transparent);
  }

  @supports (padding-top: env(safe-area-inset-top)) and (-webkit-touch-callout: none) {
    .mobile-menu-panel {
      padding-top: calc(env(safe-area-inset-top) + var(--mobile-menu-panel-top));
    }
  }

  .mobile-menu-list {
    display: flex;
    width: var(--mobile-menu-list-width);
    max-width: calc(100% - var(--mobile-menu-list-gutter));
    flex-direction: column;
    align-items: center;
  }

  .mobile-menu-item {
    display: flex;
    width: 100%;
    height: var(--mobile-menu-item-height);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-warm-700);
    cursor: pointer;
    font-size: var(--font-heading-22);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-item:focus,
  .mobile-menu-item:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .mobile-menu-divider {
    width: var(--mobile-menu-divider-width);
    max-width: 100%;
    height: var(--mobile-menu-divider-height);
    object-fit: fill;
  }

  .mobile-menu-close {
    width: var(--mobile-menu-close-size);
    height: var(--mobile-menu-close-size);
    margin-top: var(--mobile-menu-close-gap);
  }

  body.is-mobile-menu-open .fullpage {
    overflow: hidden;
  }

  .hero-screen {
    --mobile-video-scale: 1.08;
    --mobile-foreground-scale: 1.08;

    min-height: 100%;
    overflow: hidden;
  }

  .hero-background__video {
    display: none;
  }

  .hero-background__image {
    display: block;
    object-position: 51% 50%;
    transform-origin: center center;
    transform: translate3d(var(--video-shift-x), var(--video-shift-y), 0) scale(var(--mobile-video-scale));
  }

  .hero-foreground__image {
    object-position: 54% bottom;
    transform: translate3d(var(--foreground-shift-x), var(--foreground-shift-y), 0) scale(var(--mobile-foreground-scale));
  }

  .hero-copy {
    right: 0;
    left: 0;
    top: var(--mobile-hero-copy-top);
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    transform: none;
  }

  @supports (top: env(safe-area-inset-top)) and (-webkit-touch-callout: none) {
    .hero-copy {
      top: calc(env(safe-area-inset-top) + var(--mobile-hero-copy-top));
    }
  }

  .hero-copy picture {
    display: block;
    width: var(--mobile-hero-title-width);
    max-width: none;
  }

  .hero-title {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0 auto;
    transform: none;
  }

  .mobile-hero-download {
    position: absolute;
    left: 50%;
    bottom: max(
      var(--mobile-hero-download-bottom),
      calc(env(safe-area-inset-bottom) + 32px)
    );
    z-index: calc(var(--z-content) + 2);
    display: block;
    width: var(--mobile-hero-download-width);
    height: var(--mobile-hero-download-height);
    isolation: isolate;
    transform: translateX(-50%);
    transform-origin: center center;
    animation: mobile-download-click-cue 3.83s cubic-bezier(0.33, 0, 0.2, 1) infinite;
  }

  .mobile-hero-download::after {
    content: "";
    position: absolute;
    inset: 16% 10%;
    z-index: 2;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, color-mix(in srgb, var(--color-gold-200) 42%, transparent) 0%, color-mix(in srgb, var(--color-gold-400) 18%, transparent) 44%, color-mix(in srgb, var(--color-gold-400) 0%, transparent) 72%);
    opacity: 0;
    transform: scale(0.9);
    animation: mobile-download-click-halo 3.83s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    pointer-events: none;
  }

  .mobile-hero-download img {
    position: relative;
    z-index: 1;
  }

  .download-dock {
    display: none;
  }

  .download-card {
    width: var(--download-card-width-mobile);
    justify-content: center;
    gap: var(--download-card-gap);
    padding: var(--download-card-padding);
    border-radius: var(--radius-md);
  }

  .download-label {
    height: var(--download-label-height);
    font-size: var(--download-label-font-size-mobile);
    line-height: var(--download-label-line-height);
  }

  .download-content {
    min-width: 0;
    gap: var(--download-content-gap);
  }

  .download-qr-frame {
    width: var(--download-qr-size);
    height: var(--download-qr-size);
  }

  .download-actions {
    width: var(--download-actions-width);
    height: var(--download-actions-height);
  }

  .store-btn {
    width: var(--download-store-button-width);
    min-height: var(--download-store-button-min-height);
    gap: var(--download-store-button-gap);
    padding: var(--download-store-button-padding);
  }

  .store-btn__icon {
    width: var(--download-store-icon-size);
    height: var(--download-store-icon-size);
  }

  .store-btn__copy {
    width: var(--download-store-copy-width);
    font-size: var(--download-store-button-font-size);
  }

  .screen-features {
    --features-header-height: var(--mobile-header-height);
    --features-slide-content-raise: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--space-12) var(--space-12) calc(env(safe-area-inset-bottom) + var(--space-64));
  }

  .features-stage {
    --features-mobile-stage-gutter: clamp(128px, 24vw, 144px);

    position: relative;
    left: auto;
    top: auto;
    width: min(100%, calc((100vh - var(--features-mobile-stage-gutter)) * 1418 / 2169), 512px);
    min-width: 100vw;
    /* min-height: calc(100vh - var(--features-mobile-stage-gutter) - 80px);
    max-height: calc(100vh - var(--features-mobile-stage-gutter)); */
    height: 100%;
    aspect-ratio: 1418 / 2169;
    overflow: visible;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-ink-900) 34%, transparent);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-ink-1000) 28%, transparent);
    transform: none;
    pointer-events: auto;
    touch-action: none;
    contain: layout;
  }

  .features-slider,
  .features-slider__track,
  .features-slide {
    height: 100%;
  }

  .features-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: none;
    overflow: visible;
    contain: layout;
  }

  .features-slider__track {
    transition: transform 300ms ease;
  }

  .features-slide {
    aspect-ratio: auto;
    overflow: visible;
  }

  .features-stage__picture {
    width: 100%;
    height: 100%;
  }

  .features-stage__image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  .features-carousel {
    left: 50%;
    top: auto;
    bottom: 6px;
    width: 108px;
    height: 14px;
    transform: translateX(-50%);
  }

  .features-carousel.pagination.pagination--feature {
    margin-top: var(--space-24);
  }

  .pagination--feature {
    --pagination-dot-width: 14px;
    --pagination-dot-height: 14px;
    --pagination-gap: var(--space-16);

    justify-content: center;
    padding-left: 0;
  }

  .features-download,
  .roles-download {
    display: none;
  }

  .section-shell--roles {
    --roles-shell-padding-top: var(--space-12);
    --roles-shell-padding-bottom: calc(env(safe-area-inset-bottom) + calc(var(--space-4) * 13));
    --roles-toolbar-height: 90px;
    --roles-stage-breathing-room: var(--space-12);
    --roles-stage-height: min(
      403.2px,
      calc(
        100svh
        - var(--roles-shell-padding-top)
        - var(--roles-shell-padding-bottom)
        - var(--roles-toolbar-height)
        - var(--roles-stage-breathing-room)
      )
    );

    height: 100%;
    padding: var(--roles-shell-padding-top) var(--space-16) var(--roles-shell-padding-bottom);
  }

  .roles-toolbar {
    width: min(100%, 448px);
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-12);
    min-height: 80px;
  }

  .role-filter {
    width: min(100%, 240px);
    min-width: 0;
    height: 48px;
  }

  .role-filter__trigger {
    padding: var(--role-filter-trigger-padding);
  }

  .role-filter__trigger span {
    font-size: var(--role-filter-trigger-font-size);
  }

  .role-filter__trigger img {
    right: var(--role-filter-trigger-icon-right);
    width: var(--role-filter-trigger-icon-width);
  }

  #screen-roles .role-controls {
    display: none;
  }

  .role-control {
    width: 48px;
    height: 22px;
  }

  .role-stage {
    --role-stage-content-shift-y: 0px;
    --role-stage-height-selected: calc(var(--roles-stage-height) * 0.45);
    --role-stage-height-normal: calc(var(--roles-stage-height) * 0.35);
    --role-card-selected-width: min(55.4vw, 70vh, var(--role-stage-height-selected));
    --role-card-width: min(45.5vw, 70vh, var(--role-stage-height-normal));
    --role-card-offset-1: calc(var(--role-card-selected-width) * 1.0368);
    --role-card-offset-2: calc(var(--role-card-selected-width) * 1.8576);

    width: 100%;
    min-width: 100vw;
    overflow: hidden;
    touch-action: none;
    contain: layout paint;
  }

  .role-card {
    transition:
      opacity 320ms ease,
      filter 220ms ease,
      transform 520ms cubic-bezier(0.2, 0.78, 0.22, 1);
  }

  .role-card[data-offset="-3"],
  .role-card[data-offset="3"],
  .role-card[data-offset="-4"],
  .role-card[data-offset="4"] {
    --card-opacity: 0;
    pointer-events: none;
  }

  .screen-roles.is-detail-open {
    overflow-y: auto;
  }

  .role-detail-view {
    --role-detail-small-width: clamp(48px, 10vw, 64.8px);
    --role-detail-small-height: clamp(60px, 12.5vw, 80.8px);
    --role-detail-small-gap: clamp(var(--space-8), 2vw, var(--space-16));
    --role-detail-small-selected-inset: clamp(1.77778px, 0.35vw, 2.4px);
    --role-detail-small-selected-glow-large: clamp(16.59259px, 3.5vw, 22.4px);
    --role-detail-small-selected-glow-small: clamp(9.48149px, 2vw, 12.8px);

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-height: 0;
    overflow: hidden;
    padding: var(--space-16) var(--space-16) calc(env(safe-area-inset-bottom) + var(--space-32));
  }

  .role-detail-view[hidden] {
    display: none;
  }

  .role-detail-toolbar {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: min(100%, 1000px);
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .role-detail-toolbar .role-filter {
    width: min(100%, 240px);
    margin: 0 auto;
  }

  .role-detail-selector {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    column-gap: var(--space-12);
    height: auto;
    margin-top: 0;
  }

  .role-detail-arrow {
    position: static;
    width: 28px;
    height: 38px;
    transform: none;
  }

  .role-detail-arrow:hover,
  .role-detail-arrow:focus-visible {
    transform: translateY(-1px);
  }

  .role-detail-arrow:disabled {
    transform: none;
  }

  .role-detail-small-viewport {
    position: static;
    width: auto;
    height: var(--role-detail-small-height);
  }

  .role-detail-panel {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    width: min(100%, calc(100vw - 32px));
    max-width: none;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    padding: var(--space-16) var(--space-16) var(--space-24);
    box-sizing: border-box;
    transform: none;
  }

  .role-detail-scroll-area {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    padding-right: 3vw;padding-left: 1vw;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .role-detail-card-wrap {
    /* width: min(100%, 152px); */
    max-width: 80%;
    min-width: 35vw;
    align-self: center;
    flex: 0 0 auto;
  }

  .role-detail-close {
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
  }

  .role-detail-content {
    flex: 0 0 auto;
    gap: var(--space-12);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    /* Mobile: only scroll in .role-detail-scroll-area */
    overflow: visible;
    overflow-x: hidden;
    overflow-y: visible !important;
    max-height: none !important;
    overscroll-behavior: auto;
    margin-right: 0;
    padding-top: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .role-detail-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .role-detail-section p,
  .role-detail-related-list {
    padding-left: var(--space-12);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .role-detail-related-link {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .role-detail-section p,
  .role-detail-related-link {
    font-size: var(--font-body-16);
    line-height: 1.72;
  }

  .role-detail-section--related {
    min-height: 0;
  }

  .role-detail-tag {
    width: clamp(120px, 30vw, 142px);
    height: auto;
    aspect-ratio: 142 / 35;
  }

  .section-shell--news {
    --news-shell-padding-top: var(--space-16);
    --news-shell-padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-40));

    min-height: 100%;
    align-items: center;
    padding: var(--news-shell-padding-top) var(--space-12) var(--news-shell-padding-bottom);
  }

  .news-stage {
    --news-stage-height: min(
      832px,
      calc(
        100svh - var(--mobile-header-height) - var(--news-shell-padding-top) -
          var(--news-shell-padding-bottom)
      )
    );
    --news-stage-padding-left: clamp(var(--space-16), 4vw, var(--space-24));
    --news-stage-padding-right: clamp(var(--space-16), 4vw, var(--space-24));
    --news-stage-padding-top: clamp(calc(var(--space-4) * 4), 4vh, var(--space-64));
    --news-stage-padding-bottom: var(--space-12);
    --news-tag-width: min(58vw, 224px);

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    row-gap: var(--space-16);
    width: min(100%, 688px);
    height: 100%;
    align-items: start;
    justify-items: center;
    transform: none;
  }

  .news-paper-surface {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 100%;
  }

  .news-paper-tag {
    right: 8px;
    aspect-ratio: 418 / 162;
  }

  .news-banner {
    display: none;
  }

  .news-content {
    align-self: stretch;
    width: 100%;
    /* height: 100%; */
    height: auto;
    min-height: 0;
    gap: 0;
    padding-top: 0;
  }

  .news-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .news-tab {
    min-width: 0;
    padding: var(--news-tab-padding);
    font-size: var(--news-tab-font-size);
  }

  .news-list-panel {
    flex: 1 1 auto;
    gap: var(--space-12);
    min-height: 0;
    overflow: hidden;
  }

  .news-list-scroll {
    top: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .news-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--news-link-gap);
    min-height: 0;
    padding: var(--news-link-padding);
  }

  .news-list strong {
    font-size: var(--news-item-title-font-size);
    line-height: 1.35;
  }

  .news-item-category,
  .news-list time {
    font-size: var(--news-item-meta-font-size);
  }

  .news-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--news-pagination-gap);
    font-size: var(--news-pagination-font-size);
  }

  .news-page-controls {
    justify-content: center;
    margin: 0 auto;
  }

  .news-page-controls,
  .news-page-numbers {
    gap: var(--space-8);
  }

  .news-page-jump {
    display: none;
  }

  .news-page-button,
  .news-page-input {
    height: var(--news-page-control-height);
    font-size: var(--news-pagination-font-size);
  }

  .news-page-button {
    width: var(--news-page-control-height);
  }

  .news-page-input {
    width: var(--news-page-input-width);
  }

  .section-shell--follow {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--space-16) 0 0;
    scrollbar-width: none;
  }

  .section-shell--follow::-webkit-scrollbar {
    display: none;
  }

  .follow-content {
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
    max-width: 544px;
    margin: 0;
    min-height: 0;
    padding-inline: var(--space-16);
  }

  .follow-title {
    width: min(90vw, 450px);
    min-width: 0;
    flex-shrink: 0;
    margin: 3vh 0 3vh 0;
  }

  .follow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: start;
    align-items: start;
    flex: 0 0 auto;
    gap: var(--space-12) var(--space-8);
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    margin-inline: auto;
  }

  .screen-follow .follow-grid .follow-card:nth-child(n + 5),
  .screen-follow .follow-grid .follow-card:nth-child(n + 5):hover,
  .screen-follow .follow-grid .follow-card:nth-child(n + 5):focus-visible {
    transform: none;
  }

  .follow-card,
  .follow-card:hover,
  .follow-card:focus-visible {
    filter: none;
    transform: translateZ(0);
  }

  .follow-card {
    max-width: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: none;
    perspective: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
    justify-self: stretch;
    padding: var(--space-8) var(--space-8) var(--space-8);
  }

  .follow-card:active {
    filter: none;
    transform: translateZ(0);
  }
  .follow-card:hover {
    filter: none;
    transform: translateZ(0);
  }

  .follow-card__media {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* iOS Safari 旧版本可能不支持 aspect-ratio，给二维码/图标容器一个稳定的正方形高度。 */
  @supports not (aspect-ratio: 1) {
    .follow-card__media {
      height: 0;
      padding-bottom: 100%;
    }

    .follow-card__face {
      height: 100%;
    }
  }

  .follow-card.has-qrcode .follow-card__face {
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .follow-card.has-qrcode .follow-card__face--back {
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .follow-card.has-qrcode.is-qrcode-flipped .follow-card__face--front {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .follow-card.has-qrcode.is-qrcode-flipped .follow-card__face--back {
    opacity: 1;
    visibility: visible;
    /* 翻面后允许长按二维码，呼出系统默认操作栏（保存图片等） */
    pointer-events: auto;
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-user-drag: auto;
  }

  .follow-card[data-follow-qrcode-tap] * {
    pointer-events: none;
  }

  .follow-card[data-follow-qrcode-tap].is-qrcode-flipped {
    -webkit-touch-callout: default;
  }

  .follow-card[data-follow-qrcode-tap].is-qrcode-flipped .follow-card__face--back {
    pointer-events: auto;
  }

  .follow-card[data-follow-qrcode-tap] {
    pointer-events: auto;
    cursor: pointer;
  }

  .follow-card.has-qrcode:hover .follow-card__media,
  .follow-card.has-qrcode:focus-visible .follow-card__media {
    transform: none;
  }

  .follow-card__label {
    margin-top: var(--space-4);
    font-size: var(--font-label-12);
  }

  .follow-copy {
    width: min(100%, 448px);
    margin: 2vh 0;
    padding:0 4vh 0 4vh;
    font-size: clamp(10px, 2vh, 14px);
    line-height: 1.7;
    white-space: normal;
  }

  .game-footer {
    position: relative;
    flex: 0 0 auto;
    padding:
      var(--follow-footer-padding-y)
      max(var(--follow-footer-padding-x), env(safe-area-inset-right))
      calc(var(--follow-footer-padding-y) + env(safe-area-inset-bottom))
      max(var(--follow-footer-padding-x), env(safe-area-inset-left));
  }

  .game-footer__inner {
    width: 100%;
    max-width: 576px;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
  }

  .game-footer__content {
    order: 0;
    width: 100%;
    flex: 0 1 100%;
    flex-basis: 100%;
    align-items: center;
    gap: 0;
  }

  .game-footer__logo,
  .game-footer__links,
  .game-footer__legal,
  .game-footer__age {
    display: none;
  }

  .game-footer__links {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-24);
  }

  .game-footer__legal {
    width: 100%;
    text-align: center;
  }

  .game-footer__legal p {
    white-space: normal;
  }

  .game-footer__record {
    justify-content: center;
    flex-wrap: wrap;
  }

  .game-footer__mobile-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-12);
    width: 100%;
    color: color-mix(in srgb, var(--color-ink-100) 62%, transparent);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
  }

  .game-footer__mobile-legal p {
    margin: 0;
    white-space: nowrap;
  }

  .article-detail-view {
    --article-paper-top: calc(var(--mobile-header-height) + 14px);
    --article-paper-bottom: calc(env(safe-area-inset-bottom) + 22px);
    --article-content-top-space: calc(var(--space-4) * 12);
    --article-content-bottom-space: var(--space-32);
    --article-back-left: 20px;
    --article-back-top: 48px;
    --article-paper-shift-x: 0px;
  }

  .article-detail-back {
    gap: 0;
    line-height: 0;
  }

  .article-detail-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .article-detail-back img {
    width: 47px;
    height: 46px;
  }

  .article-detail-paper {
    width: min(calc(100vw - 32px), 688px);
    min-height: calc(100vh - 384px);
  }

  .article-detail-content {
    width: min(100% - 52px, var(--article-content-width));
  }

  .article-detail-header h1 {
    font-size: clamp(var(--font-body-18), 5vw, var(--font-heading-22));
    line-height: 1.35;
  }

  .article-detail-meta {
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    font-size: var(--font-body-14);
    white-space: normal;
  }

  .article-detail-body,
  .article-detail-related > p,
  .article-detail-related .role-detail-related-link {
    font-size: var(--font-body-16);
  }

  .article-detail-body p {
    /* text-indent: 24px; */
  }

  .article-detail-body table {
    margin: var(--space-16) 0;
  }

  .article-detail-body th,
  .article-detail-body td {
    padding:
      clamp(var(--space-8), 2vw, var(--space-12))
      clamp(var(--space-8), 2.6vw, var(--space-12));
    font-size: var(--font-body-14);
    line-height: 1.45;
  }

  .scroll-hint {
    bottom: max(2px, calc(env(safe-area-inset-bottom) + 2px));
    width: 40px;
  }

  body.is-role-detail-open .scroll-hint {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .ui-debug-trigger {
    right: 12px;
    bottom: 12px;
  }

  .ui-debug-panel {
    top: auto;
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 96px);
    transform: none;
  }
  .follow-grid {
    width: 80%;
  }
}
@media (max-width: 420px) {
  .follow-grid {
    width: 73%;
  }
}
@keyframes mobile-download-click-cue {
  0%,
  21.7%,
  47.9%,
  100% {
    filter: drop-shadow(0 5.6px 13.6px color-mix(in srgb, var(--color-red-1000) 28%, transparent));
    transform: translateX(-50%) scale(1);
  }

  10.9%,
  34.3% {
    filter: drop-shadow(0 7.68px 16.8px color-mix(in srgb, var(--color-gold-300) 38%, transparent));
    transform: translateX(-50%) scale(1.022);
  }
}

@keyframes mobile-download-click-halo {
  0%,
  21.7%,
  47.9%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }

  10.9%,
  34.3% {
    opacity: 0.62;
  }

  19.6%,
  45.7% {
    opacity: 0;
    transform: scale(1.24);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 850px) {
  .mobile-hero-download,
  .mobile-hero-download::after {
    animation: none;
    filter: none;
  }

  .hero-background__image,
  .hero-foreground__image {
    transition: none;
  }
}