.design-examples-guide article{--page:#fff8f1;--soft:#f1e3f8;--card:#fff;--ink:#21152c;--muted:#503b5d;--accent:#48235f;--border:#80658f;--glow:transparent;color:var(--ink);background:var(--page)}.design-examples-guide .guide-hero{background:#efff54;border-bottom:3px solid #21152c;padding-block:24px 64px;position:relative;overflow:hidden}.design-examples-guide .guide-hero-grid{grid-template-columns:1.15fr 1fr;gap:52px}.design-examples-guide .guide-hero h1{max-width:18ch;font-size:clamp(38px,4.2vw,62px);line-height:1.08}.design-examples-guide .guide-lead{max-width:64ch;font-size:18px;line-height:1.75}.design-examples-guide .eyebrow{color:var(--accent)}.design-examples-guide .guide-breadcrumb,.design-examples-guide .guide-byline{color:var(--muted)}.design-examples-guide .design-examples-hero-photo{z-index:1;background:#f6eaff;border:2px solid #21152c;width:100%;max-width:500px;padding:18px;position:relative;box-shadow:12px 12px #ff90c7}.design-examples-guide .design-examples-hero-photo:before{content:"";clip-path:polygon(4% 3%,100% 0,94% 86%,0 100%);z-index:-1;background:#ff90c7;position:absolute;inset:-28px -20px 26px 24px}.design-examples-guide .design-examples-hero-photo .photo-open{background:#fff}.design-examples-guide .design-examples-hero-photo img{object-fit:contain;width:100%;height:auto;max-height:430px}.design-examples-guide .photo figcaption{color:var(--muted);margin-top:14px;font-size:15px;line-height:1.7}.design-examples-guide .guide-layout{grid-template-columns:200px minmax(0,1fr);gap:48px;padding-block:60px 80px}.design-examples-guide .guide-toc{color:#fff8f1;background:#30213e;border:1px solid #80658f;padding:22px 18px;box-shadow:6px 7px #ff90c7}.design-examples-guide .guide-toc h2{color:#fff8f1;font-size:18px}.design-examples-guide .guide-toc a{color:#eadff1;font-size:14px}.design-examples-guide .guide-toc a:hover,.design-examples-guide .guide-toc .guide-toc-all{color:#efff54}.design-examples-guide .guide-toc .guide-toc-all{border-color:#a58cb5}.design-examples-guide .guide-body{min-width:0;max-width:none}.design-examples-guide .design-examples-introduction{max-width:76ch;color:var(--muted);margin-bottom:44px;font-size:18px;line-height:1.85}.design-examples-guide .design-examples-chapter{border-top:2px solid #21152c;padding:30px clamp(18px,2.5vw,32px) 36px;scroll-margin-top:100px;position:relative}.design-examples-guide .guide-section+.guide-section{margin-top:54px}.design-examples-guide .design-examples-chapter-number{color:#604575;letter-spacing:-.07em;margin-bottom:24px;font-size:64px;font-weight:900;line-height:1;display:block}.design-examples-guide .design-examples-chapter>h2{max-width:27ch;margin-bottom:28px;font-size:clamp(29px,3vw,42px);line-height:1.15}.design-examples-guide .guide-section h3{margin-block:34px 18px;font-size:24px;line-height:1.35}.design-examples-guide .guide-section :is(p,li){font-size:18px;line-height:1.85}.design-examples-guide .guide-section :is(ul,ol){color:var(--muted)}.design-examples-guide .guide-section li strong{color:var(--ink)}.design-examples-guide .guide-section p a{overflow-wrap:anywhere;display:inline}.design-examples-guide .design-examples-chapter-2{background:#dcffdf;box-shadow:8px 8px #a9ddbe}.design-examples-guide .design-examples-chapter-3{background:#f0e3ff}.design-examples-guide .design-examples-chapter-5{background:#efff54;box-shadow:8px 8px #ff90c7}.design-examples-guide .design-examples-chapter-7{background:#ffe2f0}.design-examples-guide .design-examples-chapter .photo{margin-block:32px}.design-examples-guide .design-examples-chapter .photo-open{background:#fff;border:1px solid #80658f;border-radius:0}.design-examples-guide .design-examples-chapter .photo img{object-fit:contain;width:100%;height:auto;max-height:480px}.design-examples-guide .guide-table-wrap{background:#fff;border:1px solid #80658f;border-radius:0}.design-examples-guide .guide-table-wrap :is(th,td){color:#21152c;font-size:16px;line-height:1.75}.design-examples-guide .guide-table-wrap caption,.design-examples-guide .guide-table-wrap thead th{color:#fff8f1;background:#30213e;font-size:16px}.design-examples-guide .guide-table-wrap tbody tr{border-color:#a58cb5}.design-examples-guide .faq-list{background:#f0e3ff;border:2px solid #80658f;padding:6px 24px;box-shadow:8px 8px #ff90c7}.design-examples-guide .faq-list summary{color:#21152c;font-size:18px}.design-examples-guide .faq-list details{border-color:#80658f}.design-examples-guide .faq-list p{color:#503b5d}.design-examples-guide .guide-sources li p{font-size:15px}.design-examples-guide .guide-reading{padding-block:38px 58px}@media (max-width:1050px){.design-examples-guide .guide-layout{grid-template-columns:1fr;gap:36px}.design-examples-guide .guide-toc{position:static}.design-examples-guide .guide-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.design-examples-guide .guide-hero-grid{gap:32px}}@media (max-width:760px){.design-examples-guide .guide-hero{padding-block:12px 48px}.design-examples-guide .guide-hero-grid{grid-template-columns:1fr;gap:38px}.design-examples-guide .guide-hero h1{overflow-wrap:normal;max-width:21ch;font-size:clamp(34px,8.5vw,48px)}.design-examples-guide .guide-lead,.design-examples-guide .design-examples-introduction,.design-examples-guide .guide-section :is(p,li){font-size:17px}.design-examples-guide .design-examples-hero-photo{justify-self:start;width:calc(100% - 12px);max-width:440px;padding:12px;box-shadow:8px 8px #ff90c7}.design-examples-guide .design-examples-hero-photo:before{inset:-12px -10px 20px 18px}.design-examples-guide .guide-layout{padding-block:38px 56px}.design-examples-guide .design-examples-chapter{padding:24px 18px 28px;scroll-margin-top:90px}.design-examples-guide .design-examples-chapter>h2{font-size:29px}.design-examples-guide .design-examples-chapter-number{font-size:50px}.design-examples-guide .guide-section h3{font-size:22px}.design-examples-guide .guide-table-wrap :is(th,td){font-size:16px}.design-examples-guide .faq-list{padding-inline:18px}}@media (max-width:480px){.design-examples-guide .guide-toc ol{grid-template-columns:1fr}.design-examples-guide .guide-hero h1{font-size:34px}}