:root{
  --dark:#0F2B46; --dark2:#173A5A; --dark3:#0A1F34;
  --accent:#0891B2; --accent2:#12A9CE; --accent-soft:#E4F3F7; --accent-tint:#F1F9FB;
  --amber:#E8940C; --amber-deep:#8A5A08; --amber-soft:#FBEFD8;
  --red:#E23D3D; --red-soft:#FBEAEA; --pos:#0F9D6B; --pos-soft:#E6F5EF;
  --ink:#16283A; --ink-soft:#43566A; --muted:#7A8A99; --line:#E2E8F0; --line-soft:#EEF2F6;
  --white:#ffffff; --light:#F4F7FA; --appbg:#ECF1F5;
  --f-disp:"Helvetica Neue","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,sans-serif;
  --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,sans-serif;
  --skin:#0891B2; --skin-soft:#E4F3F7;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--f-body);color:var(--ink);background:var(--appbg);-webkit-font-smoothing:antialiased;line-height:1.75;overflow:hidden;}
button{font-family:var(--f-body);cursor:pointer;border:none;background:none;}

/* ========== 開始オーバーレイ ========== */
.gate{position:fixed;inset:0;background:var(--dark);z-index:60;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s;}
.gate.off{opacity:0;visibility:hidden;}
.gate .in{text-align:center;padding:40px;max-width:640px;}
.gate .kicker{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--accent2);margin-bottom:34px;}
.gate .mark{font-family:var(--f-disp);font-weight:800;font-size:clamp(44px,7vw,64px);letter-spacing:.16em;color:#fff;line-height:1;}
.gate .yomi{font-size:13px;font-weight:700;letter-spacing:.5em;color:rgba(255,255,255,.55);margin-top:16px;padding-left:.16em;}
.gate .lead{margin-top:40px;font-size:clamp(16px,2vw,19px);font-weight:700;color:rgba(255,255,255,.92);line-height:2;}
.gate .enter{margin-top:44px;display:inline-flex;align-items:center;gap:12px;background:var(--accent2);color:#fff;font-family:var(--f-disp);font-weight:800;font-size:17px;letter-spacing:.04em;padding:16px 44px;border-radius:12px;transition:transform .2s,background .2s;}
.gate .enter:hover{transform:translateY(-2px);background:#25B6DA;}
.gate .enter svg{width:16px;height:16px;}
.gate .note{margin-top:26px;font-size:13px;color:rgba(255,255,255,.4);letter-spacing:.06em;}

/* ========== アプリ骨格 ========== */
.app{display:flex;height:100vh;height:100dvh;}

/* --- サイドバー --- */
.side{width:284px;flex:none;background:var(--dark);color:#fff;display:flex;flex-direction:column;padding:28px 0 20px;}
.side .lock{padding:0 28px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
.side .lg{font-family:var(--f-disp);font-weight:800;font-size:22px;letter-spacing:.16em;color:#fff;}
.side .lg span{display:block;font-size:11px;font-weight:700;letter-spacing:.42em;color:var(--accent2);margin-top:7px;}
.side .demo-tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:3px 10px;}
.side .cur{flex:1;overflow-y:auto;padding:20px 16px;}
.side .cur-h{font-size:12px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.4);padding:0 12px 12px;}
.ch{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;position:relative;transition:background .3s;}
.ch .no{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);color:rgba(255,255,255,.55);font-family:var(--f-disp);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.ch .nm{font-size:14px;font-weight:700;color:rgba(255,255,255,.55);transition:color .3s;line-height:1.4;}
.ch .tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:1px 7px;flex:none;}
.ch.active{background:rgba(18,169,206,.14);}
.ch.active .no{border-color:var(--accent2);color:var(--accent2);}
.ch.active .nm{color:#fff;}
.ch.done .no{background:var(--accent2);border-color:var(--accent2);color:var(--dark);}
.ch.done .nm{color:rgba(255,255,255,.85);}
.ch.done .no svg{width:12px;height:12px;}
.side .survey-open{margin:16px 24px 0;padding:11px 14px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font-family:var(--f-body);font-weight:700;font-size:13px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s;}
.side .survey-open:hover{background:rgba(18,169,206,.16);border-color:var(--accent2);}
.side .live{margin:14px 24px 0;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:flex;align-items:center;gap:10px;}
.side .live .dot{width:9px;height:9px;border-radius:50%;background:#3DDC97;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.side .live .tx{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);line-height:1.5;}
.side .live .tx small{display:block;font-size:11.5px;font-weight:400;color:rgba(255,255,255,.42);letter-spacing:.04em;}

/* --- メインカラム --- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--white);}
.hd{flex:none;border-bottom:1px solid var(--line);padding:0 32px;height:64px;display:flex;align-items:center;gap:18px;}
.hd .chap{font-family:var(--f-disp);font-weight:800;font-size:16px;color:var(--dark);letter-spacing:.02em;}
.hd .chap small{font-weight:700;font-size:12px;color:var(--muted);letter-spacing:.16em;display:block;line-height:1.3;}
.hd .sim{display:none;align-items:center;gap:9px;background:var(--light);border:1px solid var(--line);border-radius:99px;padding:6px 16px;font-size:12.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;}
.hd .sim.on{display:inline-flex;}
.hd .sim .sd{width:9px;height:9px;border-radius:50%;background:var(--skin);}
.hd .sp{flex:1;}
.hd .mlg{display:none;font-family:var(--f-disp);font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--dark);}
.prog{flex:none;height:3px;background:var(--line-soft);}
.prog .bar{height:100%;width:0%;background:var(--skin);transition:width .8s cubic-bezier(.4,0,.2,1);}

/* --- チャット面 --- */
.chat{flex:1;overflow-y:auto;scroll-behavior:smooth;}
.chat .col{max-width:780px;margin:0 auto;padding:36px 28px 28px;}
.divider{text-align:center;margin:4px 0 26px;}
.divider span{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--muted);background:var(--light);border-radius:99px;padding:5px 18px;}

.row{display:flex;gap:12px;margin-bottom:22px;animation:up .45s cubic-bezier(.22,1,.36,1);}
@keyframes up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.row .av{width:32px;height:32px;flex:none;border-radius:50%;background:var(--skin);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background .5s;}
.row .av svg{width:15px;height:15px;}
.row .bd{max-width:78%;min-width:0;}
.row .who{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin:0 0 5px 2px;}
.bub{background:var(--light);border-radius:4px 16px 16px 16px;padding:14px 20px;font-size:16px;line-height:1.9;color:var(--ink);}
.bub b{color:var(--dark);}
.bub .em{color:var(--skin);font-weight:700;transition:color .5s;}

.row.user{flex-direction:row-reverse;}
.row.user .bd{display:flex;flex-direction:column;align-items:flex-end;}
.row.user .bub{background:var(--dark);color:#fff;border-radius:16px 4px 16px 16px;}
.row.user .bub b{color:var(--accent2);}

.row.coach .av{background:var(--dark);}
.row.coach .who{color:var(--dark);}
.row.coach .who .lv{display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.14em;color:#0C8F63;background:var(--pos-soft);border-radius:4px;padding:1px 7px;vertical-align:1px;}
.row.coach .bub{background:var(--white);border:1.5px solid var(--dark);border-radius:4px 16px 16px 16px;}

/* typing */
.typing .bub{display:inline-flex;gap:6px;align-items:center;padding:18px 22px;}
.typing .d{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite;}
.typing .d:nth-child(2){animation-delay:.18s;}
.typing .d:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{opacity:.25;transform:none;}40%{opacity:1;transform:translateY(-3px);}}

/* --- カード（図解・ツール・メール等）--- */
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:2px 0 4px;}
.card .cap{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-bottom:16px;}
.card .body{font-size:15px;line-height:2;color:var(--ink);}

/* 図解1: これまで vs AI */
.dg-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dg-vs .p{border:1px solid var(--line);border-radius:11px;padding:18px 16px 16px;text-align:center;}
.dg-vs .p.r{border-color:var(--skin);background:var(--accent-tint);}
.dg-vs .lb{font-family:var(--f-disp);font-weight:800;font-size:13.5px;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:12px;}
.dg-vs .p.r .lb{color:var(--skin);}
.dg-vs .ic{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.dg-vs .t1{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.6;}
.dg-vs .ar{color:var(--muted);font-family:var(--f-disp);font-weight:800;font-size:15px;line-height:1;margin:7px 0;}
.dg-vs .p.r .ar{color:var(--skin);}
.dg-vs .t2{font-size:13px;color:var(--ink-soft);line-height:1.65;}

/* 図解2: 次の言葉の確率 */
.dg-nx .sent{font-family:var(--f-disp);font-weight:800;font-size:16.5px;color:var(--dark);background:var(--light);border-radius:9px;padding:13px 18px;margin-bottom:18px;line-height:1.6;}
.dg-nx .sent u{text-decoration:none;border-bottom:2.5px solid var(--skin);color:var(--skin);padding:0 6px;}
.dg-nx .brow{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.dg-nx .bl{width:118px;flex:none;font-size:14px;font-weight:700;color:var(--ink);text-align:right;}
.dg-nx .btr{flex:1;height:26px;background:var(--line-soft);border-radius:6px;overflow:hidden;}
.dg-nx .bf{height:100%;border-radius:6px;background:var(--skin);width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1) .2s;}
.dg-nx .brow.w2 .bf{background:#A5C4D4;}
.dg-nx .brow.w3 .bf{background:#D4DEE6;}
.dg-nx .bp{width:52px;flex:none;font-family:var(--f-disp);font-weight:800;font-size:14.5px;color:var(--skin);}
.dg-nx .brow.w2 .bp,.dg-nx .brow.w3 .bp{color:var(--muted);font-weight:700;}

/* ツールカード */
.tool{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:2px 0 4px;background:var(--white);}
.tool .th{display:flex;align-items:center;gap:13px;padding:17px 22px;border-bottom:1px solid var(--line-soft);}
.tool .tdot{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.tool .tdot svg{width:17px;height:17px;}
.tool .tn{font-family:var(--f-disp);font-weight:800;font-size:17.5px;color:var(--dark);line-height:1.25;}
.tool .tn small{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;}
.tool .tb{padding:8px 22px 14px;}
.tool .trow{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.tool .trow:last-child{border-bottom:none;}
.tool .tk{width:82px;flex:none;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);padding-top:2px;}
.tool .tv{flex:1;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.7;}

/* 送信ブロック警告 */
.alert{border:1.5px solid var(--red);background:var(--red-soft);border-radius:14px;padding:18px 22px;display:flex;gap:14px;margin:2px 0 4px;}
.alert .ai{width:34px;height:34px;flex:none;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;}
.alert .ai svg{width:16px;height:16px;}
.alert .at{font-family:var(--f-disp);font-weight:800;font-size:15.5px;color:var(--red);margin-bottom:4px;}
.alert .ax{font-size:14px;color:var(--ink);line-height:1.8;}

/* 名簿ペースト（ユーザー側） */
.paste{background:var(--dark3);border-radius:16px 4px 16px 16px;padding:15px 20px;color:#D7E1EA;font-size:13.5px;line-height:2;font-family:"SF Mono",Menlo,monospace;letter-spacing:.01em;}
.paste .pt{font-family:var(--f-body);font-weight:700;font-size:12.5px;color:var(--accent2);letter-spacing:.1em;margin-bottom:6px;}
.paste .dummy{display:block;width:fit-content;margin-top:10px;font-family:var(--f-body);font-size:11.5px;font-weight:700;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 8px;letter-spacing:.06em;line-height:1.9;}

/* 偽メールカード */
.mail{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2px 0 4px;background:var(--white);}
.mail .mh{background:var(--light);padding:13px 22px;border-bottom:1px solid var(--line);}
.mail .mrow{display:flex;gap:10px;font-size:13px;line-height:1.9;}
.mail .mk{width:52px;flex:none;font-weight:700;color:var(--muted);}
.mail .mv{color:var(--ink);font-weight:600;}
.mail .mb{padding:18px 22px;font-size:14.5px;line-height:2;color:var(--ink);}
.mail .hidden-tx{color:transparent;background:transparent;border-radius:4px;padding:0;font-size:1px;letter-spacing:0;}
.mail.revealed .hidden-tx{color:#8A3A00;background:var(--amber-soft);outline:1.5px dashed var(--amber);font-size:inherit;padding:0 3px;}
.mail.revealed .mb{padding-bottom:22px;}

/* クリアカード */
.clear{border:1px solid var(--line);border-radius:18px;padding:42px 30px 36px;text-align:center;background:linear-gradient(180deg,var(--accent-tint),var(--white) 55%);margin:6px 0 4px;}
.clear .ck{width:64px;height:64px;border-radius:50%;background:var(--skin);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;animation:pop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:none;opacity:1;}}
.clear .ck svg{width:28px;height:28px;}
.clear .cl1{font-size:12.5px;font-weight:700;letter-spacing:.3em;color:var(--skin);margin-bottom:10px;}
.clear .cl2{font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,3vw,28px);color:var(--dark);line-height:1.5;}
.clear .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;}
.clear .chip{font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--light);border-radius:99px;padding:6px 16px;}
.clear .chip svg{width:11px;height:11px;margin-right:6px;vertical-align:-1px;}
.clear .cnote{margin-top:20px;font-size:14px;color:var(--ink-soft);line-height:1.9;}

/* --- 選択肢 --- */
.choices{max-width:780px;margin:0 auto;padding:2px 28px 8px;display:flex;flex-wrap:wrap;gap:10px;animation:up .4s cubic-bezier(.22,1,.36,1);}
.choices.indent{padding-left:72px;}
.cbtn{border:1.5px solid var(--skin);color:var(--skin);background:var(--white);font-weight:700;font-size:15px;border-radius:99px;padding:11px 24px;line-height:1.5;transition:all .18s;}
.cbtn:hover{background:var(--skin);color:#fff;transform:translateY(-1px);}
.cbtn.soft{border-color:transparent;background:var(--amber-soft);color:var(--amber-deep);}
.cbtn.soft:hover{background:#F6E3BC;color:var(--amber-deep);transform:translateY(-1px);}
.cbtn.ghost{border-color:var(--line);color:var(--muted);}
.cbtn.ghost:hover{background:var(--light);color:var(--ink-soft);transform:none;}
.cbtn:disabled{opacity:.4;cursor:default;transform:none;}

/* --- 入力バー --- */
.inbar{flex:none;border-top:1px solid var(--line);padding:14px 28px 16px;background:var(--white);}
.inbar .box{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:12px;background:var(--light);border:1px solid var(--line);border-radius:14px;padding:13px 18px;}
.inbar .lk{flex:none;display:flex;color:var(--muted);}
.inbar .lk svg{width:15px;height:15px;}
.inbar .ph{flex:1;min-width:0;font-size:14.5px;color:var(--muted);user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inbar .snd{flex:none;width:34px;height:34px;border-radius:9px;background:var(--line);display:flex;align-items:center;justify-content:center;}
.inbar .snd svg{width:15px;height:15px;}
.inbar .foot{max-width:780px;margin:9px auto 0;text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.08em;}

/* ========== v2拡張: サイドバー24章・体験ノード ========== */
/* サイドバー: 部見出し・本編ロック章 */
.side .part{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.32);padding:18px 12px 6px;}
.ch.lk{opacity:.5;}
.ch.lk .nm{font-weight:500;}

/* オリエン: 約束カード */
.pledge{display:grid;grid-template-columns:1fr 1.35fr;gap:12px;}
.pledge .p{border:1px solid var(--line);border-radius:11px;padding:16px 16px 12px;}
.pledge .p.g{border-color:var(--skin);background:var(--accent-tint);}
.pledge .hl{font-family:var(--f-disp);font-weight:800;font-size:13px;letter-spacing:.06em;margin-bottom:8px;color:var(--muted);}
.pledge .p.g .hl{color:var(--skin);}
.pledge ul{list-style:none;}
.pledge li{font-size:13.5px;line-height:1.8;padding:6px 0 6px 22px;position:relative;color:var(--ink);border-bottom:1px dashed var(--line-soft);}
.pledge li:last-child{border-bottom:none;}
.pledge li::before{content:'';position:absolute;left:2px;top:14px;width:11px;height:11px;border-radius:50%;}
.pledge .p.b li::before{background:var(--red-soft);border:1.5px solid var(--red);}
.pledge .p.g li::before{background:var(--skin);}

/* オリエン: Before/After看板 */
.ba .row2{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line-soft);}
.ba .row2:last-child{border-bottom:none;}
.ba .k{width:96px;flex:none;font-size:12.5px;font-weight:700;color:var(--muted);}
.ba .bfr{flex:1;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
.ba .arw{flex:none;color:var(--skin);font-family:var(--f-disp);font-weight:800;}
.ba .aft{flex:1.1;font-size:14px;font-weight:700;color:var(--dark);line-height:1.6;}
.ba .aft em{font-style:normal;color:var(--skin);}

/* ELIZA: 1966年ターミナル */
.term{background:#081826;border:1px solid #12304A;border-radius:12px;overflow:hidden;margin:2px 0 4px;}
.term .tbar{display:flex;align-items:center;gap:6px;background:#0C2236;padding:9px 14px;font-family:"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.14em;color:#5E90B8;}
.term .tbar .td{width:8px;height:8px;border-radius:50%;background:#1E4363;}
.term .tbar .tt{margin-left:8px;}
.term .tbody{padding:14px 18px;font-family:"SF Mono",Menlo,monospace;font-size:13.5px;line-height:2.1;color:#7FE8C3;}
.term .tbody::after{content:'▌';animation:blink 1.2s infinite;}

/* 体験フレーム（エフォート/つまみ/年表 共通） */
.fx{border:1.5px solid var(--skin);border-radius:14px;overflow:hidden;margin:2px 0 4px;background:var(--white);}
.fx .fh{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--skin-soft);font-family:var(--f-disp);font-weight:800;font-size:14px;color:var(--dark);}
.fx .fh .fb{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--skin);border:1px solid currentColor;border-radius:5px;padding:2px 8px;}
.fx .fq{padding:14px 20px 4px;font-size:14.5px;line-height:1.9;color:var(--ink);}
.fx .seg{display:flex;gap:8px;padding:10px 20px 2px;flex-wrap:wrap;}
.fx .seg .sb{border:1.5px solid var(--line);border-radius:99px;padding:8px 18px;font-weight:700;font-size:13.5px;color:var(--ink-soft);transition:all .15s;background:var(--white);}
.fx .seg .sb:hover{border-color:var(--skin);color:var(--skin);}
.fx .seg .sb.on{background:var(--skin);border-color:var(--skin);color:#fff;}
.fx .fout{margin:12px 20px 14px;background:var(--light);border-radius:10px;padding:13px 16px;font-size:14px;line-height:1.95;color:var(--ink);min-height:56px;}
.fx .fmeta{display:flex;gap:20px;padding:0 20px 16px;font-size:12.5px;font-weight:700;color:var(--muted);}
.fx .fmeta b{color:var(--dark);font-family:var(--f-disp);}

/* ウィル・スミス年表フレーム */
.wsf{margin:12px 20px 6px;border-radius:10px;overflow:hidden;position:relative;background:#101820;}
.wsf svg{display:block;width:100%;height:auto;}
.wsf .cap{position:absolute;left:10px;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.9);background:rgba(0,0,0,.5);border-radius:5px;padding:2px 9px;}
.wsdesc{padding:0 20px 14px;font-size:13px;line-height:1.9;color:var(--ink-soft);}

/* A/Bスプリット */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ab .col2{border:1px solid var(--line);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;}
.ab .col2.b{border-color:var(--skin);}
.ab .abh{padding:9px 14px;font-family:var(--f-disp);font-weight:800;font-size:13px;background:var(--light);color:var(--ink-soft);}
.ab .col2.b .abh{background:var(--skin-soft);color:var(--skin);}
.ab .abp{margin:12px 12px 0;background:var(--dark);color:#fff;border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.85;}
.ab .abp b{color:var(--accent2);}
.ab .abo{margin:10px 12px 12px;background:var(--light);border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.9;color:var(--ink);flex:1;}
.ab .abo ol{padding-left:20px;}

/* 5点セットチップ */
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.chips2 span{font-size:13.5px;font-weight:700;color:var(--dark);background:var(--skin-soft);border-radius:99px;padding:6px 15px;}

/* コピーして持ち帰る枠 */
.copybox{background:var(--dark3);border-radius:12px;padding:16px 18px;margin:2px 0 4px;color:#D7E1EA;}
.copybox .ct{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.copybox .ct .t{font-weight:700;font-size:12.5px;color:var(--accent2);letter-spacing:.08em;}
.copybox .cpb{margin-left:auto;border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:7px;padding:5px 14px;font-size:12px;font-weight:700;transition:all .15s;}
.copybox .cpb:hover{background:var(--accent2);border-color:var(--accent2);}
.copybox pre{white-space:pre-wrap;font-family:var(--f-body);font-size:13px;line-height:1.95;color:#C4D3DF;}

/* ========== v3拡張: 抑揚・講師ゲート・演出 ========== */
/* 開始画面の呼吸 */
.gate{overflow:hidden;}
.gate::before{content:'';position:absolute;inset:-20%;background:radial-gradient(640px 440px at 50% 38%,rgba(18,169,206,.22),transparent 65%);animation:breathe 5.5s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}
.gate .in{position:relative;}
.gate .enter{box-shadow:0 0 0 0 rgba(18,169,206,.45);animation:ring 2.6s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes ring{70%{box-shadow:0 0 0 16px rgba(18,169,206,0);}100%{box-shadow:0 0 0 0 rgba(18,169,206,0);}}

/* ストリーミングカーソル */
.scaret{display:inline-block;width:2px;height:1.05em;background:var(--skin);vertical-align:-.15em;margin-left:2px;animation:caretB 1s step-end infinite;}
@keyframes caretB{0%,45%{opacity:1;}50%,100%{opacity:0;}}

/* 章スプラッシュ */
.chsp{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--dark3),var(--dark2));color:#fff;padding:26px 28px 24px;margin:8px 0 26px;animation:chspIn .7s cubic-bezier(.22,1,.36,1);}
@keyframes chspIn{from{opacity:0;transform:translateY(24px) scale(.985);}to{opacity:1;transform:none;}}
.chsp::before{content:'';position:absolute;inset:0;background:radial-gradient(620px 220px at 88% -30%,rgba(18,169,206,.4),transparent 70%);}
.chsp .cbig{position:absolute;right:10px;bottom:-30px;font-family:var(--f-disp);font-weight:800;font-size:118px;line-height:1;color:rgba(255,255,255,.055);}
.chsp .cno{position:relative;font-family:var(--f-disp);font-weight:800;font-size:11.5px;letter-spacing:.34em;color:var(--accent2);}
.chsp .ct2{position:relative;font-family:var(--f-disp);font-weight:800;font-size:clamp(21px,2.6vw,27px);line-height:1.45;margin-top:9px;}
.chsp .cs{position:relative;margin-top:7px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.66);letter-spacing:.02em;}

/* ELIZAタイム（教室が1966年に暗転） */
.chat{transition:background-color .9s ease;}
.app.crt .chat{background-color:#0A1A29;}
.app.crt .row .who{color:rgba(255,255,255,.6);}
.app.crt .row.coach .who{color:#fff;}
.app.crt .row.user .bub{box-shadow:0 0 0 1px rgba(255,255,255,.22);}
.app.crt .divider span{background:rgba(255,255,255,.09);color:rgba(255,255,255,.55);}
.app.crt .term{box-shadow:0 0 0 1px rgba(127,232,195,.16),0 0 42px rgba(127,232,195,.14);}
.app.crt .term .tbody{text-shadow:0 0 8px rgba(127,232,195,.5);}
.term .tbody{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);}

/* 講師ゲート（章の鍵） */
.gatecard{border:1.5px solid var(--line);border-radius:16px;margin:4px 0;background:linear-gradient(180deg,var(--light),var(--white) 70%);padding:28px 26px 22px;text-align:center;transition:border-color .4s;}
.gatecard.shake{animation:gshake .4s;}
@keyframes gshake{0%,100%{transform:none;}25%{transform:translateX(-8px);}50%{transform:translateX(6px);}75%{transform:translateX(-3px);}}
.gatecard .glock{width:54px;height:54px;border-radius:50%;background:var(--dark);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;transition:background .4s,transform .4s cubic-bezier(.34,1.56,.64,1);}
.gatecard .glock svg{width:22px;height:22px;}
.gatecard.open{border-color:var(--pos);}
.gatecard.open .glock{background:var(--pos);transform:scale(1.1);}
.gatecard .gt1{font-family:var(--f-disp);font-weight:800;font-size:17px;color:var(--dark);}
.gatecard .gt2{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.9;}
.gatecard .grow{display:flex;gap:10px;justify-content:center;margin-top:18px;}
.gatecard input{width:118px;text-align:center;font-family:var(--f-disp);font-weight:800;font-size:22px;letter-spacing:.34em;border:1.5px solid var(--line);border-radius:10px;padding:9px 0 9px .34em;color:var(--dark);outline:none;background:var(--white);}
.gatecard input:focus{border-color:var(--skin);}
.gatecard .gbtn{background:var(--dark);color:#fff;font-weight:800;font-family:var(--f-disp);font-size:14.5px;letter-spacing:.04em;border-radius:10px;padding:0 24px;transition:background .2s,transform .15s;}
.gatecard .gbtn:hover{background:var(--dark2);transform:translateY(-1px);}
.gatecard.open input,.gatecard.open .gbtn{pointer-events:none;opacity:.45;}
.gatecard .gerr{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--red);min-height:19px;}
.gatecard .gerr.ok{color:var(--pos);}

/* バッジトースト */
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-90px);background:var(--dark);color:#fff;border-radius:99px;padding:9px 22px 9px 12px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;letter-spacing:.02em;z-index:70;transition:transform .55s cubic-bezier(.22,1,.36,1);box-shadow:0 12px 32px rgba(15,43,70,.35);white-space:nowrap;max-width:min(92vw,560px);}
.toast.on{transform:translate(-50%,0);}
.toast .tx2{overflow:hidden;text-overflow:ellipsis;}
.toast .ti{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;}
.toast .ti svg{width:13px;height:13px;}

/* 紙吹雪 */
.cfx{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden;}
.cfx i{position:absolute;top:-24px;border-radius:2px;animation:cfall linear forwards;}
@keyframes cfall{to{transform:translateY(112vh) rotate(720deg);opacity:.2;}}

/* ボタンの押し心地・進捗バーの光 */
.cbtn:active{transform:translateY(0) scale(.96);}
.prog .bar{box-shadow:0 0 10px rgba(18,169,206,.5);}

/* 再開UI（進捗の永続化） */
.gate .fresh{display:none;margin-top:16px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:3px;letter-spacing:.04em;transition:color .2s;}
.gate .fresh:hover{color:rgba(255,255,255,.85);}

/* モバイル用 章ピル（サイドバー非表示時の全体像） */
.hd .mchip{display:none;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 10px;letter-spacing:.04em;flex:none;white-space:nowrap;}

/* ========== Phase B: 章ログ折りたたみ / 章ナビ / レビュー / ウィジェット ========== */
/* 章ログのまとまり（B-4: 完了章を章単位で折りたたむ） */
.chlog{margin:0 0 2px;}
.chlog-h{display:none;width:100%;align-items:center;gap:12px;background:var(--light);border:1px solid var(--line);border-radius:10px;padding:9px 16px;margin:8px 0;text-align:left;transition:background .15s;}
.chlog.done .chlog-h{display:flex;}
.chlog-h:hover{background:var(--line-soft);}
.chlog-h .chh-no{font-family:var(--f-disp);font-weight:800;font-size:11.5px;letter-spacing:.1em;color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:2px 8px;flex:none;}
.chlog-h .chh-t{font-size:13.5px;font-weight:700;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chlog-h .chh-ic{flex:none;width:14px;height:14px;position:relative;}
.chlog-h .chh-ic::before{content:'';position:absolute;left:2px;top:3px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;}
.chlog.collapsed .chh-ic::before{transform:rotate(-45deg);top:5px;}
.chlog.collapsed .chlog-body{display:none;}

/* 章ナビ（B-3: 到達済み章はサイドバーからジャンプ可能） */
.ch.nav{cursor:pointer;}
.ch.nav:hover{background:rgba(18,169,206,.12);}
.ch.nav:hover .nm{color:#fff;}

/* レビュー中バー */
.reviewbar{position:fixed;left:50%;bottom:88px;transform:translate(-50%,24px);opacity:0;pointer-events:none;background:var(--dark);color:#fff;border-radius:99px;padding:9px 12px 9px 20px;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;z-index:68;box-shadow:0 12px 32px rgba(15,43,70,.35);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s;}
.reviewbar.on{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.reviewbar .rvb-btn{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;border-radius:99px;padding:6px 16px;font-weight:800;font-size:12.5px;transition:all .15s;}
.reviewbar .rvb-btn:hover{background:var(--accent2);border-color:var(--accent2);}

/* ウィジェット共通ホスト */
.wgt{margin:2px 0 4px;}

/* chapter-quiz / judge-drill 共通の設問UI */
.wq-prog{padding:10px 20px 0;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);}
.wq-prog b{color:var(--dark);}
.wq .fq,.jd .fq{padding-top:8px;}
.wq-opts{display:flex;flex-direction:column;gap:8px;padding:8px 20px 4px;}
.wq-opt{text-align:left;border:1.5px solid var(--line);border-radius:10px;padding:11px 16px;font-size:14px;font-weight:600;color:var(--ink);background:var(--white);line-height:1.7;transition:all .15s;}
.wq-opt:hover:not(:disabled){border-color:var(--skin);color:var(--skin);}
.wq-opt:disabled{cursor:default;}
.wq-opt.correct{border-color:var(--pos);background:var(--pos-soft);color:var(--pos);font-weight:700;}
.wq-opt.wrong{border-color:var(--red);background:var(--red-soft);color:var(--red);}
.wq-exp{margin:10px 20px 14px;background:var(--light);border-radius:10px;padding:11px 16px;font-size:13.5px;line-height:1.9;color:var(--ink-soft);}
.wq-exp.good{background:var(--pos-soft);}
.wq-exp.bad{background:var(--red-soft);}
.wq-exp b{color:var(--dark);}

/* judge-drill */
.jd-claim{margin:12px 20px 4px;background:var(--light);border-radius:10px;padding:13px 16px;font-size:14.5px;line-height:1.85;color:var(--ink);}
.jd-claim .jd-q{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:5px;}
.jd-actions{display:flex;gap:10px;padding:10px 20px 2px;flex-wrap:wrap;}
.jd-btn[data-verb="trust"].on{background:var(--amber);border-color:var(--amber);color:#fff;}
.jd-btn[data-verb="verify"].on{background:var(--skin);border-color:var(--skin);color:#fff;}
.jd-streak{padding:4px 20px 14px;font-size:12.5px;font-weight:700;color:var(--muted);}
.jd-streak b{color:var(--skin);font-family:var(--f-disp);font-size:14px;}

/* approval-gate */
.ag-mail{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 20px 4px;background:var(--white);}
.ag-mh{background:var(--light);padding:11px 18px;border-bottom:1px solid var(--line);}
.ag-mrow{display:flex;gap:10px;font-size:12.5px;line-height:1.9;}
.ag-mk{width:48px;flex:none;font-weight:700;color:var(--muted);}
.ag-mv{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.ag-mb{padding:15px 18px;font-size:14px;line-height:1.95;color:var(--ink);}
.ag-hidden{color:transparent;font-size:1px;letter-spacing:0;}
.ag-hidden.shown{color:#8A3A00;background:var(--amber-soft);outline:1.5px dashed var(--amber);font-size:inherit;padding:0 3px;display:inline-block;margin-top:6px;line-height:1.7;}
.ag-try{margin:12px 20px 4px;background:var(--dark3);border-radius:10px;padding:13px 16px;font-size:13.5px;line-height:1.9;color:#D7E1EA;}
.ag-try b{color:var(--accent2);}
.ag-flag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--red);border-radius:5px;padding:1px 8px;margin-right:8px;vertical-align:1px;}
.ag-detail{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);}
.ag-actions{display:flex;gap:10px;padding:12px 20px 6px;flex-wrap:wrap;}
.ag-btn{border-radius:99px;padding:10px 24px;font-weight:800;font-size:14px;font-family:var(--f-disp);border:1.5px solid;transition:all .15s;}
.ag-approve{border-color:var(--line);color:var(--ink-soft);background:var(--white);}
.ag-approve:hover:not(:disabled){border-color:var(--amber);color:var(--amber-deep);}
.ag-reject{border-color:var(--dark);color:#fff;background:var(--dark);}
.ag-reject:hover:not(:disabled){background:var(--dark2);transform:translateY(-1px);}
.ag-btn:disabled{opacity:.45;cursor:default;}
.ag-reject.pulse{animation:agpulse 1.4s ease-in-out infinite;}
@keyframes agpulse{0%,100%{box-shadow:0 0 0 0 rgba(15,43,70,.4);}60%{box-shadow:0 0 0 8px rgba(15,43,70,0);}}
.ag-out{margin:8px 20px 14px;border-radius:10px;padding:13px 16px;font-size:14px;line-height:1.95;color:var(--ink);}
.ag-out.good{background:var(--pos-soft);border:1.5px solid var(--pos);}
.ag-out.bad{background:var(--red-soft);border:1.5px solid var(--red);}
.ag-out b{color:var(--dark);}

/* role-vote */
.rv-roles{display:flex;gap:8px;padding:10px 20px 2px;flex-wrap:wrap;}
.rv-role.on{background:var(--skin);border-color:var(--skin);color:#fff;}
.rv-panel{margin:10px 20px 6px;border-radius:10px;background:var(--light);padding:13px 16px;font-size:14px;line-height:1.95;color:var(--ink);min-height:48px;}
.rv-panel .rvc{font-weight:700;color:var(--dark);}
.rv-panel .rvr{margin-top:9px;color:var(--ink-soft);font-size:13px;}
.rv-vote{padding:6px 20px 4px;}
.rv-vote .rv-vq{font-family:var(--f-disp);font-weight:800;font-size:14.5px;color:var(--dark);margin:6px 0 10px;}
.rv-vote .rv-vbtns{display:flex;gap:10px;flex-wrap:wrap;}
.rv-result{margin:8px 20px 14px;background:var(--skin-soft);border-radius:10px;padding:13px 16px;font-size:13.5px;line-height:1.9;color:var(--dark);}
.rv-bars{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.rv-bar{display:flex;align-items:center;gap:10px;}
.rv-bl{width:78px;flex:none;font-size:12.5px;font-weight:700;color:var(--ink);}
.rv-bt{flex:1;height:18px;background:var(--white);border-radius:5px;overflow:hidden;}
.rv-bf{display:block;height:100%;background:var(--skin);border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.rv-bp{width:42px;flex:none;font-family:var(--f-disp);font-weight:800;font-size:12.5px;color:var(--skin);text-align:right;}
.rv-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.7;}

/* --- レスポンシブ --- */
@media (max-width:920px){
  .pledge,.ab{grid-template-columns:1fr;}
  .ba .k{width:72px;}
}
@media (max-width:920px){
  .side{display:none;}
  .hd{padding:0 18px;height:58px;}
  .hd .mlg{display:block;}
  .hd .mchip{display:inline-block;}
  .hd .chap small{display:none;}
  .hd .chap{font-size:14px;}
  .chat .col,.choices{padding-left:16px;padding-right:16px;}
  .choices.indent{padding-left:16px;}
  .row .bd{max-width:88%;}
  .dg-vs{grid-template-columns:1fr;}
  .inbar{padding:10px 14px 12px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}