/* 機能のツリーのページ（まとまり・個別）。tools/build_tree_pages.py が作る。色や部品はホームのスタイルを使う。 */
.crumb{padding:14px 0 0;font-size:12.5px;color:var(--muted)}
.crumb a{color:var(--sub);text-decoration:none}.crumb a:hover{color:var(--text);text-decoration:underline}.crumb i{font-style:normal;margin:0 8px;color:#55585f}
/* まとまりの冒頭：黒い舞台とエフェクト */
.fx-stage{position:relative;margin-top:14px;min-height:min(72vh,620px);display:flex;align-items:flex-end;background:#05060a;overflow:hidden;isolation:isolate}
.fx-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.fx-stage:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,.0) 40%,rgba(5,6,10,.82) 78%,var(--bg) 100%)}
.fx-copy{width:100%;padding-bottom:54px}
.fx-copy .kicker{letter-spacing:.2em}
.fx-copy h1{margin:10px 0 14px;font-size:clamp(34px,5.2vw,64px);line-height:1.12;letter-spacing:-.02em}
.fx-copy h1 span{color:var(--accent)}
.fx-copy p{max-width:640px;margin:0 0 24px;color:#c3c7d0;font-size:clamp(15px,1.5vw,18px);line-height:1.8}
.fx-labels{position:absolute;left:0;right:0;top:7%;width:100%;display:flex;justify-content:space-between;pointer-events:none;font-size:11.5px;letter-spacing:.18em;color:#7f8593}
.fx-labels b{font-weight:600;color:#9cc8ff}
/* 個別のページの冒頭 */
.leaf-hero{padding:34px 0 8px}.leaf-hero h1{margin:8px 0 12px;font-size:clamp(30px,4.2vw,48px);line-height:1.18}
.leaf-hero p.lead{max-width:760px}
.leaf-hero .mo{max-width:620px}
/* 子のページへのカード */
.kid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:26px}
.kid{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.kid h3{margin:0;font-size:17px}.kid p{margin:0;color:var(--sub);font-size:13.5px;line-height:1.75;flex:1}
.kid .go{font-size:13px;color:var(--accent2);font-weight:600}.kid .tagdev{align-self:flex-start;padding:1px 9px;border-radius:999px;border:1px solid rgba(155,140,242,.5);color:#bdb2ff;font-size:11px;font-weight:700}
@media(hover:hover){.kid:hover{transform:translateY(-3px);border-color:rgba(79,157,255,.5);box-shadow:0 12px 32px rgba(0,0,0,.35)}}
/* 個別のページ：画面と説明 */
.blk{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;padding:34px 0;border-top:1px solid var(--line)}
.blk h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 10px}.blk>div>p{color:var(--sub);margin:0 0 12px}
.blk .shot{margin:0 0 14px}
@media(max-width:900px){.blk{grid-template-columns:1fr;gap:18px;padding:26px 0}}
.blk-note{margin:18px 0 0;color:var(--muted);font-size:12.5px}
/* 前へ／次へ と、同じまとまりの一覧 */
.leaf-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0 0}
.leaf-nav a{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none}
.leaf-nav a small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:4px}.leaf-nav a.next{text-align:right}.leaf-nav a:hover{border-color:rgba(79,157,255,.5)}
.sibs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.sibs a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--sub);font-size:13px;text-decoration:none}
.sibs a[aria-current]{border-color:var(--accent);color:var(--text)}.sibs a:hover{color:var(--text)}
@media(max-width:620px){.fx-stage{min-height:78vh}.fx-copy{padding-bottom:36px}.fx-copy h1{font-size:34px}.leaf-nav{grid-template-columns:1fr}.leaf-nav a.next{text-align:left}.fx-labels{font-size:10px;letter-spacing:.1em}}
/* 操作できる画面（appframe.js） */
.appframe{margin:22px 0 8px;border:1px solid var(--line);border-radius:16px;background:#0f1115;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.appframe-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:#16181d;font-size:12.5px;color:var(--sub)}
.appframe-bar b{color:var(--text);font-weight:600}.appframe-bar i{flex:1}
.appframe-bar .dotx{width:8px;height:8px;border-radius:50%;background:#57c785;box-shadow:0 0 8px rgba(87,199,133,.8)}
.appframe-bar a{color:var(--accent2);text-decoration:none;font-weight:600}.appframe-bar a:hover{text-decoration:underline}
.appframe-view{position:relative;display:grid;place-items:center;min-height:200px}
.appframe-pad{position:relative}
.appframe iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0f1115}
.appframe-start{padding:12px 22px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 14px var(--font);cursor:pointer}
.appframe-note{margin:8px 0 0;color:var(--muted);font-size:12px}
/* 個別のページの冒頭：小さめの舞台 */
.fx-stage.small{min-height:min(46vh,380px)}
.fx-stage.small .fx-copy{padding-bottom:34px}.fx-stage.small .fx-copy h1{font-size:clamp(30px,4.4vw,52px)}
.fx-stage.small:after{background:linear-gradient(180deg,rgba(5,6,10,0) 30%,rgba(5,6,10,.8) 76%,var(--bg) 100%)}
/* 個別のページ：要点のカード */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:22px 0 0}
.pt{padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.pt b{display:block;margin-bottom:6px;font-size:15px}.pt span{color:var(--sub);font-size:13.5px;line-height:1.75}
.pt .n{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--accent-bg);color:var(--accent2);font:700 12px var(--mono);vertical-align:1px}
.sub-h{margin:44px 0 6px;font-size:clamp(20px,2.3vw,28px)}.sub-p{margin:0;color:var(--sub);max-width:760px}
@media(max-width:620px){.fx-stage.small{min-height:44vh}.appframe-bar{font-size:11.5px}}
/* 新しい UI から切り出した、操作できる説明用の画面（nui.js） */
.nui{position:relative;display:block;width:100%;overflow:hidden;border-radius:14px}
.nshot{margin:0}.nshot figcaption{margin-top:8px;color:var(--muted);font-size:12px}
.nblk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:start;padding:30px 0;border-top:1px solid var(--line)}
.nblk h3{margin:0 0 8px;font-size:clamp(18px,2vw,23px)}.nblk>div>p{margin:0 0 12px;color:var(--sub)}
.nblk .try{display:inline-block;margin:0 0 10px;padding:2px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent2);font-size:11.5px;font-weight:700}
@media(max-width:900px){.nblk{grid-template-columns:1fr;gap:16px;padding:24px 0}}
/* 波の図と、それを動かす画面 */
.demo-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin:22px 0 6px}
@media(max-width:900px){.demo-pair{grid-template-columns:1fr;gap:16px}}
.viz{position:relative;aspect-ratio:16/8;margin:4px 0 12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#14161b,#0e0f13);overflow:hidden}
.demo-pair .viz{aspect-ratio:16/9;margin:0}
.viz canvas{position:absolute;inset:0;width:100%;height:100%}
.viz-label{position:absolute;left:14px;top:10px;right:120px;font-size:12.5px;color:#9cc8ff;line-height:1.5}.viz-num{position:absolute;right:14px;top:10px;font:600 12.5px var(--mono);color:var(--sub)}
.viz-tip{position:absolute;left:14px;right:14px;bottom:8px;font-size:11px;color:var(--muted)}
/* 画面の印と対になる説明（番号は細い青い字。触れると、画面の印と一緒に光る） */
.notes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.note{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:baseline;padding:10px 12px 10px 10px;border-left:1px solid var(--line);border-radius:0 10px 10px 0;color:var(--sub);font-size:14px;line-height:1.75;outline:none;transition:background .2s,border-color .2s,color .2s}
.note i{font:600 12px var(--mono);font-style:normal;color:var(--accent2);letter-spacing:.04em}
.note[data-n]{cursor:default}
.note.hot,.note[data-n]:hover,.note[data-n]:focus-visible{background:rgba(79,157,255,.08);border-left-color:var(--accent);color:var(--text)}
.demo-wrap .notes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 18px;margin-top:10px}
/* 「0.41.0 から」の札・注意の枠・小さな札の並び・コードの例（スクリプトのページ） */
.since{display:inline-block;margin-left:10px;padding:1px 10px;border-radius:999px;background:rgba(79,157,255,.14);border:1px solid rgba(79,157,255,.45);color:#9cc8ff;font-size:12px;font-weight:700;letter-spacing:0;vertical-align:middle;white-space:nowrap}
.note-box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn,#f2aa60);border-radius:12px;padding:14px 18px;margin:16px 0;color:var(--sub);font-size:15px}
.note-box b{color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.tags li{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--sub)}
pre.code{margin:10px 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#0e0f13;overflow-x:auto;font:13px/1.6 var(--mono,ui-monospace,Consolas,monospace);color:#cfe3ff}
/* 送れる先：まとまりごとのカード（名前＋一言） */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0 0}
.dest{padding:20px 20px 12px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dest>b{display:block;font-size:16px}.dest>p{margin:4px 0 12px;color:var(--sub);font-size:13.5px;line-height:1.7}
.dest ul{margin:0;padding:0;list-style:none}.dest li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.dest li span{font-weight:600;font-size:14.5px;white-space:nowrap}.dest li small{color:var(--sub);font-size:12.5px;text-align:right}
.dest:nth-child(1) li span:before,.dest:nth-child(2) li span:before,.dest:nth-child(3) li span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;vertical-align:2px}
.dest:nth-child(1) li span:before{background:#6eb2ff}.dest:nth-child(2) li span:before{background:#9b8cf2}.dest:nth-child(3) li span:before{background:#57c785}
.dest-grid.stack{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.dest-grid.stack li{display:block}.dest-grid.stack li small{display:block;margin:4px 0 0 16px;text-align:left;font-size:13px;line-height:1.75}
.kid .exp,.fx-copy .exp{display:inline-block;margin-left:10px;padding:1px 9px;border-radius:999px;border:1px solid rgba(242,170,96,.6);color:#f2c983;font-size:11.5px;font-weight:700;letter-spacing:0;vertical-align:middle;white-space:nowrap}
.ext-cta+.sub-h,.note-box+.sub-h,.dest-grid+.sub-h,.pt-grid+.sub-h{margin-top:44px}
/* ---- ホーム：8 つのまとまりへの入口 ---- */
.home-stage{margin-top:0}
.anchor{display:block;height:0;scroll-margin-top:90px}
.home-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:30px 0 26px}
.home-card{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.home-card:hover{border-color:rgba(79,157,255,.55);transform:translateY(-2px)}
.home-card.first{grid-column:1/-1;border-color:rgba(79,157,255,.55)}
.home-card-main{display:block;color:inherit;text-decoration:none}
.fx-mini{position:relative;height:170px;background:#05060a;overflow:hidden;isolation:isolate}
.fx-mini canvas{position:absolute;left:0;top:0;width:100%;height:215%}
.fx-mini:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,0) 55%,var(--panel) 100%)}
.home-card.first .fx-mini{height:220px}
.home-card-txt{padding:4px 24px 14px}
.home-card-txt h3{margin:6px 0 4px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em}
.home-card-txt .hl{margin:0 0 8px;color:var(--accent2,#9cc8ff);font-weight:600;font-size:15px}
.home-card-txt p{margin:0 0 10px;color:var(--sub);font-size:14px;line-height:1.8}
.home-card-txt .go{color:var(--accent,#4f9dff);font-weight:700;font-size:13.5px}
.home-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 20px;margin-top:auto}
.home-chips a{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 11px;color:var(--sub);text-decoration:none}
.home-chips a:hover{color:var(--text);border-color:rgba(79,157,255,.6)}
@media(max-width:820px){.home-cards{grid-template-columns:1fr}.fx-mini{height:150px}.home-card.first .fx-mini{height:170px}.home-card-txt{padding:4px 18px 12px}.home-chips{padding:0 18px 18px}}
/* 広い画面：絵は右の枠（キャンバス）にだけ描き、文字は左の列に置く。絵が文字の後ろを通らないようにする */
@media(min-width:801px){
  .fx-stage canvas{inset:64px 0 auto auto;left:auto;right:0;width:52%;height:auto;aspect-ratio:1/1.12;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px);mask-image:linear-gradient(90deg,transparent 0,#000 70px)}
  .fx-stage .fx-labels{left:auto;right:0;width:52%;max-width:none;margin:0;padding:0 28px 0 70px;box-sizing:border-box}
  .fx-stage .fx-copy h1{font-size:clamp(28px,3.1vw,44px);max-width:45%}
  .fx-stage.small .fx-copy h1{font-size:clamp(26px,2.9vw,40px)}
  .fx-stage.small canvas{inset:14px 0 auto auto;width:38%}
  .fx-stage .fx-copy p,.fx-stage .fx-copy .hero-new,.fx-stage .fx-copy .mini{max-width:45%}
  .fx-stage .fx-copy .hero-new{display:flex}
}
/* 狭い画面：エフェクトが文字に重ならないよう、絵は上の帯（決まった高さ）にだけ描き、文字はその下から始める。
   （fx.js は幅 800px 以下のとき、絵をキャンバスの上半分に描く。キャンバスの高さを決めておけば、絵は帯の中に収まる。帯より下にはみ出す絵（声の波・コメントの線・AI の答えの行）は、キャンバスにマスクをかけて帯の下の端で消す＝文字の所には何も描かれない） */
@media(max-width:800px){
  .fx-stage{display:block;min-height:0;padding-top:262px}
  .fx-stage canvas{inset:0 0 auto 0;height:470px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 205px,transparent 256px);mask-image:linear-gradient(180deg,#000 0,#000 205px,transparent 256px)}
  .fx-stage .fx-labels{top:14px}
  .fx-stage.small{min-height:0;padding-top:200px}
  .fx-stage.small canvas{height:350px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 150px,transparent 194px);mask-image:linear-gradient(180deg,#000 0,#000 150px,transparent 194px)}
  .fx-stage:after,.fx-stage.small:after{background:linear-gradient(180deg,rgba(5,6,10,0) 0,rgba(5,6,10,0) 200px,rgba(5,6,10,.85) 280px,var(--bg) 100%)}
  .fx-stage.small:after{background:linear-gradient(180deg,rgba(5,6,10,0) 0,rgba(5,6,10,0) 150px,rgba(5,6,10,.85) 215px,var(--bg) 100%)}
}