/* ==========================================================================
   Recite · Shared design tokens and component styles

   RONDO と同じトークン体系を使っている。別プロダクトだが、作者が同じで
   並べて置かれる以上、見た目が揃っている方がよい。
   変更するときは rondo/assets/rondo.css との差分が広がりすぎないよう気をつける。
   ========================================================================== */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   DESIGN TOKENS
   3-tier architecture: Primitive → Semantic (alias) → Legacy alias
   Breakpoints (documented, used directly in @media):
     sm 520 · md 768 · lg 960 · xl 1280
   ========================================================================== */
:root {
    /* --- PRIMITIVE · Neutral scale (monotone palette, mode-independent) --- */
    /* --- ブランドの色。2026-08-09 にテーマを組み直した --- */
    --accent:      #FA5500;  /* オレンジ寄りの赤。色面・ラベル・ロゴの点に使う */
    --accent-ink:  #0A0A0A;  /* 色面の上に乗せる文字は黒。白は使わない */

    --neutral-50:  #FFFFFF;  /* 紙。白 */
    --neutral-100: #E5E5E5;  /* pat-soft (light) */
    --neutral-200: #D4D4D4;  /* hairline (light) */
    --neutral-300: #A3A3A3;  /* pat-mid (light) · fg-muted (dark) */
    --neutral-400: #9A9A9A;  /* fg-dim (light) */
    --neutral-500: #737373;  /* fg-muted (light) */
    --neutral-550: #6B6B6B;  /* pat-mid (dark) */
    --neutral-600: #525252;  /* fg-dim (dark) */
    --neutral-700: #404040;
    --neutral-800: #262626;  /* hairline (dark) · pat-soft (dark) */
    --neutral-900: #1A1A1A;  /* phone bezel */
    --neutral-950: #0A0A0A;  /* page bg (dark) · fg (light) · pat-hard (light) */

    /* --- SEMANTIC · Color (mode-aware aliases) --- */
    --color-surface-page:    var(--neutral-50);
    --color-surface-inset:   var(--neutral-100);
    --color-surface-accent:  var(--accent);
    --color-text-accent:     var(--accent);
    --color-text-on-accent:  var(--accent-ink);
    --color-surface-inverse: var(--neutral-950);

    --color-text-primary:    var(--neutral-950);
    --color-text-muted:      var(--neutral-500);
    --color-text-dim:        var(--neutral-400);
    --color-text-inverse:    var(--neutral-50);

    --color-border-hair:     var(--neutral-200);
    --color-border-strong:   var(--neutral-950);
    --rule-strong-w: 2px;

    --color-action-primary-bg: var(--neutral-950);
    --color-action-primary-fg: var(--neutral-50);

    /* --- SEMANTIC · Pattern tile tiers --- */
    --pat-soft: var(--neutral-100);
    --pat-mid:  var(--neutral-300);
    --pat-hard: var(--neutral-950);

    /* --- LEGACY · Back-compat aliases (existing code uses these) --- */
    --bg:        var(--color-surface-page);
    --fg:        var(--color-text-primary);
    --fg-muted:  var(--color-text-muted);
    --fg-dim:    var(--color-text-dim);
    --rule:      var(--color-border-hair);
    --accent-bg: var(--color-action-primary-bg);
    --brand:     var(--accent);
    --accent-fg: var(--color-action-primary-fg);

    /* --- Typography stacks --- */
    --stack-sans: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    --stack-jp:   'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    --stack-latin:'Helvetica Neue', Helvetica, Arial, sans-serif;
    --stack-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;

    /* --- SEMANTIC · Typography ---------------------------------------------
       サイズは 8 段。12px 未満は使わない。
       line-height はサイズと対で決める (本文 1.5-1.75 / 見出しは詰める)。
       letter-spacing は原則ゼロ。大きい文字にだけごく僅かな負を入れる。 */
    --text-xs:   12px;                        /* キャプション・メタ・ラベル */
    --text-sm:   14px;                        /* 本文 */
    --text-md:   16px;                        /* リード文 */
    --text-lg:   20px;                        /* 小見出し・カード見出し */
    --text-xl:   clamp(21px, 3vw, 32px);      /* h3 */
    --text-2xl:  clamp(26px, 5vw, 48px);      /* h2 セクション見出し */
    --text-3xl:  clamp(40px, 7vw, 72px);      /* h1 ページタイトル */
    --text-4xl:  clamp(48px, 9vw, 112px);     /* ヒーロー */

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

    /* サイズ帯ごとの行間。大きいほど詰める。 */
    --leading-display: 0.92;   /* 3xl / 4xl。大きい文字ほど詰める */
    --leading-heading: 1.3;    /* lg / xl / 2xl */
    --leading-body:    1.75;   /* sm / md — 和文本文 */
    --leading-ui:      1.5;    /* xs — 密なUI */

    --tracking-display: -0.035em; /* 3xl / 4xl のみ。字間はここ以外で触らない */
    --tracking-normal:  0;

    /* --- SEMANTIC · Space · 9 段 --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --section-py:    var(--space-6);
    --section-py-sm: var(--space-6);


    /* --- Radius · Apple-style corner scale --- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* --- Border --- */
    --border-hair: 1px;

    /* --- Elevation · Shadow scale --- */
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 40px 80px -20px rgba(0, 0, 0, 0.3);

    /* --- Motion · Timing functions --- */
    --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);   /* decel, used for reveals */
    --ease-ui:      ease;                              /* hover, toggles */
    --ease-linear:  linear;

    /* --- Motion · Durations --- */
    --dur-instant: 0.15s;
    --dur-fast:    0.3s;
    --dur-base:    0.9s;
    --dur-slow:    1.2s;

    /* --- Z-index scale --- */
    --z-base:     1;
    --z-docked:  10;
    --z-masthead:40;
    --z-controls:50;
    --z-modal:  100;

    /* --- Opacity utility --- */
    --opacity-disabled: 0.4;
    --opacity-watermark: 0.08;

    /* --- COMPONENT · 部品ごとの寸法 ---------------------------------------
       semantic を組み合わせた、部品固有の値。部品の CSS はここを参照する。 */
    --control-size:      var(--tap-size);   /* 言語 / テーマ切替の正方ボタン */
    --control-icon:      16px;

    --button-height:     var(--tap-size);
    --button-padding-x:  var(--space-5);
    --button-radius:     var(--radius-xs);

    --chip-height:       28px;
    --chip-padding-x:    var(--space-3);
    --chip-radius:       var(--radius-full);

    --card-padding:      var(--space-5);
    --card-radius:       var(--radius-sm);

    --phone-width:       240px;             /* 端末モックアップの基準幅 */
    --phone-radius:      18% / 8.5%;
    --phone-screen-ar:   900 / 1954;        /* 実機スクショの比率 */

    --toc-item-height:   var(--tap-size);

    /* --- Layout / Grid --- */
    /* --- SEMANTIC · 行長（measure） ------------------------------------------
       和文は 1 行 35〜40 字で折り返す。em はその要素の文字サイズ基準なので、
       サイズが違っても「同じ字数」で揃う。個別に 36em / 40em などと書かない。 */
    --measure-hero:    15em;   /* ヒーローの見出し。2 文を 1 文ずつの行に落とすための幅 */
    --measure-display: 18em;   /* 大見出し */
    --measure-text:    34em;   /* リード文・本文・注記・FAQ すべて共通 */

    --wrap-max: 1280px;
    --gutter:   24px;
    --tap-size: 44px; /* a11y minimum touch target */
}
.dark {
    --color-surface-page:    var(--neutral-950);
    --color-surface-inset:   var(--neutral-900);
    --color-surface-inverse: var(--neutral-50);

    --color-text-primary:    var(--neutral-50);
    --color-text-muted:      var(--neutral-300);
    --color-text-dim:        var(--neutral-600);
    --color-text-inverse:    var(--neutral-950);

    --color-border-hair:     var(--neutral-800);
    --color-border-strong:   var(--neutral-50);
    --color-surface-accent:  var(--accent);
    --color-text-accent:     var(--accent);
    --color-text-on-accent:  var(--accent-ink);

    --color-action-primary-bg: var(--neutral-50);
    --color-action-primary-fg: var(--neutral-950);

    --pat-soft: var(--neutral-800);
    --pat-mid:  var(--neutral-550);
    --pat-hard: var(--neutral-50);

    --shadow-md: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 40px 100px -20px rgba(0, 0, 0, 0.9);
}

/* ===== BASE ===== */
::selection { background: var(--fg); color: var(--bg); }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-5);
    background: var(--bg);
    overscroll-behavior: none;
}

body {
    font-family: var(--stack-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
    color: var(--fg);
    line-height: var(--leading-ui);
    overflow-x: clip;
    overscroll-behavior: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* 和文の折り返し。
       - text-wrap は当てない。和文の本文はベタ組みが原則で、pretty や balance を
         入れると行末が不揃いに見える（見出しにだけ pretty を当てる。下のルール）
       - word-break: auto-phrase は当てる。これが無いと「参加してい／るときでも」と
         文節の途中で折れる。紙の組版では許されるが、短い段を積む画面では読みにくい
       - line-break: strict は禁則処理。行頭に「、」「。」「」」を来させない */
    word-break: auto-phrase;
    line-break: strict;
    overflow-wrap: break-word;
    hanging-punctuation: allow-end;
    /* Auto-kerning for Japanese typography (palt = proportional alternate widths) */
    font-feature-settings: "palt" 1, "kern" 1;
    font-kerning: normal;
}

/* 韓国語は語単位で折り返すため、가운뎃점(·)で連ねた長い列挙が
   1語扱いになって狭い画面をはみ出す。収まらないときだけ途中で折る。
   가운뎃점は空白なしが正書法なので、本文側ではなくここで受ける。 */
:lang(ko) body,
html[lang="ko"] body {
    overflow-wrap: anywhere;
}

/* 見出しの折り返し。
   このサイトの見出しはすべて行頭揃えなので balance ではなく pretty を使う
   （balance は中央揃え向け。行頭揃えに使うと行長が不自然に短くなる）。
   文節で折るのは word-break: auto-phrase。Chrome 119+ が BudouX で判定する。
   対応していないブラウザでは従来どおりの折り返しになるだけで、崩れない。
   手動の <br> は入れないこと。画面幅が変わると必ずおかしな位置で折れる。 */
h1, h2, h3,
.feature-title, .changelog-title, .version-title, .page-title,
.cta h2, .story-card-title, .hero-display h1,
.axes-title, .axis-card-title, .empathy-list li, .empathy-close, .faq-q {
    text-wrap: pretty;
    word-break: auto-phrase;
}

/* ===== LAYOUT ===== */
/* 左右の余白は .sheet が持つ。main には付けない。
   ここに padding があると、色面が端まで届かない。 */
main { position: relative; }
.wrap { max-width: 1280px; margin: 0 auto; position: relative; }

/* ===== MOTION ===== */
/* .aos is the intersection-observer trigger; children animate in with stagger. */
.aos { /* no visual — trigger only */ }

/* Standard reveal: rise + fade */
.aos .feature-head,
.aos .feature-text > *,
.aos .feature-visual,
.aos .changelog-head,
.aos .changelog-grid > *,
.aos .changelog-imp,
.aos .changelog-more,
.aos .index-header,
.aos .index-list > li,
.aos .story-head,
.aos .story-grid > *,
.aos .version-head,
.aos .version-intro,
.aos .page-meta,
.aos .v10-image,
.aos .feature-grid > *,
.aos .plain-list > li,
.aos .changelog-imp ul > li,
.aos .block-label,
.aos .cta-row > * {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.aos.visible .feature-head,
.aos.visible .feature-text > *,
.aos.visible .feature-visual,
.aos.visible .changelog-head,
.aos.visible .changelog-grid > *,
.aos.visible .changelog-imp,
.aos.visible .changelog-more,
.aos.visible .index-header,
.aos.visible .index-list > li,
.aos.visible .story-head,
.aos.visible .story-grid > *,
.aos.visible .version-head,
.aos.visible .version-intro,
.aos.visible .page-meta,
.aos.visible .v10-image,
.aos.visible .feature-grid > *,
.aos.visible .plain-list > li,
.aos.visible .changelog-imp ul > li,
.aos.visible .block-label,
.aos.visible .cta-row > * {
    opacity: 1;
    transform: translateY(0);
}

/* Display titles: larger movement for impact */
.aos .feature-title,
.aos .changelog-title,
.aos .version-title,
.aos .cta h2,
.aos .page-title {
    opacity: 0;
    transform: translateY(56px);
    transition:
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    will-change: transform, opacity;
}
.aos.visible .feature-title,
.aos.visible .changelog-title,
.aos.visible .version-title,
.aos.visible .cta h2,
.aos.visible .page-title {
    opacity: 1;
    transform: translateY(0);
}

/* Section header rule-line draws in */
.aos .feature-head .dash,
.aos .changelog-head .dash,
.aos .story-head .dash,
.aos .version-head .dash {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.aos.visible .feature-head .dash,
.aos.visible .changelog-head .dash,
.aos.visible .story-head .dash,
.aos.visible .version-head .dash { transform: scaleX(1); }

/* Block-label rule draws in after label appears */
.aos .block-label::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.aos.visible .block-label::after { transform: scaleX(1); }

/* ===== STAGGER DELAYS ===== */
.aos.visible .feature-text > *:nth-child(1) { transition-delay: 0.15s; }
.aos.visible .feature-text > *:nth-child(2) { transition-delay: 0.26s; }
.aos.visible .feature-text > *:nth-child(3) { transition-delay: 0.36s; }
.aos.visible .feature-text > *:nth-child(4) { transition-delay: 0.46s; }
.aos.visible .feature-visual { transition-delay: 0.3s; }

.aos.visible .index-list > li:nth-child(1) { transition-delay: 0.1s; }
.aos.visible .index-list > li:nth-child(2) { transition-delay: 0.18s; }
.aos.visible .index-list > li:nth-child(3) { transition-delay: 0.26s; }
.aos.visible .index-list > li:nth-child(4) { transition-delay: 0.34s; }
.aos.visible .index-list > li:nth-child(5) { transition-delay: 0.42s; }

.aos.visible .changelog-grid > *:nth-child(1) { transition-delay: 0.28s; }
.aos.visible .changelog-grid > *:nth-child(2) { transition-delay: 0.38s; }
.aos.visible .changelog-grid > *:nth-child(3) { transition-delay: 0.48s; }
.aos.visible .changelog-imp { transition-delay: 0.55s; }
.aos.visible .changelog-more { transition-delay: 0.7s; }

.aos.visible .story-grid > *:nth-child(1) { transition-delay: 0.2s; }
.aos.visible .story-grid > *:nth-child(2) { transition-delay: 0.34s; }

.aos.visible .cta-row > *:nth-child(1) { transition-delay: 0.25s; }
.aos.visible .cta-row > *:nth-child(2) { transition-delay: 0.4s; }

.aos.visible .feature-grid > *:nth-child(1) { transition-delay: 0.3s; }
.aos.visible .feature-grid > *:nth-child(2) { transition-delay: 0.4s; }
.aos.visible .feature-grid > *:nth-child(3) { transition-delay: 0.5s; }
.aos.visible .feature-grid > *:nth-child(4) { transition-delay: 0.6s; }

.aos.visible .plain-list > li:nth-child(1),
.aos.visible .changelog-imp ul > li:nth-child(1) { transition-delay: 0.1s; }
.aos.visible .plain-list > li:nth-child(2),
.aos.visible .changelog-imp ul > li:nth-child(2) { transition-delay: 0.16s; }
.aos.visible .plain-list > li:nth-child(3),
.aos.visible .changelog-imp ul > li:nth-child(3) { transition-delay: 0.22s; }
.aos.visible .plain-list > li:nth-child(4),
.aos.visible .changelog-imp ul > li:nth-child(4) { transition-delay: 0.28s; }
.aos.visible .plain-list > li:nth-child(5),
.aos.visible .changelog-imp ul > li:nth-child(5) { transition-delay: 0.34s; }
.aos.visible .plain-list > li:nth-child(6),
.aos.visible .changelog-imp ul > li:nth-child(6) { transition-delay: 0.4s; }
.aos.visible .plain-list > li:nth-child(7),
.aos.visible .changelog-imp ul > li:nth-child(7) { transition-delay: 0.46s; }
.aos.visible .plain-list > li:nth-child(8) { transition-delay: 0.52s; }

/* ===== HERO INITIAL REVEAL (page load) ===== */
.fade-in { opacity: 0; animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.25s; }
.d3 { animation-delay: 0.4s; }
.d4 { animation-delay: 0.55s; }
.d5 { animation-delay: 0.7s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* JS が無いときは隠したままにしない。
   .aos は「現れる」演出であって、内容を隠す仕組みではない。
   <html> に js クラスを付けるのは各ページ先頭のインラインスクリプト。 */
html:not(.js) .aos *,
html:not(.js) .fade-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .aos *, .aos.visible *, .fade-in { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ===== EDITORIAL PRIMITIVES ===== */
.eyebrow {
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg-muted);
}
.eyebrow .num { color: var(--fg); }

.rule { height: 1px; background: var(--rule); width: 100%; }

.block-label {
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg-muted);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-5);
}
.block-label::after {
    content: '';
    height: 1px;
    background: var(--rule);
}

/* ===== CONTROLS (top-right, fixed) ===== */
.controls {
    position: fixed; z-index: 60;
    top: 16px; right: 16px;
    display: flex; align-items: center; gap: var(--space-1);
}
.ctrl-btn {
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--fg);
    border-radius: var(--radius-xs);
    min-width: var(--control-size);
    height: var(--control-size);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ctrl-btn:hover { background: var(--fg); color: var(--bg); }
.ctrl-btn svg { width: var(--control-icon); height: var(--control-icon); }
.icon-sun { display: none; }
.icon-moon { display: block; }
.dark .icon-sun { display: block; }
.dark .icon-moon { display: none; }
.lang-menu-wrap { position: relative; }
.lang-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 160px;
    border: 1px solid var(--fg);
    border-radius: var(--radius-sm);
    background: var(--bg);
    overflow: hidden;
    opacity: 0; pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s;
}
.lang-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lang-menu button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: var(--space-3) var(--space-4);
    background: none; border: none; cursor: pointer;
    font-family: var(--stack-sans);
    font-size: var(--text-sm); font-weight: 400;
    color: var(--fg-muted);
}
.lang-menu button:hover { background: var(--fg); color: var(--bg); }
.lang-menu button.active { color: var(--fg); font-weight: 700; }
.lang-menu button:hover.active { color: var(--bg); }
.lang-menu button .lang-code {
    font-family: var(--stack-latin);
    font-size: var(--text-xs); letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    opacity: 0.55;
}

/* ===== MASTHEAD LOGO (absolute, inside hero/page-header) ===== */
.mast {
    position: absolute;
    z-index: 40;
    font-family: var(--stack-latin);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg);
    pointer-events: none;
}
.mast-tl { top: 24px; left: 0; pointer-events: auto; }
.mast-tr { top: 24px; right: 0; text-align: right; }
.mast-bl { bottom: 24px; left: 0; }
.mast-br { bottom: 24px; right: 0; text-align: right; }
.mast .dim { color: var(--fg-dim); }

.mast-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
    text-decoration: none;
    color: var(--fg);
}
.mast-logo .logotype {
    height: 32px;
    width: auto;
    display: block;
    color: var(--fg);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    font-family: var(--stack-latin);
    font-size: var(--text-sm); font-weight: 700;
    letter-spacing: var(--tracking-normal);
    text-decoration: none;
    background: var(--accent-bg);
    color: var(--accent-fg);
    border: 1px solid var(--accent-bg);
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}
.btn:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn svg { width: 18px; height: 18px; }
.btn .arrow { display: inline-block; transition: transform 0.3s; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    font-family: var(--stack-latin);
    font-size: var(--text-sm); font-weight: 700;
    text-decoration: none;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
}
.btn-ghost:hover { background: var(--fg); color: var(--bg); }

/* 本文の流れを止めずに、詳しい説明へ送るためのリンク。
   ボタンほど強くせず、下線が伸びることで押せると分かるようにする。 */
.link-more {
    display: inline-flex; align-items: baseline; gap: var(--space-2);
    min-height: var(--tap-size);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.link-more .arrow { display: inline-block; transition: transform 0.3s; }
.link-more:hover { color: var(--fg); }
.link-more:hover .arrow { transform: translateX(4px); }
.link-more .label {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.3s;
}
.link-more:hover .label { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
    .link-more .arrow, .link-more .label { transition: none; }
}

/* App Store badge — Official Apple badge (light/dark variants via CSS) */
.btn-appstore {
    display: inline-block;
    line-height: var(--leading-display);
    text-decoration: none;
    transition: opacity 0.2s ease;
    background-image: url('appstore-badge-black.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 180px;
    height: 60px;
}
.dark .btn-appstore { background-image: url('appstore-badge-white.svg'); }
.btn-appstore:hover { opacity: 0.85; }
.btn-appstore svg,
.btn-appstore .btn-appstore-text { display: none; }
@media (max-width: 640px) {
    .btn-appstore { width: 140px; height: 46px; }
}

/* 審査中の表示。バッジの代わりに置く。
   罫線で区切り、点だけ色を使う。通ったら .btn-appstore に戻す。 */
.status-review {
    border-inline-start: 2px solid var(--accent);
    padding-inline-start: var(--space-4);
}
/* バッジは 1 行だが、審査中は 2 行になる。横に並ぶ小文字を
   1 行目の高さに合わせる。バッジに戻したら中央揃えのままでよい。 */
.hero-cta:has(.status-review) { align-items: baseline; }
.status-review .t {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: var(--leading-heading);
}
.status-review .dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.status-review .d { color: var(--fg-muted); margin-top: var(--space-2); }

/* ===== PLAIN LIST (+ marker) ===== */
.plain-list {
    list-style: none;
    margin-bottom: var(--space-7);
}
.plain-list li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-4);
    align-items: baseline;
}
.plain-list li:last-child { border-bottom: none; }
/* ::before が 1 列目を占めるので、本文は明示的に 2 列目へ入れる。
   これが無いと 2 つ目以降の要素が 24px 幅の列に落ちて、文字が縦一列になる。 */
.plain-list li > * { grid-column: 2; }
.plain-list li::before {
    content: '+';
    font-family: var(--stack-latin);
    color: var(--fg);
    font-weight: 400;
    font-size: var(--text-xs);
}
.plain-list li strong {
    font-family: var(--stack-jp);
    display: block;
    font-size: var(--text-sm); font-weight: 700;
    color: var(--fg);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-normal);
}
.plain-list li span {
    font-family: var(--stack-sans);
    font-size: var(--text-sm); font-weight: 400;
    line-height: var(--leading-body);
    color: var(--fg-muted);
}
.plain-list.single-line li { grid-template-columns: 24px 1fr; }
.plain-list.single-line li::before { align-self: baseline; }
.plain-list.single-line li > * {
    font-family: var(--stack-sans);
    font-size: var(--text-sm); font-weight: 400;
    line-height: var(--leading-body);
    color: var(--fg);
}

/* ===== CTA BLOCK ===== */
.cta {
    padding: 128px 0 160px;
    border-top: 1px solid var(--rule);
}
.cta h2 {
    font-family: var(--stack-latin);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    margin-bottom: var(--space-7);
}
.cta h2 .dim { color: var(--fg-dim); }
.cta-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--fg);
}
.cta-imprint {
    display: flex; flex-direction: column; gap: var(--space-2);
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg);
}
.cta-imprint-line.dim { color: var(--fg-muted); font-weight: 400; }

/* ===== COLOPHON ===== */
.colophon {
    padding: var(--space-8) 0 var(--space-7);
    border-top: 1px solid var(--fg);
    position: relative;
}
.colophon-mark {
    display: flex; align-items: center; gap: var(--space-5);
    margin-bottom: var(--space-8);
}
.colophon-mark .logotype {
    height: clamp(48px, 7vw, 80px);
    width: auto;
    color: var(--fg);
    flex-shrink: 0;
    display: block;
}
.colophon-mark-text {
    font-family: var(--stack-latin);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: var(--leading-display);
    color: var(--fg-dim);
}
.colophon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}
.colophon-col h4,
.colophon-col .colophon-h {
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--space-3);
}
.colophon-col p, .colophon-col a {
    font-family: var(--stack-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
    color: var(--fg);
    text-decoration: none;
    display: block;
}
/* リンクだけ当たり判定を 44px 以上に (テキストサイズは据え置き) */
.colophon-col a {
    display: flex;
    align-items: center;
    min-height: var(--tap-size);
}
.colophon-col a:hover { opacity: 0.6; }
.colophon-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    font-family: var(--stack-latin);
    font-size: var(--text-xs); font-weight: 400;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg-muted);
}
.colophon-bottom a {
    color: var(--fg-muted); text-decoration: none;
}
.colophon-bottom a:hover { color: var(--fg); }

/* ===== BACKGROUND-ONLY MODE (for screenshots) ===== */
body.bg-only > *:not(#bg-canvas):not(#bg-hint) { visibility: hidden !important; }
body.bg-only #bg-canvas { opacity: 1 !important; }

/* ===== SHARED RESPONSIVE ===== */
@media (max-width: 960px) {
    .cta { padding: var(--space-9) 0 var(--space-9); }
    .cta-row { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; justify-items: start; }
    .colophon-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

@media (max-width: 520px) {
    /* main には左右の padding を付けない。色面が端で止まる（DESIGN.md §3.9） */
    .controls { top: 12px; right: 12px; }
    .mast-tl { top: 16px; }
    .mast-tr { top: 16px; }
    .mast-bl { bottom: 16px; }
    .mast-br { bottom: 16px; }
    .cta h2 { }
    .colophon-grid { grid-template-columns: 1fr; }
}

/* ===== A11y · Tap target =================================================
   文字サイズを変えずに当たり判定だけ 44px 以上にする。インラインリンクには
   使わない (行間が崩れるため)。ナビゲーション・フッター・目次に使う。 */
.tap-safe {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
}
.tap-safe-block {
    display: flex;
    align-items: center;
    min-height: var(--tap-size);
}


/* ==========================================================================
   RECITE · 版面（2026-08-09 に組み直し）

   12 カラムのグリッドに、名前を付けた線で要素を置く。
   「なんとなく中央」をやめ、どこに置くかを毎回決める。

   守っていること（調査に基づく）:
   - すべてのトラックは minmax(0, 1fr)。素の 1fr は長い URL 一つで崩れる
   - 罫は content か bleed のどちらかで終える。同じ節で混ぜない
   - 橙は白の上で 3.14:1 しかない。小さい文字には使わない。
     面として敷き、その上は黒で書く（5.72:1）
   - 数字は tabular-nums。01 と 11 の幅がずれない
   - 動きは transform / opacity / filter だけ
   ========================================================================== */

/* 横の食み出しは body で止める。
   html に overflow-x: clip を付けると、縦の overflow が visible のままになり
   ページ全体がスクロールできなくなる（実際に一度そうなった）。
   body 側なら viewport へ伝播し、縦は auto のまま残る。
   hidden ではなく clip を使うのは、hidden がスクロール容器を作って
   position: sticky を無効にするため。 */
html { scrollbar-gutter: stable; }

/* ===== 版面 ===== */
:root {
    --gutter-col: clamp(12px, 1.6vw, 24px);
    --margin-page: clamp(16px, 4.5vw, 72px);
}
.sheet {
    display: grid;
    grid-template-columns:
        [bleed-start] var(--margin-page)
        [content-start] repeat(12, [c] minmax(0, 1fr))
        [content-end] var(--margin-page) [bleed-end];
    column-gap: var(--gutter-col);
    max-width: 1680px;
    margin: 0 auto;
}
.sheet > * { grid-column: content; }
.sheet > .full { grid-column: bleed; }


/* 節の中でも同じ線を使えるようにする */
.sub {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--gutter-col);
}

/* ===== 節 ===== */
.sec { padding-block: clamp(56px, 8vw, 128px); }
.sec + .sec { border-block-start: 1px solid var(--rule); }
.sec-head {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: content;
    align-items: baseline;
    padding-block-end: var(--space-7);
}
.sec-num {
    grid-column: c 1 / c 2;
    font-family: var(--stack-latin);
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-accent);
}
.sec-label {
    grid-column: c 2 / c 5;
    font-family: var(--stack-latin);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--fg-muted);
}
.sec-title { grid-column: c 5 / content-end; }

/* ===== 大きな文字 ===== */
.display {
    font-family: var(--stack-latin);
    /* 上限を画面よりずっと大きく取り、端で切れるまで伸ばす。
       rem の項を残してあるので、拡大表示でも大きくなる */
    font-size: clamp(44px, 1rem + 11vw, 22rem);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-box: trim-both cap alphabetic;  /* 欧文だけ。和文には当てない */
    margin: 0;
}
.display-accent { color: var(--color-text-accent); }
.crop { overflow-x: clip; }
.crop .display { white-space: nowrap; }

.title-jp {
    font-family: var(--stack-jp);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-feature-settings: "palt" 1;   /* 和文の見出しは詰めではなく約物の空きを取る */
}
.lede {
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--fg-muted);
    max-width: var(--measure-text);
}
.small {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--fg-muted);
    max-width: var(--measure-text);
}
.small strong, .lede strong { color: var(--fg); font-weight: 700; }
.label {
    font-family: var(--stack-latin);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== 色面 ===== */
.band {
    background: var(--color-surface-accent);
    color: var(--color-text-on-accent);
}
.band a { color: inherit; text-decoration: none; }
.band a:hover { opacity: .6; }
.band .logotype { color: inherit; }
.band .logotype circle { fill: currentColor; }   /* 赤の上に赤を置かない */
/* 色面の中では、文字と罫の変数ごと入れ替える。
   個別に色を上書きすると、部品が増えるたびに漏れる。 */
.band {
    --fg:       var(--accent-ink);
    --fg-muted: rgba(10, 10, 10, .74);
    --fg-dim:   rgba(10, 10, 10, .56);
    --rule:     rgba(10, 10, 10, .28);
    --color-text-accent: var(--accent-ink);
    --color-border-strong: var(--accent-ink);
}
.band .small, .band .lede, .band .label { color: var(--fg-muted); }
.band .plain-list li { border-bottom-color: var(--rule); }
.band .plain-list li strong { color: var(--fg); }
.band .plain-list li::before { color: var(--fg); }
.band .display { color: var(--color-text-on-accent); }

/* ===== 天面 ===== */
/* 天面。フッターと同じ骨で組む。ロゴを大きく、名前も添える */
.masthead { padding-block: var(--space-6) var(--space-6); align-items: end; }
/* 目次は c 4 から始まる。ここを c 5 まで伸ばすと列が重なり、
   目次が次の行へ落ちて上下の中央が揃わなくなる。 */
.masthead .mast-logo { grid-column: c 1 / c 3; grid-row: 1; display: flex; align-items: center; gap: var(--space-4); }
.masthead .mast-logo .logotype { height: 44px; }
.mast-word {
    font-family: var(--stack-latin);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.masthead-nav {
    grid-column: c 6 / c 11;
    display: flex; flex-wrap: wrap; gap: var(--space-5);
    font-family: var(--stack-latin);
    font-size: var(--text-sm);
    font-weight: 500;
}
.masthead-right {
    grid-column: c 11 / content-end;
    text-align: end;
    font-family: var(--stack-latin);
    font-size: var(--text-sm);
    /* macOS は Apple の表記。大文字にしない */
    text-transform: none;
}
.sec-lead { grid-column: c 1 / c 8; margin-bottom: var(--space-7); }

/* ===== 流れる帯 ===== */
.ticker { display: flex; overflow: clip; border-block: 1px solid var(--rule); }
.ticker-track {
    display: flex; flex: 0 0 auto; gap: var(--space-6);
    padding-block: var(--space-3);
    padding-inline-end: var(--space-6);
    animation: tickerMove 42s linear infinite;
}
.ticker-track span {
    font-family: var(--stack-latin);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker-track .sep { color: var(--color-text-accent); }
@keyframes tickerMove { to { transform: translateX(-100%); } }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .ticker { overflow-x: auto; }
}

/* ===== 番号付きの表 ===== */
.index { list-style: none; }
.index > li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: content;
    column-gap: var(--gutter-col);
    align-items: baseline;
    padding-block: var(--space-6);
    border-block-start: 1px solid var(--rule);
}
.index > li:first-child { border-block-start: 2px solid var(--color-border-strong); }
.index > li:last-child { border-block-end: 1px solid var(--rule); }
.index .n {
    grid-column: c 1 / c 2;
    font-family: var(--stack-latin);
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-accent);
}
.index .t {
    grid-column: c 2 / c 7;
    font-family: var(--stack-jp);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    font-feature-settings: "palt" 1;
}
.index .d { grid-column: c 8 / content-end; }

/* ===== 章 =====
   番号は左の列に貼り付く。align-self: start が無いと貼り付かない。 */
.chapter { padding-block: clamp(56px, 9vw, 144px); border-block-start: 1px solid var(--rule); }
.chapter-num {
    grid-column: c 1 / c 2;
    position: sticky; top: var(--space-6);
    align-self: start;
    font-family: var(--stack-latin);
    font-size: var(--text-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-accent);
    line-height: 1;
}
.chapter-label {
    grid-column: c 2 / c 5;
    align-self: start;
}
.chapter-body { grid-column: c 5 / c 11; grid-row: 1; }
.chapter-body .title-jp { margin-bottom: var(--space-5); }
.chapter-body p + p { margin-top: var(--space-4); }
.chapter-body .link-more { margin-top: var(--space-5); }
.chapter-figs { grid-column: c 5 / bleed-end; grid-row: 2; margin-top: var(--space-7); }
/* 画面の複製は、説明の隣に置く。ギャラリーにしない */
.chapter-figs figure + figure { margin-top: var(--space-6); }
.chapter-figs figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--fg-dim);
}
/* 小さな図は横に並べる */
.figs-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-7); }
.figs-row figure { margin: 0 !important; }

.shot {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.shot-bare { display: block; width: 100%; height: auto; }
.fig-strip img { max-width: 441px; }
.fig-menu  img { max-width: 336px; }
.fig-panel img { max-width: 366px; }

/* ===== ヒーロー ===== */
.hero { padding-block: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 88px); }
.hero-title { grid-column: c 1 / c 11; font-size: var(--text-3xl); }
.hero-lede  { grid-column: c 1 / c 6; margin-top: var(--space-7); }
.hero-side  { grid-column: c 8 / content-end; margin-top: var(--space-7); align-self: end; }
.hero-side dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.hero-side dt { font-family: var(--stack-latin); font-size: var(--text-xs); text-transform: uppercase; color: var(--fg-muted); }
.hero-side dd { font-size: var(--text-sm); }
.hero-cta { grid-column: c 1 / c 8; margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

/* 画面の複製は右端まで抜く。切れてよい */
.stage { grid-column: c 3 / bleed-end; margin-top: var(--space-8); }
.stage-inner { border: 1px solid var(--rule); border-start-start-radius: var(--radius-md); overflow: hidden; background: var(--neutral-950); }
.stage-window { display: block; width: 100%; height: auto; }

/* ===== データの節（色面） ===== */
.facts-lede { grid-column: c 5 / c 11; }
.facts-list { grid-column: c 5 / content-end; margin-top: var(--space-7); }
/* 見出しと本文が同じ 14px で差がなく、拾い読みができなかった。
   見出しだけ一段上げる。.plain-list li strong (0-2-2) より詳細度を上げる必要がある。 */
.plain-list.facts-list li strong {
    font-size: var(--text-md);
    line-height: var(--leading-heading);
    display: block;
    margin-bottom: var(--space-2);
}
.facts-note { grid-column: c 5 / c 11; margin-top: var(--space-7); padding-inline-start: var(--space-5); border-inline-start: 2px solid currentColor; }
.facts-note h3 { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3); }
.facts-note p + p { margin-top: var(--space-3); }

/* ===== 質問 ===== */
.faq-list { grid-column: content; }
.faq-item {
    display: grid; grid-template-columns: subgrid; grid-column: content;
    column-gap: var(--gutter-col);
    padding-block: var(--space-6);
    border-block-start: 1px solid var(--rule);
}
.faq-item:last-child { border-block-end: 1px solid var(--rule); }
.faq-q { grid-column: c 1 / c 6; font-family: var(--stack-jp); font-size: var(--text-lg); font-weight: 700; line-height: 1.35; font-feature-settings: "palt" 1; }
.faq-a { grid-column: c 6 / content-end; }
.faq-a a { color: var(--fg); }

/* ===== 対応環境 ===== */
.spec { grid-column: content; list-style: none; }
.spec li {
    display: grid; grid-template-columns: subgrid; grid-column: content;
    column-gap: var(--gutter-col);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--rule);
    align-items: baseline;
}
.spec li:last-child { border-block-end: 1px solid var(--rule); }
.spec .k { grid-column: c 1 / c 3; }
.spec .v { grid-column: c 3 / c 9; font-size: var(--text-sm); }

/* ===== 末尾 ===== */
.tail { padding-block: clamp(64px, 9vw, 128px); }
.tail-title { grid-column: c 1 / content-end; }
.tail-row { grid-column: c 1 / content-end; margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-5); border-block-start: 2px solid currentColor; }

.colophon-sheet { padding-block: var(--space-8) var(--space-7); }
.colophon-mark { grid-column: c 1 / c 5; display: flex; align-items: center; gap: var(--space-4); }
.colophon-mark .logotype { height: 40px; }
.colophon-mark span { font-family: var(--stack-latin); font-size: var(--text-xl); font-weight: 700; color: var(--fg-dim); }
.colophon-cols { grid-column: c 5 / content-end; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
.colophon-cols h4 { font-family: var(--stack-latin); font-size: var(--text-xs); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-3); }
.colophon-cols a { display: flex; align-items: center; min-height: var(--tap-size); font-size: var(--text-sm); color: var(--fg); text-decoration: none; }
.colophon-cols a:hover { opacity: .6; }
.colophon-bottom { grid-column: content; display: flex; justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-5); border-block-start: 1px solid var(--rule); }

/* ===== 狭い画面 ===== */
@media (max-width: 900px) {
    .sheet > *, .sub > *, .index > li > *, .faq-item > *, .spec li > * { grid-column: content !important; }
    .index > li, .faq-item, .spec li { grid-template-columns: minmax(0,1fr); }
    .index .n, .chapter-num { position: static; margin-bottom: var(--space-2); }
    .index .t, .index .d, .faq-q, .faq-a { margin-top: var(--space-2); }
    .chapter-figs, .stage { margin-top: var(--space-6); }
    .colophon-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .masthead-nav { gap: var(--space-4); }
}
/* ===== 現れ方 =====
   CSS だけで、スクロールに連動させる。対応していないブラウザでは
   最初から出ている状態になる（隠したままにしない）。 */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal {
            animation: revealUp linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 30%;
        }
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: none; }
        }
    }
}

/* 声。看板より一段落とす */
.quote { font-size: var(--text-xl); line-height: 1.4; }

/* ==========================================================================
   節の見出し（作り直し）
   章は大きな番号、それ以外は大きな英字。**同じ見せ方にしない。**
   ========================================================================== */

/* --- 章：番号を大きく置く --- */
.chapter-num {
    grid-column: c 1 / c 4;
    position: sticky; top: var(--space-6);
    align-self: start;
    font-family: var(--stack-latin);
    font-size: clamp(56px, 7vw, 128px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-accent);
    text-box: trim-both cap alphabetic;
}
.chapter-label {
    grid-column: c 1 / c 4;
    align-self: start;
    margin-top: var(--space-3);
}

/* --- 章以外：英字の見出しを大きく敷く --- */
.sec-mark {
    grid-column: content;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--color-border-strong);
    margin-bottom: var(--space-8);
}
.sec-mark h2, .sec-mark .mark {
    font-family: var(--stack-latin);
    font-size: clamp(32px, 5.5vw, 88px);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.035em;
    text-box: trim-both cap alphabetic;
    margin: 0;
}
.sec-mark .aside {
    font-family: var(--stack-latin);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--fg-muted);
    text-align: end;
    white-space: nowrap;
}

/* --- 図の見た目を揃える --- */
.plate {
    background: var(--color-surface-inset);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex; align-items: center; justify-content: center;
}
.band .plate { background: rgba(255,255,255,.12); border-color: rgba(10,10,10,.2); }
.shot { border-radius: var(--radius-md); }

/* --- 細い線のアイコン --- */
.ico {
    width: 24px; height: 24px;
    stroke: currentColor; fill: none;
    /* Lucide（MIT・24 の格子・線 2）。読み込まず、必要なものだけ写して置く */
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}
.ico-accent { color: var(--color-text-accent); }

/* 章の番号と英字ラベルの間を空ける */
.chapter-label { margin-top: var(--space-5); }
/* 声は左から。中央に浮かせない */
.voices { grid-column: c 1 / c 12; }
.voices .quote + .quote { margin-top: var(--space-4); }
.voices .quote:last-child { margin-top: var(--space-7); }
/* 番号付きの行にアイコンを差す */
.index > li .ico { grid-column: c 2 / c 3; align-self: center; }
.index .t { grid-column: c 3 / c 8; }
.index .d { grid-column: c 8 / content-end; }
/* データの一覧にもアイコンを差す */
.plain-list li { grid-template-columns: 24px 1fr; }
.plain-list li .ico { grid-column: 1; align-self: start; margin-top: 2px; }
.plain-list li::before { display: none; }
/* 台に載せた図。透過 PNG と写真の角丸を揃える */
.fig-strip .plate, .fig-menu .plate, .fig-panel .plate { padding: var(--space-4); }

/* 天面の中に置く切り替えボタン。ロゴ・目次と同じ行で、上下中央に揃える */
.masthead { align-items: center; }
.controls-inline {
    position: static;
    grid-column: c 11 / content-end;
    grid-row: 1;
    justify-self: end;
    gap: var(--space-2);
}
/* 色面の上では、黒い線と黒い文字にする */
.band .ctrl-btn {
    background: transparent;
    border-color: var(--accent-ink);
    color: var(--accent-ink);
}
.band .ctrl-btn:hover { background: var(--accent-ink); color: var(--accent); }

/* 奥付のロゴタイプは黒 */
.colophon-mark span { color: var(--fg); }

/* 和文の見出しは文節で折るが、文節そのものが列より長いことがある。
   そのときだけ、どこででも折れるようにする。これが無いと画面からはみ出す。 */
.title-jp, .hero-title, .mark, .faq-q, .index .t, .quote { overflow-wrap: anywhere; }

/* --- 章の英字ラベル。大きく、頭だけ大文字 --- */
.chapter-label {
    font-family: var(--stack-latin);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--fg);
    margin-top: var(--space-4);
}

/* --- 右端まで抜ける画面は、左だけ角を丸め、右は切る --- */
.chapter-figs .shot,
.stage-inner {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
}

/* --- 番号付きの行を、上下中央で揃える --- */
.index > li { align-items: center; }
.index > li .ico { align-self: center; }
.index .t, .index .d { align-self: center; }
.index .d { margin: 0; }


/* 導入の引用。詰まっていた 4 つを並べ、最後に結論を置く */
.quote {
    font-family: var(--stack-jp);
    /* 1 行に収める。折り返すと、詰まっていたことの列挙に見えなくなる。
       画面が狭いときだけ折れるよう、上限を抑えてある */
    font-size: clamp(17px, 2.1vw, 28px);
    line-height: 1.4;
    font-feature-settings: "palt" 1;
    overflow-wrap: anywhere;
}
.quote-dim { color: var(--fg-dim); }
.quote-dim + .quote-dim { margin-top: var(--space-4); }
.quote-close {
    margin-top: var(--space-7);
    font-weight: 700;
    color: var(--fg);
}

/* ==========================================================================
   天面と末尾を入れ替えた（2026-08-09）
   天面は紙。末尾を色面にして、奥付ごと載せる。
   ページの終わりに重さを置く方が、読み終わりが締まる。
   ========================================================================== */
.masthead-wrap { border-block-end: 1px solid var(--rule); }
/* 色面から出したので、リンクの見た目を自分で持たせる */
.masthead a { color: var(--fg); text-decoration: none; }
.masthead-nav a:hover { color: var(--color-text-accent); }
.masthead-wrap .mast-logo .logotype circle { fill: var(--accent); }

/* 末尾。CTA と奥付をひとつの色面にまとめる */
.site-end { padding-block: clamp(48px, 7vw, 96px) var(--space-7); }
.site-end .tail { padding-block: 0 0; }
.site-end .tail-row {
    grid-column: c 1 / content-end;
    margin-top: 0;
    padding-top: var(--space-5);
    border-block-start: 2px solid currentColor;
}
.site-end .colophon-sheet { padding-block: var(--space-9) 0; }
.site-end .colophon-mark .logotype circle { fill: currentColor; }
.site-end .colophon-mark span { color: var(--accent-ink); }
.site-end .colophon-cols h4 { color: rgba(10,10,10,.6); }
.site-end .colophon-cols a { color: var(--accent-ink); }
.site-end .colophon-bottom {
    color: rgba(10,10,10,.6);
    border-block-start-color: rgba(10,10,10,.28);
}

/* 章の番号とラベルは、ひとかたまりで追従させる。
   別々の格子要素にしていたので、番号だけが貼り付いていた。 */
.chapter-mark {
    grid-column: c 1 / c 4;
    /* 本文の行と図の行の両方にまたがらせる。
       -1 は暗黙の行まで届かないので、行を明示して跨ぐ。 */
    grid-row: 1 / 3;
    position: sticky;
    top: var(--space-6);
    align-self: start;   /* これが無いとセルいっぱいに伸びて貼り付かない */
}
.chapter-mark .chapter-num { position: static; grid-column: auto; display: block; }
.chapter-mark .chapter-label { grid-column: auto; margin-top: var(--space-4); }
@media (max-width: 900px) {
    .chapter-mark { position: static; }
}

/* ヒーローの実演。実機の操作をそのまま録ったもの。
   動きを減らす設定のときは、静止画に差し替える。 */
.stage-video { display: block; width: 100%; height: auto; background: var(--neutral-950); }
.stage-still { display: none; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
    .stage-video { display: none; }
    .stage-still { display: block; }
}

/* ==========================================================================
   狭い画面の後始末（2026-08-10）
   広い画面のために入れた「行をまたぐ」「右を切る」といった指定は、
   縦積みになると成立しない。ここで戻す。
   ========================================================================== */
@media (max-width: 900px) {
    /* 章：番号・見出し・図が同じ行に重なっていた。縦に積む */
    .chapter-mark,
    .chapter-body,
    .chapter-figs { grid-row: auto !important; }
    .chapter-mark { position: static; margin-bottom: var(--space-5); }
    .chapter-mark .chapter-num { font-size: clamp(40px, 13vw, 72px); }
    .chapter-mark .chapter-label { margin-top: var(--space-2); }

    /* 右端まで抜けられないので、両側を丸めて閉じる */
    .chapter-figs .shot,
    .stage-inner {
        border-radius: var(--radius-md);
        border-right: 1px solid var(--rule);
    }
    .stage { margin-inline: 0; }

    /* 小さな図は中央に置く。左に寄ったまま余白が空くと据わりが悪い */
    .figs-row { flex-direction: column; align-items: center; gap: var(--space-6); }
    .figs-row figure { width: 100%; max-width: 420px; }
    .fig-strip img, .fig-menu img, .fig-panel img { max-width: 100%; }
    .fig-strip .plate, .fig-menu .plate, .fig-panel .plate { width: 100%; }
    .figs-row figcaption { text-align: center; }

    /* 番号付きの表と質問も、縦に積んだときの間隔を整える */
    .index > li { padding-block: var(--space-5); }
    .index .t { margin-top: var(--space-3); }
    .index .d { margin-top: var(--space-2); }
    .faq-q { margin-bottom: var(--space-3); }

    /* 節の見出しは、補足を下へ回す */
    .sec-mark { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .sec-mark .aside { text-align: start; }
}

/* 仕様表は、狭い画面でも左に項目・右に内容の横並びにする。
   格子のまま縦積みにすると、右端に寄って読み順が崩れる。 */
@media (max-width: 900px) {
    .spec li {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-5);
    }
    .spec li > * { grid-column: auto !important; }
    .spec .k { flex: none; }
    .spec .v { text-align: end; }
}

/* ==========================================================================
   文章のページ（使い方・このアプリについて・更新履歴・規約）
   LP と同じ骨に載せる。天面は紙、末尾は色面。本文は 12 カラムの中に置く。
   ========================================================================== */
.doc { padding-block: clamp(48px, 7vw, 112px); }
/* 本文の位置は、使い方ページの .chapter-body と同じ (c 5 / c 11)。
   番号は h2::before が左の余白に出る。 */
.doc-body { grid-column: c 5 / c 11; counter-reset: docsec; }

.doc-body h2 {
    counter-increment: docsec;
    display: grid;
    /* 番号は本文の左外に出す。使い方ページの .chapter-num と同じ位置 */
    grid-template-columns: 0 1fr;
    align-items: baseline;
    gap: 0;
    /* 節の間隔は、使い方ページの .chapter と同じ振れ幅にする */
    margin-top: clamp(56px, 9vw, 144px);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    font-family: var(--stack-jp);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    font-feature-settings: "palt" 1;
}
.doc-body h2::before {
    content: counter(docsec, decimal-leading-zero);
    /* 本文の左外へ。使い方ページの .chapter-num と同じ位置・大きさ */
    margin-left: -4.5rem;
    font-family: var(--stack-latin);
    font-size: var(--text-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-accent);
    line-height: 1;
}
.doc-body h2:first-child { margin-top: 0; }
/* 見出しの直後に本文が来るので、間を取る。0 だとくっついて読みにくい */
.doc-body h2 { margin-bottom: var(--space-5); }

.doc-body h3 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    font-family: var(--stack-jp);
    font-size: var(--text-sm);
    font-weight: 700;
}
.doc-body p, .doc-body li {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--fg-muted);
    /* 幅を固定すると、画面を広げても伸びず不自然な位置で改行される。
       列いっぱいまで使い、行長は列幅そのもので決める。 */
    max-width: none;
}
.doc-body p { margin-bottom: var(--space-4); }
.doc-body ul, .doc-body ol { margin: 0 0 var(--space-5) 0; padding-left: 1.2em; }
.doc-body li { margin-bottom: var(--space-2); }
.doc-body strong { color: var(--fg); font-weight: 700; }
.doc-body a { color: var(--fg); }

/* 本文に差し込む画面 */
.doc-fig { margin: var(--space-6) 0 var(--space-7); }
.doc-fig img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
}
.doc-fig .plate { padding: var(--space-4); }
.doc-fig figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--fg-dim);
}

/* 要点を先に置く箱・表（規約とポリシーで使う） */
.doc-body .summary { margin: var(--space-6) 0 var(--space-8) 0; padding-left: var(--space-5); border-left: 2px solid var(--color-text-accent); }
.doc-body .summary ul { padding-left: 1.2em; }
.doc-body .summary p, .doc-body .summary li { padding-left: 0; }
.doc-body .legal-table { margin-left: 0; width: 100%; }

/* 表。枠で囲まず、行を罫線で区切る (サイト共通の組み)。
   指定が無いとブラウザ既定になり、見出しが中央寄せで本文と揃わない。 */
.legal-table {
    border-collapse: collapse;
    width: 100%;
    margin-block: var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}
.legal-table th,
.legal-table td {
    text-align: start;
    vertical-align: top;
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-block-end: 1px solid var(--rule);
}
.legal-table th {
    font-family: var(--stack-latin);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--fg-muted);
    border-block-end: 1px solid var(--fg);
    white-space: nowrap;
}
.legal-table tr:last-child td { border-block-end: none; }
.legal-table td:last-child, .legal-table th:last-child { padding-inline-end: 0; }

/* 狭い画面では3列が潰れるので、行ごとの積み上げにする */
@media (max-width: 640px) {
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead, .legal-table tr:first-child { display: none; }
    .legal-table tr {
        padding-block: var(--space-4);
        border-block-end: 1px solid var(--rule);
    }
    .legal-table tr:last-child { border-block-end: none; }
    .legal-table td { padding: 0; border: none; }
    .legal-table td:first-child {
        font-weight: var(--weight-bold);
        margin-block-end: var(--space-1);
    }
    /* 2列目 (用途)、3列目 (保存先) にラベルを添える */
    .legal-table td:nth-child(2)::before { content: "用途 — "; color: var(--fg-muted); }
    .legal-table td:nth-child(3)::before { content: "保存先 — "; color: var(--fg-muted); }
    .legal-table td:nth-child(3) { color: var(--fg-muted); }
}

@media (max-width: 900px) {
    .doc-body { grid-column: content; }
    .doc-body h2 { grid-template-columns: 2.6rem 1fr; gap: var(--space-3); }
    .doc-body h3, .doc-body p, .doc-fig { padding-left: 0; }
    .doc-body ul, .doc-body ol { padding-left: 1.2em; }
    .doc-body .summary { margin-left: 0; }
    .doc-body .legal-table { margin-left: 0; width: 100%; }
}

/* 天面の目次は 2 つに分ける。
   ページ内へ飛ぶものと、別のページへ行くものは役割が違う。
   間に縦の罫を 1 本入れて、見た目でも切る。 */
/* 日本語は語が長い。列を広めに取り、間隔も詰める */
.masthead-nav   { grid-column: c 3 / c 8; grid-row: 1; justify-self: end; gap: var(--space-4); white-space: nowrap; }
.masthead-pages {
    grid-column: c 8 / c 11;
    grid-row: 1;
    white-space: nowrap;
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    padding-left: var(--space-5);
    border-left: 1px solid var(--rule);
    font-family: var(--stack-latin);
    font-size: var(--text-sm);
    font-weight: 700;      /* 別のページへ行くものは、少し強くする */
}
.masthead-pages a { color: var(--fg); text-decoration: none; }
.masthead-pages a:hover { color: var(--color-text-accent); }

@media (max-width: 900px) {
    .masthead-nav   { order: 3; flex-basis: 100%; }
    .masthead-pages {
        order: 4; flex-basis: 100%;
        padding-left: 0; padding-top: var(--space-3);
        border-left: none; border-top: 1px solid var(--rule);
        gap: var(--space-4);
    }
}
/* サブページは目次がひとつだけ。罫線は要らない */
/* 目次はページへのリンクだけ。区切りの罫線は要らない */
/* 目次は切り替えボタンの隣に寄せる。中途半端に中央に置かない */
.masthead-pages:only-of-type {
    grid-column: c 5 / c 11;
    justify-self: end;
    padding-left: 0;
    border-left: none;
}

/* 目次と切り替えは、ひと組にして右端へ寄せる。
   別々の列に置くと、間隔が列の境目まかせになって空きすぎる。 */
.masthead-end {
    grid-column: c 5 / content-end;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-7);
}
.masthead-end .masthead-pages,
.masthead-end .controls-inline { grid-column: auto; justify-self: auto; }

/* ===== 狭い画面の天面 =====
   1 段目: ロゴ（大きめ）を左、切り替えを右。上下中央で揃える。
   2 段目: 罫線の下に、目次を画面の中央へ。 */
@media (max-width: 900px) {
    .masthead {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding-inline: var(--margin-page);
        padding-block: var(--space-5) 0;
    }
    /* ひと組にした箱を透かして、中の 2 つを直接並べる */
    .masthead-end { display: contents; }

    .masthead .mast-logo { order: 1; }
    .masthead .mast-logo .logotype { height: 40px; }
    .masthead .mast-word { font-size: var(--text-xl); }

    .masthead-end .controls-inline { order: 2; }

    .masthead-end .masthead-pages {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        gap: var(--space-5);
        margin-top: var(--space-5);
        padding-block: var(--space-4);
        border-top: 1px solid var(--rule);
    }
}

/* ===== マーカー =====
   見出しの一部に橙の帯を敷く。折り返した行ごとに帯が分かれるので、
   2 行なら 2 本になる（box-decoration-break: clone）。
   帯の上は黒。白は沈む（DESIGN.md §2.1）。 */
.hl {
    background: var(--accent);
    /* 白抜き。橙の上の白は 3.1:1 で、本文には使えないが、
       この見出しは 60px 以上あるので大きい文字の基準（3:1）を満たす。
       小さい文字に白を使わないこと（DESIGN.md §2.1）。 */
    color: var(--neutral-50);
    padding: 0.03em 0.10em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* 帯どうしが重ならないよう、見出しの行間を少し空ける */
.hero-title:has(.hl) { line-height: 1.22; }

/* ヒーローの説明。文ごとに行を変える。
   <br> ではなく span を block にしているので、翻訳しても崩れない。 */
.hero-lede { font-weight: 700; color: var(--fg); }
.hero-lede > span { display: block; }

/* ==========================================================================
   文章のページの節を、LP の章と同じ組みにする
   左に大きな番号と英字ラベル、右に見出しと本文。
   ========================================================================== */
.doc-intro { padding-block: 0 var(--space-8); }
.doc-intro .doc-body { grid-column: c 5 / c 11; }

.chapter-body.doc-body { grid-column: c 5 / c 11; }
.chapter-body.doc-body h2 {
    display: block;
    grid-template-columns: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    border: none;
    font-family: var(--stack-jp);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-heading);
}
.chapter-body.doc-body h2::before { content: none; }
.chapter-body.doc-body h3 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    padding-left: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--fg);
}
.chapter-body.doc-body p { padding-left: 0; margin-bottom: var(--space-4); }
.chapter-body.doc-body ul,
.chapter-body.doc-body ol { padding-left: 1.2em; margin-bottom: var(--space-5); }
.chapter-body.doc-body .doc-fig { padding-left: 0; margin: var(--space-6) 0 var(--space-7); }
.chapter-body.doc-body .summary { margin-left: 0; }
.chapter-body.doc-body .legal-table { margin-left: 0; width: 100%; }

@media (max-width: 900px) {
    .doc-intro .doc-body,
    .chapter-body.doc-body { grid-column: content; }
}

/* 狭い画面の左右。本文は「版面の余白 + 列間」から始まるので、
   RONDO と同じ 20px に見せるには余白を 8px にする (8 + 12 = 20)。
   グリッドは崩さない。崩すと画面いっぱいに広げる要素が横に伸びる。 */
@media (max-width: 640px) {
    :root { --margin-page: 8px; --gutter-col: 12px; }
}