/* 天天说文档站：独立站点，只为阅读。系统字体、单一主色（品牌靛蓝）、细线分隔，自动深色 */
:root{
  color-scheme:light dark;
  --bg:#fff;--fg:#1c1d22;--fg2:#4a4d57;--fg3:#686c78;--line:#e4e5ea;--soft:#f5f6f8;
  --accent:#284ba4;--accent-bg:#eef2fb;--code-bg:#f3f4f7;--pre-bg:#16181d;--pre-fg:#e8eaf0;
  --tip:#eaf6ef;--warn:#fdf1e6;--note:#eef2fb;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#17181c;--fg:#eceef3;--fg2:#c3c6d0;--fg3:#a0a4b4;--line:#3a3d48;--soft:#23252d;
  --accent:#8fb0ff;--accent-bg:#1f2a44;--code-bg:#2b2e38;--pre-bg:#252832;--pre-fg:#e8eaf0;
  --tip:#1b2e24;--warn:#35281a;--note:#1f2a44}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}
::selection{background:var(--accent-bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 max(clamp(1rem,3vw,2rem),calc((100vw - 75rem)/2 + clamp(1rem,3vw,2rem)));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
.brand span{font-weight:400;color:var(--fg3);margin-left:.25rem}
.top nav{display:flex;gap:1.25rem;font-size:.9rem}
.top nav a{color:var(--fg2);text-decoration:none}.top nav a:hover{color:var(--accent)}

.docs{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.5rem;max-width:75rem;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.docs.has-toc{grid-template-columns:15rem minmax(0,1fr) 12.5rem}
.docs>main{min-width:0;padding:2rem 0 3rem}

.dnav{position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow:auto;padding:1.5rem 0 2rem;font-size:.92rem}
.dnav h2{margin:1.4rem 0 .3rem;font-size:.78rem;font-weight:600;color:var(--fg3);letter-spacing:.03em}
.dnav h2:first-child{margin-top:0}
.dnav ul{list-style:none;margin:0;padding:0}
.dnav a{display:block;padding:.28rem .75rem;margin-left:-.75rem;border-radius:6px;color:var(--fg2);text-decoration:none}
.dnav a:hover{background:var(--soft);color:var(--fg)}
.dnav a[aria-current="page"]{background:var(--accent-bg);color:var(--accent);font-weight:600}
.m-nav{display:none}

.prose{max-width:44rem}
.prose>*+*{margin-top:1em}
.prose h1{margin:0 0 .4em;font-size:2rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.prose .lede{font-size:1.08rem;color:var(--fg2)}
.prose h2{margin-top:2.4em;padding-bottom:.3em;border-bottom:1px solid var(--line);font-size:1.4rem;line-height:1.4;font-weight:700}
.prose h3{margin-top:1.8em;font-size:1.12rem;font-weight:700}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.4em}.prose li{margin-top:.3em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.prose figcaption{margin-top:.5em;font-size:.88rem;color:var(--fg3)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--code-bg);border-radius:4px;padding:.1em .35em;overflow-wrap:anywhere}
.crumb{display:flex;gap:.4rem;margin:0 0 1rem;font-size:.85rem;color:var(--fg3)}
.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--accent)}

.code{position:relative}
.code pre{margin:0;padding:2.4rem 1.1rem 1rem;background:var(--pre-bg);color:var(--pre-fg);border-radius:8px;overflow:auto;font:.84rem/1.7 var(--mono);tab-size:2}
.code pre code{background:none;padding:0;color:inherit;font-size:inherit;overflow-wrap:normal}
.code.wrap pre{white-space:pre-wrap;overflow-wrap:anywhere}
.code.long pre{max-height:30rem}
.code .lbl{position:absolute;top:.6rem;left:1.1rem;font:.75rem var(--mono);color:#9aa0b2}
.code .copy{position:absolute;top:.4rem;right:.5rem;padding:.15rem .7rem;font:.78rem var(--sans);color:#d5d8e2;background:transparent;border:1px solid #3a3e4a;border-radius:5px;cursor:pointer}
.code .copy:hover{background:#262932}.code .copy.done{color:#7fdca0;border-color:#7fdca0}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.tbl table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.6}
.tbl th,.tbl td{padding:.55rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--soft);font-weight:600;white-space:nowrap}
.tbl td:first-child{white-space:nowrap}.tbl.wrap td:first-child{white-space:normal}.tbl td code{white-space:nowrap}

.call{padding:.8rem 1rem;border-radius:8px;font-size:.95rem;line-height:1.7}
.call>b:first-child{display:block;margin-bottom:.1rem}
.call p+p{margin-top:.5em}
.call.tip{background:var(--tip)}.call.warn{background:var(--warn)}.call.note{background:var(--note)}

.steps{list-style:none;padding:0!important;counter-reset:s}
.steps>li{counter-increment:s;position:relative;margin-top:1em;padding-left:2.4rem}
.steps>li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:600;line-height:1}
@media(prefers-color-scheme:dark){.steps>li::before{color:#10131c}}
.steps>li>b:first-child{display:block}

.tag{display:inline-block;padding:0 .5rem;font-size:.75rem;font-weight:500;line-height:1.6;color:var(--fg2);background:var(--soft);border:1px solid var(--line);border-radius:999px;vertical-align:.12em;white-space:nowrap}
.tag.free{color:#1c6b3d;background:var(--tip);border-color:transparent}.tag.pro{color:#8a5a00;background:var(--warn);border-color:transparent}
@media(prefers-color-scheme:dark){.tag.free{color:#7fdca0}.tag.pro{color:#f0c27a}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.trio a{display:block;padding:.9rem 1rem;border:1px solid var(--line);border-radius:8px;color:var(--fg);text-decoration:none}
.trio a:hover{border-color:var(--accent);background:var(--accent-bg)}
.trio b{display:block;color:var(--accent)}
.trio span{display:block;margin-top:.2rem;font-size:.88rem;color:var(--fg2);line-height:1.6}

.shelf{display:grid;gap:.7rem}
.book{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px}
.book h3{margin:0!important;font-size:1rem}
.book p{grid-column:1;margin:0!important;font-size:.9rem;color:var(--fg2);line-height:1.65}
.book .meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:.3rem!important}
.book .count{grid-column:2;grid-row:1/span 3;align-self:center;text-align:right;font-size:1.3rem;font-weight:700;line-height:1.1;white-space:nowrap}
.book .count small{display:block;font-size:.74rem;font-weight:400;color:var(--fg3)}

details.q{border:1px solid var(--line);border-radius:8px}
details.q+details.q{margin-top:.6em}
details.q>summary{cursor:pointer;padding:.7rem 1rem;font-weight:600;list-style:none;position:relative;padding-right:2.4rem}
details.q>summary::-webkit-details-marker{display:none}
details.q>summary::after{content:"+";position:absolute;right:1rem;color:var(--fg3);font-size:1.2rem;line-height:1.4}
details.q[open]>summary::after{content:"−"}
details.q[open]>summary{border-bottom:1px solid var(--line)}
details.q>div{padding:.8rem 1rem 1rem}
details.q>div>*+*{margin-top:.7em}

.hello{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-block;padding:.45rem 1rem;border-radius:6px;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:600;font-size:.92rem}
.btn.alt{background:transparent;color:var(--accent)!important;border:1px solid var(--line)}
@media(prefers-color-scheme:dark){.btn:not(.alt){color:#10131c!important}}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:44rem;margin-top:3rem}
.pager a{padding:.7rem 1rem;border:1px solid var(--line);border-radius:8px;color:var(--fg);text-decoration:none}
.pager a:hover{border-color:var(--accent)}
.pager small{display:block;font-size:.78rem;color:var(--fg3)}
.pager .next{text-align:right;grid-column:2}
.foot{max-width:44rem;margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--fg3)}
.foot a{color:inherit}

.toc{position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow:auto;padding:2rem 0;font-size:.85rem;line-height:1.5}
.toc h2{margin:0 0 .5rem;font-size:.78rem;font-weight:600;color:var(--fg3)}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:.25rem .8rem;margin-left:-1px;border-left:2px solid transparent;color:var(--fg2);text-decoration:none}
.toc a:hover{color:var(--fg)}.toc a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}

@media(max-width:1100px){.docs.has-toc{grid-template-columns:15rem minmax(0,1fr)}.toc{display:none}}
@media(max-width:860px){
  .docs,.docs.has-toc{grid-template-columns:minmax(0,1fr);gap:0}
  .dnav{display:none}
  .m-nav{display:block;margin-bottom:1.2rem;border:1px solid var(--line);border-radius:8px}
  .m-nav>summary{cursor:pointer;padding:.6rem 1rem;font-weight:600;font-size:.92rem}
  .m-nav .dnav{display:block;position:static;max-height:none;padding:0 1rem 1rem}
  .trio{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}.pager .next{grid-column:1}
  .book{grid-template-columns:1fr}.book .count{grid-column:1;grid-row:auto;text-align:left;font-size:1.1rem}
  .prose h1{font-size:1.6rem}
}
.call p,.steps p,details.q p{margin:0}.call p+p,details.q p+p{margin-top:.6em}

.skip{position:absolute;left:-999px;top:.5rem;z-index:30;padding:.4rem .8rem;background:var(--accent);color:#fff;border-radius:6px}
.skip:focus{left:.5rem}
.top{gap:1rem}
.search{position:relative;flex:1;max-width:22rem;margin-left:auto}
.search input{width:100%;height:34px;padding:0 .8rem;font:inherit;font-size:.9rem;color:var(--fg);background:var(--soft);border:1px solid var(--line);border-radius:8px}
.search input::placeholder{color:var(--fg3)}
.search input:focus{outline:2px solid var(--accent);outline-offset:0;background:var(--bg)}
.res{position:absolute;top:40px;right:0;width:min(34rem,calc(100vw - 2rem));max-height:70vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0/.15)}
.res a{display:block;padding:.6rem .9rem;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.res a:last-child{border-bottom:0}
.res a:hover,.res a[aria-selected="true"]{background:var(--accent-bg)}
.res b{display:block;font-size:.92rem}
.res small{display:block;margin-top:.1rem;font-size:.82rem;line-height:1.5;color:var(--fg2)}
.res mark{background:none;color:var(--accent);font-weight:700}
.res .none{padding:.9rem;color:var(--fg3);font-size:.9rem}
.top nav{margin-left:.5rem}
@media(max-width:700px){.top nav a:not(:first-child){display:none}.brand span{display:none}}
.anchor{margin-left:.4em;color:var(--fg3);text-decoration:none;font-weight:400;opacity:0}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}
@media(hover:none){.anchor{display:none}}

@media(prefers-color-scheme:dark){.code pre{border:1px solid var(--line)}.code .lbl{color:#b4b9ca}.code .copy{color:#e6e8ef;border-color:#555a6a}.code .copy:hover{background:#31343f}}

/* 宽屏：整体按 rem 放大，顶栏与正文同宽对齐 */
@media(min-width:1600px){html{font-size:18px}}
@media(min-width:2000px){html{font-size:20px}}
@media(min-width:2600px){html{font-size:24px}}