@charset "UTF-8";
/* =====================================================================
   nzw.jp トップページ — 幕の振り付け
   ---------------------------------------------------------------------
   トップは 6 幕のスクロール物語として組む。このファイルはその段取りだけを持つ。
   色や部品は home.css / design-system.css の側。

   ★ 出来ていない幕を出荷できるようにしてある。
     <body data-home-acts="1 5"> のように、振り付けを効かせる幕を並べる。
     列挙されていない幕は「ただの縦積みのセクション」として描かれる。
     display: none にはしない。到達できない内容を作らないこと。

   ★ 2 層構成（詳しくは scroll-stage.js の先頭）。
     html[data-scroll-anim="timeline"] … CSS の scroll-driven animations
     html[data-scroll-anim="observer"] … IntersectionObserver が .visible を付ける
     html[data-scroll-anim="off"]      … 動きを止める設定。最初から見えている
     属性そのものが無いときは JS が動かなかったとき。**何も隠さないこと。**
   ===================================================================== */

/* ---------------------------------------------------------------------
   幕の共通
   --------------------------------------------------------------------- */

.act {
    position: relative;
    width: 100%;
    /* ヘッダーは position: fixed。アンカーで飛んだときに見出しが帯の下へ潜るので、
       その分だけ手前で止める（帯 64px + 余白）。 */
    scroll-margin-top: 6rem;
}

#projects-grid { scroll-margin-top: 6rem; }

/* content-visibility: auto は使わない。
   中身が「レイアウトされていない」状態になるため、子要素が
   IntersectionObserver から見えなくなる。一気にスクロールして
   飛び越えたときの掃き出し（scroll-stage.js の sweepPassed）が
   矩形を読めず、幕 4 の 5 要素が隠れたまま残った。
   長いページなので効かせたい気持ちはあるが、出現と両立しない。
   入れるなら「出現を持たない幕」に限ること。 */

/* ---------------------------------------------------------------------
   幕 1 — 「0.5」。サイトが何なのかを最初に言い切る
   --------------------------------------------------------------------- */

.act--hero {
    /* ヘッダーは position: fixed で、<main> が pt-24（96px）で受けている。
       その分を引いて、ちょうど 1 画面で収まるようにする。
       svh はモバイルのアドレスバーで高さが揺れるのを避けるため。 */
    min-height: calc(100vh - 6rem);
    min-height: calc(100svh - 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--nzw-space-10) 0 var(--nzw-space-16);
}

.hero-inner {
    max-width: 56rem;
}

.hero-title {
    margin: 0;
    font-size: clamp(2rem, 5.6vw, 4rem);
    line-height: 1.28;
    font-weight: var(--nzw-weight-black);
    letter-spacing: 0.01em;
    color: var(--home-ink-strong);
    text-wrap: balance;
}

.hero-title em {
    font-style: normal;
    color: var(--home-accent);
}

.hero-lead {
    margin: var(--nzw-space-6) 0 0;
    max-width: 42rem;
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    line-height: var(--nzw-leading-relaxed);
    color: var(--home-ink-sub);
}

/* Tailwind の text-slate-600 を使わない。夜テーマで暗地に暗字になる。
   新しい幕では色は必ず --home-* から取ること。 */
.hero-lead strong {
    font-weight: var(--nzw-weight-bold);
    color: var(--home-ink);
}

/* --- 実数 ------------------------------------------------------------- */

.hero-stats {
    margin: var(--nzw-space-10) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--nzw-space-6) var(--nzw-space-8);
}

.hero-stat {
    display: flex;
    flex-direction: column-reverse;   /* 数字を先に読ませ、ラベルを下に敷く */
    gap: 2px;
}

.hero-stat dt {
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.08em;
    color: var(--home-ink-muted);
}

.hero-stat dd {
    margin: 0;
    font-family: var(--nzw-font-mono);
    font-size: 1.5rem;
    font-weight: var(--nzw-weight-bold);
    line-height: 1;
    color: var(--home-ink-strong);
    /* 数え上げの途中で桁が増えても、右の項目が動かないようにする */
    font-variant-numeric: tabular-nums;
}

/* 直近 52 週のコミット数。採用担当にいちばん効く数字なので 1 つだけ大きく出す */
.hero-stat--lead dd {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    color: var(--home-accent);
}

.hero-stat--lead dd small {
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-medium);
    color: var(--home-ink-sub);
    margin-left: 0.4em;
}

.hero-stats-sep {
    align-self: stretch;
    width: 1px;
    background: var(--home-border);
}

/* 狭い画面では実数が 2 行に折り返す。区切り線だけが宙に浮くので畳む */
@media (max-width: 640px) {
    .hero-stats { gap: var(--nzw-space-5) var(--nzw-space-6); }
    .hero-stats-sep { display: none; }
    .hero-stat--lead { flex-basis: 100%; }
}

/* --- 続きがあることを示す -------------------------------------------- */

.hero-cue {
    margin-top: var(--nzw-space-12);
    display: inline-flex;
    align-items: center;
    gap: var(--nzw-space-2);
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.1em;
    color: var(--home-ink-muted);
    text-decoration: none;
    width: fit-content;
    transition: color var(--nzw-duration) var(--nzw-ease);
}

.hero-cue:hover { color: var(--home-accent); }

.hero-cue i { animation: hero-cue-bob 2.4s ease-in-out infinite; }

@keyframes hero-cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* ---------------------------------------------------------------------
   出現（層 B）
   IntersectionObserver で .visible が付く環境のときだけ隠す。
   属性が無い＝JS が動かなかった、なので何も隠さない。
   --------------------------------------------------------------------- */

html[data-scroll-anim="observer"] .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--nzw-ease-out), transform 0.7s var(--nzw-ease-out);
}

html[data-scroll-anim="observer"] .reveal.visible {
    opacity: 1;
    transform: none;
}

html[data-scroll-anim="observer"] .reveal-d1 { transition-delay: 0.08s; }
html[data-scroll-anim="observer"] .reveal-d2 { transition-delay: 0.16s; }
html[data-scroll-anim="observer"] .reveal-d3 { transition-delay: 0.24s; }

/* CSS の scroll-driven animations（animation-timeline: view()）は使わない。
   ページ下端の要素が永久に半透明のまま残るため（scroll-stage.js の先頭に経緯）。 */

/* 幕 1 は最初から画面にあるので、出現を待たせない（LCP を遅らせない） */
html[data-scroll-anim] .act--hero .reveal,
html[data-scroll-anim] .act--hero .reveal.visible {
    opacity: 1;
    transform: none;
}


/* ---------------------------------------------------------------------
   幕 5 — 「全部」。つくったものを 1 枚ずつ立ち上げる
   --------------------------------------------------------------------- */

.act--grid { padding-top: var(--nzw-space-8); }

.act-head { margin-bottom: var(--nzw-space-8); }

.act-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: var(--nzw-weight-black);
    line-height: var(--nzw-leading-tight);
    color: var(--home-ink-strong);
    letter-spacing: 0.01em;
}

.act-head p {
    margin: var(--nzw-space-3) 0 0;
    /* 1 行を 42 字前後までにする。幅いっぱいだと 1440px で 99 字になり、目で追えなかった */
    max-width: 42em;
    font-size: var(--nzw-text-sm);
    line-height: var(--nzw-leading-normal);
    color: var(--home-ink-sub);
    /* 文節で折る（「組み立て／る」のように語の途中で割らない）。未対応のブラウザは今までどおり */
    word-break: auto-phrase;
    text-wrap: pretty;
}

/* 札の出現。
   ★ 隠すのは #projects-grid.cards-staged が付いているときだけ。
     この印は home-cards.js が「出現を自分で握った」ときにだけ付ける。
     クラスに頼らず素の .project-card を隠すと、home-cards.js が 404 したときに
     カードが 1 枚も見えないページになる。 */
#projects-grid.cards-staged .project-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--nzw-ease-out),
                transform 0.55s var(--nzw-ease-out),
                box-shadow var(--nzw-duration) var(--nzw-ease);
}

#projects-grid.cards-staged .project-card.visible {
    opacity: 1;
    transform: none;
}

/* card-hover の持ち上げと衝突させない。出たあとは既存の挙動に戻す */
#projects-grid.cards-staged .project-card.visible:hover {
    transform: translateY(-6px);
}


/* ---------------------------------------------------------------------
   幕 2 — 「積み上げ」。手を動かした週を並べる
   --------------------------------------------------------------------- */

.act--pulse { padding: var(--nzw-space-16) 0 var(--nzw-space-12); }

.home-pulse {
    margin: 0;
    padding: var(--nzw-space-6) var(--nzw-space-6) var(--nzw-space-5);
    background: var(--home-surface-glass);
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-xl);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--nzw-shadow-sm);

    /* 図の色。開発ノートは --dot 系を持っているが、トップには無い。
       時間帯テーマに追従させたいので --home-* から引く。 */
    --ac-ink:  var(--home-ink-strong);
    --ac-dot:  var(--home-border);
    --ac-weak: var(--home-border);
    --ac-line: var(--home-accent);
    --ac-tick: var(--home-ink-muted);
}

.home-pulse-note {
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    color: var(--home-ink-muted);
    margin-bottom: var(--nzw-space-4);
}

.home-pulse-plot { line-height: 0; }

.home-pulse-cap {
    margin: var(--nzw-space-4) 0 0;
    font-size: var(--nzw-text-xs);
    line-height: var(--nzw-leading-normal);
    color: var(--home-ink-muted);
}

.act-head p strong {
    font-family: var(--nzw-font-mono);
    font-weight: var(--nzw-weight-bold);
    font-size: 1.05em;
    color: var(--home-accent);
}

@media (max-width: 640px) {
    .act--pulse { padding: var(--nzw-space-12) 0 var(--nzw-space-8); }
    .home-pulse { padding: var(--nzw-space-4); }
}


/* ---------------------------------------------------------------------
   幕 3 — 「主役の 3 つ」。1 つずつ大きく出す
   （ここは以前 8 枚の横スクロールカルーセルだった）
   --------------------------------------------------------------------- */

.act--focus { padding: var(--nzw-space-12) 0; }

.focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nzw-space-8);
    align-items: center;
    padding: var(--nzw-space-12) 0;
}

.focus + .focus { border-top: 1px solid var(--home-border); }

@media (min-width: 900px) {
    .focus {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--nzw-space-16);
        min-height: 72vh;
        padding: var(--nzw-space-16) 0;
    }
    /* 左右を入れ替える。3 つ並べたときに同じ側ばかりだと単調になる */
    .focus--flip .focus-media { order: 2; }
}

/* --- 図版 -------------------------------------------------------------- */

/* 図版をスクロールで動かす振れ幅。上下それぞれこの値ぶん動く。
   home-acts.js がこの変数を読んで translate を書くので、
   ここを変えれば逃げの余白と動く量が同時に変わる（片方だけずれない）。 */
:root { --focus-parallax-shift: 22px; }

.focus-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 親を切らないと、下のゆっくりした移動で図版がはみ出す */
    overflow: hidden;
    border-radius: var(--nzw-radius-xl);
    /* 図版が動くぶんの逃げ。.focus は align-items:center なので、この箱は
       行の高さまで伸びず «画像とちょうど同じ高さ» になる。そこへ下の
       translate を掛けると、動いた 22px がそのまま上か下で切れる。
       （実測：1440x900 で箱 512px・画像 512px、上が 22px 欠けていた）
       振れ幅と同じだけ上下に余白を持たせて、切らずに動ける幅を作る。 */
    padding-block: var(--focus-parallax-shift);
}

/* スクロールに合わせて動かす層。translate3d を JS が書き込む。
   動かすのは transform だけ（レイアウトを毎フレーム作り直さない）。 */
.focus-media-inner {
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.focus-cover {
    width: min(320px, 68%);
    height: auto;
    border-radius: var(--nzw-radius-sm);
    box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.45);
}

.focus-shot {
    width: min(300px, 62%);
    height: auto;
    border-radius: var(--nzw-radius-xl);
    box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.4);
}

/* 動画。preload="none" なので、読み込むまで固有の寸法が無い。
   縦横比を先に決めておかないと、あとから箱が広がって版が飛ぶ。 */
.focus-video {
    display: block;
    aspect-ratio: 540 / 960;
    object-fit: cover;
    background: var(--home-surface);
}

/* --- 図版の切り替え（Bearise：場面の動画 ⇔ アプリの画面） ---------------
   ★ 2 つを同じマスに重ねる。display で出し入れすると高さが変わって本文が跳ねる。
   ★ 隠す側は visibility:hidden まで落とす（読み上げとタブ順からも外れる）。
     出すときは visibility を先に戻し、隠すときは薄くなり終わってから落とす。 */
.focus-media--switch {
    flex-direction: column;
    /* 図版は上下に --focus-parallax-shift ぶん動く。その下にボタンを置くので、
       動いても重ならないだけの間を空ける */
    gap: calc(var(--focus-parallax-shift) + var(--nzw-space-3));
}

.focus-swap {
    display: grid;
    /* 下端でそろえる。中央だと背の低い動画のときだけボタンとの間が 35px 開く */
    place-items: end center;
    width: min(300px, 62%);
}

.focus-swap > * {
    grid-area: 1 / 1;
    width: 100%;
    transition: opacity var(--nzw-duration) var(--nzw-ease), visibility 0s linear 0s;
}

[data-focus-view="video"] .focus-app,
[data-focus-view="app"] .focus-video {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nzw-duration) var(--nzw-ease), visibility 0s linear var(--nzw-duration);
}

.focus-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-full);
    background: var(--home-surface-glass);
}

/* 切り替えと、その左右の矢印を 1 行に並べる */
.focus-nav {
    display: flex;
    align-items: center;
    gap: var(--nzw-space-3);
}

/* display を指定したので、hidden 属性を明示しないと効かなくなる */
.focus-nav[hidden] { display: none; }

.focus-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-full);
    background: var(--home-surface-glass);
    font-size: var(--nzw-text-sm);
    color: var(--home-ink-sub);
    cursor: pointer;
    transition: color var(--nzw-duration-fast) var(--nzw-ease),
                border-color var(--nzw-duration-fast) var(--nzw-ease);
}

.focus-arrow:hover { color: var(--home-accent); border-color: currentColor; }

.focus-arrow:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 2px;
}

.focus-switch button {
    min-height: 36px;
    padding: 0 var(--nzw-space-4);
    border: 0;
    border-radius: var(--nzw-radius-full);
    background: transparent;
    font: inherit;
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-ink-sub);
    cursor: pointer;
    transition: background var(--nzw-duration-fast) var(--nzw-ease),
                color var(--nzw-duration-fast) var(--nzw-ease);
}

.focus-switch button[aria-pressed="true"] {
    background: var(--nzw-accent-strong);
    color: var(--nzw-on-accent);
}

.focus-switch button:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 2px;
}

/* --- 本文 -------------------------------------------------------------- */

.focus-kicker {
    margin: 0 0 var(--nzw-space-4);
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.08em;
    color: var(--home-ink-muted);
}

.focus-body h3 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.24;
    font-weight: var(--nzw-weight-black);
    color: var(--home-ink-strong);
    letter-spacing: 0.01em;
}

.focus-sub {
    margin: var(--nzw-space-3) 0 0;
    font-size: var(--nzw-text-base);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-accent);
}

.focus-lead {
    margin: var(--nzw-space-5) 0 0;
    /* 1 行 36 字前後まで。以前は 52 字で、文の切れ目も半角スペースに潰れていた。
       文の切れ目は HTML 側で <br> にしてある */
    max-width: 36em;
    font-size: var(--nzw-text-sm);
    line-height: var(--nzw-leading-relaxed);
    color: var(--home-ink-sub);
    word-break: auto-phrase;
    text-wrap: pretty;
}

.focus-facts {
    list-style: none;
    margin: var(--nzw-space-6) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nzw-space-2);
}

.focus-facts li {
    padding: 0.28rem var(--nzw-space-3);
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-full);
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-ink-sub);
}

.focus-actions {
    margin: var(--nzw-space-8) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nzw-space-4);
}

.focus-cta {
    display: inline-flex;
    align-items: center;
    padding: var(--nzw-space-3) var(--nzw-space-6);
    border-radius: var(--nzw-radius-full);
    background: var(--nzw-accent-strong);
    color: var(--nzw-on-accent);
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-bold);
    text-decoration: none;
    box-shadow: var(--nzw-shadow-sm);
    transition: background var(--nzw-duration-fast) var(--nzw-ease),
                transform var(--nzw-duration-fast) var(--nzw-ease);
}

.focus-cta:hover { background: var(--nzw-accent-deep); transform: translateY(-1px); }

.focus-link {
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.focus-link:hover { opacity: 0.75; }


/* ---------------------------------------------------------------------
   幕 6 — 「このページ自身のこと」。隠れていた仕掛けを表に出す
   --------------------------------------------------------------------- */

.act--meta { padding: var(--nzw-space-16) 0 var(--nzw-space-12); }

.meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nzw-space-8);
}

@media (min-width: 900px) {
    .meta-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--nzw-space-10);
        /* 左右で中身の量が違う。伸ばすと片方に大きな余白が残る */
        align-items: start;
    }
}

.meta-panel,
.meta-play {
    padding: var(--nzw-space-6);
    background: var(--home-surface-glass);
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-xl);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.meta-state {
    margin: 0;
    font-size: var(--nzw-text-lg);
    line-height: var(--nzw-leading-relaxed);
    color: var(--home-ink);
}

/* 幅を固定して行の跳ねを抑えようとしたが、「雪」「昼」のような 1 文字のときに
   前後が間延びして読みにくくなった。1〜3 文字しか入らないので、
   多少の折り返しは許して素直に置く。 */
.meta-state strong {
    font-weight: var(--nzw-weight-bold);
    color: var(--home-accent);
}

.meta-note {
    margin: var(--nzw-space-4) 0 0;
    font-size: var(--nzw-text-xs);
    line-height: var(--nzw-leading-normal);
    color: var(--home-ink-muted);
}

.meta-controls {
    margin-top: var(--nzw-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--nzw-space-3);
}

.meta-row { display: flex; align-items: center; gap: var(--nzw-space-3); flex-wrap: wrap; }

.meta-row-label {
    flex: 0 0 3em;
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-ink-muted);
}

.meta-opts { display: flex; gap: var(--nzw-space-2); flex-wrap: wrap; }

/* ヘッダーの歯車の中と同じ .setting-opt。home-theme.js が document への委譲で
   受けるので、ここに置くだけで 3 箇所目のコントロールとして動く。 */
.meta-opt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 46px;
    padding: var(--nzw-space-2) var(--nzw-space-2);
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-md);
    background: transparent;
    color: var(--home-ink-sub);
    font-size: var(--nzw-text-xs);
    cursor: pointer;
    transition: border-color var(--nzw-duration-fast) var(--nzw-ease),
                color var(--nzw-duration-fast) var(--nzw-ease);
}

.meta-opt span { font-size: 10px; font-weight: var(--nzw-weight-bold); }
.meta-opt:hover { color: var(--home-accent); border-color: var(--home-accent); }

/* home-theme.js が選択中の印として付ける（Tailwind の ring も一緒に付くが、
   こちらの見た目はここで決める） */
.meta-opt.active-setting {
    color: var(--home-accent);
    border-color: var(--home-accent);
    background: var(--nzw-accent-bg);
}

body.theme-night .meta-opt.active-setting { background: rgba(56, 189, 248, 0.12); }

/* --- 遊べる方 --------------------------------------------------------- */

.meta-play-label,
.meta-play-note {
    margin: 0;
    font-size: var(--nzw-text-xs);
    color: var(--home-ink-muted);
}

.meta-play-label {
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.08em;
    margin-bottom: var(--nzw-space-4);
}

.meta-play-note { margin-top: var(--nzw-space-4); line-height: var(--nzw-leading-normal); }

/* canvas は #synapse-wrapper（home.css）が高さ 100% で敷くので、
   ここで器の高さを決める。決めないと 0px になって何も見えない。 */
.meta-play #synapse-hover-area { height: 300px; }

.focus-link--btn {
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

/* --- 締め ------------------------------------------------------------- */

/* 幕 6 の締め: zerohalf.jp への入口
   ★ 色は zerohalf.jp の地（濃紺と青）に固定する。--home-* のトークンを使わないのは、
     時間帯・天気・夜テーマでこのページの色が変わっても、別サイトの札は染めないため。 */
.zh-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--nzw-space-8);
    margin: var(--nzw-space-16) 0 0;
    padding: var(--nzw-space-8) var(--nzw-space-10);
    color: #e2e8f0;
    text-decoration: none;
    background:
        radial-gradient(ellipse 55% 90% at 88% 50%, rgba(74, 154, 238, 0.18) 0%, transparent 65%),
        linear-gradient(135deg, #0f1a2e 0%, #070b14 100%);
    border: 1px solid rgba(74, 154, 238, 0.28);
    border-radius: var(--nzw-radius-xl);
    transition: transform var(--nzw-duration) var(--nzw-ease),
                box-shadow var(--nzw-duration) var(--nzw-ease);
}

.zh-card:hover { transform: translateY(-4px); box-shadow: var(--nzw-shadow-lg); }
.zh-card:focus-visible { outline: 2px solid #4A9AEE; outline-offset: 4px; }

.zh-kicker {
    margin: 0 0 var(--nzw-space-3);
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.1em;
    color: #60a5fa;
}

.zh-title {
    margin: 0;
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: var(--nzw-weight-black);
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: #f8fafc;
}

.zh-lead {
    margin: var(--nzw-space-4) 0 0;
    max-width: 40rem;
    font-size: var(--nzw-text-base);
    line-height: 1.9;
    color: #cbd5e1;
}

.zh-list {
    display: grid;
    gap: var(--nzw-space-2);
    margin: var(--nzw-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.zh-list li {
    position: relative;
    padding-left: 1.1em;
    font-size: var(--nzw-text-sm);
    line-height: 1.7;
    color: #94a3b8;
}

.zh-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 6px;
    height: 6px;
    border-radius: var(--nzw-radius-full);
    background: #4A9AEE;
}

.zh-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: var(--nzw-space-6);
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-bold);
    color: #60a5fa;
}

.zh-card:hover .zh-go { color: #93c5fd; }

.zh-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 200px;
    height: 200px;
}

.zh-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.zh-mark span {
    position: relative;
    font-size: 3rem;
    font-weight: var(--nzw-weight-black);
    letter-spacing: 0.02em;
    color: #7cb8f5;
}

@media (max-width: 640px) {
    .act--meta { padding: var(--nzw-space-12) 0 var(--nzw-space-8); }
    .meta-panel, .meta-play { padding: var(--nzw-space-4); }
    /* 狭い画面では円を見出しの右上に小さく載せ、本文の幅を削らない */
    .zh-card { grid-template-columns: 1fr; margin-top: var(--nzw-space-12); padding: var(--nzw-space-6); }
    .zh-mark { position: absolute; top: var(--nzw-space-4); right: var(--nzw-space-4); width: 88px; height: 88px; }
    .zh-mark span { font-size: 1.35rem; }
    .zh-card { position: relative; }
    .zh-kicker, .zh-title { padding-right: 96px; }
}


/* ---------------------------------------------------------------------
   幕 4 — 「やめたことで説明する」
   （about の CHECKPOINT と apps の訂正線をトップへ引き上げたもの）
   --------------------------------------------------------------------- */

.act--creed { padding: var(--nzw-space-16) 0 var(--nzw-space-12); }

/* --- 捨てた判断の実物 -------------------------------------------------- */

.creed-demo {
    margin: 0 0 var(--nzw-space-12);
    padding: var(--nzw-space-6);
    border: 1px dashed var(--home-border);
    border-radius: var(--nzw-radius-xl);
    max-width: 44rem;
}

.creed-from,
.creed-to {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.375rem);
    font-weight: var(--nzw-weight-bold);
    line-height: var(--nzw-leading-tight);
}

.creed-from { color: var(--home-ink-muted); }
.creed-to { color: var(--home-ink-strong); }

/* 訂正線。text-decoration ではなく擬似要素にして「引かれる」動きを見せる。
   --sx は ScrollStage.strike が 0 → 1 にする。
   JS が動かない環境では既定の 1 のまま＝最初から引かれている。 */
.strike { position: relative; white-space: normal; }

.strike::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 52%;
    height: 2px;
    border-radius: 2px;
    /* 消した文字と同じ色で引く。以前はエラー用の赤（--nzw-danger）で、
       このページのどこにも無い色がここだけに乗っていた。取り消しは «誤り» ではなく «やめた» */
    background: currentColor;
    transform: scaleX(var(--sx, 1));
    transform-origin: left center;
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.creed-arrow {
    display: block;
    width: 1px;
    height: 26px;
    margin: var(--nzw-space-3) 0 var(--nzw-space-3) 10px;
    background: linear-gradient(to bottom, var(--home-border), transparent);
}

.creed-src {
    margin: var(--nzw-space-5) 0 0;
    font-size: var(--nzw-text-xs);
    color: var(--home-ink-muted);
}

.creed-src a { color: var(--home-accent); }

/* --- 決めていること 3 つ ----------------------------------------------- */

.creed-rules {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nzw-space-5);
}

@media (min-width: 860px) {
    .creed-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nzw-space-6); }
}

.creed-rule {
    display: flex;
    flex-direction: column;
    padding: var(--nzw-space-6);
    background: var(--home-surface-glass);
    border: 1px solid var(--home-border);
    border-radius: var(--nzw-radius-xl);
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform var(--nzw-duration) var(--nzw-ease),
                box-shadow var(--nzw-duration) var(--nzw-ease);
}

.creed-rule:hover { transform: translateY(-4px); box-shadow: var(--nzw-shadow-lg); }

.creed-cp {
    margin: 0 0 var(--nzw-space-4);
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    font-weight: var(--nzw-weight-bold);
    letter-spacing: 0.1em;
    color: var(--home-ink-muted);
}

.creed-rule h3 {
    margin: 0 0 var(--nzw-space-4);
    font-size: var(--nzw-text-xl);
    line-height: var(--nzw-leading-tight);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-ink-strong);
}

.creed-rule > p:not(.creed-cp) {
    margin: 0;
    font-size: var(--nzw-text-sm);
    line-height: var(--nzw-leading-relaxed);
    color: var(--home-ink-sub);
}

.creed-link {
    /* 3 枚で本文の長さが違う。auto でリンクを底に揃える */
    margin-top: auto;
    padding-top: var(--nzw-space-6);
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-bold);
    color: var(--home-accent);
}

@media (max-width: 640px) {
    .act--creed { padding: var(--nzw-space-12) 0 var(--nzw-space-8); }
    .creed-demo { padding: var(--nzw-space-4); }
}