:root{
  --bg:#f3f5f9; --fg:#1b2530; --card:#ffffff; --muted:#5c6878; --border:#e3e8ef;
  --accent:#2563eb; --accent-weak:rgba(37,99,235,.09); --gold:#b45309; --gold-bg:rgba(245,158,11,.14);
  --purple:#7c3aed; --purple-bg:rgba(124,58,237,.12); --green:#16a34a; --green-bg:rgba(22,163,74,.12);
  --code-bg:rgba(148,163,184,.16); --topbar:rgba(243,245,249,.82);
  --tint1:rgba(59,130,246,.08); --tint2:rgba(236,72,153,.06);
  --hover-shadow:0 14px 30px -14px rgba(2,8,23,.28);
}
html[data-theme="dark"]{
  --bg:#0e131a; --fg:#e5eaf1; --card:#151c26; --muted:#93a1b3; --border:#28323f;
  --accent:#5d9bfb; --accent-weak:rgba(93,155,251,.13); --gold:#fbbf24; --gold-bg:rgba(251,191,36,.13);
  --purple:#a78bfa; --purple-bg:rgba(167,139,250,.14); --green:#4ade80; --green-bg:rgba(74,222,128,.13);
  --code-bg:rgba(148,163,184,.18); --topbar:rgba(14,19,26,.82);
  --tint1:rgba(59,130,246,.13); --tint2:rgba(168,85,247,.09);
  --hover-shadow:0 16px 34px -14px rgba(0,0,0,.6);
}
.c00{--cat:#f97316;--cat-soft:rgba(249,115,22,.13)}
.c01{--cat:#16a34a;--cat-soft:rgba(22,163,74,.12)}
.c02{--cat:#2563eb;--cat-soft:rgba(37,99,235,.11)}
.c03{--cat:#7c3aed;--cat-soft:rgba(124,58,237,.11)}
.c04{--cat:#0891b2;--cat-soft:rgba(8,145,178,.12)}
.c05{--cat:#e11d48;--cat-soft:rgba(225,29,72,.10)}
.c06{--cat:#d97706;--cat-soft:rgba(217,119,6,.13)}
.c07{--cat:#0284c7;--cat-soft:rgba(2,132,199,.11)}
.c08{--cat:#0d9488;--cat-soft:rgba(13,148,136,.12)}
.c09{--cat:#db2777;--cat-soft:rgba(219,39,119,.10)}
.c10{--cat:#64748b;--cat-soft:rgba(100,116,139,.14)}
html[data-theme="dark"] .c00{--cat:#fb923c}
html[data-theme="dark"] .c01{--cat:#4ade80}
html[data-theme="dark"] .c02{--cat:#60a5fa}
html[data-theme="dark"] .c03{--cat:#a78bfa}
html[data-theme="dark"] .c04{--cat:#22d3ee}
html[data-theme="dark"] .c05{--cat:#fb7185}
html[data-theme="dark"] .c06{--cat:#fbbf24}
html[data-theme="dark"] .c07{--cat:#38bdf8}
html[data-theme="dark"] .c08{--cat:#2dd4bf}
html[data-theme="dark"] .c09{--cat:#f472b6}
html[data-theme="dark"] .c10{--cat:#94a3b8}
#sec-readme{--cat:#64748b;--cat-soft:rgba(100,116,139,.13)}
html[data-theme="dark"] #sec-readme{--cat:#94a3b8}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
[hidden]{display:none!important}
body{margin:0;color:var(--fg);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 88% -8%, var(--tint1), transparent 62%),
    radial-gradient(900px 520px at -8% 34%, var(--tint2), transparent 58%),
    var(--bg);
  background-attachment:fixed}
::selection{background:var(--accent-weak)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--code-bg);border-radius:5px;padding:1px 6px;color:var(--fg)}
hr{border:none;border-top:1px solid var(--border);margin:26px 0}

/* ---- 布局 ---- */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1260px;margin:0 auto}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 18px;border-right:1px solid var(--border)}
.side-top{display:flex;gap:11px;align-items:center;margin-bottom:18px}
.side-logo{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(135deg,#6366f1,#0ea5e9);box-shadow:0 8px 16px -8px rgba(99,102,241,.7)}
.side-name{font-weight:600;font-size:15.5px;line-height:1.4;margin:0}
.side-name small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.nav-i{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;color:var(--fg);font-size:13.5px;margin:2px 0}
.nav-i:hover{background:var(--accent-weak);text-decoration:none}
.nav-i.active{background:var(--accent-weak);font-weight:500}
.nav-i .dot{flex:none;width:8px;height:8px;border-radius:99px;background:var(--cat,#94a3b8);transition:box-shadow .2s}
.nav-i.active .dot{box-shadow:0 0 0 3px var(--cat-soft,#94a3b833)}
.nav-i .nl{flex:1;min-width:0}
.nav-i .nc{flex:none;font-size:11px;color:var(--muted);background:var(--code-bg);border-radius:999px;padding:1px 8px}
.nav-i .nc.hot{color:var(--gold);background:var(--gold-bg)}
.nav-cta{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:9px 12px;border-radius:11px;color:#fff;font-size:13.5px;
  font-weight:500;background:linear-gradient(135deg,#6366f1,#0ea5e9);box-shadow:0 6px 14px -6px rgba(99,102,241,.6)}
.nav-cta:hover{text-decoration:none;filter:brightness(1.08)}
.nav-sep{height:1px;background:var(--border);margin:10px 4px}
.side-note{margin-top:18px;padding:12px 14px;border-radius:13px;background:var(--accent-weak);color:var(--muted);font-size:12px;line-height:1.7}
.side-note b{color:var(--accent)}
main{padding:0 32px 60px;min-width:0}

/* ---- 顶栏与进度条 ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#6366f1,#22d3ee,#f59e0b)}
.topbar{position:sticky;top:0;z-index:50;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 0;margin:0 0 4px;background:var(--topbar);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.search-wrap{flex:1;min-width:200px;position:relative}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
#q{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--border);border-radius:11px;
  background:var(--card);color:var(--fg);font-size:14px;outline:none;transition:box-shadow .2s,border-color .2s}
#q:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
#searchStatus{color:var(--muted);font-size:12.5px;white-space:nowrap}
.topbtn{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:11px;
  padding:8px 12px;font-size:13.5px;cursor:pointer;transition:transform .2s,border-color .2s}
.topbtn:hover{border-color:var(--accent)}
#themeBtn:hover{transform:rotate(-12deg) scale(1.06)}
#statusFilter{appearance:none;-webkit-appearance:none;padding:8px 26px 8px 12px;font-size:13px;color:var(--fg);
  border:1px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}

/* ---- Hero ---- */
.hero{position:relative;border-radius:22px;overflow:hidden;color:#fff;margin-top:16px;
  padding:42px 42px 36px;background:linear-gradient(130deg,#1e2a52 0%,#3730a3 46%,#0e7490 100%);
  box-shadow:0 22px 44px -20px rgba(49,46,129,.6)}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(103,232,249,.35),transparent 65%);pointer-events:none}
.hero .hx{position:absolute;font-size:26px;opacity:.2;user-select:none;pointer-events:none;
  animation:floaty 6s ease-in-out infinite}
.hero .kicker{display:inline-flex;gap:6px;align-items:center;font-size:12px;letter-spacing:1.5px;
  color:#c7d2fe;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  padding:4px 14px;border-radius:999px;margin:0 0 14px;position:relative}
.hero h1{font-size:34px;line-height:1.28;margin:0 0 10px;color:#fff;position:relative;letter-spacing:.5px}
.hero .grad{background:linear-gradient(90deg,#a5b4fc,#67e8f9,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:rgba(255,255,255,.85);font-size:15px;max-width:680px;margin:0 0 18px;position:relative}
.hero-cta{display:inline-flex;align-items:center;gap:8px;position:relative;margin:0 0 18px;padding:10px 20px;
  border-radius:13px;font-size:15px;font-weight:500;color:#1e2a52;
  background:linear-gradient(135deg,#fef3c7,#a5f3fc);box-shadow:0 8px 18px -8px rgba(0,0,0,.45);transition:transform .2s}
.hero-cta:hover{text-decoration:none;transform:translateY(-2px)}
.hero .chips{display:flex;flex-wrap:wrap;gap:9px;position:relative}
.hero .chip{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);color:#fff;
  border-radius:999px;padding:5px 15px;font-size:13px;backdrop-filter:blur(4px)}
.hero .chip b{color:#fff;font-weight:600}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(4deg)}}

/* ---- 章节 ---- */
.sec{scroll-margin-top:96px;margin-top:46px}
.sec-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:18px;
  border-bottom:1px solid var(--border);position:relative}
.sec-h::after{content:"";position:absolute;bottom:-1px;left:0;width:130px;height:2px;
  background:linear-gradient(90deg,var(--cat,#94a3b8),transparent)}
.sec-emoji{flex:none;width:46px;height:46px;border-radius:14px;background:var(--cat-soft,#94a3b822);
  display:flex;align-items:center;justify-content:center;font-size:23px}
.sec-h h2{font-size:22px;margin:0}
.sec-tag{flex:none;font-size:12px;color:var(--gold);background:var(--gold-bg);border-radius:999px;padding:2px 11px}
.sec-count{flex:none;color:var(--cat,#64748b);font-size:12.5px;background:var(--cat-soft,#94a3b822);border-radius:999px;padding:2px 12px}
.done-badge{flex:none;font-size:12px;color:var(--green);background:var(--green-bg);border-radius:999px;padding:2px 11px}
.group-h{font-size:16px;margin:30px 0 6px;padding-left:13px;position:relative;color:var(--cat)}
.group-h::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:4px;background:var(--cat)}
h4{font-size:15px;margin:18px 0 6px}
p{margin:8px 0}
blockquote{margin:14px 0;padding:11px 17px;border-left:3px solid var(--cat,#94a3b8);color:var(--muted);
  background:var(--card);border-radius:0 12px 12px 0}
blockquote p{margin:4px 0}
ul,ol{margin:8px 0;padding-left:24px}
li{margin:5px 0}
li::marker{color:var(--cat,#94a3b8)}
.checklist{list-style:none;padding-left:4px}
.checklist li{display:flex;gap:9px;align-items:flex-start}
.cbox{flex:none;width:14px;height:14px;border:1.5px solid var(--cat,#94a3b8);border-radius:4px;margin-top:6px}
.table-wrap{overflow-x:auto;margin:12px 0;border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--card)}
th,td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--accent-weak);font-weight:600;white-space:nowrap}

/* ---- 项目卡片 ---- */
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:15px;
  padding:16px 20px 12px 26px;margin:14px 0;
  transition:transform .25s ease,box-shadow .25s ease,border-color .15s ease}
.card::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--cat,#94a3b8),var(--cat-soft,transparent))}
.card:hover{transform:translateY(-3px);border-color:var(--cat,#94a3b8);box-shadow:var(--hover-shadow)}
.card[data-status="done"]{border-color:var(--green)}
.card[data-status="done"]::before{background:linear-gradient(180deg,var(--green),var(--green-bg))}
.card[data-status="want"]{border-style:dashed}
.card-t{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:15.5px;margin:0 0 6px;font-weight:600}
.card-t a{word-break:break-all}
.card-t a:hover{color:var(--cat)}
.cnum{flex:none;min-width:26px;text-align:center;background:var(--cat-soft);color:var(--cat);
  border-radius:8px;font-size:12.5px;padding:1px 7px;font-weight:600}
.stars{flex:none;font-size:12.5px;color:var(--gold);border-radius:999px;padding:2px 11px;font-weight:600;
  background:linear-gradient(135deg,var(--gold-bg),rgba(245,158,11,.24))}
.tag-minor{flex:none;font-size:12px;color:var(--purple);background:var(--purple-bg);border-radius:999px;padding:2px 11px}
.fld{display:inline-block;font-size:12px;color:var(--cat);background:var(--cat-soft);
  border-radius:6px;padding:1px 9px;margin-right:8px;vertical-align:1px;white-space:nowrap}
.fld::before{content:"💡 ";font-size:10.5px}
.fld-r{color:var(--gold);background:var(--gold-bg)}
.fld-r::before{content:"🎯 "}
.desc,.reason{margin:7px 0}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;padding-top:9px;border-top:1px dashed var(--border)}
.act{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:999px;
  padding:3px 12px;font-size:12.5px;cursor:pointer;transition:all .15s}
.act:hover{border-color:var(--cat,#94a3b8);color:var(--fg)}
.act.on{color:var(--green);border-color:var(--green);background:var(--green-bg)}
.act.on[data-act="want"]{color:var(--gold);border-color:var(--gold);background:var(--gold-bg)}
.card.flash{animation:flashRing 1.8s ease}
@keyframes flashRing{0%,60%{box-shadow:0 0 0 4px var(--cat-soft),0 0 0 1px var(--cat)}100%{box-shadow:var(--hover-shadow)}}

/* ---- 建议框 ---- */
.advice{background:linear-gradient(135deg,var(--gold-bg),transparent 65%),var(--card);
  border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:14px;padding:6px 22px 12px;margin:28px 0 6px}
.advice-h{color:var(--gold);margin:12px 0 4px}
.advice-h::before{content:"💡 "}

/* ---- 路线生成器 ---- */
.wiz-head{margin-top:26px}
.wiz-steps{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0 20px;flex-wrap:wrap}
.wiz-steps li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
  background:var(--card);border:1px solid var(--border);border-radius:999px;padding:5px 14px}
.wiz-steps li .n{width:20px;height:20px;border-radius:50%;background:var(--code-bg);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.wiz-steps li.on{color:var(--fg);border-color:var(--accent)}
.wiz-steps li.on .n{background:var(--accent);color:#fff}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px;margin:14px 0 18px}
.opt{display:flex;flex-direction:column;gap:5px;text-align:left;padding:15px 16px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--card);color:var(--fg);transition:all .15s;font-size:13.5px}
.opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);background:var(--accent-weak)}
.opt-e{font-size:24px;line-height:1}
.opt-n{font-weight:600;font-size:14.5px}
.opt-d{color:var(--muted);font-size:12.5px;line-height:1.6}
.wiz-nav{display:flex;gap:10px;margin-top:8px}
.wbtn{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:11px;
  padding:9px 20px;font-size:14px;cursor:pointer}
.wbtn.primary{border:none;color:#fff;font-weight:500;background:linear-gradient(135deg,#6366f1,#0ea5e9)}
.wbtn:disabled{opacity:.45;cursor:not-allowed}
.wbtn:not(:disabled):hover{transform:translateY(-1px)}

/* ---- 我的路线 ---- */
.plan-head{margin:26px 0 8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.plan-head .sec-emoji{width:52px;height:52px;font-size:26px}
.plan-head h2{margin:0;font-size:24px}
.plan-sub{color:var(--muted);font-size:13.5px;margin:2px 0 0}
.focus-callout{background:linear-gradient(135deg,var(--gold-bg),transparent 70%),var(--card);
  border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:14px;padding:14px 18px;margin:18px 0}
.focus-callout b{color:var(--gold)}
.timeline{position:relative;margin:24px 0 8px;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#6366f1,#22d3ee,#f59e0b)}
.stage{position:relative;background:var(--card);border:1px solid var(--border);border-radius:15px;
  padding:16px 20px;margin:0 0 18px}
.stage::before{content:"";position:absolute;left:-24px;top:24px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:3.5px solid #6366f1}
.stage:nth-child(2)::before{border-color:#0ea5e9}
.stage:nth-child(3)::before{border-color:#22d3ee}
.stage:nth-child(4)::before{border-color:#f59e0b}
.st-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-head h4{margin:0;font-size:16.5px}
.st-weeks{font-size:12px;color:var(--accent);background:var(--accent-weak);border-radius:999px;padding:2px 11px}
.opt-tag{font-size:12px;color:var(--muted);background:var(--code-bg);border-radius:999px;padding:2px 11px}
.st-progress{margin-left:auto;font-size:12px;color:var(--green)}
.st-goal{color:var(--muted);margin:8px 0 4px;font-size:14px}
.st-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:8px 22px}
.st-cols h5{margin:10px 0 4px;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:9px;align-items:flex-start;margin:7px 0}
.steps input[type="checkbox"]{flex:none;width:16px;height:16px;margin-top:5px;accent-color:var(--green);cursor:pointer}
.steps input[type="checkbox"]:checked+span{color:var(--muted);text-decoration:line-through}
.accepts{margin:0}
.accepts li{color:var(--fg)}
.accepts li::marker{content:"✅ "}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.pchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 12px;border-radius:10px;
  font-size:12.5px;color:var(--fg);background:var(--cat-soft,#94a3b822);border:1px solid var(--border);transition:all .15s}
.pchip:hover{text-decoration:none;border-color:var(--cat,#94a3b8);transform:translateY(-1px)}
.pchip .pc-star{color:var(--gold);font-size:11.5px}
.pchip.done{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.extra-box{background:var(--card);border:1px dashed var(--accent);border-radius:15px;padding:14px 20px;margin:8px 0 18px}
.extra-box h4{margin:4px 0 2px;color:var(--accent)}

/* ---- 迭代1：阶段总览条（借鉴 roadmap.sh）+ toast + 庆祝 ---- */
.rmap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin:0 0 20px}
.rmap-node{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:11px;
  border:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer;
  font-size:13px;transition:all .15s;text-align:left}
.rmap-node:hover{border-color:var(--accent);transform:translateY(-1px)}
.rmap-node .rm-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-weak);
  color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.rmap-node .rm-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.rmap-node .rm-txt b{font-size:12.5px;font-weight:600;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmap-node .rm-txt i{font-style:normal;font-size:11px;color:var(--muted)}
.rmap-node.done{border-color:var(--green)}
.rmap-node.done .rm-num{background:var(--green);color:#fff}
.rmap-node.current{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.rm-arrow{color:var(--muted);font-size:14px;user-select:none}
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);z-index:210;
  background:var(--card);border:1px solid var(--border);color:var(--fg);border-radius:12px;
  padding:10px 18px;font-size:14px;box-shadow:var(--hover-shadow);opacity:0;pointer-events:none;transition:all .3s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 迭代2：命令面板（借鉴 Linear/Raycast/Vercel 的 ⌘K 模式） ---- */
.cmdk-backdrop{position:fixed;inset:0;z-index:150;background:rgba(10,15,25,.45);backdrop-filter:blur(3px)}
.cmdk{position:fixed;left:50%;top:13vh;transform:translateX(-50%);z-index:160;width:min(600px,93vw);
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 24px 60px -12px rgba(2,8,23,.5);overflow:hidden}
.cmdk input{width:100%;border:none;outline:none;background:transparent;color:var(--fg);
  font-size:15px;padding:16px 18px;border-bottom:1px solid var(--border)}
.cmdk-list{max-height:min(420px,56vh);overflow-y:auto;padding:8px}
.cmdk-group{font-size:11px;color:var(--muted);letter-spacing:1px;padding:10px 12px 4px;font-weight:600}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;font-size:14px;color:var(--fg)}
.cmdk-item .ck-ico{flex:none;width:22px;text-align:center}
.cmdk-item .ck-hint{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.cmdk-item.active{background:var(--accent-weak)}
.cmdk-empty{padding:28px;text-align:center;color:var(--muted);font-size:13.5px}
.cmdk-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;flex-wrap:wrap}
kbd{font-family:inherit;font-size:11px;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;background:var(--code-bg);color:var(--fg)}

/* ---- 迭代10修复：新手引导浮层（独立类，勿复用 .cmdk 的定位） ---- */
.onboard-panel{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:460px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 24px 60px -12px rgba(2,8,23,.5);overflow:hidden}

/* ---- 迭代3：学习热力图（借鉴 GitHub 贡献图） ---- */
.hm-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin:0 0 18px}
.hm-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hm-head h4{margin:0;font-size:15px}
.hm-stats{display:flex;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.hm-stats b{color:var(--gold)}
.hm-scroll{overflow-x:auto;padding-bottom:4px}
.hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);gap:3.5px;width:max-content}
.hm span{width:13px;height:13px;border-radius:3.5px;background:var(--code-bg)}
.hm span.h1{background:rgba(74,222,128,.32)}
.hm span.h2{background:rgba(74,222,128,.5)}
.hm span.h3{background:rgba(74,222,128,.72)}
.hm span.h4{background:var(--green)}
.hm span.future{opacity:.3}
.hm-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:10px;justify-content:flex-end}
.hm-legend i{width:11px;height:11px;border-radius:3px;background:var(--code-bg);font-style:normal}
.hm-legend i.h1{background:rgba(74,222,128,.32)}
.hm-legend i.h2{background:rgba(74,222,128,.5)}
.hm-legend i.h3{background:rgba(74,222,128,.72)}
.hm-legend i.h4{background:var(--green)}

/* ---- 迭代6：成就墙 / 游戏中心 ---- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:18px 0}
.badge{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;opacity:.55}
.badge.on{opacity:1;border-color:var(--gold);box-shadow:0 6px 18px -10px rgba(245,158,11,.5)}
.badge .b-ico{font-size:30px;line-height:1.2}
.badge .b-n{font-weight:600;font-size:14px;margin-top:6px}
.badge .b-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:13px;margin:16px 0}
.game-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:17px 18px;border-radius:15px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--card);color:var(--fg);transition:all .15s;font-size:13.5px}
.game-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--hover-shadow)}
.game-card .g-ico{font-size:28px;line-height:1.1}
.game-card .g-n{font-weight:600;font-size:15px}
.game-card .g-d{color:var(--muted);font-size:12.5px;line-height:1.6}
.game-card .g-best{font-size:11.5px;color:var(--gold);font-weight:600}
.game-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:14px 0}
.game-box h3{margin:0 0 4px;font-size:17px}
.game-box .g-sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.gscore{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:8px 0}
.gscore b{color:var(--accent);font-size:17px}
.bulbs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.bulb{width:52px;height:52px;border-radius:13px;border:2px solid var(--border);background:var(--code-bg);
  color:var(--muted);font-size:19px;font-weight:700;cursor:pointer;transition:all .15s}
.bulb.on{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 0 14px rgba(245,158,11,.55)}
.quiz-code{background:var(--code-bg);border-radius:12px;padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13.5px;white-space:pre;overflow-x:auto;margin:10px 0;line-height:1.6}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.quiz-opt{padding:11px 14px;border-radius:11px;border:1.5px solid var(--border);background:var(--card);
  color:var(--fg);cursor:pointer;font-size:14px;text-align:left;transition:all .12s;font-family:ui-monospace,Menlo,Consolas,monospace}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt.right{border-color:var(--green);background:var(--green-bg)}
.quiz-opt.wrong{border-color:#ef4444;background:rgba(239,68,68,.1)}
.bug-line{display:flex;width:100%;color:inherit;background:transparent;border:0;text-align:left;white-space:pre;gap:8px;align-items:flex-start;padding:3px 10px;border-radius:7px;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.6}
.bug-line:hover{background:var(--accent-weak)}
.bug-line .ln{flex:none;width:26px;color:var(--muted);user-select:none}
.bug-line.right{background:var(--green-bg);outline:1.5px solid var(--green)}
.bug-line.wrong{background:rgba(239,68,68,.1);outline:1.5px solid #ef4444}
.type-area{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;white-space:pre-wrap;
  background:var(--code-bg);border-radius:12px;padding:14px 16px;margin:10px 0;min-height:120px}
.type-area .ok{color:var(--green)}
.type-area .bad{color:#ef4444;background:rgba(239,68,68,.12);border-radius:2px}
.type-area .cur{border-left:2px solid var(--accent);margin-left:-2px;padding-left:1px}
.type-input{width:100%;min-height:110px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--card);color:var(--fg);outline:none;resize:vertical}
.type-input:focus{border-color:var(--accent)}
.morse-big{font-size:30px;letter-spacing:8px;font-weight:700;text-align:center;margin:16px 0;color:var(--cat,#8b5cf6)}
.gate-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0}
.gate-box{border:1.5px solid var(--border);border-radius:11px;padding:8px 14px;background:var(--accent-weak);
  font-weight:600;font-size:13.5px}
.gate-box .gstate{color:var(--accent);margin-left:8px;font-family:ui-monospace,Menlo,Consolas,monospace}
.lamp{font-size:34px;filter:grayscale(1) opacity(.45);transition:all .2s}
.lamp.lit{filter:none;text-shadow:0 0 18px rgba(245,158,11,.8)}
.turtle-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.turtle-canvas{border:1px solid var(--border);border-radius:14px;background:#fff;width:100%;display:block}
html[data-theme="dark"] .turtle-canvas{background:#0d1420}
.turtle-err{font-size:12.5px;color:#ef4444;margin:6px 0;white-space:pre-wrap}
.turtle-levels{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tl-chip{padding:5px 13px;border-radius:999px;border:1.5px solid var(--border);background:transparent;
  color:var(--fg);font-size:12.5px;cursor:pointer}
.tl-chip.done{border-color:var(--green);color:var(--green)}
.tl-chip.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* ---- 迭代9：电梯调度 ---- */
.lift-building{background:var(--code-bg);border-radius:12px;padding:8px 10px;margin:10px 0;min-width:300px}
.lift-floor-row{display:flex;align-items:center;gap:8px;height:38px;border-bottom:1px dashed var(--border)}
.lift-floor-row.now{background:var(--accent-weak);border-radius:8px}
.lf-num{flex:none;width:32px;font-weight:600;font-size:12.5px;color:var(--muted)}
.lf-wait{flex:none;width:86px;font-size:15px;white-space:nowrap;overflow:hidden}
.lf-shaft{flex:none;width:90px;text-align:center;border-left:2px solid var(--border);border-right:2px solid var(--border)}
.lift-car{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--card);font-size:14px;transition:top .3s}
.lift-floor-row.now .lift-car{background:var(--gold);color:#fff}
.lf-dest{font-size:11.5px;color:var(--accent)}
.share-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0}
.share-url{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--code-bg);color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 迭代7：编程机器人闯关 ---- */
.rgrid{position:relative;width:340px;height:284px;background:var(--code-bg);border-radius:12px;margin:10px 0;overflow:hidden}
.rcell{position:absolute;width:52px;height:52px;border-radius:10px;background:var(--card);border:1px solid var(--border)}
.rcell.wall{background:repeating-linear-gradient(45deg,var(--border),var(--border) 4px,transparent 4px,transparent 9px)}
.rcell.coin::after{content:"🪙";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px}
.rcell.exit::after{content:"🚩";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.rrobot{position:absolute;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:2;transition:left .17s ease,top .17s ease}
.rrobot span{display:inline-block;transition:transform .18s ease}

/* ---- 迭代14：技能树（借鉴 cs-math-skill-tree） ---- */
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.td-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-decoration:none;color:var(--fg);transition:all .15s}
.td-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.td-ico{font-size:24px}
.td-n{font-weight:600;font-size:14px;margin:6px 0 8px}
.td-bar{height:8px;border-radius:99px;background:var(--code-bg);overflow:hidden}
.td-fill{height:100%;background:linear-gradient(90deg,#22c55e,#84cc16);border-radius:99px}
.td-num{font-size:11.5px;color:var(--muted);margin-top:5px}
.tmap-wrap{overflow-x:auto;background:var(--code-bg);border-radius:14px;padding:12px;border:1px solid var(--border)}
.tmap{display:flex;gap:16px;width:max-content;position:relative}
.tlane{width:196px;flex:none}
.tlane-t{font-size:12px;color:var(--muted);font-weight:600;margin:0 0 8px;padding-left:4px}
.tnode{display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px;margin:6px 0;border-radius:10px;
  border:1.5px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;font-size:12.5px;text-align:left;transition:all .12s}
.tnode:hover{transform:translateY(-1px);border-color:var(--accent)}
.tnode .tn-st{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.tnode.lit{border-color:var(--green)}
.tnode.lit .tn-st{background:var(--green);color:#fff}
.tnode.ready{border-color:var(--accent)}
.tnode.ready .tn-st{background:var(--accent-weak);color:var(--accent)}
.tnode.locked{opacity:.62}
.tnode.locked .tn-st{background:var(--code-bg);color:var(--muted)}
.tnode.hl-must{box-shadow:0 0 0 3px var(--gold-bg), 0 0 0 1px var(--gold)}
.tnode.hl-rec{box-shadow:0 0 0 2px var(--accent-weak)}
.tnode.sel{box-shadow:0 0 0 3px var(--accent)}
.tlines{position:absolute;inset:0;pointer-events:none;z-index:1}
#treeDrawer{position:fixed;right:0;top:0;bottom:0;width:min(400px,94vw);z-index:190;background:var(--card);
  border-left:1px solid var(--border);box-shadow:-16px 0 40px rgba(2,8,23,.3);transform:translateX(102%);
  transition:transform .25s ease;padding:20px 22px;overflow-y:auto}
#treeDrawer.open{transform:none}
#treeDrawer .dw-close{position:absolute;top:12px;right:14px;border:none;background:none;color:var(--muted);font-size:20px;cursor:pointer}
#treeDrawer h3{margin:6px 0 4px;font-size:17px;padding-right:26px}
#treeDrawer .dw-desc{font-size:13.5px;color:var(--fg);line-height:1.7;margin:10px 0}
#treeDrawer .dw-sec{font-size:12px;color:var(--muted);font-weight:600;margin:14px 0 6px}
#treeDrawer .dw-must{list-style:none;padding:0;margin:0}
#treeDrawer .dw-must li{margin:4px 0}
#treeDrawer .dw-must button{border:none;background:none;color:var(--accent);cursor:pointer;font-size:12.5px;padding:0;text-align:left}
#treeDrawer .dw-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ---- 迭代12：驾驶舱 / 编辑器 / 笔记 / 收藏夹 ---- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.dash-w{min-width:0}
.dash-w .hm-wrap,.dash-w .share-box{margin-top:0}
.dw-h{margin:0 0 8px;font-size:14.5px;color:var(--muted);font-weight:600}
.act-row{display:flex;gap:6px;align-items:center;margin:5px 0}
.act-in{flex:1;min-width:0;font-size:13.5px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg);outline:none}
.act-in:focus{border-color:var(--accent)}
.mini{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:12px;flex:none}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.winput{border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg);padding:3px 8px;font-size:13px;outline:none;text-align:center}
.winput:focus{border-color:var(--accent)}
.st-note{color:var(--gold);font-size:13.5px;margin:6px 0}
.note-wrap{margin:8px 0 2px}
.note-ta{width:100%;min-height:74px;font-size:13.5px;line-height:1.7;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--fg);outline:none;resize:vertical;font-family:inherit}
.note-ta:focus{border-color:var(--accent)}
.note-saved{font-size:11px;color:var(--muted);text-align:right;margin-top:3px}
.card.hasnote::after{content:"✍️";position:absolute;top:12px;right:14px;font-size:12px}
.lib-pick{background:var(--code-bg);border-radius:10px;padding:8px 10px;margin:8px 0}
.lib-pick input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg);font-size:13px;outline:none;margin-bottom:6px}
.lib-pick .lp-item{display:block;width:100%;text-align:left;padding:5px 8px;border:none;background:transparent;color:var(--fg);font-size:12.5px;cursor:pointer;border-radius:6px}
.lib-pick .lp-item:hover{background:var(--accent-weak)}
.tpl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--border)}
html.brief .reason{display:none}
html.brief .card{padding-bottom:11px}
html.brief .card-actions{margin-top:6px;padding-top:6px}
html.brief .card.flash{animation:none}
.topbtn.on{border-color:var(--accent);color:var(--accent)}

/* ---- 迭代11：篇章动态头图 / 环形图 / 视频课 / 简洁模式 ---- */
.sec-banner{height:100px;border-radius:14px;overflow:hidden;margin:0 0 8px;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 42%), var(--cat, #64748b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec-banner svg{width:100%;height:100%;display:block}
.video-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px;font-size:12px;color:var(--muted)}
.video-row .vr-label{opacity:.85}
.video-row a{padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--fg);transition:all .15s}
.video-row a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.donut-row{display:flex;align-items:center;gap:16px;margin-top:14px;position:relative}
.donut-cap{color:rgba(255,255,255,.88);font-size:13px;line-height:1.8}
.bn-dash{stroke-dasharray:10 12;animation:bnMarch 1.2s linear infinite}
@keyframes bnMarch{to{stroke-dashoffset:-22}}
.bn-wave{stroke-dasharray:14 10;animation:bnMarch 1.6s linear infinite}
.bn-draw{stroke-dasharray:600;stroke-dashoffset:600;animation:bnDraw 2.4s ease forwards infinite alternate}
@keyframes bnDraw{to{stroke-dashoffset:0}}
.bn-pulse{animation:bnPulse 2.4s ease-in-out infinite}
@keyframes bnPulse{0%,100%{opacity:.45;r:5}50%{opacity:1;r:9}}
.bn-spin{animation:bnSpin 5s linear infinite;transform-box:fill-box}
@keyframes bnSpin{to{transform:rotate(360deg)}}
.bn-bar{transform-origin:center bottom;animation:bnBar 1.5s ease-in-out infinite alternate}
@keyframes bnBar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.bn-fall{animation:bnFall 3.2s linear infinite}
.bn-fall2{animation:bnFall 3.2s linear infinite;animation-delay:1.6s}
@keyframes bnFall{from{transform:translateY(-14px);opacity:0}20%{opacity:.9}80%{opacity:.9}to{transform:translateY(70px);opacity:0}}
.bn-cursor{animation:bnBlink 1.1s steps(1) infinite}
@keyframes bnBlink{50%{opacity:0}}
.bn-travel{animation:bnTravel 2.6s ease-in-out infinite}
@keyframes bnTravel{0%{transform:translateX(0)}50%{transform:translateX(60px)}100%{transform:translateX(0)}}
html.brief .reason{display:none}
html.brief .card{padding-bottom:11px}
html.brief .card-actions{margin-top:6px;padding-top:6px}
html.brief .card.flash{animation:none}
.topbtn.on{border-color:var(--accent);color:var(--accent)}

/* ---- 我的进度 ---- */
.pg-overview{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border);border-radius:16px;padding:20px 24px;margin:20px 0}
.pg-big{font-size:44px;font-weight:600;line-height:1;color:var(--accent)}
.pg-big small{font-size:15px;color:var(--muted);font-weight:400}
.pg-track{flex:1;min-width:220px}
.pg-bar{height:12px;border-radius:99px;background:var(--code-bg);overflow:hidden}
.pg-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#22d3ee,#f59e0b);transition:width .5s ease}
.pg-meta{font-size:13px;color:var(--muted);margin-top:7px}
.pg-row{display:flex;align-items:center;gap:12px;margin:9px 0}
.pg-row .pg-name{flex:none;width:150px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-row .pg-bar{flex:1;height:9px}
.pg-row .pg-num{flex:none;width:64px;font-size:12px;color:var(--muted);text-align:right}
.pg-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.pg-empty{text-align:center;color:var(--muted);padding:34px 10px;border:1px dashed var(--border);border-radius:16px;margin:22px 0}
.pg-empty .big{font-size:34px}

/* ---- 动画与状态 ---- */
.reveal .card:not(.in){opacity:0;transform:translateY(16px)}
.reveal .card{will-change:transform,opacity}
.reveal .card.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease,border-color .15s ease,box-shadow .25s ease}
.reveal .card.in:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){
  .hero .hx{animation:none}
  .sec-banner *{animation:none!important}
  .reveal .card{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
.hide{display:none!important}
#toTop{position:fixed;right:22px;bottom:22px;z-index:60;border:1px solid var(--border);background:var(--card);
  color:var(--fg);border-radius:999px;width:42px;height:42px;font-size:17px;cursor:pointer;box-shadow:var(--hover-shadow);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-3px);border-color:var(--accent)}
footer{margin-top:48px;padding:22px 0 6px;border-top:1px solid var(--border);color:var(--muted);
  font-size:12.5px;line-height:1.9;text-align:center}
footer .fgrad{height:2px;max-width:220px;margin:0 auto 16px;border-radius:2px;
  background:linear-gradient(90deg,#6366f1,#22d3ee,#f59e0b)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- 紧凑模式 ---- */
html.dense body{line-height:1.6}
html.dense .card{padding:10px 16px 8px 24px;margin:9px 0}
html.dense .desc,html.dense .reason{margin:4px 0}
html.dense .card-actions{margin:7px 0 0;padding-top:6px}
html.dense .stage{padding:12px 16px;margin-bottom:12px}

/* ---- 响应式与打印 ---- */
@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border);padding:16px 10px}
  .nav-i{display:inline-flex;margin:3px 4px 3px 0}
  .nav-cta{display:inline-flex;margin:3px 4px 3px 0}
  .side-top{margin-bottom:10px}
  main{padding:0 16px 50px}
  .hero{padding:28px 22px 26px;border-radius:16px}
  .hero h1{font-size:25px}
  .hero .hx{display:none}
  .sec-h h2{font-size:19px}
  .st-cols{grid-template-columns:1fr}
  .pg-row .pg-name{width:110px}
}
@media print{
  .sidebar,.topbar,#toTop,#progress,.card-actions,.wiz-head{display:none!important}
  body.print-plan #view-library{display:none!important}
  body.print-plan #view-plan{display:block!important}
  body.print-plan .rmap,body.print-plan .pg-actions,body.print-plan [data-jump-hash]{display:none!important}
  body.print-plan .stage{break-inside:avoid;box-shadow:none;margin-bottom:14px}
  body.print-plan .focus-callout{background:var(--card)}
  .view[hidden]{display:block!important}
  .card{break-inside:avoid;box-shadow:none}
  .hero{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}