/* 净因全站原型 · 外壳（第 3 版）：顶栏、菜单、星空上的玻璃、普通页面的共用件、弹窗和提示 */
/* ---------- 星空（首页）铺满；其他页面在它上面 ---------- */
.sky{position:fixed;inset:0;z-index:0;background:var(--bg);transition:opacity .4s var(--ease)}
.sky canvas{position:absolute;left:0;top:0;display:block}
.sky .sky-gas{filter:blur(2px);opacity:.95}
[data-look="day"] .sky .sky-gas{opacity:.85}
body.page-on .sky{opacity:0;pointer-events:none}
/* 页面顶上的星带：天只露顶上一条，往下滚就被页面盖住（页面的底色从透明渐变到实的，跟着内容一起滚） */
body.page-on.band .sky{opacity:1;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 150px,transparent 240px);mask-image:linear-gradient(to bottom,#000 0,#000 150px,transparent 240px)}
body.page-on.band .page{background:linear-gradient(to bottom,transparent 0,transparent 140px,var(--bg) 250px) local;padding-top:calc(var(--top) + 52px)}

/* ---------- 顶栏 ---------- */
.top{position:fixed;left:0;right:0;top:0;height:var(--top);z-index:30;display:grid;grid-template-columns:1fr minmax(300px,520px) 1fr;align-items:center;gap:20px;padding:0 20px 0 24px}
body.page-on .top{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.top .tl{display:flex;align-items:center;gap:30px;min-width:0}
/* 10-08 字标“净因ai”是一个图形（思源宋体 500 的轮廓，fill=currentColor）：大小跟着 .wm 的字号走（电脑 20px、手机 17px），上下按字的墨迹居中；原来靠 letter-spacing 拉开的字距已经画在图形里 */
.wm{font:500 20px/1 var(--serif);color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center}
.wm-svg{display:block;flex:0 0 auto;width:3.3126em;height:0.9532em}
.wm:hover{text-decoration:none}
.tabs{display:flex;gap:4px}
.tabs a{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-s);color:var(--ink2);font-size:var(--f3);white-space:nowrap;transition:color var(--dur),background var(--dur)}
.tabs a:hover{color:var(--ink);background:var(--hover);text-decoration:none}
.tabs a.on{color:var(--ink)}
.tabs a.on::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.tabs .tabi{display:none}
.tabs a.mob{display:none}
.q{position:relative}
.q input{width:100%;height:40px;border-radius:var(--r-l);border:1px solid transparent;background:var(--fill);padding:0 16px 0 42px;font-size:var(--f2);transition:border-color var(--dur),background var(--dur)}
body:not(.page-on) .q input{background:var(--glass);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.q input:hover{background:var(--fill2)}
.q input:focus{border-color:var(--line2);background:var(--panel2)}
.q input::-webkit-search-cancel-button{-webkit-appearance:none}
.q .qi{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;background:var(--ink3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.qdrop{position:absolute;left:0;right:0;top:48px;background:var(--panel2);border-radius:var(--r-l);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:6px;display:none;max-height:min(72vh,560px);overflow:auto;backdrop-filter:blur(16px)}
.qdrop.on{display:block;animation:jyfade var(--dur) var(--ease)}
.qdrop .grp{font-size:var(--f1);color:var(--ink3);padding:10px 12px 4px}
.qdrop a{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:var(--r-s);color:var(--ink)}
.qdrop a:hover,.qdrop a.on{background:var(--hover);text-decoration:none}
.qdrop a .w{flex:0 0 auto;font-size:var(--f1);color:var(--ink3);min-width:52px}
.qdrop a .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--f3)}
.qdrop a .to{flex:0 0 auto;font-size:var(--f1);color:var(--ink3)}
.qdrop .all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.qdrop .say{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:10px}
.top .tr{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.tw{margin-right:6px}
.tw .i{width:16px;height:16px}
.ico{width:36px;height:36px;border-radius:50%;display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;font:400 var(--f2) var(--sans);color:var(--ink2);transition:background var(--dur),color var(--dur);flex:0 0 auto;border:0}
.ico:hover{background:var(--hover);color:var(--ink)}
.ico.sm{width:30px;height:30px;font-size:var(--f1)}
.ico.on{color:var(--acc-ink);background:var(--acc-soft)}
body:not(.page-on) .top .ico,body:not(.page-on) .mebtn{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mebtn{position:relative;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background var(--dur)}
.mebtn:hover{background:var(--hover)}
.mebtn .av{width:30px;height:30px;background:var(--acc-soft)}
.mebtn .unread{position:absolute;right:-4px;top:-3px;box-shadow:0 0 0 2px var(--bg)}
/* 菜单：从按钮下面出来，玻璃底，每行一个图标一个字 */
.dd{position:relative}
.menu{position:absolute;right:0;top:44px;min-width:220px;background:var(--panel2);border-radius:var(--r-l);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:6px;display:none;z-index:40;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.menu.on{display:block;animation:jyfade var(--dur) var(--ease)}
.menu .mi{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:var(--r-s);font-size:var(--f2);color:var(--ink);text-align:left;white-space:nowrap}
.menu .mi .i{color:var(--ink2)}
.menu .mi:hover,.menu .mi:focus-visible{background:var(--hover);text-decoration:none}
.menu .mi.on{color:var(--ink)}
.menu .mi.on .i{color:var(--acc)}
.menu .mi .unread{margin-left:auto}
.menu .msep{height:1px;background:var(--line);margin:6px 8px}
.menu .mlab{font-size:var(--f1);color:var(--ink3);padding:6px 12px 2px}
.menu .mnote{font-size:var(--f1);color:var(--ink3);padding:8px 12px 6px;line-height:1.55;white-space:normal;max-width:260px}
.menu .mhead{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .mhead .av{background:var(--acc-soft)}
.menu .mhead b{display:block;font-weight:500;font-size:var(--f3)}
.menu .mhead .faint{font-size:var(--f1)}
/* 原型用的东西：一个虚线的小标，看得出不属于产品 */
.protochip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;margin-left:8px;border-radius:var(--r-s);border:1px dashed var(--line2);color:var(--ink3);font-size:var(--f1);white-space:nowrap;transition:color var(--dur),border-color var(--dur)}
.protochip:hover{color:var(--ink2);border-color:var(--ink3)}
.protochip .pk{color:var(--ink2)}
.protochip.on{border-color:var(--acc);color:var(--acc-ink)}
.protochip.on .pk{color:var(--acc-ink)}

/* ---------- 星空上的玻璃 ---------- */
.skyui{position:fixed;inset:0;z-index:10;pointer-events:none}
.skyui>*{pointer-events:auto}
/* 用键盘在星系里走：平时透明、不挡点；Tab 进去才显出来，贴在下沿，一行能横着滚 */
.skykeys{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);display:flex;gap:6px;max-width:min(920px,calc(100vw - 32px));overflow-x:auto;padding:6px;border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line);opacity:0;pointer-events:none!important;scrollbar-width:none;transition:opacity var(--dur)}
.skykeys::-webkit-scrollbar{display:none}
.skykeys:focus-within{opacity:1;pointer-events:auto!important}
.skykeys .kb{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:9px;color:var(--ink2);font-size:var(--f2);white-space:nowrap}
.skykeys .kb:focus-visible{outline:2px solid var(--acc);outline-offset:1px;color:var(--ink);background:var(--fill2)}
.skykeys .kb.up{color:var(--ink3)}
.skykeys .kb.q::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;border:1.3px solid currentColor;margin-right:7px;vertical-align:0}
.skykeys .kb.dstart{margin-left:10px}
.skykeys .kb.dstart:first-child{margin-left:0}
body.page-on .skykeys,body.reading .skykeys{display:none}
body.page-on .skyui{display:none}
.crumbs{position:absolute;left:20px;top:calc(var(--top) + 10px);display:flex;align-items:center;gap:12px;font-size:var(--f2);z-index:3}
.crumbs .back{margin:0;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.seg{display:inline-flex;gap:2px;border-radius:10px;padding:3px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line)}
.seg a{padding:4px 13px;border-radius:7px;color:var(--ink2);font-size:var(--f2);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.seg a:hover{text-decoration:none;color:var(--ink)}
.seg a.on{background:var(--fill2);color:var(--ink)}
.seg.sm a{padding:2px 10px;font-size:var(--f1)}
.crumb{display:flex;align-items:center;gap:8px;color:var(--ink2);flex-wrap:wrap;margin-left:6px}
.crumb a{color:var(--ink2)}.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--ink4)}
.crumb b{font-weight:400;color:var(--ink)}
.crumb .cdir{color:var(--ink3)}
.hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:var(--f1);color:var(--ink2);text-shadow:0 0 10px var(--bg),0 0 3px var(--bg);white-space:nowrap;transition:opacity .6s;pointer-events:none}
.tools{position:absolute;right:20px;bottom:20px;display:flex;gap:8px}
.tools .ico{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line)}
body:has(.card.on) .tools{right:436px}
/* 卡片：看一个区、一个词时在右边；玻璃底，只放一层 */
.card{position:absolute;right:16px;top:calc(var(--top) + 10px);bottom:16px;width:400px;background:var(--panel);border-radius:18px;box-shadow:var(--shadow),0 0 0 1px var(--line);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);display:flex;flex-direction:column;transform:translateX(20px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s linear .3s}
.card.on{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.card .ch{padding:22px 24px 6px;position:relative}
.card .cx{position:absolute;right:14px;top:14px}
.card .cb{padding:4px 24px 24px;flex:1 1 auto;min-height:0}
.card .ey{font-size:var(--f1);color:var(--ink3);display:flex;gap:8px;align-items:center;padding-right:36px}
.card h2{font:500 var(--f5)/1.35 var(--serif);margin:6px 0 4px}
.card h2.q2{font-size:var(--f4);line-height:1.55}
.card .al,.al{font-size:var(--f1);color:var(--ink3)}
.card .bl{font-size:var(--f2);color:var(--ink2);margin:10px 0 2px;line-height:1.7}
.card .stat{font-size:var(--f1);color:var(--ink3);margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.card .stat .me{color:var(--acc-ink)}
.findp{left:16px;right:auto;width:440px;top:calc(var(--top) + 58px)}
.st-part,.st-none{color:var(--warn)}
.interp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 4px}
.interp .lab,.c-inds .lab{font-size:var(--f1);color:var(--ink3);margin-right:4px}
.interp .note{flex-basis:100%;margin-top:2px}
.sec{margin-top:24px}
.sec h4{font:400 var(--f1) var(--sans);color:var(--ink3);margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec h4 a{color:var(--ink3);font-size:var(--f1)}
.rows a,.rows .row{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink)}
.rows a:first-child,.rows .row:first-child{border-top:0}
.rows a:hover{text-decoration:none}
.rows a:hover .ti,.rows a:hover>.t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
.rows .t{flex:1 1 auto;min-width:0;line-height:1.55;font-size:var(--f3)}
.rows .ti{font-family:var(--serif)}
.rows .m{flex:0 0 auto;font-size:var(--f1);color:var(--ink3);white-space:nowrap}
.rows .sub{display:block;font-size:var(--f1);color:var(--ink3);margin-top:4px;font-family:var(--sans)}
.rows .ans{display:block;font-size:var(--f1);color:var(--ink2);margin-top:4px;line-height:1.55}
.rows .ans::before,.c-main .ans::before,.list .ans::before{content:"答：";color:var(--ink3)}
.rows .row>.tt{flex:1 1 auto}
/* 手机上：一行放不下时，右边的操作换到下一行，标题不被挤成一条窄栏 */
@media (max-width:760px){.rows .row{flex-wrap:wrap}.rows .row .m{white-space:normal;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 12px}}
/* 问题：一个空心的圈，和内容（实心）分开 */
.qs a.q,.c-ss a.q,.c-sline a.q{position:relative}
.qm{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.3px solid var(--ink2);margin-right:9px;vertical-align:0;flex:0 0 auto}
.qs a.q .t{font-size:var(--f3)}
.qs a.q.on .t{color:var(--ink);font-weight:500}
.qs a.q.on .qm{background:var(--ink2)}
/* 新目录：问题按“面”分组的小标题；候选问题用虚线圈 */
.qs .qf{font-size:var(--f1);color:var(--ink3);margin:10px 0 2px}
.qs .qf:first-child{margin-top:0}
.qs a.q.cand .qm{border-style:dashed}
/* 小标题里的“去收编 →”：点的地方不能太小 */
.sec h4 a.h4go{display:inline-flex;align-items:center;min-height:32px;padding:0 4px}
/* 大家的答案：一句话、几篇这么说、底下一根细条表示多少 */
.ags{display:flex;flex-direction:column;gap:2px}
.ag{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 10px 10px;border-radius:var(--r-s);color:var(--ink)}
.ag:hover{background:var(--fill);text-decoration:none}
.ag .t{font-size:var(--f3);line-height:1.5}
.ag .n{flex:0 0 auto;font-size:var(--f1);color:var(--ink3);font-variant-numeric:tabular-nums}
.ag .bar{position:absolute;left:10px;bottom:4px;height:2px;border-radius:2px;background:var(--acc);opacity:.55;max-width:calc(100% - 20px)}
.rel .t{font-size:var(--f3)}
.rel .why{display:block;font-size:var(--f1);color:var(--ink2);margin-top:4px;line-height:1.55}
.rel .ty{font-size:var(--f1);color:var(--ink3);flex:0 0 auto;min-width:64px;white-space:nowrap}
.rel .ty.care{color:var(--warn)}
.rows a.rel-ev{border-top:0;padding:0 0 10px 74px;font-size:var(--f1);color:var(--ink2)}
.rel a.rel-ev .ty{min-width:0}
.rel a.rel-ev .t{font-size:var(--f1);color:var(--ink2)}
.rel .ty.pre,.rel .ty.post{color:var(--ink2)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center}
.acts.col{flex-direction:column;align-items:stretch}
.acts2{display:flex;gap:8px;align-items:center}
.tag-me{color:var(--acc-ink);font-size:var(--f1)}
.on-desk{display:inline-flex;align-items:center;gap:6px;font-size:var(--f1);color:var(--acc-ink);background:var(--acc-soft);border-radius:var(--r-s);padding:5px 11px;white-space:nowrap}
/* 天上的“你”：身边浮出三个按钮和一扇门 */
.ring{position:absolute;left:0;top:0;display:none;gap:6px;align-items:center;flex-wrap:wrap;max-width:360px;transition:opacity .2s}
.ring.on{display:flex;animation:jyfade .3s var(--ease)}
.ring button,.ring .door{height:34px;padding:0 14px;border-radius:var(--r-s);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent);color:var(--acc-ink);font-size:var(--f2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ring button:hover,.ring button.on{background:var(--acc-soft)}
.ring .door{background:var(--acc);color:#16120b;box-shadow:none;border-radius:var(--r-pill);font-weight:500}
.ring .door:hover{text-decoration:none;opacity:.9}
.ring .n{min-width:16px;height:16px;border-radius:8px;background:var(--acc);color:#16120b;font-size:11px;line-height:16px;text-align:center;padding:0 4px}
/* 左下：线的图例，就是开关（安静一点） */
.legend{position:absolute;left:20px;bottom:20px;display:flex;gap:4px;flex-wrap:wrap;padding:3px;border-radius:10px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line)}
.legend .lg{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:7px;color:var(--ink3);font-size:var(--f1)}
.legend .lg:hover{background:var(--hover);color:var(--ink2)}
.legend .lg i{display:inline-block;width:16px;height:0;border-top:1.5px solid currentColor;opacity:.5}
.legend .lg.me.on{color:var(--acc-ink)}
.legend .lg.fol.on{color:var(--fol)}
.legend .lg.fol i{border-top-style:dashed}
.legend .lg.crowd.on{color:var(--ink2)}
.legend .lg.key{gap:6px;cursor:default;padding:0 10px 0 12px;box-shadow:inset 1px 0 0 var(--line);border-radius:0 7px 7px 0}
.legend .lg.key:hover{background:none;color:var(--ink3)}
.legend .lg.key b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--new);box-shadow:0 0 6px var(--new)}
.legend .lg.key b.od{background:var(--old);box-shadow:0 0 6px var(--old);margin-left:6px}
.legend .lg.key.fam b{margin-left:8px}.legend .lg.key.fam b:first-child{margin-left:0}
.legend .lg.crowd i{border-top-style:dotted}
.legend .lg.on i{opacity:1}
/* 收干净：图例收成一个小按钮，点开才是开关和颜色 */
.legend.fold{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;flex-direction:column-reverse;align-items:flex-start;gap:8px}
.lgbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line);color:var(--ink3);font-size:var(--f1);transition:color var(--dur),background var(--dur)}
.lgbtn:hover,.legend.open .lgbtn{color:var(--ink);background:var(--panel)}
.lgpop{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:10px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line);animation:jyfade var(--dur) var(--ease)}
.since.slim{padding:4px 5px 4px 13px;gap:10px}
.since.slim .tx{font-size:var(--f1)}
.pm-sub{font-size:var(--f1);color:var(--ink3);margin:20px 0 -2px;padding-top:14px;box-shadow:inset 0 1px 0 var(--line)}
/* 你走以后：顶上一行，安静地 */
.since{position:absolute;left:50%;top:calc(var(--top) + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(720px,calc(100vw - 560px));padding:5px 6px 5px 14px;border-radius:12px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--line);font-size:var(--f2);z-index:2}
.since .lab{color:var(--acc-ink);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.since .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.since .tx{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.since .sep{color:var(--ink4);margin:0 8px}
/* 第一次来 */
.firstnote{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);max-width:540px;padding:16px 18px 16px 20px;border-radius:var(--r-l);background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;gap:18px;align-items:center;font-size:var(--f2);color:var(--ink2);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.firstnote p{margin:0;line-height:1.7}

/* ---------- 普通页面（经典、市集、前沿、工作台……） ---------- */
.page{position:fixed;inset:0;z-index:5;overflow:auto;padding-top:var(--top);display:none;background:var(--bg)}
body.page-on .page{display:block;animation:jyfade var(--dur) var(--ease)}
.wrap{max-width:1120px;margin:0 auto;padding:36px 40px 120px}
.wrap.narrow{max-width:760px}
.ph1{font:500 var(--f6)/1.3 var(--serif);margin:4px 0 10px}
.lede{font-size:var(--f3);color:var(--ink2);max-width:680px;line-height:1.8;margin:0}
.ey2{font-size:var(--f1);color:var(--ink3)}
.subnav{display:flex;gap:4px;margin:26px 0 0;flex-wrap:wrap;box-shadow:inset 0 -1px 0 var(--line)}
.subnav a{padding:10px 12px;color:var(--ink2);font-size:var(--f3);position:relative;border-radius:var(--r-s) var(--r-s) 0 0}
.subnav a:hover{color:var(--ink);text-decoration:none;background:var(--hover)}
.subnav a.on{color:var(--ink)}
.subnav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:1px;background:var(--ink)}
.listhead{display:flex;justify-content:space-between;align-items:center;margin:20px 0 6px;font-size:var(--f1);color:var(--ink3);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* 纸卡：浅一层的底，没有描线 */
.box{border-radius:var(--r-card);padding:20px 22px;background:var(--paper);display:block;color:var(--ink);transition:background var(--dur)}
[data-look="day"] .box{box-shadow:0 0 0 1px var(--line)}
a.box:hover{background:var(--paper2);text-decoration:none}
.box h3{font:500 var(--f4)/1.4 var(--serif);margin:0 0 8px}
.box h4{font:400 var(--f1) var(--sans);color:var(--ink3);margin:0 0 8px}
.box p{margin:0 0 6px;color:var(--ink2);font-size:var(--f2);line-height:1.7}
/* 工作台里（生意、空间设置）：不要灰底卡片，一段一段用细线分开 */
.b-main .grid2{gap:0 56px}
.b-main .grid2>.box{background:none;border-radius:0;padding:22px 0 26px;box-shadow:inset 0 1px 0 var(--line)}
/* 表单：不要一整块灰板，输入框自己有底就够了 */
.box.m-form{background:none;border-radius:0;padding:0;box-shadow:none}
/* 列表：一行一样东西，细线分开 */
.list{border-top:1px solid var(--line)}
.li{display:flex;gap:18px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink);border-radius:2px}
a.li:hover{text-decoration:none;background:var(--hover)}
a.li:hover .ti{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
.li .lt{flex:1 1 auto;min-width:0}
.li .lt .t{font:400 var(--f4)/1.55 var(--serif)}
.li .lt .d{font-size:var(--f1);color:var(--ink3);margin-top:5px;line-height:1.6}
.li .lt .ans{font-size:var(--f2);color:var(--ink2);margin-top:5px}
.li .lm{flex:0 0 auto;font-size:var(--f1);color:var(--ink3);text-align:right;white-space:nowrap}
.kws{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.note{font-size:var(--f1);color:var(--ink3);line-height:1.7}
.empty{padding:40px 0;color:var(--ink3);font-size:var(--f2)}
/* 表单：浅底的框，没有描线；出错写在字段下面 */
.field{display:block;margin:0 0 20px;border:0;padding:0}
.field .lb,.field legend.lb{display:block;font-size:var(--f2);color:var(--ink2);margin-bottom:8px;padding:0}
.field .lb b{font-weight:400;color:var(--warn);margin-left:4px}
.field input,.field textarea,.field select{width:100%;border:1px solid transparent;background:var(--fill);border-radius:var(--r-s);padding:10px 12px;font-size:var(--f3);transition:border-color var(--dur),background var(--dur)}
.field input:hover,.field textarea:hover,.field select:hover{background:var(--fill2)}
.field textarea{min-height:120px;line-height:1.75;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--line2);background:var(--paper)}
.field .err,.err{display:block;font-size:var(--f1);color:var(--warn);margin-top:6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.radios{display:flex;gap:6px;flex-wrap:wrap;border:0;padding:0;margin:0}
.radios.col{flex-direction:column;align-items:flex-start}
.radios label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:var(--r-s);background:var(--fill);font-size:var(--f2);color:var(--ink2);cursor:pointer;transition:background var(--dur),color var(--dur)}
.radios label:hover{background:var(--fill2);color:var(--ink)}
.radios label input{position:absolute;opacity:0;width:1px;height:1px}
.radios label:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.radios label.on{color:var(--ink);background:var(--fill2);box-shadow:inset 0 0 0 1.5px var(--ink3)}
/* 选中的不再是白底（白底实心只给主按钮）：浅底加一圈线 */
.switch{display:inline-flex;align-items:center;gap:8px;font-size:var(--f2);cursor:pointer}
.switch input{width:16px;height:16px;accent-color:var(--ink)}

/* ---------- 第 3 版补的共用件：开关、分段、带说明的单选、设置行、空的时候、输入条 ---------- */
/* 开关：开和关两种状态的事（谁能看见你的线）。开是实底，和主按钮同一个颜色；不用琥珀（琥珀只代表你） */
.sw{position:relative;display:inline-flex;flex:0 0 auto;width:42px;height:24px;cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:12px;background:var(--fill2);box-shadow:inset 0 0 0 1px var(--line2);transition:background var(--dur),box-shadow var(--dur)}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--ink2);transition:transform var(--dur) var(--ease),background var(--dur)}
.sw input:checked+i{background:var(--ink);box-shadow:none}
.sw input:checked+i::after{transform:translateX(18px);background:var(--bg)}
.sw input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}
.sw:hover i{box-shadow:inset 0 0 0 1px var(--ink4)}
/* 分段：两三个短选项里选一个（夜里 / 白天；语言） */
.segc{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:var(--fill)}
.segc label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:64px;height:32px;padding:0 14px;border-radius:7px;font-size:var(--f2);color:var(--ink2);cursor:pointer;white-space:nowrap;transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.segc label:hover{color:var(--ink)}
.segc input{position:absolute;opacity:0;width:1px;height:1px}
.segc label.on{background:var(--paper2);color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
[data-look="day"] .segc label.on{background:var(--paper);box-shadow:0 1px 2px rgba(20,20,20,.08),0 0 0 1px var(--line)}
.segc label:focus-within{outline:2px solid var(--acc);outline-offset:1px}
/* 带说明的单选：选项长、要解释的时候（通知怎么提醒） */
.opts{display:flex;flex-direction:column;gap:2px;margin:0 -12px}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-s);cursor:pointer;transition:background var(--dur)}
.opt:hover{background:var(--hover)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .rd{position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink3);transition:box-shadow var(--dur)}
.opt input:checked~.rd{box-shadow:inset 0 0 0 1.5px var(--ink)}
.opt input:checked~.rd::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--ink)}
.opt:focus-within{outline:2px solid var(--acc);outline-offset:-2px}
.opt .ox{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt .ol{font-size:var(--f3);color:var(--ink2);line-height:1.55}
.opt input:checked~.ox .ol{color:var(--ink)}
.opt .od{font-size:var(--f1);color:var(--ink3);line-height:1.65}
/* 设置：一组一个小标题；一行左边写是什么、为什么，右边放开关或按钮；行和行之间一条细线 */
.sets{display:flex;flex-direction:column;gap:36px;max-width:720px;margin-top:26px}
.sg>h3{font:500 var(--f4)/1.4 var(--serif);margin:0 0 6px}
.sg>.sgd{font-size:var(--f2);color:var(--ink2);margin:0 0 10px;line-height:1.75}
.srow{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 0;box-shadow:inset 0 -1px 0 var(--line)}
.srow:first-of-type{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.sg>h3+.srow,.sg>.sgd+.srow{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.srow .sx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.srow>.segc,.srow>.sw,.srow>.btn,.srow>.sv{flex:0 0 auto}
.srow>.segc{flex-wrap:nowrap}
.srow .sl{font-size:var(--f3);color:var(--ink)}
.srow .sd{font-size:var(--f1);color:var(--ink3);line-height:1.65}
.srow .sv{font-size:var(--f2);color:var(--ink2);white-space:nowrap}
.btn.danger{color:var(--warn)}
@media (max-width:760px){.srow{flex-wrap:wrap;gap:10px 16px}.srow .sx{flex:1 1 200px}.srow>.segc{flex:1 1 100%}.srow>.segc label{flex:1 1 0}}
/* 空的时候：几颗还没点亮的星，一句话说为什么空，一个能走下去的按钮 */
.none{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 0 10px;color:var(--ink3)}
.none.c{align-items:center;text-align:center;padding:56px 20px;margin:0 auto;max-width:440px}
.none-g{display:block;width:46px;height:28px;color:var(--ink3);opacity:.7;margin-bottom:4px}
.none-g svg{display:block;width:100%;height:100%}
.none-t{margin:0;font-size:var(--f2);color:var(--ink2);line-height:1.6}
.none-d{margin:0;font-size:var(--f1);color:var(--ink3);line-height:1.7;max-width:440px}
.none .btn{margin-top:10px}
/* 输入条：评论、问一句的回复、市集里说一句，都和往来里的聊天用同一个——圆的输入框，发送键在里面；回车发出去，Shift+回车换行 */
.c-bar{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 16px;border-radius:24px;background:var(--fill);transition:background var(--dur),box-shadow var(--dur)}
.c-bar:focus-within{background:var(--fill2);box-shadow:0 0 0 1px var(--line2)}
.c-bar textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;font-size:var(--f3);line-height:1.6;padding:8px 0;max-height:168px;min-height:26px;display:block;color:var(--ink)}
.c-bar textarea:focus,.c-bar textarea:focus-visible{outline:none}
.c-send{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:opacity var(--dur)}
.c-send:hover{opacity:.88}
.c-send .i{width:19px;height:19px;margin-left:-2px}
.c-bar.sm{padding:3px 3px 3px 14px;border-radius:20px}
.c-bar.sm textarea{font-size:var(--f2);padding:7px 0}
.c-bar.sm .c-send{width:34px;height:34px}.c-bar.sm .c-send .i{width:16px;height:16px}
.c-scope{font-size:var(--f1);color:var(--ink3);margin:8px 6px 0;display:flex;align-items:center;gap:6px;line-height:1.6}
.comments .c-bar,.dthread .c-bar{margin-top:14px}
.comments .c-bar+.c-scope{margin-bottom:4px}
@media (max-width:760px){.c-bar textarea{font-size:16px}.c-send{width:44px;height:44px}.c-bar.sm .c-send{width:40px;height:40px}.segc label{height:40px}}

/* 提示条：统一在顶上，永远不盖住输入框 */
.toast{position:fixed;left:50%;top:calc(var(--top) + 12px);transform:translate(-50%,-8px);background:var(--panel2);color:var(--ink);border-radius:12px;padding:10px 18px;font-size:var(--f2);z-index:90;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s var(--ease);max-width:min(640px,calc(100vw - 32px));text-align:center;box-shadow:var(--shadow),0 0 0 1px var(--line2)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.warn{color:var(--warn);box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
/* 弹窗 */
.modal{position:fixed;inset:0;z-index:80;background:rgba(3,4,7,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
[data-look="day"] .modal{background:rgba(20,20,20,.22)}
.modal.on{display:flex;animation:jyfade var(--dur) var(--ease)}
.modal .mbox{background:var(--panel2);border-radius:18px;width:min(580px,100%);max-height:88vh;overflow:auto;padding:28px 30px;box-shadow:var(--shadow),0 0 0 1px var(--line)}
.modal .mbox.wide{width:min(760px,100%)}
.modal h3{font:500 var(--f5) var(--serif);margin:0 0 16px}
.modal .pick{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.modal .pick .li{padding:12px 6px;cursor:pointer;gap:12px;align-items:center;text-align:left;width:100%}
.modal .pick .li:hover{background:var(--hover)}
.modal .pick input{width:16px;height:16px;accent-color:var(--ink);flex:0 0 auto}
.pm-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.nf{padding-top:80px}

@media (max-width:1100px){.top{grid-template-columns:auto 1fr auto}.tabs{gap:0}.tabs a{padding:0 9px}.protochip .sbadge{display:none}.since{max-width:calc(100vw - 40px)}}
@media (max-width:760px){
  :root{--top:56px}
  .top{grid-template-columns:auto 1fr auto;gap:10px;padding:0 12px}
  body.page-on .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  /* 底栏：知识、实测、前沿、市集、工作台（选了“六个”时还有“我”） */
  /* 10-08 创始人定：手机底栏从左到右 知识、实测、前沿、市集、工作台；10-09 起先后由 app.js tabs() 按宽度直接排（不用 CSS order，键盘先后和看到的一致） */
  .tabs{position:fixed;left:0;right:0;bottom:0;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);justify-content:space-around;align-items:stretch;background:var(--panel2);box-shadow:0 -1px 0 var(--line);z-index:31;gap:0}
  .tabs a,.tabs a.mob{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:auto;flex:1 1 0;padding:0;font-size:12px;border-radius:0;color:var(--ink3)}
  .tabs a:hover{background:none}
  .tabs a.on{color:var(--ink)}
  .tabs a.on::after{display:none}
  .tabs .tabi{display:block;width:22px;height:22px}
  .tabs a.on .tabi{color:var(--ink)}
  .tw{position:fixed;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:31;height:48px;padding:0 20px;box-shadow:var(--shadow);font-size:var(--f2)}
  body:has(.sheet.on) .tw,body:has(.card.on) .tw,body:has(input:focus) .tw,body:has(textarea:focus) .tw{display:none}
  .tw{transition:transform .25s var(--ease),opacity .2s var(--ease)}
  body.fab-away .tw{transform:translateY(16px);opacity:0;pointer-events:none}
  .wm{font-size:17px}
  .q input{height:38px;font-size:16px}
  .q:focus-within{position:fixed;left:10px;right:10px;top:9px;z-index:40}
  .protochip,.lang{display:none}
  .medd .menu{right:-4px}
  .card{left:0;right:0;top:auto;bottom:calc(58px + env(safe-area-inset-bottom));width:auto;max-height:60vh;border-radius:18px 18px 0 0;transform:translateY(30px)}
  .findp{width:auto}
  .crumbs{left:12px;right:12px;flex-wrap:wrap;gap:8px}
  .crumb{display:none}
  .hint{display:none}
  .tools{bottom:calc(72px + env(safe-area-inset-bottom));right:12px}
  body:has(.card.on) .tools{display:none}
  .legend{left:12px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:calc(100vw - 120px)}
  body:has(.card.on) .legend{display:none}
  .since{top:calc(var(--top) + 54px);bottom:auto;left:12px;right:12px;transform:none;max-width:none;flex-wrap:wrap}
  .since.slim{flex-wrap:nowrap;gap:8px}.since.slim .lab{font-size:var(--f1)}.since.slim .btn{padding:0 11px}
  .firstnote{bottom:140px;left:12px;right:12px;transform:none;flex-direction:column;align-items:flex-start}
  .wrap{padding:22px 16px 140px}
  .grid3,.grid2{grid-template-columns:1fr}
  .ph1{font-size:26px}
  .field input,.field textarea,.field select{font-size:16px}
  .btn{min-height:44px}.btn.sm{min-height:40px}
  .modal{align-items:flex-end;padding:0}
  .modal .mbox{border-radius:18px 18px 0 0;max-height:90vh;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
}

/* 指着一团时说里面有什么：跟着指针的小卡片，指针穿过去不挡点 */
.peek{position:fixed;z-index:40;left:0;top:0;width:min(280px,calc(100vw - 24px));padding:12px 14px 11px;border-radius:var(--r-l);background:var(--panel2);box-shadow:var(--shadow),0 0 0 1px var(--line);color:var(--ink);pointer-events:none!important;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
.peek.on{opacity:1;visibility:visible;transform:none}
.peek .pk-ey{font-size:var(--f1);color:var(--ink3);line-height:1.5}
.peek .pk-h{font:500 var(--f4)/1.35 var(--serif);margin:1px 0 4px}
.peek .pk-b{margin:0 0 8px;font-size:var(--f2);color:var(--ink2);line-height:1.55}
.peek .pk-l{font-size:var(--f1);color:var(--ink3);line-height:1.5}
.peek .pk-t{font-size:var(--f2);color:var(--ink);margin:1px 0 8px;line-height:1.55}
.peek .pk-n{font-size:var(--f1);color:var(--ink3);line-height:1.5}
body.page-on .peek,body.reading .peek{display:none}
/* 点搜索框还没打字时：先列出能去的地方 */
.qdrop .qs-start{padding:2px 0 6px}
.qdrop .qs-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 8px}
.qdrop .qs-chips a{display:inline-flex;align-items:center;gap:0;height:30px;padding:0 10px;border-radius:var(--r-s);background:var(--fill);color:var(--ink2);font-size:var(--f1);white-space:nowrap}
.qdrop .qs-chips a:hover,.qdrop .qs-chips a.on{background:var(--fill2);color:var(--ink);text-decoration:none}
@media (max-width:760px){.qdrop .qs-chips a{height:36px;padding:0 12px}}
/* 大家的答案：只是篇数，不说明谁对 */
.ags-note{margin:-2px 0 8px;font-size:var(--f1);color:var(--ink3)}

/* ---------- 一件事（10-03 星系对照页）：左边的卡片、星图、帖子旁边的小星图 ---------- */
:root{--th-ring:#9a6b25;--th-ink:#8a5f1f;--th-ring-soft:rgba(154,107,37,.3)}
[data-look="night"]{--th-ring:#ecc98c;--th-ink:#e6c48a;--th-ring-soft:rgba(236,204,140,.3)}
.th-read{margin:14px 0 2px;display:grid;gap:6px}
.th-read .lab{font-size:var(--f1);color:var(--ink3)}
.th-read .rd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:var(--f2);line-height:1.6}
.th-read .w{color:var(--ink)}
.th-read .ar{color:var(--ink4)}
.th-read .to{color:var(--ink2)}
.th-read .faint{font-size:var(--f1)}
.sec.th h4 .faint{font-size:var(--f1)}
.th-name{font:500 var(--f4)/1.5 var(--serif);margin:2px 0 0}
.th-stops{list-style:none;margin:12px 0 0;padding:0}
.th-stops li a{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.th-stops li:first-child a{border-top:0}
.th-stops li a:hover{text-decoration:none}
.th-stops li a:hover .t,.th-stops li.hov .t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
.th-stops .no{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:500 12px/1 var(--sans);color:var(--th-ink);border:1.2px solid var(--th-ring);margin-top:2px}
.th-stops li.un .no{border-style:dashed;color:var(--ink3)}
.th-stops .bd{display:flex;flex-direction:column;gap:3px;min-width:0}
.th-stops .t{font:400 var(--f3)/1.55 var(--serif)}
.th-stops .m{font-size:var(--f1);color:var(--ink3)}
.th-stops .why{font-size:var(--f2);color:var(--ink2);line-height:1.6}
.th-stops .by{font-size:var(--f1);color:var(--th-ink)}
.th-stops li.un .by{color:var(--ink3)}
.th-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--f1);color:var(--ink3);margin:10px 0 0}
.th-legend .dot{width:10px;height:10px;border-radius:50%;border:1.2px solid var(--th-ring);display:inline-block;box-sizing:border-box}
.th-legend .dot.said{background:var(--th-ring)}
.th-legend .dot.un{border-style:dashed;margin-left:10px}
.th-note{margin-top:22px}
.th-hint{display:flex;gap:10px;align-items:baseline;margin:12px 0 4px;padding:10px 12px;border-radius:10px;border:1px solid var(--th-ring-soft);color:var(--ink)}
.th-hint .lab{flex:0 0 auto;font-size:var(--f1);color:var(--th-ink)}
.th-hint .t{flex:1 1 auto;font-family:var(--serif);line-height:1.5}
.th-hint .ar{color:var(--ink3)}
.th-hint:hover{text-decoration:none;border-color:var(--th-ring)}
.chartwrap{position:absolute;inset:0;display:none}
.chartwrap.on{display:block}
.chartwrap .chart-cv,.tm-cv .chart-cv{display:block}
.talkmap{margin:30px 0 6px;max-width:640px}
.talkmap h4{font:400 var(--f1) var(--sans);color:var(--ink3);margin:0 0 8px}
.talkmap .tm-cv{height:230px;border-radius:8px;overflow:hidden;background:#0b1322}
.talkmap .tm-note{font-size:var(--f1);color:var(--ink3);line-height:1.65;margin:8px 0 0}
/* 第二个家：主题卡片眉头的“也在 通用”、经典区页的“也常用到的” */
.card .ey .also{color:var(--ink3)}
.card .ey .also::before{content:"·";margin:0 6px;color:var(--ink4)}
.c-also{font:400 var(--f3)/1.5 var(--sans);color:var(--ink2);margin:34px 0 10px}

/* 10-04 结构：通用里“要守的规矩”那一组的小标题（经典页）、主题卡片眉上的“· 要守的规矩” */
.c-rule{font:500 var(--f2)/1.4 var(--sans);color:var(--ink3);margin:28px 0 6px;letter-spacing:.02em}
#card .ey .rule{color:var(--ink3)}
/* 10-04 顶栏 1101～1400：左边按内容宽、搜索框吃剩下的（多了“实测”“内测反馈”以后，1280 宽时“工作台”会钻到搜索框底下） */
@media (max-width:1400px) and (min-width:1101px){.top{grid-template-columns:auto minmax(280px,1fr) auto}}
/* 10-04 站内小改：英文的去处和右边的字都长，1440 宽时“Workbench”压进搜索框 95 像素、点不到——英文 1101～1699 宽也照上面的办法（左边按内容宽、搜索框吃剩下的；1700 以上照旧居中，放得下）；
   1101～1300 宽再把“原型”旁边的“Sample data · You, three months in”收起来（1100 以下本来就收），不然 1101～1180 宽时“Tests”“Workbench”还压进去 */
@media (max-width:1699px) and (min-width:1101px){html[lang="en"] .top{grid-template-columns:auto minmax(280px,1fr) auto}}
@media (max-width:1300px) and (min-width:1101px){html[lang="en"] .protochip .sbadge{display:none}}
/* 10-04 第五批：中文 1101～1180 */
@media (max-width:1180px) and (min-width:1101px){.protochip .sbadge{display:none}}
/* 10-05：读一篇时提示条放到下面，不盖阅读面板顶上的路径 */
body.reading .toast{top:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
/* 10-05：白天读一篇时左边露的是夜里的天，顶栏垫一层白天的底，字才看得清 */
html[data-look="day"] body.reading .top{background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}