:root{
  --bg:#f5f6fa; --card:#ffffff; --ink:#1b1f2e; --soft:#626a80; --line:#e1e4ee;
  --pri:#3d4fd6; --pri-soft:#e8ebfb; --pri-ink:#2b3aa8;
  --amb:#e8962e; --amb-soft:#fdf0dc;
  --ok:#1f9d63; --ok-soft:#e3f5ec; --bad:#d2402f; --bad-soft:#fbe6e3; --seal:#d2402f;
  --grey:#6b7280; --grey-soft:#eceef3;
  --term-bg:#171a26; --term-text:#d7dbea; --term-dim:#7d869f; --term-ok:#8fd694; --term-bad:#ff9d8a; --term-head:#1f2333;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151824; --card:#1e2233; --ink:#e8eaf3; --soft:#9aa3ba; --line:#2e3448;
    --pri:#7d8cff; --pri-soft:#262c4a; --pri-ink:#aab4ff;
    --amb:#f2a94a; --amb-soft:#3a2d18;
    --ok:#4cc38a; --ok-soft:#1d3328; --bad:#f07a6b; --bad-soft:#3d2320; --seal:#f07a6b;
    --grey:#9aa3ba; --grey-soft:#2a2f40;
  }
}
:root[data-theme="dark"]{
  --bg:#151824; --card:#1e2233; --ink:#e8eaf3; --soft:#9aa3ba; --line:#2e3448;
  --pri:#7d8cff; --pri-soft:#262c4a; --pri-ink:#aab4ff;
  --amb:#f2a94a; --amb-soft:#3a2d18;
  --ok:#4cc38a; --ok-soft:#1d3328; --bad:#f07a6b; --bad-soft:#3d2320; --seal:#f07a6b;
  --grey:#9aa3ba; --grey-soft:#2a2f40;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:"Noto Sans TC",system-ui,sans-serif;line-height:1.75;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px}
code{font-family:"JetBrains Mono",Consolas,monospace;font-size:.88em;background:var(--grey-soft);padding:1px 6px;border-radius:5px}
.dim{color:var(--soft);font-size:.85rem}

/* ===== 站頭 ===== */
header.site{display:flex;align-items:center;gap:14px;padding:18px 0 12px;border-bottom:2px solid var(--line);flex-wrap:wrap;position:sticky;top:0;background:var(--bg);z-index:50}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:.04em;cursor:pointer}
.logo em{font-style:normal;color:var(--pri)}
nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.navbtn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:5px 15px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.navbtn:hover{border-color:var(--pri)}
.navbtn.on{background:var(--pri);border-color:var(--pri);color:#fff}
.navbtn .done-dot{color:var(--ok);margin-left:4px}
.navbtn.on .done-dot{color:#fff}

section.page{display:none}
section.page.show{display:block}
@media (prefers-reduced-motion:no-preference){
  section.page.show{animation:pagein .35s ease both}
  @keyframes pagein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
.crumb{margin:18px 0 0;color:var(--soft);font-size:.85rem}
h1{font-weight:900;font-size:clamp(1.5rem,4vw,2.2rem);margin:.2em 0 .3em;text-wrap:balance;line-height:1.3}
.lede{max-width:46em;color:var(--soft);margin:0 0 8px}
.lede b,.note b{color:var(--ink)}
h2{font-weight:800;font-size:1.2rem;margin:2.2em 0 .5em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2::before{content:"";width:12px;height:12px;background:var(--pri);border-radius:3px;flex:none}
h2 .ref{font-size:.72rem;font-weight:700;color:var(--soft);border:1px solid var(--line);border-radius:99px;padding:1px 10px;letter-spacing:.05em}
p.note{font-size:.9rem;color:var(--soft);max-width:60em}

/* ===== 首頁 ===== */
.hero{text-align:center;padding:40px 0 6px}
.eyebrow{color:var(--pri);font-weight:700;letter-spacing:.12em;font-size:.82rem;margin:0}
.hero h1{font-size:clamp(1.7rem,4.6vw,2.5rem)}
.hero p{color:var(--soft);max-width:40em;margin:0 auto}
.hero p b{color:var(--ink)}
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media (max-width:820px){.topics{grid-template-columns:1fr}}
.topic{border:1.5px solid var(--line);border-radius:16px;background:var(--card);padding:22px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.topic:hover{border-color:var(--pri);transform:translateY(-4px);box-shadow:0 10px 24px rgba(40,50,120,.12)}
.topic .ico{font-size:2rem}
.topic h3{margin:.4em 0 .2em;font-size:1.1rem}
.topic p{font-size:.86rem;color:var(--soft);margin:0}
.topic .stamp{position:absolute;top:12px;right:12px;width:46px;height:46px;border:3px solid var(--seal);color:var(--seal);border-radius:50%;display:none;align-items:center;justify-content:center;font-weight:900;font-size:.72rem;transform:rotate(-12deg)}
.topic.done .stamp{display:flex}
.topic .go{display:inline-block;margin-top:12px;font-weight:700;color:var(--pri);font-size:.88rem}
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.gcard{border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;cursor:pointer;transition:all .2s;min-height:96px}
.gcard:hover{border-color:var(--pri)}
.gcard b{display:block;font-size:.95rem}
.gcard .term{font-size:.72rem;color:var(--pri);font-weight:700;letter-spacing:.06em;font-family:"JetBrains Mono",monospace}
.gcard small{display:block;color:var(--soft);font-size:.8rem;line-height:1.5;margin-top:4px}
.gcard.open{border-color:var(--pri);background:var(--pri-soft)}

/* ===== 版面通用 ===== */
.lane2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:14px}
.lane2.tight{grid-template-columns:1.4fr 1fr}
@media (max-width:820px){.lane2,.lane2.tight{grid-template-columns:1fr}}
.side{display:grid;gap:12px;align-content:start}
.panel{background:var(--card);border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.panel.agent{border-color:color-mix(in srgb,var(--pri) 50%,var(--line))}
.panel-h{padding:9px 14px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel.agent .panel-h{background:var(--pri-soft)}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:2px 9px;border-radius:99px}
.tag.grey{background:var(--grey-soft);color:var(--grey)}
.tag.pri{background:var(--pri);color:#fff}
.memo{margin-left:auto;font-size:.75rem;color:var(--soft);display:flex;align-items:center;gap:6px}
.membar{display:inline-block;width:80px;height:8px;border:1px solid var(--line);border-radius:6px;overflow:hidden;vertical-align:middle}
.membar b{display:block;height:100%;width:0;background:var(--pri);transition:width .4s}
.stat{border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px}
.stat small{display:block;color:var(--soft);font-size:.78rem}
.stat b{font-size:2rem;font-variant-numeric:tabular-nums;color:var(--pri)}
.stat-inline{font-size:.8rem;color:var(--soft);margin-left:auto}
.stat-inline b{color:var(--pri);font-variant-numeric:tabular-nums}
.fe-exp{margin-top:12px;font-size:.9rem;color:var(--soft);border-left:3px solid var(--pri);padding-left:12px;min-height:2.4em}
.fe-exp b{color:var(--ink)}
.switchrow{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;user-select:none}
.switchrow.inline{display:inline-flex}
.switchrow input{position:absolute;opacity:0;width:0;height:0}
.switchrow .sw{width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switchrow .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switchrow input:checked+.sw{background:var(--pri)}
.switchrow input:checked+.sw::after{transform:translateX(18px)}
.toolbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.toolbtn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 16px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .2s}
.toolbtn:hover{border-color:var(--pri)}
.toolbtn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.toolbtn.danger{border-color:var(--bad);color:var(--bad)}
.toolbtn:disabled{opacity:.4;cursor:not-allowed}
.chipbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);align-items:center}
.chip{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:5px 14px;font-size:.85rem;cursor:pointer;font-family:inherit;transition:all .2s;text-align:left}
.chip:hover{border-color:var(--pri)}
.chip.pri{border-color:var(--pri);color:var(--pri-ink);font-weight:700}
.chip.warn{border-color:var(--amb);color:var(--amb)}
.chip:disabled{opacity:.35;cursor:not-allowed}
.chipbar input,.askrow input{flex:1;min-width:10em;border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;font-family:inherit;font-size:.9rem;background:var(--card);color:var(--ink)}
.askrow{display:flex;gap:8px;margin-top:10px}
.askrow button{border:none;background:var(--pri);color:#fff;border-radius:10px;padding:8px 16px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.sel{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:.9rem;background:var(--card);color:var(--ink)}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:var(--card);color:var(--ink);padding:8px 14px;font-family:inherit;font-size:.86rem;cursor:pointer}
.seg button.on{background:var(--pri);color:#fff;font-weight:700}

/* ===== 聊天 ===== */
.chat{padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:180px;max-height:360px;overflow-y:auto;scroll-behavior:smooth}
.chat.tall{min-height:300px;max-height:440px}
.chat .sys{text-align:center;color:var(--soft);font-size:.76rem;margin:2px 0}
.bub{max-width:92%;border-radius:14px;padding:8px 12px;font-size:.9rem;line-height:1.6;position:relative}
.bub small{display:block;font-size:.7rem;color:var(--soft);font-weight:700;letter-spacing:.04em;margin-bottom:2px}
.bub.me{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:4px}
.bub.me small{color:rgba(255,255,255,.8)}
.bub.ai{align-self:flex-start;background:var(--grey-soft);border-bottom-left-radius:4px}
.bub.tool{align-self:flex-start;background:var(--term-bg);color:var(--term-text);font-family:"JetBrains Mono",Consolas,monospace;font-size:.78rem;border-left:3px solid var(--amb);white-space:pre-wrap;word-break:break-all}
.bub.tool small{color:var(--amb)}
.bub.tool .ok{color:var(--term-ok)} .bub.tool .bad{color:var(--term-bad)}
.bub.warn{align-self:stretch;background:var(--bad-soft);border:1.5px solid var(--bad);color:var(--ink)}
.bub.good{align-self:stretch;background:var(--ok-soft);border:1.5px solid var(--ok);color:var(--ink)}
.bub.note{align-self:stretch;background:var(--amb-soft);border:1.5px dashed var(--amb);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .bub{animation:bubin .25s ease both}
  @keyframes bubin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ===== 步驟軌道(對照 2)===== */
.steps{list-style:none;margin:0;padding:14px;display:grid;gap:8px}
.steps li{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.9rem;display:flex;gap:10px;align-items:center;color:var(--soft);transition:all .25s;background:var(--bg)}
.steps li .n{width:1.6em;height:1.6em;border-radius:50%;background:var(--grey-soft);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex:none}
.steps li.on{border-color:var(--pri);color:var(--ink);background:var(--pri-soft)}
.steps li.on .n{background:var(--pri);color:#fff}
.steps li.ok{border-color:var(--ok);color:var(--ink)}
.steps li.ok .n{background:var(--ok);color:#fff}
.steps li.fail{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.steps li.fail .n{background:var(--bad);color:#fff}
.steps.loop li:last-child{border-style:dashed}
.lanelog{border-top:1px solid var(--line);padding:10px 14px;font-family:"JetBrains Mono",Consolas,monospace;font-size:.78rem;line-height:1.8;min-height:96px;color:var(--soft);white-space:pre-wrap}
.lanelog .okx{color:var(--ok);font-weight:700}.lanelog .badx{color:var(--bad);font-weight:700}.lanelog .think{color:var(--pri-ink)}

/* ===== 記分板(對照 3)===== */
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media (max-width:820px){.scoreboard{grid-template-columns:1fr}}
.score{border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;opacity:.5;transition:all .3s}
.score.lit{opacity:1;border-color:var(--pri)}
.score b{display:block}
.score span{display:flex;gap:10px;font-size:.85rem}
.score em{font-style:normal;font-weight:700}
.score em.no{color:var(--grey)} .score em.yes{color:var(--pri)}
.score small{color:var(--soft);font-size:.76rem}

/* ===== 自主光譜(對照 4)===== */
.spectrum{margin-top:14px;padding:0 6px}
.spectrum input[type=range]{width:100%;accent-color:var(--pri);cursor:pointer}
.ticks{display:grid;grid-template-columns:repeat(5,1fr);font-size:.76rem;color:var(--soft);text-align:center;margin-top:2px}
.ticks span{cursor:pointer}
.ticks span.on{color:var(--pri);font-weight:700}
.ticks span.home{text-decoration:underline dotted}
.meter{border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px}
.meter small{display:block;color:var(--soft);font-size:.78rem;margin-bottom:6px}
.meter small b{color:var(--ink)} .meter small em{font-style:normal;color:var(--amb);font-weight:700}
.bar{height:12px;border-radius:6px;background:var(--grey-soft);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--pri);transition:width .5s ease}
.bar.amber i{background:var(--amb)} .bar.ok i{background:var(--ok)}
.pick{border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px}
.pick small{display:block;color:var(--soft);font-size:.8rem;margin-bottom:6px}
.pickbtns{display:flex;gap:6px;flex-wrap:wrap}
.pickbtns button{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:3px 12px;font-size:.82rem;cursor:pointer;font-family:inherit}
.pickbtns button.on{background:var(--pri);border-color:var(--pri);color:#fff}

/* ===== 驗收、印章、測驗、故事 ===== */
.missions{border:1.5px solid var(--line);border-left:5px solid var(--pri);border-radius:12px;background:var(--card);padding:16px 20px;margin-top:26px}
.missions h3{margin:0 0 8px;font-size:1rem}
.mi{display:flex;gap:10px;align-items:baseline;padding:4px 0;color:var(--soft);font-size:.92rem}
.mi.done{color:var(--ink)}
.mi .box{font-weight:900;color:var(--line)}
.mi.done .box{color:var(--ok)}
.finish{margin-top:14px;padding:10px 26px;border-radius:10px;border:none;background:var(--line);color:var(--soft);font-weight:700;font-size:.95rem;cursor:not-allowed;font-family:inherit}
.finish.ready{background:var(--seal);color:#fff;cursor:pointer}
.sealed{display:none;margin-top:14px;align-items:center;gap:12px}
.sealed.show{display:flex}
.seal{width:74px;height:74px;border:4px solid var(--seal);color:var(--seal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;transform:rotate(-12deg);letter-spacing:.1em;flex:none;background:var(--card)}
@media (prefers-reduced-motion:no-preference){
  .sealed.show .seal{animation:stamp .35s cubic-bezier(.2,2.2,.4,1) both}
  @keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}
}
.quiz{border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:16px 20px;margin-top:14px}
.quiz p.q{font-weight:700;margin:0 0 8px}
.qopts{display:grid;gap:8px}
.qopt{text-align:left;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 14px;cursor:pointer;font-family:inherit;font-size:.92rem;color:var(--ink)}
.qopt.right{border-color:var(--ok);background:var(--ok-soft);font-weight:700}
.qopt.wrong{border-color:var(--bad);opacity:.7}
.expl{display:none;margin:10px 0 0;font-size:.88rem;color:var(--soft);border-top:1px dashed var(--line);padding-top:8px}
.expl b{color:var(--ink)}
.expl.show{display:block}
.storybox{border:1.5px solid var(--line);border-radius:16px;background:var(--card);padding:26px 26px 20px;margin-top:16px;text-align:center;position:relative;overflow:hidden}
.storybox::before{content:"故事";position:absolute;top:10px;left:14px;font-size:.7rem;letter-spacing:.2em;color:var(--pri);font-weight:700;border:1px solid var(--pri);border-radius:99px;padding:1px 10px}
.scene-emoji{font-size:2.6rem;letter-spacing:.1em;min-height:1.3em}
@media (prefers-reduced-motion:no-preference){
  .scene-emoji.anim{animation:scenein .45s ease both}
  @keyframes scenein{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
}
.storybox h3{margin:.5em 0 .3em;font-size:1.12rem}
.storybox .sp{color:var(--soft);max-width:38em;margin:0 auto;font-size:.95rem;text-align:left}
.storybox .sp b{color:var(--ink)}
.story-actions{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.story-next{border:none;border-radius:99px;background:var(--pri);color:#fff;padding:8px 26px;font-weight:700;font-size:.92rem;cursor:pointer;font-family:inherit}
.story-choice{border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);padding:10px 18px;font-size:.9rem;cursor:pointer;font-family:inherit;max-width:22em}
.story-choice:hover{border-color:var(--pri)}
.story-choice.err{border-color:var(--bad);color:var(--bad)}
@media (prefers-reduced-motion:no-preference){
  .story-choice.err{animation:shake .3s ease}
  @keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
}
.story-fb{margin-top:10px;font-size:.86rem;color:var(--soft);min-height:1.4em}
.story-dots{margin-top:14px;display:flex;gap:6px;justify-content:center}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s}
.sdot.on{background:var(--pri)}

/* ===== 對照 5:找錯 ===== */
.wall{font-family:"JetBrains Mono",Consolas,monospace;font-size:.78rem;line-height:1.85;padding:12px 14px;min-height:220px;max-height:340px;overflow-y:auto;background:var(--term-bg);color:var(--term-text)}
.wall .sect{color:#9fb4ff;margin-top:6px}
.wall .ln{cursor:pointer;padding:0 6px;border-radius:4px}
.wall .ln:hover{background:rgba(255,255,255,.08)}
.wall .ln.miss{background:rgba(255,157,138,.18)}
.wall .ln.found{background:var(--bad);color:#fff;font-weight:700}
.tasks{list-style:none;margin:0;padding:14px;display:grid;gap:8px}
.tasks li{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.88rem;display:flex;gap:10px;align-items:center;color:var(--soft);background:var(--bg);transition:all .25s}
.tasks li .chk{margin-left:auto;font-weight:900;font-size:.85rem;white-space:nowrap}
.tasks li.on{border-color:var(--pri);color:var(--ink)}
.tasks li.ok{border-color:var(--ok);color:var(--ink)} .tasks li.ok .chk{color:var(--ok)}
.tasks li.fail{border-color:var(--bad);color:var(--ink);background:var(--bad-soft)} .tasks li.fail .chk{color:var(--bad)}
.tasks li .why{display:block;width:100%;font-size:.78rem;color:var(--bad);margin-top:4px}

/* ===== 對照 6:積木 ===== */
.blocks-wrap{border:1.5px solid var(--line);border-radius:16px;background:var(--card);padding:16px;margin-top:14px;overflow-x:auto}
.blocks{display:flex;align-items:center;gap:8px;min-width:640px}
.blk{border:2px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg);cursor:pointer;flex:1;min-width:110px;transition:all .25s;text-align:center}
.blk b{display:block;font-size:.9rem} .blk small{color:var(--soft);font-size:.74rem;line-height:1.4;display:block}
.blk:hover{border-color:var(--pri)}
.blk.lit{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent)}
.blk.goal{border-style:dashed} .blk.q{border-radius:99px}
.blk.m{border-color:var(--amb)} .blk.m.lit{background:var(--amb-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 22%,transparent)}
.arr{color:var(--soft);font-size:1.2rem;flex:none}
.loopback{text-align:right;font-size:.8rem;color:var(--soft);margin-top:6px;padding-right:4px}
.loopback.lit{color:var(--pri);font-weight:700}
.multi{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.multi .blk{flex:none}
.agents{display:flex;gap:8px;flex-wrap:wrap}
.agents span{border:1.5px solid var(--amb);border-radius:99px;padding:3px 12px;font-size:.82rem;background:var(--card);transition:all .25s;opacity:.5}
.agents span.lit{opacity:1;background:var(--amb-soft);font-weight:700}

/* ===== 對照 7:計畫 ===== */
.planbox{padding:10px 14px;min-height:160px}
.sortlist{display:grid;gap:8px}
.sortitem{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);padding:8px 12px;cursor:grab;user-select:none;touch-action:none;transition:border-color .2s,background .2s;font-size:.9rem}
.sortitem.dragging{cursor:grabbing;border-color:var(--pri);background:var(--pri-soft);box-shadow:0 8px 20px rgba(40,50,120,.18);position:relative;z-index:2}
.sortitem .grip{color:var(--soft);letter-spacing:-2px;font-weight:900}
.sortitem .pos{width:1.6em;height:1.6em;border-radius:50%;background:var(--pri-soft);color:var(--pri-ink);font-weight:700;font-size:.78rem;display:flex;align-items:center;justify-content:center;flex:none}
.sortitem .lbl{flex:1}
.sortitem.gate{border-color:var(--amb);background:var(--amb-soft)}
.sortitem.gate .pos{background:var(--amb);color:#fff}
.sortitem .del{border:none;background:transparent;color:var(--soft);cursor:pointer;font-size:1rem;padding:0 4px}
.sortitem .del:hover{color:var(--bad)}
.sortitem.run{border-color:var(--pri)} .sortitem.done{border-color:var(--ok);opacity:.85} .sortitem.bad{border-color:var(--bad);background:var(--bad-soft)}
.sortlist.locked .sortitem{cursor:default}
.blackbox{padding:30px;text-align:center;color:var(--soft)}
.spinner{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--pri);border-radius:50%;margin:0 auto 10px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 對照 8:函式與鑰匙 ===== */
.fnlist{padding:10px 14px;display:grid;gap:8px}
.fn{border:1.5px solid var(--line);border-radius:12px;background:var(--bg);padding:8px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fn code{font-size:.8rem;background:transparent;padding:0;color:var(--pri-ink)}
.fn small{color:var(--soft);font-size:.78rem;width:100%}
.fn .switchrow{margin-left:auto;font-size:.8rem}
.fn.wrapped{border-color:var(--pri)}
.keyring{padding:10px 14px;display:flex;gap:8px;flex-wrap:wrap;min-height:54px;border-bottom:1px solid var(--line)}
.keyring.small{border-bottom:none}
.key{border:1.5px solid var(--amb);background:var(--amb-soft);border-radius:99px;padding:3px 12px;font-size:.8rem;font-family:"JetBrains Mono",monospace;transition:all .25s}
.key.use{background:var(--amb);color:#fff;font-weight:700}
.key.new{outline:3px solid color-mix(in srgb,var(--amb) 40%,transparent)}
.schema{margin-top:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.schema pre{margin:0;padding:12px 14px;font-family:"JetBrains Mono",Consolas,monospace;font-size:.78rem;line-height:1.7;background:var(--term-bg);color:var(--term-text);overflow-x:auto}

/* ===== 對照 9:握手舞台 ===== */
.stage{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;margin-top:14px}
@media (max-width:820px){.stage{grid-template-columns:1fr}}
.zone{border:1.5px solid var(--line);border-radius:14px;background:var(--card);padding:10px 12px;min-height:200px;transition:all .3s}
.zone.lit{border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 15%,transparent)}
.zone.prog.lit{border-color:var(--amb);box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 22%,transparent)}
.zt{font-weight:700;font-size:.88rem;margin-bottom:6px}
.zb{display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.zb .msg{border-radius:10px;padding:6px 10px;background:var(--grey-soft)}
.zb .msg.json{font-family:"JetBrains Mono",monospace;font-size:.76rem;background:var(--term-bg);color:var(--term-text);white-space:pre-wrap;word-break:break-all;border-left:3px solid var(--amb)}
.zb .msg.json em{display:block;font-style:normal;color:var(--amb);font-size:.7rem;margin-bottom:2px;font-family:"Noto Sans TC",sans-serif}
.zb .msg.code{font-family:"JetBrains Mono",monospace;font-size:.76rem;background:var(--term-bg);color:var(--term-ok)}
.zb .msg.no{background:var(--bad-soft);color:var(--bad)}
.menu{margin-top:10px;border:1.5px dashed var(--amb);border-radius:10px;padding:6px 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.menu small{color:var(--amb);font-weight:700;font-size:.72rem;width:100%}
.menu span{font-family:"JetBrains Mono",monospace;font-size:.74rem;background:var(--amb-soft);border-radius:6px;padding:1px 8px;transition:all .25s}
.menu span.use{background:var(--amb);color:#fff;font-weight:700}
.handsteps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:820px){.handsteps{grid-template-columns:1fr}}
.handsteps li{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.8rem;color:var(--soft);background:var(--card);transition:all .25s}
.handsteps li b{display:block;color:var(--ink);font-size:.82rem}
.handsteps li.on{border-color:var(--pri);background:var(--pri-soft);color:var(--ink)}

/* ===== 對照 10:Reflection ===== */
.reflect{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:820px){.reflect{grid-template-columns:1fr}}
.report{padding:12px 14px;font-size:.84rem;min-height:190px;line-height:1.7}
.report table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.report td,.report th{border-bottom:1px solid var(--line);padding:3px 6px;text-align:left;font-size:.8rem}
.report .err{background:var(--bad-soft);color:var(--bad);font-weight:700;border-radius:4px}
.report .fix{background:var(--ok-soft);color:var(--ok);font-weight:700;border-radius:4px}
.report ul{margin:6px 0 0;padding-left:1.2em}
.report li{margin:4px 0}
.report .chart{display:flex;gap:4px;align-items:flex-end;height:50px;margin-top:8px}
.report .chart i{display:block;width:22px;background:var(--pri);border-radius:3px 3px 0 0}
.report .chart i.hole{background:repeating-linear-gradient(45deg,var(--bad-soft),var(--bad-soft) 4px,transparent 4px,transparent 8px);border:1px dashed var(--bad)}

/* ===== 對照 11:分工 ===== */
.team{padding:12px 14px;display:grid;gap:8px;min-height:150px}
.member{border:1.5px solid var(--line);border-radius:12px;background:var(--bg);padding:8px 12px;font-size:.84rem}
.member b{display:flex;gap:8px;align-items:center}
.member b em{font-style:normal;margin-left:auto;font-size:.76rem;color:var(--soft)}
.member .bar{margin-top:6px}
.member.busy{border-color:var(--pri)} .member.done{border-color:var(--ok)} .member.boom{border-color:var(--bad);background:var(--bad-soft)}
.handoff{font-size:.78rem;color:var(--amb);text-align:center}

/* ===== 對照 12:零件 ===== */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media (max-width:820px){.parts{grid-template-columns:1fr 1fr}}
.part{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:12px 14px;position:relative;transition:all .25s}
.part .pi{font-size:1.6rem}
.part b{display:block;font-size:.95rem}
.part small{display:block;color:var(--soft);font-size:.78rem;line-height:1.5;min-height:2.6em}
.part .pull{margin-top:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:3px 12px;font-size:.8rem;cursor:pointer;font-family:inherit}
.part.off{border-style:dashed;opacity:.55;background:var(--bg)}
.part.off .pi{filter:grayscale(1)}
.part.off .pull{border-color:var(--bad);color:var(--bad)}
.part.hot{border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 18%,transparent)}

/* ===== 對照 13:心跳環 ===== */
.ring{position:relative;width:320px;height:320px;margin:14px auto}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ringpath{fill:none;stroke:var(--pri);stroke-width:3;stroke-dasharray:8 8;opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .ring.live .ringpath{animation:ants 1s linear infinite}
  @keyframes ants{to{stroke-dashoffset:-16}}
}
.rnode{position:absolute;left:50%;top:50%;width:92px;margin:-34px 0 0 -46px;transform:rotate(var(--a)) translate(118px) rotate(calc(-1 * var(--a)));text-align:center;font-size:1.3rem;line-height:1.1;border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:6px 4px;transition:all .25s}
.rnode small{display:block;font-size:.66rem;color:var(--soft);line-height:1.3;margin-top:2px}
.rnode.on{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent)}
.rnode.on small{color:var(--ink)}
.rcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;text-align:center;font-weight:700;font-size:.82rem;color:var(--pri-ink);line-height:1.4}

/* ===== 集卡 ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
@media (max-width:820px){.cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.ccard{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);opacity:.45;transition:all .3s}
.ccard.lit{opacity:1;border-color:var(--pri);box-shadow:0 2px 10px rgba(40,50,120,.15)}
@media (prefers-reduced-motion:no-preference){
  .ccard.lit{animation:cardpop .35s ease}
  @keyframes cardpop{50%{transform:scale(1.06)}}
}
.ccard b{display:flex;align-items:center;gap:6px;font-size:.92rem}
.ccard b::before{content:"○";color:var(--soft)}
.ccard.lit b::before{content:"●";color:var(--pri)}
.ccard small{color:var(--soft);font-size:.76rem;line-height:1.5;display:block;margin-top:2px}
.ccard .src{display:block;font-size:.7rem;color:var(--pri);margin-top:4px}

footer{margin-top:60px;border-top:1px solid var(--line);padding-top:14px;color:var(--soft);font-size:.8rem;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
footer span{flex:1;min-width:16em}
.resetbtn{border:1px solid var(--line);background:var(--card);color:var(--soft);border-radius:99px;padding:4px 14px;font-size:.78rem;cursor:pointer;font-family:inherit}
.resetbtn:hover{border-color:var(--seal);color:var(--seal)}