/* Quizzory guides use the shape of an open course handout. */
:root{--guide-ground:#eee8f9;--guide-paper:#fff;--guide-ink:#292238;--guide-accent:#6c2de2;--guide-secondary:#594e68;--guide-space:clamp(20px,4vw,64px)}
/* A quiet introduction and three clear, clickable reading paths. */
.seo-library.section-wrap{max-width:1180px;padding:32px 30px 80px;margin:0 auto}.seo-library-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center;background:#f0e8fc;border-radius:28px;padding:48px}.seo-library .seo-library-intro h2{font-size:36px;line-height:1.18;letter-spacing:-1px;max-width:12ch;margin:0;color:#292238;text-wrap:balance}.seo-library-intro>p{font-size:16px;line-height:1.75;max-width:30ch;margin:22px 0 28px;color:#5a5066}.seo-library .seo-library-action{display:inline-flex;align-items:center;gap:18px;padding:13px 18px;border-radius:10px;background:#6c2de2;color:#fff;text-decoration:none;font-size:15px;font-weight:600;line-height:1.4}.seo-library ul{display:grid;gap:12px;list-style:none;padding:0;margin:0}.seo-library li{margin:0;padding:0}.seo-library .seo-guide-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:23px 24px;background:#fff;color:#292238;text-decoration:none;border-radius:16px}.seo-guide-link strong{font-size:21px;font-weight:650;line-height:1.3;letter-spacing:-.35px;display:block}.seo-guide-summary{display:block;font-size:15px;line-height:1.6;color:#64596f;margin-top:7px}.seo-guide-arrow{color:#6c2de2;font-size:27px;line-height:1}.seo-library a:focus-visible{outline:3px solid #6c2de2;outline-offset:5px}@media(hover:hover){.seo-library .seo-guide-link:hover{background:#e3d2ff}.seo-library-action:hover{background:#5520bd}}@media(prefers-reduced-motion:no-preference){.seo-guide-link{transition:background .18s,translate .18s}.seo-guide-link:hover{translate:3px 0}.seo-guide-arrow{transition:translate .18s}.seo-guide-link:hover .seo-guide-arrow{translate:2px -2px}}@media(max-width:900px){.seo-library-panel{padding:32px;gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.seo-library .seo-library-intro h2{font-size:31px}.seo-library .seo-guide-link{padding:20px}.seo-guide-link strong{font-size:19px}}@media(max-width:680px){.seo-library.section-wrap{padding:15px 20px 55px}.seo-library-panel{grid-template-columns:1fr;gap:28px;padding:28px 22px;border-radius:22px}.seo-library .seo-library-intro h2{font-size:30px;max-width:16ch}.seo-library-intro>p{max-width:38ch;margin:16px 0 20px}.seo-library .seo-guide-link{padding:20px;gap:14px;border-radius:12px}.seo-guide-summary{font-size:15px}.seo-library .seo-library-action{font-size:15px}}

.guide-body{margin:0;background:var(--guide-ground);color:var(--guide-ink);font:18px/1.65 system-ui,sans-serif}.guide-body *{box-sizing:border-box}.guide-body a{color:var(--guide-accent);text-underline-offset:4px}.guide-body a:focus-visible{outline:3px solid var(--guide-accent);outline-offset:6px}.guide-nav{padding:24px var(--guide-space);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--guide-paper)}.guide-brand{font-size:28px;font-weight:750;letter-spacing:-1px;text-decoration:none}.guide-nav nav{display:flex;gap:24px;align-items:center}.guide-body .guide-action{background:var(--guide-accent);color:var(--guide-paper);padding:10px 18px;border-radius:8px;text-decoration:none}.guide-layout{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,840px);gap:clamp(24px,5vw,80px);max-width:1320px;margin:48px auto 80px;padding:0 var(--guide-space)}.guide-index{font-size:16px;padding-top:18px;align-self:start;position:sticky;top:20px}.guide-index>p:first-child{font-weight:650}.guide-index ol{padding-left:20px}.guide-index li{padding:7px 0}.guide-byline{margin-top:48px;color:var(--guide-secondary)}.guide-paper{background:var(--guide-paper);padding:clamp(24px,4vw,56px);border-radius:4px;min-width:0}.guide-paper h1{font-size:clamp(32px,3.5vw,52px);font-weight:750;letter-spacing:-1.8px;line-height:1.12;margin:0;text-wrap:balance;max-width:22ch}.guide-intro{font-size:20px;line-height:1.6;margin:26px 0}.guide-body .guide-primary{display:inline-block;background:var(--guide-accent);color:var(--guide-paper);border-radius:8px;padding:12px 20px;text-decoration:none;margin-bottom:28px}.guide-paper section{margin-top:52px;scroll-margin-top:24px}.guide-paper h2{font-size:26px;line-height:1.25;letter-spacing:-.6px;margin:0 0 22px;text-wrap:balance}.guide-paper p{margin:18px 0}.guide-paper li{padding:5px 0}.guide-paper ol{padding-left:24px}.guide-next{margin:64px -24px -24px;padding:28px 24px;background:var(--guide-ground)}.guide-next ul{padding-left:20px}.guide-footer{padding:30px var(--guide-space);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--guide-paper)}.guide-footer p{margin:0;font-size:16px}.guide-skip{position:absolute;left:20px;top:-100px;background:white;padding:12px}.guide-skip:focus{top:0}
@media(hover:hover){.guide-action:hover,.guide-primary:hover{translate:0 -2px}.guide-index a:hover{text-decoration-thickness:2px}}
@media(prefers-reduced-motion:no-preference){.guide-action,.guide-primary{transition:translate .16s ease}.guide-paper{animation:guide-open .3s ease-out}@keyframes guide-open{from{translate:0 10px}to{translate:0 0}}}
@media(max-width:760px){.guide-body{font-size:17px}.guide-nav{padding:18px 20px}.guide-nav nav{gap:14px;font-size:15px}.guide-brand{font-size:25px}.guide-layout{display:flex;flex-direction:column;gap:24px;margin:24px auto 40px;padding:0 16px}.guide-index{position:static;padding:0 8px;font-size:16px}.guide-index ol{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0}.guide-index li{padding:0}.guide-index>p{margin:8px 0}.guide-byline{font-size:14px}.guide-paper{padding:28px 22px}.guide-paper h1{font-size:34px;letter-spacing:-1px;max-width:24ch}.guide-intro{font-size:18px}.guide-paper h2{font-size:25px}.guide-footer{align-items:flex-start;flex-wrap:wrap;padding:26px 24px}.guide-footer p{width:100%;order:3}.guide-next{margin-left:-10px;margin-right:-10px;padding:24px 18px}.seo-library li>a{font-size:22px}}

/* Gentle brand depth; paint once rather than animating gradients. */
.seo-library-panel{background:linear-gradient(135deg,#f1e9fc,#eae0fb)}.guide-body{background-image:radial-gradient(ellipse 1000px 700px at 80% 0,#e5d8fa66,transparent);background-color:var(--guide-ground)}.guide-body .guide-action,.guide-body .guide-primary{background-image:linear-gradient(135deg,#7840e8,#6c2de2)}.seo-library .seo-library-action{background-image:linear-gradient(135deg,#7840e8,#6c2de2)}
