:root {
  --color-pale-sage: #eef2e3;
  --color-sage-deep: #e1e8cf;
  --color-paper-white: #fcfcfc;
  --color-ink-black: #000000;
  --color-charcoal: #242423;
  --color-muted: #4f5b52;
  --color-line: #cdd6bd;
  --color-deep-forest: #043f2e;
  --color-forest-mid: #2a6f2b;
  --color-chartreuse-lime: #c8f169;
  --color-vivid-green: #78c51c;

  --color-text: var(--color-deep-forest);
  --color-text-soft: var(--color-charcoal);
  --color-text-muted: var(--color-muted);
  --color-text-inverse: var(--color-paper-white);
  --color-accent: var(--color-chartreuse-lime);
  --color-accent-ink: var(--color-ink-black);
  --color-accent-hover: var(--color-forest-mid);
  --color-accent-hover-ink: var(--color-paper-white);
  --color-focus: var(--color-forest-mid);

  --color-success: #2a6f2b;
  --color-success-bg: #e3efd2;
  --color-error: #a8261c;
  --color-error-bg: #fbe8e5;
  --color-warning: #7a5200;
  --color-warning-bg: #f6ecd0;
  --color-info: #043f2e;
  --color-info-bg: #e1e8cf;

  --surface-canvas: var(--color-pale-sage);
  --surface-raised: var(--color-paper-white);
  --surface-band: var(--color-sage-deep);
  --surface-dark: var(--color-deep-forest);
  --surface-accent: var(--color-chartreuse-lime);

  --font-display: 'Fraunces', 'Noto Serif JP', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display-ja: 'Noto Serif JP', 'Fraunces', ui-serif, Georgia, serif;
  --font-body-ja: 'Noto Sans JP', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.06em;
  --text-body-sm: 14px;
  --leading-body-sm: 1.45;
  --tracking-body-sm: 0;
  --text-body: 16px;
  --leading-body: 1.55;
  --tracking-body: 0;
  --text-subheading: 18px;
  --leading-subheading: 1.44;
  --tracking-subheading: 0;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0;
  --text-heading: clamp(28px, 2.2vw + 18px, 36px);
  --leading-heading: 1.1;
  --tracking-heading: -0.02em;
  --text-heading-lg: clamp(36px, 3.6vw + 20px, 56px);
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: -0.03em;
  --text-display: clamp(44px, 6.4vw + 18px, 96px);
  --leading-display: 0.95;
  --tracking-display: -0.031em;
  --text-index: clamp(32px, 2.4vw + 20px, 44px);

  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  --page-max-width: 1200px;
  --page-gutter: clamp(16px, 4vw, 32px);
  --section-gap: clamp(56px, 6vw, 80px);
  --card-padding: clamp(16px, 2vw, 24px);
  --element-gap: clamp(12px, 1.4vw, 20px);
  --grid-gap: clamp(16px, 2vw, 24px);

  --radius-sm: 4px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-buttons: var(--radius-sm);
  --radius-inputs: var(--radius-sm);
  --radius-tags: var(--radius-pill);
  --radius-cards: var(--radius-lg);
  --radius-largesurfaces: var(--radius-lg);

  --border-hairline: 1px solid var(--color-line);
  --border-ink: 1px solid var(--color-ink-black);
  --focus-ring: 0 0 0 2px var(--color-paper-white), 0 0 0 4px var(--color-focus);

  --control-height: 48px;
  --touch-target: 44px;

  --duration-fast: 150ms;
  --duration-base: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

:root:lang(ja) {
  --font-display: var(--font-display-ja);
  --font-body: var(--font-body-ja);
  --tracking-caption: 0.04em;
  --tracking-heading: 0;
  --tracking-heading-lg: 0;
  --tracking-display: 0;
  --leading-body: 1.8;
  --leading-body-sm: 1.7;
  --leading-subheading: 1.7;
  --leading-heading-sm: 1.45;
  --leading-heading: 1.4;
  --leading-heading-lg: 1.35;
  --leading-display: 1.3;
  --text-display: clamp(34px, 4.6vw + 16px, 72px);
  --text-heading-lg: clamp(30px, 2.8vw + 16px, 48px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

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

[hidden] {
  display: none !important;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--spacing-16);
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
}

h1 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

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

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

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

:root:lang(ja) h1,
:root:lang(ja) h2 {
  font-weight: var(--font-weight-medium);
}

p {
  margin: 0 0 var(--spacing-16);
}

ul,
ol {
  margin: 0 0 var(--spacing-16);
  padding-left: var(--spacing-20);
}

small {
  font-size: var(--text-body-sm);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-forest-mid);
}

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

hr {
  margin: var(--spacing-24) 0;
  border: 0;
  border-top: var(--border-hairline);
}

table {
  width: 100%;
  border-collapse: collapse;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-inputs);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  accent-color: var(--color-forest-mid);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

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

::selection {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

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

.sr-only {
  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);
  background-color: var(--surface-dark);
  border-bottom: 4px solid var(--color-chartreuse-lime);
  transition: transform 0.8s var(--ease-standard);
}

.preloader--done {
  transform: translateY(-100%);
}

.preloader__type {
  position: relative;
  display: inline-block;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.preloader--done .preloader__type {
  opacity: 0;
}

.preloader__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-text-inverse);
  white-space: nowrap;
}

.preloader__mask {
  position: absolute;
  top: -6%;
  right: -8px;
  bottom: -6%;
  width: calc(100% + 8px);
  background-color: var(--surface-dark);
  border-left: 3px solid var(--color-chartreuse-lime);
  animation: preloader-type 0.9s steps(14, end) 0.15s forwards, preloader-caret 0.8s step-end 1.05s infinite;
}

@keyframes preloader-type {
  to {
    width: 8px;
  }
}

@keyframes preloader-caret {
  50% {
    border-left-color: transparent;
  }
}

@media (max-width: 480px) {
  .preloader__name {
    font-size: var(--text-heading);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: opacity var(--duration-base) linear;
  }

  .preloader--done {
    transform: none;
    opacity: 0;
  }

  .preloader__mask {
    width: 8px;
    animation: none;
  }
}

:root {
  --topbar-h: 72px;
  --on-dark-soft: rgba(252, 252, 252, 0.72);
  --on-dark-line: rgba(252, 252, 252, 0.16);
}

html.is-locked {
  overflow: hidden;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--control-height);
  padding: var(--spacing-12) var(--spacing-20);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.button:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover-ink);
}

.button--small {
  min-height: 40px;
  padding: var(--spacing-8) var(--spacing-16);
  font-size: var(--text-body-sm);
}

.button--full {
  width: 100%;
}

.button--ghost {
  background-color: transparent;
  color: var(--color-ink-black);
  border-color: var(--color-ink-black);
}

.button--ghost:hover {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.button--ghost-light {
  background-color: transparent;
  color: var(--color-paper-white);
  border-color: var(--color-paper-white);
}

.button--ghost-light:hover {
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface-raised);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.topbar.is-lifted {
  border-bottom-color: var(--color-line);
}

.topbar__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  height: var(--topbar-h);
}

.mark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-deep-forest);
}

.mark:hover {
  color: var(--color-deep-forest);
}

.mark__logo {
  width: auto;
  height: 32px;
}

.mark__word {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav {
  display: none;
  margin: 0 auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target);
  padding: 0 var(--spacing-12);
  background: none;
  border: 0;
  color: var(--color-deep-forest);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--color-forest-mid);
}

.nav__link.is-current {
  color: var(--color-forest-mid);
  font-weight: var(--font-weight-semibold);
}

.plus {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-standard);
}

.plus::after {
  transform: rotate(90deg);
}

[aria-expanded="true"] > .plus::before {
  transform: rotate(45deg);
}

[aria-expanded="true"] > .plus::after {
  transform: rotate(135deg);
}

.tools {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-left: auto;
}

.tools__slot {
  position: relative;
}

.tools__slot--wide {
  display: none;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-12);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.tool:hover,
.tool[aria-expanded="true"] {
  color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
}

.tool__icon {
  font-size: 14px;
}

.tool__rule {
  width: 1px;
  height: 14px;
  background-color: var(--color-line);
}

.tool__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool--credits {
  background-color: var(--color-sage-deep);
}

.tool--credits:hover {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.tool--bag {
  gap: 0;
  padding: 0;
  border-color: var(--color-line);
  overflow: hidden;
}

.tool--bag .tool__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
}

.tool__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 38px;
  padding: 0 var(--spacing-8);
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0 11px;
  background-color: var(--color-deep-forest);
  border: 0;
  border-radius: var(--radius-sm);
}

.burger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-paper-white);
  transition: transform 0.3s var(--ease-standard), width 0.3s var(--ease-standard);
}

.burger__line:last-child {
  width: 60%;
}

.burger:hover .burger__line:last-child {
  width: 100%;
}

.burger[aria-expanded="true"] .burger__line:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:last-child {
  width: 100%;
  transform: translateY(-4.5px) rotate(-45deg);
}

.pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 5;
  width: 280px;
  padding: var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round var(--radius-cards));
  transition: clip-path 0.3s var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), visibility 0s linear 0.3s;
}

.pop.is-open {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0 round var(--radius-cards));
  transition: clip-path 0.3s var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), visibility 0s;
}

.pop__label {
  margin: 0 0 var(--spacing-8);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .pop__label,
:root:lang(ja) .sheet__label {
  text-transform: none;
}

.choices {
  margin: 0 0 var(--spacing-16);
  padding: 0;
  list-style: none;
}

.choices:last-child {
  margin-bottom: 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target);
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.choice:hover {
  background-color: var(--color-pale-sage);
  color: var(--color-deep-forest);
}

.choice__dot {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-deep-forest);
  border-radius: 50%;
}

.choice.is-picked .choice__dot {
  background-color: var(--color-deep-forest);
}

.choice.is-picked .choice__dot::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  background-color: var(--color-chartreuse-lime);
  border-radius: 50%;
}

.choice__text {
  flex: 1;
}

.choice.is-picked .choice__text {
  font-weight: var(--font-weight-medium);
}

.choice__code {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.tool__flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}

.choice__flag {
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 2px;
}

.pop--cats {
  left: 50%;
  right: auto;
  width: 560px;
  transform: translateX(-50%);
}

.choices--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4) var(--spacing-8);
}

.choices--grid .choice {
  position: relative;
  padding: var(--spacing-8);
  overflow: hidden;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.choices--grid .choice::after {
  content: "";
  position: absolute;
  left: var(--spacing-8);
  right: var(--spacing-8);
  bottom: 0;
  height: 1px;
  background-color: var(--color-deep-forest);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-standard);
}

.choices--grid .choice:hover::after,
.choices--grid .choice:focus-visible::after {
  transform: scaleX(1);
}

.choices--grid .choice__text {
  line-height: 1.3;
  transition: transform var(--duration-base) var(--ease-standard);
}

.choices--grid .choice:hover .choice__text,
.choices--grid .choice:focus-visible .choice__text {
  transform: translateX(2px);
}

.choice__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.choice:hover .choice__num,
.choice:focus-visible .choice__num,
.choice.is-picked .choice__num {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.choice:hover .choice__num,
.choice:focus-visible .choice__num {
  transform: rotate(-6deg);
}

.choice__go {
  flex-shrink: 0;
  color: var(--color-deep-forest);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.choice:hover .choice__go,
.choice:focus-visible .choice__go {
  opacity: 1;
  transform: none;
}

.choices--grid .choice:hover {
  background-color: transparent;
}

.choices--grid .choice.is-picked {
  background-color: var(--color-pale-sage);
}

.choices__subs {
  margin: 0 0 var(--spacing-4);
  padding: 0 0 0 46px;
  list-style: none;
}

.choices__subs a {
  display: block;
  padding: var(--spacing-4) 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.choices__subs a:hover,
.choices__subs a.is-picked {
  color: var(--color-deep-forest);
}

.pop__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-8) 0;
  border-top: var(--border-hairline);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.pop__all:hover {
  color: var(--color-forest-mid);
}

.pop__who {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--spacing-12);
  padding: 0 var(--spacing-8) var(--spacing-12);
  border-bottom: var(--border-hairline);
  font-size: var(--text-body-sm);
}

.pop__who span {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.pop__who strong {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pop__links a {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: var(--touch-target);
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  transition: background-color var(--duration-fast) var(--ease-standard), padding var(--duration-fast) var(--ease-standard);
}

.pop__links a i {
  width: 16px;
  color: var(--color-forest-mid);
  text-align: center;
}

.pop__links a:hover {
  padding-left: var(--spacing-12);
  background-color: var(--color-pale-sage);
  color: var(--color-deep-forest);
}

.pop__links .pop__out,
.pop__links .pop__out i {
  color: var(--color-error);
}

.pop__links .pop__out:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(4, 63, 46, 0.32);
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

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

.sheet {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface-dark);
  color: var(--color-text-inverse);
  visibility: hidden;
  clip-path: circle(0 at calc(100% - var(--page-gutter) - 22px) 0);
  transition: clip-path 0.55s var(--ease-standard), visibility 0s linear 0.55s;
}

.sheet.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - var(--page-gutter) - 22px) 0);
  transition: clip-path 0.55s var(--ease-standard), visibility 0s;
}

.sheet__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  min-height: 100%;
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-32);
}

.sheet__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--on-dark-line);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  cursor: pointer;
  list-style: none;
}

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

.sheet__link:hover,
.sheet__link.is-current {
  color: var(--color-chartreuse-lime);
}

.sheet__link .plus {
  width: 14px;
  height: 14px;
}

.sheet__group[open] > .sheet__link .plus::before {
  transform: rotate(45deg);
}

.sheet__group[open] > .sheet__link .plus::after {
  transform: rotate(135deg);
}

.sheet__cats {
  margin: 0;
  padding: var(--spacing-8) 0 var(--spacing-12);
  border-bottom: 1px solid var(--on-dark-line);
  list-style: none;
}

.sheet__cats a {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-12);
  padding: var(--spacing-8) 0;
  color: var(--on-dark-soft);
}

.sheet__cats a:hover,
.sheet__cats a.is-current {
  color: var(--color-text-inverse);
}

.sheet__num {
  min-width: 24px;
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.sheet__label {
  margin: 0 0 var(--spacing-8);
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--spacing-16);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-tags);
  font-size: var(--text-body-sm);
}

.chip:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-paper-white);
}

.chip.is-picked {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.sheet__foot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin-top: auto;
}

.sheet__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding-top: var(--spacing-8);
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.sheet__mail:hover {
  color: var(--color-text-inverse);
}

.bag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background-color: var(--surface-raised);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-standard), visibility 0s linear 0.4s;
}

.bag.is-open {
  visibility: visible;
  transform: none;
  transition: transform 0.4s var(--ease-standard), visibility 0s;
}

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

.bag__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
}

.bag__qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 var(--spacing-8);
  background-color: var(--color-chartreuse-lime);
  border-radius: var(--radius-tags);
  color: var(--color-ink-black);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.bag__close {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.bag__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background-color: var(--color-deep-forest);
  transform: rotate(45deg);
}

.bag__close span:last-child {
  transform: rotate(-45deg);
}

.bag__close:hover {
  border-color: var(--color-deep-forest);
  transform: rotate(90deg);
}

.bag__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-8) var(--spacing-24);
}

.bag__lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bag__line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: var(--spacing-16);
  padding: var(--spacing-16) 0;
  border-bottom: var(--border-hairline);
}

.bag__line:last-child {
  border-bottom: 0;
}

.bag__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
}

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

.bag__info {
  min-width: 0;
}

.bag__info p {
  margin: 0;
}

.bag__name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.bag__info .bag__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.bag__level {
  padding: 2px var(--spacing-8);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-tags);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
}

.bag__info .bag__price {
  margin-top: var(--spacing-4);
  font-weight: var(--font-weight-semibold);
}

.bag__drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 13px;
}

.bag__drop:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-40) 0;
  text-align: center;
}

.bag__empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-16);
  background-color: var(--color-sage-deep);
  border-radius: 50%;
  color: var(--color-forest-mid);
  font-size: 22px;
}

.bag__empty-title {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}

.bag__empty-text {
  max-width: 300px;
  margin-bottom: var(--spacing-20);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.bag__foot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-24);
  background-color: var(--color-pale-sage);
}

.bag__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.bag__row--total {
  color: var(--color-text);
  font-size: var(--text-body);
}

.bag__row--total strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.bag__row--total small {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

.bag__back {
  align-self: center;
  padding: var(--spacing-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
}

.bag__back:hover {
  color: var(--color-forest-mid);
}

@media (min-width: 640px) {
  .bag {
    top: calc(var(--topbar-h) + 12px);
    left: auto;
    right: var(--page-gutter);
    bottom: auto;
    width: 400px;
    max-height: calc(100vh - var(--topbar-h) - 24px);
    border: var(--border-hairline);
    border-radius: var(--radius-cards);
    opacity: 0;
    transform: translateY(-12px);
    transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard), visibility 0s linear 0.3s;
  }

  .bag.is-open {
    opacity: 1;
    transform: none;
    transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard), visibility 0s;
  }
}

@media (min-width: 1100px) {
  .nav {
    display: block;
  }

  .tools__slot--wide {
    display: inline-flex;
  }

  .burger,
  .sheet {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --topbar-h: 64px;
  }

  .mark__logo {
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .pop,
  .pop.is-open,
  .sheet,
  .sheet.is-open,
  .bag,
  .bag.is-open {
    transition-duration: 0s;
  }
}

.foot {
  margin-top: var(--section-gap);
  padding-top: var(--spacing-56);
  background-color: var(--surface-dark);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
}

.foot a {
  transition: color var(--duration-fast) var(--ease-standard);
}

.foot a:hover {
  color: var(--color-chartreuse-lime);
}

.foot__panel {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-cards);
}

.foot__id {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-32) var(--card-padding);
  background-color: var(--surface-raised);
  color: var(--color-text);
}

.foot__logo {
  display: inline-flex;
  align-self: flex-start;
}

.foot__logo img {
  width: auto;
  height: 36px;
}

.foot__logo span {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.foot__id .foot__logo:hover {
  color: var(--color-deep-forest);
}

.foot__intro {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-muted);
}

.foot__reach {
  display: grid;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-20) 0 0;
  border-top: var(--border-hairline);
  list-style: none;
}

.foot__reach li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  overflow-wrap: anywhere;
}

.foot__reach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
}

.foot__reach-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.foot__id .foot__reach a {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-line);
}

.foot__id .foot__reach a:hover {
  color: var(--color-forest-mid);
  border-bottom-color: currentColor;
}

.foot__news {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-32) var(--card-padding);
  background-color: var(--surface-accent);
  color: var(--color-ink-black);
}

.foot__news-title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-heading);
}

.foot__news-text {
  max-width: 480px;
  margin: 0 0 var(--spacing-24);
  color: var(--color-charcoal);
}

.foot__form {
  display: flex;
  gap: var(--spacing-8);
  max-width: 480px;
}

.foot__input {
  flex: 1;
  min-width: 0;
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.foot__input::placeholder {
  color: var(--color-muted);
}

.foot__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.foot__submit {
  flex-shrink: 0;
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.foot__submit:hover {
  background-color: var(--color-forest-mid);
  border-color: var(--color-forest-mid);
  color: var(--color-paper-white);
}

.foot__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  max-width: 480px;
  margin: var(--spacing-12) 0 0;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.foot__note[hidden] {
  display: none;
}

.foot__note--bad {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.foot__note--ok {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.foot__rows {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-24);
}

.foot__row {
  display: grid;
  gap: var(--spacing-8);
  padding: var(--spacing-20) 0;
  border-bottom: 1px solid var(--on-dark-line);
}

.foot__label {
  margin: 0;
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .foot__label {
  text-transform: none;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__links a {
  display: inline-block;
  padding: var(--spacing-4) 0;
}

.foot__base {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24) 0 var(--spacing-32);
}

.foot__copy {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
}

.foot__copy a {
  color: var(--color-text-inverse);
}

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

.foot__pay {
  width: auto;
  height: 26px;
}

.foot__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.foot__top:hover {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

@media (max-width: 479px) {
  .foot__form {
    flex-direction: column;
  }
}

@media (min-width: 900px) {
  .foot__panel {
    grid-template-columns: 1fr 1fr;
  }

  .foot__id,
  .foot__news {
    padding: var(--spacing-40);
  }
}

@media (min-width: 768px) {
  .foot__row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: var(--spacing-40);
  }

  .foot__base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.consent {
  position: fixed;
  left: var(--spacing-12);
  right: var(--spacing-12);
  bottom: var(--spacing-12);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-height: calc(100vh - var(--spacing-24));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-20);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-top: 3px solid var(--color-chartreuse-lime);
  border-radius: var(--radius-cards);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  animation: consent-in 0.5s var(--ease-standard) 0.8s both;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

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

.consent__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-sm);
  color: var(--color-chartreuse-lime);
  font-size: 16px;
}

.consent__icon i {
  transform-origin: 50% 60%;
  animation: consent-nibble 4s ease-in-out 1.6s infinite;
}

@keyframes consent-nibble {
  0%,
  86%,
  100% {
    transform: rotate(0);
  }

  90% {
    transform: rotate(-14deg);
  }

  95% {
    transform: rotate(10deg);
  }
}

.consent__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.consent__intro {
  margin: 0;
  color: var(--color-text-muted);
}

.consent__intro a {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

.consent__intro a:hover {
  color: var(--color-forest-mid);
  border-bottom-color: currentColor;
}

.consent__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-standard);
}

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

.consent__fold > * {
  min-height: 0;
  overflow: hidden;
}

.consent__prefs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.consent__fold.is-open > .consent__prefs {
  padding-bottom: var(--spacing-4);
}

.consent__cats {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline);
}

.consent__cat {
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-hairline);
}

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

.consent__name {
  font-weight: var(--font-weight-medium);
}

.consent .consent__switch {
  position: relative;
  width: 40px;
  min-height: 0;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background-color: var(--color-line);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.consent .consent__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background-color: var(--color-paper-white);
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.consent .consent__switch:checked {
  background-color: var(--color-deep-forest);
}

.consent .consent__switch:checked::after {
  background-color: var(--color-chartreuse-lime);
  transform: translateX(18px);
}

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

.consent .consent__switch:focus-visible {
  box-shadow: var(--focus-ring);
}

.consent__info {
  margin: var(--spacing-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}

.consent__peek,
.consent__more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) 0;
  background: none;
  border: 0;
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.consent__peek {
  margin-top: var(--spacing-4);
}

.consent__peek:hover,
.consent__more:hover {
  color: var(--color-forest-mid);
}

.consent__peek .plus,
.consent__more .plus {
  width: 8px;
  height: 8px;
}

.consent__list {
  display: grid;
  gap: var(--spacing-8);
  margin: var(--spacing-8) 0 0;
  padding: 0;
  list-style: none;
}

.consent__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}

.consent__cookie {
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.consent__dur {
  color: var(--color-forest-mid);
  white-space: nowrap;
}

.consent__desc {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
}

.consent__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.consent__act {
  margin: 0;
}

.consent__act--main {
  flex: 1 1 100%;
}

.consent__act button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-deep-forest);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.consent__act--main button {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.consent__act--main button:hover {
  background-color: var(--color-forest-mid);
  border-color: var(--color-forest-mid);
  color: var(--color-paper-white);
}

.consent__act--soft button {
  background-color: transparent;
  color: var(--color-deep-forest);
}

.consent__act--soft button:hover {
  background-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.consent__more {
  margin-left: auto;
}

@media (min-width: 640px) {
  .consent {
    left: var(--spacing-24);
    right: auto;
    bottom: var(--spacing-24);
    width: 380px;
    max-height: calc(100vh - var(--topbar-h) - 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent__icon i {
    animation: none;
  }

  .consent__fold {
    transition: none;
  }
}

.toasts {
  position: fixed;
  top: calc(var(--topbar-h) + var(--spacing-12));
  left: var(--spacing-12);
  right: var(--spacing-12);
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  pointer-events: none;
}

.toast {
  --toast-tone: var(--color-forest-mid);
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: auto;
  transition: grid-template-rows 0.4s var(--ease-standard);
}

.toast--bad {
  --toast-tone: var(--color-error);
}

.toast__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  min-height: 0;
  overflow: hidden;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-left: 3px solid var(--toast-tone);
  border-radius: var(--radius-cards);
  color: var(--color-text);
  animation: toast-in 0.55s var(--ease-standard) both;
}

.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  animation: toast-pop 0.45s var(--ease-standard) 0.3s both;
}

.toast--ok .toast__icon {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.toast--bad .toast__icon {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.toast__body {
  min-width: 0;
}

.toast__head {
  margin: 0 0 2px;
  color: var(--toast-tone);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .toast__head {
  text-transform: none;
}

.toast__msg {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.toast__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 13px;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.toast__close:hover {
  background-color: var(--color-pale-sage);
  color: var(--color-deep-forest);
}

.toast__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.toast__ring circle {
  fill: none;
  stroke: var(--color-chartreuse-lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 0;
  animation: toast-count 5s linear 0.55s forwards;
}

.toast.is-paused .toast__ring circle {
  animation-play-state: paused;
}

.toast.is-leaving {
  grid-template-rows: 0fr;
}

.toast.is-leaving .toast__card {
  animation: toast-out 0.35s var(--ease-standard) forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 24px));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
}

@keyframes toast-pop {
  from {
    transform: scale(0.5);
  }

  60% {
    transform: scale(1.12);
  }

  to {
    transform: scale(1);
  }
}

@keyframes toast-count {
  to {
    stroke-dashoffset: 113.1;
  }
}

@media (min-width: 640px) {
  .toasts {
    left: auto;
    right: var(--page-gutter);
    width: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast__card,
  .toast__icon,
  .toast.is-leaving .toast__card {
    transition: none;
    animation: none;
  }
}

.crumbs {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-band);
  border-bottom: var(--border-hairline);
}

.crumbs--slim {
  padding: var(--spacing-16) 0;
}

.crumbs--full {
  display: flex;
  align-items: center;
  min-height: 240px;
  padding: var(--spacing-40) 0;
}

.crumbs__inner {
  position: relative;
  z-index: 1;
}

.crumbs__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crumbs__art {
  position: absolute;
  top: 10%;
  right: -10%;
  bottom: -4%;
  width: 120%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  mix-blend-mode: multiply;
  opacity: 0.22;
  translate: calc(var(--px, 0) * -24px) calc(var(--py, 0) * -14px);
  transition: translate 0.8s var(--ease-standard);
  animation: crumbs-breathe 18s ease-in-out infinite alternate, crumbs-art-in 1s var(--ease-standard) both;
}

@keyframes crumbs-breathe {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes crumbs-art-in {
  from {
    opacity: 0;
  }
}

.crumbs__shape {
  position: absolute;
  display: block;
  transition: translate 0.8s var(--ease-standard);
}

.crumbs__shape--tile {
  top: 22%;
  right: 6%;
  width: 18px;
  height: 18px;
  background-color: var(--color-deep-forest);
  border-radius: 4px;
  translate: calc(var(--px, 0) * 44px) calc(var(--py, 0) * 30px);
  animation: crumbs-tumble 12s linear infinite;
}

@keyframes crumbs-tumble {
  from {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(180deg) translateY(10px);
  }

  to {
    transform: rotate(360deg) translateY(0);
  }
}

.crumbs__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-sm);
}

.crumbs--full .crumbs__trail {
  margin-bottom: var(--spacing-16);
  animation: crumbs-fade 0.6s var(--ease-standard) 0.1s both;
}

.crumbs__step {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
}

.crumbs__step + .crumbs__step::before {
  content: "\f054";
  color: var(--color-forest-mid);
  font-family: "Font Awesome 5 Free";
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.crumbs__link {
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.crumbs__link:hover {
  color: var(--color-deep-forest);
  border-bottom-color: var(--color-chartreuse-lime);
}

.crumbs__here {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.crumbs__title {
  max-width: 640px;
  margin: 0;
  overflow: hidden;
  color: var(--color-deep-forest);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.crumbs__line {
  display: inline-block;
  padding-bottom: 0.08em;
  animation: crumbs-rise 0.8s var(--ease-standard) 0.2s both;
}

@keyframes crumbs-rise {
  from {
    transform: translateY(105%);
  }

  to {
    transform: none;
  }
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 900px) {
  .crumbs--full {
    min-height: 340px;
  }

  .crumbs__art {
    top: 6%;
    right: 0;
    bottom: 0;
    width: 56%;
    opacity: 1;
  }

  .crumbs--art .crumbs__inner > * {
    max-width: 44%;
  }

}

@media (prefers-reduced-motion: reduce) {
  .crumbs__art,
  .crumbs__shape,
  .crumbs__line,
  .crumbs--full .crumbs__trail {
    animation: none;
    transition: none;
  }
}

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

.gate__card {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--spacing-32) var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  animation: gate-in 0.5s var(--ease-standard) 0.2s both;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.gate__head {
  margin-bottom: var(--spacing-24);
  text-align: center;
}

.gate__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.gate__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.gate__note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-20);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

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

.gate__note--bad {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.gate__note--ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.gate__field {
  display: flex;
  flex-direction: column;
}

.gate__field > label {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.gate__field input.is-invalid {
  border-color: var(--color-error);
}

.gate__field input.is-invalid:focus {
  box-shadow: 0 0 0 2px var(--color-paper-white), 0 0 0 4px var(--color-error);
}

.gate__err {
  display: block;
  margin-top: 6px;
  color: var(--color-error);
  font-size: var(--text-caption);
  line-height: 1.4;
}

.gate__pass {
  position: relative;
}

.gate__pass input {
  padding-right: 52px;
}

.gate__eye {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.gate__eye:hover,
.gate__eye[aria-pressed="true"] {
  background-color: var(--color-pale-sage);
  color: var(--color-deep-forest);
}

.gate__forgot {
  align-self: flex-end;
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
}

.gate__check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  cursor: pointer;
}

.gate__check input {
  width: 18px;
  height: 18px;
}

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

.gate__cap {
  flex-shrink: 0;
}

.gate__cap img {
  display: block;
  width: auto;
  height: var(--control-height);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.gate__capline input {
  flex: 1;
  min-width: 0;
}

.gate__link {
  color: var(--color-deep-forest);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.gate__link:hover {
  color: var(--color-forest-mid);
  border-bottom-color: var(--color-chartreuse-lime);
}

.gate__link--strong {
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--color-chartreuse-lime);
}

.gate__switch {
  margin: var(--spacing-24) 0 0;
  padding-top: var(--spacing-20);
  border-top: var(--border-hairline);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  text-align: center;
}

@media (min-width: 640px) {
  .gate__card {
    padding: var(--spacing-40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate__card {
    animation: none;
  }
}

.gate__card--wide {
  max-width: 640px;
}

.reach {
  max-width: 960px;
  margin: 0 auto var(--spacing-40);
}

.reach__head {
  max-width: 560px;
  margin: 0 auto var(--spacing-24);
  text-align: center;
}

.reach__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.reach__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.reach__tiles {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
}

.reach__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--card-padding);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.reach__tile:hover {
  border-color: var(--color-deep-forest);
  transform: translateY(-3px);
}

.reach__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-8);
  background-color: var(--color-pale-sage);
  border-radius: 50%;
  color: var(--color-deep-forest);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.reach__tile:hover .reach__icon {
  background-color: var(--color-chartreuse-lime);
}

.reach__tile dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .reach__tile dt {
  text-transform: none;
}

.reach__tile dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .reach__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reach__tile:hover {
    transform: none;
  }
}

.gate__field select.is-invalid,
.gate__field textarea.is-invalid {
  border-color: var(--color-error);
}

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

.co-steps {
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 0 auto var(--spacing-40);
  padding: 0;
  list-style: none;
}

.co-steps__item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.co-steps__item:first-child {
  flex: 0 0 auto;
}

.co-steps__item + .co-steps__item::before {
  content: "";
  flex: 1;
  min-width: 16px;
  height: 2px;
  margin-right: var(--spacing-4);
  background-color: var(--color-line);
  border-radius: 2px;
}

.co-steps__item.is-done + .co-steps__item::before {
  background-color: var(--color-deep-forest);
}

.co-steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--surface-raised);
  border: 1.5px solid var(--color-line);
  border-radius: 50%;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.co-steps__item.is-done,
.co-steps__item.is-active {
  color: var(--color-deep-forest);
}

.co-steps__item.is-done .co-steps__no {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.co-steps__item.is-active .co-steps__no {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.co__grid {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
}

.co__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

.co-sec {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.co-sec__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-20);
  padding-bottom: var(--spacing-16);
  border-bottom: var(--border-hairline);
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
}

.co-sec__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.co-sec:focus-within .co-sec__no {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.co-sec__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.co-req {
  color: var(--color-error);
}

.co-agree {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.co-agree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--surface-canvas);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

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

.co-agree__row:has(input:checked) {
  background-color: var(--color-sage-deep);
  border-color: var(--color-forest-mid);
}

.co-agree__row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.co-facts {
  padding: var(--spacing-16);
  background-color: var(--color-info-bg);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.co-facts__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-8);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.co-facts__list {
  margin: 0;
  padding-left: var(--spacing-20);
  color: var(--color-charcoal);
}

.co-facts__list li + li {
  margin-top: var(--spacing-4);
}

.co-sum {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.co-sum__title {
  margin: 0;
  padding-bottom: var(--spacing-12);
  border-bottom: var(--border-hairline);
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
}

.co-sum__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.co-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
}

.co-sum__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
}

.co-sum__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  font-size: 12px;
}

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

.co-sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-16);
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-sm);
  color: var(--color-paper-white);
  font-size: var(--text-body-sm);
}

.co-sum__total strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.co-bill {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: 1.9;
}

.co-bill__end {
  white-space: nowrap;
}

.co-bill .co-bill__img {
  display: inline-block;
  width: auto;
  height: 1.8em;
  max-width: 100%;
  margin-left: var(--spacing-4);
  vertical-align: middle;
}

.co-sum__pay i {
  font-size: 14px;
}

.co-sum__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.co-sum__secure i {
  color: var(--color-forest-mid);
}

.co-sum__methods {
  width: auto;
  height: 26px;
  margin: 0 auto;
}

@media (max-width: 479px) {
  .co-steps__item span:last-child {
    display: none;
  }

  .co-steps__item.is-active span:last-child {
    display: inline;
  }
}

@media (min-width: 640px) {
  .co-sec,
  .co-sum {
    padding: var(--spacing-32);
  }
}

@media (min-width: 1000px) {
  .co__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--spacing-32);
  }

  .co-sum {
    position: sticky;
    top: calc(var(--topbar-h) + var(--spacing-16));
  }
}

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

.credit__block {
  margin-bottom: var(--spacing-56);
}

.credit__head {
  max-width: 640px;
  margin: 0 auto var(--spacing-32);
  text-align: center;
}

.credit__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.credit__text {
  margin: 0;
  color: var(--color-text-muted);
}

.ladder {
  overflow-x: auto;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.ladder__table {
  min-width: 520px;
}

.ladder__table thead th {
  padding: var(--spacing-12) var(--spacing-20);
  background-color: var(--color-sage-deep);
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-align: left;
  text-transform: uppercase;
}

:root:lang(ja) .ladder__table thead th {
  text-transform: none;
}

.ladder__row {
  border-top: var(--border-hairline);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.ladder__row th,
.ladder__row td {
  padding: var(--spacing-16) var(--spacing-20);
  text-align: left;
  vertical-align: middle;
}

.ladder__row:hover {
  background-color: var(--color-pale-sage);
}

.ladder__tier {
  font-weight: var(--font-weight-regular);
}

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

.ladder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ladder__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-8);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.ladder__flag,
.ladder__best {
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-tags);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.ladder__flag {
  display: none;
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.ladder__best {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.ladder__range {
  color: var(--color-charcoal);
  font-size: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ladder__mult {
  white-space: nowrap;
}

.ladder__bar {
  display: inline-block;
  width: 120px;
  height: 8px;
  margin-right: var(--spacing-12);
  overflow: hidden;
  background-color: var(--color-line);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.ladder__bar span {
  display: block;
  width: var(--fill, 33%);
  height: 100%;
  background-color: var(--color-forest-mid);
  border-radius: inherit;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.ladder__mult strong {
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.ladder__row.is-reached .ladder__icon {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.ladder__row.is-reached .ladder__bar span {
  background-color: var(--color-deep-forest);
}

.ladder__row.is-match {
  background-color: var(--color-sage-deep);
}

.ladder__row.is-match .ladder__tier {
  box-shadow: inset 4px 0 0 var(--color-chartreuse-lime);
}

.ladder__row.is-match .ladder__flag {
  display: inline-block;
}

.facts {
  display: grid;
  gap: var(--spacing-12);
  margin: var(--spacing-20) 0 0;
  padding: 0;
  list-style: none;
}

.facts__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.facts__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
}

.facts__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.facts__text small {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.facts__text strong {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.calc {
  display: grid;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.calc__in {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
}

.calc__in .credit__title {
  margin: 0;
}

.calc__label {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.calc__input {
  position: relative;
}

.calc__input input {
  min-height: 56px;
  padding-left: 44px;
  padding-right: 72px;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

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

.calc__sym {
  position: absolute;
  top: 50%;
  left: var(--spacing-16);
  color: var(--color-forest-mid);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-50%);
}

.calc__live {
  position: absolute;
  top: 50%;
  right: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-50%);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.calc__live.is-up {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.calc__keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
}

.calc__key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--spacing-8);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.calc__key small {
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
}

.calc__key:hover {
  border-color: var(--color-deep-forest);
}

.calc__key.is-active {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.calc__key.is-active small {
  color: var(--color-chartreuse-lime);
}

.calc__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.calc__hint i {
  margin-top: 3px;
  color: var(--color-forest-mid);
}

.calc__hint.is-top {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.calc__hint.is-top i {
  color: var(--color-ink-black);
}

.calc__out {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  color: var(--color-text-inverse);
}

.calc__label--light {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .calc__label--light {
  text-transform: none;
}

.calc__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
  margin: 0;
}

.calc__total strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc__total span {
  color: var(--on-dark-soft);
}

.calc__total.is-tick strong {
  animation: calc-tick 0.35s var(--ease-standard);
}

@keyframes calc-tick {
  from {
    transform: translateY(6px);
    opacity: 0.4;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.calc__lines {
  margin: 0;
}

.calc__lines div {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--text-body-sm);
}

.calc__lines dt {
  color: var(--on-dark-soft);
}

.calc__lines dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.calc__submit:hover {
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.calc__submit:disabled {
  opacity: 0.7;
}

.calc__secure {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
}

.calc__secure i {
  margin-top: 2px;
  color: var(--color-chartreuse-lime);
}

.flow {
  margin-top: var(--spacing-56);
  text-align: center;
}

.flow__list {
  display: grid;
  gap: var(--grid-gap);
  margin: var(--spacing-24) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.flow__step {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.flow__no {
  display: block;
  margin-bottom: var(--spacing-12);
  color: var(--color-forest-mid);
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
}

.flow__name {
  margin-bottom: var(--spacing-8);
  font-size: var(--text-subheading);
}

.flow__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

@media (min-width: 560px) {
  .calc__keys {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (min-width: 768px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .calc__in,
  .calc__out {
    padding: var(--spacing-40);
  }

  .flow__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc__total.is-tick strong {
    animation: none;
  }
}

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

.basket__grid {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
}

.basket__card {
  min-width: 0;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.basket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.basket__title {
  margin: 0;
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
}

.basket__count {
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-chartreuse-lime);
  border-radius: var(--radius-tags);
  color: var(--color-ink-black);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.basket__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.basket__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb info drop"
    "thumb price drop";
  align-items: center;
  gap: var(--spacing-4) var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: var(--border-hairline);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.basket__item:last-child {
  border-bottom: 0;
}

.basket__item:hover {
  background-color: var(--color-pale-sage);
}

.basket__thumb {
  grid-area: thumb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  font-size: 18px;
}

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

.basket__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.basket__name {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.basket__meta {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.basket__level {
  padding: 2px var(--spacing-8);
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-tags);
  color: var(--color-chartreuse-lime);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.basket__price {
  grid-area: price;
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.basket__price small {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.basket__drop {
  grid-area: drop;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.basket__drop:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.basket__side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
}

.basket__rows {
  display: flex;
  flex-direction: column;
}

.basket__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-8) 0;
  border-bottom: 1px solid var(--on-dark-line);
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.basket__row span:last-child {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.basket__total {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.basket__total strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.basket__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
}

.basket__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
}

.basket__stat span {
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
}

.basket__stat strong {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.basket__stat small {
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-size: var(--text-caption);
}

.basket__status {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

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

.basket__status--ok {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.basket__status--short {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.basket__acts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.basket__acts .button:not(.button--ghost-light):hover {
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.hollow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--spacing-40) var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  text-align: center;
}

.hollow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--spacing-20);
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
  font-size: 26px;
}

.hollow__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.hollow__text {
  max-width: 400px;
  margin-bottom: var(--spacing-24);
  color: var(--color-text-muted);
}

.hollow__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
}

@media (min-width: 640px) {
  .basket__item {
    grid-template-columns: 56px minmax(0, 1fr) auto 40px;
    grid-template-areas: "thumb info price drop";
  }

  .basket__side {
    padding: var(--spacing-32);
  }
}

@media (min-width: 1000px) {
  .basket__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--spacing-32);
  }

  .basket__side {
    position: sticky;
    top: calc(var(--topbar-h) + var(--spacing-16));
  }
}

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

.prose {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  color: var(--color-charcoal);
  overflow-wrap: anywhere;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin: var(--spacing-40) 0 var(--spacing-12);
  padding-top: var(--spacing-24);
  border-top: var(--border-hairline);
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
}

.prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin: var(--spacing-24) 0 var(--spacing-8);
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}

.prose h4 {
  margin: var(--spacing-20) 0 var(--spacing-8);
  color: var(--color-deep-forest);
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--spacing-16);
}

.prose ul,
.prose ol {
  padding-left: var(--spacing-24);
}

.prose li + li {
  margin-top: var(--spacing-8);
}

.prose li::marker {
  color: var(--color-forest-mid);
}

.prose strong {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.prose a {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

.prose a:hover {
  color: var(--color-forest-mid);
  border-bottom-color: currentColor;
}

.prose img {
  height: auto;
  margin: var(--spacing-16) 0;
  border-radius: var(--radius-sm);
}

.prose blockquote {
  margin: 0 0 var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-left: 3px solid var(--color-forest-mid);
  border-radius: var(--radius-sm);
}

.prose__table {
  margin: 0 0 var(--spacing-20);
  overflow-x: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.prose table {
  width: 100%;
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: var(--border-hairline);
  color: var(--color-charcoal);
  text-align: left;
  vertical-align: middle;
}

.prose th + th,
.prose td + td {
  border-left: var(--border-hairline);
}

.prose thead th {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.prose tbody td:first-child {
  width: 30%;
  font-weight: var(--font-weight-semibold);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose td p,
.prose td ul,
.prose td ol {
  margin-bottom: var(--spacing-8);
}

.prose td > :last-child {
  margin-bottom: 0;
}

.prose td img,
.prose p img {
  display: inline-block;
  width: auto;
  height: 1.6em;
  max-height: 24px;
  margin: 0 0 0 var(--spacing-4);
  vertical-align: middle;
  border-radius: 0;
}

@media (max-width: 639px) {
  .prose__table:has(table.is-labelled) {
    overflow: visible;
    border: 0;
  }

  .prose table.is-labelled,
  .prose table.is-labelled tbody,
  .prose table.is-labelled tr,
  .prose table.is-labelled td {
    display: block;
    width: 100%;
  }

  .prose table.is-labelled thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .prose table.is-labelled tr {
    margin-bottom: var(--spacing-8);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
  }

  .prose table.is-labelled tr:last-child {
    margin-bottom: 0;
  }

  .prose table.is-labelled td {
    display: grid;
    grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
    gap: var(--spacing-8);
    border-left: 0;
  }

  .prose table.is-labelled td:last-child {
    border-bottom: 0;
  }

  .prose table.is-labelled td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
  }
}

@media (min-width: 640px) {
  .prose {
    padding: var(--spacing-40) var(--spacing-56);
  }
}

.co-steps__item.is-failed {
  color: var(--color-error);
}

.co-steps__item.is-failed .co-steps__no {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-paper-white);
}

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

.outcome__card {
  --tone: var(--color-forest-mid);
  --tone-bg: var(--color-sage-deep);
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.outcome__card--bad {
  --tone: var(--color-error);
  --tone-bg: var(--color-error-bg);
}

.outcome__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-40) var(--spacing-24) var(--spacing-32);
  text-align: center;
}

.outcome__mark {
  width: 88px;
  height: 88px;
  margin-bottom: var(--spacing-20);
  padding: var(--spacing-12);
  background-color: var(--tone-bg);
  border-radius: 50%;
  overflow: visible;
  animation: outcome-pop 0.5s var(--ease-standard) both;
}

.outcome__ring,
.outcome__sign {
  fill: none;
  stroke: var(--tone);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.outcome__ring {
  stroke-width: 2.5;
  animation: outcome-draw 0.7s var(--ease-standard) 0.2s forwards;
}

.outcome__sign {
  stroke-width: 3.5;
  animation: outcome-draw 0.45s var(--ease-standard) 0.8s forwards;
}

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

@keyframes outcome-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.outcome__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.outcome__lead {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-muted);
}

.outcome__paid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  color: var(--color-text-inverse);
  text-align: center;
}

.outcome__paid-label {
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .outcome__paid-label,
:root:lang(ja) .outcome__label {
  text-transform: none;
}

.outcome__paid-value {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.outcome__state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.outcome__state--ok {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.outcome__state--wait {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.outcome__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-24);
  border-top: var(--border-hairline);
}

.outcome__facts {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
}

.outcome__fact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
}

.outcome__fact dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.outcome__fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.outcome__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--spacing-12);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.outcome__copy:hover {
  border-color: var(--color-deep-forest);
}

.outcome__copy.is-done {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.outcome__note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: var(--text-body-sm);
}

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

.outcome__label {
  margin: 0 0 var(--spacing-12);
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.outcome__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.outcome__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.outcome__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.outcome__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8) var(--spacing-12);
}

.outcome__home {
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

.outcome__home:hover {
  color: var(--color-forest-mid);
  border-bottom-color: currentColor;
}

.outcome__help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  max-width: 760px;
  margin: var(--spacing-24) auto 0;
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
}

.outcome__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: var(--color-chartreuse-lime);
  border-radius: 50%;
  color: var(--color-ink-black);
  font-size: 18px;
}

.outcome__help-body {
  flex: 1;
  min-width: 0;
}

.outcome__help-title {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
}

.outcome__help-text {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.outcome__help-text a {
  color: var(--color-chartreuse-lime);
  border-bottom: 1px solid currentColor;
}

.outcome__next {
  max-width: 960px;
  margin: var(--spacing-56) auto 0;
  text-align: center;
}

.outcome__next-title {
  margin-bottom: var(--spacing-24);
  color: var(--color-deep-forest);
}

.outcome__steps {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.outcome__step {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.outcome__step-no {
  display: block;
  margin-bottom: var(--spacing-12);
  color: var(--color-forest-mid);
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
}

.outcome__step p {
  margin: 0;
  color: var(--color-charcoal);
  font-size: var(--text-body-sm);
}

.outcome__step a {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

@media (min-width: 640px) {
  .outcome__hero {
    padding: var(--spacing-56) var(--spacing-40) var(--spacing-40);
  }

  .outcome__body {
    padding: var(--spacing-32) var(--spacing-40) var(--spacing-40);
  }

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

  .outcome__fact--wide {
    grid-column: 1 / -1;
  }

  .outcome__help {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-24) var(--spacing-32);
  }
}

@media (min-width: 900px) {
  .outcome__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .outcome__mark,
  .outcome__ring,
  .outcome__sign {
    animation: none;
  }

  .outcome__ring,
  .outcome__sign {
    stroke-dashoffset: 0;
  }
}

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

.shelf__filter {
  display: flex;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-32);
  padding-bottom: var(--spacing-8);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}

.shelf__chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.shelf__chip-no {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.shelf__chip:hover {
  border-color: var(--color-deep-forest);
  color: var(--color-deep-forest);
}

.shelf__chip.is-on {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.shelf__chip.is-on .shelf__chip-no {
  color: var(--color-chartreuse-lime);
}

.shelf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-16) var(--spacing-24);
  margin-bottom: var(--spacing-32);
  padding-bottom: var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.shelf__head--cat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.shelf__side {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16);
  min-width: 0;
  padding: var(--spacing-24);
}

.shelf__side .shelf__intro {
  flex: 0 0 auto;
  width: 100%;
}

.shelf__side .shelf__text {
  max-width: none;
}

.shelf__cover {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  color: var(--color-forest-mid);
  font-size: 40px;
}

.shelf__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelf__index {
  position: absolute;
  left: var(--spacing-12);
  bottom: var(--spacing-12);
  z-index: 21;
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-sm);
  color: var(--color-chartreuse-lime);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .shelf__head--cat {
    flex-direction: row;
  }

  .shelf__cover {
    width: 280px;
    min-height: 280px;
    aspect-ratio: auto;
  }

  .shelf__side {
    padding: var(--spacing-32) var(--spacing-40);
  }
}

.shelf__intro {
  flex: 1 1 320px;
  min-width: 0;
}

.shelf__title {
  margin: 0 0 var(--spacing-8);
  color: var(--color-deep-forest);
}

.shelf__text {
  max-width: 640px;
  margin: 0;
  color: var(--color-text-muted);
}

.shelf__count {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.shelf__grid {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.guide:hover {
  border-color: var(--color-deep-forest);
  color: var(--color-text);
  transform: translateY(-4px);
}

.guide__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  color: var(--color-forest-mid);
  font-size: 28px;
}

.guide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-standard);
}

.guide:hover .guide__media img {
  transform: scale(1.05);
}

.guide__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-20);
}

.guide__levels {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.guide__dots {
  display: inline-flex;
  gap: 3px;
}

.guide__dots span {
  width: 12px;
  height: 4px;
  background-color: var(--color-forest-mid);
  border-radius: 2px;
}

.guide__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: auto;
  padding-top: var(--spacing-12);
  border-top: var(--border-hairline);
}

.guide__price {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.guide__price strong {
  color: var(--color-deep-forest);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.guide__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--color-pale-sage);
  border-radius: 50%;
  color: var(--color-deep-forest);
  font-size: 13px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.guide:hover .guide__go {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
  transform: rotate(-45deg);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-40);
}

.pager__nums {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.pager__step,
.pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-12);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.pager__step i {
  font-size: 12px;
}

a.pager__step:hover,
a.pager__num:hover {
  border-color: var(--color-deep-forest);
  color: var(--color-deep-forest);
}

.pager__num.is-current {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.pager__step.is-off {
  opacity: 0.45;
}

@media (max-width: 479px) {
  .pager__step span {
    display: none;
  }
}

@media (min-width: 560px) {
  .shelf__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .shelf__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide,
  .guide__media img,
  .guide__go {
    transition: none;
  }

  .guide:hover,
  .guide:hover .guide__media img,
  .guide:hover .guide__go {
    transform: none;
  }
}

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

.gd__top {
  display: grid;
  gap: var(--spacing-32);
  align-items: start;
}

.gd-gallery__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
  color: var(--color-forest-mid);
  font-size: 48px;
}

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

.gd-gallery__stage img.is-swap {
  animation: gd-swap 0.4s var(--ease-standard);
}

@keyframes gd-swap {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}

.gd-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
}

.gd-gallery__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  transition: border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

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

.gd-gallery__thumb:hover,
.gd-gallery__thumb.is-active {
  opacity: 1;
}

.gd-gallery__thumb.is-active {
  border-color: var(--color-deep-forest);
}

.gd-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.gd-info__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.gd-info__cat:hover {
  background-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.gd-info__title {
  margin: 0;
  color: var(--color-deep-forest);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.gd-info__lede {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

.gd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-8);
  width: 100%;
  margin: var(--spacing-8) 0 0;
}

.gd-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.gd-stat dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.gd-stat dd {
  margin: 0;
  color: var(--color-deep-forest);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.gd-stat dd small {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
}

.gd-stat--bal {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
}

.gd-stat--bal dt,
.gd-stat--bal dd small {
  color: var(--on-dark-soft);
}

.gd-stat--bal dd {
  color: var(--color-chartreuse-lime);
}

.gd-info__jump {
  margin-top: var(--spacing-8);
}

.gd-path {
  margin-top: var(--spacing-56);
}

.gd-path__head {
  max-width: 640px;
  margin: 0 auto var(--spacing-32);
  text-align: center;
}

.gd-path__title {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
}

.gd-path__note {
  margin: 0;
  color: var(--color-text-muted);
}

.gd-path__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.gd-path__list::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 19px;
  width: 2px;
  background-color: var(--color-line);
}

.gd-level {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: start;
}

.gd-level__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: var(--spacing-16);
  background-color: var(--surface-canvas);
  border: 2px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.gd-level:has(.gd-level__box[open]) .gd-level__node {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.gd-level__box {
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.gd-level__box[open] {
  border-color: var(--color-deep-forest);
}

.gd-level__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12) var(--spacing-20);
  padding: var(--spacing-16) var(--spacing-20);
  cursor: pointer;
  list-style: none;
}

.gd-level__sum::-webkit-details-marker {
  display: none;
}

.gd-level__sum:hover .gd-level__name {
  color: var(--color-forest-mid);
}

.gd-level__main {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
}

.gd-level__step {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .gd-level__step {
  text-transform: none;
}

.gd-level__name {
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  transition: color var(--duration-fast) var(--ease-standard);
}

.gd-level__meter {
  display: inline-flex;
  gap: 3px;
}

.gd-level__meter span {
  width: 16px;
  height: 6px;
  background-color: var(--color-line);
  border-radius: 2px;
}

.gd-level__meter span.is-on {
  background-color: var(--color-forest-mid);
}

.gd-level__price {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

.gd-level__price strong {
  color: var(--color-deep-forest);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gd-level__toggle {
  width: 14px;
  height: 14px;
  color: var(--color-deep-forest);
}

.gd-level__box[open] .gd-level__toggle::before {
  transform: rotate(45deg);
}

.gd-level__box[open] .gd-level__toggle::after {
  transform: rotate(135deg);
}

.gd-level__body {
  padding: 0 var(--spacing-20) var(--spacing-20);
}

.gd-level__box[open] .gd-level__body {
  animation: gd-open 0.35s var(--ease-standard);
}

@keyframes gd-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.gd-level__rows {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
}

.gd-level__row {
  padding: var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
}

.gd-level__row dt {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.gd-level__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: var(--color-paper-white);
  border-radius: 50%;
  color: var(--color-forest-mid);
  font-size: 12px;
}

.gd-level__row dd {
  margin: 0;
  color: var(--color-charcoal);
  font-size: var(--text-body-sm);
  white-space: pre-line;
}

.gd-level__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline);
}

.gd-level__bal {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.gd-level__bal.is-ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.gd-level__bal.is-short {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.gd-level__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-left: auto;
}

.gd-path__foot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-8);
  max-width: 720px;
  margin: var(--spacing-24) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  text-align: center;
}

.gd-path__foot i {
  margin-top: 3px;
  color: var(--color-forest-mid);
}

.gd-about {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
  margin-top: var(--spacing-56);
}

.gd-about__body {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.gd-about__title {
  margin-bottom: var(--spacing-16);
  color: var(--color-deep-forest);
}

.gd-about__text {
  color: var(--color-charcoal);
}

.gd-glance {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
}

.gd-glance__title {
  margin: 0;
  color: var(--color-deep-forest);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .gd-glance__title {
  text-transform: none;
}

.gd-glance__list {
  margin: 0;
}

.gd-glance__list div {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) 0;
  border-bottom: 1px solid rgba(4, 63, 46, 0.12);
  font-size: var(--text-body-sm);
}

.gd-glance__list dt {
  color: var(--color-text-muted);
}

.gd-glance__list dd {
  margin: 0;
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.gd-glance__list a {
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

@media (min-width: 768px) {
  .gd-level__rows {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .gd-path__list::before {
    left: 23px;
  }

  .gd-level {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--spacing-16);
  }

  .gd-level__node {
    width: 48px;
    height: 48px;
  }

  .gd-level__sum {
    padding: var(--spacing-20) var(--spacing-24);
  }

  .gd-level__body {
    padding: 0 var(--spacing-24) var(--spacing-24);
  }

  .gd-about__body {
    padding: var(--spacing-32) var(--spacing-40);
  }
}

@media (min-width: 900px) {
  .gd__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-56);
  }

  .gd-about {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--spacing-32);
  }

  .gd-glance {
    position: sticky;
    top: calc(var(--topbar-h) + var(--spacing-16));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd-gallery__stage img.is-swap,
  .gd-level__box[open] .gd-level__body {
    animation: none;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.pill--ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.pill--wait {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.pill--err {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

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

.hub__me {
  display: grid;
  gap: var(--spacing-20);
  align-items: center;
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
}

.hub__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background-color: var(--color-chartreuse-lime);
  border-radius: 50%;
  color: var(--color-ink-black);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.hub__who {
  min-width: 0;
}

.hub__greet {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.hub__name {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-heading);
  overflow-wrap: anywhere;
}

.hub__lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-20);
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.hub__lines span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  overflow-wrap: anywhere;
}

.hub__lines i {
  color: var(--color-chartreuse-lime);
}

.hub__bal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-20);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
}

.hub__bal-label {
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .hub__bal-label {
  text-transform: none;
}

.hub__bal-value {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hub__bal .button:hover {
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.hub__tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 var(--spacing-16);
  padding: var(--spacing-4);
  overflow-x: auto;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
}

.hub__tab,
.hub__out {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-16);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.hub__tab:hover {
  background-color: var(--color-pale-sage);
}

.hub__tab.is-on {
  background-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.hub__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-pill);
  color: var(--color-deep-forest);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.hub__tab.is-on .hub__count {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.hub__out {
  margin-left: auto;
  color: var(--color-error);
}

.hub__out:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.hub__panel {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.hub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-24);
  margin-bottom: var(--spacing-20);
}

.hub__title {
  margin: 0;
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
}

.hub__find {
  position: relative;
  flex: 0 1 300px;
  min-width: 200px;
}

.hub__find i {
  position: absolute;
  top: 50%;
  left: var(--spacing-16);
  color: var(--color-text-muted);
  font-size: 13px;
  transform: translateY(-50%);
}

.hub__find input {
  min-height: 44px;
  padding-left: 40px;
  background-color: var(--color-pale-sage);
  border-color: transparent;
  border-radius: var(--radius-pill);
}

.hub__none {
  margin: var(--spacing-16) 0 0;
  color: var(--color-text-muted);
  text-align: center;
}

.hub__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-40) var(--spacing-16);
  color: var(--color-text-muted);
  text-align: center;
}

.hub__empty p {
  margin: 0;
}

.hub__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--color-sage-deep);
  border-radius: 50%;
  color: var(--color-forest-mid);
  font-size: 22px;
}

.ledger {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.ledger__row:hover {
  background-color: var(--color-pale-sage);
  border-color: var(--color-forest-mid);
}

.ledger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-sage-deep);
  border-radius: 50%;
  color: var(--color-forest-mid);
}

.ledger__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ledger__code {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ledger__date {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.ledger__fig {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.ledger__fig small {
  color: var(--color-text-muted);
  font-size: 11px;
}

.ledger__fig strong,
.ledger__fig span {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.ledger__row .pill {
  grid-column: 2;
  justify-self: start;
}

.ledger__open {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.ledger__open i {
  transition: transform var(--duration-base) var(--ease-standard);
}

.ledger__open:hover {
  color: var(--color-forest-mid);
}

.ledger__row:hover .ledger__open i {
  transform: translateX(4px);
}

.shelfy {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelfy__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.shelfy__card:hover {
  border-color: var(--color-deep-forest);
}

.shelfy__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  color: var(--color-forest-mid);
  font-size: 28px;
}

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

.shelfy__state {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 21;
}

.shelfy__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
}

.shelfy__level {
  padding: 2px var(--spacing-8);
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-tags);
  color: var(--color-chartreuse-lime);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.shelfy__title {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.shelfy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-12);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.shelfy__code {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.shelfy__open {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: auto;
  padding-top: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

.shelfy__open:hover {
  color: var(--color-forest-mid);
}

.hub__pwd {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
}

.hub__meter {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-8);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.hub__bars {
  display: inline-flex;
  gap: 4px;
}

.hub__bars span {
  width: 36px;
  height: 5px;
  background-color: var(--color-line);
  border-radius: 3px;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.hub__meter[data-level="1"] .hub__bars span:nth-child(-n+1) {
  background-color: var(--color-error);
}

.hub__meter[data-level="2"] .hub__bars span:nth-child(-n+2) {
  background-color: var(--color-warning);
}

.hub__meter[data-level="3"] .hub__bars span {
  background-color: var(--color-success);
}

.hub__rules {
  padding: var(--spacing-20);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
}

.hub__rules-title {
  margin: 0 0 var(--spacing-12);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
}

.hub__rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-sm);
}

.hub__rules-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-standard);
}

.hub__rules-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--color-paper-white);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: transparent;
  font-size: 10px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.hub__rules-list li.is-met {
  color: var(--color-deep-forest);
}

.hub__rules-list li.is-met span {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

.slip-wrap {
  padding-top: var(--section-gap);
}

.slip__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  max-width: 820px;
  margin: 0 auto var(--spacing-16);
}

.slip__back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.slip__back i {
  transition: transform var(--duration-base) var(--ease-standard);
}

.slip__back:hover i {
  transform: translateX(-4px);
}

.slip__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.slip {
  max-width: 820px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.slip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
  background-color: var(--surface-dark);
  color: var(--color-text-inverse);
}

.slip__badge {
  display: inline-block;
  margin-bottom: var(--spacing-8);
  padding: 2px var(--spacing-8);
  background-color: var(--color-chartreuse-lime);
  border-radius: var(--radius-tags);
  color: var(--color-ink-black);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.slip__no {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.slip__date {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.slip__sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-4);
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
  text-align: right;
}

.slip__sum strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.slip__sum small {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

.slip__states {
  display: grid;
  margin: 0;
  border-bottom: 1px dashed var(--color-line);
}

.slip__state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.slip__state:last-child {
  border-bottom: 0;
}

.slip__state dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.slip__state dd {
  margin: 0;
}

.slip__method {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.slip__block {
  padding: var(--spacing-24);
  border-bottom: 1px dashed var(--color-line);
}

.slip__block:last-child {
  border-bottom: 0;
}

.slip__title {
  margin: 0 0 var(--spacing-16);
  color: var(--color-deep-forest);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .slip__title {
  text-transform: none;
}

.slip__lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slip__line {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-hairline);
}

.slip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
  color: var(--color-forest-mid);
  font-size: 13px;
}

.slip__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.slip__name {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.slip__level {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.slip__pts {
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slip__pts small {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.slip__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-sm);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
}

.slip__total strong {
  font-size: var(--text-subheading);
  font-variant-numeric: tabular-nums;
}

.slip__info {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
}

.slip__info div {
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border-radius: var(--radius-sm);
}

.slip__info dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.slip__info dd {
  margin: 0;
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.slip__txn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .hub__me,
  .hub__panel {
    padding: var(--spacing-32);
  }

  .ledger__row {
    grid-template-columns: 40px minmax(0, 1fr) auto auto auto auto;
  }

  .ledger__fig {
    display: flex;
  }

  .ledger__row .pill,
  .ledger__open {
    grid-column: auto;
    grid-row: auto;
  }

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

  .slip__head,
  .slip__block {
    padding: var(--spacing-32);
  }

  .slip__states {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .slip__state {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    border-right: var(--border-hairline);
  }

  .slip__state:last-child {
    border-right: 0;
  }

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

  .slip__info-wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .hub__me {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--spacing-24);
  }

  .hub__bal {
    min-width: 220px;
  }

  .shelfy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub__pwd {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--spacing-40);
  }
}

@media print {
  .topbar,
  .foot,
  .crumbs,
  .consent,
  .toasts,
  .preloader,
  .slip__bar {
    display: none !important;
  }

  body {
    background-color: var(--color-paper-white);
  }

  .slip-wrap {
    padding-top: 0;
  }

  .slip {
    max-width: none;
    border-color: var(--color-line);
  }

  .slip__head {
    background-color: var(--color-paper-white);
    border-bottom: 2px solid var(--color-ink-black);
    color: var(--color-ink-black);
  }

  .slip__date,
  .slip__sum {
    color: var(--color-charcoal);
  }

  .slip__sum strong {
    color: var(--color-ink-black);
  }

  .outcome__copy {
    display: none;
  }
}


.gd-info {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-top: 4px solid var(--color-deep-forest);
  border-radius: var(--radius-cards);
}

@media (min-width: 640px) {
  .gd-info {
    padding: var(--spacing-32);
  }
}

.gd-info .gd-stat:not(.gd-stat--bal) {
  background-color: var(--color-pale-sage);
  border-color: transparent;
}

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

.story__grid {
  display: grid;
  gap: var(--spacing-40);
  align-items: center;
}

.story__eyebrow {
  margin: 0 0 var(--spacing-12);
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

:root:lang(ja) .story__eyebrow {
  text-transform: none;
}

.story__title {
  margin-bottom: var(--spacing-16);
  color: var(--color-deep-forest);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.story__lead {
  margin-bottom: var(--spacing-12);
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

.story__text {
  margin-bottom: var(--spacing-20);
  color: var(--color-text-muted);
}

.story__points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

.story__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
}

.story__points li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-chartreuse-lime);
  border-radius: 50%;
  color: var(--color-ink-black);
  font-size: 11px;
}

.story__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-12);
}

.story__pics {
  position: relative;
  padding: 0 0 var(--spacing-40) var(--spacing-40);
}

.story__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
  color: var(--color-forest-mid);
  font-size: 40px;
}

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

.story__pic--main {
  aspect-ratio: 4 / 5;
  margin-left: auto;
  width: 88%;
}

.story__pic--side {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--surface-canvas);
}

.story__badge {
  position: absolute;
  top: var(--spacing-24);
  left: var(--spacing-12);
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  max-width: 240px;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
  line-height: 1.3;
}

.story__badge strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.story-band {
  padding-top: var(--section-gap);
}

.story-band__card {
  display: grid;
  overflow: hidden;
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
}

.story-band__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-forest-mid);
  color: var(--color-chartreuse-lime);
  font-size: 40px;
}

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

.story-band__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-20);
  padding: var(--spacing-32) var(--spacing-24);
}

.story-band__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0;
}

.story-band__title strong {
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.story-band__levels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-band__levels li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 6px var(--spacing-12);
}

.story-band__no {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.story-band__name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.story-band__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  background-color: var(--on-dark-line);
  border-radius: var(--radius-pill);
}

.story-band__bar span {
  display: block;
  height: 100%;
  background-color: var(--color-chartreuse-lime);
  border-radius: inherit;
  transform-origin: left center;
}

.story-band__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
}

.story-band__note i {
  color: var(--color-chartreuse-lime);
}

.story-how {
  padding-top: var(--section-gap);
}

.story-how__head {
  max-width: 640px;
  margin: 0 auto var(--spacing-32);
  text-align: center;
}

.story-how__title {
  margin: 0;
  color: var(--color-deep-forest);
}

.story-how__steps {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-how__step {
  position: relative;
  padding: var(--spacing-24);
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.story-how__step:hover {
  border-color: var(--color-deep-forest);
  transform: translateY(-3px);
}

.story-how__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-16);
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
  font-size: 18px;
}

.story-how__no {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-20);
  color: var(--color-sage-deep);
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
}

.story-how__name {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
}

.story-how__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.story-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-12);
  margin: var(--spacing-24) 0 0;
  padding: 0;
  list-style: none;
}

.story-facts__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
}

.story-facts__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--color-paper-white);
  border-radius: 50%;
  color: var(--color-forest-mid);
  font-size: 14px;
}

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

.story-facts__body strong {
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.story-facts__body span {
  color: var(--color-charcoal);
  font-size: var(--text-caption);
  line-height: 1.5;
}

html.has-reveal .story__pics .story__pic--main,
html.has-reveal .story__pics .story__pic--side,
html.has-reveal .story__pics .story__badge,
html.has-reveal .story-band__card {
  opacity: 0;
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

html.has-reveal .story__pics .story__pic--main {
  transform: translateY(24px);
}

html.has-reveal .story__pics .story__pic--side {
  transform: translate(-16px, 16px);
  transition-delay: 0.15s;
}

html.has-reveal .story__pics .story__badge {
  transform: scale(0.9);
  transition-delay: 0.3s;
}

html.has-reveal .story-band__card {
  transform: translateY(24px);
}

html.has-reveal .story-band__bar span {
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-standard);
  transition-delay: calc(0.3s + var(--i, 0) * 0.12s);
}

html.has-reveal .story__pics.is-in .story__pic--main,
html.has-reveal .story__pics.is-in .story__pic--side,
html.has-reveal .story__pics.is-in .story__badge,
html.has-reveal .story-band__card.is-in {
  opacity: 1;
  transform: none;
}

html.has-reveal .story-band__card.is-in .story-band__bar span {
  transform: scaleX(1);
}

@media (min-width: 640px) {
  .story-how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-band__panel {
    padding: var(--spacing-40);
  }
}

@media (min-width: 900px) {
  .story__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--spacing-56);
  }

  .story-band__card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .story-band__pic {
    aspect-ratio: auto;
    min-height: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-how__step {
    transition: none;
  }

  .story-how__step:hover {
    transform: none;
  }
}

.story__copy {
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.story__copy .story__points {
  padding: var(--spacing-16) 0;
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}

@media (min-width: 640px) {
  .story__copy {
    padding: var(--spacing-40);
  }
}

.story-band__pic img {
  object-position: center 30%;
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.tagline span {
  width: 24px;
  height: 2px;
  background-color: var(--color-chartreuse-lime);
  border-radius: 2px;
}

.tagline--light {
  color: var(--color-chartreuse-lime);
}

:root:lang(ja) .tagline {
  text-transform: none;
}

.opener {
  padding-top: var(--spacing-40);
}

.opener__copy {
  max-width: 860px;
  margin: 0 auto var(--spacing-32);
  text-align: center;
}

.opener__title {
  margin-bottom: var(--spacing-20);
  color: var(--color-deep-forest);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.opener__title em {
  color: var(--color-forest-mid);
  font-style: normal;
}

.opener__text {
  max-width: 640px;
  margin: 0 auto var(--spacing-24);
  color: var(--color-charcoal);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

.opener__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8) var(--spacing-12);
}

.opener__screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1280 / 720;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
  color: var(--color-forest-mid);
  font-size: 48px;
}

.opener__screen video,
.opener__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opener__toggle {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-paper-white);
  border: 0;
  border-radius: 50%;
  color: var(--color-deep-forest);
  font-size: 14px;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.opener__toggle:hover {
  background-color: var(--color-chartreuse-lime);
}

.opener__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 720px;
  margin: calc(-1 * var(--spacing-32)) auto 0;
  position: relative;
  z-index: 3;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.opener__stats div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding: var(--spacing-16);
  text-align: center;
}

.opener__stats div + div {
  border-left: var(--border-hairline);
}

.opener__stats dt {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.opener__stats dd {
  margin: 0;
  color: var(--color-deep-forest);
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
}

.ticker {
  margin-top: var(--section-gap);
  padding: var(--spacing-16) 0;
  overflow: hidden;
  background-color: var(--surface-dark);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 40s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__lane {
  display: flex;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0 var(--spacing-12) 0 0;
  list-style: none;
}

.ticker__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-20);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.ticker__no {
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.ticker__chip:hover {
  background-color: var(--color-chartreuse-lime);
  border-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
}

.ticker__chip:hover .ticker__no {
  color: var(--color-deep-forest);
}

@keyframes ticker-run {
  to {
    transform: translateX(-50%);
  }
}

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

.journey__head {
  max-width: 640px;
  margin: 0 auto var(--spacing-32);
  text-align: center;
}

.journey__title,
.picks__title,
.roam__title,
.faq__title {
  margin: 0;
  color: var(--color-deep-forest);
}

.journey__box {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-24);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.journey__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
  padding-bottom: var(--spacing-20);
}

.journey__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-pale-sage);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.journey__num {
  color: var(--color-forest-mid);
  font-size: var(--text-caption);
}

.journey__tab:hover {
  border-color: var(--color-forest-mid);
}

.journey__tab.is-past {
  background-color: var(--color-sage-deep);
}

.journey__tab.is-on {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.journey__tab.is-on .journey__num {
  color: var(--color-chartreuse-lime);
}

.journey__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  overflow: hidden;
  background-color: var(--color-line);
  border-radius: var(--radius-pill);
}

.journey__rail span {
  display: block;
  width: 25%;
  height: 100%;
  background-color: var(--color-chartreuse-lime);
  border-radius: inherit;
  transition: width 0.5s var(--ease-standard);
}

.journey__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
  padding-top: var(--spacing-24);
  animation: journey-in 0.4s var(--ease-standard);
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.journey__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-color: var(--color-chartreuse-lime);
  border-radius: var(--radius-cards);
  color: var(--color-ink-black);
  font-size: 24px;
}

.journey__step {
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.journey__name {
  margin-bottom: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.journey__text {
  max-width: 620px;
  margin: 0;
  color: var(--color-charcoal);
}

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

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

.picks__all,
.faq__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-deep-forest);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-chartreuse-lime);
}

.picks__grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: start;
}

.picks__hero {
  display: grid;
  overflow: hidden;
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.picks__hero:hover {
  border-color: var(--color-deep-forest);
  color: var(--color-text);
}

.picks__cover,
.picks__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  color: var(--color-forest-mid);
}

.picks__cover {
  font-size: 40px;
}

.picks__cover img,
.picks__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-standard);
}

.picks__hero:hover .picks__cover img {
  transform: scale(1.04);
}

.picks__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
}

.picks__meta {
  align-self: flex-start;
  padding: 2px var(--spacing-12);
  background-color: var(--color-deep-forest);
  border-radius: var(--radius-tags);
  color: var(--color-chartreuse-lime);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.picks__name {
  color: var(--color-deep-forest);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

.picks__price {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.picks__price strong {
  color: var(--color-deep-forest);
  font-size: var(--text-subheading);
}

.picks__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.picks__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-8);
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.picks__row:hover {
  border-color: var(--color-deep-forest);
  color: var(--color-text);
  transform: translateX(4px);
}

.picks__thumb {
  width: 80px;
  border-radius: var(--radius-sm);
  font-size: 20px;
}

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

.picks__row-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.picks__row-meta {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.picks__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-pale-sage);
  border-radius: 50%;
  color: var(--color-deep-forest);
  font-size: 12px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.picks__row:hover .picks__go {
  background-color: var(--color-deep-forest);
  color: var(--color-chartreuse-lime);
}

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

.canvas__card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-paper-white);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
}

.canvas__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 608;
}

.canvas__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-24);
  border-top: var(--border-hairline);
}

.canvas__title {
  margin-bottom: var(--spacing-12);
  color: var(--color-deep-forest);
}

.canvas__text {
  margin-bottom: var(--spacing-20);
  color: var(--color-charcoal);
}

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

.roam__grid {
  display: grid;
  gap: var(--spacing-32);
  align-items: center;
}

.roam__title {
  margin-bottom: var(--spacing-12);
}

.roam__text {
  margin-bottom: var(--spacing-20);
  color: var(--color-text-muted);
}

.roam__points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.roam__points li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-medium);
}

.roam__points li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  color: var(--color-chartreuse-lime);
}

.roam__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12);
}

.roam__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-sage-deep);
  border-radius: var(--radius-cards);
  color: var(--color-forest-mid);
  font-size: 32px;
}

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

.roam__photo--wide {
  grid-column: 1 / -1;
  aspect-ratio: 1280 / 720;
}

.roam__photo--square {
  aspect-ratio: 1 / 1;
}

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

.boost__card {
  display: grid;
  gap: var(--spacing-32);
  padding: var(--spacing-32) var(--spacing-24);
  background-color: var(--surface-dark);
  border-radius: var(--radius-cards);
  color: var(--color-text-inverse);
}

.boost__title {
  margin-bottom: var(--spacing-12);
}

.boost__text {
  margin-bottom: var(--spacing-16);
  color: var(--on-dark-soft);
}

.boost__rate {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.boost__rate i {
  color: var(--color-chartreuse-lime);
}

.boost__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.boost__copy .button:hover {
  background-color: var(--color-paper-white);
  border-color: var(--color-paper-white);
  color: var(--color-deep-forest);
}

.boost__tiers {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.boost__tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name mult"
    "range mult"
    "bar bar";
  gap: 4px var(--spacing-16);
  padding: var(--spacing-16);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.boost__tier:hover {
  border-color: var(--color-chartreuse-lime);
}

.boost__name {
  grid-area: name;
  font-weight: var(--font-weight-semibold);
}

.boost__range {
  grid-area: range;
  color: var(--on-dark-soft);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.boost__mult {
  grid-area: mult;
  align-self: center;
  color: var(--color-chartreuse-lime);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.boost__bar {
  grid-area: bar;
  display: block;
  height: 4px;
  margin-top: var(--spacing-8);
  overflow: hidden;
  background-color: var(--on-dark-line);
  border-radius: var(--radius-pill);
}

.boost__bar span {
  display: block;
  width: var(--fill, 33%);
  height: 100%;
  background-color: var(--color-chartreuse-lime);
  border-radius: inherit;
  transform-origin: left center;
}

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

.faq__grid {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.faq__item {
  background-color: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.faq__item[open] {
  border-color: var(--color-deep-forest);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-20);
  color: var(--color-deep-forest);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

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

.faq__icon {
  width: 12px;
  height: 12px;
}

.faq__item[open] .faq__icon::before {
  transform: rotate(45deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(135deg);
}

.faq__a {
  margin: 0;
  padding: 0 var(--spacing-20) var(--spacing-20);
  color: var(--color-charcoal);
  font-size: var(--text-body-sm);
}

.faq__item[open] .faq__a {
  animation: journey-in 0.35s var(--ease-standard);
}

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

.closer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-40) var(--spacing-24);
  background-color: var(--color-chartreuse-lime);
  border-radius: var(--radius-cards);
  color: var(--color-ink-black);
  text-align: center;
}

.closer__title {
  max-width: 640px;
  margin-bottom: var(--spacing-12);
  color: var(--color-deep-forest);
}

.closer__text {
  max-width: 560px;
  margin-bottom: var(--spacing-24);
  color: var(--color-charcoal);
}

.closer__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8) var(--spacing-12);
}

.closer__acts .button:not(.button--ghost) {
  background-color: var(--color-deep-forest);
  border-color: var(--color-deep-forest);
  color: var(--color-paper-white);
}

.closer__acts .button:not(.button--ghost):hover {
  background-color: var(--color-forest-mid);
  border-color: var(--color-forest-mid);
}

html.has-reveal .journey,
html.has-reveal .picks,
html.has-reveal .canvas,
html.has-reveal .roam,
html.has-reveal .boost,
html.has-reveal .faq,
html.has-reveal .closer {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

html.has-reveal .journey.is-in,
html.has-reveal .picks.is-in,
html.has-reveal .canvas.is-in,
html.has-reveal .roam.is-in,
html.has-reveal .boost.is-in,
html.has-reveal .faq.is-in,
html.has-reveal .closer.is-in {
  opacity: 1;
  transform: none;
}

html.has-reveal .boost .boost__bar span {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-standard) 0.3s;
}

html.has-reveal .boost.is-in .boost__bar span {
  transform: scaleX(1);
}

@media (max-width: 479px) {
  .opener__stats div + div {
    border-left: 0;
    border-top: var(--border-hairline);
  }
}

@media (min-width: 640px) {
  .journey__tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .journey__box {
    padding: var(--spacing-32);
  }
}

@media (min-width: 768px) {
  .picks__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .canvas__copy {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    justify-content: center;
    padding: var(--spacing-32) var(--spacing-40);
    border-top: 0;
  }

  .boost__card {
    padding: var(--spacing-40);
  }

  .closer__card {
    padding: var(--spacing-56) var(--spacing-40);
  }
}

@media (min-width: 960px) {
  .opener {
    padding-top: var(--spacing-56);
  }

  .picks__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

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

  .roam__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--spacing-56);
  }

  .boost__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-56);
    padding: var(--spacing-56);
  }

  .faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--spacing-56);
  }

  .faq__head {
    position: sticky;
    top: calc(var(--topbar-h) + var(--spacing-24));
  }
}

@media (min-width: 1100px) {
  .picks__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }

  .ticker__lane[aria-hidden="true"] {
    display: none;
  }

  .ticker__lane {
    flex-wrap: wrap;
    padding: 0 var(--page-gutter);
  }

  .journey__panel,
  .faq__item[open] .faq__a {
    animation: none;
  }

  .picks__row:hover,
  .picks__hero:hover .picks__cover img {
    transform: none;
  }
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__blob {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  translate: calc(var(--px, 0) * var(--depth, -40px)) calc(var(--py, 0) * var(--depth, -40px));
  transition: translate 1.2s var(--ease-standard);
  animation: ambient-drift 28s ease-in-out infinite alternate;
}

.ambient__blob--one {
  --depth: -60px;
  top: -24vmax;
  left: -18vmax;
  background: radial-gradient(circle, rgba(178, 222, 80, 0.55) 0%, rgba(178, 222, 80, 0) 68%);
}

.ambient__blob--two {
  --depth: 50px;
  top: 18vh;
  right: -26vmax;
  background: radial-gradient(circle, rgba(42, 111, 43, 0.32) 0%, rgba(42, 111, 43, 0) 66%);
  animation-duration: 34s;
  animation-delay: -8s;
}

.ambient__blob--three {
  --depth: -30px;
  bottom: -30vmax;
  left: 22vw;
  background: radial-gradient(circle, rgba(4, 63, 46, 0.16) 0%, rgba(4, 63, 46, 0) 70%);
  animation-duration: 40s;
  animation-delay: -16s;
}

@keyframes ambient-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(6vw, 4vh) scale(1.08);
  }

  100% {
    transform: translate(-4vw, 8vh) scale(0.96);
  }
}

.ambient__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(4, 63, 46, 0.11) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ambient__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 222, 80, 0.36) 0%, rgba(178, 222, 80, 0) 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard);
  will-change: transform;
}

.has-pointer .ambient__glow {
  opacity: 1;
}

.pointer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

.pointer.is-on {
  opacity: 1;
}

.pointer__dot,
.pointer__ring {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
}

.pointer__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background-color: var(--color-deep-forest);
  border-radius: 50%;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.pointer__ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}

.pointer__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(4, 63, 46, 0.8);
  border-radius: 50%;
  transition: transform 0.35s var(--ease-standard), background-color 0.35s var(--ease-standard), border-color 0.35s var(--ease-standard);
}

.pointer.is-hover .pointer__ring::before {
  background-color: rgba(178, 222, 80, 0.45);
  border-color: var(--color-deep-forest);
  transform: scale(1.6);
}

.pointer.is-hover .pointer__dot {
  opacity: 0;
}

.pointer.is-text .pointer__ring::before {
  background-color: transparent;
  transform: scale(0.6);
}

.pointer.is-press .pointer__ring::before {
  transform: scale(0.8);
}

.pointer.is-hover.is-press .pointer__ring::before {
  transform: scale(1.3);
}

.is-calm .pointer {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .pointer,
  .ambient__glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient__blob {
    animation: none;
    transition: none;
    translate: none;
  }

  .ambient__glow {
    display: none;
  }
}