/* AI 挣钱案例库 — an index, so the craft is information density, not decoration. Light-first: ad-supported reading sites live in light, and the dark set is a full redefinition rather than an inversion. */ :root{ --paper:#faf9f6; --card:#ffffff; --sunk:#f2f1ec; --ink:#15171b; --ink-2:#585e66; --ink-3:#8b9098; --line:#e6e5df; --line-2:#f0efe9; --money:#0d6b45; /* ledger green: only ever used for real figures */ --money-bg:#e7f2ec; --hot:#b4460f; /* the top revenue band */ --tagink:#3a4a86; --tagbg:#eef1fa; --mark:#111417; --shadow:0 1px 2px rgba(21,23,27,.05); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#111316; --card:#181a1e; --sunk:#1e2126; --ink:#e9eaec; --ink-2:#a2a8b0; --ink-3:#767d86; --line:#282c32; --line-2:#22262b; --money:#4fbe8b; --money-bg:#14301f; --hot:#e2854a; --tagink:#9fb0e8; --tagbg:#1d2333; --mark:#e9eaec; --shadow:0 1px 2px rgba(0,0,0,.4); } } :root[data-theme="dark"]{ --paper:#111316; --card:#181a1e; --sunk:#1e2126; --ink:#e9eaec; --ink-2:#a2a8b0; --ink-3:#767d86; --line:#282c32; --line-2:#22262b; --money:#4fbe8b; --money-bg:#14301f; --hot:#e2854a; --tagink:#9fb0e8; --tagbg:#1d2333; --mark:#e9eaec; --shadow:0 1px 2px rgba(0,0,0,.4); } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--paper); color:var(--ink); font:400 15px/1.6 "Source Sans 3","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2{font-family:"Zilla Slab","Noto Sans SC","PingFang SC",Georgia,serif;margin:0;font-weight:700} .mono,code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums} a{color:inherit} .shell{max-width:1320px;margin:0 auto;padding:0 20px} /* ── masthead ─────────────────────────────────────────────── */ .mast{background:var(--card);border-bottom:1px solid var(--line)} .mast-in{display:flex;align-items:center;justify-content:space-between;gap:26px; padding:18px 20px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:13px} .mark{width:40px;height:40px;flex:0 0 auto;border-radius:9px;background:var(--mark);color:var(--card); display:grid;place-items:center;font:700 21px/1 "Zilla Slab",Georgia,serif} .brand h1{font-size:22px;letter-spacing:-.01em} .tagline{margin:2px 0 0;font-size:13px;color:var(--ink-2)} .tape{display:flex;gap:26px;margin:0;flex-wrap:wrap} .tape div{display:flex;flex-direction:column} .tape dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .tape dd{margin:1px 0 0;font:500 17px/1.2 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums} /* 成分小字：大数字给规模，这一行给「里面有多少不是真实案例」。 */ .tape-sub{display:block;margin-top:1px;font:400 10px/1.3 "Source Sans 3","Noto Sans SC",sans-serif; letter-spacing:.01em;color:var(--ink-3);text-transform:none} /* ── layout ───────────────────────────────────────────────── */ .layout{display:grid;grid-template-columns:212px minmax(0,1fr) 300px;gap:26px; align-items:start;padding-top:20px;padding-bottom:34px} @media (max-width:1120px){ .layout{grid-template-columns:196px minmax(0,1fr)} .rail-right{display:none} } @media (max-width:760px){ .layout{grid-template-columns:1fr} .rail-left{order:2} } /* ── filters ──────────────────────────────────────────────── */ .filterbox{position:sticky;top:14px;background:var(--card);border:1px solid var(--line); border-radius:8px;padding:14px;box-shadow:var(--shadow)} .fb-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px} .fb-hd h2{font-size:14px} .linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ink-3);cursor:pointer} .linkbtn:hover{color:var(--ink)} .fgroup{margin-bottom:15px} .fgroup:last-child{margin-bottom:0} .fgroup h3{margin:0 0 7px;font:600 10.5px/1 "Source Sans 3",sans-serif;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);font-family:inherit} .fopt{display:flex;align-items:center;gap:7px;width:100%;padding:4px 6px;border:0;border-radius:5px; background:none;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;text-align:left;line-height:1.4} .fopt:hover{background:var(--sunk);color:var(--ink)} .fopt .box{width:12px;height:12px;flex:0 0 auto;border:1.5px solid var(--ink-3);border-radius:3px} .fopt .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-family:"JetBrains Mono",monospace} .fopt[aria-pressed="true"]{color:var(--ink);font-weight:600} .fopt[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink)} .fopt[aria-pressed="true"] .n{color:var(--ink-2)} /* ── toolbar ──────────────────────────────────────────────── */ .toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--line);border-radius:7px;padding:0 12px;height:38px} .search svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round} .search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink); outline:none;height:100%} .sorts{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--card)} .sorts button{font:inherit;font-size:13px;padding:8px 13px;border:0;background:none;color:var(--ink-2);cursor:pointer} .sorts button+button{border-left:1px solid var(--line)} .sorts button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600} .resultline{margin:0 0 10px;font-size:12.5px;color:var(--ink-3)} .resultline b{color:var(--ink);font-family:"JetBrains Mono",monospace} .chips-active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .chips-active:empty{display:none} .chip-x{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 8px;border-radius:99px; background:var(--ink);color:var(--paper);border:0;cursor:pointer;font-family:inherit} .chip-x i{font-style:normal;opacity:.7} /* ── case rows ────────────────────────────────────────────── */ .list{display:flex;flex-direction:column;gap:10px} .case{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px; display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;box-shadow:var(--shadow)} @media (max-width:560px){ .case{grid-template-columns:1fr} } @media (max-width:560px){ .sorts button{padding:8px 9px;font-size:12px} } .rev{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-top:2px} .rev .amt{font:700 17px/1.15 "JetBrains Mono",monospace;color:var(--money);letter-spacing:-.02em} .rev.hot .amt{color:var(--hot)} .rev .basis{font-size:10px;color:var(--ink-3);letter-spacing:.02em} .rev.none .amt{font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0} .rev .conf{font-size:9.5px;letter-spacing:.03em;color:var(--money);background:var(--money-bg); padding:1px 5px;border-radius:3px;margin-top:2px} .case h3{margin:0 0 5px;font:600 16px/1.4 "Source Sans 3","Noto Sans SC",sans-serif;font-family:inherit} .case h3 a{text-decoration:none} .case h3 a:hover{text-decoration:underline;text-underline-offset:2px} .case .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ink-3);margin-bottom:7px} .case .meta .src{color:var(--ink-2);font-weight:600} .case .meta .viac{background:var(--tagbg);color:var(--tagink);padding:0 6px;border-radius:3px;font-size:11px} .case .ex{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .evi{margin:0 0 9px;padding:5px 9px;border-left:2px solid var(--money);background:var(--money-bg); border-radius:0 4px 4px 0;font:400 11.5px/1.5 "JetBrains Mono",monospace;color:var(--ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tags{display:flex;flex-wrap:wrap;gap:5px} .tag{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--tagbg);color:var(--tagink); border:0;cursor:pointer;font-family:inherit;line-height:1.5} .tag:hover{filter:brightness(.96)} .tag.eff{background:var(--sunk);color:var(--ink-2)} /* 页码条。页码按钮做成等宽方块（min-width 34px + tabular-nums），这样从 第 9 页翻到第 10 页时整条不会横向抖一下。 */ .pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:20px 0 0} .pager:empty{display:none} .pgnums{display:flex;align-items:center;gap:4px} .pgbtn{font:inherit;font-size:13.5px;min-width:34px;padding:7px 10px;border-radius:7px; background:var(--card);border:1px solid var(--line);color:var(--ink-2);cursor:pointer; font-variant-numeric:tabular-nums;text-align:center} .pgbtn:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)} .pgbtn:focus-visible{outline:2px solid var(--money);outline-offset:1px} .pgbtn:disabled{opacity:.4;cursor:default} .pgbtn[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--card);font-weight:700} .pgstep{padding:7px 14px} .pggap{color:var(--ink-3);padding:0 2px;user-select:none} /* 「第几页，共几页」是给人读的那一份，页码按钮是给人点的那一份，两份都要有 */ .pgof{font-size:12.5px;color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums} @media (max-width:560px){ .pgstep{padding:7px 11px} .pgof{width:100%;text-align:center;margin:2px 0 0} } .empty{padding:50px 20px;text-align:center;color:var(--ink-3);font-size:14px} /* ── right rail ───────────────────────────────────────────── */ .panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px; margin-bottom:16px;box-shadow:var(--shadow)} .panel-hd{font-size:14px;margin:0 0 10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px} .panel-hd span{font-size:11px;color:var(--ink-3);font-weight:400;font-family:"Source Sans 3",sans-serif} .board{list-style:none;margin:0;padding:0;counter-reset:b} .board li{display:grid;grid-template-columns:16px 1fr auto;gap:8px;padding:7px 0; border-bottom:1px solid var(--line-2);font-size:13px;align-items:baseline} .board li:last-child{border-bottom:0} .board li:before{counter-increment:b;content:counter(b);font:500 11px/1 "JetBrains Mono",monospace;color:var(--ink-3)} .board a{text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .board a:hover{text-decoration:underline} .board .amt{font:700 12.5px/1 "JetBrains Mono",monospace;color:var(--money);white-space:nowrap} /* ── auto-ranked strip ────────────────────────────────────── */ /* Sits above the toolbar and reuses .panel/.board so it reads as part of the furniture, not as an ad. The "why" line is the point: every row states the signal that put it there. */ .push{margin-bottom:14px;border-left:3px solid var(--hot)} .push-list li{grid-template-columns:16px minmax(0,1fr) auto;gap:4px 8px} .push-list .why{grid-column:2;font:400 11px/1.4 "JetBrains Mono",monospace;color:var(--ink-3)} .push-list .amt{grid-row:1;grid-column:3} .case .meta .trend{background:var(--hot);color:var(--paper);padding:0 6px;border-radius:3px; font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase} /* Explore slots are deliberately quieter than the proven ones: they are being tried out, not recommended, and the styling should not oversell them. */ .push-list li.exp{opacity:.92} .push-list .why i{font-style:normal;color:var(--tagink);background:var(--tagbg);padding:0 5px; border-radius:3px;letter-spacing:.02em} .case .meta .trend.exp{background:var(--tagbg);color:var(--tagink)} .sticky-wrap{position:sticky;top:14px;margin-bottom:16px} .note{font-size:12.5px;color:var(--ink-2)} .note p{margin:0 0 8px} .note p:last-child{margin:0} .note code{font-size:11.5px;background:var(--sunk);padding:1px 4px;border-radius:3px} /* ── up / down ────────────────────────────────────────────── */ /* One control, three places (index cards, story page, related list), so it is sized in em and carries no layout assumptions of its own. */ .votes{display:inline-flex;align-items:center;gap:2px;vertical-align:middle} .v-btn{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12px;line-height:1; padding:4px 8px;border:1px solid var(--line);background:var(--card);color:var(--ink-3); border-radius:99px;cursor:pointer} .v-btn b{font:600 12px/1 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums} .v-btn:hover{color:var(--ink);border-color:var(--ink-3)} .v-up[aria-pressed="true"]{background:var(--money-bg);border-color:var(--money);color:var(--money)} .v-down[aria-pressed="true"]{background:var(--tagbg);border-color:var(--tagink);color:var(--tagink)} .v-net{font:600 12px/1 "JetBrains Mono",monospace;color:var(--ink-3);min-width:22px;text-align:center; font-variant-numeric:tabular-nums} .v-net.pos{color:var(--money)} .v-net.neg{color:var(--hot)} .votes.compact .v-btn{padding:2px 7px;font-size:11.5px} /* 竖排（列表行左栏）。箭头去掉边框、放大点击区，中间只留净票 —— 一栏 44px 里塞不下两个数，而读者要的本来就是「这条正分还是负分」。 */ .votes.stacked{flex-direction:column;gap:0;width:100%} .votes.stacked .v-btn{border:0;background:none;padding:2px 6px;line-height:1;border-radius:5px} .votes.stacked .v-btn span[aria-hidden]{font-size:13px} .votes.stacked .v-btn b{display:none} .votes.stacked .v-btn:hover{background:var(--sunk);color:var(--ink)} .votes.stacked .v-up[aria-pressed="true"]{background:none;color:var(--money)} .votes.stacked .v-down[aria-pressed="true"]{background:none;color:var(--hot)} .votes.stacked .v-net{font-size:12.5px;min-width:0;padding:1px 0} .votes.voting{opacity:.55;pointer-events:none} .votes.vote-err .v-btn{border-color:var(--hot);color:var(--hot)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* card footer: the vote control plus the way into the story page */ .case-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px; padding-top:9px;border-top:1px solid var(--line-2)} .case-foot .more{font-size:12px;color:var(--ink-3);text-decoration:none} .case-foot .more:hover{color:var(--ink);text-decoration:underline} .case .meta .orig{color:var(--ink-2)} .push-list .v-slot,.related-list .v-slot{grid-column:3} /* ── story page ───────────────────────────────────────────── */ .layout-story{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px; padding:18px 0 26px;align-items:start} @media (max-width:1120px){ .layout-story{grid-template-columns:minmax(0,1fr)} } .story{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px; box-shadow:var(--shadow)} .story-hd{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start} @media (max-width:560px){ .story-hd{grid-template-columns:1fr} } .story-hd h2{margin:0;font:700 25px/1.28 "Zilla Slab","Source Sans 3",serif;letter-spacing:-.01em} .rev.big .amt{font-size:22px} .story .meta{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:12.5px;color:var(--ink-3);margin:12px 0 14px} .story .meta .src{color:var(--ink-2);font-weight:600} .story-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .read-original{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper); text-decoration:none;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:7px} .read-original:hover{opacity:.9} .constructed-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:46ch} .constructed-note b{color:var(--hot)} .constructed-body{padding:0;margin-top:4px} .constructed-body h4{margin:14px 0 5px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)} .constructed-body p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:var(--ink-2)} .read-discuss{font-size:13px;color:var(--ink-2);text-decoration:none} .read-discuss:hover{text-decoration:underline} .story-ex{margin:0 0 14px;padding:12px 16px;background:var(--sunk);border-radius:8px; border-left:3px solid var(--line)} .story-ex p{margin:0 0 7px;font-size:15px;line-height:1.6;color:var(--ink)} .story-ex cite{font-style:normal;font-size:11.5px;color:var(--ink-3)} .story .evi{white-space:normal} .story .tags{margin-top:14px} .story .tags .tag{text-decoration:none} .related{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:8px; padding:14px 16px;box-shadow:var(--shadow)} .related-list li{grid-template-columns:16px minmax(0,1fr) auto;gap:6px 8px;padding:9px 0} .related-list .v-slot{grid-row:1} /* ── our retelling ────────────────────────────────────────── */ /* Visually a note in the margin of the source, not a replacement for it: the evidence line under each paragraph is part of the design, not a footnote. */ .retell{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:8px; padding:16px 18px;box-shadow:var(--shadow);border-left:3px solid var(--tagink)} .rt-sec{margin-bottom:14px} .rt-sec h3{margin:0 0 5px;font:600 13px/1.3 "Source Sans 3",sans-serif;letter-spacing:.02em; text-transform:uppercase;color:var(--tagink)} .rt-sec p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)} .rt-sec .ev-line{margin:6px 0 0;padding-left:10px;border-left:2px solid var(--line); font:400 11.5px/1.55 "JetBrains Mono",monospace;color:var(--ink-3)} .rt-sec .ev-line i{font-style:normal;opacity:.8} .rt-foot{margin:0;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-3)} /* ── ad slots ─────────────────────────────────────────────── */ /* Reserve the box before anything loads: a slot that pops in shifts the page. */ .adslot{margin:16px auto;display:flex;align-items:center;justify-content:center} .ad-leaderboard{max-width:728px;min-height:90px} .ad-rect{width:300px;min-height:250px;margin:0} .ad-native{min-height:104px;margin:0} .adslot-empty{border:1px dashed var(--line);border-radius:8px;background:var(--sunk); position:relative;width:100%;flex-direction:column;gap:4px;padding:14px;text-align:center} /* 空位不占预留高度。 预留（.ad-leaderboard 的 90px、.ad-inreport 的 280px）是为了防止广告回来时 把下面的内容顶下去。但那笔预留只在「可能还有广告要来」的时候才划算 —— 服务器已经答了「没有可投的」之后，广告不会再来了，那块高度就是纯浪费： 文中位空着时占掉 280+52px，读者读完正文要滚过三百多像素的虚线框才看到相关案例。 所以：加载中保留预留，**拿到「空」这个答案之后收掉**。代价是收掉的那一下 会有一次向上的位移，但它发生在加载早期，而且只有一次；比整页永远空着 三百像素好。两个类都要写在 .adslot 后面，否则 .ad-inreport 的 min-height 同权重后定义会赢。 */ .adslot.adslot-empty,.adslot.adslot-house{min-height:0} .adslot-tag{position:absolute;top:6px;left:8px;font-size:9.5px;letter-spacing:.1em;color:var(--ink-3); text-transform:uppercase;font-weight:600} .adslot-body{display:flex;flex-direction:column;gap:3px;color:var(--ink-3);font-size:11.5px} .adslot-body b{font-size:13px;color:var(--ink-2)} .adslot-body code{font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--ink-3)} /* 招商位。和诊断框共用虚线外框，但字是给访客看的：一句话说清这里在卖什么， 一个能点的联系方式。刻意不做得比真广告还显眼 —— 它毕竟是没人买时的填充。 */ .adslot-house{border-color:var(--line);background:var(--card)} .adslot-house-body{display:flex;flex-direction:column;align-items:center;gap:5px; color:var(--ink-3);font-size:12px;max-width:420px;margin:0 auto;line-height:1.5} .adslot-house-body b{font:600 14px/1.3 "Source Sans 3","Noto Sans SC",sans-serif;color:var(--ink-2)} .adslot-cta{margin-top:3px;font-size:12.5px;font-weight:600;color:var(--money);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:1px} .adslot-cta:hover{color:var(--ink)} .adslot-hint{font-size:11px;color:var(--hot);font-family:"JetBrains Mono",monospace} /* 广告服务器 SDK 渲染出来的位。SDK 的样式表是后加载的，同权重会赢，所以这里 一律用 .adslot 复合选择器抬一级，不靠顺序。 */ .adslot.ph-ad:not(.adslot-empty){background:var(--card);border:1px solid var(--line);border-radius:8px; box-shadow:var(--shadow);overflow:hidden} /* 没广告时挂回虚线空框：SDK 的 .ph-ad 也在这个节点上，得压过它。 */ .adslot.adslot-empty{background:var(--sunk);border:1px dashed var(--line);border-radius:8px;box-shadow:none} .adslot .ph-ad-native{gap:12px;padding:12px 14px;font-family:inherit;color:var(--ink)} .adslot .ph-ad-native b{font:600 14.5px/1.3 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink)} .adslot .ph-ad-native span{font:400 12.5px/1.4 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink-2);opacity:1} .adslot .ph-ad-native em{background:var(--money);color:#fff;font:600 12px/1 "Source Sans 3",system-ui; padding:8px 14px;border-radius:6px} /* 「Ad」角标：政策要求广告可辨认，所以它是浅底描边，不是压在图上的黑块。 */ .adslot .ph-ad-label{background:var(--sunk);color:var(--ink-3);border:1px solid var(--line); font:600 9px/1.4 "JetBrains Mono",monospace;top:5px;right:6px} /* 300×250 这种高位，横排卡片会在中间留一条白 —— 竖排。 */ .ad-rect .ph-ad-native,.ad-inreport .ph-ad-native{flex-direction:column;align-items:flex-start; justify-content:center;gap:10px;height:100%} .ad-rect .ph-ad-native em,.ad-inreport .ph-ad-native em{margin-left:0} /* ── footer ───────────────────────────────────────────────── */ .foot{border-top:1px solid var(--line);background:var(--card);margin-top:10px} .foot-in{padding:20px;font-size:12.5px;color:var(--ink-2)} .foot p{margin:0 0 4px} .foot .dim{color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:11.5px} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } :focus-visible{outline:2px solid var(--tagink);outline-offset:2px;border-radius:4px} /* ── 漏斗入口（右栏，取代原来的粘性广告位） ─────────────── */ .funnel{border-color:var(--money)} .funnel p{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.6} .funnel-cta{display:block;text-align:center;background:var(--money);color:#fff;text-decoration:none; font-size:14.5px;font-weight:600;padding:11px 16px;border-radius:7px} .funnel-cta:hover{filter:brightness(1.07)} .funnel-note{display:block;text-align:center;margin-top:7px;font-size:11.5px;color:var(--ink-3)} /* ── 诊断页（/quiz 与 /r/）：同一个站，同一套字体与配色 ────────── */ .backlink{font-size:13px;color:var(--ink-2);text-decoration:none} .backlink:hover{color:var(--ink)} .quizwrap{max-width:760px;padding-top:22px;padding-bottom:40px} .q-intro h2{font-size:clamp(21px,4vw,28px);line-height:1.3;margin:0 0 10px} .q-intro p{color:var(--ink-2);margin:0;font-size:15px} .tracks{display:grid;gap:11px;padding:20px 0 10px} .track{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line); border-radius:9px;padding:16px 18px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--shadow)} .track:hover{border-color:var(--money)} .track b{display:block;font-size:16.5px;margin-bottom:3px;font-family:"Zilla Slab",serif} .track span{font-size:13.5px;color:var(--ink-2)} .track em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:7px} .qbar{height:3px;background:var(--sunk);border-radius:2px;overflow:hidden;margin-top:6px} .qbar i{display:block;height:100%;background:var(--money);transition:width .22s} .qhead{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 18px;font-size:12.5px;color:var(--ink-3)} .qhead .back{background:none;border:0;padding:0;font:inherit;color:var(--ink-3);cursor:pointer;text-decoration:underline} .qhead .back[disabled]{opacity:.35;cursor:default;text-decoration:none} .q{font-size:20px;line-height:1.5;font-family:"Zilla Slab",serif;font-weight:700;margin:0 0 18px} .opts{display:grid;gap:8px;padding-bottom:40px} .opt{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 15px; cursor:pointer;font:inherit;color:inherit;font-size:15px;display:flex;gap:11px;align-items:flex-start} .opt:hover{border-color:var(--money);background:var(--money-bg)} .opt .k{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-size:11px;color:var(--ink-3);font-family:"JetBrains Mono",monospace} .report{padding:4px 0 40px} .verdict{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--money); border-radius:0 9px 9px 0;padding:18px 20px;box-shadow:var(--shadow)} .verdict.warn{border-left-color:#b4460f} .verdict.bad{border-left-color:#a32a1c} .verdict .lab{font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase} .verdict h2{font-size:24px;margin:5px 0 7px} .verdict p{margin:0;color:var(--ink-2);font-size:14.5px} .verdict .reason{margin-top:9px;font-size:13px;color:var(--ink-3)} .verdict .total{float:right;text-align:right;margin-left:16px} .verdict .total b{display:block;font:700 32px/1 "JetBrains Mono",monospace} .verdict .total span{font-size:11px;color:var(--ink-3)} h3.sec{font-size:17px;margin:30px 0 3px;font-family:"Zilla Slab",serif} .sec-note{margin:0 0 12px;font-size:13px;color:var(--ink-3)} .dims{display:grid;gap:9px} .dim{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 14px} .dim .r1{display:flex;justify-content:space-between;align-items:baseline} .dim .nm{font-size:14.5px;font-weight:600} .dim .sc{font:700 14.5px/1 "JetBrains Mono",monospace} .dim .track-bar{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden;margin:7px 0 6px} .dim .track-bar i{display:block;height:100%;background:var(--ink-3)} .dim.hi .track-bar i{background:var(--money)} .dim.hi .sc{color:var(--money)} .dim.lo .track-bar i{background:#b4460f} .dim.lo .sc{color:#b4460f} .dim .why{font-size:12px;color:var(--ink-3);margin:0} .plays{display:grid;gap:10px} .play{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:15px 17px;box-shadow:var(--shadow)} .play .r1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .play .no{font:700 12px/1 "JetBrains Mono",monospace;color:var(--money)} .play b{font-size:16px;font-family:"Zilla Slab",serif} .play .pre{font-size:10.5px;background:var(--money-bg);color:var(--money);padding:2px 7px;border-radius:4px} .play p{margin:7px 0 0;font-size:14.5px;color:var(--ink-2)} .play .meta{margin-top:8px;font-size:12px;color:var(--ink-3);display:flex;gap:13px;flex-wrap:wrap} .cases{display:grid;gap:9px} .evnote{font-size:12.5px;color:var(--ink-3);margin:0 0 11px;padding-left:10px;border-left:2px solid var(--line)} .cta{margin-top:30px;background:var(--card);border:1px solid var(--money);border-radius:9px;padding:20px;box-shadow:var(--shadow)} .cta h3{font-size:18px;margin:0 0 6px;font-family:"Zilla Slab",serif} .cta > p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px} .field{display:grid;gap:5px;margin-bottom:11px} .field label{font-size:12.5px;color:var(--ink-2)} .field input,.field textarea{font:inherit;font-size:14.5px;padding:9px 11px;border:1px solid var(--line); border-radius:6px;background:var(--paper);color:var(--ink)} .field textarea{min-height:70px;resize:vertical} .consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);margin:5px 0 13px} .consent input{margin-top:3px} .btn{font:inherit;font-size:15px;font-weight:600;padding:11px 22px;border-radius:7px;border:0;cursor:pointer; background:var(--money);color:#fff} .btn:disabled{opacity:.5;cursor:default} .btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)} .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .msg{margin-top:11px;font-size:13px;padding:9px 11px;border-radius:6px;background:var(--sunk);color:var(--ink-2)} .msg.ok{background:var(--money-bg);color:var(--money)} .share{margin-top:20px;font-size:12.5px;color:var(--ink-3)} .share code{background:var(--sunk);padding:2px 6px;border-radius:4px;word-break:break-all} /* Report case cards. Deliberately NOT .case: the index already owns that class with an 84px revenue column, which squeezed these titles into a narrow strip. */ .qcase{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px} .qcase a{color:inherit;font-size:14.5px;font-weight:600;text-decoration:none;line-height:1.45;display:block} .qcase a:hover{text-decoration:underline} .qcase .m{margin-top:7px;font-size:12px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center} .qcase .rev{font:700 12.5px/1 "JetBrains Mono",monospace;color:var(--money)} .qcase .tg{font-size:11px;background:var(--sunk);padding:2px 7px;border-radius:99px;color:var(--ink-3)} /* Mid-report ad. Centred and boxed so it reads as a break in the report rather than as part of the advice. */ .ad-inreport{max-width:336px;min-height:280px;margin:26px auto} /* ── 行业地图 ───────────────────────────────────────────── 条长 = 案例密度，条内分段 = 收入证据。两档绿 + 一档中性灰，都跑过对比度校验： 浅色底 #faf9f6 上 2.52 / 2.80 / 4.9:1，深色底 #111316 上 3.39 / 4.37 / 8.6:1。 颜色定义在这里而不是 JS 里，深浅两套就只有一处开关，map.js 只负责读。 */ :root{ --map-none:#97a0a8; /* 没有任何金额证据 */ --map-ev:#4aa77d; /* 正文里有 A/B 级金额句，但没折成月额 */ --map-rev:#0d6b45; /* 有已披露的月收入 */ --map-plate:#eeede7; /* 行政区底板 */ --map-grid:#e6e5df; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --map-none:#616a74; --map-ev:#2f8a63; --map-rev:#6fd0a5; --map-plate:#1c1f24; --map-grid:#23272d; } } :root[data-theme="dark"]{ --map-none:#616a74; --map-ev:#2f8a63; --map-rev:#6fd0a5; --map-plate:#1c1f24; --map-grid:#23272d; } .maphead{background:var(--card);border-bottom:1px solid var(--line)} .maphead-in{padding:20px} .maphead h1{font-size:22px;letter-spacing:-.01em} .maphead .sub{margin:5px 0 0;font-size:13.5px;color:var(--ink-2);max-width:70ch} .crumb{font-size:12px;color:var(--ink-3);margin:0 0 8px} .crumb a{color:var(--ink-3)} /* 先把话说在前面：地图站在什么数据上，缺什么。放在图上面而不是脚注里， 因为读图的人会先看图，看完就走。 */ .caveat{background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--hot); border-radius:6px;padding:12px 14px;margin:18px 0;font-size:13px;color:var(--ink-2);max-width:88ch} .caveat strong{color:var(--ink)} .caveat .mono{font-size:12.5px} .mapwrap{background:var(--card);border:1px solid var(--line);border-radius:8px; box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px} .mapbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap; padding:11px 14px;border-bottom:1px solid var(--line-2)} .mapbar .grow{flex:1} .mapbar .hint{font-size:12px;color:var(--ink-3)} .vbtn{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:6px;border:1px solid var(--line); background:var(--card);color:var(--ink-2);cursor:pointer} .vbtn:hover{color:var(--ink);background:var(--sunk)} .vbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card);font-weight:600} /* 行政区网格。卡片宽度给到 300px 起 —— 再窄，细分行业的名字就要换行，一换行 条和名字对不齐，扫一列条长的那个动作就断了。 */ .districts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px;background:var(--line-2);padding:1px;border-top:1px solid var(--line-2)} .district{background:var(--card);padding:13px 15px 15px} .district.hollow{background:var(--map-plate)} .district header{display:flex;align-items:baseline;gap:10px;margin-bottom:9px} .district h3{margin:0;font-size:13px;font-weight:700;letter-spacing:-.005em;flex:1;min-width:0} .district .dn{font:500 11.5px/1 "JetBrains Mono",monospace;color:var(--ink-3);white-space:nowrap} .district .dn b{color:var(--money);font-weight:700} .district .dn.zero{font-family:inherit;font-size:11px;font-style:italic} .niches{display:flex;flex-direction:column;gap:3px} /* 一格 = 一个细分行业。三列固定：名字 / 条 / 数字。条的轨道宽度在所有卡片里 一样，所以隔着一整个网格也能比长短 —— 这是横条相对柱子城市真正赢的地方。 */ .niche{display:grid;grid-template-columns:minmax(0,1fr) 40% 2.4em;align-items:center;gap:9px; width:100%;padding:3px 5px;margin:0 -5px;border:0;border-radius:4px;background:none; font:inherit;text-align:left;color:var(--ink-2);cursor:pointer} .niche:hover:not(:disabled){background:var(--sunk);color:var(--ink)} .niche:focus-visible{outline:2px solid var(--money);outline-offset:1px} .niche[aria-pressed="true"]{background:var(--tagbg);color:var(--ink);font-weight:600} .niche .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .niche .n{font:700 12px/1 "JetBrains Mono",monospace;text-align:right; font-variant-numeric:tabular-nums;color:var(--ink)} .niche .n.zero{color:var(--ink-3);font-weight:400} /* 轨道画满整格，条按数量占其中一段 —— 空轨道就是「这一格还有多少空间」。 */ .niche .lane{height:11px;background:var(--map-grid);border-radius:3px;overflow:hidden;display:block} .niche .bar{display:flex;height:100%;border-radius:3px;overflow:hidden;min-width:2px} .niche .bar i{display:block;height:100%} /* 一条案例都没有的格子不删也不藏：留一道空轨道，它说的是「这个细分我们查了， 没查到」，跟「这个细分不存在」是两件事。 */ .niche.empty{cursor:default;color:var(--ink-3)} .niche.empty .lane{background:none;border-top:1px dashed var(--line)} /* 「只看报了数字的」模式下，其余的格子压暗但不抽走 —— 行数一变，整页会跳。 */ .niche.muted{opacity:.26} .niche.muted:hover:not(:disabled){opacity:.6} .maplegend{display:flex;gap:18px;flex-wrap:wrap;align-items:center; padding:11px 14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)} .maplegend .sw{display:inline-flex;align-items:center;gap:7px} .maplegend .sw i{width:13px;height:13px;border-radius:3px;display:inline-block} .maplegend .axis{color:var(--ink-3);margin-left:auto;font-size:12px} /* 表格孪生体。图里读不出准确数字，这里能读，而且能被键盘和读屏走到。 */ .maptable{width:100%;border-collapse:collapse;font-size:13px} .maptable th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)} .maptable th.num,.maptable td.num{text-align:right;font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums} .maptable td{padding:7px 10px;border-bottom:1px solid var(--line-2)} .maptable tbody tr{cursor:pointer} .maptable tbody tr:hover{background:var(--sunk)} .maptable tbody tr[aria-selected="true"]{background:var(--tagbg)} .maptable .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:baseline} .maptable .zero{color:var(--ink-3)} .maptable .money{color:var(--money);font-weight:700} .maptable .grp{font-size:11px;color:var(--ink-3)} .mapcols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start; padding:22px 0 30px} @media (max-width:980px){ .mapcols{grid-template-columns:1fr} } .pickhd{font-size:13px;color:var(--ink-2);margin:0 0 10px} .pickhd b{color:var(--ink)} .picklist{display:flex;flex-direction:column;gap:9px;max-height:640px;overflow:auto} .emptypick{font-size:13px;color:var(--ink-3);background:var(--sunk);border-radius:7px;padding:14px} /* 首页去地图的入口。压在 tagline 下面，别跟诊断入口抢眼球。 */ .navlink{margin:6px 0 0;font-size:13px} .navlink a{color:var(--money);font-weight:600;text-decoration:none} .navlink a:hover{text-decoration:underline} .navlink span{color:var(--ink-3);margin-left:6px} /* ── 同意横幅 ───────────────────────────────────────────── 两个按钮**必须**长得一样、一样近、一样一步到位。把「拒绝」做小、做灰、 做成文字链、或者藏进「更多选项」，在欧盟就是无效同意（GDPR 第 4(11) 条 要求同意是自由作出的），法国、比利时、爱尔兰的监管机关都为此开过罚单。 要改这块样式，先想清楚改完两个按钮是不是还一样重。 */ /* 横幅是固定定位的，会盖住页面最后一屏内容。显示时给 body 垫一段， 收起时撤掉 —— 别让访客为了看最后一行而先去点掉横幅。 */ body.consent-open{padding-bottom:132px} @media (max-width:560px){ body.consent-open{padding-bottom:196px} } .consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card); border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(21,23,27,.08)} .consent[hidden]{display:none} .consent-in{max-width:1320px;margin:0 auto;padding:14px 20px;display:flex;gap:22px; align-items:center;flex-wrap:wrap} .consent-say{flex:1;min-width:260px} .consent-say b{display:block;font-size:13.5px;margin-bottom:3px} .consent-say p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;max-width:70ch} .consent-say a{color:var(--money);font-weight:600} .consent-do{display:flex;gap:10px;flex:0 0 auto} .consent-btn{font:600 13.5px/1 inherit;padding:10px 22px;border-radius:7px;cursor:pointer; border:1px solid var(--ink);background:var(--card);color:var(--ink);min-width:104px} .consent-btn:hover{background:var(--sunk)} .consent-btn[data-a="yes"]{background:var(--ink);color:var(--card)} .consent-btn[data-a="yes"]:hover{opacity:.88} @media (max-width:560px){ .consent-do{width:100%} .consent-btn{flex:1} } /* ── 搜索栏 ──────────────────────────────────────────────── 全站主入口，就在 logo 下面。刻意做得轻：它是一条栏，不是一屏落地页。 写进去的话在下面展开成答案（.ask-thread）。 */ .askbar-wrap{padding:0 0 16px} .askbar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px; background:var(--card);padding:0 6px 0 12px;box-shadow:var(--shadow)} .askbar:focus-within{border-color:var(--money);box-shadow:0 0 0 3px var(--money-bg)} .askbar svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2; stroke-linecap:round} .askbar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink); padding:12px 0;font:400 14.5px/1.4 "Source Sans 3","Noto Sans SC",system-ui} .askbar input:focus{outline:0} .askbar input::-webkit-search-cancel-button{cursor:pointer} .askbar button{flex:0 0 auto;border:0;border-radius:7px;cursor:pointer;padding:8px 15px; background:var(--money);color:#fff;font:600 13px/1 "Source Sans 3",system-ui} .askbar button:disabled{opacity:.55;cursor:default} .askbar-note{margin:6px 2px 0;font-size:11px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap} .askbar-note a{color:var(--ink-3)} #askHint{color:var(--hot)} #askHint:not(:empty)+.askbar-dim{opacity:.6} /* ── 一轮问答 ───────────────────────────────────────────── */ /* 答案是要读的，1320px 宽一行读不下去 —— 卡到一个正常的阅读宽度。 */ .ask-thread{margin:0;display:flex;flex-direction:column;gap:18px;max-width:900px} .ask-thread:not(:empty){margin:16px 0 4px} .ask-turn{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)} .ask-said{padding:11px 14px;background:var(--sunk);border-bottom:1px solid var(--line)} .ask-said-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);display:block;margin-bottom:4px} .ask-said p{margin:0;font-size:14.5px;color:var(--ink);white-space:pre-wrap} .ask-ans{padding:14px} .ask-readhd,.ask-none{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)} .ask-sigs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px} .ask-sig{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .ask-sig-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3)} .ask-chip{border-radius:5px;padding:3px 8px;font-size:12px;background:var(--tagbg);color:var(--tagink)} .ask-chip-money{background:var(--money-bg);color:var(--money)} .ask-chip-term{background:var(--sunk);color:var(--ink-2);font-family:"JetBrains Mono",monospace;font-size:11px} .ask-scope{margin:0 0 14px;padding:9px 11px;border-left:3px solid var(--money);background:var(--sunk); font-size:12.5px;color:var(--ink-2);border-radius:0 6px 6px 0} .ask-thin{color:var(--hot)} .ask-count{font:600 13px/1.3 "Source Sans 3",system-ui;color:var(--ink-2);margin:0 0 8px} .ask-empty{margin:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.55} .ask-case{border-top:1px solid var(--line-2);padding:11px 0} .ask-case:first-of-type{border-top:0} .ask-case-hd{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap} .ask-case-hd a{font:600 14.5px/1.35 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink); text-decoration:none} .ask-case-hd a:hover{text-decoration:underline} .ask-rev{flex:0 0 auto;font:700 12px/1 "JetBrains Mono",monospace;color:var(--money); background:var(--money-bg);border-radius:5px;padding:4px 7px} .ask-case-ex{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)} .ask-why{margin:6px 0 0;font-size:11.5px;color:var(--ink-3)} .ask-why-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin-right:4px} .ask-case-meta{margin:4px 0 0;font:400 11px/1 "JetBrains Mono",monospace;color:var(--ink-3)} .ask-next{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0; padding-top:13px;border-top:1px solid var(--line)} .ask-next-cta{background:var(--money);color:#fff;text-decoration:none;border-radius:7px; padding:9px 14px;font:600 13px/1 "Source Sans 3",system-ui} .ask-next-alt{color:var(--tagink);text-decoration:none;font-size:12.5px} .ask-next-alt:hover{text-decoration:underline} .ask-follow{margin:13px 0 0;padding:12px;border:1px dashed var(--line);border-radius:8px; background:var(--sunk)} .ask-follow-hd{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)} .ask-follow-line{display:flex;gap:7px} .ask-input-mini{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px; background:var(--card);color:var(--ink);font:400 13px/1 "Source Sans 3",system-ui} .ask-btn-mini{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px; padding:8px 13px;cursor:pointer;font:600 12.5px/1 "Source Sans 3",system-ui} .ask-consent{display:flex;gap:7px;align-items:flex-start;margin:8px 0 0;font-size:11.5px; color:var(--ink-3);line-height:1.45;cursor:pointer} .ask-consent input{margin-top:2px;flex:0 0 auto} .ask-say{margin:7px 0 0;font-size:12px;color:var(--ink-2)} @media (max-width:640px){ .ask-boxwrap{flex-direction:column;align-items:stretch} .ask-btn{width:100%} .ask-hd{font-size:21px} } /* ── 地区页 ──────────────────────────────────────────────── 复用地图页的 .district / .niche / .lane / .bar，因为它们回答同一类问题 （条长=数量，条内分段=披露了多少），只是换了个分组维度。这里只补两处 这个页面独有的：单列布局，和「没说在哪」那张卡下面的刻度说明。 */ .districts.one{grid-template-columns:1fr} .district .niche.wide{grid-template-columns:minmax(0,1fr) 62% 3.2em} .axis-note{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)} /* 地区名比细分行业名长，名字列给宽一点 */ #chart .niche{grid-template-columns:minmax(0,1fr) 52% 3.2em} @media (max-width:560px){ #chart .niche{grid-template-columns:minmax(0,1fr) 40% 2.6em} } /* 推演样例的标记。用警示色而不是灰色，位置在 meta 行最前 —— 一个需要眯着眼才能发现「这条是构造的」的标记，等于没有标记。 */ .case .meta .constructed{background:#fff4e2;color:#8a4b00;border:1px solid #e0a44a; border-radius:4px;padding:1px 7px;font-weight:700;font-size:10.5px;letter-spacing:.02em} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .case .meta .constructed{background:#2c2113;color:#f0b665;border-color:#7a5a24} } /* ── 素材挖掘页 ──────────────────────────────────────────── 三栏：维度 / 案例 / 命题。命题那栏是产出，所以给它固定宽度并粘住， 滚案例的时候它一直在视野里 —— 那是这个页面唯一要带走的东西。 */ .h1-sub{font:400 14px/1 "Source Sans 3",sans-serif;color:var(--ink-3);margin-left:8px} .minelayout{display:grid;grid-template-columns:230px minmax(0,1fr) 380px;gap:22px; align-items:start;padding:18px 0 34px} @media (max-width:1240px){ .minelayout{grid-template-columns:210px minmax(0,1fr)} .minebrief{grid-column:1/-1} } @media (max-width:820px){ .minelayout{grid-template-columns:1fr} } .minefilters .filterbox{position:sticky;top:14px} .fhint{font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:10px} .fnone{margin:0;font-size:12px;color:var(--ink-3)} .fopt.fzero{opacity:.4} .minecase{background:var(--card);border:1px solid var(--line);border-radius:8px; padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)} .minecase h3{margin:0 0 6px;font:600 15.5px/1.4 "Source Sans 3","Noto Sans SC",sans-serif} .minecase h3 a{text-decoration:none} .minecase h3 a:hover{text-decoration:underline;text-underline-offset:2px} .mc-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--ink-3);margin-bottom:9px} .mc-meta .rev{font:700 12.5px/1 "JetBrains Mono",monospace;color:var(--money)} .mc-meta .tg{font-size:11px;background:var(--sunk);padding:2px 7px;border-radius:99px;color:var(--ink-3)} /* 四维素材。左边那条色带是维度标识 —— 扫一眼就知道这条案例缺哪一维。 */ .insight{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 11px;font-size:13px} .insight dt{font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap; align-self:start;color:var(--card)} .insight dd{margin:0;color:var(--ink-2);line-height:1.55} .ins-problem{background:#b4460f} .ins-pain{background:#8b5cf6} .ins-solution{background:#0d6b45} .ins-effect{background:#1d4ed8} .noins{margin:0;font-size:12.5px;color:var(--ink-3);font-style:italic} .briefbox{position:sticky;top:14px;background:var(--card);border:1px solid var(--line); border-radius:8px;padding:14px;box-shadow:var(--shadow)} .brief-n{font:500 11.5px/1 "JetBrains Mono",monospace;color:var(--money)} .brief-say{margin:0 0 11px;font-size:13px;color:var(--ink-2);line-height:1.55} .brief-acts{display:flex;gap:8px;margin-bottom:11px} .brief-text{margin:0 0 11px;max-height:420px;overflow:auto;background:var(--sunk); border:1px solid var(--line-2);border-radius:6px;padding:11px; font:400 11.5px/1.6 "JetBrains Mono",monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink-2)} .brief-note{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink-3); border-top:1px solid var(--line-2);padding-top:10px} /* ── 首页：Reddit 式的行 ────────────────────────────────── 卡片墙换成分割线列表。密度是重点：卡片式一屏看 3 条，这样一屏看 8 条， 而这个站是索引，索引的第一职责是让人快速扫过去。 保留的两处「不像 Reddit」：收入徽章顶在标题前（这是本站存在的理由）， 以及抽到数字的原句留在行内（一个能核的数字比一个要你信的数字值钱）。 */ .list{display:block} .rrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px; padding:11px 4px 12px;border-bottom:1px solid var(--line-2);background:none} .rrow:hover{background:var(--card)} .rvote{display:flex;flex-direction:column;align-items:center;padding-top:1px} .rscore{font:700 13px/1 "JetBrains Mono",monospace;color:var(--ink-3)} .rtitle{margin:0 0 4px;font:600 15.5px/1.42 "Source Sans 3","Noto Sans SC",sans-serif} .rtitle a{text-decoration:none} .rtitle a:hover{text-decoration:underline;text-underline-offset:2px} .rdomain{margin-left:7px;font:400 12px/1 "JetBrains Mono",monospace;color:var(--ink-3);white-space:nowrap} /* 收入徽章：有数字的用账本绿，十万以上用高亮色，没有的走灰底 */ .rrev{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:4px; font:700 12.5px/1.5 "JetBrains Mono",monospace;background:var(--money-bg);color:var(--money); vertical-align:1px} .rrev.hot{background:#fdf0e7;color:var(--hot)} .rrev.none{background:var(--sunk);color:var(--ink-3);font-weight:500} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rrev.hot{background:#33210f} } :root[data-theme="dark"] .rrev.hot{background:#33210f} .rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:12px;color:var(--ink-3);line-height:1.7} .rmeta .sep{font-style:normal;color:var(--line);margin:0 1px} .rmeta a{color:var(--ink-3);text-decoration:none} .rmeta a:hover{color:var(--ink);text-decoration:underline} .rmeta .src{color:var(--ink-2);font-weight:600} .rmeta .more{color:var(--money);font-weight:600} .rex{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rrow .evi{margin:7px 0 0} .rrow .tags{margin-top:7px} @media (max-width:560px){ .rrow{grid-template-columns:34px minmax(0,1fr);gap:8px} .rdomain{display:none} } /* 首页改成 Reddit 式的行之后，.case 这个类名没了， 而这三个徽章的样式原来是挂在 .case .meta 下面的 —— 改版时漏了， 它们变成了没有背景的裸文字。补回来，挂到 .rmeta 上。 （constructed 尤其不能漏：读者必须一眼看出这条是构造的。） */ .rmeta .constructed{background:#fff4e2;color:#8a4b00;border:1px solid #e0a44a; padding:0 6px;border-radius:3px;font-size:11px;font-weight:600} .rmeta .trend{background:var(--hot);color:var(--paper);padding:0 6px;border-radius:3px; font-size:11px;font-weight:600} .rmeta .trend.exp{background:var(--tagbg);color:var(--tagink)} .rmeta .viac{background:var(--tagbg);color:var(--tagink);padding:0 6px;border-radius:3px;font-size:11px} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rmeta .constructed{background:#2c2113;color:#f0b665;border-color:#7a5a24} } :root[data-theme="dark"] .rmeta .constructed{background:#2c2113;color:#f0b665;border-color:#7a5a24} /* ── 语言选择器 ──────────────────────────────────────────── 用原生