html{scroll-behavior:smooth}.guide-hero{border-bottom:1px solid var(--line);background:linear-gradient(#f2f7fd 0%,#fff 100%);padding:44px 0 26px}.guide-hero h1{margin:8px 0 10px;font-size:36px}.guide-hero .lead{margin:0}.guide-layout{grid-template-columns:210px 1fr;gap:40px;padding-top:32px;padding-bottom:60px;display:grid}.toc{flex-direction:column;align-self:start;gap:2px;font-size:14px;display:flex;position:sticky;top:80px}.toc-title{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:12px;font-weight:700}.toc a{color:var(--muted);border-radius:6px;padding:5px 10px;text-decoration:none}.toc a:hover{background:var(--soft);color:var(--text)}.toc a.toc-star{color:var(--accent);font-weight:600}.guide section{border-bottom:1px solid var(--line);grid-template-columns:40px 1fr;gap:16px;padding:26px 0;scroll-margin-top:70px;display:grid}.guide section:last-of-type{border-bottom:0}.guide h2{margin:2px 0 8px;font-size:22px}.guide p,.guide li{color:#2c3746;font-size:15.5px}.guide ul,.guide ol{margin:8px 0;padding-left:20px}.guide li{margin:5px 0}.num{width:34px;height:34px;color:var(--accent);background:#e8f1fc;border-radius:50%;place-items:center;font-size:15px;font-weight:700;display:grid}kbd{background:#f1f3f6;border:1px solid #dde2e8;border-bottom-width:2px;border-radius:5px;padding:0 5px;font-family:inherit;font-size:12.5px}kbd.ui{color:#fff;background:#0f3a66;border-color:#0f3a66;padding:1px 7px;font-weight:600}code{background:var(--soft);border-radius:4px;padding:1px 5px;font-size:13.5px}.tips{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;display:grid}.tip{border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14.5px}.tip-best{background:#f4f9ff;border-color:#9cc3f0}.guide section.featured{background:#f6faff;border:2px solid #b9d5f5;border-radius:16px;margin:18px 0;padding:24px}.feature-tag{color:var(--accent);background:#e1eefc;border-radius:99px;margin-bottom:4px;padding:2px 10px;font-size:12px;font-weight:700;display:inline-block}.good-for{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px}.demo{border:1px solid var(--line);background:#f7f9fb radial-gradient(#c3ccd8 1px,#0000 1px) 0 0/16px 16px;border-radius:12px;align-items:center;gap:12px;margin:14px 0;padding:18px;display:flex;overflow-x:auto}.mini{background:#fff;border:1px solid #d5dbe4;border-radius:8px;flex:none;width:150px;font-size:12px;box-shadow:0 1px 2px #0000000f}.mini-head{background:var(--c);color:#fff;border-radius:7px 7px 0 0;padding:4px 8px;font-size:11.5px;font-weight:600}.mini-title{border-bottom:1px solid #edf0f4;padding:5px 8px 4px;font-weight:700}.mini-exit{text-align:right;color:#3b4452;padding:2px 14px 2px 8px;font-size:11.5px;font-weight:600;position:relative}.mini-exit.hl{background:#e8f1fc}.mini-exit .dot{background:var(--c);border:2px solid #fff;border-radius:50%;width:9px;height:9px;position:absolute;top:50%;right:-5px;transform:translateY(-50%)}.drag-line{flex:none;width:110px}.drag-line path{fill:none;stroke:#1669c9;stroke-width:2px;stroke-dasharray:5 4}.picker{border:1px solid var(--line);background:#fff;border-radius:9px;flex:none;width:170px;font-size:12.5px;overflow:hidden;box-shadow:0 8px 22px #0f1e3229}.picker-input{border-bottom:1px solid var(--line);padding:7px 10px}.picker-input:after{content:"|";color:var(--accent);margin-left:1px}.picker-item{align-items:center;gap:7px;padding:6px 10px;display:flex}.picker-item span{border-radius:4px;width:14px;height:14px}.picker-item.active{background:#e8f1fc}.demo-pages{align-items:stretch}.pg{background:#fff;border:1px solid #d5dbe4;border-radius:10px;flex:none;padding:10px 12px}.pg-label{color:var(--accent);border-top:2px solid var(--accent);margin-bottom:10px;padding-top:2px;font-size:11.5px;font-weight:700;display:inline-block}.pg-row{align-items:center;gap:6px;display:flex}.chip{color:#fff;background:var(--c);white-space:nowrap;border-radius:6px;padding:5px 9px;font-size:12px;font-weight:600}.arrow{color:#6b7686;font-weight:700}.jump{color:var(--muted);text-align:center;flex:none;align-self:center;font-size:12px}.shortcuts table{max-width:560px}.guide-cta{flex-wrap:wrap;align-items:center;gap:18px;padding:28px 0 0;display:flex}@media (width<=860px){.guide-layout{grid-template-columns:1fr}.toc{flex-flow:wrap;position:static}.tips,.guide section{grid-template-columns:1fr}.guide-hero h1{font-size:28px}}