.guide-page{--guide-ink:#11142d;--guide-muted:#5c6178;--guide-line:#e5e7f2;background:#fff;color:var(--guide-ink)}
.guide-page .breadcrumb-wrap{padding:1rem 0;background:#fafaff;border-bottom:1px solid var(--guide-line)}
.guide-hero{padding:clamp(3rem,7vw,6.5rem) 0;background:radial-gradient(circle at 8% 10%,#e4fbf7 0,transparent 31%),radial-gradient(circle at 94% 8%,#ece9ff 0,transparent 34%),#fbfbff}
.guide-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.guide-hero-copy h1{font-size:clamp(2.35rem,4.6vw,4.65rem);line-height:1.02;letter-spacing:-.055em;max-width:760px;margin:.9rem 0 1.25rem}
.guide-hero-copy>p{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.75;color:var(--guide-muted);max-width:730px}
.guide-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.6rem 0}.guide-facts{display:flex;gap:1rem 1.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0;color:#555c73;font-size:.92rem}.guide-facts li:before{content:'✓';color:#0aaf7f;font-weight:800;margin-right:.35rem}
.guide-compare{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:5/4;background:#eef0f8;box-shadow:0 24px 70px rgba(39,37,83,.16);touch-action:none}.guide-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.guide-compare .compare-overlay{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 var(--position))}.guide-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6}.compare-handle{position:absolute;top:0;bottom:0;left:var(--position);width:3px;background:#fff;transform:translateX(-50%);z-index:4;filter:drop-shadow(0 0 5px rgba(0,0,0,.35))}.compare-handle:after{content:attr(data-icon);position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%);border-radius:50%;background:#6556f7;border:4px solid #fff;box-shadow:0 8px 25px rgba(0,0,0,.22)}.compare-handle{color:#fff;font-weight:800;display:grid;place-items:center}.compare-handle{font-size:0}.compare-handle:before{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:18px}.compare-tag{position:absolute;top:18px;z-index:5;padding:.5rem .8rem;border-radius:999px;background:rgba(18,20,40,.72);color:#fff;font-weight:800;font-size:.8rem}.tag-before{left:18px}.tag-after{right:18px}
.guide-shell{padding:clamp(3.5rem,7vw,7rem) 0}.guide-layout{display:grid;grid-template-columns:280px minmax(0,820px);gap:clamp(2rem,5vw,5rem);justify-content:center;align-items:start}.guide-sidebar{position:sticky;top:100px;display:grid;gap:1rem}.guide-toc-card,.guide-tool-card{border:1px solid var(--guide-line);border-radius:20px;padding:1.25rem;background:#fff;box-shadow:0 10px 35px rgba(26,25,64,.06)}.guide-toc-card>strong{display:block;margin-bottom:.75rem}.guide-toc-card nav{display:grid;gap:.15rem;max-height:52vh;overflow:auto}.guide-toc-card a{color:#60657a;text-decoration:none;padding:.42rem .55rem;border-left:2px solid #e7e7f3;font-size:.88rem;line-height:1.3}.guide-toc-card a:hover,.guide-toc-card a.active{color:#594af2;border-color:#6657f6;background:#f6f5ff}.guide-tool-card span{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:#6b5cf3;font-weight:800}.guide-tool-card h2{font-size:1.2rem;margin:.35rem 0}.guide-tool-card p{font-size:.9rem;color:var(--guide-muted)}
.guide-article{min-width:0;font-size:1.04rem;line-height:1.78;color:#34384c}.guide-article h2{font-size:clamp(1.65rem,2.7vw,2.35rem);line-height:1.15;letter-spacing:-.025em;color:var(--guide-ink);margin:3.5rem 0 1rem;scroll-margin-top:110px}.guide-article h3{font-size:clamp(1.18rem,1.8vw,1.48rem);line-height:1.25;color:var(--guide-ink);margin:2rem 0 .7rem;scroll-margin-top:110px}.guide-article h4{font-size:1.05rem;color:var(--guide-ink);margin:1.5rem 0 .5rem}.guide-article p,.guide-article li{max-width:75ch}.guide-article a{color:#493be6;font-weight:650}.guide-article ul,.guide-article ol{padding-left:1.35rem}.guide-article li{margin:.42rem 0}.guide-article blockquote{border-left:4px solid #6a5bf5;background:#f7f6ff;padding:1rem 1.2rem;margin:1.4rem 0;border-radius:0 14px 14px 0}.guide-summary{border-radius:20px;padding:1.25rem 1.4rem;background:linear-gradient(135deg,#eefcf9,#f4f1ff);border:1px solid #e3e8f6;margin-bottom:2.5rem}.guide-summary strong{color:#5547df}.guide-summary p{margin:.35rem 0 0}.guide-visual-break{margin:3rem 0;border-radius:24px;overflow:hidden;background:#f3f3f8}.guide-visual-break img{width:100%;max-height:560px;object-fit:cover;display:block}.guide-related{margin-top:4rem;padding-top:.5rem}.guide-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.guide-related-grid a{display:grid;gap:.3rem;padding:1rem;border:1px solid var(--guide-line);border-radius:16px;text-decoration:none;background:#fff;transition:.2s ease}.guide-related-grid a:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(45,38,105,.1)}.guide-related-grid span{font-weight:400;color:var(--guide-muted);font-size:.9rem}.guide-sources{margin-top:3rem;padding:1.3rem 1.4rem;border-radius:18px;background:#f8fafc;border:1px solid #e6eaf0}.guide-sources h2{font-size:1.25rem;margin:0 0 .5rem}.guide-sources p{margin:0;font-size:.92rem}.guide-final-cta{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(120deg,#2837a9,#6e4ff7 52%,#15a9b0);color:#fff}.guide-final-cta .container-xxl{display:flex;align-items:center;justify-content:space-between;gap:2rem}.guide-final-cta h2{font-size:clamp(1.8rem,3.2vw,3rem);margin:.5rem 0}.guide-final-cta p{margin:0;color:#e8e9ff}
@media(max-width:991.98px){.guide-hero-grid{grid-template-columns:1fr}.guide-compare{max-width:760px;width:100%;margin:auto}.guide-layout{grid-template-columns:1fr}.guide-sidebar{position:static;grid-template-columns:1fr 1fr}.guide-toc-card nav{max-height:none}.guide-toc-card a:nth-child(n+7){display:none}}
@media(max-width:575.98px){.guide-hero{padding-top:2.5rem}.guide-hero-copy h1{font-size:2.45rem}.guide-compare{border-radius:20px;aspect-ratio:4/3}.guide-sidebar{grid-template-columns:1fr}.guide-related-grid{grid-template-columns:1fr}.guide-final-cta .container-xxl{align-items:flex-start;flex-direction:column}.guide-facts{display:grid;gap:.5rem}}
@media(prefers-reduced-motion:reduce){.guide-related-grid a{transition:none}}