/* Splits on top of the template's stylesheets (whose colours and font names are swapped by tools/retext.mjs).
   Black, one split orange, warm white type. Archivo (wide and heavy for display, normal width for text), IBM Plex Mono for numbers. */
@font-face { font-family: "Archivo"; src: url(/sp/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/sp/plex-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/sp/plex-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/sp/plex-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root { --sp-ink: #0a0a0a; --sp-or: #ff7a1a; --sp-paper: #f4f1ec; --sp-panel: #120f0c; --sp-line: rgba(244, 241, 236, 0.14); --sp-soft: rgba(244, 241, 236, 0.72); --sp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
html { background: var(--sp-ink); }
body, body.bg-black, body.\!bg-white { background: var(--sp-ink) !important; color: var(--sp-paper); }
#webgl { background: var(--sp-ink); }
#webgl canvas.sp-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
::selection { background: var(--sp-or); color: var(--sp-ink); }

/* ---- type */
.t-display-xl-en, .t-display-xl-en-responsive, .t-display-l-en, .t-display-m-en, .t-display-s-en,
.t-headline-xl-en, .t-headline-l-en, .t-headline-l-en-responsive, .t-headline-m-en, .t-kv-title-en, .t-title-xl-en {
  font-family: "Archivo", sans-serif; font-weight: 850; font-stretch: 112%; letter-spacing: -0.02em; font-feature-settings: normal;
}
.t-display-l-ja, .t-headline-l-ja, .t-headline-m-ja, .t-headline-s-ja {
  font-family: "Archivo", sans-serif; font-weight: 750; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.12; font-feature-settings: normal;
}
.t-title-l-ja, .t-title-m-ja, .t-body-xl-ja, .t-body-l-ja, .t-body-m-ja, .t-label-m-ja, .t-label-s-ja, .t-label-xs-ja,
.t-ingredients-ja, .t-page-hero-label-ja, .t-title-m {
  font-family: "Archivo", sans-serif; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.55; font-feature-settings: normal;
}
.t-label-xxl-en, .t-label-xl-en, .t-label-l-en, .t-label-m-en, .t-label-s-en, .t-label-xs-en, .t-label-xxs-en, .t-label-xxxs-en,
.t-body-xl-en, .tabular-nums, .sp-mono {
  font-family: var(--sp-mono); font-weight: 500; letter-spacing: 0; font-feature-settings: normal;
}
.t-page-hero-label-ja { font-family: var(--sp-mono); font-weight: 500; font-size: 0.8125rem; }
.header-nav a, .navi-list a, [x-data="naviModal"] nav a { font-family: "Archivo", sans-serif; font-weight: 650; font-stretch: 108%; letter-spacing: -0.005em; }
[x-data="naviModal"] nav .t-label-s-en { font-family: var(--sp-mono); font-weight: 500; }

/* ---- marks: the $10X logo + the two-line wordmark */
.link-logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.sp-mark { display: block; width: 2.1rem; height: 2.1rem; flex: none; }
.link-logo .sp-wordmark { height: 1.75rem; width: auto; display: block; }
@media (min-width: 768px) { .link-logo .sp-wordmark { height: 2rem; } .sp-mark { width: 2.4rem; height: 2.4rem; } }
.sp-wordmark path { fill: currentColor; }

/* ---- the home hero */
[data-section="kv"] .kv-copy { gap: 0; }
[data-section="kv"] .kv-copy .t-t-1 { font-size: clamp(6.6rem, 25vw, 21rem); line-height: 0.82; font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; margin-top: -0.02em; color: var(--sp-or) !important; }
[data-section="kv"] .kv-copy .t-t-1 span { color: var(--sp-or) !important; }
[data-section="kv"] .kv-copy .t-t-2 { font-size: clamp(1.5rem, 4.4vw, 3.5rem); font-weight: 700; font-stretch: 112%; letter-spacing: -0.02em; margin-top: 0.12em; }
[data-section="kv"] .kv-copy .t-b-1, [data-section="kv"] .kv-copy .t-b-2 { font-size: clamp(1.3rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; }
[data-section="kv"] .kv-copy .t-b-2 { font-family: var(--sp-mono); font-weight: 500; letter-spacing: -0.04em; color: var(--sp-soft) !important; }
[data-section="kv"] .kv-copy .t-b-2 span { color: var(--sp-soft) !important; }
[data-section="kv"] .kv-copy .kv-copy__ja { font-family: var(--sp-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-soft); }
[data-section="kv"] .kv-copy .kv-copy__bracket { font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; align-items: center; visibility: hidden; }
html.sp-has-last [data-section="kv"] .kv-copy .kv-copy__bracket { visibility: visible; }
[data-section="kv"] .kv-copy .kv-copy__live { font-family: var(--sp-mono); font-weight: 500; font-size: clamp(0.95rem, 2vw, 1.6rem); letter-spacing: -0.01em; white-space: nowrap; }
[data-section="kv"] .kv-copy .kv-copy__live a { color: var(--sp-paper) !important; text-decoration: underline; text-decoration-color: var(--sp-or); text-underline-offset: 0.2em; pointer-events: auto; }
[data-section="kv"] .kv-keyword-left, [data-section="kv"] .kv-keyword-right { font-family: var(--sp-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-soft); }
[data-section="kv"] .kv-copy, [data-section="kv"] .kv-copy p, [data-section="kv"] .kv-copy span { color: var(--sp-paper); }
body:not(.\!bg-white) header .link-logo { color: var(--sp-paper) !important; }
body:not(.\!bg-white) header .header-nav a { color: var(--sp-paper); }

/* ---- the loading screen */
[x-data="LoadingUI"] { background: var(--sp-ink); }
[x-data="LoadingUI"] .cover { background: var(--sp-ink) !important; }
[x-data="LoadingUI"] .logo-gray { color: rgba(244, 241, 236, 0.14) !important; }
[x-data="LoadingUI"] .logo-white { color: var(--sp-or) !important; }
[x-data="LoadingUI"] .logo-wrap svg { width: 52%; max-width: 640px; height: auto; display: block; }
[x-data="LoadingUI"] .logo-wrap .logo-white { position: absolute; left: 0; top: 0; }
[x-data="LoadingUI"] .intro-imgs .img-wrap { width: min(42vw, 42vh); height: min(42vw, 42vh); border: 1px solid var(--sp-line); }

/* ---- the home chapters */
.home-chapter, .home-chapter__group, [data-section^="homeChapter"] .text, [data-section^="homeChapter"] .text-white,
[data-section="homeChapter02"] .home-chapter, [data-section="homeIntroduction"] .copy, [data-section="homeIntroduction"] .fade-paragraph,
[data-section="homeSceneOnOff"], [data-section="homeChapter06"] .content { color: var(--sp-paper) !important; }
.home-chapter .section-label { font-family: var(--sp-mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-or); }
.home-chapter .setcion-title { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; margin-top: 1.25rem; margin-bottom: 1.5rem; font-weight: 850; font-stretch: 118%; letter-spacing: -0.03em; max-width: 13em; }
.home-chapter .section-name { color: var(--sp-soft); }
[data-section^="homeChapter"] .text { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; font-weight: 500; }
[data-section="homeIntroduction"] .copy-paragraph.t-display-l-ja { font-size: clamp(1.5rem, 3.2vw, 2.8rem); }
[data-section="homeIntroduction"] .copy-paragraph.t-headline-l-en { font-size: clamp(4.5rem, 14vw, 12rem); color: var(--sp-or); line-height: 0.95; margin: 0.08em 0; font-weight: 900; font-stretch: 125%; }
[data-section="homeIntroduction"] .fade-paragraph { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 500; }
[data-section="homeIntroduction"] .logo-wrap svg { color: var(--sp-or) !important; }
[data-section="homeChapter06"] .text-group .logo { color: var(--sp-or); }
[data-section="homeChapter06"] .text-group__copy { font-size: clamp(1.6rem, 3.2vw, 2.8rem); }
.sp-dosage { color: var(--sp-soft); font-size: 0.8125rem; letter-spacing: 0.04em; }
[data-section="homeSceneOnOff"] .t-headline-l-en { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
[data-section="homeSceneOnOff"] .label { color: var(--sp-or); }
.scene-navi .label p { font-family: var(--sp-mono) !important; }

/* ---- section pages */
.c-section-title[data-color="white"] .slush, .c-section-title[data-color="white"] .line { background-color: rgba(244, 241, 236, 0.3) !important; }
.c-page-hero { color: var(--sp-ink); }
.c-page-hero .slush-text { color: var(--sp-ink); }
.c-page-hero .link-face.bg-green { color: var(--sp-ink); }
.c-page-hero__nav .item-title-en { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.c-section-title .t-label-m-en { color: var(--sp-or); }
.c-section-lead .t-title-m { color: var(--sp-soft); }
.c-section-lead .t-headline-l-ja { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.c-section-lead .lead-desc p + p { margin-top: 1em; }
.lead-desc .t-body-m-ja, .lead-desc.t-body-m-ja { font-size: 1.0625rem; line-height: 1.62; }
.lead-desc a, .accordion a, dl .list-inner dd a, .sp-ev { color: var(--sp-or); text-decoration: underline; text-underline-offset: 0.18em; pointer-events: auto; word-break: break-all; }
.c-full-banner, .c-full-banner .text-group { color: var(--sp-paper) !important; }
.c-full-banner .logo { color: var(--sp-or); width: 11em; height: auto; }
.c-full-banner .t-display-l-ja { font-size: clamp(2rem, 4.6vw, 4rem); }
.sticky-area__item, .img-mobile-wrap { background: var(--sp-panel) !important; }
.sticky-area .face { background: var(--sp-panel) !important; }
.sticky-area__item span, .img-mobile-wrap .indication { color: var(--sp-or); }
.item-total { color: var(--sp-or); }
.list__item .t-headline-m-ja { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.text-for-wrap { color: var(--sp-paper); }
.item-status { color: var(--sp-or); }
.item-cate { font-family: "Archivo", sans-serif !important; font-weight: 800 !important; font-stretch: 112%; letter-spacing: -0.02em; }
.item-text { font-family: var(--sp-mono) !important; }
.faq-left-side .t-title-m-ja, .faq-wrap .accodion-header { color: var(--sp-paper); }
.accordion .accordion-content-inner p { color: var(--sp-soft); }
dl .list-inner dt { color: var(--sp-soft); }
dl .list-inner dd { font-family: var(--sp-mono); font-weight: 500; font-size: 0.9375rem; line-height: 1.5; }
.dashed-line { border-color: var(--sp-line) !important; opacity: 1; }

/* ---- the drawn panels that sit where the photos were */
canvas.sp-panel { display: block; width: 100%; background: var(--sp-panel); border: 1px solid var(--sp-line); box-sizing: border-box; }
canvas.sp-panel.sp-fill { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
canvas.sp-panel.sp-flat { border: 0; }
.imgs .img-wrap canvas.sp-panel, [x-ref="imgsMobile"] .img-wrap canvas.sp-panel { position: absolute; inset: 0; width: 100%; height: 100%; }
.imgs .img-wrap canvas.sp-panel { opacity: 0; transition: opacity 0.4s cubic-bezier(0.3, 0.26, 0.38, 1); }
.imgs .img-wrap.active canvas.sp-panel { opacity: 1; }
[x-ref="imgsMobile"] .img-wrap { position: absolute; inset: 0; }
[x-ref="imgsMobile"] .img-wrap canvas.sp-panel { opacity: 0; transition: opacity 0.4s; }
[x-ref="imgsMobile"] .img-wrap img.active + canvas.sp-panel { opacity: 1; }
[x-ref="imgsMobile"] .img-wrap img.sp-ph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
[x-data="naviSideSlider"] .video-wrap { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
[x-data="naviSideSlider"] .content { background: var(--sp-panel); color: var(--sp-paper); border: 1px solid var(--sp-line); }
[x-data="naviSideSlider"] .content .t-title-m-ja { color: var(--sp-soft); }
[x-data="naviSideSlider"] .face { background: transparent !important; }

/* ---- footer */
footer[x-data="footer"] { background: var(--sp-ink) !important; color: var(--sp-paper) !important; border-top: 1px solid var(--sp-line); }
footer .logo-mark svg { color: var(--sp-or); width: 74%; max-width: 1180px; height: auto; display: block; }
footer .sp-foot-mark { display: flex; align-items: center; gap: 0.6rem; color: var(--sp-paper); }
footer .sp-foot-mark svg { height: 1.3rem; width: auto; }
footer .copyright { color: rgba(244, 241, 236, 0.6); max-width: 46em; }
footer .sp-ca { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: var(--sp-mono); font-size: 0.8125rem; background: none; border: 1px solid var(--sp-line); color: var(--sp-paper); padding: 0.3rem 0.6rem; }
footer .sp-ca.is-copied::after { content: "copied"; color: var(--sp-or); }
footer .sp-domain { color: var(--sp-paper); }
[hidden] { display: none !important; }

/* ---- 404 */
[x-data="Page404"] { color: var(--sp-ink); }
[x-data="Page404"] .text-group { color: var(--sp-ink) !important; }

/* ---- the primary button (orange block, ink type) */
.header-nav a.sp-launch[inert] { opacity: 1; }
.header-nav a.sp-launch, [x-data="naviModal"] nav a.sp-launch { text-transform: none; }
.header-nav a.sp-launch { background: var(--sp-or); color: var(--sp-ink) !important; padding: 0.55rem 0.95rem; font-weight: 800; margin-left: 0.4rem; transition: background 0.2s, color 0.2s; }
.header-nav a.sp-launch:hover { background: var(--sp-paper); }
body.\!bg-white:not(:has(.sp-app)) header[data-color="white"] .header-nav a.sp-launch { background: var(--sp-ink); color: var(--sp-or) !important; }
[x-data="naviModal"] nav a.sp-launch { color: var(--sp-or) !important; }
.sp-launch--hero { display: block; width: max-content; margin: 1.6rem auto 0; padding: 1rem 1.9rem; background: var(--sp-or); color: var(--sp-ink) !important; font: 800 1.1rem/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -0.01em; text-transform: none; text-decoration: none; pointer-events: auto; transition: background 0.2s; }
.sp-launch--hero:hover { background: var(--sp-paper); }
/* the hero row: $10X CA (copy) · Open the split board · Follow on X */
.sp-hero-row { position: relative; left: 50%; transform: translateX(-50%); width: max-content; display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 0.6rem; margin: 1.4rem 0 0; pointer-events: auto; text-transform: none; letter-spacing: normal; }
.sp-hero-row .sp-launch--hero { margin: 0; }
.sp-hero-ca, .sp-hero-x { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3.1rem; box-sizing: border-box; text-decoration: none; pointer-events: auto; }
.sp-hero-ca[hidden], .sp-hero-x[hidden] { display: none; }
.sp-hero-ca { padding: 0 1rem; background: transparent; border: 1px solid var(--sp-line); cursor: pointer; font: 500 0.8125rem/1 var(--sp-mono); letter-spacing: 0; transition: border-color 0.2s; }
.sp-hero-ca:hover { border-color: var(--sp-or); }
[data-section="kv"] .kv-copy .sp-hero-ca span, .sp-hero-ca { color: var(--sp-paper); }
[data-section="kv"] .kv-copy .sp-hero-ca .sp-hero-ca__k, [data-section="kv"] .kv-copy .sp-hero-ca .sp-hero-ca__done { color: var(--sp-or); letter-spacing: 0.06em; }
.sp-hero-ca .sp-copyicon { width: 0.9rem; height: 0.9rem; color: var(--sp-soft); }
.sp-hero-ca__short, .sp-hero-ca__done { display: none; }
.sp-hero-ca.is-copied .sp-copyicon { display: none; }
.sp-hero-ca.is-copied .sp-hero-ca__done { display: inline; }
.sp-hero-x { padding: 0 1.25rem; background: var(--sp-paper); font: 800 1.05rem/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -0.01em; transition: background 0.2s; }
.sp-hero-x, [data-section="kv"] .kv-copy .sp-hero-x span { color: var(--sp-ink) !important; }
.sp-hero-x:hover { background: var(--sp-or); }
.sp-hero-x .sp-xicon { width: 1.05rem; height: 1.05rem; flex: none; }
@media (max-width: 767px) {
  [data-section="kv"] .kv-copy .kv-copy__bracket { width: 18rem !important; max-width: 100%; align-self: center; }
  .sp-hero-row { left: auto; transform: none; flex-wrap: wrap; gap: 0.5rem; margin: 1rem auto 0; width: auto; max-width: 22rem; }
  .sp-hero-row .sp-launch--hero { order: -1; flex: 1 1 100%; text-align: center; padding: 0.9rem 1rem; }
  .sp-hero-ca, .sp-hero-x { min-height: 2.75rem; }
  .sp-hero-ca { flex: 1 1 auto; justify-content: center; padding: 0 0.7rem; font-size: 0.75rem; gap: 0.45rem; }
  .sp-hero-ca__full { display: none; }
  .sp-hero-ca__short { display: inline; }
  .sp-hero-x { padding: 0 0.9rem; font-size: 0.95rem; }
}
html body header .header-nav a.sp-launch, html body header .header-nav a.sp-launch * { color: var(--sp-ink) !important; }
html body.\!bg-white:not(:has(.sp-app)) header[data-color="white"] .header-nav a.sp-launch, html body.\!bg-white:not(:has(.sp-app)) header[data-color="white"] .header-nav a.sp-launch * { color: var(--sp-or) !important; }

/* no glow on the hero type */
[data-section="kv"] .kv-copy, [data-section="kv"] .kv-copy * { text-shadow: none !important; }
/* the section page: a solid bar behind the fixed header so scrolled text never runs under the nav */
body:has([data-barba-namespace="spawn"])::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 84px; background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid var(--sp-line); z-index: 19; pointer-events: none; }
@media (max-width: 767px) { body:has([data-barba-namespace="spawn"])::before { height: 64px; } }

/* the hero is a big sticky block: let clicks fall through it to the scene buttons and header, keep its own links live */
[data-section="kv"] .kv__content, [data-section="kv"] .kv-copy { pointer-events: none; }
[data-section="kv"] .kv-copy a, [data-section="kv"] .kv-copy button { pointer-events: auto; }
.scene-indicator { z-index: 15; }
header[x-data="header"] { z-index: 40; }
/* the page hero's scroll-down arrow sat under the big title on phones */
.c-page-hero .slush-text { pointer-events: none; }
.c-icon-circle-arrow { position: relative; z-index: 5; }
/* the hero section itself caught clicks meant for its own scroll cue and the scene buttons: only its controls take them */
[data-section="kv"] { pointer-events: none; }
[data-section="kv"] a, [data-section="kv"] button { pointer-events: auto; }
/* the scene buttons are faded out (and inert) at the top of the page: hide them for real until the template shows them */
.scene-indicator[inert], .scene-navi[inert] { visibility: hidden; }
/* the loading screen is a picture, never a wall: clicks pass through it while it fades */
[x-data="LoadingUI"], [x-data="LoadingUI"] * { pointer-events: none !important; }