/* D-2246②: 和文書体の自己ホスト。変更前は Google Fonts の で、
トップの要求だけで CSS 自体が 1,035,075 B・@font-face 1,111 本あり（2026-08-13 実測・
モバイル UA）、head で描画を止めていた。書体・ウェイト・字面は変えていない —
google/fonts が配るのと同じ実体を tools/build-font-subsets.py で収録字集合に絞っただけ。
ここに置くのは、この CSS が既に読み込まれているから（リクエストも待ちも増えない）。 */
@font-face{
font-family:'Shippori Mincho';font-style:normal;
font-weight:400;font-display:swap;
src:url('fonts/shippori-mincho-400.woff2') format('woff2');
}
@font-face{
font-family:'Shippori Mincho';font-style:normal;
font-weight:500;font-display:swap;
src:url('fonts/shippori-mincho-500.woff2') format('woff2');
}
@font-face{
font-family:'Shippori Mincho';font-style:normal;
font-weight:700;font-display:swap;
src:url('fonts/shippori-mincho-700.woff2') format('woff2');
}
@font-face{
font-family:'Shippori Mincho';font-style:normal;
font-weight:800;font-display:swap;
src:url('fonts/shippori-mincho-800.woff2') format('woff2');
}
@font-face{
font-family:'Zen Kaku Gothic New';font-style:normal;
font-weight:300;font-display:swap;
src:url('fonts/zen-kaku-gothic-new-300.woff2') format('woff2');
}
@font-face{
font-family:'Zen Kaku Gothic New';font-style:normal;
font-weight:400;font-display:swap;
src:url('fonts/zen-kaku-gothic-new-400.woff2') format('woff2');
}
@font-face{
font-family:'Zen Kaku Gothic New';font-style:normal;
font-weight:500;font-display:swap;
src:url('fonts/zen-kaku-gothic-new-500.woff2') format('woff2');
}
@font-face{
font-family:'Zen Kaku Gothic New';font-style:normal;
font-weight:700;font-display:swap;
src:url('fonts/zen-kaku-gothic-new-700.woff2') format('woff2');
}
@font-face{
font-family:'Zen Kaku Gothic New';font-style:normal;
font-weight:900;font-display:swap;
src:url('fonts/zen-kaku-gothic-new-900.woff2') format('woff2');
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;
font-weight:100 800;font-display:swap;
src:url('fonts/jetbrains-mono-var.woff2') format('woff2');
}
/* ══════════════════════════════════════════════════════════════
V6 ── トップページ（/）だけが使う系統。
・ブロック番号 01–11 ＋ 左レール
・BLOCK 07 双円錐 = Three.js 3D（ドラッグ回転・自動回転）
・図（黒板/譜面/文字盤/関門）は v3 の作法のまま改良して継承
・暗地3案：A 深宙 / B 深藍 / C 深緑（?palette=a|b|c で切替・既定は a）
・役割色は3案共通（役割＝情報。配色＝空気）
・v8（2026-08-20）で地を反転した。紙の色に残したのは --hum（人間）だけで、
「人間が決めるところだけが紙に戻る」を色で言うため。
見た目を足す部品は末尾の v8 レイヤに固めてあるので、
配色を戻したいときは上のトークンだけを差し替えれば骨格は動く。
書体のウェイトについて: 自己ホストしている Shippori Mincho は 400/500/700/800
の 4 本で、600 は配っていない。600 を書くとブラウザが 700 に寄せるので、
はじめから 700 と書く（何が描かれるかを CSS の字面と一致させる）。
JetBrains Mono は可変（100–800）なので 600 をそのまま使える。
══════════════════════════════════════════════════════════════ */
:root{
--mi:"Shippori Mincho",serif;
--jp:"Zen Kaku Gothic New",sans-serif;
--mo:"JetBrains Mono",monospace;
--max:min(1440px,92vw); --pad:clamp(20px,4vw,56px);
--r:24px; --rs:14px;
/* 役割色（全テーマ共通・情報を担う色）。
v7 までは「白い紙の上に置く色」だったので、そのまま暗い地に置くと沈む。
明度を上げてあるが、色相は変えていない（役割と色の対応は覚え直さなくていい）。
例外は --hum（人間）。ここだけ紙の色に置いた ──
このページで唯一、人間が決めるところだけが紙の色に戻るという意味づけ。 */
/* 2026-09-15: 地を真っ白に戻したので、役割色も白の上で読める濃さ（比 4.5 以上）へ下げた。
色相は変えていない。 */
--obs:#2F78AE; --kno:#8E6310; --cir:#10785A; --cirS:rgba(16,120,90,.5);
--orc:#B23C74; --jud:#6A4FD0; --hum:#EFE3D5; --no:#C0392E; --biz:#4550C8;
}
/* 3 案とも地は真っ白（2026-09-15・依頼「背景を真っ白に、全体的に」）。
差し色の色相は暗地の頃のまま、白の上で読める濃さに下げてある。 */
/* ── A 深宙 ── シアンと菫（既定） ── */
:root,[data-theme="a"]{
--paper:#FFFFFF; --card:#FFFFFF;
--ink:#14161C; --mute:#4A5266; --dim:#5C6477;
--hair:rgba(20,30,60,.14); --hair2:rgba(20,30,60,.08);
--pa:#0B7FA6; --pb:#7B55D9; --pc:#0D7A58;
--ac:#0A6F94; --ac2:#7A45C9;
--glow:rgba(10,111,148,.22); --glow2:rgba(122,69,201,.2);
--sh:0 24px 60px rgba(20,30,60,.12); --shs:0 8px 24px rgba(20,30,60,.08);
}
/* ── B 深藍 ── 藍に、藤と瑠璃 ── */
[data-theme="b"]{
--paper:#FFFFFF; --card:#FFFFFF;
--ink:#161A28; --mute:#4A5270; --dim:#5A6380;
--hair:rgba(22,26,60,.14); --hair2:rgba(22,26,60,.08);
--pa:#3565CC; --pb:#7F4FC4; --pc:#1D78B0;
--ac:#2E55B8; --ac2:#7A48B8;
--glow:rgba(46,85,184,.22); --glow2:rgba(122,72,184,.2);
--sh:0 24px 60px rgba(22,26,60,.12); --shs:0 8px 24px rgba(22,26,60,.08);
}
/* ── C 深緑 ── 松に、若草と金 ── */
[data-theme="c"]{
--paper:#FFFFFF; --card:#FFFFFF;
--ink:#142019; --mute:#46584E; --dim:#56685E;
--hair:rgba(20,50,35,.14); --hair2:rgba(20,50,35,.08);
--pa:#12805B; --pb:#557C1B; --pc:#826A10;
--ac:#136E4C; --ac2:#56691A;
--glow:rgba(19,110,76,.22); --glow2:rgba(86,105,26,.2);
--sh:0 24px 60px rgba(20,50,35,.12); --shs:0 8px 24px rgba(20,50,35,.08);
}
/* ── 全体を真っ黒にする（2026-09-03・依頼）─────────────────
地（--paper）は 3 つの配色とも #000。そのうえで、色を足していた 2 つを止める:
・body::before のオーロラ（朱・藍・翠の巨大な滲み 3 枚）
・節ごとの色被せ（.tint-*）
--card は下げていない。地が #000 になったぶん、面と枠は自然に立つ。 */
:root{--bgaurora:none}
/* 2026-09-03: 方眼（72px のメッシュ）も消した。地は素の #000 だけ。 */
body::before{background:none!important}
.tint-a,.tint-b,.tint-c,.tint-ab,.tint-bc{background:none}
*{margin:0;padding:0;box-sizing:border-box}
/* 字を一龊に大きくする（2026-09-06「文字がすべて小さい」）。
この頁の寸法はほとんど rem で書いてあるので、根を 16px から上げれば
全体が同じ割合で伸びる。個々の数値を触ると、相対の大小（見出し＞
本文＞小字）が崩れるし、見落としも出る。
◆ clamp(a, ○vw, b) で書いた見出しだけは、幅の広い画面で vw が選ばれて
いるあいだ伸びない（rem ではないため）。本文と小字が上がることで
見出しとの差は縮まる。 */
html{font-size:17.9px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 背景の層（2026-09-03）。他の 55 頁と同じ作り。
画面に貼り付いているので、読み進んでも ◇ と星空は動かない。
地は html が持つ ── body が地色を持つと、後ろの層を覆ってしまう。 */
/* #scene 自身には z-index を置かない（night.css と同じ理由）。 */
#scene{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
/* 0.68 -> 0.90 -> 0.78 -> 0.92（2026-09-05「暗い」）。
地は #000 なので、下げるほど図は黒に溶けて締まりが無くなる。
字の読みやすさは #story .st::before の霞と text-shadow が持っているので、
ここを下げて逃げる必要はない ── 下げると図だけが暗くなり、
字が乗っていない所まで巻き添えで沈む。1.00 にしないのは、
本文の後ろに在る層だという建前を残すため。 */
#scene #shapes{opacity:.92}
#scene #flow{opacity:.85}
@media(max-width:900px){ #scene #shapes{display:none} }
body{font-family:var(--jp);color:var(--ink);background:var(--paper);line-height:1.95;font-size:24.9px;transition:background .5s}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--jud);outline-offset:4px;border-radius:6px}
img,canvas,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:300}
.skip:focus{left:14px;top:14px;background:var(--card);padding:10px 18px;border-radius:99px;box-shadow:var(--sh)}
.grain{
position:fixed;inset:0;z-index:200;pointer-events:none;mix-blend-mode:multiply;opacity:.18;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ══════════ 配色切替（検討用・本番では出さない） ══════════
* 既定は hidden。v3.js が localhost のときだけ外す。
* 本番の配色確認は ?palette=a|b|c で行う（UI を出さずに済む）。 */
.themebar[hidden]{display:none}
.themebar{position:fixed;right:16px;bottom:16px;z-index:90;background:var(--card);border:1px solid var(--hair);border-radius:999px;box-shadow:var(--shs);display:flex;align-items:center;gap:4px;padding:6px}
.themebar span{font-family:var(--mo);font-size:.6rem;letter-spacing:.14em;color:var(--dim);padding:0 8px 0 10px}
.themebar button{font-family:var(--jp);font-size:.78rem;letter-spacing:.08em;border:0;cursor:pointer;padding:8px 14px;border-radius:999px;background:transparent;color:var(--mute)}
.themebar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.themebar i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-1px}
.themebar .sa i{background:#F0A0BC}.themebar .sb i{background:#8FBAE8}.themebar .sc i{background:#84CFA7}
/* ══════════ ブロック番号レール ══════════ */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mo)}
.rail .now{font-size:1.5rem;font-weight:600;color:var(--ac);line-height:1;transition:color .5s}
.rail .of{font-size:.58rem;letter-spacing:.2em;color:var(--dim);writing-mode:vertical-rl}
.rail .line{width:1px;height:74px;background:var(--hair);position:relative}
.rail .line i{position:absolute;left:-1.5px;width:4px;border-radius:2px;background:var(--ac);transition:top .3s,height .3s}
@media(max-width:1080px){.rail{display:none}}
/* ══════════ ブロック番号タグ ══════════ */
.blocktag{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.blocktag .no{font-family:var(--mo);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ac);line-height:1}
.blocktag .lb{font-family:var(--mo);font-size:.62rem;letter-spacing:.22em;color:var(--mute);border-left:1px solid var(--hair);padding-left:14px;text-transform:uppercase}
.blocktag .lb b{display:block;font-weight:400;color:var(--dim);margin-top:2px;letter-spacing:.14em}
/* ══════════ NAV ══════════
* .navshell が固定の器。中の