/* ===================================================================
   MCP 指揮鏈 — 互動教材
   設計系統：近黑底 / 琥珀主色 / 紫色提示詞 / 青色資料
   =================================================================== */

:root{
  --bg:#08090B;
  --bg-1:#0E1014;
  --bg-2:#14171C;
  --bg-3:#1A1E25;
  --line:#22272F;
  --line-2:#2E343E;

  --tx:#E9ECF1;
  --tx-1:#A2ABB8;
  --tx-2:#6C7683;
  --tx-3:#4A525C;

  --am:#F2A03D;          /* 主色：琥珀 */
  --am-s:rgba(242,160,61,.10);
  --vi:#A98BFF;          /* 提示詞 */
  --vi-s:rgba(169,139,255,.10);
  --cy:#4FC3D9;          /* 資料 / 輸出 */
  --cy-s:rgba(79,195,217,.10);
  --gr:#5FCF8A;          /* 成功 */
  --gr-s:rgba(95,207,138,.10);
  --rd:#F26A6A;          /* 危險 */
  --rd-s:rgba(242,106,106,.10);
  --yl:#E0B341;          /* 警告 */
  --yl-s:rgba(224,179,65,.10);

  --mono:"SF Mono",ui-monospace,Consolas,"Cascadia Mono","Noto Sans TC",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",
         "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;

  --r:10px;
  --rs:6px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.85);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(242,160,61,.055), transparent 62%),
    radial-gradient(760px 460px at 8% 104%, rgba(169,139,255,.045), transparent 60%);
}
::selection{background:rgba(242,160,61,.28)}

/* ---- scrollbar ---- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:#3D4550}

/* ===================================================================
   LAYOUT
   =================================================================== */
.app{display:grid;grid-template-columns:286px 1fr;min-height:100vh;position:relative;z-index:1}

.rail{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:rgba(14,16,20,.72);
  backdrop-filter:blur(14px);
}
.rail-head{padding:22px 22px 16px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:baseline;gap:9px}
.logo b{font-size:19px;letter-spacing:.4px;font-weight:800}
.logo i{font-style:normal;color:var(--am)}
.logo-sub{font-size:11.5px;color:var(--tx-2);margin-top:5px;letter-spacing:.3px}

.rail-scroll{flex:1;overflow-y:auto;padding:12px 0 16px}
.rail-grp{padding:14px 22px 6px;font:600 10px/1 var(--mono);
  letter-spacing:1.6px;color:var(--tx-3);text-transform:uppercase}

.chapnav{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--tx-1);font-family:var(--sans);font-size:13.5px;cursor:pointer;
  padding:8px 22px 8px 20px;border-left:2px solid transparent;
  display:flex;gap:10px;align-items:center;transition:.16s}
.chapnav:hover{background:var(--bg-2);color:var(--tx)}
.chapnav.on{border-left-color:var(--am);color:var(--am);background:var(--am-s)}
.chapnav .n{font:700 10.5px/1 var(--mono);color:var(--tx-3);min-width:20px;letter-spacing:.5px}
.chapnav.on .n{color:var(--am)}
.chapnav .dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);margin-left:auto;flex:none}
.chapnav.done .dot{background:var(--gr)}

.rail-foot{border-top:1px solid var(--line);padding:14px 22px}
.pbar{height:4px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--am),var(--gr));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.pmeta{display:flex;justify-content:space-between;font:600 11px/1 var(--mono);color:var(--tx-2);margin-top:9px}
.reset{margin-top:11px;width:100%;background:none;border:1px solid var(--line);
  color:var(--tx-3);padding:6px;border-radius:var(--rs);font-size:11px;cursor:pointer;
  font-family:var(--sans);transition:.16s}
.reset:hover{border-color:var(--rd);color:var(--rd)}

.stage{min-width:0;padding:0 0 140px;position:relative}
.stage-in{max-width:940px;margin:0 auto;padding:0 40px}

@media(max-width:1080px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .rail-scroll{max-height:230px}
  .stage-in{padding:0 18px}
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{padding:96px 0 66px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);
  letter-spacing:2.2px;color:var(--am);text-transform:uppercase;margin-bottom:26px}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--am)}
.hero h1{font-size:clamp(38px,6.4vw,68px);line-height:1.05;letter-spacing:-1.6px;
  font-weight:850;margin-bottom:20px}
.hero h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--am),#FFD08A 55%,var(--vi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(16px,2.1vw,20px);color:var(--tx-1);max-width:660px;line-height:1.65}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  margin-top:44px;overflow:hidden}
.hstat{background:var(--bg-1);padding:18px 20px}
.hstat b{display:block;font:800 27px/1 var(--sans);color:var(--am);letter-spacing:-.5px}
.hstat span{display:block;font-size:12px;color:var(--tx-2);margin-top:7px;letter-spacing:.3px}

/* ===================================================================
   CHAPTER SHELL
   =================================================================== */
.chapter{display:none;padding-top:52px;animation:fade .34s cubic-bezier(.2,.8,.2,1)}
.chapter.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.chead{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:34px}
.chead .row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.chead .no{font:800 44px/1 var(--mono);color:var(--line-2);letter-spacing:-2px}
.chead h2{font-size:clamp(25px,3.6vw,36px);letter-spacing:-.7px;font-weight:800;line-height:1.18}
.chead .clock{font:600 11.5px/1 var(--mono);color:var(--tx-2);
  border:1px solid var(--line);padding:5px 11px;border-radius:20px;letter-spacing:.6px}
.chead .goal{color:var(--tx-1);font-size:15.5px;max-width:720px}

/* ---- stepper ---- */
.steprail{display:flex;gap:6px;margin-bottom:30px;flex-wrap:wrap}
.stepdot{flex:1;min-width:34px;height:3px;background:var(--bg-3);border-radius:2px;
  border:0;padding:0;cursor:pointer;transition:.22s;position:relative}
.stepdot:hover{background:var(--line-2)}
.stepdot.on{background:var(--am)}
.stepdot.past{background:rgba(95,207,138,.55)}

.step{display:none}
.step.on{display:block;animation:fade .3s cubic-bezier(.2,.8,.2,1)}
.step-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:22px}
.step-n{flex:none;width:33px;height:33px;border-radius:9px;background:var(--am-s);
  border:1px solid rgba(242,160,61,.34);color:var(--am);
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--mono);margin-top:2px}
.step-t{font-size:22px;font-weight:750;letter-spacing:-.35px;line-height:1.35}
.step-sub{font-size:13px;color:var(--tx-2);margin-top:4px;font-weight:400;letter-spacing:.2px}

.navrow{display:flex;gap:11px;align-items:center;margin-top:44px;
  padding-top:24px;border-top:1px solid var(--line)}
.btn{border:1px solid var(--line-2);background:var(--bg-2);color:var(--tx-1);
  padding:10px 20px;border-radius:var(--rs);font-family:var(--sans);font-size:14px;
  cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--tx-3);color:var(--tx);background:var(--bg-3)}
.btn[disabled]{opacity:.32;cursor:not-allowed}
.btn.primary{background:var(--am);border-color:var(--am);color:#1B1206;font-weight:700}
.btn.primary:hover{background:#FFB65C;border-color:#FFB65C}
.btn.ghost{background:none}
.navrow .spacer{flex:1}
.stepcount{font:600 11.5px/1 var(--mono);color:var(--tx-3);letter-spacing:.8px}

/* ===================================================================
   CONTENT BLOCKS
   =================================================================== */
.step p{color:var(--tx-1);margin-bottom:15px;font-size:15.5px}
.step p strong,.step li strong{color:var(--tx);font-weight:650}
.step h4{font-size:16px;font-weight:700;margin:30px 0 12px;color:var(--tx);
  display:flex;align-items:center;gap:10px}
.step h4::before{content:'';width:3px;height:15px;background:var(--am);border-radius:2px}

.ulist{list-style:none;margin:0 0 17px}
.ulist li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--tx-1);font-size:15px}
.ulist li::before{content:'';position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--am);opacity:.75}
.olist{counter-reset:o;list-style:none;margin:0 0 17px}
.olist li{counter-increment:o;position:relative;padding-left:30px;margin-bottom:9px;
  color:var(--tx-1);font-size:15px}
.olist li::before{content:counter(o);position:absolute;left:0;top:1px;
  font:700 11px/18px var(--mono);width:19px;height:19px;text-align:center;
  border:1px solid var(--line-2);border-radius:5px;color:var(--tx-2)}

kbd,.k{font:600 12.5px/1 var(--mono);background:var(--bg-3);border:1px solid var(--line-2);
  padding:2.5px 7px;border-radius:5px;color:var(--am);white-space:nowrap}

/* ---- code ---- */
.code{background:#05060899;border:1px solid var(--line);border-radius:var(--r);
  margin:16px 0;overflow:hidden;backdrop-filter:blur(3px)}
.code-hd{display:flex;align-items:center;gap:10px;padding:8px 13px;
  background:var(--bg-2);border-bottom:1px solid var(--line)}
.code-hd .lbl{font:600 10.5px/1 var(--mono);letter-spacing:1.3px;color:var(--tx-2);
  text-transform:uppercase}
.code-hd .sp{flex:1}
.cbtn{background:none;border:1px solid var(--line-2);color:var(--tx-2);
  padding:3.5px 11px;border-radius:5px;font:600 11px/1.4 var(--sans);cursor:pointer;transition:.16s}
.cbtn:hover{border-color:var(--am);color:var(--am)}
.cbtn.ok{border-color:var(--gr);color:var(--gr)}
.code pre{padding:15px 16px;overflow-x:auto;font-family:var(--mono);font-size:12.8px;
  line-height:1.72;color:#C4D0DC;white-space:pre;tab-size:2}
.code.vi{border-color:rgba(169,139,255,.32)}
.code.vi .code-hd{background:var(--vi-s)}
.code.vi .code-hd .lbl{color:var(--vi)}
.code.vi .cbtn:hover{border-color:var(--vi);color:var(--vi)}

/* token colors */
.t-cm{color:#5E6975}.t-st{color:#9BD79B}.t-kw{color:var(--vi)}
.t-fn{color:#7FC7E8}.t-nm{color:#E8B77A}.t-var{color:var(--am)}

/* ---- ascii art（僅限純 ASCII，不放中文） ---- */
.art{background:#050608;border:1px solid var(--line);border-radius:var(--r);
  padding:19px;overflow-x:auto;margin:17px 0}
.art pre{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--tx-1);white-space:pre}

/* ===================================================================
   CSS 圖表 — 取代 ASCII 框線圖
   中文在等寬字型下字寬不等於 2x 拉丁，字元畫的框線必歪。
   所有含中文的圖一律用下列元件排版。
   =================================================================== */

/* 分層架構圖 */
.dg{margin:20px 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-1);padding:22px 20px}
.dg-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.dg-box{flex:1 1 0;min-width:150px;max-width:280px;border:1px solid var(--line-2);
  background:var(--bg-2);border-radius:9px;padding:13px 15px;text-align:center;position:relative}
.dg-box .bt{font:600 9.5px/1 var(--mono);letter-spacing:1.5px;color:var(--tx-3);
  text-transform:uppercase;margin-bottom:7px}
.dg-box b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.1px;line-height:1.4}
.dg-box .sub{font-size:11.5px;color:var(--tx-2);margin-top:5px;line-height:1.5;
  font-family:var(--mono);word-break:break-all}
.dg-box ul{list-style:none;margin:8px 0 0;text-align:left;display:inline-block}
.dg-box ul li{font-size:12.5px;color:var(--tx-2);padding-left:13px;position:relative;line-height:1.75}
.dg-box ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--tx-3)}

.dg-box.hero{max-width:340px;border-color:var(--am);background:var(--am-s)}
.dg-box.hero b{color:var(--am)}
.dg-box.am{border-color:rgba(242,160,61,.42)}.dg-box.am .bt{color:var(--am)}
.dg-box.vi{border-color:rgba(169,139,255,.42)}.dg-box.vi .bt{color:var(--vi)}
.dg-box.cy{border-color:rgba(79,195,217,.42)}.dg-box.cy .bt{color:var(--cy)}
.dg-box.gr{border-color:rgba(95,207,138,.42)}.dg-box.gr .bt{color:var(--gr)}

.dg-arrow{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 0;color:var(--tx-3);font:600 10.5px/1 var(--mono);letter-spacing:1.3px}
.dg-arrow::before,.dg-arrow::after{content:'';height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.dg-arrow i{font-style:normal;color:var(--tx-2)}
.dg-fan{display:flex;justify-content:center;padding:4px 0}
.dg-fan span{width:1px;height:20px;background:var(--line-2)}

/* 流程圖（垂直步驟鏈） */
.fl{margin:20px 0}
.flr{display:flex;gap:15px;align-items:flex-start;position:relative;padding-bottom:16px}
.flr:last-child{padding-bottom:0}
.flr::before{content:'';position:absolute;left:15px;top:34px;bottom:-2px;width:1px;background:var(--line-2)}
.flr:last-child::before{display:none}
.flr .fi{flex:none;width:31px;height:31px;border-radius:8px;background:var(--bg-2);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font:700 9.5px/1 var(--mono);color:var(--tx-2);z-index:1;letter-spacing:.4px}
.flr.t .fi{border-color:var(--am);color:var(--am);background:var(--am-s)}
.flr.a .fi{border-color:var(--vi);color:var(--vi);background:var(--vi-s)}
.flr.w .fi{border-color:var(--cy);color:var(--cy);background:var(--cy-s)}
.flr.c .fi{border-color:var(--yl);color:var(--yl);background:var(--yl-s)}
.flr .fb{padding-top:3px;min-width:0}
.flr .fb b{display:block;font-size:14.8px;font-weight:650;letter-spacing:-.1px}
.flr .fb p{margin:4px 0 0;font-size:13.2px;color:var(--tx-2);line-height:1.6}
.flr .fb .br{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.flr .fb .br span{font-size:12.8px;color:var(--tx-2);padding-left:16px;position:relative}
.flr .fb .br span::before{content:'';position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--line-2)}
.flr .fb .br span b{display:inline;font-size:12.8px}
.flr .fb .br span.y b{color:var(--gr)}
.flr .fb .br span.n b{color:var(--rd)}

/* 兩欄對照（管得到 / 管不到） */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
@media(max-width:680px){.vs{grid-template-columns:1fr}}
.vs-col{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);overflow:hidden}
.vs-col .vh{padding:11px 16px;font:700 11px/1 var(--mono);letter-spacing:1.3px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.vs-col.y .vh{color:var(--gr);background:var(--gr-s)}
.vs-col.n .vh{color:var(--rd);background:var(--rd-s)}
.vs-col ul{list-style:none;margin:0;padding:13px 16px}
.vs-col li{font-size:13.8px;color:var(--tx-1);padding:4px 0 4px 16px;position:relative}
.vs-col li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%}
.vs-col.y li::before{background:var(--gr);opacity:.6}
.vs-col.n li::before{background:var(--rd);opacity:.6}
.vs-note{padding:11px 16px;border-top:1px solid var(--line);font-size:12.8px;color:var(--tx-2)}

/* 兩階段流程（查 → 建） */
.phase{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:20px 0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:760px){.phase{grid-template-columns:1fr}}
.ph{background:var(--bg-1)}
.ph:first-child{border-right:1px solid var(--line)}
@media(max-width:760px){.ph:first-child{border-right:0;border-bottom:1px solid var(--line)}}
.ph .phh{padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);
  font:700 11px/1 var(--mono);letter-spacing:1.5px}
.ph.q .phh{color:var(--cy);background:var(--cy-s)}
.ph.b .phh{color:var(--am);background:var(--am-s)}
.ph ol{list-style:none;margin:0;padding:14px 18px;counter-reset:p}
.ph li{counter-increment:p;position:relative;padding:7px 0 7px 30px;font-size:13.8px;color:var(--tx)}
.ph li::before{content:counter(p);position:absolute;left:0;top:9px;width:19px;height:19px;
  text-align:center;font:700 10.5px/18px var(--mono);border:1px solid var(--line-2);
  border-radius:5px;color:var(--tx-2)}
.ph li code{font:600 12.5px/1 var(--mono);color:var(--tx);background:none;padding:0}
.ph li em{display:block;font-style:normal;font-size:12.3px;color:var(--tx-2);margin-top:2px}
.ph li.key::before{border-color:var(--am);color:var(--am);background:var(--am-s)}
.ph li.key code{color:var(--am)}

/* ---- notes ---- */
.note{border:1px solid;border-radius:var(--r);padding:14px 17px 15px;margin:17px 0;
  font-size:14.5px;position:relative;overflow:hidden}
.note::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.note .nt{font-weight:700;font-size:13.5px;margin-bottom:6px;display:flex;gap:8px;
  align-items:center;letter-spacing:.2px}
.note .nt::before{font:700 10px/1 var(--mono);letter-spacing:1.4px;
  border:1px solid;padding:3px 7px;border-radius:4px}
.note p{margin:0;font-size:14.5px;color:var(--tx-1)}
.note p+p{margin-top:8px}
.note.danger{border-color:rgba(242,106,106,.35);background:var(--rd-s)}
.note.danger::before{background:var(--rd)}
.note.danger .nt{color:var(--rd)}.note.danger .nt::before{content:'危險'}
.note.warn{border-color:rgba(224,179,65,.35);background:var(--yl-s)}
.note.warn::before{background:var(--yl)}
.note.warn .nt{color:var(--yl)}.note.warn .nt::before{content:'注意'}
.note.info{border-color:rgba(79,195,217,.32);background:var(--cy-s)}
.note.info::before{background:var(--cy)}
.note.info .nt{color:var(--cy)}.note.info .nt::before{content:'觀念'}
.note.win{border-color:rgba(242,160,61,.42);
  background:linear-gradient(100deg,rgba(242,160,61,.13),rgba(95,207,138,.06))}
.note.win::before{background:var(--am)}
.note.win .nt{color:var(--am)}.note.win .nt::before{content:'成果'}
.note.ok{border-color:rgba(95,207,138,.32);background:var(--gr-s)}
.note.ok::before{background:var(--gr)}
.note.ok .nt{color:var(--gr)}.note.ok .nt::before{content:'備案'}

/* ---- table ---- */
.tbl{overflow-x:auto;margin:17px 0;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13.8px;min-width:430px}
th{background:var(--bg-2);text-align:left;padding:11px 14px;font-weight:700;
  color:var(--tx);border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px;
  letter-spacing:.4px}
td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--tx-1);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.018)}
td .g{color:var(--gr)}td .r{color:var(--rd)}td .y{color:var(--yl)}
td code,th code{font:600 12px/1 var(--mono);color:var(--am);background:var(--bg-3);
  padding:2px 6px;border-radius:4px}

/* ---- checks ---- */
.checks{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);
  padding:17px 19px;margin:22px 0}
.checks .ct{font:700 10.5px/1 var(--mono);letter-spacing:1.6px;color:var(--am);
  text-transform:uppercase;margin-bottom:13px}
.checks label{display:flex;gap:12px;align-items:flex-start;padding:7px 0;cursor:pointer;
  font-size:14.5px;color:var(--tx-1);transition:.14s}
.checks label:hover{color:var(--tx)}
.checks input{appearance:none;flex:none;width:18px;height:18px;border:1.5px solid var(--tx-3);
  border-radius:5px;margin-top:3px;cursor:pointer;position:relative;transition:.18s}
.checks input:hover{border-color:var(--am)}
.checks input:checked{background:var(--gr);border-color:var(--gr)}
.checks input:checked::after{content:'';position:absolute;left:5.5px;top:1.5px;
  width:4px;height:9px;border:solid #06120A;border-width:0 2px 2px 0;transform:rotate(43deg)}
.checks input:checked+span{color:var(--tx-3);text-decoration:line-through}

/* ===================================================================
   TRACK SWITCH
   =================================================================== */
.trackpick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
@media(max-width:700px){.trackpick{grid-template-columns:1fr}}
.tcard{border:1px solid var(--line);background:var(--bg-1);border-radius:var(--r);
  padding:20px;cursor:pointer;transition:.2s;text-align:left;font-family:var(--sans);position:relative}
.tcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tcard.on{border-color:var(--am);background:var(--am-s);box-shadow:var(--shadow)}
.tcard .tk{font:700 10px/1 var(--mono);letter-spacing:1.6px;color:var(--tx-3)}
.tcard.on .tk{color:var(--am)}
.tcard b{display:block;font-size:17.5px;margin:9px 0 7px;color:var(--tx);letter-spacing:-.2px}
.tcard p{font-size:13.5px;color:var(--tx-2);margin:0;line-height:1.6}
.tcard .mark{position:absolute;top:16px;right:16px;width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--line-2)}
.tcard.on .mark{border-color:var(--am);background:var(--am);box-shadow:inset 0 0 0 3.5px var(--bg-1)}

.tbadge{display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--mono);
  letter-spacing:1.4px;padding:5px 10px;border-radius:5px;margin-bottom:13px}
.tbadge.a{background:var(--am-s);color:var(--am);border:1px solid rgba(242,160,61,.3)}
.tbadge.b{background:var(--cy-s);color:var(--cy);border:1px solid rgba(79,195,217,.3)}
[data-track]{display:none}
[data-track].show{display:block}

/* ===================================================================
   SIMULATED TERMINAL
   =================================================================== */
.sim{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:20px 0;
  background:#05060A;box-shadow:var(--shadow)}
.sim-hd{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--bg-2);
  border-bottom:1px solid var(--line)}
.sim-hd .dots{display:flex;gap:5.5px}
.sim-hd .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.sim-hd .dots i:first-child{background:#F26A6A55}
.sim-hd .dots i:nth-child(2){background:#E0B34155}
.sim-hd .dots i:nth-child(3){background:#5FCF8A55}
.sim-hd .ttl{font:600 11px/1 var(--mono);color:var(--tx-2);letter-spacing:.9px;margin-left:5px}
.sim-hd .sp{flex:1}
.sim-body{padding:16px 17px;min-height:130px;max-height:440px;overflow-y:auto;
  font-family:var(--mono);font-size:12.9px;line-height:1.75}
.sim-line{margin-bottom:11px;animation:sl .3s ease}
@keyframes sl{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sl-user{color:var(--tx)}
.sl-user::before{content:'> ';color:var(--am);font-weight:700}
.sl-think{color:var(--tx-3);font-style:italic;font-size:12.2px}
.sl-think::before{content:'· ';color:var(--tx-3)}
.sl-tool{background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--cy);
  border-radius:0 6px 6px 0;padding:8px 12px;color:var(--cy);font-size:12.2px}
.sl-tool b{color:var(--tx);font-weight:600}
.sl-tool span{color:var(--tx-3);display:block;margin-top:3px;font-size:11.4px}
.sl-out{color:var(--tx-1);white-space:pre;overflow-x:auto;padding:2px 0}
.sl-reply{color:var(--tx);border-left:2px solid var(--am);padding-left:11px;white-space:pre-wrap}
.sl-err{color:var(--rd);border-left:2px solid var(--rd);padding-left:11px;white-space:pre-wrap}
.sim-caret{display:inline-block;width:7px;height:14px;background:var(--am);
  vertical-align:-2px;animation:bl .9s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.sim-foot{padding:10px 13px;border-top:1px solid var(--line);background:var(--bg-1);
  display:flex;gap:9px;align-items:center}
.sim-hint{font-size:11.5px;color:var(--tx-3);flex:1;font-family:var(--sans)}

/* ===================================================================
   TOOL PANELS (generator / linter / tree / builder)
   =================================================================== */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);
  margin:22px 0;overflow:hidden}
.panel-hd{padding:13px 17px;border-bottom:1px solid var(--line);background:var(--bg-2);
  display:flex;align-items:center;gap:11px}
.panel-hd b{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.panel-hd .tag{font:600 9.5px/1 var(--mono);letter-spacing:1.4px;color:var(--tx-3);
  border:1px solid var(--line-2);padding:4px 8px;border-radius:4px;margin-left:auto}
.panel-bd{padding:18px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font:600 10.5px/1 var(--mono);letter-spacing:1.1px;color:var(--tx-2);text-transform:uppercase}
.fld input,.fld select,.fld textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rs);
  padding:9px 12px;color:var(--tx);font-family:var(--mono);font-size:12.8px;transition:.16s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--am);
  box-shadow:0 0 0 3px var(--am-s)}
.fld textarea{resize:vertical;min-height:150px;line-height:1.65}
.fld .hint{font-size:11px;color:var(--tx-3)}

/* linter output */
.lint{margin-top:15px;display:flex;flex-direction:column;gap:7px}
.lrow{display:flex;gap:11px;align-items:flex-start;padding:10px 13px;border-radius:var(--rs);
  border:1px solid var(--line);background:var(--bg-2);font-size:13.5px;animation:sl .26s ease}
.lrow .ic{flex:none;width:17px;height:17px;border-radius:4px;margin-top:2px;
  font:800 10px/17px var(--mono);text-align:center}
.lrow.err{border-color:rgba(242,106,106,.4)}
.lrow.err .ic{background:var(--rd);color:#2A0808}
.lrow.wrn{border-color:rgba(224,179,65,.4)}
.lrow.wrn .ic{background:var(--yl);color:#2A2008}
.lrow.ok{border-color:rgba(95,207,138,.34)}
.lrow.ok .ic{background:var(--gr);color:#05200E}
.lrow b{color:var(--tx);display:block;font-weight:650}
.lrow span{color:var(--tx-2);font-size:12.6px;display:block;margin-top:2px}
.lrow code{font:600 12px/1 var(--mono);color:var(--am)}

/* diagnostic tree */
.tree-q{font-size:17.5px;font-weight:700;margin-bottom:16px;letter-spacing:-.2px;line-height:1.45}
.tree-opts{display:flex;flex-direction:column;gap:9px}
.topt{text-align:left;background:var(--bg-2);border:1px solid var(--line);color:var(--tx-1);
  padding:13px 16px;border-radius:var(--rs);cursor:pointer;font-family:var(--sans);
  font-size:14.5px;transition:.16s;display:flex;align-items:center;gap:12px}
.topt:hover{border-color:var(--am);color:var(--tx);background:var(--bg-3);transform:translateX(3px)}
.topt .ar{margin-left:auto;color:var(--tx-3);font-family:var(--mono);font-size:13px}
.topt:hover .ar{color:var(--am)}
.tree-ans{border-left:3px solid var(--gr);padding:4px 0 4px 17px;animation:fade .3s}
.tree-ans .h{font-size:17px;font-weight:700;color:var(--gr);margin-bottom:9px}
.tree-crumb{font:600 11px/1.7 var(--mono);color:var(--tx-3);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}

/* prompt builder */
.pb-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chip{background:var(--bg-2);border:1px solid var(--line);color:var(--tx-2);
  padding:7px 14px;border-radius:20px;font-size:13px;cursor:pointer;
  font-family:var(--sans);transition:.16s;user-select:none}
.chip:hover{border-color:var(--line-2);color:var(--tx-1)}
.chip.on{background:var(--vi-s);border-color:var(--vi);color:var(--vi);font-weight:600}
.pb-grp{margin-bottom:17px}
.pb-grp .gl{font:600 10.5px/1 var(--mono);letter-spacing:1.3px;color:var(--tx-2);
  text-transform:uppercase;margin-bottom:9px}

/* ===================================================================
   JSON ANATOMY
   =================================================================== */
.anat{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:22px 0;background:var(--bg-1)}
@media(max-width:900px){.anat{grid-template-columns:1fr}}
.anat-code{background:#050608;border-right:1px solid var(--line);
  max-height:520px;overflow:auto;padding:15px 0}
@media(max-width:900px){.anat-code{border-right:0;border-bottom:1px solid var(--line);max-height:340px}}
.jl{display:flex;font-family:var(--mono);font-size:12.4px;line-height:1.78;
  padding:0 15px;white-space:pre;cursor:default}
.jl .ln{flex:none;width:26px;color:var(--tx-3);opacity:.5;user-select:none;text-align:right;
  margin-right:13px;font-size:11px}
.jl.hot{cursor:pointer;transition:background .14s}
.jl.hot:hover{background:rgba(242,160,61,.10)}
.jl.sel{background:rgba(242,160,61,.16);box-shadow:inset 2px 0 0 var(--am)}
.jl.trap .cd{border-bottom:1px dashed rgba(242,106,106,.55)}
.anat-info{padding:19px;overflow-y:auto;max-height:520px}
@media(max-width:900px){.anat-info{max-height:none}}
.anat-empty{color:var(--tx-3);font-size:13.5px;text-align:center;padding:44px 12px;line-height:1.8}
.ai-key{font:700 11px/1 var(--mono);letter-spacing:1.2px;color:var(--am);
  text-transform:uppercase;margin-bottom:10px}
.ai-h{font-size:17px;font-weight:750;margin-bottom:10px;letter-spacing:-.2px;line-height:1.4}
.anat-info p{font-size:14px;color:var(--tx-1);margin-bottom:11px;line-height:1.7}
.ai-trap{border:1px solid rgba(242,106,106,.35);background:var(--rd-s);border-radius:var(--rs);
  padding:11px 13px;font-size:13.2px;color:var(--tx-1);margin-top:12px}
.ai-trap b{color:var(--rd);display:block;margin-bottom:4px;font-size:12px;
  font-family:var(--mono);letter-spacing:1.1px}

/* workflow graph */
.wf{display:flex;flex-direction:column;gap:0;margin:20px 0}
.wfn{display:flex;gap:14px;align-items:flex-start;position:relative;padding:11px 0}
.wfn .ic{flex:none;width:38px;height:38px;border-radius:9px;background:var(--bg-2);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--mono);color:var(--tx-2);letter-spacing:.5px;z-index:1}
.wfn.trig .ic{border-color:var(--am);color:var(--am);background:var(--am-s)}
.wfn.ai .ic{border-color:var(--vi);color:var(--vi);background:var(--vi-s)}
.wfn.act .ic{border-color:var(--cy);color:var(--cy);background:var(--cy-s)}
.wfn.cond .ic{border-color:var(--yl);color:var(--yl);background:var(--yl-s)}
.wfn::after{content:'';position:absolute;left:19px;top:47px;bottom:-11px;width:1px;
  background:var(--line-2)}
.wfn:last-child::after{display:none}
.wfn .bd b{display:block;font-size:14.8px;font-weight:650;letter-spacing:-.1px}
.wfn .bd code{font:600 11.5px/1 var(--mono);color:var(--tx-3);background:none;padding:0}
.wfn .bd p{font-size:13.2px;color:var(--tx-2);margin:5px 0 0}

/* ===================================================================
   PICK — 選擇題 / 決策練習
   =================================================================== */
.pick{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);
  margin:22px 0;overflow:hidden}
.pick-hd{padding:15px 19px 13px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.pick-hd .qk{font:700 9.5px/1 var(--mono);letter-spacing:1.6px;color:var(--vi);
  text-transform:uppercase;margin-bottom:8px;display:block}
.pick-hd .q{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.5}
.pick-bd{padding:15px 19px 19px;display:flex;flex-direction:column;gap:9px}
.po{text-align:left;background:var(--bg-2);border:1px solid var(--line);color:var(--tx-1);
  padding:13px 16px;border-radius:var(--rs);cursor:pointer;font-family:var(--sans);
  font-size:14.5px;transition:.18s;display:flex;gap:13px;align-items:flex-start;line-height:1.6}
.po:hover:not(.locked){border-color:var(--line-2);background:var(--bg-3);color:var(--tx)}
.po .pm{flex:none;width:21px;height:21px;border-radius:6px;border:1.5px solid var(--tx-3);
  font:700 10px/18px var(--mono);text-align:center;color:var(--tx-3);margin-top:1px;transition:.18s}
.po.locked{cursor:default}
.po.right{border-color:var(--gr);background:var(--gr-s);color:var(--tx)}
.po.right .pm{border-color:var(--gr);background:var(--gr);color:#06180C}
.po.wrong{border-color:var(--rd);background:var(--rd-s)}
.po.wrong .pm{border-color:var(--rd);background:var(--rd);color:#210606}
.po.dim{opacity:.4}
.pick-fb{margin:0 19px 19px;padding:14px 17px;border-radius:var(--rs);
  border:1px solid;font-size:14.3px;line-height:1.7;animation:fade .3s}
.pick-fb.good{border-color:rgba(95,207,138,.38);background:var(--gr-s)}
.pick-fb.bad{border-color:rgba(242,106,106,.38);background:var(--rd-s)}
.pick-fb b{display:block;margin-bottom:6px;font-size:13px;font-family:var(--mono);letter-spacing:1.1px}
.pick-fb.good b{color:var(--gr)}
.pick-fb.bad b{color:var(--rd)}
.pick-fb p{margin:0;color:var(--tx-1);font-size:14.3px}
.pick-fb p+p{margin-top:8px}
.pick-again{margin:0 19px 19px}

/* ===================================================================
   CHALLENGE — 找出程式碼裡的錯
   =================================================================== */
.chal{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin:22px 0;background:var(--bg-1)}
.chal-hd{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-2);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chal-hd b{font-size:15px;font-weight:700}
.chal-hd .sc{margin-left:auto;font:700 11.5px/1 var(--mono);letter-spacing:1.1px;
  color:var(--tx-2);border:1px solid var(--line-2);padding:5px 11px;border-radius:5px}
.chal-hd .sc.win{border-color:var(--gr);color:var(--gr);background:var(--gr-s)}
.chal-code{background:#050608;padding:14px 0;max-height:420px;overflow:auto}
.cl{display:flex;font-family:var(--mono);font-size:12.5px;line-height:1.85;
  padding:0 16px;white-space:pre;cursor:pointer;transition:background .14s;position:relative}
.cl .ln{flex:none;width:24px;color:var(--tx-3);opacity:.45;user-select:none;
  text-align:right;margin-right:13px;font-size:11px}
.cl:hover{background:rgba(255,255,255,.045)}
.cl.hit{background:rgba(95,207,138,.15);box-shadow:inset 2px 0 0 var(--gr)}
.cl.miss{background:rgba(242,106,106,.12);box-shadow:inset 2px 0 0 var(--rd);
  animation:shake .34s}
.cl.shown{background:rgba(224,179,65,.13);box-shadow:inset 2px 0 0 var(--yl)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.chal-out{padding:0 18px 4px;display:flex;flex-direction:column;gap:8px}
.chal-out:empty{padding:0}
.cfx{border:1px solid rgba(95,207,138,.32);background:var(--gr-s);border-radius:var(--rs);
  padding:11px 14px;font-size:13.6px;animation:fade .3s;line-height:1.65}
.cfx b{color:var(--gr);font:700 11px/1 var(--mono);letter-spacing:1.1px;
  display:block;margin-bottom:5px}
.cfx code{font:600 12px/1 var(--mono);color:var(--am)}
.chal-ft{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.chal-ft .hint{font-size:12.3px;color:var(--tx-3);flex:1;min-width:180px}

/* ===================================================================
   COMMAND PALETTE
   =================================================================== */
.pal-bd{position:fixed;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(5px);
  z-index:200;display:none;align-items:flex-start;justify-content:center;padding:11vh 20px 20px}
.pal-bd.on{display:flex;animation:fade .18s}
.pal{width:100%;max-width:620px;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:13px;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);overflow:hidden}
.pal input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  padding:17px 20px;color:var(--tx);font-size:16px;font-family:var(--sans)}
.pal input:focus{outline:none}
.pal input::placeholder{color:var(--tx-3)}
.pal-list{max-height:52vh;overflow-y:auto;padding:7px}
.pal-i{display:flex;gap:13px;align-items:center;padding:10px 14px;border-radius:8px;
  cursor:pointer;transition:.12s}
.pal-i:hover,.pal-i.cur{background:var(--bg-3)}
.pal-i.cur{box-shadow:inset 2px 0 0 var(--am)}
.pal-i .pi{flex:none;font:700 9.5px/1 var(--mono);letter-spacing:1.1px;color:var(--tx-3);
  border:1px solid var(--line-2);padding:4px 7px;border-radius:4px;min-width:34px;text-align:center}
.pal-i.cur .pi{border-color:var(--am);color:var(--am)}
.pal-i .pt{min-width:0;flex:1}
.pal-i .pt b{display:block;font-size:14px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pal-i .pt span{display:block;font-size:11.8px;color:var(--tx-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pal-empty{padding:34px 20px;text-align:center;color:var(--tx-3);font-size:13.5px}
.pal-ft{border-top:1px solid var(--line);padding:9px 18px;display:flex;gap:16px;
  font:600 10.5px/1 var(--mono);color:var(--tx-3);letter-spacing:.7px;flex-wrap:wrap}
.pal-ft kbd{font-size:10px;padding:2px 5px;color:var(--tx-2)}

/* 開啟 palette 的按鈕 */
.searchbtn{margin:12px 22px 4px;width:calc(100% - 44px);display:flex;align-items:center;
  gap:9px;background:var(--bg-2);border:1px solid var(--line);color:var(--tx-3);
  padding:8px 12px;border-radius:8px;font-size:12.5px;cursor:pointer;
  font-family:var(--sans);transition:.16s}
.searchbtn:hover{border-color:var(--line-2);color:var(--tx-1)}
.searchbtn kbd{margin-left:auto;font-size:10px;padding:2px 6px}

/* ===================================================================
   RESUME BANNER
   =================================================================== */
.resume{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(242,160,61,.35);background:var(--am-s);border-radius:var(--r);
  padding:14px 18px;margin:26px 0 0;animation:fade .4s}
.resume .rt{flex:1;min-width:200px;font-size:14.2px;color:var(--tx-1)}
.resume .rt b{color:var(--am);font-weight:700}

/* ===================================================================
   MOBILE DRAWER
   =================================================================== */
.mtop{display:none;position:sticky;top:0;z-index:60;align-items:center;gap:13px;
  padding:11px 16px;background:rgba(14,16,20,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.mtop .mb{background:none;border:1px solid var(--line-2);border-radius:7px;
  width:36px;height:33px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;flex:none}
.mtop .mb span{display:block;width:15px;height:1.5px;background:var(--tx-1);border-radius:2px}
.mtop .mt{min-width:0;flex:1}
.mtop .mt b{display:block;font-size:14px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mtop .mt span{display:block;font:600 10.5px/1.5 var(--mono);color:var(--tx-3)}
.mtop .ms{background:none;border:1px solid var(--line-2);border-radius:7px;
  width:36px;height:33px;cursor:pointer;color:var(--tx-2);font-size:14px;flex:none}

@media(max-width:1080px){
  .mtop{display:flex}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:0;left:0;bottom:0;width:290px;z-index:120;
    transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    border-right:1px solid var(--line);border-bottom:0;height:100vh;
    background:var(--bg-1);box-shadow:0 0 60px rgba(0,0,0,.7)}
  .rail.open{transform:none}
  .rail-scroll{max-height:none}
  .scrim{position:fixed;inset:0;background:rgba(4,5,7,.66);z-index:110;
    opacity:0;pointer-events:none;transition:.28s}
  .scrim.on{opacity:1;pointer-events:auto}
  .hero{padding:44px 0 40px}
}
.scrim{display:none}
@media(max-width:1080px){.scrim{display:block}}

/* ---- toast ---- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--tx);color:var(--bg);padding:11px 24px;border-radius:9px;
  font-weight:700;font-size:13.5px;opacity:0;transition:.32s cubic-bezier(.2,.8,.2,1);
  z-index:99;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.foot{border-top:1px solid var(--line);margin-top:70px;padding:30px 0;
  color:var(--tx-3);font-size:12.5px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px}
.foot code{font-family:var(--mono);color:var(--tx-2)}