:root {
  --color-ink: #070b0a;
  --color-deep: #0b1311;
  --color-panel: #111b18;
  --color-raised: #16221f;
  --color-line: #1c2a26;
  --color-line-strong: #2b3b36;
  --color-line-muted: #3f524c;

  --color-text-faint: #7f918b;
  --color-text-soft: #a3b3ad;
  --color-text-muted: #c4d0cc;
  --color-text: #e3ebe8;
  --color-white: #ffffff;

  --color-jade: #5fb49c;
  --color-jade-bright: #8fd6c0;
  --color-jade-deep: #2f7d69;
  --color-jade-tint: rgba(95, 180, 156, 0.12);
  --color-jade-ring: rgba(95, 180, 156, 0.35);

  --color-gold: #d9b56a;
  --color-gold-tint: rgba(217, 181, 106, 0.12);
  --color-copper: #cc9166;
  --color-copper-tint: rgba(204, 145, 102, 0.12);
  --gradient-gold: linear-gradient(103deg, #ae9357, #fff0cc 40%, #ae9357 70%, rgba(189, 157, 79, 0));
  --gradient-jade: linear-gradient(103deg, #2f7d69, #8fd6c0 45%, #5fb49c 75%, rgba(95, 180, 156, 0));

  --color-gain: #4ade80;
  --color-gain-tint: rgba(74, 222, 128, 0.12);
  --color-loss: #f0616d;
  --color-loss-tint: rgba(240, 97, 109, 0.12);
  --color-flat: #a3b3ad;
  --color-warning: #e8b04b;
  --color-warning-tint: rgba(232, 176, 75, 0.12);

  --level-beginner: var(--color-jade);
  --level-beginner-tint: var(--color-jade-tint);
  --level-intermediate: var(--color-gold);
  --level-intermediate-tint: var(--color-gold-tint);
  --level-advanced: var(--color-copper);
  --level-advanced-tint: var(--color-copper-tint);

  --surface-page: var(--color-ink);
  --surface-card: var(--color-deep);
  --surface-panel: var(--color-panel);
  --surface-raised: var(--color-raised);

  --font-display: 'Playfair Display', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --text-eyebrow: 13px;
  --leading-eyebrow: 1.2;
  --tracking-eyebrow: 0.06em;
  --text-caption: 13px;
  --leading-caption: 1.4;
  --text-small: 14px;
  --leading-small: 1.5;
  --text-body: 16px;
  --leading-body: 1.6;
  --text-reading: 18px;
  --leading-reading: 1.7;
  --text-lead: 20px;
  --leading-lead: 1.5;
  --text-subheading: 22px;
  --leading-subheading: 1.3;
  --text-heading-sm: clamp(28px, 2.4vw + 18px, 36px);
  --leading-heading-sm: 1.2;
  --text-heading: clamp(32px, 3vw + 20px, 48px);
  --leading-heading: 1.15;
  --text-display: clamp(40px, 5vw + 20px, 72px);
  --leading-display: 1.05;
  --tracking-display: 0.01em;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --page-max-width: 1200px;
  --reading-max-width: 70ch;
  --form-max-width: 480px;
  --page-gutter: clamp(16px, 4vw, 32px);
  --section-gap: clamp(64px, 8vw + 24px, 128px);
  --card-padding: 24px;
  --card-gap: 24px;
  --element-gap: 8px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  --border-hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-focus: 0 0 0 3px var(--color-jade-ring);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
}

h4 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

h5,
h6 {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

a {
  color: var(--color-jade);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-jade-bright);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

hr {
  height: 0;
  margin: var(--space-32) 0;
  border: 0;
  border-top: var(--border-hairline);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

:lang(ja) body,
:lang(ja) p,
:lang(ja) li {
  line-height: var(--leading-reading);
}

:lang(ja) h1,
:lang(ja) .eyebrow {
  letter-spacing: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  padding-block: var(--section-gap);
}

.section--band {
  background-color: var(--surface-card);
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.small {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-faint);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn--primary {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.btn--primary:hover {
  color: var(--color-ink);
  background-color: var(--color-jade-bright);
}

.btn--primary:active {
  color: var(--color-white);
  background-color: var(--color-jade-deep);
}

.btn--secondary {
  color: var(--color-jade);
  border-color: var(--color-jade);
}

.btn--secondary:hover {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
}

.btn--ghost {
  color: var(--color-text);
  border-color: var(--color-line-strong);
}

.btn--ghost:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.btn--block {
  display: flex;
  width: 100%;
}

.card {
  padding: var(--card-padding);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
  background-color: var(--surface-raised);
  border-color: var(--color-line-strong);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  background-color: var(--surface-raised);
}

.badge--beginner {
  color: var(--level-beginner);
  background-color: var(--level-beginner-tint);
}

.badge--intermediate {
  color: var(--level-intermediate);
  background-color: var(--level-intermediate-tint);
}

.badge--advanced {
  color: var(--level-advanced);
  background-color: var(--level-advanced-tint);
}

.gain {
  color: var(--color-gain);
}

.loss {
  color: var(--color-loss);
}

.flat {
  color: var(--color-flat);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: var(--form-max-width);
  margin-inline: auto;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.form__input {
  width: 100%;
  padding: var(--space-12) var(--space-20);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea.form__input {
  min-height: 140px;
  border-radius: var(--radius-card);
  resize: vertical;
}

.form__input::placeholder {
  color: var(--color-text-faint);
}

.form__input:focus {
  border-color: var(--color-jade);
  box-shadow: var(--shadow-focus);
}

.form__input.is-invalid {
  border-color: var(--color-loss);
}

.form__error {
  font-size: var(--text-caption);
  color: var(--color-loss);
}

.progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-line);
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-jade);
}

.callout {
  padding: var(--space-16);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
  background-color: var(--color-jade-tint);
}

.callout--example {
  border-left-color: var(--color-gold);
  background-color: var(--color-gold-tint);
}

.callout--risk {
  border-left-color: var(--color-warning);
  background-color: var(--color-warning-tint);
}

.callout--mistake {
  border-left-color: var(--color-loss);
  background-color: var(--color-loss-tint);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-gutter);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--color-white);
  background-color: var(--surface-page);
}

.pre__glow {
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 180, 156, 0.22), transparent 38%),
    radial-gradient(circle at 18% 12%, rgba(95, 180, 156, 0.08), transparent 30%),
    radial-gradient(circle at 84% 88%, rgba(217, 181, 106, 0.1), transparent 32%);
  animation: pre-breathe 5s ease-in-out infinite alternate;
}

.pre__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  animation: pre-drift 8s linear infinite;
}

.pre__tape {
  position: absolute;
  left: -10%;
  right: -10%;
  z-index: -1;
  padding-block: var(--space-12);
  overflow: hidden;
  background-color: rgba(11, 19, 17, 0.75);
  border-block: var(--border-hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.pre__tape--1 {
  top: 12%;
  transform: rotate(-4deg);
}

.pre__tape--2 {
  bottom: 12%;
  transform: rotate(3deg);
}

.pre__track {
  display: flex;
  width: max-content;
  animation: pre-tape 48s linear infinite;
}

.pre__tape--2 .pre__track {
  animation-duration: 60s;
  animation-direction: reverse;
}

.pre__term {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-right: var(--space-40);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-faint);
}

.pre__term::before {
  font-size: 10px;
}

.pre__term.is-up::before {
  content: "\25B2";
  color: var(--color-gain);
}

.pre__term.is-down::before {
  content: "\25BC";
  color: var(--color-loss);
}

.pre__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  animation: pre-rise 700ms ease-out both;
}

.pre__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin-bottom: var(--space-32);
  border-radius: 50%;
  border: var(--border-strong);
  background: radial-gradient(circle at 50% 30%, var(--color-raised), var(--color-deep) 70%);
}

.pre__ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--color-jade-deep) 75%, var(--color-jade-bright));
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: pre-spin 1.4s linear infinite;
}

.pre__ring--slow {
  inset: -26px;
  background: conic-gradient(from 180deg, transparent 0 70%, rgba(217, 181, 106, 0.7));
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation-duration: 3.6s;
  animation-direction: reverse;
}

.pre__wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-jade);
  animation: pre-wave 2.4s ease-out infinite;
}

.pre__pulse {
  width: 78px;
  height: auto;
  overflow: visible;
}

.pre__pulse polyline {
  fill: none;
  stroke: var(--color-jade-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70 200;
  animation: pre-pulse 1.8s linear infinite;
}

.pre__topic {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-jade);
}

.pre__name {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading);
}

.pre__lines {
  position: relative;
  width: min(86vw, 420px);
  height: 1.6em;
  font-size: var(--text-body);
  color: var(--color-text-soft);
}

.pre__lines span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pre-line 7.5s ease-in-out infinite;
}

.pre__lines span:nth-child(2) {
  animation-delay: 2.5s;
}

.pre__lines span:nth-child(3) {
  animation-delay: 5s;
}

.pre__progress {
  width: 180px;
  height: 3px;
  margin-top: var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-line);
}

.pre__progress span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-jade);
  animation: pre-progress 1.4s ease-in-out infinite;
}

:lang(ja) .pre__topic,
:lang(ja) .pre__term {
  letter-spacing: 0;
}

@keyframes pre-breathe {
  from {
    opacity: 0.7;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes pre-drift {
  to {
    background-position: 28px 28px;
  }
}

@keyframes pre-tape {
  to {
    transform: translateX(-50%);
  }
}

@keyframes pre-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pre-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pre-wave {
  from {
    opacity: 0.6;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes pre-pulse {
  from {
    stroke-dashoffset: 270;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pre-line {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  6%,
  28% {
    opacity: 1;
    transform: translateY(0);
  }

  34%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes pre-progress {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(250%);
  }
}

.num {
  font-variant-numeric: tabular-nums;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.is-locked {
  overflow: hidden;
}

.strip {
  position: relative;
  z-index: 950;
  font-size: var(--text-caption);
  color: var(--color-text-soft);
  background-color: var(--surface-card);
  border-bottom: var(--border-hairline);
}

.strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  min-height: 40px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.strip__note {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.strip__note i {
  flex-shrink: 0;
  color: var(--color-warning);
}

.strip__note span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strip__pref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px var(--space-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.strip__pref:hover,
.drop.is-open > .strip__pref {
  color: var(--color-white);
  border-color: var(--color-line-strong);
}

.strip__sep {
  width: 1px;
  height: 12px;
  background-color: var(--color-line-strong);
}

.hd {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: rgba(7, 11, 10, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.hd.is-scrolled {
  background-color: rgba(7, 11, 10, 0.88);
  border-bottom-color: var(--color-line);
}

.hd__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  height: 76px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  transition: height var(--transition-base);
}

.hd.is-scrolled .hd__inner {
  height: 64px;
}

.hd__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--gradient-jade);
  transform: scaleX(var(--hd-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  transition: opacity var(--transition-fast);
}

.brand:hover {
  opacity: 0.85;
}

.brand img {
  width: auto;
  height: 40px;
  transition: height var(--transition-base);
}

.hd.is-scrolled .brand img {
  height: 34px;
}

.hd__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hd__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hd__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--space-16);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast);
}

.hd__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-sm);
  background-color: var(--color-jade);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}

.hd__link:hover,
.hd__link.is-active,
.drop.is-open > .hd__link {
  color: var(--color-white);
}

.hd__link:hover::after,
.drop.is-open > .hd__link::after {
  width: 18px;
}

.hd__link.is-active::after {
  width: calc(100% - 32px);
}

.hd__end {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

.hd__btn {
  padding: 10px var(--space-20);
  font-size: var(--text-small);
}

.hd__credits {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.hd__credits:hover {
  color: var(--color-white);
  border-color: var(--color-jade);
}

.hd__unit {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-soft);
}

.hd__me {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 3px var(--space-12) 3px 3px;
  color: var(--color-text-soft);
  background: transparent;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.hd__me:hover,
.drop.is-open > .hd__me {
  color: var(--color-white);
  border-color: var(--color-jade);
}

.hd__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 16px;
  color: var(--color-text);
  background: transparent;
  border: var(--border-strong);
  border-radius: 50%;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.hd__icon:hover,
.hd__icon[aria-expanded="true"] {
  color: var(--color-white);
  border-color: var(--color-jade);
  background-color: var(--color-jade-tint);
}

.hd__count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-ink);
  background-color: var(--color-jade);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  animation: count-pop 500ms ease-out both;
}

.burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.burger span {
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: width var(--transition-base);
}

.burger span:nth-child(2) {
  width: 70%;
  margin-left: auto;
}

.hd__burger:hover .burger span:nth-child(2) {
  width: 100%;
}

.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-jade-deep), var(--color-jade));
  border-radius: 50%;
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.drop {
  position: relative;
}

.drop__chev {
  font-size: 10px;
  transition: transform var(--transition-base);
}

.drop.is-open > [data-drop-trigger] .drop__chev {
  transform: rotate(180deg);
}

.drop__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  min-width: 260px;
  padding: var(--space-16);
  text-align: left;
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transform-origin: top;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.drop__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

.drop.is-open > .drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.drop__panel--end {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.drop__panel--prefs {
  top: calc(100% + 6px);
  width: 280px;
}

.drop__panel--account {
  width: 300px;
}

.drop__label {
  margin: var(--space-4) var(--space-8) var(--space-8);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.drop__list + .drop__label {
  margin-top: var(--space-16);
}

.drop__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drop__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 10px var(--space-12);
  font-size: var(--text-small);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.drop__row:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.drop__row.is-active {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
}

.drop__tick {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-jade);
}

.drop__icon {
  width: 16px;
  text-align: center;
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
}

.drop__row:hover .drop__icon {
  color: var(--color-jade);
}

.drop__row--out {
  margin-top: var(--space-8);
  padding-top: var(--space-12);
  border-top: var(--border-hairline);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.drop__row--out:hover,
.drop__row--out:hover .drop__icon {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
}

.drop__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-inline: var(--space-4);
}

.drop__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.drop__chip:hover {
  color: var(--color-white);
  border-color: var(--color-line-muted);
}

.drop__chip.is-active {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border-color: var(--color-jade);
}

.drop__who {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-4) var(--space-16);
  border-bottom: var(--border-hairline);
}

.drop__eyebrow {
  display: block;
  font-size: 12px;
  color: var(--color-text-faint);
}

.drop__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.drop__wallet {
  display: block;
  margin: var(--space-12) 0;
  padding: 14px var(--space-16);
  background: linear-gradient(135deg, var(--color-jade-tint), transparent);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.drop__wallet:hover {
  border-color: var(--color-jade);
}

.drop__amount {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.drop__amount .num {
  font-size: var(--text-lead);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.drop--mega {
  position: static;
}

.mega {
  left: 0;
  right: 0;
  top: calc(100% - 4px);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-24);
  width: auto;
  margin-inline: var(--page-gutter);
  padding: var(--space-24);
}

.mega__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(95, 180, 156, 0.18), transparent 60%),
    var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.mega__title {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-subheading);
  color: var(--color-white);
}

.mega__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.mega__all {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--text-small);
  white-space: normal;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-4) var(--space-12);
}

.drop.is-open .mega__grid li {
  animation: mega-in 400ms ease-out both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.mega__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-12) 14px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.mega__link:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
  border-color: var(--color-line);
}

.mega__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
}

.mega__link:hover .mega__num {
  color: var(--color-jade);
}

.mega__name {
  flex: 1;
  min-width: 0;
}

.mega__go {
  font-size: 12px;
  color: var(--color-jade);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.mega__link:hover .mega__go {
  opacity: 1;
  transform: translateX(0);
}

.mega__none {
  align-self: center;
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(7, 11, 10, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.veil.is-open {
  opacity: 1;
}

.sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  overflow: hidden;
  background-color: var(--surface-card);
  border-left: var(--border-hairline);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 380ms;
}

.sheet::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 180, 156, 0.16), transparent 70%);
  pointer-events: none;
}

.sheet--menu {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: var(--border-hairline);
  transform: translateX(-100%);
}

.sheet--menu::before {
  right: auto;
  left: -80px;
}

.sheet.is-open {
  visibility: visible;
  transform: translateX(0);
}

.sheet__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border-bottom: var(--border-hairline);
}

.sheet__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

.sheet__icon {
  font-size: 16px;
  color: var(--color-jade);
}

.sheet__qty {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border-radius: var(--radius-pill);
}

.sheet__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-soft);
  background: transparent;
  border: var(--border-strong);
  border-radius: 50%;
  transition: transform var(--transition-base), color var(--transition-fast), border-color var(--transition-fast);
}

.sheet__close:hover {
  color: var(--color-white);
  border-color: var(--color-jade);
  transform: rotate(90deg);
}

.sheet__body {
  position: relative;
  flex: 1;
  padding: var(--space-20) var(--space-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__foot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-20) var(--space-24);
  background-color: var(--surface-panel);
  border-top: var(--border-hairline);
}

.bag__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.bag__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: var(--space-12);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast);
}

.bag__item:hover {
  border-color: var(--color-line-strong);
}

.sheet.is-open .bag__item {
  animation: bag-in 450ms ease-out both;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}

.bag__img {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background-color: var(--surface-raised);
  border-radius: var(--radius-md);
}

.bag__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bag__img--credits {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--color-jade);
  background: radial-gradient(circle at 50% 30%, rgba(95, 180, 156, 0.25), var(--color-jade-tint));
}

.bag__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.bag__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bag__meta {
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.bag__price {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.bag__remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--color-text-faint);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.bag__remove:hover {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
}

.bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  padding-block: var(--space-48);
  text-align: center;
}

.bag__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  font-size: 28px;
  color: var(--color-jade);
  background: radial-gradient(circle at 50% 30%, var(--color-raised), var(--color-deep) 70%);
  border: var(--border-strong);
  border-radius: 50%;
}

.bag__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--color-jade-deep) 80%, var(--color-jade-bright));
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: pre-spin 3s linear infinite;
}

.bag__empty-text {
  max-width: 32ch;
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.bag__sum {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
}

.bag__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}

.bag__row dt {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.bag__row dd {
  margin: 0;
}

.bag__row--muted {
  padding-bottom: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-soft);
  border-bottom: var(--border-hairline);
}

.bag__total {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

.bag__total small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.bag__continue {
  padding: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-soft);
  background: transparent;
  border: 0;
  transition: color var(--transition-fast);
}

.bag__continue:hover {
  color: var(--color-jade-bright);
}

.menu__user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-20);
  padding: var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.menu__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.menu__credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--color-jade-bright);
}

.menu__list > li {
  border-bottom: var(--border-hairline);
}

.sheet.is-open .menu__list > li {
  animation: bag-in 450ms ease-out both;
}

.sheet.is-open .menu__list > li:nth-child(2) {
  animation-delay: 60ms;
}

.sheet.is-open .menu__list > li:nth-child(3) {
  animation-delay: 120ms;
}

.sheet.is-open .menu__list > li:nth-child(4) {
  animation-delay: 180ms;
}

.sheet.is-open .menu__list > li:nth-child(5) {
  animation-delay: 240ms;
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-4);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-fast);
}

.menu__link::-webkit-details-marker {
  display: none;
}

.menu__link:hover {
  color: var(--color-jade-bright);
}

.menu__link.is-active {
  color: var(--color-jade);
}

.menu__chev {
  font-size: 12px;
  color: var(--color-text-faint);
  transition: transform var(--transition-base);
}

.menu__acc[open] .menu__chev {
  transform: rotate(180deg);
}

.menu__subs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-12);
}

.menu__subs a {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 10px var(--space-8);
  font-size: 15px;
  color: var(--color-text-soft);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu__subs a:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.menu__subs a.menu__all {
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade);
}

.menu__none {
  padding: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.menu__prefs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-24);
}

.menu__prefs .drop__label {
  margin: var(--space-8) 0 0;
}

.menu__prefs .drop__chips {
  padding-inline: 0;
}

@keyframes count-pop {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes mega-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bag-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 1200px) {
  .is-mobile {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .is-desktop {
    display: none !important;
  }

  .hd__inner {
    height: 64px;
  }

  .strip__inner {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .brand img {
    height: 32px;
  }

  .hd__end {
    gap: var(--space-8);
  }

  .hd__icon {
    width: 40px;
    height: 40px;
  }

  .sheet__top,
  .sheet__body,
  .sheet__foot {
    padding-inline: var(--space-16);
  }
}

.ft {
  position: relative;
  margin-top: var(--section-gap);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface-page);
  border-top: var(--border-hairline);
}

.ft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(95, 180, 156, 0.1), transparent 34%),
    radial-gradient(circle at 92% 70%, rgba(217, 181, 106, 0.06), transparent 30%);
  pointer-events: none;
}

.ft__tape {
  padding-block: var(--space-12);
  overflow: hidden;
  background-color: var(--surface-card);
  border-bottom: var(--border-hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ft__track {
  display: flex;
  width: max-content;
  animation: pre-tape 56s linear infinite;
}

.ft__tape:hover .ft__track {
  animation-play-state: paused;
}

.ft__wrap {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-64) var(--page-gutter) var(--space-48);
}

.ft__news {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-48);
  overflow: hidden;
  background: radial-gradient(circle at 100% 0%, rgba(95, 180, 156, 0.2), transparent 55%), var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.ft__news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  pointer-events: none;
}

.ft__news > * {
  position: relative;
}

.ft__news-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ft__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.ft__lead {
  max-width: 52ch;
  color: var(--color-text-muted);
}

.ft__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px;
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ft__form:focus-within {
  border-color: var(--color-jade);
  box-shadow: var(--shadow-focus);
}

.ft__form-icon {
  margin-left: var(--space-16);
  color: var(--color-text-faint);
}

.ft__input {
  flex: 1;
  min-width: 0;
  padding: 10px var(--space-4);
  color: var(--color-text);
  background: transparent;
  border: 0;
}

.ft__input:focus {
  box-shadow: none;
}

.ft__input::placeholder {
  color: var(--color-text-faint);
}

.ft__send {
  flex-shrink: 0;
}

.ft__send i {
  transition: transform var(--transition-fast);
}

.ft__send:hover i {
  transform: translateX(3px);
}

.ft__ok {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-left: var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-jade-bright);
  animation: mega-in 350ms ease-out both;
}

.ft__ok[hidden] {
  display: none;
}

.ft__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  padding-block: var(--space-64) var(--space-48);
}

.ft__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.ft__logo img {
  width: auto;
  height: 40px;
}

.ft__about {
  max-width: 36ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.ft__label {
  margin-bottom: var(--space-20);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.ft__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ft__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-text-soft);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.ft__link::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: var(--radius-sm);
  background-color: var(--color-jade);
  transition: width var(--transition-base);
}

.ft__link:hover {
  color: var(--color-white);
}

.ft__link:hover::before {
  width: 12px;
}

.ft__company {
  padding-block: var(--space-32);
  border-top: var(--border-hairline);
}

.ft__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
  margin: 0;
}

.ft__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-20);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ft__fact:hover {
  background-color: var(--surface-raised);
  border-color: var(--color-line-strong);
}

.ft__well {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 16px;
  color: var(--color-jade);
  background-color: var(--surface-panel);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-ring);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ft__fact:hover .ft__well {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.ft__fact dt {
  margin-bottom: var(--space-4);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.ft__fact dd {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.ft__fact dd a {
  color: var(--color-text);
}

.ft__fact dd a:hover {
  color: var(--color-jade-bright);
}

.ft__risk {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  font-size: var(--text-caption);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
  background-color: var(--color-warning-tint);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
}

.ft__risk-icon {
  margin-top: 3px;
  color: var(--color-warning);
}

.ft__risk strong {
  margin-right: var(--space-4);
  color: var(--color-white);
}

.ft__end {
  background-color: var(--surface-card);
  border-top: var(--border-hairline);
}

.ft__end-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) var(--space-24);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-20) var(--page-gutter);
}

.ft__copy {
  font-size: var(--text-caption);
  color: var(--color-text-faint);
}

.ft__copy a {
  color: var(--color-text-soft);
}

.ft__copy a:hover {
  color: var(--color-jade-bright);
}

.ft__langs {
  display: inline-flex;
  padding: 3px;
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.ft__lang {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ft__lang:hover {
  color: var(--color-white);
}

.ft__lang.is-active {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.ft__pay img {
  width: auto;
  height: 28px;
}

[data-ft] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-ft] [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-ft] .ft__main > [data-reveal]:nth-child(2) {
  transition-delay: 80ms;
}

[data-ft] .ft__main > [data-reveal]:nth-child(3) {
  transition-delay: 160ms;
}

.totop {
  position: fixed;
  right: var(--page-gutter);
  bottom: var(--space-24);
  z-index: 800;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--color-white);
  background-color: var(--surface-panel);
  border: 0;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-fast);
}

.totop.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.totop:hover {
  background-color: var(--surface-raised);
}

.totop i {
  position: relative;
  font-size: 15px;
  transition: transform var(--transition-fast);
}

.totop:hover i {
  transform: translateY(-3px);
}

.totop__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-jade) var(--p, 0%), var(--color-line-strong) 0);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

@media (max-width: 1023.98px) {
  .ft__news {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    padding: var(--space-32);
  }

  .ft__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-32);
  }

  .ft__brand {
    grid-column: 1 / -1;
  }

  .ft__facts {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 575.98px) {
  .ft__wrap {
    padding-top: var(--space-40);
  }

  .ft__news {
    padding: var(--space-24);
  }

  .ft__form {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .ft__form:focus-within {
    box-shadow: none;
  }

  .ft__form-icon {
    display: none;
  }

  .ft__input {
    padding: var(--space-12) var(--space-20);
    background-color: var(--surface-panel);
    border: var(--border-strong);
    border-radius: var(--radius-pill);
  }

  .ft__input:focus {
    border-color: var(--color-jade);
    box-shadow: var(--shadow-focus);
  }

  .ft__send {
    width: 100%;
  }

  .ft__main {
    grid-template-columns: 1fr;
  }

  .ft__end-in {
    flex-direction: column;
    text-align: center;
  }

  .totop {
    width: 46px;
    height: 46px;
    bottom: var(--space-16);
  }
}

.ck {
  position: fixed;
  left: var(--page-gutter);
  bottom: var(--space-24);
  z-index: 850;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - (var(--page-gutter) * 2)));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: radial-gradient(circle at 0% 0%, rgba(95, 180, 156, 0.16), transparent 55%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  animation: ck-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
  transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ck.is-open {
  width: min(560px, calc(100vw - (var(--page-gutter) * 2)));
}

.ck__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
}

.ck__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ck__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--color-jade);
  background: radial-gradient(circle at 50% 30%, var(--color-raised), var(--color-deep) 70%);
  border: var(--border-strong);
  border-radius: 50%;
}

.ck__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--color-jade-deep) 80%, var(--color-jade-bright));
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: pre-spin 4s linear infinite;
}

.ck__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

.ck__intro {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.ck__intro a {
  font-weight: var(--font-weight-medium);
  color: var(--color-jade);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ck__intro a:hover {
  color: var(--color-jade-bright);
}

.ck__acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ck__btn {
  margin: 0;
}

.ck__btn__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.ck__btn--soft .ck__btn__link {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-line-strong);
}

.ck__btn--soft .ck__btn__link:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.ck__btn--main .ck__btn__link {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.ck__btn--main .ck__btn__link:hover {
  background-color: var(--color-jade-bright);
}

.ck__btn--main .ck__btn__link:active {
  color: var(--color-white);
  background-color: var(--color-jade-deep);
}

.ck__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-8);
  padding: 6px var(--space-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast);
}

.ck__more:hover,
.ck__more[aria-expanded="true"] {
  color: var(--color-jade-bright);
}

.ck__chev {
  font-size: 10px;
  transition: transform var(--transition-base);
}

[aria-expanded="true"] > .ck__chev {
  transform: rotate(180deg);
}

.ck__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ck__panel.is-open {
  grid-template-rows: 1fr;
}

.ck__panel-in {
  min-height: 0;
  overflow: hidden;
}

#ck-consent-prefs {
  min-height: 0;
}

#ck-consent-prefs.is-open {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: var(--border-hairline);
}

#ck-consent-prefs > .ck__panel-in {
  overflow: visible;
}

.ck__prefs {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24) var(--space-24);
}

.ck__cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ck__cat {
  padding: var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.ck__cat:hover {
  border-color: var(--color-line-strong);
}

.ck__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  cursor: pointer;
}

.ck__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.ck__lock {
  font-size: 11px;
  color: var(--color-text-faint);
}

.swt {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  background-color: var(--color-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transition-base);
}

.swt::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-text-soft);
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.swt:checked {
  background-color: var(--color-jade);
}

.swt:checked::after {
  background-color: var(--color-ink);
  transform: translateX(20px);
}

.swt:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ck__info {
  margin-top: var(--space-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-soft);
}

.ck__details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade);
  background: transparent;
  border: 0;
}

.ck__details:hover {
  color: var(--color-jade-bright);
}

.ck__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-12);
}

.ck__item {
  padding: 10px var(--space-12);
  background-color: var(--surface-card);
  border-left: 2px solid var(--color-jade);
  border-radius: var(--radius-sm);
}

.ck__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.ck__cookie {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.ck__dur {
  flex-shrink: 0;
  padding: 2px var(--space-8);
  font-size: 11px;
  color: var(--color-text-soft);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill);
}

.ck__desc {
  margin-top: var(--space-4);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-faint);
}

@keyframes ck-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 575.98px) {
  .ck,
  .ck.is-open {
    left: var(--space-12);
    right: var(--space-12);
    bottom: var(--space-12);
    width: auto;
  }

  .ck__bar {
    gap: 14px;
    padding: var(--space-20);
  }

  .ck__prefs {
    padding: var(--space-16) var(--space-20) var(--space-20);
  }
}

@media (max-width: 359.98px) {
  .ck__acts {
    grid-template-columns: 1fr;
  }
}

.notes {
  position: fixed;
  top: var(--notes-top, 128px);
  left: 50%;
  z-index: 890;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: min(520px, calc(100vw - (var(--page-gutter) * 2)));
  transform: translateX(-50%);
  transition: top var(--transition-base);
  pointer-events: none;
}

.note {
  --note-tone: var(--color-jade);
  --note-tint: var(--color-jade-tint);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
  overflow: hidden;
  background: radial-gradient(circle at 0% 50%, var(--note-tint), transparent 60%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  pointer-events: auto;
  animation: note-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.note::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: var(--note-tone);
}

.note--error {
  --note-tone: var(--color-loss);
  --note-tint: var(--color-loss-tint);
}

.note.is-hiding {
  animation: note-out 320ms ease-in both;
}

.note__well {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--note-tone);
  background-color: var(--note-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.note__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--note-tone);
  animation: pre-wave 2.2s ease-out infinite;
}

.note__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.note__label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--note-tone);
}

.note__msg {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.note__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 13px;
  color: var(--color-text-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-base);
}

.note__close:hover {
  color: var(--color-white);
  border-color: var(--color-line-strong);
  transform: rotate(90deg);
}

.note__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gradient-jade);
  transform-origin: left;
  animation: note-timer 5s linear forwards;
}

.note.is-paused .note__timer {
  animation-play-state: paused;
}

:lang(ja) .note__label {
  letter-spacing: 0;
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes note-out {
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
}

@keyframes note-timer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (max-width: 575.98px) {
  .notes {
    width: calc(100vw - (var(--space-12) * 2));
  }

  .note {
    padding: 14px 14px 14px var(--space-16);
  }
}

.bn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface-card);
  border-bottom: var(--border-hairline);
}

.bn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-jade) 30%, var(--color-gold) 70%, transparent);
  opacity: 0.6;
}

.bn__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bn__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 20%, rgba(95, 180, 156, 0.18), transparent 38%),
    radial-gradient(circle at 88% 30%, rgba(217, 181, 106, 0.1), transparent 34%);
}

.bn__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
  opacity: 0.7;
}

.bn__chart {
  position: absolute;
  right: max(var(--page-gutter), calc((100vw - var(--page-max-width)) / 2));
  bottom: 0;
  width: min(560px, 48vw);
  height: auto;
  overflow: visible;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}

.bn__grid {
  fill: none;
  stroke: var(--color-line-muted);
  stroke-opacity: 0.5;
  stroke-dasharray: 3 5;
}

.bn__candle {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bn-candle 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(200ms + var(--i, 0) * 70ms);
}

.bn__candle line {
  stroke-width: 2;
  stroke-linecap: round;
}

.bn__candle.is-up line {
  stroke: var(--color-gain);
}

.bn__candle.is-up rect {
  fill: var(--color-gain);
}

.bn__candle.is-down line {
  stroke: var(--color-loss);
}

.bn__candle.is-down rect {
  fill: var(--color-loss);
}

.bn__line {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: bn-line 1.6s ease-out 900ms forwards;
}

.bn__dot {
  fill: var(--color-jade);
  stroke: var(--color-ink);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: count-pop 500ms ease-out 2.3s both;
}

.bn__wave {
  fill: none;
  stroke: var(--color-jade);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pre-wave 2.2s ease-out 2.5s infinite;
}

.bn__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-96) var(--page-gutter) var(--space-64);
}

.bn--compact .bn__inner {
  padding-block: var(--space-32);
}

.bn--compact .bn__chart {
  width: min(360px, 40vw);
  opacity: 0.35;
}

.bn__title {
  max-width: 18ch;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  animation: mega-in 700ms ease-out both;
}

.bn__bar {
  width: 72px;
  height: 3px;
  margin-top: calc(var(--space-4) * -1);
  border-radius: var(--radius-pill);
  background: var(--gradient-jade);
  transform-origin: left;
  animation: bn-bar 800ms ease-out 300ms both;
}

.bn__nav {
  max-width: 100%;
  animation: mega-in 700ms ease-out 150ms both;
}

.bn__crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) 10px;
  max-width: 100%;
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-small);
  background-color: rgba(17, 27, 24, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.bn__crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bn__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-soft);
  transition: color var(--transition-fast);
}

.bn__link i {
  font-size: 12px;
  color: var(--color-jade);
}

.bn__link:hover {
  color: var(--color-white);
}

.bn__sep {
  font-size: 9px;
  color: var(--color-text-faint);
}

.bn__current {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  color: var(--color-jade-bright);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes bn-candle {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes bn-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bn-bar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (max-width: 767.98px) {
  .bn__inner {
    padding-block: var(--space-64) var(--space-40);
  }

  .bn__chart {
    width: 90vw;
    opacity: 0.25;
  }

  .bn--compact .bn__chart {
    width: 70vw;
    opacity: 0.2;
  }

  .bn__crumbs {
    padding: 6px 14px;
    font-size: var(--text-caption);
  }

  .bn__current {
    max-width: 22ch;
  }
}

.auth {
  width: 100%;
  max-width: calc(1040px + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-64) var(--page-gutter) 0;
}

.auth__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  animation: mega-in 600ms ease-out both;
}

.auth__side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-48) var(--space-40);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 10%, rgba(95, 180, 156, 0.22), transparent 50%),
    radial-gradient(circle at 90% 100%, rgba(217, 181, 106, 0.1), transparent 45%),
    var(--surface-page);
  border-right: var(--border-hairline);
}

.auth__side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  opacity: 0.8;
}

.auth__orb {
  width: 88px;
  height: 88px;
  margin: var(--space-16) 0 var(--space-24) var(--space-16);
}

.auth__orb .pre__ring {
  inset: -9px;
}

.auth__orb .pre__ring--slow {
  inset: -19px;
}

.auth__orb .pre__pulse {
  width: 54px;
}

.auth__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.auth__lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.auth__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--space-8);
  padding-top: var(--space-24);
  width: 100%;
  border-top: var(--border-hairline);
}

.auth__points li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-small);
  color: var(--color-text);
}

.auth__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 11px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.auth__points--steps .auth__mark {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
}

.auth__points--steps li {
  position: relative;
}

.auth__points--steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  width: 2px;
  height: 12px;
  background-color: var(--color-line-strong);
}

.auth__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-40);
}

.auth__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.auth__tab {
  position: relative;
  z-index: 1;
  padding: 10px var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.auth__tab:hover {
  color: var(--color-white);
}

.auth__tab.is-active {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.auth__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.auth__back i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.auth__back:hover {
  color: var(--color-white);
  border-color: var(--color-jade);
}

.auth__back:hover i {
  transform: translateX(-3px);
}

.auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.fld {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fld__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.fld__box {
  position: relative;
  display: flex;
  align-items: center;
}

.fld__icon {
  position: absolute;
  left: var(--space-20);
  font-size: 14px;
  color: var(--color-text-faint);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.fld__input {
  width: 100%;
  min-height: 50px;
  padding: var(--space-12) var(--space-20) var(--space-12) 48px;
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.fld__input::placeholder {
  color: var(--color-text-faint);
}

.fld__input:hover {
  border-color: var(--color-line-muted);
}

.fld__input:focus {
  border-color: var(--color-jade);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-focus);
}

.fld__box:focus-within .fld__icon {
  color: var(--color-jade);
}

.fld--pass .fld__input {
  padding-right: 56px;
}

.fld__eye {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-faint);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.fld__eye:hover,
.fld__eye[aria-pressed="true"] {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
}

.fld__input.is-invalid,
.cap.is-invalid .fld__input {
  border-color: var(--color-loss);
}

.fld__input.is-invalid:focus,
.cap.is-invalid .fld__input:focus {
  box-shadow: 0 0 0 3px var(--color-loss-tint);
}

.fld__err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-left: var(--space-20);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-loss);
}

.fld__err i {
  margin-top: 2px;
}

.cap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cap .fld__box {
  flex: 1;
  min-width: 0;
}

.cap__img {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 var(--space-12);
  overflow: hidden;
  background-color: var(--color-white);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast);
}

.cap__img:hover {
  border-color: var(--color-jade);
}

.cap__img img {
  display: block;
  width: 150px !important;
  height: 42px !important;
  object-fit: contain;
}

.auth__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.auth__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-small);
  color: var(--color-text-soft);
  cursor: pointer;
}

.tick {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.tick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tick input:checked {
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.tick i {
  position: relative;
  font-size: 10px;
  color: var(--color-ink);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tick input:checked + i {
  opacity: 1;
  transform: scale(1);
}

.auth__link {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.auth__submit {
  min-height: 50px;
  margin-top: var(--space-4);
}

.auth__submit i {
  transition: transform var(--transition-fast);
}

.auth__submit:hover i {
  transform: translateX(3px);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-caption);
  color: var(--color-text-faint);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-line);
}

.auth__divider + .btn {
  margin-top: calc(var(--space-12) * -1);
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px var(--space-16);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  border-left: 3px solid;
  border-radius: var(--radius-md);
}

.msg i {
  margin-top: 3px;
}

.msg--error {
  color: var(--color-text);
  background-color: var(--color-loss-tint);
  border-left-color: var(--color-loss);
}

.msg--error i {
  color: var(--color-loss);
}

.msg--ok {
  color: var(--color-text);
  background-color: var(--color-jade-tint);
  border-left-color: var(--color-jade);
}

.msg--ok i {
  color: var(--color-jade);
}

@media (max-width: 991.98px) {
  .auth {
    max-width: calc(var(--form-max-width) + 120px + (var(--page-gutter) * 2));
    padding-top: var(--space-40);
  }

  .auth__shell {
    grid-template-columns: 1fr;
  }

  .auth__side {
    padding: var(--space-32);
    border-right: 0;
    border-bottom: var(--border-hairline);
  }

  .auth__orb {
    display: none;
  }

  .auth__main {
    padding: var(--space-32);
  }
}

@media (max-width: 575.98px) {
  .auth {
    padding-top: var(--space-24);
  }

  .auth__side,
  .auth__main {
    padding: var(--space-24) var(--space-20);
  }

  .auth__points {
    padding-top: var(--space-16);
  }

  .cap__img {
    padding: 0 var(--space-8);
  }

  .cap__img img {
    width: 110px !important;
    height: 36px !important;
  }
}

.contact .auth__shell {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.contact__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: var(--space-8);
}

.contact__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--space-16);
  background-color: rgba(11, 19, 17, 0.8);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.contact__row:hover {
  background-color: var(--surface-raised);
  border-color: var(--color-line-strong);
  transform: translateX(4px);
}

.contact__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-size: 15px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.contact__row:hover .contact__icon {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact__label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.contact__value {
  font-size: var(--text-small);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

a.contact__value:hover {
  color: var(--color-jade-bright);
}

.contact__topics {
  width: 100%;
  margin-top: var(--space-8);
  padding-top: var(--space-24);
  border-top: var(--border-hairline);
}

.contact__topics-title {
  margin-bottom: var(--space-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.contact__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.contact__chips li {
  padding: 6px var(--space-12);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.contact__chips li:hover {
  color: var(--color-jade-bright);
  border-color: var(--color-jade-ring);
}

.fld__box--area {
  align-items: flex-start;
}

.fld__box--area .fld__icon {
  top: 17px;
}

.fld__area {
  min-height: 150px;
  padding-top: 14px;
  line-height: var(--leading-body);
  border-radius: var(--radius-card);
  resize: vertical;
}

:lang(ja) .contact__label {
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .contact .auth__shell {
    grid-template-columns: 1fr;
  }
}

.co {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.steps {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 640px;
  margin: 0 auto var(--space-48);
  padding: var(--space-12) var(--space-20);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.steps__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.steps__no {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-faint);
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: 50%;
}

.steps__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-faint);
}

.steps__item.is-done .steps__no {
  color: var(--color-ink);
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.steps__item.is-done .steps__label {
  color: var(--color-text-soft);
}

.steps__item.is-active .steps__no {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border-color: var(--color-jade);
}

.steps__item.is-active .steps__no::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--color-jade);
  animation: pre-wave 2.2s ease-out infinite;
}

.steps__item.is-active .steps__label {
  color: var(--color-white);
}

.steps__line {
  flex: 1;
  min-width: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-line-strong);
}

.steps__line.is-done {
  background: var(--gradient-jade);
}

.co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: var(--space-32);
}

.co__panels {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.co__panels::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-jade), var(--color-line-strong) 40%, var(--color-line) 100%);
}

.panel {
  position: relative;
  margin-left: 68px;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base);
}

.panel:focus-within {
  border-color: var(--color-line-strong);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24);
  border-bottom: var(--border-hairline);
}

.panel__num {
  position: absolute;
  top: 14px;
  left: -68px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--color-jade);
  background-color: var(--surface-page);
  border: var(--border-strong);
  border-radius: 50%;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.panel:focus-within .panel__num {
  color: var(--color-ink);
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.panel__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.panel__icon {
  display: grid;
  place-items: center;
  order: 3;
  width: 36px;
  height: 36px;
  margin-left: auto;
  font-size: 14px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.panel__body {
  padding: var(--space-24);
}

.co__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.co__req {
  color: var(--color-jade);
}

.fld__select {
  padding-right: 48px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fld__select option {
  color: var(--color-text);
  background-color: var(--surface-panel);
}

.fld__caret {
  position: absolute;
  right: var(--space-20);
  font-size: 11px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.fld__box:focus-within .fld__caret {
  color: var(--color-jade);
}

.expiry {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.expiry .fld__input {
  flex: 1;
  min-width: 0;
  padding-left: var(--space-20);
  text-align: center;
}

.expiry__sep {
  font-size: 20px;
  color: var(--color-text-faint);
}

.agree {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agree > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: 14px var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.agree__row:hover {
  border-color: var(--color-line-strong);
}

.agree__row:has(input:checked) {
  background-color: var(--color-jade-tint);
  border-color: var(--color-jade-ring);
}

.agree__row .tick {
  margin-top: 1px;
}

.agree__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text);
}

.agree__text a {
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.co__facts {
  margin-top: var(--space-24);
  padding: 18px var(--space-20);
  background-color: var(--color-jade-tint);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
}

.co__facts-title {
  margin-bottom: 10px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.co__facts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co__facts-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.co__facts-list i {
  width: 16px;
  margin-top: 3px;
  color: var(--color-jade);
  text-align: center;
}

.co__captcha {
  margin-top: var(--space-24);
}

.co__rail {
  position: sticky;
  top: 96px;
}

.sum {
  overflow: hidden;
  background: radial-gradient(circle at 100% 0%, rgba(95, 180, 156, 0.18), transparent 55%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.sum__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24);
  border-bottom: var(--border-hairline);
}

.sum__badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.sum__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.sum__body {
  padding: var(--space-20) var(--space-24);
}

.sum__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) 14px;
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.sum__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--text-small);
  color: var(--color-text);
}

.sum__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 12px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.sum__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px dashed var(--color-line-strong);
}

.sum__total span {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.sum__total strong {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.sum__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-24) var(--space-24);
}

.co__bill {
  padding: 14px var(--space-16);
  font-size: var(--text-small);
  line-height: 2;
  color: var(--color-text-soft);
  background-color: var(--surface-panel);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
}

.co__bill-img {
  display: inline-block;
  width: auto;
  height: 26px;
  margin-left: var(--space-4);
  padding: 2px 6px;
  vertical-align: middle;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}

.sum__pay {
  min-height: 52px;
  font-size: var(--text-body);
}

.sum__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.sum__trust i {
  color: var(--color-jade);
}

.sum__methods {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 32px;
  margin: var(--space-4) auto 0;
}

@media (max-width: 1099.98px) {
  .co__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-24);
  }
}

@media (max-width: 991.98px) {
  .co__grid {
    grid-template-columns: 1fr;
  }

  .co__rail {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .co {
    padding-top: var(--space-32);
  }

  .steps {
    margin-bottom: var(--space-32);
    padding: 10px 14px;
    border-radius: var(--radius-card);
  }

  .steps__label {
    font-size: 12px;
  }

  .co__panels::before {
    display: none;
  }

  .panel {
    margin-left: 0;
  }

  .panel__num {
    position: static;
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .panel__head,
  .panel__body {
    padding-inline: var(--space-16);
  }

  .sum__head,
  .sum__body {
    padding-inline: var(--space-20);
  }

  .sum__foot {
    padding-inline: var(--space-20);
  }
}

@media (max-width: 479.98px) {
  .steps__item:not(.is-active) .steps__label {
    display: none;
  }
}

.rs {
  --rs-tone: var(--color-jade);
  --rs-tint: var(--color-jade-tint);
  width: 100%;
  max-width: calc(1040px + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.rs--failed {
  --rs-tone: var(--color-loss);
  --rs-tint: var(--color-loss-tint);
}

.steps__item.is-failed .steps__no {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
  border-color: var(--color-loss);
}

.steps__item.is-failed .steps__label {
  color: var(--color-white);
}

.rs__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-48) var(--space-32);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--rs-tint), transparent 60%), var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  animation: mega-in 600ms ease-out both;
}

.rs__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 10%, transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 20%, #000 10%, transparent 60%);
}

.rs__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: var(--space-12);
}

.rs__wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rs-tone);
  opacity: 0;
  animation: pre-wave 2.6s ease-out 900ms infinite;
}

.rs__wave--late {
  animation-delay: 2.2s;
}

.rs__mark {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rs__circle {
  fill: var(--rs-tint);
  stroke: var(--rs-tone);
  stroke-width: 2;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: rs-draw 700ms ease-out 200ms forwards;
}

.rs__draw {
  fill: none;
  stroke: var(--rs-tone);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: rs-draw 450ms ease-out 800ms forwards;
}

.rs__title {
  max-width: 20ch;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.rs__msg {
  max-width: 56ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.rs__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.rs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-24);
  margin-top: var(--space-24);
}

.rs__grid--single {
  grid-template-columns: 1fr;
}

.rs__card {
  padding: var(--space-32);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  animation: mega-in 600ms ease-out 200ms both;
}

.rs__head {
  margin-bottom: var(--space-24);
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-subheading);
}

.rs__flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.rs__flow::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg, var(--rs-tone), var(--color-line) 90%);
}

.rs__flow li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.rs__flow li > span:last-child {
  padding-top: 10px;
}

.rs__dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--rs-tone);
  background-color: var(--surface-panel);
  border: 1px solid var(--rs-tone);
  border-radius: 50%;
}

.rs__ticket {
  position: relative;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  animation: mega-in 600ms ease-out 100ms both;
}

.rs__ticket-top {
  padding: var(--space-32) var(--space-32) var(--space-24);
  background: radial-gradient(circle at 0% 0%, var(--color-jade-tint), transparent 70%);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.rs__label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.rs__number {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.rs__tear {
  position: relative;
  height: 24px;
}

.rs__tear::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-24);
  right: var(--space-24);
  border-top: 2px dashed var(--color-line-strong);
}

.rs__tear::after {
  content: "";
  position: absolute;
  inset: 0 -1px;
  background:
    radial-gradient(circle at 0 50%, var(--surface-page) 11px, transparent 12px),
    radial-gradient(circle at 100% 50%, var(--surface-page) 11px, transparent 12px);
}

.rs__ticket-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-32) var(--space-32);
}

.rs__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.rs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.rs__row dt {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.rs__row dd {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
  text-align: right;
  overflow-wrap: anywhere;
}

.rs__row--total dd {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

.rs__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-12);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill);
}

.rs__pill--paid {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
}

.rs__pill--wait {
  color: var(--color-warning);
  background-color: var(--color-warning-tint);
}

.rs__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px var(--space-16);
  font-size: var(--text-caption);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
  background-color: var(--color-warning-tint);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
}

.rs__note i {
  margin-top: 3px;
  color: var(--color-warning);
}

.rs__assist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: radial-gradient(circle at 100% 0%, var(--color-jade-tint), transparent 60%), var(--surface-card);
}

.rs__assist .rs__head {
  margin-bottom: var(--space-8);
}

.rs__assist-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-20);
  font-size: 20px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.rs__assist-icon .rs__wave {
  border-color: var(--color-jade);
  animation-delay: 0s;
}

.rs__assist-text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.rs__assist-text a,
.rs__flow a {
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

@keyframes rs-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 767.98px) {
  .rs {
    padding-top: var(--space-32);
  }

  .rs__hero {
    padding: var(--space-40) var(--space-20);
  }

  .rs__grid {
    grid-template-columns: 1fr;
  }

  .rs__card {
    padding: var(--space-24) var(--space-20);
  }

  .rs__ticket-top {
    padding: var(--space-24) var(--space-20) var(--space-20);
  }

  .rs__ticket-body {
    padding: var(--space-20);
  }

  .rs__actions .btn {
    width: 100%;
  }
}

.ct {
  --rs-tone: var(--color-jade);
  --rs-tint: var(--color-jade-tint);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: var(--space-32);
}

.ct__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.ct__title {
  margin-top: var(--space-8);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.ct__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.line {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-16);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  animation: mega-in 500ms ease-out both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.line:hover {
  background-color: var(--surface-raised);
  border-color: var(--color-line-strong);
}

.line__media {
  display: grid;
  place-items: center;
  width: 104px;
  height: 72px;
  overflow: hidden;
  font-size: 22px;
  color: var(--color-jade);
  background-color: var(--surface-panel);
  border-radius: var(--radius-md);
}

.line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.line:hover .line__media img {
  transform: scale(1.05);
}

.line__media--credits {
  background: radial-gradient(circle at 50% 20%, rgba(95, 180, 156, 0.3), var(--color-jade-tint));
}

.line__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.line__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

a.line__title:hover {
  color: var(--color-jade-bright);
}

.line__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.line__meta i {
  color: var(--color-jade);
}

.line__end {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.line__price {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  white-space: nowrap;
}

.line__price i {
  font-size: 14px;
  color: var(--color-jade);
}

.line__drop {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  color: var(--color-text-faint);
  border: var(--border-strong);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.line__drop:hover {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
  border-color: var(--color-loss);
}

.ct__rail {
  position: sticky;
  top: 96px;
}

.ct__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
}

.ct__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--text-small);
}

.ct__stat dt {
  color: var(--color-text-soft);
}

.ct__stat dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.ct__stat dd i {
  color: var(--color-jade);
}

.ct__stat--after {
  padding-top: var(--space-12);
  border-top: 1px dashed var(--color-line-strong);
}

.ct__stat--after dd {
  color: var(--color-jade-bright);
}

.gauge {
  --p: 0;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 0 auto var(--space-24);
  border-radius: 50%;
  background: conic-gradient(var(--color-jade) calc(var(--p) * 1%), var(--color-line) 0);
}

.sum.is-short .gauge {
  background: conic-gradient(var(--color-warning) calc(var(--p) * 1%), var(--color-line) 0);
}

.gauge__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  text-align: center;
  background-color: var(--surface-card);
  border-radius: 50%;
}

.gauge__in strong {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  color: var(--color-white);
}

.gauge__in span {
  max-width: 90px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-soft);
}

.ct__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-20);
  padding: 14px var(--space-16);
  font-size: var(--text-caption);
  line-height: var(--leading-small);
  color: var(--color-text);
  background-color: var(--color-warning-tint);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
}

.ct__alert i {
  margin-top: 3px;
  color: var(--color-warning);
}

.ct__empty {
  max-width: 760px;
  margin-inline: auto;
}

.ct__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-12);
  font-size: 32px;
  color: var(--color-jade);
  background: radial-gradient(circle at 50% 30%, var(--color-raised), var(--color-deep) 70%);
  border: 1px solid var(--color-jade);
  border-radius: 50%;
}

.ct__orb .rs__wave {
  animation-delay: 0s;
}

.ct__orb .rs__wave--late {
  animation-delay: 1.3s;
}

.ct__balance {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
  padding: 10px var(--space-20);
  font-size: var(--text-small);
  color: var(--color-text-soft);
  background-color: var(--color-jade-tint);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
}

.ct__balance strong {
  color: var(--color-white);
}

.ct__balance i {
  color: var(--color-jade);
}

@media (max-width: 1099.98px) {
  .ct__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-24);
  }
}

@media (max-width: 991.98px) {
  .ct__grid {
    grid-template-columns: 1fr;
  }

  .ct__rail {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .ct {
    padding-top: var(--space-32);
  }

  .line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: var(--space-12);
  }

  .line__media {
    width: 72px;
    height: 56px;
    font-size: 18px;
  }

  .line__end {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: var(--space-12);
    border-top: var(--border-hairline);
  }
}

.tp {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.tp__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 720px;
  margin: 0 auto var(--space-40);
  text-align: center;
}

.tp__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.tp__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.tp__chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 14px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.tp__chips i {
  color: var(--color-jade);
}

.tp__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.tp-amount {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-24);
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tp-amount:focus-within {
  border-color: var(--color-jade);
  box-shadow: var(--shadow-focus);
}

.tp-amount__symbol {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-jade);
}

.tp-amount__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw + 16px, 44px);
  line-height: 1.2;
  color: var(--color-white);
  background: transparent;
  border: 0;
  -moz-appearance: textfield;
}

.tp-amount__input::-webkit-outer-spin-button,
.tp-amount__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.tp-amount__input::placeholder {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-faint);
}

.tp-amount__input:focus {
  box-shadow: none;
}

.tp-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tp-quick__btn {
  padding: var(--space-12) var(--space-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background-color: var(--surface-panel);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.tp-quick__btn:hover {
  color: var(--color-white);
  border-color: var(--color-jade);
  transform: translateY(-2px);
}

.tp-quick__btn.is-active {
  color: var(--color-ink);
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.tp__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px var(--space-16);
  font-size: var(--text-caption);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
  background-color: var(--color-jade-tint);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
}

.tp__notice i {
  margin-top: 3px;
  color: var(--color-jade);
}

.tp__notice strong {
  color: var(--color-white);
}

.tp-result {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24) var(--space-24);
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(95, 180, 156, 0.22), transparent 60%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.tp-result__label {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-jade);
}

.tp-result__total {
  display: block;
}

.tp-result__total strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 4vw + 24px, 64px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.tp-result__total.is-pulse strong {
  animation: tp-pulse 450ms ease-out;
}

.tp-result__eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.tp-result__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-result__cell small {
  font-size: 12px;
  color: var(--color-text-faint);
}

.tp-result__cell b {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.tp-result__op {
  font-size: 18px;
  color: var(--color-gold);
}

.tp-submit {
  min-height: 52px;
  font-size: var(--text-body);
}

.tp-submit:disabled {
  opacity: 0.7;
}

.tp-result__secure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.tp-result__secure i {
  margin-top: 2px;
  color: var(--color-jade);
}

@keyframes tp-pulse {
  0% {
    transform: scale(1);
  }

  40% {
    color: var(--color-jade-bright);
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 991.98px) {
  .tp-result {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .tp {
    padding-top: var(--space-32);
  }

  .tp-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }




}

.pg {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.pg__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--space-32);
}

.pg__wrap:not(.has-toc) .pg__prose {
  max-width: 880px;
  margin-inline: auto;
}

.pg__wrap.has-toc {
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}

.pg__side {
  position: sticky;
  top: 96px;
}

.pg__toc {
  max-height: calc(100vh - 120px);
  padding: var(--space-20);
  overflow-y: auto;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.pg__toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
  border-bottom: var(--border-hairline);
}

.pg__toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg__toc-list a {
  position: relative;
  display: block;
  padding: var(--space-8) var(--space-12);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-soft);
  border-left: 2px solid var(--color-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.pg__toc-list a:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.pg__toc-list a.is-active {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border-left-color: var(--color-jade);
}

.pg__prose {
  min-width: 0;
  padding: var(--space-48);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  overflow-wrap: break-word;
}

.pg__prose > :first-child {
  margin-top: 0;
}

.pg__prose > :last-child {
  margin-bottom: 0;
}

.pg__prose h1,
.pg__prose h2 {
  margin: var(--space-48) 0 var(--space-16);
  padding-top: var(--space-32);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
  color: var(--color-white);
  border-top: var(--border-hairline);
  scroll-margin-top: 110px;
}

.pg__prose > h1:first-child,
.pg__prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.pg__prose h3 {
  margin: var(--space-32) 0 var(--space-12);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-white);
  scroll-margin-top: 110px;
}

.pg__prose h4,
.pg__prose h5,
.pg__prose h6 {
  margin: var(--space-24) 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-white);
}

.pg__prose h5,
.pg__prose h6 {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.pg__prose p {
  margin: 0 0 var(--space-16);
}

.pg__prose a {
  font-weight: var(--font-weight-medium);
  color: var(--color-jade);
  text-decoration: underline;
  text-decoration-color: var(--color-jade-ring);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.pg__prose a:hover {
  color: var(--color-jade-bright);
  text-decoration-color: currentColor;
}

.pg__prose strong,
.pg__prose b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.pg__prose em,
.pg__prose i:not([class]) {
  font-style: italic;
  color: var(--color-text-muted);
}

.pg__prose ul,
.pg__prose ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 var(--space-24);
  padding: 0;
  list-style: none;
}

.pg__prose ul > li {
  position: relative;
  padding-left: 28px;
}

.pg__prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--color-jade);
  transform: rotate(45deg);
}

.pg__prose ol {
  counter-reset: pg-ol;
}

.pg__prose ol > li {
  position: relative;
  padding-left: 42px;
  counter-increment: pg-ol;
}

.pg__prose ol > li::before {
  content: counter(pg-ol);
  position: absolute;
  top: 0.15em;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.pg__prose li > ul,
.pg__prose li > ol {
  margin: 10px 0 0;
}

.pg__prose li > ul > li::before {
  background-color: transparent;
  border: 1.5px solid var(--color-jade);
}

.pg__prose blockquote {
  margin: 0 0 var(--space-24);
  padding: var(--space-16) var(--space-20);
  color: var(--color-text-muted);
  background-color: var(--color-jade-tint);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
}

.pg__prose hr {
  margin: var(--space-40) 0;
  border: 0;
  border-top: var(--border-hairline);
}

.pg__prose code,
.pg__prose kbd {
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-white);
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.pg__prose img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

.pg__prose p > img:only-child {
  display: block;
  margin: var(--space-24) auto;
  border-radius: var(--radius-card);
}

.pg__table {
  margin: 0 0 var(--space-32);
  overflow-x: auto;
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.pg__prose table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.pg__prose th,
.pg__prose td {
  padding: 14px var(--space-20) !important;
  color: var(--color-text) !important;
  text-align: left;
  vertical-align: middle;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: var(--border-hairline) !important;
}

.pg__prose tr:last-child > th,
.pg__prose tr:last-child > td {
  border-bottom: 0 !important;
}

.pg__prose thead th,
.pg__prose th {
  font-size: 12px;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper) !important;
  background-color: var(--surface-panel) !important;
}

.pg__prose tbody td:first-child:not(:only-child) {
  width: 32%;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-soft) !important;
  background-color: var(--surface-panel) !important;
  border-right: var(--border-hairline) !important;
}

.pg__prose tbody tr {
  transition: background-color var(--transition-fast);
}

.pg__prose tbody tr:hover > td:not(:first-child) {
  background-color: var(--surface-raised) !important;
}

.pg__prose td img {
  max-height: 30px;
  margin: 0 !important;
  padding: 3px 8px;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}

:lang(ja) .pg__prose {
  line-height: 1.9;
}

:lang(ja) .pg__toc-title,
:lang(ja) .pg__prose h5,
:lang(ja) .pg__prose h6,
:lang(ja) .pg__prose th,
:lang(ja) .tp-result__label {
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .pg__wrap.has-toc {
    grid-template-columns: 1fr;
  }

  .pg__side {
    position: static;
  }

  .pg__toc {
    max-height: none;
  }

  .pg__toc-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-8);
    padding-bottom: 4px;
    overflow-x: auto;
  }

  .pg__toc-list a {
    white-space: nowrap;
    border: var(--border-hairline);
    border-radius: var(--radius-pill);
  }

  .pg__toc-list a.is-active {
    border-color: var(--color-jade);
  }

}

@media (max-width: 575.98px) {
  .pg {
    padding-top: var(--space-32);
  }

  .pg__prose {
    padding: var(--space-24) var(--space-20);
    font-size: var(--text-body);
  }

  .pg__prose th,
  .pg__prose td {
    padding: var(--space-12) 14px !important;
  }

  .pg__prose tbody td:first-child:not(:only-child) {
    width: 40%;
  }
}

.tp-rates {
  margin-bottom: var(--space-32);
}

.tp-rates__title {
  margin-bottom: var(--space-20);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  text-align: center;
}

.tp-rates__frame {
  overflow-x: auto;
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.tp-rates__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.tp-rates__table thead th {
  padding: 14px var(--space-24);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-copper);
  background-color: var(--surface-panel);
  border-bottom: var(--border-hairline);
}

.tp-rates__table thead th:last-child,
.tp-rates__table tbody td:last-child {
  text-align: right;
}

.tp-rates__table tbody th,
.tp-rates__table tbody td {
  padding: 18px var(--space-24);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-hairline);
}

.tp-rates__table tbody tr:last-child > * {
  border-bottom: 0;
}

.tp-tier {
  position: relative;
  transition: background-color var(--transition-base);
}

.tp-tier:hover {
  background-color: var(--surface-raised);
}

.tp-tier > th {
  font-weight: var(--font-weight-regular);
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow var(--transition-base);
}

.tp-tier__cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

.tp-tier__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.tp-tier__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--color-gold);
  background-color: var(--color-gold-tint);
  border-radius: 50%;
}

.tp-tier__range {
  color: var(--color-text-soft);
  white-space: nowrap;
}

.tp-tier__mult {
  display: inline-block;
  min-width: 64px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.tp-tier__badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-ink);
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
}

.tp-tier__match {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade-bright);
}

.tp-tier.is-match {
  background-color: var(--color-jade-tint);
}

.tp-tier.is-match > th {
  box-shadow: inset 3px 0 0 var(--color-jade);
}

.tp-tier.is-match .tp-tier__mult {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.tp-tier.is-match .tp-tier__match {
  display: inline-flex;
}

.tp-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.tp-calc__input {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
}

.tp-calc .tp-result {
  position: static;
  justify-content: center;
  border: 0;
  border-left: var(--border-hairline);
  border-radius: 0;
}

@media (max-width: 991.98px) {
  .tp-calc {
    grid-template-columns: 1fr;
  }

  .tp-calc .tp-result {
    border-left: 0;
    border-top: var(--border-hairline);
  }
}

@media (max-width: 575.98px) {
  .tp-rates__title {
    font-size: 26px;
    text-align: left;
  }

  .tp-rates__table {
    min-width: 0;
  }

  .tp-rates__table thead th,
  .tp-rates__table tbody th,
  .tp-rates__table tbody td {
    padding: 14px var(--space-12);
  }

  .tp-tier__range {
    white-space: normal;
  }

  .tp-tier__cell {
    flex-direction: column;
    align-items: flex-start;
  }

  .tp-tier__icon {
    display: none;
  }

  .tp-calc__input {
    padding: var(--space-20);
  }
}

:lang(ja) .tp-rates__table thead th {
  letter-spacing: 0;
}

.cg {
  --rs-tone: var(--color-jade);
  --rs-tint: var(--color-jade-tint);
}

.cg-rail {
  position: sticky;
  top: 64px;
  z-index: 40;
  background-color: rgba(7, 11, 10, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline);
}

.cg-rail__in {
  position: relative;
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.cg-rail__list {
  display: flex;
  gap: var(--space-8);
  padding-block: var(--space-12);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.cg-rail__list::-webkit-scrollbar {
  display: none;
}

.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 6px var(--space-8) var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-text-soft);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.cg-chip > i {
  font-size: 12px;
}

.cg-chip:hover {
  color: var(--color-white);
  border-color: var(--color-line-strong);
}

.cg-chip__count {
  min-width: 26px;
  padding: 2px var(--space-8);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-soft);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill);
}

.cg-chip.is-active {
  color: var(--color-ink);
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.cg-chip.is-active .cg-chip__count {
  color: var(--color-jade-bright);
  background-color: var(--color-ink);
}

.cg__wrap {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.cg-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  gap: var(--space-32);
  margin-bottom: var(--space-40);
}

.cg-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cg-head__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.cg-head__lead {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.cg-promo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8) var(--space-16);
  padding: var(--space-20);
  color: var(--color-text-soft);
  background: radial-gradient(circle at 0% 0%, rgba(217, 181, 106, 0.14), transparent 60%), var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), transform var(--transition-base);
}

.cg-promo:hover {
  color: var(--color-text-soft);
  border-color: var(--color-jade-ring);
  transform: translateY(-2px);
}

.cg-promo__icon {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: var(--color-gold);
  background-color: var(--color-gold-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.cg-promo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.cg-promo__text strong {
  font-size: var(--text-small);
  color: var(--color-white);
}

.cg-promo__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-jade);
}

.cg-promo__go i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.cg-promo:hover .cg-promo__go i {
  transform: translateX(4px);
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
}

.cg-card {
  min-width: 0;
  animation: mega-in 550ms ease-out both;
  animation-delay: calc(min(var(--i, 0), 12) * 50ms);
}

.cg-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

.cg-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gradient-jade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease;
}

.cg-card__link:hover {
  color: var(--color-text);
  background-color: var(--surface-raised);
  border-color: var(--color-line-strong);
  transform: translateY(-4px);
}

.cg-card__link:hover::after {
  transform: scaleX(1);
}

.cg-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--surface-panel);
}

.cg-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7, 11, 10, 0.75));
  pointer-events: none;
}

.cg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.cg-card__link:hover .cg-card__media img {
  transform: scale(1.06);
}

.cg-card__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 32px;
  color: var(--color-jade);
  background: radial-gradient(circle at 50% 30%, var(--color-jade-tint), transparent 70%);
}

.cg-card__signal {
  position: absolute;
  left: var(--space-12);
  bottom: var(--space-12);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: rgba(7, 11, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

.cg-card__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.cg-card__bars span {
  width: 3px;
  border-radius: 1px;
  background-color: var(--color-line-muted);
}

.cg-card__bars span:nth-child(1) {
  height: 4px;
}

.cg-card__bars span:nth-child(2) {
  height: 7px;
}

.cg-card__bars span:nth-child(3) {
  height: 10px;
}

.cg-card__bars span:nth-child(4) {
  height: 12px;
}

.cg-card__bars span.is-on {
  background-color: var(--color-jade-bright);
}

.cg-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
}

.cg-card__cat {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.cg-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cg-card__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cg-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px dashed var(--color-line-strong);
}

.cg-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-card__price small {
  font-size: 12px;
  color: var(--color-text-faint);
}

.cg-card__price strong {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-white);
}

.cg-card__price em {
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-soft);
}

.cg-card__go {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 13px;
  color: var(--color-jade);
  border: 1px solid var(--color-jade);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-base);
}

.cg-card__link:hover .cg-card__go {
  color: var(--color-ink);
  background-color: var(--color-jade);
  transform: rotate(-45deg);
}

.cg-card--lead {
  grid-column: span 2;
}

.cg-card--lead .cg-card__link {
  flex-direction: row;
  background: radial-gradient(circle at 100% 0%, rgba(95, 180, 156, 0.14), transparent 55%), var(--surface-card);
}

.cg-card--lead .cg-card__media {
  flex: 0 0 48%;
  aspect-ratio: auto;
  min-height: 100%;
}

.cg-card--lead .cg-card__media::after {
  background: linear-gradient(90deg, transparent 55%, rgba(11, 19, 17, 0.9));
}

.cg-card--lead .cg-card__body {
  justify-content: center;
  padding: var(--space-32) var(--space-24);
}

.cg-card--lead .cg-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  -webkit-line-clamp: 3;
}

.cg-card--lead .cg-card__desc {
  -webkit-line-clamp: 4;
}

.cg-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-48);
}

.cg-pages__nums {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.cg-pages__num {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-8);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.cg-pages__num:hover {
  color: var(--color-white);
  background-color: var(--surface-raised);
}

.cg-pages__num.is-current {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.cg-pages__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-20);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cg-pages__btn:hover {
  color: var(--color-white);
  border-color: var(--color-jade);
}

.cg-pages__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.cg-empty {
  margin-top: var(--space-16);
}

:lang(ja) .cg-card__cat {
  letter-spacing: 0;
}

@media (max-width: 1199.98px) {
  .cg-rail {
    top: 64px;
  }

  .cg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .cg-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-24);
  }

  .cg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cg-card--lead .cg-card__link {
    flex-direction: column;
  }

  .cg-card--lead .cg-card__media {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .cg-card--lead .cg-card__media::after {
    background: linear-gradient(180deg, transparent 50%, rgba(7, 11, 10, 0.75));
  }
}

@media (max-width: 575.98px) {
  .cg__wrap {
    padding-top: var(--space-32);
  }

  .cg-grid {
    grid-template-columns: 1fr;
  }

  .cg-card--lead {
    grid-column: auto;
  }

  .cg-card--lead .cg-card__title {
    font-size: 22px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
  }

  .cg-pages__btn span {
    display: none;
  }

  .cg-pages__btn {
    width: 48px;
    padding: 0;
    justify-content: center;
  }
}

.cd {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.cd__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.cd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-48);
}

.cd-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  animation: mega-in 600ms ease-out both;
}

.cd-cat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
  background-color: var(--color-copper-tint);
  border: 1px solid rgba(204, 145, 102, 0.3);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast);
}

.cd-cat:hover {
  color: var(--color-copper);
  border-color: var(--color-copper);
}

.cd-title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.cd-lede {
  max-width: 60ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.cd-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: var(--space-12);
  margin: 0;
}

.cd-glance__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px var(--space-20);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.cd-glance__item dt {
  font-size: 12px;
  color: var(--color-text-faint);
}

.cd-glance__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-white);
}

.cd-glance__item dd small {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.cd-glance__item dd.cd-glance__text {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.cd-info__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.cd-wallet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 10px var(--space-16);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
  background-color: var(--color-jade-tint);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
}

.cd-wallet i {
  color: var(--color-jade);
}

.cd-wallet strong {
  font-size: var(--text-small);
  color: var(--color-white);
}

.cd-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  animation: mega-in 700ms ease-out 120ms both;
}

.cd-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--color-jade-tint), transparent 70%), var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.cd-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7, 11, 10, 0.7));
  pointer-events: none;
}

.cd-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-stage__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  color: var(--color-jade);
}

.cd-stage__tag {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px var(--space-12);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: rgba(7, 11, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

.cd-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.cd-thumb {
  flex: 0 0 88px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.cd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-thumb:hover,
.cd-thumb.is-active {
  opacity: 1;
}

.cd-thumb.is-active {
  border-color: var(--color-jade);
}

.cd-levels {
  scroll-margin-top: 100px;
}

.cd-levels__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-40);
  text-align: center;
}

.cd-levels__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.cd-levels__hint {
  color: var(--color-text-soft);
}

.cd-step,
.cd-panel {
  --lv: var(--color-jade);
  --lv-tint: var(--color-jade-tint);
}

.cd-step--intermediate,
.cd-panel--intermediate {
  --lv: var(--color-gold);
  --lv-tint: var(--color-gold-tint);
}

.cd-step--advanced,
.cd-panel--advanced {
  --lv: var(--color-copper);
  --lv-tint: var(--color-copper-tint);
}

.cd-path {
  --fill: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.cd-path__track {
  position: absolute;
  top: 22px;
  left: calc(100% / var(--steps, 4) / 2);
  right: calc(100% / var(--steps, 4) / 2);
  height: 2px;
  background-color: var(--color-line-strong);
  border-radius: var(--radius-pill);
}

.cd-path__fill {
  display: block;
  width: calc(var(--fill) * 100%);
  height: 100%;
  background: var(--gradient-jade);
  border-radius: inherit;
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cd-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: 0;
  text-align: center;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.cd-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-soft);
  background-color: var(--surface-page);
  border: 2px solid var(--color-line-strong);
  border-radius: 50%;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.cd-step__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-20) var(--space-16);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-top: 3px solid var(--color-line-strong);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}

.cd-step__num {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.cd-step__name {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

.cd-step__price {
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.cd-step__price .num {
  font-weight: var(--font-weight-bold);
  color: var(--lv);
}

.cd-step:hover .cd-step__card {
  border-top-color: var(--lv);
  transform: translateY(-2px);
}

.cd-step:focus-visible {
  box-shadow: none;
}

.cd-step:focus-visible .cd-step__card {
  box-shadow: var(--shadow-focus);
}

.cd-step.is-past .cd-step__node {
  color: var(--lv);
  border-color: var(--lv);
}

.cd-step.is-active .cd-step__node {
  color: var(--color-ink);
  background-color: var(--lv);
  border-color: var(--lv);
  transform: scale(1.1);
}

.cd-step.is-active .cd-step__node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--lv);
  animation: pre-wave 2.2s ease-out infinite;
}

.cd-step.is-active .cd-step__card {
  background: linear-gradient(180deg, var(--lv-tint), transparent 80%), var(--surface-card);
  border-color: var(--color-line-strong);
  border-top-color: var(--lv);
  transform: translateY(-4px);
}

.cd-step.is-active .cd-step__num {
  color: var(--lv);
}

.cd-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: var(--space-24);
  animation: mega-in 450ms ease-out both;
}

.cd-panel[hidden] {
  display: none;
}

.cd-panel:focus-visible {
  box-shadow: none;
}

.cd-panel__main {
  padding: var(--space-32);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.cd-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-32);
  padding-bottom: var(--space-20);
  border-bottom: var(--border-hairline);
}

.cd-panel__name {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.cd-points {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.cd-points::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background: linear-gradient(180deg, var(--lv), var(--color-line) 90%);
}

.cd-point {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-20);
}

.cd-point__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  color: var(--lv);
  background-color: var(--surface-panel);
  border: 1px solid var(--lv);
  border-radius: 50%;
}

.cd-point__label {
  margin: 10px 0 var(--space-8);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

.cd-point__desc {
  font-size: var(--text-body);
  line-height: var(--leading-reading);
  color: var(--color-text-muted);
}

.cd-buy {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: radial-gradient(circle at 100% 0%, var(--lv-tint), transparent 60%), var(--surface-card);
  border: var(--border-strong);
  border-top: 3px solid var(--lv);
  border-radius: var(--radius-card);
}

.cd-buy__label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lv);
}

.cd-buy__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.cd-buy__price strong {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.cd-buy__price small {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.cd-buy__meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.cd-buy__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.cd-buy__row strong {
  font-size: var(--text-small);
  color: var(--color-white);
}

.cd-buy__track {
  display: block;
  height: 6px;
  overflow: hidden;
  background-color: var(--color-line);
  border-radius: var(--radius-pill);
}

.cd-buy__track span {
  display: block;
  height: 100%;
  background: var(--gradient-jade);
  border-radius: inherit;
}

.cd-buy__meter.is-short .cd-buy__track span {
  background: var(--color-warning);
}

.cd-buy__state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text);
}

.cd-buy__meter.is-ok .cd-buy__state i {
  margin-top: 2px;
  color: var(--color-jade);
}

.cd-buy__meter.is-short .cd-buy__state i {
  margin-top: 2px;
  color: var(--color-warning);
}

.cd-form__submit {
  min-height: 52px;
}

.cd-form__submit:disabled {
  opacity: 0.7;
}

.cd-buy__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-faint);
}

.cd-buy__note i {
  margin-top: 2px;
  color: var(--color-jade);
}

.cd-about {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-32);
  padding: var(--space-40);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.cd-about__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.cd-about__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.cd-about__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.cd-prose {
  max-width: var(--reading-max-width);
  font-size: var(--text-reading);
  line-height: var(--leading-reading);
  color: var(--color-text);
}

:lang(ja) .cd-cat,
:lang(ja) .cd-step__num,
:lang(ja) .cd-buy__label {
  letter-spacing: 0;
}

@media (max-width: 1099.98px) {
  .cd-panel {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (max-width: 991.98px) {
  .cd-hero {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .cd-media {
    order: -1;
  }

  .cd-panel {
    grid-template-columns: 1fr;
  }

  .cd-buy {
    position: static;
  }

  .cd-about {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
}

@media (max-width: 767.98px) {
  .cd__wrap {
    gap: var(--space-48);
  }

  .cd-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cd-glance__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cd-path {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .cd-path__track {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .cd-path__fill {
    width: 100%;
    height: calc(var(--fill) * 100%);
    transition-property: height;
  }

  .cd-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .cd-step__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--space-12);
    padding: 14px var(--space-16);
    border-top: var(--border-hairline);
    border-left: 3px solid var(--color-line-strong);
    text-align: left;
  }

  .cd-step__num {
    grid-column: 1;
  }

  .cd-step__name {
    grid-column: 1;
  }

  .cd-step__price {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .cd-step:hover .cd-step__card,
  .cd-step.is-active .cd-step__card {
    border-top-color: var(--color-line);
    border-left-color: var(--lv);
    transform: none;
  }

  .cd-panel__main,
  .cd-about {
    padding: var(--space-24) var(--space-20);
  }

  .cd-points::before {
    left: 19px;
  }

  .cd-point {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .cd-point__icon {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .cd-point__label {
    margin-top: 6px;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-12);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  border-radius: var(--radius-pill);
}

.pill i {
  font-size: 10px;
}

.pill--ok {
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
}

.pill--wait {
  color: var(--color-warning);
  background-color: var(--color-warning-tint);
}

.pill--err {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
}

.acct {
  --rs-tone: var(--color-jade);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.acct-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
  animation: mega-in 600ms ease-out both;
}

.acct-me {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-32);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 0% 0%, rgba(95, 180, 156, 0.2), transparent 55%), var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.acct-me::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
  mask-image: linear-gradient(90deg, transparent 40%, #000);
}

.acct-me__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-jade-deep), var(--color-jade));
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface-card), 0 0 0 5px var(--color-jade-ring);
}

.acct-me__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.acct-me__name {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  overflow-wrap: anywhere;
}

.acct-me__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.acct-me__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  overflow-wrap: anywhere;
}

.acct-me__meta i {
  color: var(--color-jade);
}

.acct-wallet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-32);
  overflow: hidden;
  background: radial-gradient(circle at 100% 100%, rgba(217, 181, 106, 0.14), transparent 55%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.acct-wallet__line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 50%;
  opacity: 0.55;
  pointer-events: none;
}

.acct-wallet__line polyline {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: bn-line 1.8s ease-out 400ms forwards;
}

.acct-wallet__label {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-jade);
}

.acct-wallet__value {
  position: relative;
  margin-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.acct-wallet .btn {
  position: relative;
}

.acct-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-40);
}

.acct-stat {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), transform var(--transition-base);
}

.acct-stat:hover {
  border-color: var(--color-line-strong);
  transform: translateY(-2px);
}

.acct-stat__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.acct-stat__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-stat__label {
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.acct-stat__value {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-white);
}

.acct-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.acct-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.acct-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 10px var(--space-20);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.acct-tab:hover {
  color: var(--color-white);
}

.acct-tab__count {
  min-width: 24px;
  padding: 1px var(--space-8);
  font-size: 11px;
  text-align: center;
  color: var(--color-text-soft);
  background-color: var(--surface-raised);
  border-radius: var(--radius-pill);
}

.acct-tab.is-active {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.acct-tab.is-active .acct-tab__count {
  color: var(--color-jade-bright);
  background-color: var(--color-ink);
}

.acct-out {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 10px var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-soft);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.acct-out:hover {
  color: var(--color-loss);
  background-color: var(--color-loss-tint);
  border-color: var(--color-loss);
}

.acct-panel {
  animation: mega-in 400ms ease-out both;
}

.acct-panel[hidden] {
  display: none;
}

.acct-panel__title {
  margin-bottom: var(--space-20);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.acct-ledger {
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.acct-ledger__head,
.acct-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) 160px;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

.acct-ledger__head {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
  background-color: var(--surface-panel);
  border-bottom: var(--border-hairline);
}

.acct-row {
  border-bottom: var(--border-hairline);
  transition: background-color var(--transition-fast);
  animation: mega-in 400ms ease-out both;
  animation-delay: calc(min(var(--i, 0), 10) * 40ms);
}

.acct-row:last-child {
  border-bottom: 0;
}

.acct-row:hover {
  background-color: var(--surface-raised);
}

.acct-row__id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.acct-row__id > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acct-row__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--color-gold);
  background-color: var(--color-gold-tint);
  border-radius: 50%;
}

.acct-row__no {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.acct-row__date {
  font-size: 12px;
  color: var(--color-text-faint);
}

.acct-row__fig small {
  display: none;
}

.acct-row__fig strong {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.acct-row__fig strong i {
  font-size: 11px;
  color: var(--color-jade);
}

.acct-row__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: var(--space-8);
  padding: var(--space-8) 14px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  color: var(--color-jade);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.acct-row__go:hover {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.acct-lib {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}

.acct-mat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base), transform var(--transition-base);
  animation: mega-in 450ms ease-out both;
  animation-delay: calc(min(var(--i, 0), 9) * 50ms);
}

.acct-mat:hover {
  border-color: var(--color-line-strong);
  transform: translateY(-4px);
}

.acct-mat__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-size: 28px;
  color: var(--color-jade);
  background-color: var(--surface-panel);
}

.acct-mat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-mat__state {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  background-color: rgba(7, 11, 10, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.acct-mat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-20);
}

.acct-mat__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.acct-mat__cost {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
}

.acct-mat__cost i {
  color: var(--color-jade);
}

.acct-mat__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.acct-mat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-12);
  font-size: 12px;
  color: var(--color-text-faint);
}

.acct-mat__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  border-top: 1px dashed var(--color-line-strong);
}

.acct-mat__go i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.acct-mat__go:hover i {
  transform: translateX(4px);
}

.acct-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-48) var(--space-24);
  text-align: center;
  color: var(--color-text-soft);
  background-color: var(--surface-card);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-card);
}

.acct-blank p {
  max-width: 46ch;
}

.acct-blank__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 24px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.acct-blank__icon .rs__wave {
  animation-delay: 0s;
}

.acct-pwd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.acct-pwd__form {
  padding: var(--space-32);
}

.acct-tips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-32);
  background: radial-gradient(circle at 100% 0%, rgba(95, 180, 156, 0.16), transparent 60%), var(--surface-page);
  border-left: var(--border-hairline);
}

.acct-tips__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 20px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.acct-tips__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}

.acct-tips__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.acct-tips__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.acct-tips__list i {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-jade);
}

.inv {
  --rs-tone: var(--color-jade);
  width: 100%;
  max-width: calc(880px + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-48) var(--page-gutter) 0;
}

.inv-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.inv-acts__right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.inv-doc {
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  animation: mega-in 600ms ease-out both;
}

.inv-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-40) var(--space-40) var(--space-24);
  background: radial-gradient(circle at 0% 0%, rgba(95, 180, 156, 0.18), transparent 55%);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.inv-doc__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.inv-doc__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-8);
  padding: 4px var(--space-12);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
  background-color: var(--color-copper-tint);
  border-radius: var(--radius-pill);
}

.inv-doc__no {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.inv-doc__date {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.inv-doc__sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.inv-doc__label {
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.inv-doc__value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.inv-doc__value small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.inv-doc__states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  padding: 0 var(--space-40) var(--space-24);
}

.inv-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.inv-state small {
  font-size: 12px;
  color: var(--color-text-faint);
}

.inv-state__val {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.inv-state__val i {
  color: var(--color-jade);
}

.inv-doc__part {
  padding: var(--space-24) var(--space-40);
}

.inv-doc__part + .inv-doc__part {
  padding-bottom: var(--space-40);
  border-top: var(--border-hairline);
}

.inv-doc__title {
  margin-bottom: var(--space-16);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-copper);
}

.inv-items {
  display: flex;
  flex-direction: column;
}

.inv-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  border-bottom: var(--border-hairline);
}

.inv-item__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.inv-item__icon--credits {
  color: var(--color-gold);
  background-color: var(--color-gold-tint);
}

.inv-item__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.inv-item__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.inv-item__credits {
  font-size: var(--text-small);
  white-space: nowrap;
  color: var(--color-text-soft);
}

.inv-item__credits .num {
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.inv-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-16);
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.inv-total strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

.inv-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin: 0;
}

.inv-info > div {
  padding: 14px var(--space-16);
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.inv-info__wide {
  grid-column: 1 / -1;
}

.inv-info dt {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-text-faint);
}

.inv-info dd {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

:lang(ja) .acct-wallet__label,
:lang(ja) .acct-ledger__head,
:lang(ja) .inv-doc__tag,
:lang(ja) .inv-doc__title {
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .acct-hero {
    grid-template-columns: 1fr;
  }

  .acct-ledger__head {
    display: none;
  }

  .acct-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
  }

  .acct-row__id,
  .acct-row__go {
    grid-column: 1 / -1;
  }

  .acct-row__go {
    justify-self: stretch;
  }

  .acct-row__fig small {
    display: block;
    font-size: 12px;
    color: var(--color-text-faint);
  }

  .acct-row__state {
    grid-column: 1 / -1;
  }

  .acct-lib {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acct-pwd {
    grid-template-columns: 1fr;
  }

  .acct-tips {
    border-left: 0;
    border-top: var(--border-hairline);
  }
}

@media (max-width: 767.98px) {
  .acct,
  .inv {
    padding-top: var(--space-32);
  }

  .acct-me {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-24);
  }

  .acct-me__avatar {
    width: 72px;
    height: 72px;
    font-size: 30px;
  }

  .acct-wallet {
    padding: var(--space-24);
  }

  .acct-wallet__value {
    font-size: 44px;
  }

  .acct-stats {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .acct-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .acct-out {
    justify-content: center;
  }

  .acct-lib {
    grid-template-columns: 1fr;
  }

  .acct-pwd__form,
  .acct-tips {
    padding: var(--space-24) var(--space-20);
  }

  .inv-doc__head,
  .inv-doc__states,
  .inv-doc__part {
    padding-inline: var(--space-20);
  }

  .inv-doc__head {
    padding-top: var(--space-24);
  }

  .inv-doc__sum {
    align-items: flex-start;
    text-align: left;
  }

  .inv-doc__value {
    font-size: 36px;
  }

  .inv-doc__states {
    grid-template-columns: 1fr;
  }

  .inv-info {
    grid-template-columns: 1fr;
  }

  .inv-acts__right {
    width: 100%;
  }

  .inv-acts__right .btn {
    flex: 1;
  }
}

@media print {
  .strip,
  .hd,
  .ft,
  .bn,
  .totop,
  .ck,
  .notes,
  .veil,
  .sheet,
  .inv-acts,
  #preloader {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .inv {
    padding: 0;
  }

  .inv-doc,
  .inv-doc * {
    color: #111 !important;
    background: transparent !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .inv-doc__tear::after {
    display: none;
  }
}

.au {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-64) var(--page-gutter) 0;
}

.au__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-64);
}

.au-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  animation: mega-in 600ms ease-out both;
}

.au-copy__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.au-copy__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.au-copy__text {
  color: var(--color-text-soft);
}

.au-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  width: 100%;
  margin-top: var(--space-8);
}

.au-points li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-16);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-fast), transform var(--transition-base);
}

.au-points li:hover {
  border-color: var(--color-jade-ring);
  transform: translateY(-2px);
}

.au-points__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.au-flow {
  width: 100%;
  margin-top: var(--space-8);
  padding-top: var(--space-20);
  border-top: var(--border-hairline);
}

.au-flow__title {
  margin-bottom: var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.au-flow__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
}

.au-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.au-step__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  animation: count-pop 500ms ease-out both;
  animation-delay: calc(400ms + var(--i, 0) * 120ms);
}

.au-step__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.au-step__name {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.au-step__text {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-soft);
}

.au-copy__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.au-visual {
  position: relative;
  min-height: 620px;
  isolation: isolate;
}

.au-visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% 8% 12%;
  z-index: -1;
  border-radius: var(--radius-card);
  background: radial-gradient(circle at 60% 40%, rgba(95, 180, 156, 0.22), transparent 65%);
  filter: blur(8px);
}

.au-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.au-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease;
}

.au-shot:hover img {
  transform: scale(1.04);
}

.au-shot--tall {
  top: 0;
  right: 0;
  width: 62%;
  height: 88%;
  animation: mega-in 700ms ease-out 100ms both;
}

.au-shot--tall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 50%, rgba(7, 11, 10, 0.55));
  pointer-events: none;
}

.au-shot--wide {
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 60%;
  aspect-ratio: 3 / 2;
  border-color: var(--color-jade-ring);
  outline: 6px solid var(--surface-page);
  animation: mega-in 700ms ease-out 250ms both;
}

.au-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 14px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background-color: rgba(11, 19, 17, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  animation: count-pop 500ms ease-out 700ms both;
}

.au-chip--top {
  top: 6%;
  left: 6%;
  color: var(--color-jade-bright);
  border: 1px solid var(--color-jade-ring);
}

.au-chip--side {
  right: 4%;
  bottom: 18%;
  color: var(--color-warning);
  border: 1px solid rgba(232, 176, 75, 0.35);
  animation-delay: 850ms;
}

@media (max-width: 1099.98px) {
  .au__grid {
    gap: var(--space-40);
  }

  .au-visual {
    min-height: 540px;
  }
}

@media (max-width: 991.98px) {
  .au__grid {
    grid-template-columns: 1fr;
  }

  .au-visual {
    order: -1;
    width: 100%;
    max-width: 640px;
    min-height: 0;
    aspect-ratio: 1 / 0.95;
    margin-inline: auto;
  }
}

@media (max-width: 575.98px) {
  .au {
    padding-top: var(--space-32);
  }

  .au-points {
    grid-template-columns: 1fr;
  }

  .au-points li {
    flex-direction: row;
    align-items: center;
  }

  .au-flow__steps {
    grid-template-columns: 1fr;
  }

  .au-shot--wide {
    outline-width: 4px;
  }

  .au-chip {
    font-size: 11px;
    padding: 6px 10px;
  }

  .au-copy__acts,
  .au-copy__acts .btn {
    width: 100%;
  }
}

.hx {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 760px);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface-page);
}

.hx__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hx__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}

.hx__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, 0.95) 0%, rgba(7, 11, 10, 0.82) 45%, rgba(7, 11, 10, 0.35) 100%),
    linear-gradient(0deg, var(--surface-page) 0%, transparent 30%);
}

.hx__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-48);
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--space-96) var(--page-gutter) var(--space-64);
}

.hx__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  max-width: 680px;
  animation: mega-in 800ms ease-out both;
}

.hx__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-jade-bright);
  background-color: rgba(95, 180, 156, 0.14);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
}

.hx__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-jade);
}

.hx__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-jade);
  animation: pre-wave 2s ease-out infinite;
}

.hx__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
}

.hx__lead {
  max-width: 56ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.hx__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.hx__ghost {
  background-color: rgba(7, 11, 10, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hx__safe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.hx__safe i {
  color: var(--color-warning);
}

.hx__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  animation: mega-in 800ms ease-out 250ms both;
}

.hx-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: var(--space-16) var(--space-20);
  background-color: rgba(11, 19, 17, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--color-jade);
  border-radius: var(--radius-md);
}

.hx-stat strong {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.hx-stat span {
  font-size: var(--text-caption);
  color: var(--color-text-soft);
}

.hx-stat:nth-child(2) {
  border-left-color: var(--color-gold);
}

.hx-stat:nth-child(3) {
  border-left-color: var(--color-copper);
}

.hx__toggle {
  position: absolute;
  right: var(--page-gutter);
  bottom: var(--space-20);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 13px;
  color: var(--color-white);
  background-color: rgba(7, 11, 10, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.hx__toggle:hover {
  color: var(--color-ink);
  background-color: var(--color-jade);
}

.hx-tape {
  padding-block: 14px;
  overflow: hidden;
  background-color: var(--surface-card);
  border-block: var(--border-hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hx-tape__track {
  display: flex;
  width: max-content;
  animation: pre-tape 50s linear infinite;
}

.hx-tape:hover .hx-tape__track {
  animation-play-state: paused;
}

.hb,
.hc,
.hy {
  padding-top: var(--section-gap);
}

.hb__wrap,
.hs__wrap,
.hc__wrap,
.hy__wrap {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.hb__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
  margin-bottom: var(--space-32);
}

.hb__title,
.hs__title,
.hc__title,
.hy__title {
  margin-top: var(--space-8);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.hk {
  position: relative;
  outline: none;
}

.hk__stage {
  position: relative;
  height: 560px;
  perspective: 1400px;
  isolation: isolate;
}

.hk__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 180, 156, 0.2), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hk-card {
  --x: 0%;
  --s: 1;
  --r: 0deg;
  --z: 1;
  --o: 1;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--z);
  width: min(520px, 86vw);
  height: 100%;
  margin-left: calc(min(520px, 86vw) / -2);
  opacity: var(--o);
  transform: translateX(var(--x)) scale(var(--s)) rotateY(var(--r));
  transform-origin: center center;
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 650ms ease, filter 650ms ease;
  cursor: pointer;
}

.hk-card:not(.is-active) {
  filter: brightness(0.55) saturate(0.7);
}

.hk-card:not(.is-active):hover {
  filter: brightness(0.75) saturate(0.85);
}

.hk-card.is-hidden {
  pointer-events: none;
}

.hk-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base);
}

.hk-card.is-active .hk-card__link {
  border-color: var(--color-jade-ring);
}

.hk-card__link:hover {
  color: var(--color-text);
}

.hk-card__media {
  position: relative;
  display: block;
  flex: 0 0 52%;
  overflow: hidden;
  background-color: var(--surface-panel);
}

.hk-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 19, 17, 0.9));
  pointer-events: none;
}

.hk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}

.hk-card.is-active .hk-card__link:hover .hk-card__media img {
  transform: scale(1.05);
}

.hk-card__num {
  position: absolute;
  top: var(--space-16);
  right: var(--space-20);
  z-index: 1;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7);
}

.hk-card__media .cg-card__signal {
  z-index: 1;
}

.hk-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

.hk-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hk-card__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hk-card.is-active .hk-card__link:hover .cg-card__go {
  color: var(--color-ink);
  background-color: var(--color-jade);
  transform: rotate(-45deg);
}

.hk__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  margin-top: var(--space-32);
}

.hk__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--surface-card);
  border: var(--border-strong);
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.hk__arrow:hover {
  color: var(--color-ink);
  background-color: var(--color-jade);
  border-color: var(--color-jade);
}

.hk__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hk__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
}

.hk__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-line-muted);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.hk__dot:hover span {
  background-color: var(--color-text-soft);
}

.hk__dot.is-active span {
  width: 24px;
  background: var(--gradient-jade);
}

.hk__count {
  min-width: 64px;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  text-align: center;
  color: var(--color-text-soft);
}

@media (max-width: 767.98px) {
  .hk__stage {
    height: 500px;
  }

  .hk-card {
    width: 82vw;
    margin-left: -41vw;
  }

  .hk-card__num {
    font-size: 40px;
  }

  .hk-card__title {
    font-size: 18px;
  }

  .hk__dots {
    display: none;
  }
}

.hs {
  position: relative;
  margin-top: var(--section-gap);
  padding-block: var(--section-gap);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 0%, rgba(95, 180, 156, 0.12), transparent 55%), var(--surface-card);
  border-block: var(--border-hairline);
}

.hs__candles {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: min(1400px, 130%);
  max-width: none;
  opacity: 0.16;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-48);
  text-align: center;
}

.hs__text {
  max-width: 52ch;
  color: var(--color-text-soft);
}

.hs-stairs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-16);
}

.hs-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: calc(var(--i, 0) * 40px);
  padding: var(--space-24);
  background-color: rgba(7, 11, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: var(--border-hairline);
  border-top: 3px solid var(--color-jade);
  border-radius: var(--radius-card);
  transition: transform var(--transition-base), border-color var(--transition-base);
  animation: mega-in 600ms ease-out both;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.hs-step:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-strong);
  border-top-color: var(--color-jade-bright);
}

.hs-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hs-step__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
  box-shadow: var(--shadow-ring);
}

.hs-step__num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line-muted);
}

.hs-step__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.hs-step__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.hc__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-64);
}

.hc__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.hc__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transition: transform 900ms ease;
}

.hc__visual:hover img {
  transform: scale(1.04);
}

.hc__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.hc__text {
  max-width: 54ch;
  color: var(--color-text-muted);
}

.hc-card {
  width: 100%;
  margin-block: var(--space-8);
  background: radial-gradient(circle at 100% 0%, rgba(217, 181, 106, 0.12), transparent 55%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.hc-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  padding: var(--space-20) var(--space-24) var(--space-8);
}

.hc-card__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}

.hc-card__valid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 12px;
  color: var(--color-text-soft);
}

.hc-card__valid i {
  color: var(--color-jade);
}

.hc-card__tear::after {
  background:
    radial-gradient(circle at 0 50%, var(--surface-page) 11px, transparent 12px),
    radial-gradient(circle at 100% 50%, var(--surface-page) 11px, transparent 12px);
}

.hc-card__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.hc-card__table thead th {
  padding: var(--space-8) var(--space-24);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.hc-card__table tbody th,
.hc-card__table tbody td {
  padding: 12px var(--space-24);
  text-align: left;
  border-top: var(--border-hairline);
}

.hc-card__table tbody th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.hc-card__table tbody td {
  color: var(--color-text-soft);
}

.hc-card__table th:last-child,
.hc-card__table td:last-child {
  text-align: right;
}

.hc-card__table tbody tr:last-child > * {
  padding-bottom: var(--space-20);
}

.hc-card__mult {
  display: inline-block;
  min-width: 56px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-jade-bright);
  background-color: var(--color-jade-tint);
  border-radius: var(--radius-pill);
}

.hc-card__table tr.is-top .hc-card__mult {
  color: var(--color-ink);
  background-color: var(--color-gold);
}

.hy__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-64);
}

.hy__photo {
  position: relative;
  margin: 0;
}

.hy__photo img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border: var(--border-strong);
  border-radius: var(--radius-card);
  filter: saturate(0.85);
}

.hy__photo::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  z-index: -1;
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-card);
}

.hy__chip {
  position: absolute;
  left: var(--space-20);
  bottom: var(--space-20);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 10px var(--space-16);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: rgba(7, 11, 10, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-jade-ring);
  border-radius: var(--radius-pill);
}

.hy__chip i {
  color: var(--color-jade);
}

.hy__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.hy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  width: 100%;
  margin-top: var(--space-24);
}

.hy-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-20);
  background-color: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-base), transform var(--transition-base);
  animation: mega-in 500ms ease-out both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.hy-card:hover {
  border-color: var(--color-jade-ring);
  transform: translateY(-4px);
}

.hy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hy-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  color: var(--color-jade);
  background-color: var(--color-jade-tint);
  border-radius: 50%;
}

.hy-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-gold);
}

.hy-card__name {
  font-size: var(--text-body);
  color: var(--color-white);
}

.hy-card__text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-soft);
}

.he {
  width: 100%;
  max-width: calc(var(--page-max-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding: var(--section-gap) var(--page-gutter) 0;
}

.he__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: radial-gradient(circle at 0% 0%, rgba(95, 180, 156, 0.18), transparent 55%), var(--surface-card);
  border: var(--border-strong);
  border-radius: var(--radius-card);
}

.he__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-64) var(--space-48);
}

.he__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.he__text {
  max-width: 44ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.he__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.he__photo {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
}

.he__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-deep) 0%, transparent 35%);
  pointer-events: none;
}

.he__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
  transition: transform 900ms ease;
}

.he__band:hover .he__photo img {
  transform: scale(1.04);
}

:lang(ja) .hx__tag,
:lang(ja) .hc-card__label,
:lang(ja) .hc-card__table thead th {
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .hx__wrap {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hx__stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hx-stat {
    flex: 1 1 150px;
    min-width: 0;
  }


  .hs-stairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .hs-step {
    margin-bottom: 0;
  }

  .hc__wrap,
  .hy__wrap {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .hc__visual {
    aspect-ratio: 16 / 9;
  }

  .he__band {
    grid-template-columns: 1fr;
  }

  .he__photo {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .he__photo::after {
    background: linear-gradient(0deg, var(--color-deep) 0%, transparent 40%);
  }

  .hy__photo::before {
    inset: 16px -12px -12px 16px;
  }
}

@media (max-width: 575.98px) {
  .hx {
    min-height: 0;
  }

  .hx__wrap {
    padding-block: var(--space-64) var(--space-48);
  }

  .hx__cta,
  .hx__cta .btn {
    width: 100%;
  }

  .hx-stat strong {
    font-size: 28px;
  }

  .hs-stairs,
  .hy-grid {
    grid-template-columns: 1fr;
  }

  .hc-card__table thead th,
  .hc-card__table tbody th,
  .hc-card__table tbody td {
    padding-inline: var(--space-16);
  }

  .hc-card__table td.num {
    font-size: 12px;
  }

  .he__body {
    padding: var(--space-32) var(--space-20);
  }

  .he__cta,
  .he__cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #preloader *,
  #preloader *::before {
    animation: none !important;
  }

  .pre__pulse polyline {
    stroke-dasharray: none;
  }

  .pre__lines span:first-child {
    opacity: 1;
  }

  [data-ft] [data-reveal] {
    opacity: 1;
    transform: none;
  }
}