/* ===================== 布线大师 · 样式 =====================
   接入「小能熊游戏厅」统一设计系统：三种外观 柔彩 soft / 软糖 candy / 街机 arcade（默认）。
   全部样式仍用本游戏原有的变量名（--bg/--panel/--border/--ink/--cyan…），
   这里把这些变量按 [data-theme] 重新赋值，于是整页（含 SVG 棋盘）随皮肤自动适配。
   ========================================================== */

/* ---------- 默认：柔彩 soft（浅色） ---------- */
:root{
  --bg:#faf9f6;
  --bg-image:
    radial-gradient(1000px 560px at 80% -12%, rgba(47,116,208,.10), transparent 60%),
    radial-gradient(900px 600px at 6% 6%, rgba(255,107,53,.08), transparent 58%);
  --bg2:#eef2fb;          /* 棋盘底纹基色 */
  --board-bg:#eef2fb;     /* 游戏挂载区背景 */
  --panel:#ffffff;
  --panel2:#f4f6fb;
  --border:#e7e9f1;
  --border-soft:#eef0f6;
  --grid-line:rgba(40,50,90,.12);
  --grid-dot:rgba(40,50,90,.18);
  --ink:#26252f;
  --ink-dim:#5b5d70;
  --ink-faint:#8a8c9e;
  --cyan:#0f9bb4;         /* 本游戏主强调色（电路青）*/
  --blue:#2f74d0;
  --mars:#ec5f2c;
  --mars-soft:#e8722f;
  --good:#2f9e5d;
  --bad:#d9534f;
  --warn:#cf9412;
  --glow:none;
  --topnav-bg:rgba(255,255,255,.82);
  /* 网络颜色（六条线，浅深皆可辨）*/
  --netA:#2f74d0; --netB:#1fa34a; --netC:#e23b3b; --netD:#9542d6; --netE:#c9750a; --netF:#d83f8a;
  --shadow:0 14px 38px -18px rgba(38,44,74,.30);
  --shadow-sm:0 2px 8px rgba(38,44,74,.06);
  --r:16px;
  --num:'Nunito',-apple-system,sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- 软糖 candy（浅色·圆润） ---------- */
[data-theme="candy"]{
  --bg:#fdfbff;
  --bg-image:
    radial-gradient(820px 460px at 82% -10%, #ffe1c0, transparent 58%),
    radial-gradient(820px 520px at 4% 4%, #cfe6ff, transparent 55%),
    radial-gradient(900px 640px at 50% 120%, #ffd5ec, transparent 60%);
  --bg2:#f3ecff; --board-bg:#f5f0ff;
  --panel:#ffffff; --panel2:#f7f1ff;
  --border:#ece2f7; --border-soft:#f1eafa;
  --grid-line:rgba(120,80,180,.14); --grid-dot:rgba(120,80,180,.22);
  --ink:#2a2740; --ink-dim:#5e5980; --ink-faint:#9a93b6;
  --cyan:#1aa6c2; --blue:#5b6bf0;
  --mars:#ff6f43; --mars-soft:#ff8a5f;
  --good:#2faa6e; --bad:#e0586b; --warn:#d99a1e;
  --glow:none;
  --topnav-bg:#ffffff;
  --netA:#3a86ff; --netB:#28b463; --netC:#ee4b58; --netD:#9b6bff; --netE:#e0851d; --netF:#ec6aa8;
  --shadow:0 16px 0 #ece3f7, 0 26px 46px rgba(96,72,160,.18);
  --shadow-sm:0 3px 0 #efe7f7;
  --r:22px;
}

/* ---------- 街机 arcade（深色霓虹·默认） ---------- */
[data-theme="arcade"]{
  --bg:#0c0e1c;
  --bg-image:
    radial-gradient(1000px 560px at 80% -12%, #1a2452, transparent 60%),
    radial-gradient(860px 560px at 4% 6%, #2a1745, transparent 58%),
    radial-gradient(1000px 720px at 50% 122%, #0c2c3e, transparent 62%);
  --bg2:#171a2e;
  --board-bg:radial-gradient(120% 120% at 50% 0%, #141a30, #0c1220);
  --panel:#171a2e; --panel2:#1d2340;
  --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.06);
  --grid-line:rgba(255,255,255,.06); --grid-dot:rgba(255,255,255,.12);
  --ink:#eef1ff; --ink-dim:#a7afd6; --ink-faint:#6d75a3;
  --cyan:#22d3ee; --blue:#3b82f6;
  --mars:#ff6b35; --mars-soft:#ff8c5a;
  --good:#34d399; --bad:#f43f5e; --warn:#fbbf24;
  --glow:0 0 18px rgba(34,211,238,.45);
  --topnav-bg:rgba(255,255,255,.06);
  --netA:#3b82f6; --netB:#22c55e; --netC:#ef4444; --netD:#a855f7; --netE:#d97706; --netF:#ec4899;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --shadow-sm:0 1px 0 rgba(255,255,255,.04);
  --r:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  background-image:var(--bg-image);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s, color .3s;
}
b{color:var(--ink);font-weight:700}

/* 网络配色文字 */
.netA{color:var(--netA)} .netB{color:var(--netB)} .netC{color:var(--netC)}
.netD{color:var(--netD)} .netE{color:var(--netE)} .netF{color:var(--netF)}

/* ============ 顶部：皮肤切换 + 跨游戏导航 ============ */
.topstrip{max-width:1180px;margin:0 auto;padding:14px clamp(16px,4vw,40px) 0;}
.skinbar{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin:0 0 8px;}
.skinbar .lbl{font-size:12px;font-weight:800;color:var(--ink-faint);letter-spacing:.4px;}
.skinseg{display:inline-flex;background:var(--panel2);border:1px solid var(--border-soft);border-radius:999px;padding:4px;gap:2px;}
.skinseg button{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:800;color:var(--ink-faint);
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s;}
.skinseg button:hover{color:var(--ink-dim);}
.skinseg button.on{background:var(--cyan);color:#06121a;box-shadow:var(--glow);}
.topnav{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.topnav::-webkit-scrollbar{display:none;}
.topnav a,.topnav .tn-cur{flex:none;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:700;border-radius:999px;padding:8px 15px;transition:transform .12s ease;}
.topnav a{color:var(--ink-dim);background:var(--topnav-bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);backdrop-filter:blur(6px);}
.topnav a:hover{transform:translateY(-1px);}
.topnav a.tn-home{background:var(--cyan);color:#06121a;border-color:transparent;box-shadow:var(--glow);}
.topnav .tn-cur{background:var(--panel2);color:var(--ink-faint);border:1px solid var(--border-soft);cursor:default;}
.topnav .tn-cur .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow);}

/* ============ 顶栏（本游戏章节导航）============ */
.topbar{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;
  padding:2px clamp(16px,4vw,40px) 14px;
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:baseline;gap:9px}
.brand-mark{font-size:22px;filter:drop-shadow(0 0 8px var(--cyan))}
.brand-name{font-size:20px;font-weight:800;letter-spacing:.5px}
.brand-sub{font-size:11px;color:var(--ink-faint);letter-spacing:2px;text-transform:uppercase}
.chapters{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--border);background:var(--panel2);color:var(--ink-dim);
  padding:7px 14px;border-radius:999px;font-size:13px;cursor:pointer;
  transition:.18s; font-weight:600;
}
.chip:hover{color:var(--ink);border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.chip.on{background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04121f;border-color:transparent}

/* ============ 视图切换 ============ */
.view{display:none;max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,52px) clamp(16px,4vw,40px) 80px}
.view.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ Hero ============ */
.hero{display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:center;margin-bottom:42px}
.kicker{color:var(--cyan);font-weight:700;letter-spacing:3px;font-size:13px;text-transform:uppercase;margin:0 0 8px}
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.12;margin:0 0 18px;font-weight:850;letter-spacing:-.5px}
.hero h1 .accent{color:var(--ink-dim);font-weight:700}
.lead{font-size:17px;color:var(--ink-dim);margin:0 0 16px}
.quote{
  border-left:3px solid var(--mars);padding:10px 16px;margin:0 0 18px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mars) 10%,transparent),transparent);
  border-radius:0 10px 10px 0;font-size:14.5px;color:var(--ink-dim);font-style:italic;
}
.quote-src{display:block;margin-top:6px;color:var(--ink-faint);font-style:normal;font-size:13px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-actions.center{justify-content:center;margin-top:28px}

.btn{font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;border-radius:12px;padding:12px 22px;border:1px solid transparent;transition:.18s}
.btn-sm{font-size:13px;padding:8px 16px;border-radius:10px}
.btn-primary{background:linear-gradient(120deg,var(--cyan),var(--blue));color:#04121f;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--cyan) 70%,transparent), var(--glow)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-ghost{background:var(--panel2);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--ink)}
.btn-mars{background:linear-gradient(120deg,var(--mars),var(--mars-soft));color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* 电路装饰 */
.hero-art{display:flex;justify-content:center}
.circuit-art{width:100%;max-width:360px}
.chip-die{fill:var(--panel2);stroke:var(--border);stroke-width:2}
.traces path{fill:none;stroke:url(#g1);stroke-width:2.4;opacity:.85;stroke-linecap:round;
  stroke-dasharray:6 6;animation:flow 3.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-48}}
.pads circle{fill:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan))}
.core{fill:color-mix(in srgb,var(--blue) 18%,var(--panel));stroke:var(--blue);stroke-width:2}
.core-label{fill:var(--cyan);font-size:13px;font-weight:800;text-anchor:middle;font-family:var(--num),monospace}

/* 路线图卡片 */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.road-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 18px 16px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.road-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow)}
.rc-num{position:absolute;top:-8px;right:6px;font-size:54px;font-weight:900;font-family:var(--num);color:color-mix(in srgb,var(--ink) 7%,transparent)}
.road-card b{display:block;font-size:16px;margin-bottom:6px}
.road-card p{margin:0;font-size:13px;color:var(--ink-dim);position:relative}

/* ============ 关卡布局 ============ */
.level-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.board-head{margin-bottom:8px}
.board-head.center{text-align:center;max-width:760px;margin:0 auto 24px}
.board-head h2{font-size:clamp(22px,3vw,30px);margin:8px 0 0;font-weight:800}
.tag{display:inline-block;font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:1px}
.tag-mars{background:color-mix(in srgb,var(--mars) 16%,var(--panel));color:var(--mars-soft);border:1px solid color-mix(in srgb,var(--mars) 40%,transparent)}
.tag-tech{background:color-mix(in srgb,var(--cyan) 14%,var(--panel));color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent)}
.tag-core{background:color-mix(in srgb,var(--netD) 16%,var(--panel));color:var(--netD);border:1px solid color-mix(in srgb,var(--netD) 40%,transparent)}
.board-intro{font-size:15px;color:var(--ink-dim);margin:12px 0 18px}
.board-intro.center{max-width:780px;margin:14px auto 0;text-align:center}

/* 游戏挂载区 */
.game-mount{
  background:var(--board-bg);
  border:1px solid var(--border);border-radius:var(--r);padding:18px;
  display:flex;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm)
}
.board-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.status-bar{
  margin-top:12px;min-height:42px;border-radius:12px;padding:10px 14px;font-size:14px;
  background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.status-bar .pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim)}
.status-bar .pill b{color:var(--ink)}
.status-bar.win{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--panel));color:var(--good)}
.status-bar.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--panel))}

/* 教学侧栏 */
.teach-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:20px 20px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.teach-card.tight{padding:16px 16px 14px}
.teach-card h3{margin:0 0 10px;font-size:17px}
.teach-card h4{margin:14px 0 6px;font-size:15px;color:var(--cyan)}
.teach-card p{font-size:14px;color:var(--ink-dim);margin:0 0 10px}
.reveal{border-top:1px dashed var(--border);margin-top:14px;padding-top:6px;animation:fade .5s}
.map-real{background:color-mix(in srgb,var(--cyan) 8%,var(--panel));border-left:3px solid var(--cyan);padding:10px 12px;border-radius:0 8px 8px 0;color:var(--ink-dim)!important}
.hint-line{font-size:12.5px;color:var(--ink-faint);font-style:italic;margin-top:12px}
.reveal .btn{margin-top:6px}

/* ============ 关卡内 SVG 棋盘 ============ */
.routing-svg{touch-action:none;user-select:none;display:block;max-width:100%;height:auto}
.cell-rect{fill:transparent;stroke:var(--grid-line);stroke-width:1}
.grid-dot{fill:var(--grid-dot)}
.wire{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:11;opacity:.95}
.wire.layer2{stroke-dasharray:2 9;stroke-width:12}
.term-halo{opacity:.16}
.term-node{stroke:#0b1322;stroke-width:2.5}
.term-label{font-weight:800;font-size:18px;text-anchor:middle;dominant-baseline:central;fill:#0b1322;font-family:var(--num),monospace}
.cross-mark{fill:none;stroke:var(--bad);stroke-width:3}
.cross-bg{fill:color-mix(in srgb,var(--bad) 25%,transparent)}
.bridge-mark{fill:#0b1322;stroke:#fff;stroke-width:2}
.draw-hot{fill:rgba(34,211,238,.0);cursor:crosshair}
.term-hit{cursor:pointer}
.term-active{stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 0 7px currentColor)}

/* —— 第四关棋盘结构色（app.js 用 class 渲染，随皮肤适配）—— */
.chan-box{fill:color-mix(in srgb,var(--ink) 4%,transparent);stroke:var(--border)}
.track-line{stroke:var(--border);stroke-width:1.5;stroke-dasharray:4 5}
.wall-line{stroke:var(--ink-faint);stroke-width:1.5;opacity:.6}
.axis-label{fill:var(--ink-faint);font-size:12px;font-family:var(--num),monospace}
.wall-label{fill:var(--ink-dim);font-size:11px}
.term-fill{fill:var(--panel)}
.vcg-arrow{fill:var(--ink-faint)}

/* 颜色按钮 / 图例 */
.net-legend{display:flex;gap:8px;flex-wrap:wrap}
.net-btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--border);
  color:var(--ink);padding:7px 13px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;transition:.15s}
.net-btn:hover{border-color:currentColor}
.net-btn.sel{box-shadow:0 0 0 2px currentColor inset}
.net-dot{width:13px;height:13px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.net-btn .done{color:var(--good);font-size:12px}
.tool-btn{background:var(--panel2);border:1px solid var(--border);color:var(--ink-dim);
  padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.tool-btn:hover{border-color:var(--cyan);color:var(--ink)}

/* ============ 第四关 配线槽布局 ============ */
.channel-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start}
.rules-card{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-sm)}
.rules-card h4{margin:0 0 8px;color:var(--mars-soft);font-size:14px}
.rules-card ul{margin:0;padding-left:18px}
.rules-card li{font-size:13.5px;color:var(--ink-dim);margin-bottom:6px}

.mini{margin-top:10px;background:var(--panel2);border:1px solid var(--border-soft);border-radius:12px;padding:12px}
.density-row{display:flex;gap:5px;align-items:flex-end;height:90px;margin-bottom:6px}
.density-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.density-bar .bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));transition:.3s}
.density-bar.peak .bar{background:linear-gradient(180deg,var(--mars),var(--mars-soft));box-shadow:0 0 10px color-mix(in srgb,var(--mars) 50%,transparent)}
.density-bar .val{font-size:11px;color:var(--ink);font-weight:800;font-family:var(--num);margin-bottom:3px}
.density-bar .col{font-size:10px;color:var(--ink-faint);margin-top:3px}
.lb-note{font-size:13px;color:var(--ink-dim)}
.lb-note b.lb{color:var(--mars-soft);font-size:15px}

/* 垂直约束图 */
.vcg-svg{width:100%;height:auto;display:block}
.vcg-edge{stroke:var(--ink-faint);stroke-width:1.6;marker-end:url(#arrow)}
.vcg-edge.chain{stroke:var(--mars);stroke-width:2.8;marker-end:url(#arrowM)}
.vcg-node circle{stroke:#0b1322;stroke-width:2}
.vcg-node text{text-anchor:middle;dominant-baseline:central;font-weight:800;fill:#0b1322;font-size:13px;font-family:var(--num),monospace}
.vcg-node.chain circle{stroke:var(--mars);stroke-width:3}

.trap{border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.trap h3{color:var(--warn)}
.trap-q{color:var(--ink)!important;font-weight:600}
.trap-reveal{animation:fade .4s;border-top:1px dashed var(--border);margin-top:10px;padding-top:10px}
.trap-take{background:color-mix(in srgb,var(--warn) 10%,var(--panel));border-left:3px solid var(--warn);padding:10px 12px;border-radius:0 8px 8px 0;color:var(--ink-dim)!important}
.result{border-color:var(--good)}
.result h3{color:var(--good)}

/* 轨道托盘 */
.net-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tray-net{cursor:grab;user-select:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;font-weight:800;font-size:14px;font-family:var(--num),monospace;
  color:#0b1322;border:2px solid rgba(0,0,0,.2);transition:.15s}
.tray-net:active{cursor:grabbing}
.tray-net.placed{opacity:.35;filter:grayscale(.4)}
.tray-net.sel{box-shadow:0 0 0 3px var(--ink), 0 0 12px color-mix(in srgb,var(--ink) 30%,transparent);transform:scale(1.05)}
.tray-label{font-size:12px;color:var(--ink-faint);margin-right:4px}

/* ============ 思维总结 ============ */
.think-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.think-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:20px;position:relative;transition:.2s;box-shadow:var(--shadow-sm)}
.think-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.think-card.highlight{background:linear-gradient(150deg,color-mix(in srgb,var(--cyan) 10%,var(--panel)),color-mix(in srgb,var(--netD) 8%,var(--panel)));border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.think-card .ti{font-size:30px;font-weight:900;font-family:var(--num);color:var(--cyan);display:block;line-height:1}
.think-card.highlight .ti{color:var(--warn)}
.think-card h3{margin:8px 0 8px;font-size:17px}
.think-card p{font-size:13.5px;color:var(--ink-dim);margin:0}
.ti-from{position:absolute;top:18px;right:16px;font-size:11px;color:var(--ink-faint);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.closing{text-align:center;max-width:680px;margin:0 auto}
.closing p{font-size:19px;font-style:italic;color:var(--ink);border-top:1px solid var(--border);padding-top:26px}

/* footer */
.site-foot{text-align:center;padding:26px 16px;color:var(--ink-faint);font-size:12.5px;border-top:1px solid var(--border)}

/* 弹出庆祝 */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(120deg,var(--good),#10b981);color:#04140c;font-weight:800;
  padding:14px 26px;border-radius:14px;box-shadow:0 20px 50px -12px color-mix(in srgb,var(--good) 55%,transparent);
  opacity:0;pointer-events:none;transition:.35s;z-index:80;font-size:15px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ 响应式 ============ */
@media (max-width:940px){
  .hero{grid-template-columns:1fr;gap:28px}
  .hero-art{order:-1;max-width:280px;margin:0 auto}
  .roadmap{grid-template-columns:repeat(2,1fr)}
  .level-grid,.channel-layout{grid-template-columns:1fr}
  .think-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .roadmap,.think-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
  .chapters{gap:4px}
  .chip{padding:6px 10px;font-size:12px}
  .topstrip{padding-top:10px}
}