/* Layout：首頁＝關卡地圖＋一隻慢慢組裝起來的機器人；每一關＝往下捲的一條路：看圖 → 動手玩 → 機器人零件 → 挑戰 → 紅字翻譯 */
:root {
  --bg: #F1F4F9;
  --surface: #FFFFFF;
  --sunk: #E7ECF4;
  --ink: #172031;
  --muted: #586376;
  --line: #D5DCE8;
  --blue: #2F6DA3;
  --blue-ink: #FFFFFF;
  --blue-soft: #DCE7F4;
  --yellow: #FFD43B;
  --yellow-ink: #3B2F00;
  --yellow-soft: #FFF4C7;
  --good: #1F8A55;
  --good-soft: #DCF2E5;
  --bad: #C8373D;
  --bad-soft: #FBE2E2;
  --str: #B5531C;
  --num: #2F6DA3;
  --term-bg: #151C2B;
  --term-bar: #1D2638;
  --term-fg: #E3E8F1;
  --term-dim: #8792A6;
  --term-line: #2A3449;
  --term-in: #FFD43B;
  --tk-kw: #C792EA;
  --tk-str: #C3E88D;
  --tk-num: #F78C6C;
  --tk-com: #7A869B;
  --tk-fn: #82AAFF;
  --tk-dec: #FFCB6B;
  --shadow: 0 1px 0 rgba(23, 32, 49, .05), 0 8px 22px -14px rgba(23, 32, 49, .35);
  --f-display: "Huninn", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --f-body: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --f-code: "JetBrains Mono", "Cascadia Mono", Consolas, "Noto Sans TC", "Microsoft JhengHei", monospace;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151F; --surface: #182031; --sunk: #0D121B; --ink: #E5EAF2; --muted: #9AA5B8; --line: #2A3449;
    --blue: #5B9BD8; --blue-ink: #0B1424; --blue-soft: #1C2D45;
    --yellow: #FFD43B; --yellow-ink: #2A2100; --yellow-soft: #3A3315;
    --good: #4CC38A; --good-soft: #15352A; --bad: #F2686D; --bad-soft: #3D1D22;
    --str: #F0A36E; --num: #7FB5EA;
    --term-bg: #0B1019; --term-bar: #121a28; --term-line: #202A3D;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10151F; --surface: #182031; --sunk: #0D121B; --ink: #E5EAF2; --muted: #9AA5B8; --line: #2A3449;
  --blue: #5B9BD8; --blue-ink: #0B1424; --blue-soft: #1C2D45;
  --yellow: #FFD43B; --yellow-ink: #2A2100; --yellow-soft: #3A3315;
  --good: #4CC38A; --good-soft: #15352A; --bad: #F2686D; --bad-soft: #3D1D22;
  --str: #F0A36E; --num: #7FB5EA;
  --term-bg: #0B1019; --term-bar: #121a28; --term-line: #202A3D;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 程式字型不要把 <= != 合成 ≤ ≠，初學者會看不懂要打什麼 */
html { -webkit-text-size-adjust: 100%; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.7;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--surface);
}
a { color: var(--blue); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.3; text-wrap: balance; margin: 0; }
code, pre, kbd { font-family: var(--f-code); }
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ── 頂部列 ── */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; flex-wrap: wrap; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-size: 1.15rem; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sunk); color: var(--ink); }
.engine { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--sunk); white-space: nowrap; }
.engine i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.engine[data-s="loading"] i { background: var(--yellow); animation: blink 1s infinite; }
.engine[data-s="ready"] i { background: var(--good); }
.engine[data-s="error"] i { background: var(--bad); }
@keyframes blink { 50% { opacity: .3; } }

/* ── 按鈕 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: .95rem; line-height: 1.2;
  background: var(--sunk); color: var(--ink);
}
.btn:hover { filter: brightness(1.05); }
.btn-run { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 3px 0 #C9A21A; }
.btn-run:active { transform: translateY(2px); box-shadow: 0 1px 0 #C9A21A; }
.btn-blue { background: var(--blue); color: var(--blue-ink); }
.btn-ghost { background: transparent; color: var(--term-dim); padding: 7px 10px; font-weight: 500; }
.btn-ghost:hover { color: var(--term-fg); }
.btn svg { width: 16px; height: 16px; }

/* ── 首頁 ── */
.home-hero { padding-block: 40px 20px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.home-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
.home-hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 4px; }
.home-hero p.lead { font-size: 1.12rem; color: var(--muted); margin: 14px 0 22px; max-width: 34em; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.robot-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.robot-card svg { width: 100%; height: auto; }
.robot-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .85rem; }
.parts li { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.parts li.on { color: var(--ink); }
.parts li b { width: 18px; height: 18px; border-radius: 5px; background: var(--sunk); display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex: none; }
.parts li.on b { background: var(--good); color: var(--surface); }
.rb-part { fill: var(--sunk); stroke: var(--line); stroke-width: 2; transition: fill .4s; }
.rb-part.on { fill: var(--p); stroke: var(--ink); }
.rb-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.rb-eye { fill: var(--ink); }

.map-title { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
.map-title h2 { font-size: 1.5rem; }
.map-title span { color: var(--muted); font-size: .95rem; }
.map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: lv; }
.lv-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.lv-card:hover { transform: translateY(-3px); border-color: var(--lv); }
.lv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pixel-badge {
  --s: 4px;
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px;
  background: var(--lv); color: #fff; font-family: var(--f-display); font-size: 1.35rem;
  clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s)), 0 var(--s), var(--s) var(--s));
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; }
.star-on { fill: var(--yellow); stroke: #B8901A; }
.star-off { fill: var(--sunk); stroke: var(--line); }
.lv-card h3 { font-size: 1.2rem; }
.lv-card .lv-learn { font-family: var(--f-code); font-size: .8rem; color: var(--muted); }
.lv-card .lv-part { margin-top: auto; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lv-card .lv-part::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--lv); flex: none; }
.lv-boss {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--term-bg); color: var(--term-fg); border-color: var(--term-line);
}
.lv-boss h3 { font-size: 1.45rem; color: #fff; }
.lv-boss .lv-learn, .lv-boss .lv-part { color: var(--term-dim); margin-top: 0; }
.lv-boss .boss-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.lv-boss .star-off { fill: transparent; stroke: var(--term-dim); }
.lv-boss .lv-part::before { background: var(--yellow); }
.lv-boss .pixel-badge { background: var(--yellow); color: var(--yellow-ink); min-width: 64px; height: 64px; font-size: 1rem; }
.home-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 26px 0 48px; }
.home-link { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: var(--sunk); text-decoration: none; color: var(--ink); }
.home-link:hover { background: var(--blue-soft); }
.home-link svg { width: 34px; height: 34px; flex: none; color: var(--blue); }
.home-link b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; }
.home-link span { color: var(--muted); font-size: .9rem; }

/* ── 關卡頁 ── */
.lesson-hero { padding-block: 28px 8px; display: grid; gap: 14px; }
.crumb { font-size: .9rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb a { color: var(--muted); }
.lesson-hero .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lesson-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.learn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--f-code); font-size: .88rem; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.unlock { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--yellow-soft); color: var(--ink); font-size: .92rem; width: fit-content; max-width: 100%; }
.unlock b { font-weight: 700; }
.unlock.done { background: var(--good-soft); }
.unlock svg { width: 34px; height: 42px; flex: none; }
.lesson-hero .lead { margin: 0; color: var(--muted); font-size: 1.08rem; max-width: 40em; }
.muted { color: var(--muted); font-size: .9rem; align-self: center; }
.pixel-badge.sm { --s: 3px; min-width: 34px; height: 34px; font-size: 1rem; padding: 0 6px; }
.pass-pill { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--good); color: var(--surface); }
.goal .want > span { font-size: .8rem; padding-top: 8px; white-space: nowrap; }

.sec { padding-block: 26px 6px; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-tag { font-family: var(--f-display); font-size: .82rem; letter-spacing: .08em; padding: 3px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); }
.sec-head h2 { font-size: 1.45rem; }
.sec-head p { margin: 0; color: var(--muted); font-size: .95rem; flex-basis: 100%; }

.concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ccard h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: baseline; }
.ccard h3 .n { font-family: var(--f-code); font-size: .8rem; color: var(--muted); }
.ccard .cap { margin: 0; color: var(--muted); font-size: .93rem; }
.ccard .cap code { color: var(--ink); background: var(--sunk); padding: 1px 6px; border-radius: 5px; font-size: .88em; }
.ccard .vis { min-width: 0; overflow-x: auto; }

/* ── 視覺元件 ── */
.v-code { margin: 0; background: var(--term-bg); color: var(--term-fg); padding: 12px 14px; border-radius: 10px; font-size: .92rem; line-height: 1.65; overflow-x: auto; white-space: pre; }
.t-kw { color: var(--tk-kw); } .t-str { color: var(--tk-str); } .t-num { color: var(--tk-num); }
.t-com { color: var(--tk-com); font-style: italic; } .t-fn { color: var(--tk-fn); } .t-dec { color: var(--tk-dec); }
.blank { display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--term-in); height: 1.1em; vertical-align: -2px; margin: 0 2px; }
.v-screen { background: var(--term-bg); color: var(--term-fg); border-radius: 10px; padding: 10px 14px; font-family: var(--f-code); font-size: .92rem; white-space: pre-wrap; position: relative; border: 3px solid var(--term-line); min-width: 0; }
.v-screen::before { content: "輸出"; position: absolute; top: -11px; left: 10px; font-family: var(--f-body); font-size: .7rem; padding: 0 6px; background: var(--term-line); color: var(--term-dim); border-radius: 4px; }
.v-io { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-io > .v-code, .v-io > .v-screen { flex: 1 1 200px; }
.v-arrow { font-size: 1.5rem; color: var(--muted); flex: none; line-height: 1; }
.v-col { display: grid; gap: 10px; }

.v-boxes { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.vbox { display: grid; justify-items: center; gap: 4px; min-width: 84px; }
.vbox-lid { font-family: var(--f-code); font-size: .85rem; font-weight: 600; padding: 2px 10px; border-radius: 6px 6px 0 0; background: var(--ink); color: var(--bg); }
.vbox-body { min-width: 84px; padding: 12px 12px; border: 3px solid var(--ink); border-radius: 4px 4px 10px 10px; text-align: center; font-family: var(--f-code); font-size: 1.05rem; background: var(--surface); }
.vbox-type { font-size: .72rem; padding: 0 8px; border-radius: 999px; }
.vbox.k-str .vbox-body { color: var(--str); } .vbox.k-str .vbox-type { background: var(--yellow-soft); color: var(--str); }
.vbox.k-num .vbox-body { color: var(--num); } .vbox.k-num .vbox-type { background: var(--blue-soft); color: var(--num); }
.vbox.k-other .vbox-type { background: var(--sunk); color: var(--muted); }
.v-update { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-update .op { display: grid; justify-items: center; gap: 2px; font-family: var(--f-code); font-size: .85rem; color: var(--muted); }
.v-update .op span { font-size: 1.6rem; line-height: 1; }

.v-tiles { display: grid; gap: 6px; }
.v-tiles + .v-tiles { margin-top: 12px; }
.tiles-name { font-family: var(--f-code); font-size: .85rem; color: var(--muted); }
.tiles-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tile { display: grid; justify-items: center; }
.tile-v { min-width: 58px; padding: 10px 8px; text-align: center; font-family: var(--f-code); font-size: .92rem; border: 2px solid var(--line); background: var(--surface); border-radius: 8px; }
.tile.hl .tile-v { border-color: var(--blue); background: var(--blue-soft); }
.tile-i { font-family: var(--f-code); font-size: .78rem; color: var(--blue); font-weight: 600; }

.v-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.v-flow.vert { flex-direction: column; align-items: flex-start; }
.fstep { padding: 8px 12px; border-radius: 10px; background: var(--sunk); font-size: .92rem; display: grid; gap: 2px; min-width: 0; }
.fstep small { color: var(--muted); font-size: .78rem; }
.fstep code { font-size: .86rem; }
.fstep.k-hi { background: var(--yellow-soft); }
.fstep.k-blue { background: var(--blue-soft); }
.fstep.k-good { background: var(--good-soft); }
.fstep.k-bad { background: var(--bad-soft); }
.fstep.k-term { background: var(--term-bg); color: var(--term-fg); }
.fstep.k-term small { color: var(--term-dim); }
.farrow { align-self: center; color: var(--muted); font-size: 1.2rem; }
.v-flow.vert .farrow { align-self: flex-start; padding-left: 18px; line-height: 1; }
.loopback { font-size: .82rem; color: var(--blue); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.v-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; text-align: center; }
.br-q { grid-column: 1 / -1; justify-self: center; padding: 10px 18px; background: var(--yellow-soft); border: 2px solid var(--yellow); border-radius: 10px; font-family: var(--f-code); font-size: .95rem; }
.br-lab { font-size: .82rem; font-weight: 700; }
.br-lab.y { color: var(--good); } .br-lab.n { color: var(--bad); }
.br-r { padding: 10px; border-radius: 10px; font-size: .92rem; }
.br-r.y { background: var(--good-soft); } .br-r.n { background: var(--bad-soft); }

.v-ladder { display: grid; gap: 6px; }
.ld-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.ld-q { font-family: var(--f-code); font-size: .9rem; padding: 6px 10px; border-radius: 8px; background: var(--yellow-soft); }
.ld-q.else { background: var(--sunk); }
.ld-yes { font-size: .78rem; color: var(--good); font-weight: 700; }
.ld-r { padding: 6px 14px; border-radius: 8px; background: var(--good-soft); font-weight: 700; min-width: 3em; text-align: center; }
.ld-no { font-size: .75rem; color: var(--bad); padding-left: 14px; }

.v-compare { display: grid; gap: 8px; }
.cmp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.cmp .mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.cmp.ok .mk { background: var(--good); color: var(--surface); }
.cmp.no .mk { background: var(--bad); color: var(--surface); }
.cmp .v-code { padding: 6px 10px; font-size: .88rem; }
.cmp .res { font-size: .88rem; min-width: 0; }
.cmp .res code { font-family: var(--f-code); background: var(--sunk); padding: 2px 6px; border-radius: 5px; }
.cmp.no .res { color: var(--bad); }

.v-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.op-tile { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; background: var(--surface); }
.op-tile .s { font-family: var(--f-code); font-size: 1.35rem; font-weight: 600; color: var(--blue); line-height: 1.2; }
.op-tile .nm { font-size: .82rem; color: var(--muted); }
.op-tile .ex { font-family: var(--f-code); font-size: .8rem; }
.op-tile .ex b { color: var(--good); font-weight: 600; }
.op-tile.wide { grid-column: span 2; }

.v-machine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-in, .m-out { display: grid; gap: 4px; }
.m-chip { font-family: var(--f-code); font-size: .88rem; padding: 4px 10px; border-radius: 8px; background: var(--blue-soft); }
.m-out .m-chip { background: var(--good-soft); }
.m-box { padding: 12px 16px; border: 3px solid var(--ink); border-radius: 12px; font-family: var(--f-code); font-size: .92rem; background: var(--yellow-soft); display: grid; gap: 2px; justify-items: center; }
.m-box small { font-family: var(--f-body); font-size: .72rem; color: var(--muted); }
.m-lab { font-size: .72rem; color: var(--muted); }

.v-kv { display: grid; gap: 6px; }
.kv-name { font-family: var(--f-code); font-size: .85rem; color: var(--muted); }
.kv-row { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.kv-v { white-space: nowrap; }
.kv-k { font-family: var(--f-code); font-size: .88rem; padding: 4px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); min-width: 0; }
.kv-v { font-family: var(--f-code); font-size: .92rem; padding: 4px 10px; border-radius: 6px; border: 2px solid var(--line); background: var(--surface); min-width: 0; }
.kv-row .farrow { font-size: 1rem; }

.v-anno { display: grid; gap: 0; background: var(--term-bg); border-radius: 10px; padding: 8px 0; overflow-x: auto; }
.an-row { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(150px, auto); gap: 14px; align-items: center; padding: 2px 14px; }
.an-row pre { margin: 0; color: var(--term-fg); font-size: .9rem; line-height: 1.6; white-space: pre; }
.an-row.k-in { background: rgba(255, 212, 59, .09); box-shadow: inset 3px 0 0 var(--term-in); }
.an-row.k-out { background: rgba(130, 170, 255, .08); }
.an-note { font-size: .8rem; color: var(--term-in); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.an-note:not(:empty)::before { content: "←"; color: var(--term-dim); }

.v-chat { display: grid; gap: 10px; background: var(--sunk); border-radius: 10px; padding: 12px; }

.v-split { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sp-group { display: grid; justify-items: center; gap: 4px; padding: 8px; border: 2px dashed var(--line); border-radius: 10px; }
.sp-group.rest { border-color: var(--bad); }
.sp-dots { display: flex; gap: 4px; }
.sp-dots i { width: 16px; height: 16px; transform: rotate(45deg); background: var(--blue); border-radius: 3px; }
.sp-group.rest .sp-dots i { background: var(--bad); }
.sp-group small { font-size: .75rem; color: var(--muted); }

.v-steps { display: grid; gap: 12px; counter-reset: st; list-style: none; margin: 0; padding: 0; }
.v-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: st; }
.v-steps li::before { content: counter(st); width: 40px; height: 40px; border-radius: 10px; background: var(--blue); color: var(--blue-ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.2rem; }
.v-steps b { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; display: block; }
.v-steps p { margin: 2px 0 6px; color: var(--muted); font-size: .93rem; }
.v-steps .v-code { font-size: .86rem; }

/* ── 程式執行器 ── */
.demos { display: grid; gap: 18px; }
.demo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tries { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.tries h4 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.tries ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tries li { display: flex; gap: 10px; font-size: .93rem; align-items: flex-start; }
.tries li::before { content: ""; width: 9px; height: 9px; margin-top: .55em; border-radius: 2px; background: var(--yellow); flex: none; transform: rotate(45deg); }
.tries code { background: var(--sunk); padding: 1px 6px; border-radius: 5px; font-size: .88em; }

.runner { background: var(--term-bg); border-radius: var(--r); overflow: hidden; border: 1px solid var(--term-line); min-width: 0; }
.rn-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--term-bar); border-bottom: 1px solid var(--term-line); flex-wrap: wrap; }
.rn-bar .dots { display: flex; gap: 5px; margin-right: 6px; }
.rn-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--term-line); }
.rn-title { color: var(--term-dim); font-size: .82rem; margin-right: auto; font-family: var(--f-code); }
.rn-hint { color: var(--term-dim); font-size: .75rem; }
.rn-edit { min-height: 60px; }
.rn-out { border-top: 1px dashed var(--term-line); padding: 10px 14px 12px; font-family: var(--f-code); font-size: .92rem; color: var(--term-fg); white-space: pre-wrap; word-break: break-word; min-height: 46px; max-height: 360px; overflow: auto; }
.rn-out .ph { color: var(--term-dim); font-family: var(--f-body); font-size: .86rem; }
.rn-out .in { color: var(--term-in); }
.rn-inline { display: inline-flex; align-items: center; gap: 6px; }
.rn-inline input { font: inherit; color: var(--term-in); background: rgba(255, 212, 59, .08); border: 0; border-bottom: 2px solid var(--term-in); outline: none; padding: 1px 4px; width: 12em; max-width: 60vw; }
.rn-inline small { font-family: var(--f-body); color: var(--term-dim); font-size: .75rem; }
.rn-err { margin: 0; background: var(--bad-soft); color: var(--ink); padding: 12px 14px; display: grid; gap: 4px; font-size: .92rem; }
.rn-err b { color: var(--bad); font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.rn-err .raw { font-family: var(--f-code); font-size: .78rem; color: var(--muted); }
.rn-err code { font-family: var(--f-code); background: var(--surface); padding: 1px 6px; border-radius: 5px; }
.rn-check { padding: 10px 14px; font-size: .92rem; display: flex; align-items: center; gap: 10px; }
.rn-check.pass { background: var(--good-soft); color: var(--ink); }
.rn-check.fail { background: var(--yellow-soft); color: var(--ink); }
.rn-check .big { font-family: var(--f-display); font-size: 1.15rem; }
.rn-loading { color: var(--term-dim); font-family: var(--f-body); font-size: .86rem; }

.CodeMirror { height: auto; font-family: var(--f-code); font-size: 15px; line-height: 1.65; background: var(--term-bg); color: var(--term-fg); }
.CodeMirror-scroll { min-height: 60px; }
.CodeMirror-gutters { background: var(--term-bg); border-right: 1px solid var(--term-line); }
.CodeMirror-linenumber { color: #4E5A70; padding: 0 8px 0 4px; }
.CodeMirror-cursor { border-left: 2px solid var(--term-in); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: rgba(130, 170, 255, .22); }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(130, 170, 255, .3); }
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 12px; }
.cm-s-quest .cm-keyword { color: var(--tk-kw); }
.cm-s-quest .cm-string { color: var(--tk-str); }
.cm-s-quest .cm-number { color: var(--tk-num); }
.cm-s-quest .cm-comment { color: var(--tk-com); font-style: italic; }
.cm-s-quest .cm-builtin { color: var(--tk-fn); }
.cm-s-quest .cm-meta { color: var(--tk-dec); }
.cm-s-quest .cm-def { color: var(--tk-fn); }
.cm-s-quest .cm-variable, .cm-s-quest .cm-variable-2, .cm-s-quest .cm-property { color: var(--term-fg); }
.cm-s-quest .cm-operator { color: #89DDFF; }
.cm-s-quest .cm-error { color: #FF6B6B; text-decoration: underline wavy #FF6B6B; }
.cm-s-quest .CodeMirror-matchingbracket { color: var(--term-in) !important; text-decoration: underline; }
.cm-errline { background: rgba(242, 104, 109, .22); }
.cm-errgutter { background: #C8373D; color: #fff !important; }

/* ── 機器人零件 ── */
.botpart { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; align-items: center; }
.botpart .side { display: grid; gap: 8px; justify-items: start; }
.botpart .side h3 { font-size: 1.2rem; }
.botpart .side p { margin: 0; color: var(--muted); font-size: .93rem; }
.part-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--lv); display: grid; place-items: center; color: #fff; }
.part-icon svg { width: 38px; height: 38px; }

/* ── 挑戰 ── */
.challenges { display: grid; gap: 20px; }
.chal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; }
.chal.passed { border-color: var(--good); box-shadow: 0 0 0 2px var(--good-soft); }
.chal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chal-head h3 { font-size: 1.2rem; }
.chal-head .stars { margin-left: auto; }
.goal { display: grid; gap: 6px; }
.goal p { margin: 0; font-size: 1rem; }
.goal .want { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.goal .want .v-screen { flex: 1 1 220px; font-size: .85rem; padding: 8px 12px; }
.hints { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.hint-btn { border: 1px dashed var(--line); background: transparent; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: .88rem; color: var(--muted); }
.hint-btn:hover { border-color: var(--blue); color: var(--blue); }
.hint { flex-basis: 100%; background: var(--yellow-soft); border-radius: 8px; padding: 8px 12px; font-size: .92rem; }
.hint code { font-family: var(--f-code); background: var(--surface); padding: 1px 6px; border-radius: 5px; }
.hint pre { margin: 6px 0 0; }

/* ── 紅字翻譯 ── */
.errs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.err { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 14px; display: grid; gap: 8px; }
.err .v-code { font-size: .86rem; }
.err .etype { font-family: var(--f-code); font-size: .8rem; color: var(--bad); }
.err p { margin: 0; font-size: .93rem; }
.err p b { color: var(--good); }

.pager { display: flex; justify-content: space-between; gap: 12px; padding-block: 34px 56px; flex-wrap: wrap; }
.pager a { flex: 1 1 240px; display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--blue); }
.pager a small { color: var(--muted); }
.pager a b { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; }
.pager a.next { text-align: right; }

/* ── 最終關：模擬聊天室 ── */
.sim { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sim-left { display: grid; gap: 12px; align-content: start; min-width: 0; }
.sim-left .rn-edit .CodeMirror { max-height: 560px; }
.sim-left .CodeMirror-scroll { max-height: 560px; }
.sim-console { background: var(--term-bg); border-radius: 10px; border: 1px solid var(--term-line); font-family: var(--f-code); font-size: .82rem; color: var(--term-fg); }
.sim-console .hd { padding: 6px 12px; color: var(--term-dim); border-bottom: 1px solid var(--term-line); font-family: var(--f-body); font-size: .78rem; display: flex; justify-content: space-between; }
.sim-console .bd { padding: 8px 12px; max-height: 150px; min-height: 64px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.sim-console .sys { color: var(--term-dim); }
.sim-console .bad { color: #FF8A8E; }
.chatwin { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 560px; max-height: 760px; overflow: hidden; min-width: 0; }
.chat-hd { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-hd b { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.chat-hd .hash { color: var(--muted); font-size: 1.2rem; }
.bot-status { margin-left: auto; font-size: .78rem; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.bot-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.bot-status.on i { background: var(--good); }
.chat-body { overflow-y: auto; padding: 12px 14px; display: grid; gap: 12px; align-content: start; }
.msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .95rem; background: var(--av, #888); }
.msg .who { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.msg .who .tag { font-size: .62rem; background: var(--blue); color: var(--blue-ink); padding: 0 5px; border-radius: 4px; font-weight: 700; letter-spacing: .04em; }
.msg .who small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.msg .txt { font-size: .95rem; white-space: pre-wrap; word-break: break-word; }
.msg .txt .mention { background: var(--blue-soft); color: var(--blue); border-radius: 4px; padding: 0 3px; }
.msg .txt .cmdtxt { font-family: var(--f-code); font-size: .9em; }
.msg.sys { grid-template-columns: 1fr; }
.msg.sys .txt { font-size: .85rem; color: var(--muted); background: var(--sunk); padding: 6px 10px; border-radius: 8px; }
.msg.sys.bad .txt { background: var(--bad-soft); color: var(--ink); }
.msg .eph { font-size: .72rem; color: var(--muted); }
.embed { margin-top: 6px; border-left: 4px solid var(--ec, var(--blue)); background: var(--sunk); border-radius: 4px 8px 8px 4px; padding: 10px 12px; display: grid; gap: 6px; max-width: 440px; }
.embed .et { font-weight: 700; }
.embed .ed { font-size: .9rem; white-space: pre-wrap; }
.embed .ef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.embed .ef div { grid-column: span 3; font-size: .88rem; }
.embed .ef div.inl { grid-column: span 1; }
.embed .ef b { display: block; font-size: .8rem; }
.embed .eft { font-size: .75rem; color: var(--muted); }
.chat-ft { border-top: 1px solid var(--line); padding: 10px; display: grid; gap: 8px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { font-family: var(--f-code); font-size: .8rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.quick button:hover { border-color: var(--blue); color: var(--blue); }
.say { display: flex; gap: 8px; }
.say select, .say input { font: inherit; font-size: .92rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 7px 10px; min-width: 0; }
.say input { flex: 1; }
.missions { display: grid; gap: 12px; }
.mission { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.mission .ck { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 700; }
.mission.done { border-color: var(--good); }
.mission.done .ck { background: var(--good); border-color: var(--good); color: var(--surface); }
.mission h3 { font-size: 1.1rem; }
.mission p { margin: 2px 0 0; font-size: .93rem; color: var(--muted); }
.mission .hints { margin-top: 8px; }

.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.road { padding: 14px; border-radius: var(--r); background: var(--sunk); display: grid; gap: 4px; }
.road b { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.road span { font-size: .88rem; color: var(--muted); }
.callout { border-radius: var(--r); padding: 14px 16px; background: var(--bad-soft); display: grid; gap: 6px; }
.callout b { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; }
.callout ul { margin: 0; padding-left: 1.2em; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* 圖解放在窄卡片裡時，改成直的排列，不要橫向擠在一起 */
.ccard, .sh-card, .pp { container-type: inline-size; }
@container (max-width: 560px) {
  .v-flow { flex-direction: column; align-items: flex-start; }
  .v-flow .farrow { align-self: flex-start; transform: rotate(90deg); margin-left: 14px; line-height: 1; }
  .cmp { grid-template-columns: 28px minmax(0, 1fr); }
  .cmp .farrow { display: none; }
  .cmp .res { grid-column: 2; }
  .v-io, .v-machine { flex-direction: column; align-items: stretch; }
  .v-machine { align-items: flex-start; }
  .v-io > .v-code, .v-io > .v-screen { flex-basis: auto; }
  .v-io .v-arrow, .v-machine .v-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 14px; }
}
@container (max-width: 480px) {
  .an-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .an-note { padding-left: 2.2em; white-space: normal; }
  .an-note:empty { display: none; }
}

/* grid 裡的格子預設會被長程式撐寬，全部允許縮小 */
.demos > *, .demo > *, .challenges > *, .chal > *, .botpart > *, .missions > *, .mission > *, .two > *, .v-col > *, .goal > *, .concepts > *, .errs > *, .err > * { min-width: 0; }

.is-online .teacher-only { display: none !important; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 12px; font-family: var(--f-display); font-size: 1.1rem; opacity: 0; transition: .3s; z-index: 50; pointer-events: none; display: flex; gap: 10px; align-items: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo, .botpart, .sim, .two { grid-template-columns: 1fr; }
  .home-links { grid-template-columns: 1fr; }
  .chatwin { min-height: 460px; }
}
@media (max-width: 520px) {
  .map { grid-template-columns: 1fr; }
  .robot-card { grid-template-columns: 110px minmax(0, 1fr); }
  .cmp { grid-template-columns: 28px minmax(0, 1fr); }
  .cmp .farrow { display: none; }
  .cmp .res { grid-column: 2; }
  .an-row { grid-template-columns: max-content; }
  .an-note { padding-left: 1.5em; }
  .op-tile.wide { grid-column: auto; }
  .mission { grid-template-columns: 30px minmax(0, 1fr); }
  .mission .stars { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}