/* ASPI Design System — components. Load after tokens.css.
   Surfaces: default = manual & document (fixed sizes) / .aspi-web = homepage, LP, article (fluid sizes, 375→1280px)
   / .aspi-app = business app (dense PC sizes, HR BASE manners; rules at the end of this file).
   Rules: white ground, square corners, no gradients except the marker and placeholder stripes.
   Shadows only on floating layers (pickers, menus, calendars, drawers, dialogs, toasts).
   Yellow (attention) = attention only, one or two places per screen; in apps the pale-yellow action block is the
   one main action per screen. Motion only answers the viewer. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Josefin+Sans:wght@400;600;700&family=Jost:wght@400;500;700;900&family=Cinzel:wght@400;600&display=swap');

/* ── Derived values (recomputed wherever a theme is set) ── */
:root, [data-theme] {
  --border-thin: var(--stroke-hair) solid var(--ink);
  --border-accent: var(--stroke-accent) solid var(--brand-soft);
  --focus-ring: var(--stroke-focus) solid var(--focus);
}
:root {
  --motion-fast: 160ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --font-en-round: var(--font-en);
  /* document & app sizes */
  --aspi-h1: 30px;
  --aspi-h2: 22px;
  --aspi-h3: 17px;
  --aspi-wm: 44px;
  --aspi-body: 16px;
  --aspi-caption: 13px;
  --aspi-footnote: 12px;
  --aspi-ls-body: var(--ls-body);
  --aspi-marker-stop: 58%;
  --aspi-head-gap: 18px;
  --aspi-h2-pt: 21px;                                   /* the JP title sits over the watermark's lower half; the watermark bleeds 14px above the box */
  --aspi-h2-rule: 35px;
  --aspi-h2-lift: 14px;
  --aspi-h2-bleed: 64px;
  --aspi-h2-rule-in: 12px;
}
.aspi-web {
  --aspi-h1: var(--wfs-title);
  --aspi-h2: var(--wfs-h2-doc);
  --aspi-h3: var(--wfs-h3);
  --aspi-wm: var(--wfs-watermark-doc);
  --aspi-body: var(--wfs-body);
  --aspi-caption: var(--wfs-caption);
  --aspi-footnote: var(--wfs-footnote);
  --aspi-ls-body: var(--ls-web-body);
  --aspi-marker-stop: 60%;
  --aspi-head-gap: 14px;
  --aspi-h2-pt: calc(var(--aspi-wm) - var(--aspi-h2) * 0.85);
  --aspi-h2-rule: calc(var(--aspi-h2-pt) + var(--aspi-h2) * 0.78);
  --aspi-h2-bleed: min(var(--web-gutter), 40px);
  --aspi-h2-rule-in: 14px;
  --aspi-h2-lift: 0px;
}
@media (min-width: 960px) { .aspi-web { --web-header-h: 80px; } }

/* ── Base ─────────────────────────────────────────────── */
:where(body) {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: var(--fw-body);
  font-size: var(--aspi-body);
  letter-spacing: var(--aspi-ls-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  word-break: auto-phrase;
}
:where(body) *, :where(body) *::before, :where(body) *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.aspi-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--attention); color: var(--ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.aspi-web { line-height: var(--lh-body); }
.aspi-web [id] { scroll-margin-top: calc(var(--web-header-h) + 16px); }
.aspi-br-wide { display: none; }
@media (min-width: 600px) { .aspi-br-wide { display: inline; } }

/* ── Inline emphasis ──────────────────────────────────── */
.aspi-em { color: var(--brand-text); }
.aspi-em--lg { color: var(--brand); }                   /* text 24px and up */
.aspi-neg { color: var(--negative-text); }
.aspi-old { color: var(--gray-strike); text-decoration: line-through; }
.aspi-marker { background: linear-gradient(transparent var(--aspi-marker-stop), var(--marker) var(--aspi-marker-stop)); }
.aspi-num { font-family: var(--font-num); font-weight: var(--fw-bold); letter-spacing: 0.01em; }
.aspi-en { font-family: var(--font-en); }
.aspi-note { margin: 0; font-size: var(--aspi-footnote); color: var(--text-note); letter-spacing: 0.1em; line-height: 1.85; }
.aspi-link { color: var(--text-link); text-decoration: none; border-bottom: var(--stroke-hair) solid var(--brand-soft); }
.aspi-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.aspi-ruby { display: inline-flex; flex-direction: column; align-items: center; }
.aspi-ruby--left { align-items: flex-start; }
.aspi-ruby__label { font-size: var(--ruby-label, 14px); font-weight: var(--fw-body); letter-spacing: var(--ls-xwide); line-height: 1.6; }
.aspi-ruby__body { font-size: var(--ruby-size, 26px); font-weight: var(--fw-bold); letter-spacing: 0.06em; line-height: 1.3; }
.aspi-bignum { font-family: var(--font-num); font-weight: var(--fw-black); font-size: var(--bignum-size, var(--wfs-num)); line-height: 1; letter-spacing: -0.02em; color: var(--attention); }

/* ── Layout ───────────────────────────────────────────── */
.aspi-container { width: 100%; max-width: calc(var(--web-max) + 2 * var(--web-gutter)); margin-inline: auto; padding-inline: var(--web-gutter); }
.aspi-container--narrow { max-width: calc(var(--web-narrow) + 2 * var(--web-gutter)); }
.aspi-section { padding-block: var(--web-section-y); overflow-x: clip; }
.aspi-section--band { background: var(--gray-band); }
.aspi-section:not(.aspi-section--band) + .aspi-section:not(.aspi-section--band) { padding-top: 0; }
.aspi-stack { display: grid; gap: var(--stack-gap, 24px); align-content: start; min-width: 0; }
.aspi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.aspi-actions--start { justify-content: flex-start; }
.aspi-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 960px) { .aspi-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* document layout: sticky contents + 820px column */
.aspi-doc-layout { display: flex; flex-wrap: wrap; gap: 56px; max-width: 1160px; margin: 0 auto; padding: 56px var(--doc-pad) 140px; }
.aspi-doc-layout__nav { flex: 0 0 var(--doc-nav-w); position: sticky; top: 96px; align-self: flex-start; }
.aspi-doc-layout__main { flex: 1 1 560px; min-width: 0; max-width: var(--doc-width); }
.aspi-doc-layout__main > section + section { margin-top: 88px; }
.aspi-band { background: var(--gray-band); margin-inline: calc(-1 * var(--doc-pad)); padding: 56px var(--doc-pad); }
.aspi-doc-layout__main > .aspi-band { margin-top: 96px; }

/* prose rhythm (article, manual chapters) */
.aspi-prose { min-width: 0; }
.aspi-web .aspi-prose { font-size: var(--wfs-prose); line-height: var(--lh-prose); letter-spacing: 0.06em; }
.aspi-prose p, .aspi-prose section > * { margin: 0; }
.aspi-prose section > * + * { margin-top: 24px; }
.aspi-web .aspi-prose section > * + * { margin-top: 1.4em; }
.aspi-prose section > .aspi-h2 + * { margin-top: 32px; }
.aspi-web .aspi-prose section > .aspi-h2 + * { margin-top: clamp(24px, 3vw, 32px); }
.aspi-prose > section + section { margin-top: 88px; }
.aspi-web .aspi-prose > section + section { margin-top: clamp(64px, 8vw, 96px); }
.aspi-prose ul:not([class]) { padding-left: 1.2em; }
.aspi-prose section > .aspi-h3:not(:first-child) { margin-top: 48px; }

/* app shell (PC first): side navigation + main column */
.aspi-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 960px) { .aspi-shell { grid-template-columns: var(--app-nav-w) minmax(0, 1fr); } }
/* stacked: the nav row keeps its height and the main column takes the rest, so a short page leaves no gap under the nav */
@media (max-width: 959px) { .aspi-shell { grid-template-rows: auto minmax(0, 1fr); } }
.aspi-shell__nav { border-bottom: var(--stroke-hair) solid var(--gray-rule); background: var(--paper); }
@media (min-width: 960px) {
  .aspi-shell__nav { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; border-bottom: 0; }
  .aspi-shell__main { border-left: var(--stroke-hair) solid var(--gray-rule); }
}
.aspi-shell__main { min-width: 0; padding: 32px 40px 96px; display: grid; gap: 40px; align-content: start; }

/* ── Buttons ──────────────────────────────────────────── */
.aspi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--button-h); padding: 0 32px;
  border: var(--stroke-hair) solid transparent; border-radius: var(--radius);
  background: none; color: var(--ink);
  font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 15px; letter-spacing: 0.14em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.aspi-btn--cta { background: var(--attention); color: var(--on-attention); border-color: var(--ink); }   /* one per screen: 予約・申込 */
.aspi-btn--cta:hover { background: var(--ink); color: var(--attention); }
.aspi-btn--primary { background: var(--brand-text); color: var(--on-brand); }
.aspi-btn--primary:hover { background: var(--ink); color: var(--paper); }
.aspi-btn--outline { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.aspi-btn--outline:hover { background: var(--ink); color: var(--paper); }
.aspi-btn--primary.aspi-btn--danger { background: var(--negative-text); color: var(--paper); }
.aspi-btn--primary.aspi-btn--danger:hover { background: var(--ink); color: var(--paper); }
.aspi-btn--outline.aspi-btn--danger { color: var(--negative-text); border-color: var(--negative-text); }
.aspi-btn--outline.aspi-btn--danger:hover { background: var(--negative-text); color: var(--paper); }
.aspi-btn--sm { min-height: var(--button-h-sm); padding: 0 18px; font-size: 13px; letter-spacing: 0.12em; }
.aspi-btn--block { display: flex; width: 100%; }
.aspi-btn:active { transform: translateY(1px); }
.aspi-btn:disabled, .aspi-btn[aria-disabled="true"] { background: var(--gray-band); color: var(--text-note); border-color: var(--gray-band); cursor: default; transform: none; pointer-events: none; }
.aspi-btn-text {
  border: 0; border-bottom: var(--stroke-hair) solid var(--brand-soft); background: none; padding: 0;
  color: var(--text-link); font: inherit; font-size: var(--aspi-caption); letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
}
.aspi-btn-text:hover { color: var(--ink); border-bottom-color: var(--ink); }
.aspi-btn-text--danger { color: var(--negative-text); border-bottom-color: var(--negative); }
.aspi-btn-text--danger:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Tags and status ──────────────────────────────────── */
.aspi-tag {
  display: inline-block; padding: 7px 18px; border-radius: var(--radius);
  background: var(--brand-text); color: var(--on-brand);
  font-family: var(--font-jp); font-weight: var(--fw-body); font-size: 13px; letter-spacing: var(--ls-label); line-height: 1;
  white-space: nowrap; text-decoration: none; vertical-align: middle;
}
.aspi-tag--tip, .aspi-tag--green { background: var(--tip); color: var(--on-tip); }
.aspi-tag--dark { background: var(--ink-charcoal); color: var(--paper); }
.aspi-tag--black { background: var(--ink); color: var(--paper); }
.aspi-tag--gray { background: var(--gray-band); color: var(--ink); }
.aspi-tag--line { background: var(--paper); color: var(--ink); border: var(--border-thin); padding: 6px 17px; }
.aspi-tag--sm { padding: 4px 10px; font-size: 12px; }
.aspi-tag--line.aspi-tag--sm { padding: 3px 9px; }
.aspi-tag--slide { padding: 8px 24px; font-size: 16px; letter-spacing: var(--ls-xwide); }
a.aspi-tag:hover, .aspi-tag--link:hover { background: var(--ink); color: var(--paper); }
.aspi-supports { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aspi-supports__label { font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); margin-right: 4px; }

/* status mark for dense app tables: square swatch + word (colour is never the only cue) */
.aspi-status-mark { display: inline-flex; align-items: center; vertical-align: middle; gap: 8px; white-space: nowrap; color: var(--ink); }
.aspi-status-mark::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--status, var(--gray-strike)); }
.aspi-status-mark--ok { --status: var(--brand); }
.aspi-status-mark--warn { --status: var(--attention); }
.aspi-status-mark--warn::before { outline: var(--stroke-hair) solid var(--ink); outline-offset: -1px; }
.aspi-status-mark--ng { --status: var(--negative); }
.aspi-status-mark--info { --status: var(--status-info); }
.aspi-status-mark--off { --status: var(--gray-strike); color: var(--text-note); }

.aspi-status-icon { width: var(--icon-size, 30px); height: var(--icon-size, 30px); display: block; flex: none; }

.aspi-circle-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--badge-size, 84px); height: var(--badge-size, 84px); border-radius: var(--radius-circle);
  background: var(--attention); color: var(--on-attention); border: var(--stroke-rule) solid var(--ink);
  font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: var(--badge-font, 20px); letter-spacing: 0.08em; line-height: 1.3; text-align: center;
}
.aspi-circle-badge--brand { background: var(--brand); color: var(--on-brand); border: 0; }

/* ── Arrows ───────────────────────────────────────────── */
.aspi-arrow { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; color: var(--brand); flex: none; }
.aspi-arrow i { width: 5px; height: 5px; border-radius: var(--radius-circle); background: currentColor; display: block; }
.aspi-arrow::after { content: ""; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.aspi-arrow--down { transform: rotate(90deg); }
.aspi-arrow--ink { color: var(--ink); }
.aspi-dotarrow { display: inline-flex; align-items: center; gap: var(--dot-gap, 4px); color: var(--brand); flex: none; }
.aspi-dotarrow__col { display: flex; flex-direction: column; gap: var(--dot-gap, 4px); }
.aspi-dotarrow__col i { width: var(--dot, 5px); height: var(--dot, 5px); border-radius: var(--radius-circle); background: currentColor; display: block; }
.aspi-dotarrow--down { transform: rotate(90deg); }
.aspi-dotarrow--left { transform: rotate(180deg); }
.aspi-dotarrow--up { transform: rotate(270deg); }
.aspi-chevron { display: inline-flex; flex: none; color: var(--attention); }
.aspi-chevron i { display: block; width: calc(var(--chev, 56px) * 0.72); height: var(--chev, 56px); background: currentColor; clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%); }
.aspi-chevron i + i { margin-left: calc(var(--chev, 56px) * -0.252); opacity: 0.85; }
.aspi-chevron--down { transform: rotate(90deg); }

/* ── Section titles: watermark + Japanese + rule ──────── */
/* chapter (manual, article, app page) */
.aspi-h2 { position: relative; margin: calc(-1 * var(--aspi-h2-lift)) 0 32px; padding-left: 26px; padding-top: var(--aspi-h2-pt); font-weight: var(--fw-bold); }
.aspi-prose .aspi-h2 { margin-bottom: 0; }
.aspi-h2::before {
  content: ""; position: absolute; left: calc(-1 * var(--aspi-h2-bleed)); top: var(--aspi-h2-rule);
  width: calc(var(--aspi-h2-bleed) + var(--aspi-h2-rule-in)); height: var(--stroke-rule); background: var(--ink);
}
.aspi-h2--labeled::before { top: calc(var(--aspi-h2-rule) + 20px); }
.aspi-h2__wm {
  position: absolute; top: 0; left: 26px;
  font-family: var(--font-en); font-weight: 700; font-size: var(--aspi-wm); line-height: 1; letter-spacing: 0.01em;
  color: var(--watermark); white-space: nowrap; user-select: none; pointer-events: none;
}
.aspi-h2__label { position: relative; display: block; font-size: var(--aspi-caption); font-weight: var(--fw-body); letter-spacing: var(--ls-xwide); line-height: 1.6; }
.aspi-h2__label .aspi-num { font-size: 1.15em; }
.aspi-h2__jp { position: relative; display: block; font-size: var(--aspi-h2); letter-spacing: 0.1em; line-height: 1.5; text-wrap: balance; }
.aspi-web .aspi-h2__jp { line-height: 1.55; }
.aspi-band .aspi-h2::before, .aspi-section--band .aspi-h2::before, .aspi-h2--on-band::before { content: none; }
.aspi-band .aspi-h2__wm, .aspi-section--band .aspi-h2__wm, .aspi-h2--on-band .aspi-h2__wm { color: var(--paper); }

/* top-level web section title: centered = divider, left = header with the rule running off the screen edge */
.aspi-title { position: relative; margin: 0 0 clamp(32px, 5vw, 56px); padding-top: calc(var(--wfs-watermark) - var(--wfs-h2) * 0.9); font-weight: var(--fw-bold); }
.aspi-title__wm {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-en); font-weight: 700; font-size: var(--wfs-watermark); line-height: 1; letter-spacing: 0.01em;
  color: var(--watermark); white-space: nowrap; user-select: none; pointer-events: none;
}
.aspi-title__jp { position: relative; display: block; font-size: var(--wfs-h2); letter-spacing: var(--ls-web-heading); line-height: var(--lh-heading); }
.aspi-title--center { text-align: center; }
.aspi-title--center .aspi-title__wm { left: 50%; transform: translateX(-50%); }
.aspi-title--left { padding-left: 26px; padding-top: calc(var(--wfs-watermark-sm) - var(--wfs-h2) * 0.9); }
.aspi-title--left .aspi-title__wm { left: 26px; font-size: var(--wfs-watermark-sm); }
.aspi-title--left::before {
  content: ""; position: absolute; right: calc(100% - 12px);
  top: calc(var(--wfs-watermark-sm) - var(--wfs-h2) * 0.9 + var(--wfs-h2) * 0.75);
  width: 100vw; height: var(--stroke-rule); background: var(--ink);
}
.aspi-section--band .aspi-title__wm { color: var(--paper); }

/* slide lockup (fixed 1280×720 sizes) */
.aspi-wmtitle { position: relative; display: flex; align-items: flex-end; --wm-en: 60px; --wm-jp: 30px; --wm-gap: 12px; }
.aspi-wmtitle--divider { --wm-en: 84px; --wm-jp: 38px; --wm-gap: 14px; }
.aspi-wmtitle__line { width: 74px; height: var(--stroke-rule); background: var(--ink); flex: none; margin-bottom: calc(var(--wm-jp) * 0.75); margin-right: var(--wm-gap); }
.aspi-wmtitle__stack { position: relative; display: inline-block; line-height: 1.3; }
.aspi-wmtitle__en {
  position: absolute; left: 0; bottom: calc(var(--wm-jp) * 0.5); z-index: 0;
  font-family: var(--font-en); font-weight: 700; font-size: var(--wm-en); line-height: 1; letter-spacing: 0.01em;
  color: var(--watermark); white-space: nowrap; user-select: none;
}
.aspi-wmtitle__jp { position: relative; z-index: 1; font-family: var(--font-jp); font-weight: 700; font-size: var(--wm-jp); letter-spacing: 0.14em; color: var(--ink); white-space: nowrap; }

/* ── Headings without watermark ───────────────────────── */
.aspi-heading { margin: 0; font-size: var(--aspi-h2); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; }
.aspi-h3, .aspi-prose h3:not([class]) { margin: 0; font-size: var(--aspi-h3); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.6; }
.aspi-heading::after, .aspi-h3::after, .aspi-prose h3:not([class])::after {
  content: ""; display: block; width: 40px; height: var(--stroke-mark); margin-top: 10px; background: var(--attention);
}

/* ── Messages ─────────────────────────────────────────── */
.aspi-key { margin: 0; font-size: var(--wfs-key); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.6; text-align: center; }
.aspi-lead { margin: 0; font-size: var(--wfs-lead); letter-spacing: 0.1em; line-height: var(--lh-prose); }
.aspi-lead + .aspi-lead { margin-top: 1.1em; }
.aspi-message { text-align: left; }
@media (min-width: 600px) { .aspi-message { text-align: center; } }
.aspi-statement { margin: 0; font-size: var(--wfs-statement); font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: 1.75; text-wrap: balance; }
.aspi-rule { width: min(880px, 100%); height: var(--stroke-rule); margin: clamp(28px, 4vw, 36px) auto; border: 0; background: var(--ink); }

/* ── Page heads ───────────────────────────────────────── */
.aspi-breadcrumb { padding-block: 20px; font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); }
.aspi-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.aspi-breadcrumb li { display: flex; gap: 10px; }
.aspi-breadcrumb li + li::before { content: "›"; }
.aspi-breadcrumb a { color: var(--text-note); text-decoration: none; }
.aspi-breadcrumb a:hover { color: var(--text-link); }
.aspi-article__head { display: flex; flex-direction: column; gap: var(--aspi-head-gap); padding-bottom: clamp(24px, 4vw, 40px); }
.aspi-article__head > .aspi-tag { align-self: flex-start; }
.aspi-article__title { margin: 0; font-size: var(--aspi-h1); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; text-wrap: pretty; }
.aspi-web .aspi-article__title { text-wrap: balance; }
.aspi-article__lead { margin: 0; max-width: 46em; }
.aspi-web .aspi-article__lead { font-size: var(--wfs-lead); letter-spacing: 0.08em; line-height: var(--lh-prose); }
.aspi-article__meta { font-size: var(--aspi-caption); letter-spacing: 0.1em; color: var(--text-note); }
.aspi-article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: clamp(32px, 5vw, 64px) var(--web-section-y); }
@media (min-width: 960px) { .aspi-article__grid { grid-template-columns: var(--web-toc-w) minmax(0, var(--web-narrow)); gap: 64px; justify-content: start; } }
.aspi-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: clamp(20px, 3vw, 32px); }
.aspi-pagehead__media { flex: none; align-self: center; }
.aspi-pagehead__media + .aspi-pagehead__title { flex: 1; }
.aspi-pagehead__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.aspi-pagehead__title h1 { margin: 0; font-size: var(--aspi-h1); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; }
.aspi-pagehead__sub { width: 100%; font-size: var(--aspi-caption); letter-spacing: 0.1em; color: var(--text-note); }
.aspi-pagehead__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.aspi-page-body { display: grid; gap: clamp(40px, 6vw, 72px); padding-block: clamp(24px, 4vw, 40px) var(--web-section-y); }
.aspi-page-body > section { display: grid; gap: 20px; min-width: 0; }
.aspi-page-body > section > *, .aspi-page-body > * { min-width: 0; }

/* ── Document header (topbar) and colophon ────────────── */
.aspi-topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: var(--stroke-hair) solid var(--gray-rule); display: flex; align-items: center; gap: 20px; padding: 12px var(--doc-pad); }
.aspi-topbar__logo { height: 40px; width: auto; display: block; }
.aspi-topbar__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.6; min-width: 0; }
.aspi-topbar__title { font-weight: var(--fw-bold); font-size: 15px; letter-spacing: 0.1em; }
.aspi-topbar__en { font-family: var(--font-en); font-size: 12px; letter-spacing: var(--ls-label); color: var(--text-note); }
.aspi-topbar__en .aspi-num { font-weight: var(--fw-body); }
.aspi-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.aspi-colophon { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aspi-colophon__logo { height: 72px; width: auto; display: block; }
.aspi-colophon__meta { font-size: 12px; color: var(--text-note); letter-spacing: 0.1em; }
.aspi-colophon__meta .aspi-num { font-weight: var(--fw-body); }

/* ── Table of contents ────────────────────────────────── */
.aspi-toc { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; }
.aspi-toc__title { margin: 0 0 8px; font-family: var(--font-en); font-weight: 400; font-size: 12px; line-height: 1.6; letter-spacing: 0.2em; color: var(--text-note); }
.aspi-toc ol, .aspi-toc ul { list-style: none; margin: 0; padding: 0; }
.aspi-toc a { display: block; padding-left: 12px; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; }
.aspi-toc a:hover { color: var(--brand-text); }
.aspi-toc a[aria-current="true"], .aspi-toc a[aria-current="location"], .aspi-toc a[aria-current="page"] { border-left-color: var(--attention); font-weight: var(--fw-bold); }
/* web article: collapsible on phones, sticky sidebar from 960px, hairline track */
.aspi-toc--web { font-size: 14px; line-height: 1.6; }
.aspi-toc--web details { border-top: var(--stroke-rule) solid var(--ink); border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-toc--web summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); }
.aspi-toc--web summary::-webkit-details-marker { display: none; }
.aspi-toc--web summary::after { content: "+"; font-family: var(--font-num); font-size: 20px; color: var(--brand); }
.aspi-toc--web details[open] summary::after { content: "–"; }
.aspi-toc--web ol { padding: 0 0 12px; }
.aspi-toc--web a { padding: 7px 0 7px 14px; border-left-color: var(--gray-rule); }
.aspi-toc--web a:hover { border-left-color: var(--brand-soft); }
@media (min-width: 960px) {
  .aspi-toc--web { position: sticky; top: calc(var(--web-header-h) + 24px); align-self: start; max-height: max(18rem, calc(100vh - var(--web-header-h) - 48px)); overflow-y: auto; }
  .aspi-toc--web details { border-bottom: 0; }
  .aspi-toc--web summary { pointer-events: none; min-height: 40px; }
  .aspi-toc--web summary::after, .aspi-toc--web details[open] summary::after { content: none; }
}

/* ── App side navigation ──────────────────────────────── */
.aspi-sidenav { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 32px; font-size: 14px; letter-spacing: 0.06em; line-height: 1.5; }
.aspi-sidenav__brand { display: flex; align-items: center; gap: 12px; padding: 0 20px 20px; border-bottom: var(--stroke-hair) solid var(--gray-rule); color: var(--ink); text-decoration: none; }
.aspi-sidenav__brand img { height: 36px; width: auto; display: block; }
.aspi-sidenav__app { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aspi-sidenav__app strong { font-size: 15px; letter-spacing: 0.1em; }
.aspi-sidenav__app span { font-family: var(--font-en); font-size: 11px; letter-spacing: var(--ls-label); color: var(--text-note); }
.aspi-sidenav__groups { display: contents; }
.aspi-sidenav__group { display: grid; gap: 2px; }
.aspi-sidenav__label { padding: 0 20px 6px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--ls-label); color: var(--text-note); }
.aspi-sidenav ul { list-style: none; margin: 0; padding: 0; }
.aspi-sidenav__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap-min); padding: 0 20px 0 18px; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; }
.aspi-sidenav__item:hover { color: var(--brand-text); }
.aspi-sidenav__item[aria-current] { border-left-color: var(--attention); font-weight: var(--fw-bold); }
.aspi-sidenav__count { font-family: var(--font-num); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--ink); }
.aspi-sidenav__count--alert { color: var(--negative-text); }

/* ── Web header ───────────────────────────────────────── */
.aspi-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-header__inner { height: var(--web-header-h); display: flex; align-items: center; gap: 16px; }
.aspi-header__logo { display: block; }
.aspi-header__logo img { height: 44px; width: auto; display: block; }
.aspi-header__cta { margin-left: auto; }
.aspi-header__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.aspi-header__brand img { height: 30px; width: auto; display: block; }
.aspi-header__wordmark { font-family: var(--font-logotype); font-weight: 600; font-size: 17px; letter-spacing: 0.2em; }
.aspi-nav { display: none; }
.aspi-nav a {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); padding: 6px 0;
  background: linear-gradient(var(--attention), var(--attention)) left bottom / 0 var(--stroke-mark) no-repeat;
}
.aspi-nav a:hover, .aspi-nav a[aria-current] { background-size: 100% var(--stroke-mark); }
.aspi-nav a[aria-disabled="true"], .aspi-mobile-nav a[aria-disabled="true"] { color: var(--text-note); pointer-events: none; }
.aspi-menu-btn { width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.aspi-menu-btn span { width: 22px; height: var(--stroke-rule); background: var(--ink); }
.aspi-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.aspi-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aspi-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.aspi-mobile-nav { border-top: var(--stroke-hair) solid var(--gray-rule); }
.aspi-mobile-nav a { display: block; padding: 16px var(--web-gutter); border-bottom: var(--stroke-hair) solid var(--gray-rule); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); }
.aspi-header.is-scrolled .aspi-header__inner { height: 56px; }
.aspi-header.is-scrolled .aspi-header__logo img { height: 36px; }
@media (min-width: 960px) {
  .aspi-header__logo img { height: 52px; }
  .aspi-nav { display: flex; gap: 28px; margin-left: auto; }
  .aspi-header__cta { margin-left: 16px; }
  .aspi-menu-btn, .aspi-mobile-nav { display: none !important; }
}

/* ── Web footer ───────────────────────────────────────── */
.aspi-footer { border-top: var(--stroke-hair) solid var(--gray-rule); padding-block: clamp(40px, 6vw, 64px); }
.aspi-footer__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.aspi-footer__logo { height: clamp(56px, 3.3vw + 44px, 80px); width: auto; display: block; }
.aspi-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--wfs-caption); letter-spacing: 0.12em; }
.aspi-footer__nav a { color: var(--ink); text-decoration: none; }
.aspi-footer__nav a:hover { color: var(--text-link); }
.aspi-footer__copy { width: 100%; margin: 0; font-family: var(--font-en); font-size: var(--wfs-footnote); letter-spacing: var(--ls-label); color: var(--text-note); }

/* ── Reading progress and back-to-top ─────────────────── */
.aspi-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--stroke-accent); background: var(--brand); transform-origin: left center; transform: scaleX(var(--progress, 0)); pointer-events: none; }
.aspi-to-top { position: fixed; right: var(--web-gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 48px; height: 48px; padding: 0; border: var(--border-thin); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; }
.aspi-to-top.is-visible { opacity: 1; pointer-events: auto; }
.aspi-to-top:hover { background: var(--ink); color: var(--paper); }
.aspi-to-top::before { content: ""; width: 12px; height: 12px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(3px) rotate(45deg); }

/* ── Boxes and callouts ───────────────────────────────── */
.aspi-box { border: var(--border-thin); background: var(--paper); padding: 24px 32px; border-radius: var(--radius); }
.aspi-box--accent { border: var(--border-accent); }
.aspi-box--wash { border: 0; background: var(--brand-wash); }
.aspi-callout { display: flex; flex-direction: column; gap: 10px; padding: 22px 28px; background: var(--brand-wash); font-size: 15px; }
.aspi-callout > .aspi-tag { align-self: flex-start; }
.aspi-callout p { margin: 0; }
.aspi-callout--warn { display: block; padding: 18px 24px; background: var(--negative-wash); border-left: var(--stroke-mark) solid var(--negative); }
.aspi-callout__label { color: var(--negative-text); font-weight: var(--fw-bold); margin-right: 1em; }
.aspi-alert { padding: 12px 14px; border-left: var(--stroke-mark) solid var(--negative); background: var(--negative-wash); color: var(--negative-text); font-size: 14px; letter-spacing: 0.04em; }

/* ❌ / ✅ comparison (manual) */
.aspi-compare { border: var(--border-thin); padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.aspi-compare__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center; }
.aspi-compare__row img { width: 30px; height: 30px; display: block; }
.aspi-compare__row--ng { color: var(--text-note); }
/* definition box (web, slide 04): ダイエット ＝ 痩せる ❌ → Change My Life ✅ */
.aspi-define { max-width: 940px; margin: clamp(28px, 4vw, 36px) auto; padding: clamp(24px, 4vw, 44px) clamp(20px, 5vw, 60px); border: var(--border-thin); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.aspi-define__row { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 4px; font-weight: var(--fw-bold); font-size: clamp(18px, 14.3px + 1vw, 30px); letter-spacing: 0.16em; line-height: var(--lh-tight); }
.aspi-define__row img { width: clamp(32px, 2.7vw + 22px, 46px); height: auto; display: block; }
.aspi-define__val { grid-column: 2; }
.aspi-define__row--ng { color: var(--text-note); }
.aspi-define__en { font-family: var(--font-en); font-weight: 700; letter-spacing: 0.01em; font-size: 1.2em; }
.aspi-define__ruby { display: block; font-size: 13px; font-weight: var(--fw-body); letter-spacing: var(--ls-xwide); line-height: 1.6; }
@media (min-width: 600px) {
  .aspi-define__row { grid-template-columns: auto auto auto; justify-content: center; column-gap: clamp(16px, 2.5vw, 28px); }
  .aspi-define__val { grid-column: auto; }
  .aspi-define__ruby { text-align: center; }
}

/* ── Steps, path, flow ────────────────────────────────── */
.aspi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.aspi-steps > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.aspi-steps__n { font-family: var(--font-num); font-weight: 700; font-size: 26px; line-height: 1.15; text-align: right; background: linear-gradient(transparent 70%, var(--marker) 70%); }
.aspi-steps--brand .aspi-steps__n { color: var(--brand); background: none; }
/* path: A → B → C with dotted arrows (manual) */
.aspi-path { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.aspi-path__node { border: var(--border-thin); padding: 12px 22px; font-size: 15px; line-height: 1.6; }
.aspi-path__node--accent { border: var(--border-accent); padding: 10px 20px; }
/* flow: circle photos + yellow chevrons (web) */
.aspi-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.aspi-flow__step { position: relative; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 24px; }
.aspi-flow__img { width: 96px; height: 96px; border-radius: var(--radius-circle); flex: none; }
.aspi-flow__label { font-weight: var(--fw-bold); font-size: var(--wfs-h3); letter-spacing: 0.16em; }
.aspi-flow__step:not(:last-child)::after {
  content: ""; position: absolute; left: 36px; top: calc(100% + 4px); width: 24px; height: 28px; background: var(--attention);
  clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%); transform: rotate(90deg);
}
@media (min-width: 900px) {
  .aspi-flow { grid-template-columns: repeat(var(--flow-n, 4), 1fr); gap: 48px; }
  .aspi-flow__step { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .aspi-flow__img { width: clamp(150px, 15vw, 200px); height: clamp(150px, 15vw, 200px); }
  .aspi-flow__step:not(:last-child)::after { left: auto; right: -38px; top: calc(clamp(150px, 15vw, 200px) / 2 - 20px); width: 28px; height: 40px; transform: none; }
}

/* ── Accordion ────────────────────────────────────────── */
.aspi-details { border-top: var(--stroke-hair) solid var(--gray-rule); }
.aspi-details:last-of-type { border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-band .aspi-details, .aspi-section--band .aspi-details, .aspi-details--on-band { border-color: var(--gray-rule-strong); }
.aspi-details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: var(--fw-bold); letter-spacing: 0.06em; }
.aspi-details > summary::-webkit-details-marker { display: none; }
.aspi-details > summary::after { content: "+"; flex: none; font-family: var(--font-num); font-size: 20px; line-height: 1; color: var(--brand); }
.aspi-details[open] > summary::after { content: "–"; }
.aspi-details > :not(summary) { margin: 0 0 18px; font-size: 15px; }

/* ── Tables ───────────────────────────────────────────── */
.aspi-table-wrap { overflow-x: auto; }
.aspi-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; letter-spacing: 0.04em; }
.aspi-table caption { caption-side: top; text-align: left; padding-bottom: 10px; font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); }
.aspi-table thead th { background: var(--ink); color: var(--paper); font-weight: var(--fw-body); letter-spacing: var(--ls-label); padding: 10px 14px; text-align: left; white-space: nowrap; }
.aspi-table td, .aspi-table tbody th { padding: 11px 14px; border-bottom: var(--stroke-hair) solid var(--gray-rule); vertical-align: top; text-align: left; }
.aspi-table tbody th { font-weight: var(--fw-bold); letter-spacing: 0.06em; }
.aspi-table .is-num { text-align: right; font-family: var(--font-num); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aspi-table thead th.is-num { font-family: var(--font-jp); font-weight: var(--fw-body); }
.aspi-table td .num { font-family: var(--font-num); font-weight: 700; font-size: 1.25em; }
.aspi-table a { color: var(--text-link); }
.aspi-table td .aspi-tag { margin-left: 6px; }
.aspi-table tr.is-highlight > * { border-top: var(--border-accent); border-bottom: var(--border-accent); }
.aspi-table tr.is-highlight > :first-child { border-left: var(--border-accent); }
.aspi-table tr.is-highlight > :last-child { border-right: var(--border-accent); }
.aspi-table tr.aspi-table__group th { background: var(--gray-band); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); }
.aspi-table tr[data-empty] td { text-align: center; color: var(--text-note); padding-block: 28px; }
.aspi-table tbody tr[aria-selected="true"] > :first-child { box-shadow: inset 3px 0 0 var(--attention); }
.aspi-disabled { color: var(--text-note); }
@media (max-width: 599px) {
  .aspi-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aspi-table--stack tr { display: block; padding: 10px 0; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
  .aspi-table--stack td, .aspi-table--stack tbody th { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; text-align: left; }
  .aspi-table--stack tbody th { display: block; font-size: 15px; padding-bottom: 6px; }
  .aspi-table--stack td::before { content: attr(data-label); font-family: var(--font-jp); font-weight: var(--fw-bold); color: var(--text-note); letter-spacing: 0.06em; }
  .aspi-table--stack tr.aspi-table__group { padding: 0; }
  .aspi-table--stack tr.aspi-table__group th { display: block; padding: 8px 10px; }
  .aspi-table--stack tr.is-highlight > * { border: 0; }
  .aspi-table--stack tr.is-highlight { border: var(--border-accent); padding-inline: 10px; }
}

/* ── KPI band, bars, meter ────────────────────────────── */
.aspi-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: var(--stroke-rule) solid var(--ink); border-bottom: var(--stroke-rule) solid var(--ink); }
.aspi-kpi { margin: 0; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aspi-kpi:nth-child(even) { border-left: var(--stroke-hair) solid var(--gray-rule); }
.aspi-kpi:nth-child(n+3) { border-top: var(--stroke-hair) solid var(--gray-rule); }
.aspi-kpi dt { font-size: var(--aspi-caption); letter-spacing: var(--ls-label); line-height: 1.5; }
.aspi-kpi dd { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: var(--wfs-kpi); line-height: 1.1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.aspi-kpi__unit { font-family: var(--font-jp); font-size: 0.4em; font-weight: var(--fw-bold); margin-left: 4px; letter-spacing: 0.06em; white-space: nowrap; }
.aspi-kpi .aspi-fnref { font-size: 13px; vertical-align: 1.6em; margin-left: 6px; }
.aspi-kpi dd.aspi-kpi__delta { font-family: var(--font-jp); font-size: var(--aspi-caption); font-weight: var(--fw-body); line-height: 1.6; letter-spacing: 0.06em; color: var(--text-note); }
@media (min-width: 900px) {
  .aspi-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aspi-kpi { padding: 24px 28px; }
  .aspi-kpi:nth-child(n+2) { border-left: var(--stroke-hair) solid var(--gray-rule); }
  .aspi-kpi:nth-child(n+3) { border-top: 0; }
}
.aspi-kpis.aspi-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aspi-kpis.aspi-kpis--2 .aspi-kpi:nth-child(2) { border-left: var(--stroke-hair) solid var(--gray-rule); }
@media (min-width: 600px) {
  .aspi-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aspi-kpis--3 .aspi-kpi:nth-child(n+2) { border-left: var(--stroke-hair) solid var(--gray-rule); }
  .aspi-kpis--3 .aspi-kpi:nth-child(n+3) { border-top: 0; }
}
.aspi-figure-group { display: grid; gap: 24px; }
.aspi-chart { margin: 0; }
.aspi-chart__title { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); margin-bottom: 14px; }
.aspi-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aspi-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; letter-spacing: 0.04em; }
@media (min-width: 600px) { .aspi-bar { grid-template-columns: 10em minmax(0, 1fr); align-items: center; gap: 12px; } }
.aspi-bar__track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aspi-bar__fill { display: block; height: 22px; width: calc(var(--v) * (100% - 7em)); background: var(--brand-soft); flex: none; }
.aspi-bar__value { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }
.aspi-bar__value small { font-family: var(--font-jp); font-size: 0.85em; font-weight: var(--fw-bold); }
.aspi-bar.is-focus .aspi-bar__fill { background: var(--brand); }
.aspi-bar.is-focus .aspi-bar__label { font-weight: var(--fw-bold); }
.aspi-bar.is-focus .aspi-bar__value { background: linear-gradient(transparent 60%, var(--marker) 60%); }
.aspi-meter { display: inline-grid; grid-template-columns: 72px auto; align-items: center; gap: 10px; white-space: nowrap; }
.aspi-meter__bar { height: 8px; background: var(--gray-band); position: relative; }
.aspi-meter__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--brand); }
.aspi-meter__num { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Tabs, toolbar, filters, period, pagination ───────── */
.aspi-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-tab {
  position: relative; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.aspi-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--stroke-mark); background: transparent; }
.aspi-tab:hover { color: var(--brand-text); }
.aspi-tab[aria-selected="true"]::after, .aspi-tab[aria-current]::after { background: var(--attention); }
.aspi-tab__count { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--text-note); }
.aspi-tab[aria-selected="true"] .aspi-tab__count, .aspi-tab[aria-current] .aspi-tab__count { color: var(--ink); }
.aspi-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }
.aspi-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; align-items: end; padding: 20px 0; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-filter__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.aspi-status { font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); }
.aspi-status b { font-family: var(--font-num); font-size: 18px; color: var(--ink); margin-right: 2px; }
.aspi-period { display: inline-flex; align-items: center; gap: 8px; }
.aspi-period__btn, .aspi-pagination__btn { width: 44px; height: 44px; border: var(--border-thin); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; border-radius: var(--radius); }
.aspi-period__btn::before, .aspi-pagination__prev::before, .aspi-pagination__next::before { content: ""; width: 9px; height: 9px; border-left: var(--stroke-rule) solid currentColor; border-bottom: var(--stroke-rule) solid currentColor; transform: translateX(2px) rotate(45deg); }
.aspi-period__btn--next::before, .aspi-pagination__next::before { transform: translateX(-2px) rotate(-135deg); }
.aspi-period__btn:hover, .aspi-pagination__btn:hover { background: var(--ink); color: var(--paper); }
.aspi-period__btn:disabled, .aspi-pagination__btn:disabled { border-color: var(--gray-rule); color: var(--gray-strike); background: var(--paper); cursor: default; }
.aspi-period__label { min-width: 9em; text-align: center; font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.aspi-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aspi-pagination__btn { width: auto; min-width: 44px; padding: 0 10px; font-family: var(--font-num); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.aspi-pagination__btn[aria-current="page"] { background: var(--ink); color: var(--paper); cursor: default; }
.aspi-pagination__gap { min-width: 24px; text-align: center; color: var(--text-note); }

/* ── Forms ────────────────────────────────────────────── */
.aspi-field { display: grid; gap: 6px; min-width: 0; }
.aspi-field > label, .aspi-field__label { font-size: var(--aspi-caption); font-weight: var(--fw-bold); letter-spacing: 0.1em; }
.aspi-field__req { margin-left: 6px; color: var(--negative-text); font-weight: var(--fw-bold); }
.aspi-field__hint { margin: 0; font-size: var(--aspi-footnote); color: var(--text-note); letter-spacing: 0.06em; line-height: 1.7; }
.aspi-field__error { margin: 0; font-size: var(--aspi-caption); color: var(--negative-text); letter-spacing: 0.06em; }
.aspi-input, .aspi-select {
  min-height: var(--control-h); width: 100%; padding: 0 14px; border: var(--border-thin); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; letter-spacing: 0.04em;
}
textarea.aspi-input { min-height: 120px; padding: 12px 14px; line-height: 1.8; resize: vertical; }
.aspi-input::placeholder { color: var(--text-note); }
.aspi-select { appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.aspi-input:focus-visible, .aspi-select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-input[aria-invalid="true"], .aspi-select[aria-invalid="true"] { border-color: var(--negative-text); }
.aspi-input:disabled, .aspi-select:disabled { background: var(--gray-band); color: var(--text-note); border-color: var(--gray-rule-strong); }
.aspi-password { position: relative; }
.aspi-password .aspi-input { padding-right: 52px; }
.aspi-password__toggle { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.aspi-password__toggle::before { content: ""; width: 18px; height: 11px; border: var(--stroke-rule) solid currentColor; border-radius: 50% / 60%; }
.aspi-password__toggle[aria-pressed="true"]::before { background: linear-gradient(45deg, transparent 46%, currentColor 46% 54%, transparent 54%); }
.aspi-choices { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.aspi-choices--column { flex-direction: column; }
.aspi-choice { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); cursor: pointer; font-size: 15px; letter-spacing: 0.04em; }
.aspi-choice input { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: var(--border-thin); border-radius: var(--radius); background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.aspi-choice input[type="radio"] { border-radius: var(--radius-circle); }
.aspi-choice input[type="checkbox"]:checked { background: var(--ink); }
.aspi-choice input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: translateY(-1px) rotate(-45deg); }
.aspi-choice input[type="radio"]:checked::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--ink); }
.aspi-choice input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-choice input:disabled, .aspi-choice input:disabled + span { cursor: default; border-color: var(--gray-rule-strong); color: var(--text-note); }

/* ── Lists of links, entries, cards, people ───────────── */
.aspi-entries { list-style: none; margin: 0; padding: 0; border-top: var(--stroke-rule) solid var(--ink); }
.aspi-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 22px 4px; border-bottom: var(--stroke-hair) solid var(--gray-rule); color: var(--ink); text-decoration: none; }
.aspi-entry__name { font-weight: var(--fw-bold); font-size: var(--wfs-h3); letter-spacing: 0.12em; line-height: 1.5; }
.aspi-entry__desc { grid-column: 1; font-size: var(--aspi-caption); letter-spacing: 0.08em; line-height: 1.7; color: var(--text-note); }
.aspi-entry__arrow { grid-column: 2; grid-row: 1 / span 2; }
.aspi-entry:hover { border-bottom-color: var(--ink); }
.aspi-entry:hover .aspi-entry__name { color: var(--brand-text); }
.aspi-entry:hover .aspi-entry__arrow { transform: translateX(6px); }
.aspi-entry[aria-disabled="true"] { pointer-events: none; }
.aspi-entry[aria-disabled="true"] .aspi-entry__name { color: var(--text-note); }
.aspi-entry[aria-disabled="true"] .aspi-entry__arrow { visibility: hidden; }
@media (min-width: 600px) {
  .aspi-entry { grid-template-columns: 220px minmax(0, 1fr) auto; }
  .aspi-entry__desc { grid-column: 2; font-size: 14px; }
  .aspi-entry__arrow { grid-column: 3; grid-row: 1; }
}
.aspi-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); column-gap: 32px; border-top: var(--stroke-rule) solid var(--ink); }
.aspi-links li { border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 4px; color: var(--ink); text-decoration: none; font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.aspi-links a::after { content: ""; width: 7px; height: 7px; border-right: var(--stroke-rule) solid var(--brand); border-top: var(--stroke-rule) solid var(--brand); transform: rotate(45deg); flex: none; }
.aspi-links a:hover { color: var(--brand-text); }
.aspi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.aspi-card { border: var(--border-thin); padding: 20px; display: grid; gap: 10px; align-content: start; }
.aspi-card h4, .aspi-card__title { margin: 0; font-size: var(--wfs-h3); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; }
.aspi-card p { margin: 0; }
.aspi-card__meta { font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); }
.aspi-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 12px; }
.aspi-people figure { margin: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }
.aspi-people .aspi-photo { width: 100%; max-width: 96px; }
.aspi-people .aspi-photo::before { font-size: 0; }
.aspi-people figcaption { font-size: 13px; letter-spacing: 0.06em; line-height: 1.4; }
.aspi-people figcaption small { display: block; font-size: 12px; color: var(--text-note); letter-spacing: 0.08em; }

/* ── Points derived from a strategy ───────────────────── */
.aspi-points { margin: 0; border-top: var(--stroke-rule) solid var(--ink); }
.aspi-point { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; padding: 20px 0; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-point dt { font-weight: var(--fw-bold); font-size: var(--wfs-h3); letter-spacing: 0.1em; line-height: 1.5; }
.aspi-point dt::after { content: ""; display: block; width: 32px; height: var(--stroke-mark); margin-top: 8px; background: var(--attention); }
.aspi-point dd { margin: 0; display: grid; gap: 8px; }
.aspi-point dd > p { margin: 0; }
.aspi-point__why { font-size: var(--aspi-caption); letter-spacing: 0.08em; color: var(--text-note); }
.aspi-point__why a { color: var(--text-link); text-decoration: none; border-bottom: var(--stroke-hair) solid var(--brand-soft); }
.aspi-point__why a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 600px) { .aspi-point { grid-template-columns: 9em minmax(0, 1fr); } }

/* ── Footnotes ────────────────────────────────────────── */
.aspi-fnref { margin-left: 3px; font-family: var(--font-jp); font-size: 0.72em; font-weight: var(--fw-body); letter-spacing: 0.02em; color: var(--text-link); text-decoration: none; vertical-align: 0.45em; line-height: 0; }
.aspi-fnref:hover { color: var(--ink); text-decoration: underline; }
.aspi-notes { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--stroke-hair) solid var(--gray-rule); }
.aspi-notes__title { margin: 0 0 var(--sp-2); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-web-heading); }
.aspi-notes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aspi-notes li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0 8px; padding: 6px 8px; margin-inline: -8px; font-size: var(--aspi-footnote); line-height: 1.85; letter-spacing: 0.06em; color: var(--ink-charcoal); }
.aspi-notes li:target { background: var(--brand-wash); }
.aspi-notes__back { grid-column: 2; justify-self: start; font-size: 12px; color: var(--text-link); text-decoration: none; border-bottom: var(--stroke-hair) solid var(--brand-soft); }
.aspi-notes__back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Photos and screenshots ───────────────────────────── */
.aspi-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: repeating-linear-gradient(45deg, var(--slot-a) 0 14px, var(--slot-b) 14px 28px); }
.aspi-photo::before { content: attr(data-slot); position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--slot-label); text-align: center; }
.aspi-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); display: block; }
.aspi-photo img:not([src]), .aspi-photo img[src=""] { display: none; }
.aspi-photo--wide { aspect-ratio: 16 / 9; }
.aspi-photo--square { aspect-ratio: 1 / 1; }
.aspi-photo--circle { aspect-ratio: 1 / 1; border-radius: var(--radius-circle); }
.aspi-photo--figure { background: repeating-linear-gradient(45deg, var(--gray-band) 0 14px, var(--gray-stripe) 14px 28px); }
.aspi-photo--figure img { object-fit: contain; background: var(--paper); }
@media (min-width: 960px) { .aspi-photo--band { aspect-ratio: 21 / 8; } }
a:hover .aspi-photo img, .aspi-photo--zoom:hover img { transform: scale(1.03); }
.aspi-photo--natural { aspect-ratio: auto; border: var(--stroke-hair) solid var(--gray-rule); }
.aspi-photo--natural img { position: relative; z-index: 1; height: auto; object-fit: initial; }
.aspi-photo--natural:not(:has(img[src])) { aspect-ratio: 16 / 9; }
.aspi-photo__zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 40px; height: 40px; border: var(--border-thin); background: var(--paper); color: var(--ink); display: grid; place-items: center; text-decoration: none; }
.aspi-photo__zoom::before { content: "+"; font-family: var(--font-num); font-size: 22px; line-height: 1; }
.aspi-photo__zoom:hover { background: var(--ink); color: var(--paper); }
.aspi-caption { margin: 10px 0 0; font-size: var(--aspi-footnote); color: var(--text-note); letter-spacing: 0.1em; line-height: 1.7; }
.aspi-photo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.aspi-photo-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 600px) { .aspi-photo-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aspi-photo-row figure { margin: 0; min-width: 0; }
.aspi-photo-row figcaption { margin-top: 8px; font-size: var(--aspi-caption); letter-spacing: 0.08em; line-height: 1.5; text-align: center; }
.aspi-photo-row figcaption strong { display: block; font-size: 12px; color: var(--text-note); letter-spacing: 0.12em; }
/* manual screenshots: real capture in a 1px frame, or a striped placeholder that names the screen */
.aspi-shot { margin: 0; }
.aspi-shot img { width: 100%; display: block; border: var(--border-thin); }
.aspi-shot__empty { height: 240px; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: repeating-linear-gradient(45deg, var(--slot-a) 0 14px, var(--slot-b) 14px 28px); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--slot-label); }

/* ── Hero ─────────────────────────────────────────────── */
.aspi-hero { position: relative; }
.aspi-hero__mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; height: 300px; }
.aspi-hero__mosaic > * { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
.aspi-hero__mosaic > :nth-child(1) { grid-area: 1 / 1 / 3 / 4; }
.aspi-hero__mosaic > :nth-child(3) { grid-area: 1 / 4 / 3 / 7; }
.aspi-hero__mosaic > :nth-child(4) { grid-area: 3 / 1 / 5 / 3; }
.aspi-hero__mosaic > :nth-child(6) { grid-area: 3 / 3 / 5 / 5; }
.aspi-hero__mosaic > :nth-child(7) { grid-area: 3 / 5 / 5 / 7; }
.aspi-hero__mosaic > :nth-child(2), .aspi-hero__mosaic > :nth-child(5), .aspi-hero__mosaic > :nth-child(8),
.aspi-hero__mosaic > :nth-child(9), .aspi-hero__mosaic > :nth-child(10), .aspi-hero__mosaic > :nth-child(11) { display: none; }
.aspi-hero__panel { position: relative; margin: -56px var(--web-gutter) 0; padding: 32px 20px; background: var(--paper); border: var(--border-thin); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.aspi-hero__logo { height: clamp(64px, 5.5vw + 43px, 88px); width: auto; display: block; }
.aspi-hero__display { font-family: var(--font-en-round); font-weight: 700; font-size: var(--wfs-display); line-height: 1; color: var(--attention); }
.aspi-hero__title { margin: 0; font-size: var(--wfs-hero); font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.7; }
.aspi-hero__title--lg { font-size: var(--wfs-hero-lg); line-height: 1.55; letter-spacing: 0.08em; }
.aspi-hero__lead { margin: 0; font-size: var(--wfs-lead); letter-spacing: 0.08em; line-height: var(--lh-body); }
.aspi-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.aspi-hero__panel--start { text-align: left; align-items: flex-start; }
.aspi-hero__panel--start .aspi-hero__actions { justify-content: flex-start; }
.aspi-hero--single .aspi-hero__photo { aspect-ratio: 3 / 2; }
@media (min-width: 600px) {
  .aspi-hero__mosaic { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px; height: clamp(560px, 56vw, 760px); }
  .aspi-hero__mosaic > :nth-child(n) { display: block; }
  .aspi-hero__mosaic > :nth-child(1) { grid-area: 1 / 1 / 3 / 5; }
  .aspi-hero__mosaic > :nth-child(2) { grid-area: 1 / 5 / 2 / 9; }
  .aspi-hero__mosaic > :nth-child(3) { grid-area: 1 / 9 / 3 / 13; }
  .aspi-hero__mosaic > :nth-child(4) { grid-area: 3 / 1 / 5 / 3; }
  .aspi-hero__mosaic > :nth-child(5) { grid-area: 3 / 3 / 5 / 5; }
  .aspi-hero__mosaic > :nth-child(6) { grid-area: 3 / 9 / 5 / 11; }
  .aspi-hero__mosaic > :nth-child(7) { grid-area: 3 / 11 / 5 / 13; }
  .aspi-hero__mosaic > :nth-child(8) { grid-area: 5 / 1 / 7 / 5; }
  .aspi-hero__mosaic > :nth-child(9) { grid-area: 6 / 5 / 7 / 7; }
  .aspi-hero__mosaic > :nth-child(10) { grid-area: 6 / 7 / 7 / 9; }
  .aspi-hero__mosaic > :nth-child(11) { grid-area: 5 / 9 / 7 / 13; }
  .aspi-hero__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100% - 2 * var(--web-gutter))); margin: 0; padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 48px); gap: 16px; }
  .aspi-hero--single .aspi-hero__photo { aspect-ratio: auto; height: clamp(480px, 52vw, 680px); }
  .aspi-hero--single .aspi-hero__panel--start { top: auto; bottom: clamp(32px, 5vw, 64px); left: max(var(--web-gutter), calc((100% - var(--web-max)) / 2)); transform: none; width: min(600px, calc(100% - 2 * var(--web-gutter))); }
}

/* ── Pillars and plans ────────────────────────────────── */
.aspi-pillars { display: grid; grid-template-columns: minmax(0, 520px); justify-content: center; gap: 72px 40px; }
.aspi-pillar { text-align: center; }
.aspi-pillar__media { position: relative; margin-bottom: calc(var(--wfs-num) * 0.55); }
.aspi-pillar__media .aspi-photo { aspect-ratio: 3 / 2; }
.aspi-pillar__num { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 42%); font-family: var(--font-num); font-weight: var(--fw-black); font-size: var(--wfs-num); line-height: 1; letter-spacing: -0.02em; color: var(--attention); }
.aspi-pillar__lead { margin: 0; font-weight: var(--fw-bold); font-size: clamp(15px, 13.8px + 0.33vw, 18px); letter-spacing: 0.14em; }
.aspi-pillar__title { margin: 0; font-size: clamp(22px, 18.7px + 0.88vw, 30px); letter-spacing: 0.1em; line-height: 1.4; }
.aspi-pillar__bar { display: block; width: 46px; height: 5px; margin: 12px auto 16px; background: var(--attention); }
.aspi-pillar__body { margin: 0 auto; max-width: 30em; color: var(--brand-text); letter-spacing: 0.1em; }
@media (min-width: 900px) {
  .aspi-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aspi-pillar__media .aspi-photo { aspect-ratio: 4 / 3; }
}
.aspi-plans { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; gap: 48px 32px; }
@media (min-width: 900px) { .aspi-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aspi-plan { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aspi-plan__ruby { font-size: 13px; letter-spacing: var(--ls-xwide); }
.aspi-plan__name { display: flex; align-items: baseline; gap: 10px; margin: -10px 0 0; padding: 0 8px 2px; border-bottom: var(--stroke-rule) solid var(--ink); line-height: 1; }
.aspi-plan__word { font-family: var(--font-en-round); font-weight: 700; font-size: clamp(32px, 28.7px + 0.88vw, 40px); color: var(--paper); -webkit-text-stroke: var(--stroke-rule) var(--ink); letter-spacing: 0.02em; }
.aspi-plan__n { font-family: var(--font-num); font-weight: 700; font-size: clamp(46px, 41.9px + 1.1vw, 56px); color: var(--attention); -webkit-text-stroke: var(--stroke-rule) var(--ink); }
.aspi-plan__box { width: 100%; padding: 24px 20px 28px; border: var(--border-thin); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aspi-plan__fig { margin: 0; font-weight: var(--fw-bold); font-size: 19px; line-height: 1.3; }
.aspi-plan__fig .aspi-num { font-size: 32px; }
.aspi-plan__price .aspi-num { font-size: clamp(30px, 27.5px + 0.66vw, 36px); }
.aspi-plan__price small { font-size: 13px; font-weight: var(--fw-body); color: var(--brand-text); }
/* slide-size plan lockup (OutlineTitle) */
.aspi-outline-title { display: inline-flex; flex-direction: column; align-items: center; --ot: 1; }
.aspi-outline-title__ruby { font-size: calc(14px * var(--ot)); font-weight: var(--fw-body); letter-spacing: var(--ls-xwide); margin-bottom: 4px; }
.aspi-outline-title__name { display: flex; align-items: baseline; gap: calc(10px * var(--ot)); border-bottom: var(--stroke-rule) solid var(--ink); padding: 0 calc(8px * var(--ot)) 2px; line-height: 1; }
.aspi-outline-title__word { font-family: var(--font-en-round); font-weight: 700; font-size: calc(42px * var(--ot)); color: var(--paper); -webkit-text-stroke: var(--stroke-rule) var(--ink); letter-spacing: 0.02em; }
.aspi-outline-title__n { font-family: var(--font-num); font-weight: 700; font-size: calc(62px * var(--ot)); color: var(--attention); -webkit-text-stroke: var(--stroke-rule) var(--ink); }

/* ── Sign-in and access-state panels ──────────────────── */
.aspi-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 32px 24px; }
.aspi-state { display: grid; gap: 12px; align-content: start; }
.aspi-state__name { margin: 0; font-size: var(--aspi-caption); font-weight: var(--fw-bold); letter-spacing: 0.12em; color: var(--text-note); }
.aspi-mock { border: var(--border-thin); padding: 28px 24px; display: grid; gap: 16px; align-content: start; min-height: 320px; background: var(--paper); }
.aspi-mock__brand { display: inline-flex; align-items: center; gap: 10px; }
.aspi-mock__brand img { height: 22px; width: auto; display: block; }
.aspi-mock__brand span { font-family: var(--font-logotype); font-weight: 600; font-size: 14px; letter-spacing: 0.2em; }
.aspi-mock h3 { margin: 0; font-size: 20px; letter-spacing: 0.1em; }

/* ── Floating layers: dialog and toast (scrim + shadow) ── */
.aspi-scrim { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: grid; place-items: center; padding: var(--web-gutter); }
.aspi-scrim--inline { position: relative; inset: auto; min-height: 100%; }
.aspi-scrim--inline .aspi-dialog { max-height: none; }
.aspi-dialog { width: min(560px, 100%); max-height: calc(100vh - 64px); overflow: auto; background: var(--paper); border: var(--border-thin); border-radius: var(--radius); padding: 32px; display: grid; gap: 20px; box-shadow: var(--shadow-float); }
.aspi-dialog__title { margin: 0; font-size: 20px; font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; }
.aspi-dialog__body { margin: 0; font-size: 15px; }
.aspi-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 20px; }
.aspi-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 110; display: grid; gap: 8px; justify-items: center; }
.aspi-toast { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 12px 20px; background: var(--ink); color: var(--paper); font-size: 14px; letter-spacing: 0.06em; border-radius: var(--radius); box-shadow: var(--shadow-float); }
.aspi-toast--negative { background: var(--negative-text); }
.aspi-toast__action { padding: 0; border: 0; background: none; color: var(--attention); font: inherit; font-weight: var(--fw-bold); letter-spacing: 0.1em; cursor: pointer; }
.aspi-toast--negative .aspi-toast__action { color: var(--paper); text-decoration: underline; }

/* ── Slides (1280×720) ────────────────────────────────── */
.aspi-slide { width: var(--slide-w); height: var(--slide-h); overflow: hidden; position: relative; background: var(--paper); color: var(--ink); font-family: var(--font-jp); font-weight: var(--fw-body); font-size: 21px; line-height: var(--lh-body); letter-spacing: var(--ls-wide); padding: var(--slide-pad-y) var(--slide-pad-x); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.aspi-slide--center { justify-content: center; align-items: center; }
.aspi-slide-header { display: flex; justify-content: space-between; align-items: flex-start; flex: none; position: relative; margin-bottom: var(--sp-4); }
.aspi-slide-header__title { position: relative; margin-top: -8px; padding-left: 26px; }
.aspi-slide-header__title::before { content: ""; position: absolute; left: calc(-1 * var(--slide-pad-x)); top: 30px; width: calc(var(--slide-pad-x) + 12px); height: var(--stroke-rule); background: var(--ink); }
.aspi-slide-header__logo { height: 70px; width: auto; display: block; margin-top: 2px; }
.aspi-slide-heading { margin: 0; font-size: 28px; font-weight: var(--fw-bold); letter-spacing: 0.1em; line-height: 1.5; text-align: center; }

/* ── Motion: only as a response to the viewer ─────────── */
@media (prefers-reduced-motion: no-preference) {
  :root:has(.aspi-web) { scroll-behavior: smooth; }
  .aspi-btn, .aspi-btn-text, .aspi-link, .aspi-nav a, .aspi-footer__nav a, .aspi-toc a, .aspi-sidenav__item, .aspi-tab,
  .aspi-entry, .aspi-entry__name, .aspi-entry__arrow, .aspi-fnref, .aspi-period__btn, .aspi-pagination__btn,
  .aspi-header__inner, .aspi-header__logo img, .aspi-photo img, .aspi-to-top, .aspi-bar__fill {
    transition-duration: var(--motion-fast);
    transition-timing-function: var(--motion-ease);
    transition-property: color, background-color, background-size, border-color, transform, height, opacity;
  }
}

/* ── ActionMenu ── */
.aspi-menu { position: relative; display: inline-block; }
.aspi-menu__trigger { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text-note); font: inherit; cursor: pointer; }
.aspi-menu__trigger:disabled { color: var(--gray-strike); cursor: default; }
.aspi-menu__trigger:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-menu__trigger--icon { width: max(32px, var(--app-hit, 0px)); height: max(32px, var(--app-hit, 0px)); padding: 0; }
.aspi-menu__trigger--icon:hover:not(:disabled), .aspi-menu__trigger--icon[aria-expanded="true"] { background: var(--gray-band); color: var(--ink); }
.aspi-menu__dots { display: block; width: 3px; height: 3px; background: currentColor; box-shadow: -6px 0 currentColor, 6px 0 currentColor; }
.aspi-menu__trigger--text { gap: 8px; min-height: var(--control-h); padding: 0 6px; color: var(--ink); font-size: var(--aspi-body); font-weight: 600; }
.aspi-menu__trigger--text:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.aspi-menu__trigger--text:disabled { color: var(--text-note); }
.aspi-menu__caret { width: 6px; height: 6px; margin-top: -4px; border-right: var(--stroke-rule) solid currentColor; border-bottom: var(--stroke-rule) solid currentColor; transform: rotate(45deg); }
.aspi-menu__trigger--text[aria-expanded="true"] .aspi-menu__caret { margin-top: 3px; transform: rotate(-135deg); }
.aspi-menu__list {
  z-index: 120; min-width: 168px; padding: 4px 0; background: var(--paper); border: var(--stroke-hair) solid var(--gray-rule-strong); box-shadow: var(--shadow-float);
  font-size: var(--aspi-body); color: var(--ink); outline: 0; overflow-y: auto;
}
.aspi-menu__item {
  display: block; width: 100%; padding: 7px 14px; border: 0; background: none; color: inherit; font: inherit; line-height: 1.6; text-align: left;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.aspi-menu__item:hover, .aspi-menu__item:focus { background: var(--gray-band); outline: 0; }
.aspi-menu__item--danger { color: var(--negative-text); }
.aspi-menu__item[aria-disabled="true"] { color: var(--text-note); cursor: default; }
.aspi-menu__item[aria-disabled="true"]:hover { background: none; }
.aspi-menu__sep { height: 0; margin: 4px 0; border-top: var(--stroke-hair) solid var(--gray-rule); }
@media (prefers-reduced-motion: no-preference) {
  .aspi-menu__list { animation: aspi-menu-in 120ms ease both; }
}
@keyframes aspi-menu-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── DataTable ── */
.aspi-dtable { position: relative; }
.aspi-dtable__scroll { overflow: auto; }
.aspi-dtable__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.55; letter-spacing: 0; text-align: left; }
.aspi-dtable__table caption { caption-side: top; padding-bottom: 8px; text-align: left; font-size: var(--aspi-caption); letter-spacing: 0; color: var(--text-note); }
.aspi-dtable__table :is(th, td) { box-sizing: border-box; }

/* head */
.aspi-dtable__table thead th {
  position: sticky; top: 0; z-index: 2; height: 44px; padding: 0 15px; background: var(--gray-band); color: var(--ink-charcoal);
  border-bottom: var(--stroke-hair) solid var(--gray-rule); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-align: left; white-space: nowrap;
}
.aspi-dtable__table thead th.is-num { text-align: right; }
.aspi-dtable__table thead th.has-sort { padding: 0; }
.aspi-dtable__sort {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 43px; margin: 0; padding: 0 15px; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
}
.aspi-dtable__table thead th.is-num .aspi-dtable__sort { justify-content: flex-end; }
.aspi-dtable__sort:hover, th[aria-sort="ascending"] .aspi-dtable__sort, th[aria-sort="descending"] .aspi-dtable__sort { color: var(--ink); }
.aspi-dtable__sort:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.aspi-dtable__dir { position: relative; flex: none; width: 8px; height: 12px; }
.aspi-dtable__dir::before, .aspi-dtable__dir::after { content: ""; position: absolute; left: 0; border: 4px solid transparent; }
.aspi-dtable__dir::before { top: 0; border-bottom: 5px solid var(--gray-strike); border-top-width: 0; }
.aspi-dtable__dir::after { bottom: 0; border-top: 5px solid var(--gray-strike); border-bottom-width: 0; }
.aspi-dtable__dir[data-dir="asc"]::before { border-bottom-color: var(--ink); }
.aspi-dtable__dir[data-dir="asc"]::after { content: none; }
.aspi-dtable__dir[data-dir="desc"]::after { border-top-color: var(--ink); }
.aspi-dtable__dir[data-dir="desc"]::before { content: none; }
.aspi-dtable__dir[data-dir="asc"], .aspi-dtable__dir[data-dir="desc"] { height: 12px; }
.aspi-dtable__dir[data-dir="asc"]::before { top: 3px; }
.aspi-dtable__dir[data-dir="desc"]::after { bottom: 3px; }

/* body */
.aspi-dtable__table tbody td {
  padding: var(--app-cell-y) 15px; background: var(--row-bg, var(--paper)); border-bottom: var(--stroke-hair) solid var(--gray-rule);
  font-size: 14px; line-height: 1.55; vertical-align: middle; text-align: left;
}
.aspi-dtable__table tbody tr:last-child > td { border-bottom: 0; }
.aspi-dtable__table td.is-num, .aspi-dtable__table th.is-num { text-align: right; }
.aspi-dtable__table td.is-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aspi-dtable__table td.is-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* row states */
.aspi-dtable__table tbody tr { --row-bg: var(--paper); }
.aspi-dtable__table tbody tr.is-attention { --row-bg: color-mix(in srgb, var(--attention) 14%, var(--paper)); }
.aspi-dtable__table tbody tr.is-click { cursor: pointer; }
.aspi-dtable__table tbody tr.is-click:hover { --row-bg: var(--gray-band); }
.aspi-dtable__table tbody tr.is-checked, .aspi-dtable__table tbody tr.is-checked.is-click:hover { --row-bg: var(--brand-wash); }
.aspi-dtable__table tbody tr.is-off > td { color: var(--text-note); }
.aspi-dtable__table tbody tr.has-mark > td:first-child { box-shadow: inset 3px 0 0 var(--mark); }
.aspi-dtable__table tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* sticky columns */
.aspi-dtable__table tbody td.is-sticky { position: sticky; z-index: 1; }
.aspi-dtable__table thead th.is-sticky { z-index: 3; }
.aspi-dtable__table .is-sticky-last { border-right: var(--stroke-hair) solid var(--gray-rule-strong); }

/* selection column: the whole cell is the click target */
.aspi-dtable__table :is(th, td).is-check { width: 40px; min-width: 40px; max-width: 40px; padding: 0; text-align: center; }
.aspi-dtable__check { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.aspi-dtable__check input {
  appearance: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; flex: none;
  border: var(--stroke-hair) solid var(--control-line); border-radius: var(--radius); background: var(--paper); cursor: pointer;
}
.aspi-dtable__check input:hover { border-color: var(--ink-charcoal); }
.aspi-dtable__check input:checked, .aspi-dtable__check input:indeterminate { border-color: var(--ink); background: var(--ink); }
.aspi-dtable__check input:checked::before { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: translateY(-1px) rotate(-45deg); }
.aspi-dtable__check input:indeterminate::before { content: ""; width: 8px; height: 2px; background: var(--paper); }
.aspi-dtable__check input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-dtable__check input:disabled { cursor: default; border-color: var(--gray-rule-strong); background: var(--gray-band); }

/* bulk bar: covers the head row except the checkbox cell */
.aspi-dtable__bulk { position: sticky; top: 0; left: 0; z-index: 4; height: 0; }
.aspi-dtable__bulk-in {
  position: absolute; top: 0; left: 40px; right: 0; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 15px;
  background: var(--gray-band); border-bottom: var(--stroke-hair) solid var(--gray-rule); font-size: 14px; white-space: nowrap;
}
.aspi-dtable__bulk-n { font-weight: var(--fw-bold); }
.aspi-dtable__bulk-actions { display: inline-flex; align-items: center; gap: 16px; }
.aspi-dtable__bulk-clear { margin-left: auto; }

/* loading and empty */
.aspi-dtable__bar { display: block; height: 10px; background: var(--gray-band); }
.aspi-dtable__skeleton td { height: 46px; }
.aspi-dtable__skeleton td.is-num .aspi-dtable__bar { margin-left: auto; }
.aspi-dtable__empty td { padding: 40px 15px; text-align: center; color: var(--text-note); }
@media (prefers-reduced-motion: no-preference) {
  .aspi-dtable__bar { animation: aspi-dtable-pulse 1.4s ease-in-out infinite; }
  @keyframes aspi-dtable-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* head and bulk bar against the page scroll (stickyHead="page"): the table must fit the column, so nothing scrolls sideways */
.aspi-dtable--page .aspi-dtable__scroll { overflow: visible; }
.aspi-dtable--page .aspi-dtable__table thead th { top: var(--dtable-top, 0); }
.aspi-dtable--page .aspi-dtable__bulk { top: var(--dtable-top, 0); }

.aspi-dtable__check-all { display: none; }

/* phone: the bulk bar leaves the head and sits on the bottom edge of the screen */
@media (max-width: 719px) {
  .aspi-dtable__bulk { position: static; height: auto; }
  .aspi-dtable__bulk-in {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 50; height: auto; min-height: 64px; gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: var(--stroke-rule) solid var(--ink); border-bottom: 0;
  }
  .aspi-dtable__bulk-actions { gap: 8px; }

  /* ledger (mobile prop): the same <table> becomes a grid of lines, no sideways scroll */
  .aspi-dtable--ledger .aspi-dtable__scroll { overflow: visible; }
  .aspi-dtable--ledger .aspi-dtable__table, .aspi-dtable--ledger .aspi-dtable__table thead, .aspi-dtable--ledger .aspi-dtable__table thead tr, .aspi-dtable--ledger .aspi-dtable__table tbody { display: block; width: 100%; }
  .aspi-dtable--ledger .aspi-dtable__table thead th { display: none; position: static; }
  .aspi-dtable--ledger .aspi-dtable__table thead th.is-check { display: block; width: 100%; max-width: none; height: 44px; }
  .aspi-dtable--ledger .aspi-dtable__table thead .aspi-dtable__check { justify-content: flex-start; gap: 12px; padding-left: 14px; }
  .aspi-dtable--ledger .aspi-dtable__check-all { display: inline; font-size: 12px; font-weight: 600; }
  .aspi-dtable--none-selectable.aspi-dtable--ledger .aspi-dtable__table thead,
  .aspi-dtable--ledger .aspi-dtable__table thead:not(:has(th.is-check)) { display: none; }

  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) {
    display: grid; grid-template-columns: var(--dt-cols); align-items: center; box-sizing: border-box; padding-right: 12px;
    border-bottom: var(--stroke-hair) solid var(--gray-rule); background: var(--row-bg, var(--paper));
  }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:last-child { border-bottom: 0; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td {
    display: block; position: static; grid-row: var(--dt-r); grid-column: var(--dt-c); width: auto; min-width: 0; max-width: none; padding: 0;
    border: 0; background: none; font-size: 13px; line-height: 1.5;
  }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-m-off { display: none; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-m-first { padding-top: 12px; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-m-last { padding-bottom: 12px; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-m-end { text-align: right; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-m-span { grid-column: var(--dt-c) / -1; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr:not(.aspi-dtable__empty) > td.is-check { grid-row: 1 / span var(--dt-lines); grid-column: 1; min-height: 64px; }
  .aspi-dtable--ledger .aspi-dtable__table tbody .aspi-dtable__check { min-height: 64px; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr.has-mark { box-shadow: inset 3px 0 0 var(--mark); }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr.has-mark > td:first-child { box-shadow: none; }
  .aspi-dtable--ledger .aspi-dtable__table tbody tr.aspi-dtable__empty, .aspi-dtable--ledger .aspi-dtable__table tbody tr.aspi-dtable__empty > td { display: block; }
  /* the head row is gone, so each cell keeps its column name for screen readers */
  .aspi-dtable--ledger .aspi-dtable__table tbody td[data-label]::before {
    content: attr(data-label) " "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── KeyValue ── */
.aspi-kv { --kv-label: 120px; margin: 0; padding: 0; font-size: var(--aspi-body); line-height: 1.55; }
.aspi-kv__row { display: flex; align-items: center; gap: 20px; padding: 13px 0; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-kv__row:last-child { border-bottom: 0; }
.aspi-kv dt { flex: none; width: var(--kv-label); margin: 0; font-size: var(--aspi-caption); font-weight: 600; color: var(--text-note); }
.aspi-kv dd { flex: 1; min-width: 0; margin: 0; font-size: var(--aspi-body); overflow-wrap: anywhere; }
.aspi-kv dd.is-empty { color: var(--text-note); }
.aspi-kv__action { flex: none; margin-left: auto; }
@media (min-width: 900px) {
  .aspi-kv--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .aspi-kv--2 .aspi-kv__row:nth-last-child(2) { border-bottom: 0; }
}

/* ── Select ── */
/* ── Select: the ASPI pulldown ───────────────────────── */
.aspi-combo { position: relative; width: 100%; min-width: 0; }
.aspi-combo__trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--control-h); margin: 0;
  padding: 0 34px 0 14px; border: var(--border-thin); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 15px; letter-spacing: 0.04em; text-align: left; cursor: pointer;
}
.aspi-combo__trigger:hover { border-color: var(--ink-charcoal); }
.aspi-combo__trigger:focus, .aspi-combo--open .aspi-combo__trigger { border-color: var(--ink); }
.aspi-combo__trigger:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-combo__value, .aspi-combo__placeholder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aspi-combo__placeholder { color: var(--text-note); }
.aspi-combo__swatch { flex: none; width: 6px; height: 6px; }
.aspi-combo__caret {
  position: absolute; top: 50%; right: 14px; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
}
.aspi-combo--open .aspi-combo__caret { margin-top: -2px; transform: rotate(-135deg); }
.aspi-combo__clear {
  --clear: max(28px, var(--app-hit, 0px));
  position: absolute; top: 50%; right: 30px; width: var(--clear); height: var(--clear); margin: calc(var(--clear) / -2) 0 0; padding: 0; border: 0; background: none;
  color: var(--text-note); cursor: pointer; display: grid; place-items: center;
}
.aspi-combo__clear:hover { color: var(--ink); }
.aspi-combo__clear span { position: relative; width: 12px; height: 12px; }
.aspi-combo__clear span::before, .aspi-combo__clear span::after {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; background: currentColor;
}
.aspi-combo__clear span::before { transform: rotate(45deg); }
.aspi-combo__clear span::after { transform: rotate(-45deg); }
.aspi-combo--clearable .aspi-combo__trigger { padding-right: 62px; }
.aspi-combo--invalid .aspi-combo__trigger { border-color: var(--negative-text); }
.aspi-combo--disabled .aspi-combo__trigger, .aspi-combo--disabled .aspi-combo__trigger:hover {
  background: var(--gray-band); color: var(--text-note); border-color: var(--gray-rule-strong); cursor: not-allowed;
}
.aspi-combo--disabled .aspi-combo__caret { border-color: var(--text-note); }

/* line: ledger underline */
.aspi-combo--line .aspi-combo__trigger {
  padding: 5px 24px 6px 0; border: 0; border-bottom: var(--stroke-hair) solid var(--control-line); background: transparent;
  font-size: 16px; font-weight: 600; letter-spacing: 0;
}
.aspi-combo--line .aspi-combo__trigger:hover { border-bottom-color: var(--ink-charcoal); }
.aspi-combo--line .aspi-combo__trigger:focus, .aspi-combo--line.aspi-combo--open .aspi-combo__trigger { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.aspi-combo--line .aspi-combo__trigger:focus-visible { outline: 0; }
.aspi-combo--line .aspi-combo__caret { right: 3px; }
.aspi-combo--line .aspi-combo__clear { right: 14px; }
.aspi-combo--line.aspi-combo--clearable .aspi-combo__trigger { padding-right: 52px; }
.aspi-combo--line.aspi-combo--invalid .aspi-combo__trigger { border-bottom-color: var(--negative-text); box-shadow: 0 1px 0 var(--negative-text); }
.aspi-combo--line.aspi-combo--disabled .aspi-combo__trigger { background: transparent; }

/* app surface */
.aspi-app .aspi-combo__trigger { padding-left: 11px; border-color: var(--control-line); font-size: var(--app-input-fs); letter-spacing: 0; }
.aspi-app .aspi-combo__trigger:hover { border-color: var(--ink-charcoal); }
.aspi-app .aspi-combo__trigger:focus, .aspi-app .aspi-combo--open .aspi-combo__trigger { border-color: var(--ink); }
.aspi-app .aspi-combo--invalid .aspi-combo__trigger { border-color: var(--negative-text); }
.aspi-app .aspi-combo--disabled .aspi-combo__trigger { border-color: var(--gray-rule-strong); }
.aspi-app .aspi-combo--line .aspi-combo__trigger { padding-left: 0; border-color: transparent; border-bottom-color: var(--control-line); font-size: 16px; }
.aspi-app .aspi-combo--line .aspi-combo__trigger:hover { border-bottom-color: var(--ink-charcoal); }
.aspi-app .aspi-combo--line .aspi-combo__trigger:focus, .aspi-app .aspi-combo--line.aspi-combo--open .aspi-combo__trigger { border-bottom-color: var(--ink); }
.aspi-app .aspi-combo--line.aspi-combo--invalid .aspi-combo__trigger { border-bottom-color: var(--negative-text); }
.aspi-app .aspi-combo--clearable .aspi-combo__trigger { padding-right: calc(34px + max(28px, var(--app-hit))); }
.aspi-app .aspi-combo--line.aspi-combo--clearable .aspi-combo__trigger { padding-right: 52px; }

/* panel (portal on <body>) */
.aspi-combo-panel {
  z-index: 120; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; max-width: 480px; max-height: 320px;
  background: var(--paper); color: var(--ink); border: var(--stroke-hair) solid var(--gray-rule-strong); box-shadow: var(--shadow-float);
  font-family: var(--font-jp); font-size: 15px; font-weight: var(--fw-body); letter-spacing: 0; line-height: 1.45; text-align: left;
}
.aspi-app .aspi-combo-panel { font-size: 14px; }
.aspi-combo-panel__search { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-combo-panel__q {
  flex: 1; min-width: 0; height: max(30px, var(--app-hit, 0px)); margin: 0; padding: 0 8px 0 30px; border: var(--stroke-hair) solid var(--control-line); border-radius: var(--radius);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23767676' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 9px center;
  color: var(--ink); font: inherit; font-size: var(--app-input-fs, 14px);
}
.aspi-combo-panel__q::placeholder { color: var(--text-note); }
.aspi-combo-panel__q:focus { border-color: var(--ink); outline: 0; }
.aspi-combo-panel__clear {
  flex: none; min-height: var(--app-hit, 0px); padding: 4px; border: 0; background: none; color: var(--ink-charcoal); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.aspi-combo-panel__clear:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.aspi-combo-panel__list { flex: 1; min-height: 0; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.aspi-combo-panel__group { padding: 8px 12px 3px; font-size: 11px; font-weight: 700; color: var(--text-note); letter-spacing: 0.04em; }
.aspi-combo-panel__group:first-child { padding-top: 4px; }
.aspi-combo-panel__option, .aspi-combo-panel__all {
  display: flex; align-items: center; gap: 8px; min-height: max(32px, var(--app-hit, 0px)); box-sizing: border-box; padding: 6px 12px; cursor: pointer;
}
.aspi-combo-panel__all { border-bottom: var(--stroke-hair) solid var(--gray-rule); margin-bottom: 4px; font-weight: 600; }
.aspi-combo-panel__option.is-active, .aspi-combo-panel__all.is-active { background: var(--gray-band); }
.aspi-combo-panel__option.is-selected { font-weight: 700; }
.aspi-combo-panel--multi .aspi-combo-panel__option.is-selected { font-weight: inherit; }
.aspi-combo-panel__option.is-disabled { color: var(--text-note); cursor: default; background: none; }
.aspi-combo-panel__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aspi-combo-panel__desc, .aspi-combo-panel__count { flex: none; font-size: 12px; font-weight: var(--fw-body); color: var(--text-note); }
.aspi-combo-panel__count { font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; }
.is-active > .aspi-combo-panel__desc, .is-active > .aspi-combo-panel__count { color: var(--ink-charcoal); }
.aspi-combo-panel__hit { background: var(--action); color: inherit; }
.aspi-combo-panel__empty { padding: 10px 12px; color: var(--text-note); }
.aspi-combo-panel__check { position: relative; flex: none; width: 16px; height: 16px; }
.aspi-combo-panel:not(.aspi-combo-panel--multi) .is-selected > .aspi-combo-panel__check::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 9px; height: 5px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.aspi-combo-panel--multi .aspi-combo-panel__check { width: 14px; height: 14px; margin: 1px; box-sizing: border-box; border: var(--stroke-hair) solid var(--control-line); background: var(--paper); }
.aspi-combo-panel--multi .is-selected > .aspi-combo-panel__check,
.aspi-combo-panel--multi [data-state="checked"] > .aspi-combo-panel__check,
.aspi-combo-panel--multi [data-state="mixed"] > .aspi-combo-panel__check { border-color: var(--ink); background: var(--ink); }
.aspi-combo-panel--multi .is-selected > .aspi-combo-panel__check::after,
.aspi-combo-panel--multi [data-state="checked"] > .aspi-combo-panel__check::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 8px; height: 4px;
  border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: rotate(-45deg);
}
.aspi-combo-panel--multi [data-state="mixed"] > .aspi-combo-panel__check::after {
  content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 1.5px; background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  .aspi-combo-panel { animation: aspi-combo-in 120ms ease-out; }
  .aspi-combo-panel[data-side="top"] { animation-name: aspi-combo-in-up; }
  @keyframes aspi-combo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes aspi-combo-in-up { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ── DateField ── */
/* DateField: input with a weekday suffix and a calendar button; the calendar is a floating layer (.aspi-cal). */
.aspi-datefield { --df-px: 14px; --df-fs: 15px; --df-ls: 0.04em; --df-btn: 40px; position: relative; display: block; width: 100%; min-width: 0; }
.aspi-app .aspi-datefield { --df-px: 11px; --df-fs: var(--app-input-fs); --df-ls: 0; --df-btn: max(36px, var(--app-hit)); }
.aspi-datefield--line, .aspi-app .aspi-datefield--line { --df-px: 0px; --df-fs: 16px; --df-ls: 0; --df-btn: 30px; }
.aspi-datefield .aspi-input.aspi-datefield__input {
  padding: 0 var(--df-btn) 0 var(--df-px); font-size: var(--df-fs); letter-spacing: var(--df-ls); font-variant-numeric: tabular-nums;
  text-overflow: clip;
}
.aspi-datefield--line .aspi-input.aspi-datefield__input { padding: 5px var(--df-btn) 6px 0; font-weight: 600; }
.aspi-datefield__ghost {
  position: absolute; top: 0; bottom: 0; left: calc(var(--stroke-hair) + var(--df-px)); right: var(--df-btn);
  display: flex; align-items: center; overflow: hidden; white-space: pre; pointer-events: none;
  font-size: var(--df-fs); letter-spacing: var(--df-ls); font-variant-numeric: tabular-nums; line-height: 1.4;
}
.aspi-datefield--line .aspi-datefield__ghost { left: 0; bottom: 1px; font-weight: 600; }
.aspi-datefield__mirror { visibility: hidden; flex: none; }
.aspi-datefield__wd { flex: none; color: var(--text-note); font-weight: var(--fw-body); }
.aspi-datefield__btn {
  position: absolute; top: 0; right: var(--stroke-hair); bottom: 0; width: var(--df-btn); margin: 0; padding: 0; border: 0; background: none;
  display: grid; place-items: center; color: var(--text-note); cursor: pointer;
}
.aspi-datefield--line .aspi-datefield__btn { right: 0; bottom: 1px; }
.aspi-datefield__btn:hover { color: var(--ink); }
.aspi-datefield__btn:disabled { color: var(--gray-strike); cursor: default; }
.aspi-datefield--disabled .aspi-datefield__wd { color: var(--text-note); }

/* calendar (floating layer) */
.aspi-cal {
  position: fixed; z-index: 120; box-sizing: border-box; width: 252px; padding: 10px;
  background: var(--paper); color: var(--ink); border: var(--stroke-hair) solid var(--gray-rule-strong); box-shadow: var(--shadow-float);
  font-family: var(--font-jp); font-size: 12px; font-weight: var(--fw-body); line-height: 1.4; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.aspi-cal__head { display: flex; align-items: center; justify-content: space-between; height: max(32px, var(--app-hit, 0px)); margin-bottom: 4px; }
.aspi-cal__title { font-size: 14px; font-weight: var(--fw-bold); }
.aspi-cal__nav { position: relative; width: max(32px, var(--app-hit, 0px)); height: max(32px, var(--app-hit, 0px)); margin: 0; padding: 0; border: 0; background: none; color: var(--ink-charcoal); cursor: pointer; }
.aspi-cal__nav::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  border-left: var(--stroke-rule) solid currentColor; border-bottom: var(--stroke-rule) solid currentColor;
}
.aspi-cal__nav--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.aspi-cal__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.aspi-cal__nav:hover:not([aria-disabled="true"]) { background: var(--gray-band); color: var(--ink); }
.aspi-cal__nav[aria-disabled="true"] { color: var(--gray-strike); cursor: default; }
.aspi-cal__wd, .aspi-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.aspi-cal__wd span { padding: 3px 0 5px; text-align: center; font-size: 11px; font-weight: var(--fw-bold); color: var(--text-note); }
.aspi-cal__wd .is-sun { color: var(--day-sun); }
.aspi-cal__wd .is-sat { color: var(--day-sat); }
.aspi-cal__grid { display: grid; gap: 2px; }
.aspi-cal__cell { display: flex; min-width: 0; }
.aspi-cal__day {
  flex: 1; min-width: 0; height: max(30px, var(--app-hit, 0px)); margin: 0; padding: 0; border: var(--stroke-hair) solid transparent; background: none;
  color: var(--ink); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.aspi-cal__day.is-out { color: var(--text-note); }
.aspi-cal__day.is-sun { color: var(--day-sun); }
.aspi-cal__day.is-sat { color: var(--day-sat); }
.aspi-cal__day.is-today { border-color: var(--gray-strike); }
.aspi-cal__day:hover:not([aria-disabled="true"]) { background: var(--gray-band); }
.aspi-cal__day.is-selected, .aspi-cal__day.is-selected:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: var(--fw-bold); }
.aspi-cal__day[aria-disabled="true"] { color: var(--gray-strike); cursor: default; }
.aspi-cal__day:focus-visible, .aspi-cal__nav:focus-visible, .aspi-cal__act:focus-visible { position: relative; z-index: 1; outline: var(--focus-ring); outline-offset: 1px; }
.aspi-cal__foot { display: flex; gap: 16px; margin-top: 6px; padding-top: 4px; border-top: var(--stroke-hair) solid var(--gray-rule); }
.aspi-cal__act { min-height: max(28px, var(--app-hit, 0px)); margin: 0; padding: 0 4px; border: 0; background: none; color: var(--ink-charcoal); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.aspi-cal__act:hover:not([aria-disabled="true"]) { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.aspi-cal__act[aria-disabled="true"] { color: var(--gray-strike); cursor: default; }
@keyframes aspi-cal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .aspi-cal { animation: aspi-cal-in 120ms ease-out; } }

/* ── DateRange ── */
/* DateRange: two DateFields, 〜, preset text buttons. */
.aspi-daterange { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.aspi-daterange .aspi-datefield { flex: none; width: 164px; }
.aspi-app .aspi-daterange .aspi-datefield { width: 150px; }
.aspi-daterange--line .aspi-datefield, .aspi-app .aspi-daterange--line .aspi-datefield { width: 132px; }
.aspi-daterange__sep { color: var(--text-note); }
.aspi-daterange__presets { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-left: 8px; }
.aspi-daterange__preset {
  min-height: var(--tap-min); margin: 0; padding: 0; border: 0; background: none; color: var(--text-note);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.aspi-daterange__preset:hover { color: var(--ink); }
.aspi-daterange__preset.is-on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.aspi-daterange__preset:disabled { color: var(--gray-strike); cursor: default; text-decoration: none; }
.aspi-daterange__preset:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ── Switch ── */
/* Switch: 34×20 square track, 14×14 square knob. */
.aspi-switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); font-size: var(--aspi-body); cursor: pointer; }
.aspi-switch--disabled { cursor: default; }
.aspi-switch__control {
  position: relative; flex: none; box-sizing: border-box; width: 34px; height: 20px; margin: 0; padding: 0;
  border: var(--stroke-hair) solid var(--control-line); border-radius: var(--radius); background: var(--paper); cursor: inherit;
}
.aspi-switch__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-note); }
.aspi-switch__control:hover:not(:disabled) { border-color: var(--ink-charcoal); }
.aspi-switch__control[aria-checked="true"] { border-color: var(--ink); background: var(--ink); }
.aspi-switch__control[aria-checked="true"] .aspi-switch__knob { background: var(--paper); transform: translateX(14px); }
.aspi-switch__control:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.aspi-switch__control:disabled { border-color: var(--gray-rule-strong); background: var(--gray-band); }
.aspi-switch__control:disabled .aspi-switch__knob { background: var(--gray-strike); }
.aspi-switch__control[aria-checked="true"]:disabled { border-color: var(--text-note); background: var(--text-note); }
.aspi-switch__control[aria-checked="true"]:disabled .aspi-switch__knob { background: var(--gray-band); }
.aspi-switch--disabled .aspi-switch__label, .aspi-switch--disabled .aspi-switch__state { color: var(--text-note); }
.aspi-switch__state { min-width: 2em; color: var(--text-note); font-size: var(--aspi-caption); }
@media (prefers-reduced-motion: no-preference) {
  .aspi-switch__control, .aspi-switch__knob { transition: background-color 120ms, border-color 120ms, transform 120ms; }
}

/* ── Segmented ── */
/* Segmented: text options on a hairline; the chosen one carries a 2px ink underline. */
.aspi-seg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 16px; min-height: var(--control-h); border-bottom: var(--stroke-hair) solid var(--control-line); }
.aspi-seg:focus-within { border-bottom-color: var(--ink); }
.aspi-seg__opt {
  margin: 0 0 -1px; padding: 5px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-note);
  font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.aspi-app .aspi-seg__opt { font-size: 15px; }
.aspi-seg__opt:hover:not(:disabled) { color: var(--ink); }
.aspi-seg__opt[aria-checked="true"] { color: var(--ink); font-weight: var(--fw-bold); border-bottom-color: var(--ink); }
.aspi-seg__opt:disabled { color: var(--gray-strike); cursor: default; }
.aspi-seg__opt:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ── FormGrid ── */
.aspi-fgrid { overflow: hidden; border-bottom: var(--stroke-hair) solid var(--gray-rule); container-type: inline-size; }
.aspi-fgrid__grid { display: grid; grid-template-columns: repeat(var(--fg-cols, 4), minmax(0, 1fr)); margin-left: -17px; }
.aspi-fgrid--2 { --fg-cols: 2; }
.aspi-fgrid--3 { --fg-cols: 3; }
/* a section heading right above the grid: the grid's top line is the heading's rule */
.aspi-h3:has(+ .aspi-fgrid), .aspi-heading:has(+ .aspi-fgrid),
.aspi-app .aspi-h3:has(+ .aspi-fgrid), .aspi-app .aspi-heading:has(+ .aspi-fgrid) { border-bottom: 0; padding-bottom: 8px; }
/* the grid clips its outer left line; focus rings inside the cells are drawn inset so they are never cut */
.aspi-fgrid__cell :focus-visible { outline-offset: -2px; }
.aspi-fgrid__cell { min-width: 0; padding: 12px 16px 14px; border-top: var(--stroke-hair) solid var(--gray-rule); border-left: var(--stroke-hair) solid var(--gray-rule); }
.aspi-fgrid__cell--span-2 { grid-column: span 2; }
.aspi-fgrid__cell--span-3 { grid-column: span 3; }
.aspi-fgrid__cell--span-4 { grid-column: span 4; }
@container (max-width: 899px) {
  .aspi-fgrid--3 .aspi-fgrid__grid, .aspi-fgrid--4 .aspi-fgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aspi-fgrid .aspi-fgrid__cell--span-3, .aspi-fgrid .aspi-fgrid__cell--span-4 { grid-column: span 2; }
}
@container (max-width: 599px) {
  .aspi-fgrid .aspi-fgrid__grid { grid-template-columns: minmax(0, 1fr); }
  .aspi-fgrid .aspi-fgrid__cell--span-2, .aspi-fgrid .aspi-fgrid__cell--span-3, .aspi-fgrid .aspi-fgrid__cell--span-4 { grid-column: auto; }
}
/* inside a tile every control takes the ledger (underline) look */
.aspi-fgrid .aspi-fgrid__cell .aspi-field { gap: 2px; }
.aspi-fgrid .aspi-fgrid__cell .aspi-field > label, .aspi-fgrid .aspi-fgrid__cell .aspi-field__label { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--text-note); }
.aspi-fgrid .aspi-fgrid__cell .aspi-input, .aspi-fgrid .aspi-fgrid__cell .aspi-select,
.aspi-fgrid .aspi-fgrid__cell .aspi-combo__trigger {
  min-height: 0; padding: 5px 0 6px; border: 0; border-bottom: var(--stroke-hair) solid var(--control-line); background-color: transparent;
  font-size: 16px; font-weight: 600; letter-spacing: 0;
}
.aspi-fgrid .aspi-fgrid__cell .aspi-select { padding-right: 24px; background-position: right 4px center; }
.aspi-fgrid .aspi-fgrid__cell .aspi-input:hover, .aspi-fgrid .aspi-fgrid__cell .aspi-select:hover, .aspi-fgrid .aspi-fgrid__cell .aspi-combo__trigger:hover { border-bottom-color: var(--ink-charcoal); }
.aspi-fgrid .aspi-fgrid__cell .aspi-input:focus, .aspi-fgrid .aspi-fgrid__cell .aspi-select:focus, .aspi-fgrid .aspi-fgrid__cell .aspi-combo__trigger:focus,
.aspi-fgrid .aspi-fgrid__cell .aspi-combo--open .aspi-combo__trigger {
  border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); outline: 0;
}
.aspi-fgrid .aspi-fgrid__cell .aspi-input[aria-invalid="true"], .aspi-fgrid .aspi-fgrid__cell .aspi-select[aria-invalid="true"] { border-bottom-color: var(--negative-text); box-shadow: 0 1px 0 var(--negative-text); }
.aspi-fgrid .aspi-fgrid__cell .aspi-input:disabled, .aspi-fgrid .aspi-fgrid__cell .aspi-select:disabled { border-bottom-color: var(--gray-rule-strong); background-color: transparent; }
.aspi-fgrid .aspi-fgrid__cell textarea.aspi-input { min-height: 64px; padding: 5px 0 6px; line-height: 1.6; font-size: 15px; }
.aspi-fgrid .aspi-fgrid__cell .aspi-combo__trigger { padding-right: 24px; }
.aspi-fgrid .aspi-fgrid__cell .aspi-combo__caret { right: 2px; }
.aspi-fgrid .aspi-fgrid__cell .aspi-datefield__input { padding-right: 30px; }
.aspi-fgrid .aspi-fgrid__cell .aspi-datefield__btn { right: 0; }

/* ── Avatar ── */
.aspi-avatar {
  --avatar: 46px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: var(--avatar); height: var(--avatar); border-radius: 0; background: var(--gray-band); color: var(--ink-charcoal);
  font-family: var(--font-jp); font-size: calc(var(--avatar) * 0.45); font-weight: var(--fw-bold); line-height: 1; letter-spacing: 0; vertical-align: middle; user-select: none;
}
.aspi-avatar--sm { --avatar: 24px; }
.aspi-avatar--md { --avatar: 46px; }
.aspi-avatar--lg { --avatar: 72px; }
.aspi-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aspi-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: var(--fw-bold); letter-spacing: -0.02em; white-space: nowrap; }
.aspi-who__text { display: flex; flex-direction: column; min-width: 0; }
.aspi-who__name { overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.aspi-who__sub { overflow: hidden; text-overflow: ellipsis; font-size: var(--aspi-caption); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--text-note); }

/* ── Drawer ── */
.aspi-drawer-layer { position: fixed; inset: 0; z-index: 100; }
.aspi-drawer__scrim { position: absolute; inset: 0; background: var(--scrim); }
.aspi-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--drawer-w, var(--app-panel-w)); max-width: 92vw;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-float); outline: 0;
}
.aspi-drawer-layer--inline { position: relative; inset: auto; z-index: 10; height: 100%; min-height: 360px; display: flex; justify-content: flex-end; overflow: hidden; }
.aspi-drawer-layer--inline .aspi-drawer__scrim { opacity: 0.5; }
.aspi-drawer-layer--inline .aspi-drawer { position: relative; inset: auto; flex: none; }
.aspi-drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 24px 26px 16px; }
.aspi-drawer__text { flex: 1; min-width: 0; align-self: center; }
.aspi-drawer__title { margin: 0; font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.35; overflow-wrap: anywhere; }
.aspi-drawer__sub { margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--text-note); }
.aspi-drawer__close {
  position: relative; flex: none; width: max(36px, var(--app-hit, 0px)); height: max(36px, var(--app-hit, 0px)); margin: -8px -10px 0 0; padding: 0; border: 0; background: none;
  color: var(--text-note); cursor: pointer;
}
.aspi-drawer__close::before, .aspi-drawer__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: var(--stroke-rule); background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.aspi-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.aspi-drawer__close:hover { color: var(--ink); }
.aspi-drawer__close:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.aspi-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 24px; }
.aspi-drawer__foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 26px; border-top: var(--stroke-hair) solid var(--gray-rule); }
@media (prefers-reduced-motion: no-preference) {
  .aspi-drawer-layer:not(.aspi-drawer-layer--inline) .aspi-drawer { animation: aspi-drawer-in 200ms ease both; }
  .aspi-drawer-layer:not(.aspi-drawer-layer--inline) .aspi-drawer__scrim { animation: aspi-fade-in 200ms ease both; }
}
@keyframes aspi-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes aspi-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Loading ── */
.aspi-loading { display: inline-flex; align-items: center; gap: 10px; font-size: var(--aspi-caption); line-height: 1.6; color: var(--text-note); }
.aspi-loading--block { display: flex; justify-content: center; padding: 48px 0; }
.aspi-loading__dots { display: inline-flex; gap: 4px; }
.aspi-loading__dots i { display: block; width: 6px; height: 6px; background: var(--ink-charcoal); }
@media (prefers-reduced-motion: no-preference) {
  .aspi-loading__dots i { animation: aspi-loading-fade 900ms ease-in-out infinite both; }
  .aspi-loading__dots i:nth-child(2) { animation-delay: 150ms; }
  .aspi-loading__dots i:nth-child(3) { animation-delay: 300ms; }
}
@keyframes aspi-loading-fade { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* ── Business-app surface (.aspi-app) ─────────────────────
   Put .aspi-app on <body> (AppShell adds it to its root). Floating layers opened from inside carry it too.
   HR BASE production manners (aspi-hub, 2026-09-07): 14px body without tracking, 38px controls,
   one pale-yellow main action per screen and borderless text for every other action,
   status = 6px square + coloured word, hairline ledger instead of boxes,
   floating layers (pickers, menus, calendars, drawers, dialogs, toasts) are the only things with a shadow. */
.aspi-app {
  --aspi-h1: 26px;
  --aspi-h2: 20px;
  --aspi-h3: 14px;
  --aspi-body: 14px;
  --aspi-caption: 12px;
  --aspi-footnote: 11px;
  --aspi-ls-body: 0;
  --control-h: var(--app-control-h);
  --button-h: var(--app-control-h);
  --button-h-sm: var(--app-control-h-sm);
  --tap-min: 32px;
  --app-hit: 0px;         /* lower limit for small targets (icon buttons, calendar days, picker rows). 0 = each part's own size */
  --app-input-fs: 14px;   /* every text entry */
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-body);
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aspi-app :where(h1, h2, h3) { line-height: 1.35; }

/* shell: HR BASE main column */
.aspi-app .aspi-shell__main { padding: 26px 34px 48px; gap: 24px; }

/* ── Buttons: main action = pale yellow block, everything else = text ── */
.aspi-app .aspi-btn {
  min-height: var(--button-h); padding: 0 6px; border: 0; background: none; color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.aspi-app .aspi-btn:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.aspi-app .aspi-btn--primary, .aspi-app .aspi-btn--cta { padding: 0 18px; background: var(--action); color: var(--on-action); font-weight: 700; }
.aspi-app .aspi-btn--primary:hover, .aspi-app .aspi-btn--cta:hover { background: var(--action-hover); color: var(--on-action); text-decoration: none; }
.aspi-app .aspi-btn--sm { font-size: 12px; }
.aspi-app .aspi-btn--primary.aspi-btn--sm, .aspi-app .aspi-btn--cta.aspi-btn--sm { padding: 0 12px; }
.aspi-app .aspi-btn--danger { color: var(--negative-text); }
.aspi-app .aspi-btn--danger:hover { color: var(--negative-text); }
.aspi-app .aspi-btn--primary.aspi-btn--danger { background: var(--negative-text); color: var(--paper); }
.aspi-app .aspi-btn--primary.aspi-btn--danger:hover { background: var(--ink); color: var(--paper); }
.aspi-app .aspi-btn:disabled, .aspi-app .aspi-btn[aria-disabled="true"] { background: none; color: var(--text-note); text-decoration: none; }
.aspi-app .aspi-btn--primary:disabled, .aspi-app .aspi-btn--primary[aria-disabled="true"] { background: var(--gray-band); }
.aspi-app .aspi-btn-text { border-bottom: 0; color: var(--ink); font-size: inherit; font-weight: 600; letter-spacing: 0; }
.aspi-app .aspi-btn-text:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.aspi-app .aspi-btn-text--danger, .aspi-app .aspi-btn-text--danger:hover { color: var(--negative-text); }
/* inside table cells actions read as underlined small links */
.aspi-app td .aspi-btn-text, .aspi-app td .aspi-btn:not(.aspi-btn--primary) { min-height: 0; padding: 0; font-size: 12px; color: var(--ink-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.aspi-app td .aspi-btn-text--danger, .aspi-app td .aspi-btn--danger { color: var(--negative-text); }

/* ── Tags and status ── */
.aspi-app .aspi-tag { padding: 3px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; }
.aspi-app .aspi-tag--line { padding: 2px 7px; }
.aspi-app .aspi-tag--sm { padding: 2px 6px; font-size: 11px; }
.aspi-app .aspi-status-mark { vertical-align: middle; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--status-c, var(--ink)); }
.aspi-app .aspi-status-mark::before { width: 6px; height: 6px; outline: 0; background: var(--status-c, var(--gray-strike)); }
.aspi-app .aspi-status-mark--ok { --status-c: var(--status-ok); }
.aspi-app .aspi-status-mark--warn { --status-c: var(--status-warn); }
.aspi-app .aspi-status-mark--ng { --status-c: var(--status-ng); }
.aspi-app .aspi-status-mark--info { --status-c: var(--status-info); }
.aspi-app .aspi-status-mark--off { --status-c: var(--status-off); }

/* ── Headings ── */
.aspi-app .aspi-heading { font-size: var(--aspi-h2); letter-spacing: -0.035em; line-height: 1.35; }
.aspi-app .aspi-h3 { padding-bottom: 7px; border-bottom: var(--stroke-hair) solid var(--gray-rule); font-size: 14px; letter-spacing: 0; line-height: 1.5; }
.aspi-app .aspi-heading::after, .aspi-app .aspi-h3::after { content: none; }

/* ── Page head and breadcrumb ── */
.aspi-app .aspi-breadcrumb { padding-block: 0 6px; font-size: 12px; letter-spacing: 0.02em; }
.aspi-app .aspi-pagehead { align-items: flex-end; gap: 12px 24px; padding-bottom: 20px; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
.aspi-app .aspi-pagehead__title { gap: 6px 12px; }
.aspi-app .aspi-pagehead__title h1 { font-size: var(--aspi-h1); letter-spacing: -0.035em; line-height: 1.35; }
.aspi-app .aspi-pagehead__sub { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-pagehead__tools { gap: 8px 12px; }

/* ── Side navigation (white, dense) ── */
.aspi-app .aspi-sidenav { gap: 16px; padding: 20px 0 24px; font-size: 14px; letter-spacing: 0; }
.aspi-app .aspi-sidenav__brand { padding: 0 18px 18px; }
.aspi-app .aspi-sidenav__brand img { height: 30px; }
.aspi-app .aspi-sidenav__app strong { font-size: 15px; letter-spacing: 0.02em; }
.aspi-app .aspi-sidenav__label { padding: 0 18px 4px; font-size: 11px; letter-spacing: 0.12em; }
.aspi-app .aspi-sidenav__item { min-height: 40px; padding: 0 18px 0 15px; border-left-width: 3px; font-weight: 600; }
.aspi-app .aspi-sidenav__item:hover { background: var(--gray-band); color: var(--ink); }
.aspi-app .aspi-sidenav__item[aria-current] { background: var(--gray-band); font-weight: 700; }
.aspi-app .aspi-sidenav__count { font-size: 12px; }

/* ── Tabs: text tabs, 2px ink underline on the current one ── */
.aspi-app .aspi-tabs { gap: 0 20px; }
.aspi-app .aspi-tab { min-height: var(--control-h); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text-note); }
.aspi-app .aspi-tab::after { height: 2px; }
.aspi-app .aspi-tab:hover { color: var(--ink); }
.aspi-app .aspi-tab[aria-selected="true"], .aspi-app .aspi-tab[aria-current] { color: var(--ink); font-weight: 700; }
.aspi-app .aspi-tab[aria-selected="true"]::after, .aspi-app .aspi-tab[aria-current]::after { background: var(--ink); }
.aspi-app .aspi-tab__count { font-size: 11px; }

/* ── Filters, period, pagination ── */
.aspi-app .aspi-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 0; border-bottom: 0; }
.aspi-app .aspi-filter > .aspi-field { flex: 0 1 180px; }
.aspi-app .aspi-filter > .aspi-field:has(input[type="search"]) { flex-basis: 280px; }
.aspi-app .aspi-filter__foot { flex: 1 0 auto; justify-content: flex-end; gap: 16px; min-height: var(--control-h); }
.aspi-app .aspi-status { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-status b { font-size: 16px; }
.aspi-app .aspi-period { gap: 4px; }
.aspi-app .aspi-period__btn, .aspi-app .aspi-pagination__btn { width: max(32px, var(--app-hit)); height: max(32px, var(--app-hit)); border-color: var(--control-line); }
.aspi-app .aspi-period__btn::before, .aspi-app .aspi-pagination__prev::before, .aspi-app .aspi-pagination__next::before { width: 7px; height: 7px; }
.aspi-app .aspi-period__label { min-width: 7.5em; font-size: 14px; letter-spacing: 0; }
.aspi-app .aspi-pagination { gap: 4px; }
.aspi-app .aspi-pagination__btn { min-width: max(32px, var(--app-hit)); padding: 0 8px; font-size: 13px; }

/* ── Forms: 38px boxes with a 3:1 outline; `line` variant = ledger underline ── */
.aspi-app .aspi-field { gap: 5px; }
.aspi-app .aspi-field > label, .aspi-app .aspi-field__label { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--text-note); }
.aspi-app .aspi-field > label:has(.aspi-field__req), .aspi-app .aspi-field__label:has(.aspi-field__req) { color: var(--ink); }
.aspi-app .aspi-field__req { margin-left: 2px; font-size: 0; }
.aspi-app .aspi-field__req::after { content: "*"; font-size: 12px; }
.aspi-app .aspi-field__hint { font-size: 12px; letter-spacing: 0; line-height: 1.6; }
.aspi-app .aspi-field__error { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.aspi-app .aspi-input, .aspi-app .aspi-select { padding: 0 11px; border-color: var(--control-line); font-size: var(--app-input-fs); letter-spacing: 0; }
.aspi-app .aspi-input:hover, .aspi-app .aspi-select:hover { border-color: var(--ink-charcoal); }
.aspi-app .aspi-input:focus, .aspi-app .aspi-select:focus { border-color: var(--ink); }
.aspi-app textarea.aspi-input { min-height: 88px; padding: 8px 11px; line-height: 1.65; }
.aspi-app .aspi-input[type="search"] {
  padding-left: 34px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23767676' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px center;
}
.aspi-app .aspi-input[aria-invalid="true"], .aspi-app .aspi-select[aria-invalid="true"] { border-color: var(--negative-text); }
.aspi-app .aspi-input:disabled, .aspi-app .aspi-select:disabled { border-color: var(--gray-rule-strong); }
.aspi-input--line, .aspi-app .aspi-input--line {
  border: 0; border-bottom: var(--stroke-hair) solid var(--control-line); padding: 5px 0 6px; background: transparent;
  font-size: 16px; font-weight: 600;
}
.aspi-input--line:focus, .aspi-app .aspi-input--line:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); outline: 0; }
.aspi-input--line:focus-visible { outline: 0; }
.aspi-input--line[aria-invalid="true"] { border-bottom-color: var(--negative-text); box-shadow: 0 1px 0 var(--negative-text); }
.aspi-app input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.aspi-app .aspi-password__toggle { top: 1px; width: calc(var(--control-h) - 2px); height: calc(var(--control-h) - 2px); }
.aspi-app .aspi-choices { gap: 0 20px; }
.aspi-app .aspi-choice { gap: 8px; min-height: var(--tap-min); font-size: 14px; letter-spacing: 0; }
.aspi-app .aspi-choice input { width: 16px; height: 16px; border-color: var(--control-line); }
.aspi-app .aspi-choice input:checked { border-color: var(--ink); }
.aspi-app .aspi-choice input[type="checkbox"]:checked::before { width: 8px; height: 4px; }
.aspi-app .aspi-choice input[type="radio"]:checked::before { width: 8px; height: 8px; }

/* ── Tables: light head, hairline rows ── */
.aspi-app .aspi-table { font-size: 14px; line-height: 1.55; letter-spacing: 0; }
.aspi-app .aspi-table caption { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-table thead th {
  padding: 12px 15px; background: var(--gray-band); color: var(--ink-charcoal);
  border-bottom: var(--stroke-hair) solid var(--gray-rule); font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.aspi-app .aspi-table thead th.is-num { font-weight: 600; }
.aspi-app .aspi-table td, .aspi-app .aspi-table tbody th { padding: var(--app-cell-y) 15px; vertical-align: middle; }
.aspi-app .aspi-table tbody th { font-weight: 700; letter-spacing: -0.02em; }
.aspi-app .aspi-table tbody tr:last-child > * { border-bottom: 0; }
.aspi-app .aspi-table tr.aspi-table__group th { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-charcoal); }

/* ── KPI tiles: one sheet of hairlines (top + left on every tile) ── */
/* KPI band: hairline top and bottom, hairline dividers between tiles (the base band's ink rules become hairlines) */
.aspi-app .aspi-kpis { border-top: var(--stroke-hair) solid var(--gray-rule-strong); border-bottom: var(--stroke-hair) solid var(--gray-rule-strong); }
.aspi-app .aspi-kpi { padding: 14px 18px 16px; }
.aspi-app .aspi-kpi dt { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-charcoal); }
.aspi-app .aspi-kpi dd { font-size: 28px; }
.aspi-app .aspi-kpi__unit { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-kpi dd.aspi-kpi__delta { font-size: 12px; letter-spacing: 0; }

/* ── Lists ── */
.aspi-app .aspi-entries { border-top-width: var(--stroke-hair); border-top-color: var(--gray-rule-strong); }
.aspi-app .aspi-entry { padding: 14px 4px; }
.aspi-app .aspi-entry__name { font-size: 14px; letter-spacing: 0; }
.aspi-app .aspi-entry__desc { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-card { border: 0; border-top: var(--stroke-hair) solid var(--gray-rule-strong); padding: 16px 0 0; }
.aspi-app .aspi-card h4, .aspi-app .aspi-card__title { font-size: 14px; letter-spacing: 0; }
.aspi-app .aspi-card__meta { font-size: 12px; letter-spacing: 0; }
.aspi-app .aspi-callout { font-size: 13px; letter-spacing: 0; }
.aspi-app .aspi-note { font-size: 12px; letter-spacing: 0; }

/* ── Floating layers: shadow, no frame ── */
.aspi-app .aspi-scrim { align-items: start; padding-top: 14vh; background: var(--scrim); }
.aspi-app .aspi-scrim--inline { padding-block: 24px; align-items: center; }
.aspi-app .aspi-dialog { width: min(440px, 100%); padding: 24px 26px; gap: 14px; border: 0; box-shadow: var(--shadow-float); }
.aspi-app .aspi-dialog__title { font-size: 18px; letter-spacing: -0.02em; line-height: 1.4; }
.aspi-app .aspi-dialog__body { font-size: 14px; }
.aspi-app .aspi-dialog__actions { gap: 8px 12px; padding-top: 4px; }
.aspi-app .aspi-toasts { bottom: 28px; }
.aspi-app .aspi-toast { min-height: 0; padding: 11px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.aspi-app .aspi-toast__action { letter-spacing: 0; }

/* ── Phone (under 720px): every control through the variables above, then the layout types ──
   Apps change these variables, not the parts. */
@media (max-width: 719px) {
  .aspi-app { --app-control-h: 44px; --app-control-h-sm: 44px; --tap-min: 44px; --app-hit: 44px; --app-input-fs: 16px; }
  .aspi-app, .aspi-app * { -webkit-tap-highlight-color: transparent; }
  .aspi-app td .aspi-btn-text, .aspi-app td .aspi-btn:not(.aspi-btn--primary) { min-height: var(--app-hit); }
  .aspi-app .aspi-cal { width: calc(var(--app-hit) * 7 + 34px); max-width: calc(100vw - 16px); }
  .aspi-app .aspi-cal__day { font-size: 14px; }
  .aspi-app .aspi-shell__main { padding: 16px 16px 48px; gap: 16px; }
  .aspi-app .aspi-pagehead { flex-wrap: nowrap; align-items: center; padding-bottom: 12px; }
  .aspi-app .aspi-pagehead__tools { flex: none; }

  /* SideNav: logo line + one row of items that scrolls sideways */
  .aspi-app .aspi-sidenav { flex-flow: row wrap; gap: 0; padding: 0; }
  .aspi-app .aspi-sidenav__brand { flex: 1 1 0; box-sizing: border-box; min-width: 0; min-height: 44px; padding: 8px 16px; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
  .aspi-app .aspi-sidenav__brand img { height: 24px; }
  .aspi-app .aspi-sidenav__footer { flex: none; display: flex; align-items: center; padding: 0 16px; border-bottom: var(--stroke-hair) solid var(--gray-rule); }
  .aspi-app .aspi-sidenav__groups { order: 1; flex: 0 0 100%; display: flex; overflow-x: auto; scrollbar-width: none; }
  .aspi-app .aspi-sidenav__groups::-webkit-scrollbar { display: none; }
  .aspi-app .aspi-sidenav__group, .aspi-app .aspi-sidenav ul { display: contents; }
  .aspi-app .aspi-sidenav__label { display: none; }
  .aspi-app .aspi-sidenav li { flex: 1 0 auto; display: flex; }
  .aspi-app .aspi-sidenav__item { flex: 1; justify-content: center; gap: 4px; min-height: 44px; padding: 0 8px; border-left: 0; border-bottom: 3px solid transparent; font-size: 13px; white-space: nowrap; }
  .aspi-app .aspi-sidenav__item[aria-current] { border-bottom-color: var(--ink); }

  /* a fixed bulk bar: keep the end of the page clear of it */
  .aspi-shell:has(.aspi-dtable__bulk) .aspi-shell__main { padding-bottom: 104px; }

  /* Toast: full width, tappable action */
  .aspi-toasts { width: calc(100% - 32px); }
  .aspi-toast { box-sizing: border-box; width: 100%; justify-content: space-between; }
  .aspi-app .aspi-toast__action { min-height: var(--app-hit); }
  body:has(.aspi-dtable__bulk) .aspi-toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* An open drawer's footer holds its main action: the toast rises above it instead of covering it */
body:has(.aspi-drawer-layer:not(.aspi-drawer-layer--inline) .aspi-drawer__foot) .aspi-toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }