/* 有用 · useful.qiaomu.ai —— 设计系统
   纸色底 + 墨色字 + 每个领域一个主题色（--h 色相）。规则：不用竖条侧边装饰，强调靠底色、字重、圆点与数字。 */
:root{
  --h:60;
  --bg:#f7f4ee; --surface:#fffdf9; --surface2:#f1ede3; --ink:#1d1b17; --ink2:#3a362e; --muted:#6b665c; --line:#e5dfd1; --line2:#d6cfbd;
  --gold:#f2b84b; --on-gold:#1d1b17; --red:#b4412c; --green:#2f7d4f;
  --on-accent:#fff;
  --shadow:0 1px 2px rgba(40,30,10,.05),0 10px 28px -14px rgba(40,30,10,.14);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r:16px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14130f; --surface:#1c1a16; --surface2:#24211b; --ink:#f1ede4; --ink2:#d9d4c8; --muted:#a39d8f; --line:#2e2b24; --line2:#3d3a31;
  --on-accent:#14130f; --red:#e0735c; --green:#6cc08c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.6);
}}
/* 派生色必须在每个带 --h 的元素上重新计算 */
:root,[style*="--h"]{--accent:oklch(.52 .15 var(--h)); --tint:oklch(.955 .03 var(--h)); --tint2:oklch(.91 .06 var(--h)); --soft:oklch(.985 .012 var(--h))}
@media (prefers-color-scheme:dark){:root,[style*="--h"]{--accent:oklch(.78 .12 var(--h)); --tint:oklch(.27 .045 var(--h)); --tint2:oklch(.34 .07 var(--h)); --soft:oklch(.22 .03 var(--h))}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.read{width:min(740px,100% - 40px)}
kbd{font:600 11px var(--mono);padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;color:var(--muted);background:var(--surface)}
code{font:.9em var(--mono);background:var(--surface2);padding:1px 6px;border-radius:6px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .small{font-size:14px}
i.sp{font-style:italic;font-family:var(--serif)}

/* 阅读进度条 */
.rbar{position:fixed;inset:0 0 auto 0;height:3px;z-index:50;pointer-events:none}
.rbar i{display:block;height:100%;width:0;background:var(--accent)}

/* 顶栏 */
.top{position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .lb{fill:var(--ink)} .logo .lc{fill:var(--bg);fill-opacity:.24} .logo .lh{fill:var(--gold)}
.logo{flex:none;display:block}
.brand-name{font:700 21px/1 var(--serif);letter-spacing:.02em}
.brand-name small{font:500 10.5px var(--sans);color:var(--muted);letter-spacing:.02em;margin-top:2px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:6px 12px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--muted)}
.nav a:hover{background:var(--surface2);color:var(--ink)}
.top-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.tool{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);transition:.15s}
.tool:hover{color:var(--ink);border-color:var(--line2)}
.tool.icon{width:36px;padding:0;justify-content:center}
.search-btn span{font-size:13.5px}
.search-btn kbd{margin-left:4px}

/* 通用 */
.eyebrow{font:600 12.5px var(--mono);letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:40em;line-height:1.7}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;font-size:15px;transition:transform .12s,opacity .12s}
.btn:hover{opacity:.9} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{background:var(--surface2);opacity:1}
.block{padding:56px 0 8px}
.block-head{margin-bottom:22px}
.block-head.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.block-head h2{font-size:clamp(24px,3.2vw,32px)}
.block-head p{color:var(--muted);margin-top:6px}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:4px;white-space:nowrap}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted);margin:26px 0 0}
.crumb a{text-decoration:none} .crumb a:hover{color:var(--ink)}
.crumb span:nth-child(even){opacity:.5}
.pagehead{padding:64px 0 8px}
.pagehead h1{font-size:clamp(34px,5vw,52px);margin-bottom:14px}

/* 首页 hero */
.hero{padding:clamp(72px,12vw,128px) 0 clamp(40px,6vw,64px);text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:70%;background:radial-gradient(60% 80% at 50% 0%,color-mix(in oklab,var(--gold) 16%,transparent),transparent);pointer-events:none;z-index:-1}
.hero h1{font-size:clamp(40px,7.4vw,84px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0 auto 24px;text-wrap:balance}
.hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.09em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.hero .lede{margin:0 auto;text-align:center;font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:30em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;margin-top:36px}
.btn.lg{min-height:52px;padding:0 30px;border-radius:999px;font-size:16px}
.btn-link{font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);padding:10px 2px}
.btn-link:hover{color:var(--accent)}
.search-fake{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;width:min(460px,100%);border:1px solid var(--line2);border-radius:14px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow);text-align:left}
.search-fake span{flex:1;font-size:15px}
.search-fake:hover{border-color:var(--ink)}
.criteria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.criteria li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:14px;line-height:1.55;color:var(--muted)}
.criteria em{display:block;font-style:normal;font-weight:700;color:var(--ink);font-size:15px;margin-bottom:2px}
.criteria b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px var(--sans)}

/* 周期表 */
.pt-sec{padding-top:40px}
.pt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}
.pt-head h2{font-size:clamp(24px,3.2vw,32px)}
.pt-head p{color:var(--muted);margin-top:6px;font-size:14.5px}
.pt-stat{text-align:right;white-space:nowrap}
.pt-stat b{font:700 34px var(--serif);color:var(--accent)} .pt-stat span{color:var(--muted);font-size:13px;margin-left:6px}
.ptable-wrap{overflow-x:auto;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);scrollbar-width:thin}
.ptable{min-width:calc(var(--cols) * 34px);display:grid;gap:6px}
.pt-row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px}
.pt-g{font:600 11.5px var(--mono);color:var(--muted);letter-spacing:.08em;padding-bottom:6px;border-bottom:1px solid var(--line2);text-align:left}
.pt-h{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--tint2);color:var(--accent);font:700 17px var(--serif);text-decoration:none;transition:transform .12s}
.pt-h:hover{transform:translateY(-2px)}
.pt-c{display:grid;gap:5px;align-content:start}
.cell{display:grid;place-items:center;aspect-ratio:1;border-radius:7px;background:var(--tint);color:color-mix(in oklab,var(--accent) 70%,transparent);font:600 10px var(--mono);text-decoration:none;transition:transform .12s,background .12s}
.cell:hover{background:var(--accent);color:var(--on-accent);transform:scale(1.14);position:relative;z-index:2}
.cell.is-done{background:var(--accent);color:var(--on-accent)}
.cell.is-due{box-shadow:0 0 0 2px var(--gold)}
.tip{position:fixed;z-index:90;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12.5px;line-height:1.4;max-width:240px;box-shadow:var(--shadow)}
.tip[hidden]{display:none}
.tip small{display:block;opacity:.7;font-size:11px}

/* 复习卡 */
.review{padding:22px;border:1px solid var(--tint2);border-radius:var(--r);background:var(--soft)}
.review h3{font-size:19px;margin-bottom:4px}
.review p{color:var(--muted);font-size:14.5px;margin-bottom:12px}

/* 行列表 */
.rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row{display:grid;grid-template-columns:44px 1fr auto 24px;gap:14px;align-items:center;padding:16px 18px;text-decoration:none;border-top:1px solid var(--line);transition:background .12s}
.rows>.row:first-child,.rows>.arow:first-child .row{border-top:0}
.arow+.arow .row{border-top:1px solid var(--line)}
.row:hover{background:var(--tint)}
.row-n{font:700 22px var(--serif);color:var(--accent);font-variant-numeric:tabular-nums}
.row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.row-title{font:700 17px/1.4 var(--serif);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row-hook{color:var(--muted);font-size:14.5px;line-height:1.55}
.row-dom{font:600 11.5px var(--sans);padding:1px 8px;border-radius:999px;background:var(--tint2);color:var(--accent)}
.row-meta{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;color:var(--muted);white-space:nowrap;line-height:1.5}
.row-done{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:transparent;border:1.5px solid var(--line2)}
.row.is-done .row-done{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row.is-done .row-title{opacity:.75}

/* 领域卡 */
.group{margin-bottom:40px}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.group-head h2{font-size:26px}
.group-head p{color:var(--muted);font-size:14.5px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.dcard{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.dcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.dcard-top{display:flex;justify-content:space-between;align-items:center}
.tile{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--tint2);color:var(--accent);font:700 24px var(--serif)}
.tile.sm{width:26px;height:26px;border-radius:8px;font-size:14px}
.tile.xl{width:84px;height:84px;border-radius:24px;font-size:46px}
.dcard-body{display:flex;flex-direction:column;gap:4px;flex:1}
.dcard-name{font:700 19px var(--serif)}
.dcard-tag{font-size:13.5px;color:var(--muted);line-height:1.55}
.bar{display:block;height:6px;border-radius:99px;background:var(--surface2);overflow:hidden;flex:1}
.bar.big{height:8px;max-width:360px}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s}
.dcard-count{font:600 12.5px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}

/* 路线卡 */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.pcard:hover{transform:translateY(-3px);border-color:var(--ink)}
.pcard-tiles{display:flex;gap:4px;flex-wrap:wrap}
.pcard-title{font:700 19px var(--serif)}
.pcard-desc{color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.pcard-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.pcard-prog{font-weight:600;color:var(--accent)}
.path{margin-bottom:48px}
.path-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:16px}
.path-head h2{font-size:26px;margin-bottom:6px}
.path-head p{color:var(--muted)}
.path-meta{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;color:var(--muted);white-space:nowrap}
.path-meta b{font:700 18px var(--serif);color:var(--ink)}
.path-prog{font-weight:600;color:var(--accent)}
.path-why{margin-top:12px;color:var(--muted);font-size:14.5px}

/* 说明块 */
.how{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.how-col{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.how h3{font-size:21px;margin-bottom:14px}
.how-list{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--muted)}
.how-list b{color:var(--ink);margin-right:8px}
.how-col p{color:var(--muted);margin-bottom:12px}

/* 领域页 */
.dhead{background:linear-gradient(var(--tint),var(--bg));padding-bottom:36px;border-bottom:1px solid var(--line)}
.dhead-main{display:flex;gap:24px;align-items:center;margin:26px 0 20px}
.dhead h1{font-size:clamp(36px,6vw,58px)}
.dintro{max-width:42em;color:var(--ink);font-size:17px;opacity:.88}
.dprog{display:flex;align-items:center;gap:12px;margin-top:20px}
.narrow-ish{max-width:900px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{padding:24px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint2)}
.panel h3{font-size:19px;margin-bottom:10px}
.panel p+p{margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.fchip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-size:14px;text-decoration:none;color:var(--ink)}
.chip:hover{background:var(--tint);border-color:var(--accent)}

/* ================= 条目页 ================= */
.ihead{background:linear-gradient(var(--tint),var(--bg) 92%);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.ihead-in{position:relative;padding-bottom:44px}
.ihead-main{position:relative;z-index:1;max-width:760px;padding-top:12px}
.ihead-art{position:absolute;right:-10px;bottom:-60px;font:700 clamp(220px,34vw,420px)/1 var(--serif);color:var(--accent);opacity:.09;pointer-events:none;user-select:none}
.dtag{display:flex;align-items:center;gap:12px;margin:18px 0 18px;font:600 13px var(--sans)}
.dtag a{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--tint2);color:var(--accent);text-decoration:none}
.dtag span{font:600 12px var(--mono);color:var(--muted)}
.ihead h1{font-size:clamp(36px,6.4vw,64px);line-height:1.12;margin-bottom:16px;letter-spacing:-.015em}
.ihook{font:500 clamp(19px,2.6vw,24px)/1.55 var(--serif);color:var(--ink2);max-width:30em}
.value{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:10px 14px;justify-content:start}
.value li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in oklab,var(--surface) 86%,transparent);min-width:112px}
.value small{font:600 11px var(--mono);color:var(--muted);letter-spacing:.04em}
.value b{font:700 18px/1.35 var(--serif);display:flex;align-items:center;gap:8px}
.value .v-gain{background:var(--accent);border-color:var(--accent)}
.value .v-gain small,.value .v-gain b{color:var(--on-accent)}
.value .v-gain small{opacity:.8}
.lv{display:inline-flex;gap:3px}
.lv i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.lv i.on{background:var(--accent)}

.ilayout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding-top:36px;align-items:start}
.iside{position:sticky;top:84px}
.iside-t{font:600 11.5px var(--mono);color:var(--muted);letter-spacing:.06em;margin-bottom:10px}
.toc{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.toc a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:10px;text-decoration:none;font-size:14.5px;color:var(--muted)}
.toc a .no{font:600 11px var(--mono);color:var(--accent);opacity:.8}
.toc a:hover{color:var(--ink);background:var(--surface2)}
.toc a.on{background:var(--tint);color:var(--ink);font-weight:600}
.iside-k{margin-top:14px;font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center}
.imain{min-width:0;max-width:780px}
.sec{margin-bottom:56px}
.sh{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sh::after{content:"";flex:1;height:1px;background:var(--line);order:2}
.sh .no{font:700 13px var(--mono);color:var(--accent);order:0}
.sh .lab{font:700 22px var(--serif);order:1}
.sh .lab small{font:500 13px var(--sans);color:var(--muted);margin-left:8px}
.sub{color:var(--muted);margin:-8px 0 16px;font-size:15px}
h2.plain{font-size:19px;margin-bottom:14px}

/* 为什么学 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.vs>div{padding:20px;border-radius:var(--r);font-size:16.5px;line-height:1.75}
.vs-b{background:var(--surface2);color:var(--ink2)}
.vs-a{background:var(--tint);border:1px solid var(--tint2)}
.vs-t{display:flex;align-items:center;gap:6px;font:700 13px var(--sans);margin-bottom:8px}
.vs-b .vs-t{color:var(--red)} .vs-a .vs-t{color:var(--accent)}
.payoff{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.payoff li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px;line-height:1.7}
.payoff svg{flex:none;margin-top:5px;color:var(--accent)}

/* 图解面板 */
.plate{margin:0 0 20px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);overflow:hidden;
  --pele-bg:var(--surface);--pele-fg:var(--ink);--pele-muted:var(--muted);--pele-line:color-mix(in srgb,var(--accent) 55%,var(--muted));
  --pele-surface:var(--tint);--pele-surface-alt:var(--surface2);--pele-border:color-mix(in srgb,var(--accent) 60%,var(--surface));--pele-accent:var(--accent);
  --pele-critical:var(--red);--pele-error:var(--red);--pele-radius:8px}
.plate-t{padding:9px 16px;border-bottom:1px solid var(--line);background:var(--soft);font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--muted)}
.plate-b{padding:22px 18px;display:flex;justify-content:center;overflow-x:auto}
.plate figcaption{padding:12px 18px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.7;background:var(--soft)}
.mm-host{width:100%;display:flex;justify-content:center;min-height:120px}
.mm-host svg{max-width:100%;height:auto}
.mm-fallback{margin:0;font:12px/1.6 var(--mono);color:var(--muted);white-space:pre-wrap}
.mm-host.ok .mm-fallback{display:none}
.ec-host,.ec-box{width:100%}
.ec-host .ec-box{height:300px}
.f-svg{width:100%} .f-svg svg{width:100%;height:auto}

/* svg 原语：作者只写类名，不写颜色 */
svg .a{fill:var(--accent)} svg .at{fill:var(--tint)} svg .t2{fill:var(--tint2)} svg .ink{fill:var(--ink)} svg .mu{fill:var(--muted)} svg .sf{fill:var(--surface)} svg .s2{fill:var(--surface2)} svg .rd{fill:var(--red)} svg .gd{fill:var(--gold)}
svg .ln{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} svg .al{stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg .sl{stroke:var(--line2);fill:none;stroke-width:1.2} svg .dash{stroke-dasharray:4 4} svg .rl{stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round}
svg text{fill:var(--ink);font:500 13px var(--sans)} svg text.sm{font-size:11.5px;fill:var(--muted)} svg text.bd{font-weight:700} svg text.sr{font-family:var(--serif);font-weight:700} svg text.ac{fill:var(--accent);font-weight:700} svg text.on{fill:var(--on-accent);font-weight:700}

/* 刻度图 */
.fig-svg.scale{width:100%;height:auto;max-width:760px}
.fig-svg .track{fill:var(--surface2)}
.fig-svg .band{stroke:var(--accent);stroke-width:1.5}
.fig-svg .b0{fill:var(--tint2)} .fig-svg .b1{fill:var(--tint)}
.fig-svg .bl{font:700 14px var(--sans);fill:var(--ink)} .fig-svg .bl.out{font-size:13px;fill:var(--accent)}
.fig-svg .bn{font:500 12px var(--sans);fill:var(--muted)}
.fig-svg .mk{stroke:var(--red);stroke-width:2} .fig-svg .md{fill:var(--red)} .fig-svg .ml{font:700 13px var(--sans);fill:var(--red)}
.fig-svg .tk{font:500 11.5px var(--mono);fill:var(--muted)}

/* 比例图 */
.f-ratio{width:100%}
.bar-stack{display:flex;height:48px;border-radius:12px;overflow:hidden;gap:3px}
.seg{flex:var(--w) 1 0;display:grid;place-items:center;background:oklch(calc(.52 + var(--i) * .07) calc(.15 - var(--i) * .015) calc(var(--h) + var(--i) * 26));color:#fff;font:700 14px var(--sans);min-width:6px}
@media (prefers-color-scheme:dark){.seg{background:oklch(calc(.78 - var(--i) * .06) calc(.12 - var(--i) * .01) calc(var(--h) + var(--i) * 26));color:#14130f}}
.legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:14px auto auto 1fr;gap:10px;align-items:baseline;font-size:15px}
.legend i{width:12px;height:12px;border-radius:4px;background:oklch(calc(.52 + var(--i) * .07) calc(.15 - var(--i) * .015) calc(var(--h) + var(--i) * 26));align-self:center}
@media (prefers-color-scheme:dark){.legend i{background:oklch(calc(.78 - var(--i) * .06) calc(.12 - var(--i) * .01) calc(var(--h) + var(--i) * 26))}}
.legend .v{font:700 15px var(--mono);color:var(--accent)} .legend em{font-style:normal;color:var(--muted);font-size:14px}

/* 公式图 */
.f-formula{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:100%}
.f-formula .term{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 18px;border-radius:14px;background:var(--tint);border:1px solid var(--tint2);text-align:center}
.f-formula .term b{font:700 18px var(--serif)} .f-formula .term em{font-style:normal;color:var(--muted);font-size:12.5px}
.f-formula .op{font:400 26px var(--serif);color:var(--muted)}

/* 流程图（步骤） */
.f-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 8px;width:100%}
.f-steps li{flex:1 1 150px;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--tint);border:1px solid var(--tint2);position:relative}
.f-steps li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;z-index:1;background:var(--surface);border-radius:50%;width:18px;text-align:center;line-height:18px}
.f-steps .n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 12px var(--sans)}
.f-steps b{font:700 15.5px/1.4 var(--serif)} .f-steps em{font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.55}

/* 四象限 */
.f-matrix{display:grid;grid-template-columns:24px 1fr 1fr;grid-template-rows:auto 1fr;gap:8px;width:100%;max-width:640px}
.f-matrix .ax{font:600 12px var(--sans);color:var(--muted)}
.f-matrix .ax1{grid-column:2;grid-row:1;text-align:center} .f-matrix .ax2{grid-column:3;grid-row:1;text-align:center}
.f-matrix .ay{grid-column:1;grid-row:2;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:start}
.f-matrix .ay2{display:none}
.f-matrix .qs{grid-column:2/4;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f-matrix .q{padding:16px;border-radius:14px;background:var(--surface2);display:flex;flex-direction:column;gap:4px;min-height:110px}
.f-matrix .q b{font:700 16px var(--serif)} .f-matrix .q span{font-size:13.5px;color:var(--muted);line-height:1.55}
.f-matrix .q1{background:var(--accent)} .f-matrix .q1 b,.f-matrix .q1 span{color:var(--on-accent)}
.f-matrix .q2{background:var(--tint2)} .f-matrix .q3{background:var(--tint)}

/* 基本单元 */
.units{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.units li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.units li b{font:700 15.5px/1.4 var(--serif);color:var(--ink)}
.units li span{font-size:13.5px;color:var(--muted);line-height:1.55}
.units li.bare{background:var(--tint);border-color:var(--tint2);justify-content:center}

/* 怎么用 */
.rules{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;gap:10px}
.rules li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);line-height:1.7}
.rules li::before{content:counter(r);grid-column:1;grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 14px var(--mono)}
.rules .lead{grid-column:2;grid-row:1;display:block;font:700 17px/1.4 var(--serif);margin-bottom:2px}
.rules li>span{grid-column:2;grid-row:2;color:var(--ink2);font-size:16px}
.rules li>.solo{grid-row:1/3;align-self:center}

/* 速查表 */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.tbl th,.tbl td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.tbl thead th{background:var(--tint);font:700 13px var(--sans);color:var(--ink);white-space:nowrap}
.tbl tbody th{font-weight:700;white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--soft)}

/* 演示 */
.demo{padding:22px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);margin-bottom:16px}
.demo h3{font-size:18px;margin-bottom:16px}
.demo-in{display:grid;gap:14px;margin-bottom:18px}
.demo-in label{display:grid;grid-template-columns:minmax(110px,170px) 1fr 84px;gap:14px;align-items:center;font-size:14.5px;color:var(--ink2)}
.demo-in input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.demo-in output{font:700 15px var(--mono);text-align:right;color:var(--ink)}
.demo-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.demo-out .o{padding:14px 16px;border-radius:14px;background:var(--surface2)}
.demo-out .o small{display:block;font:600 11.5px var(--sans);color:var(--muted);margin-bottom:2px}
.demo-out .o b{font:700 28px/1.2 var(--serif);font-variant-numeric:tabular-nums}
.demo-out .o u{text-decoration:none;font:500 14px var(--sans);color:var(--muted);margin-left:4px}
.demo-out .o.hl{background:var(--accent)} .demo-out .o.hl small,.demo-out .o.hl b,.demo-out .o.hl u{color:var(--on-accent)}
.demo-chart{height:260px;margin-top:16px}
.demo-chart[hidden]{display:none}
.demo-note{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.7}
.demo-note:empty{display:none}

/* 套用一次 */
.example{padding:20px 22px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint2);font-size:17px;line-height:1.8}

/* 坑 */
.pits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pits li{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.pit-b,.pit-a{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;font-size:16px;line-height:1.7}
.pit-b{background:color-mix(in oklab,var(--red) 8%,var(--surface))}
.pit-b svg{color:var(--red);flex:none;margin-top:4px}
.pit-a svg{color:var(--accent);flex:none;margin-top:4px}

/* 自测 */
.quiz{padding:22px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);margin-bottom:16px}
.quiz-q{font:700 18px/1.6 var(--serif);margin-bottom:14px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);font-size:16px;line-height:1.6;transition:background .12s,border-color .12s}
.opt:hover:not(:disabled){background:var(--tint);border-color:var(--accent)}
.opt .ol{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface2);font:700 12px var(--mono)}
.opt.ok{background:color-mix(in oklab,var(--green) 14%,var(--surface));border-color:var(--green)}
.opt.ok .ol{background:var(--green);color:#fff}
.opt.no{background:color-mix(in oklab,var(--red) 10%,var(--surface));border-color:var(--red)}
.opt.no .ol{background:var(--red);color:#fff}
.opt:disabled{cursor:default}
.quiz-why{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--tint);font-size:15.5px;line-height:1.7}
.quiz-why[hidden]{display:none}
.verify{padding:22px;border-radius:var(--r);background:var(--surface);border:1.5px dashed var(--accent);display:flex;flex-direction:column;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.75}
.v-t{font:700 12px var(--mono);color:var(--accent);letter-spacing:.06em}
.ans{width:100%}
.ans summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:15px}
.ans div{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--tint);font-size:15.5px}
.done-row{margin-top:18px}
.done-btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.done-btn .on{display:none}
.done-btn[aria-pressed=true]{background:transparent;color:var(--accent)}
.done-btn[aria-pressed=true] .on{display:inline}
.done-btn[aria-pressed=true] .off{display:none}
.side-done{width:100%;min-height:40px;font-size:14px}
.due{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:14px 18px;border-radius:14px;background:color-mix(in oklab,var(--gold) 26%,var(--surface));margin-bottom:28px;font-size:15px}
.due[hidden]{display:none}
.due .btn{min-height:36px;padding:0 14px;font-size:14px;margin-left:auto}

.pnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 48px}
.pn{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;min-height:72px}
.pn small{color:var(--muted);font-size:12.5px}
.pn b{font:700 16px var(--serif)}
.pn.next{text-align:right}
.pn:hover{border-color:var(--accent);background:var(--tint)}
.pn.off{border:0;background:none;pointer-events:none}
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:48px}
.scard{display:flex;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;align-items:flex-start}
.scard:hover{border-color:var(--accent);background:var(--tint)}
.scard small{display:block;font:600 11px var(--mono);color:var(--accent)}
.scard b{display:block;font:700 16px/1.4 var(--serif)}
.scard em{display:block;font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:2px}
.sibs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sib{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;text-decoration:none}
.sib span{font:700 13px var(--serif);color:var(--accent);font-variant-numeric:tabular-nums}
.sib.cur{background:var(--tint);border-color:var(--accent);font-weight:600}
.sib i{margin-left:auto;font-style:normal;color:transparent;font-size:12px}
.sib.is-done i{color:var(--accent)}
.item{padding-bottom:40px}

/* 全部页过滤 */
.filters{display:grid;gap:12px;margin-bottom:14px}
.finput{height:46px;width:100%;max-width:420px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);font:inherit;color:var(--ink)}
.fgroup{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flabel{font-size:13px;color:var(--muted);margin-right:4px}
.fchip{cursor:pointer;min-height:34px;font-size:13.5px}
.fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fchip[data-f-domain].on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fdom summary{cursor:pointer;color:var(--muted);font-size:14px;margin-bottom:10px}
.fcount{color:var(--muted);font-size:13.5px;margin:6px 0 10px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.arow[hidden]{display:none}

/* 方法 / 进度 */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 40px}
.mcard{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.mcard b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--on-gold);font:700 15px var(--sans);margin-bottom:12px}
.mcard h3{font-size:19px;margin-bottom:6px}
.mcard p{color:var(--muted);font-size:15px}
.h2{font-size:24px;margin:36px 0 12px}
.plain-list{margin:0 0 8px;padding-left:22px;display:grid;gap:8px}
.read p{margin:12px 0}
.plist{display:grid;gap:14px;margin-bottom:24px}
.pdom{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pdom-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pdom-h a{font:700 18px var(--serif);text-decoration:none}
.pdom-h .dcard-count{margin-left:auto}
.pdots{display:flex;flex-wrap:wrap;gap:6px}
.pdot{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);font:700 13px var(--serif);text-decoration:none;color:var(--muted)}
.pdot.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;color:var(--ink)}
.linkbtn.danger{color:var(--red)}

/* 页脚 */
.foot{margin-top:96px;padding:64px 0 36px;border-top:1px solid var(--line);background:var(--bg)}
.foot-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-head p{color:var(--muted);font-size:15px;line-height:1.7;text-align:right}
.foot-head p span{font:500 12.5px var(--mono);letter-spacing:.04em}
.foot-cols{display:grid;grid-template-columns:1.3fr 1.1fr .8fr 1fr;gap:36px;padding:40px 0}
.fcol h4{font:600 12px var(--mono);letter-spacing:.08em;color:var(--muted);margin:0 0 16px;font-family:var(--mono)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcol a{display:inline-flex;align-items:center;gap:9px;color:var(--ink2);text-decoration:none;font-size:14.5px;line-height:1.4;transition:color .12s}
.fcol a:hover{color:var(--accent)}
.fcol a i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;opacity:.7}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.7}
.foot-base p{max-width:46em}
.foot-copy{font-family:var(--mono);letter-spacing:.02em}

/* 弹层 */
.modal,.palette{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(20,16,8,.5);backdrop-filter:blur(4px)}
.modal[hidden],.palette[hidden]{display:none}
.modal-box{position:relative;width:min(340px,100%);padding:28px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.modal-box h3{font-size:20px;margin-bottom:14px}
.modal-box .qr{border-radius:12px;background:#fff;width:220px;height:220px;object-fit:contain}
.modal-note{margin-top:10px;color:var(--muted);font-size:14px}
.modal-links{margin-top:6px;font-size:14px}
.modal-close{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface2);color:var(--muted)}
.palette{place-items:start center;padding-top:12vh}
.palette-box{width:min(620px,100%);border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden}
.palette-input{display:flex;align-items:center;gap:10px;padding:0 16px;height:56px;border-bottom:1px solid var(--line);color:var(--muted)}
.palette-input input{flex:1;height:100%;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);outline:none}
.palette-list{list-style:none;margin:0;padding:8px;max-height:min(56vh,440px);overflow:auto}
.palette-list li a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none}
.palette-list li a:hover,.palette-list li a.sel{background:var(--tint)}
.pl-t{display:flex;flex-direction:column;min-width:0}
.pl-t b{font:700 15.5px var(--serif)}
.pl-t span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-d{margin-left:auto;font:600 11.5px var(--sans);padding:1px 8px;border-radius:99px;background:var(--tint2);color:var(--accent);white-space:nowrap}
.pl-empty{padding:28px;text-align:center;color:var(--muted)}

@media (max-width:1000px){
  .ilayout{grid-template-columns:minmax(0,1fr);gap:0}
  .iside{display:none}
  .value{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-head p{text-align:left}
  .criteria{grid-template-columns:1fr 1fr}
  .how,.duo,.mcards,.vs{grid-template-columns:1fr}
  .nav{display:none}
}
@media (max-width:640px){
  .wrap,.read{width:calc(100% - 32px)}
  .hero{padding-top:44px}
  .search-btn span,.search-btn kbd{display:none}
  .search-btn{width:36px;padding:0;justify-content:center}
  .brand-name small{display:none}
  .row{grid-template-columns:34px 1fr 22px;padding:14px}
  .row-meta{display:none}
  .row-n{font-size:18px}
  .criteria{grid-template-columns:1fr}
  .sibs,.pnav{grid-template-columns:1fr}
  .dhead-main{gap:16px}
  .tile.xl{width:64px;height:64px;font-size:34px;border-radius:18px}
  .rules li{padding:14px}
  .demo-in label{grid-template-columns:1fr 70px;gap:6px 12px}
  .demo-in label>span:first-child{grid-column:1/3}
  .demo-in input[type=range]{grid-column:1}
  .ptable-wrap{padding:14px}
  .pt-head{flex-direction:column;align-items:flex-start}
  .block-head.row-head,.path-head{flex-direction:column;align-items:flex-start}
  .path-meta{align-items:flex-start}
  .value li{min-width:0;padding:10px 12px}
  .f-steps li:not(:last-child)::after{display:none}
  .sh .lab{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.pnav,.sibs-sec,.done-btn,.iside,.rbar,.due,.quiz .opt{display:none}.ilayout{display:block}.plate,.sec{break-inside:avoid}}

/* 方块呼吸动画：16 秒一圈 */
.bx-c{transform-box:fill-box;transform-origin:center;animation:bxc 16s ease-in-out infinite}
@keyframes bxc{0%{transform:scale(1)}25%{transform:scale(2.4)}50%{transform:scale(2.4)}75%{transform:scale(1)}100%{transform:scale(1)}}
.bx-l{opacity:.35;animation:bxl 16s linear infinite;animation-delay:calc(var(--i) * 4s)}
@keyframes bxl{0%,24.9%{opacity:1}25%,100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.bx-c,.bx-l{animation:none}.bx-l{opacity:1}}
svg .cl{fill:var(--surface);stroke:var(--muted);stroke-width:1.4}
svg .nm{fill:#34323d}
svg .mo{stroke:var(--muted);stroke-width:1.2}
.url-in{width:100%;height:46px;border:1px solid var(--line2);border-radius:12px;padding:0 14px;background:var(--surface);color:var(--ink);font:500 15px var(--mono)}
textarea.url-in{height:auto;padding:12px 14px;font:500 15px/1.7 var(--sans);resize:vertical}
.sw-title{font:600 12px var(--sans);color:var(--muted);margin:14px 0 6px}
.sw-strip{display:flex;gap:6px}
.sw{flex:1;min-height:58px;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-size:11.5px;border:1px solid rgba(0,0,0,.08)}
.sw b{font:700 12px var(--sans)} .sw span{font:500 11px var(--mono);opacity:.85}
.fig-svg.wheel{width:100%;max-width:420px;height:auto}
.rx-res{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--surface2);font:500 15px/1.9 var(--mono);white-space:normal;word-break:break-word}
.rx-res mark,mark{background:var(--tint2);color:inherit;border-radius:4px;padding:1px 3px;box-shadow:inset 0 -2px 0 var(--accent)}
.pp-card{border:1px solid var(--line);border-radius:12px;background:var(--surface2);overflow:hidden;margin-bottom:0}
.pp-cmd{display:block;padding:8px 14px;background:var(--tint);font:600 13px var(--mono);color:var(--ink);word-break:break-all}
.pp-card pre{margin:0;padding:10px 14px;font:13px/1.6 var(--mono);color:var(--ink2);white-space:pre-wrap;max-height:180px;overflow:auto}
.pp-arrow{text-align:center;color:var(--muted);font:700 16px var(--mono);line-height:1.6}
.fx-box{min-height:210px;border:1.5px dashed var(--line2);border-radius:14px;padding:12px;background:var(--surface2)}
.fx-i{display:grid;place-items:center;border-radius:10px;background:var(--accent);color:var(--on-accent);font:700 18px var(--serif)}
.fx-css{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--surface2);font:13px/1.7 var(--mono);color:var(--ink2);overflow:auto;max-height:260px}
.demo-in select{height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);padding:0 10px;font:inherit;color:var(--ink)}
.fc-card{padding:24px;border-radius:16px;background:var(--tint);border:1px solid var(--tint2);text-align:center}
.fc-card small{display:block;font:600 12px var(--sans);color:var(--muted);margin-bottom:8px}
.fc-card b{display:block;font:700 32px/1.3 var(--serif)}
.fc-a{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2);font:600 22px var(--serif);color:var(--accent)}
.fc-a[hidden]{display:none}
.fig-svg.ring{width:100%;max-width:520px;height:auto}