:root{--guide-rail:238px;--guide-header:76px}html{scroll-behavior:smooth;scroll-padding-top:110px}body{font-size:16px;line-height:1.6}a{text-underline-offset:4px}p+p{margin-top:12px}h1,h2,h3{overflow-wrap:normal}h2{font-size:clamp(26px,3vw,36px);line-height:1.12}h3{font:800 22px/1.18 var(--cp-font-body);letter-spacing:-.02em}code,pre{font-family:var(--cp-font-data);font-size:12px}code{overflow-wrap:anywhere}p code,li code,td code{padding:2px 4px;background:var(--cp-sand);border-radius:3px}small{line-height:1.5}figure{margin:0}.caption{font-size:14px;color:var(--cp-text-muted);line-height:1.55}.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.08em}.guide-header{position:sticky;top:0;z-index:30;background:var(--cp-cream);border-bottom:1px solid var(--cp-border);height:var(--guide-header);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}.brand-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}.brand-lockup img{width:32px;height:auto}.brand-lockup strong{font:900 16px/.96 var(--cp-font-display);letter-spacing:-.03em}.header-divider{height:25px;width:1px;background:var(--cp-border-control)}.header-label{display:none;font:500 11px var(--cp-font-data);color:var(--cp-text-muted)}.header-actions{display:flex;gap:8px;align-items:center}.header-version{display:none;font:500 10px var(--cp-font-data);color:var(--cp-text-muted)}.header-download{display:none}.menu-toggle{border:1px solid var(--cp-border-control);background:var(--cp-white);color:var(--cp-plum);border-radius:4px;min-width:48px;min-height:48px;display:grid;place-items:center}.sidebar{position:fixed;inset:var(--guide-header) 0 0 0;overflow:auto;background:var(--cp-cream);z-index:25;padding:24px;display:none}.sidebar.is-open{display:block}.doc-search{display:flex;align-items:center;gap:8px;border:1px solid var(--cp-border-control);background:var(--cp-white);padding:0 10px;border-radius:4px;min-height:44px}.doc-search input{width:100%;min-width:0;border:0;background:none;font-size:14px;color:var(--cp-plum);padding:10px 0}.doc-search input:focus-visible{outline-offset:0}.doc-search svg{width:16px}.nav-group{margin-top:25px}.nav-group>p{font:500 10px/1.4 var(--cp-font-data);color:var(--cp-text-muted);text-transform:uppercase;letter-spacing:.07em;padding:0 10px 8px}.nav-group a{display:flex;gap:12px;align-items:center;min-height:38px;font-size:14px;text-decoration:none;padding:7px 10px;border-radius:4px;color:var(--cp-text-muted)}.nav-group a>span{font:500 10px var(--cp-font-data);width:19px;color:inherit;opacity:.85}.nav-group a:hover{background:var(--cp-sand);color:var(--cp-plum)}.nav-group a[aria-current=true]{background:var(--cp-blush);color:var(--cp-plum);font-weight:700}.sidebar-foot{border-top:1px solid var(--cp-border);margin-top:28px;padding:20px 10px;font-size:12px;color:var(--cp-text-muted)}.sidebar-foot strong{display:block;color:var(--cp-plum)}.guide-main{padding:0 20px;max-width:1480px;margin:auto}.doc-section{padding:52px 0;border-bottom:1px solid var(--cp-border);scroll-margin-top:86px}.intro-section{padding-top:44px}.intro-grid{display:grid;gap:20px;align-items:center}.intro-grid .eyebrow{margin-bottom:24px}.intro-grid h1{font-size:clamp(34px,6vw,62px);line-height:1.02;letter-spacing:-.04em;max-width:16ch}.intro-grid h1 em{font-style:normal;color:var(--cp-guava)}.lead{font-size:18px;line-height:1.6;max-width:38ch;color:var(--cp-text-muted);margin-top:24px}.intro-grid .action-row{margin-top:28px;gap:12px}.intro-caption{margin-top:22px;font-size:12px}.intro-art{position:relative;max-width:360px;justify-self:center;width:100%}.intro-art img{width:100%;height:auto}.intro-art figcaption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--cp-text-muted);margin-top:4px}.dot{width:7px;height:7px;border-radius:50%;background:var(--cp-guava)}.palette-ribbon{display:flex;margin:40px 0 32px;height:13px;border-radius:4px;overflow:hidden}.palette-ribbon span{flex:1}.palette-ribbon span:first-child{flex:2}.palette-ribbon span:nth-child(4){flex:3}.principles{display:grid;gap:24px}.principles h2{font:800 20px/1.2 var(--cp-font-body);letter-spacing:-.02em;margin:12px 0 8px}.principles p{font-size:15px;color:var(--cp-text-muted);line-height:1.6}.note{display:flex;gap:12px;align-items:flex-start;background:var(--cp-sand);border:1px solid var(--cp-border);border-radius:8px;padding:20px;margin-top:28px;font-size:14px}.note svg{margin-top:2px}.section-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:30px}.section-number{font:500 11px var(--cp-font-data);padding-top:3px;color:var(--cp-guava)}.section-heading .eyebrow{margin-bottom:10px}.section-heading p:last-child{margin-top:14px;color:var(--cp-text-muted);max-width:65ch}.brand-grid{display:grid;gap:16px}.brand-sample{min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white)}.brand-sample .brand-lockup img{width:43px}.brand-sample .brand-lockup strong{font-size:24px}.inverse{background:var(--cp-plum);color:var(--cp-cream)}.inverse .caption{color:var(--cp-cream)}.rule-grid{display:grid;gap:28px;margin:28px 0}.rule-grid h3{margin-bottom:12px}.rule-grid p,.rule-grid li{color:var(--cp-text-muted)}.rule-grid ol{margin:0;padding-left:22px}.rule-grid li{margin-bottom:8px}.swatch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.swatch{border:1px solid var(--cp-border);background:var(--cp-white);padding:0;text-align:left;color:var(--cp-plum);border-radius:8px;overflow:hidden;min-width:0}.swatch-color{display:flex;align-items:flex-end;justify-content:space-between;height:100px;padding:14px;font:500 11px var(--cp-font-data)}.swatch-color svg{width:16px}.swatch-info{padding:14px;display:grid;gap:5px}.swatch-info strong{font-size:16px}.swatch-info code{font-size:10px;word-break:break-all;color:var(--cp-text-muted)}.swatch-info small{font-size:12px;color:var(--cp-text-muted)}.table-wrap{overflow-x:auto;margin-top:24px;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white)}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}caption{text-align:left;padding:16px 20px;font-weight:600;color:var(--cp-text-muted);font-size:13px}th,td{padding:14px 20px;border-top:1px solid var(--cp-border);vertical-align:top}th{font-size:12px;background:var(--cp-sand);color:var(--cp-plum)}td code{font-size:11px}td:first-child{font-weight:600}table+*{margin-top:16px}.table-wrap+.caption{margin-top:16px}.type-specimen{padding:28px;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white)}.type-display{font:900 clamp(30px,5vw,58px)/1.08 var(--cp-font-display);letter-spacing:-.04em;margin:22px 0}.type-specimen>p:last-child{max-width:65ch;color:var(--cp-text-muted)}.type-columns{display:grid;gap:24px;margin:24px 0}.type-columns>div{border-top:1px solid var(--cp-border-control);padding-top:24px}.type-columns p:last-child{color:var(--cp-text-muted);font-size:15px}.type-body{font:600 26px/1.3 var(--cp-font-body);margin:20px 0}.type-data{font:500 18px/1.7 var(--cp-font-data);margin:20px 0}.editorial-sample{background:var(--cp-lavender);padding:28px;border-radius:8px}.editorial-sample>p{font:700 30px/1.2 var(--cp-font-editorial);margin:16px 0}.editorial-sample small{display:block;max-width:65ch}.spacing-scale{display:flex;gap:16px;align-items:flex-end;overflow-x:auto;padding:22px 0}.space-item{display:grid;justify-items:center;gap:12px;flex:none;font:500 11px var(--cp-font-data)}.space-item i{width:26px;background:var(--cp-guava);border-radius:2px;height:var(--size)}.geometry-grid{display:grid;gap:16px;margin:24px 0}.geometry{padding:24px;border:1px solid var(--cp-border-control);background:var(--cp-white);display:grid;gap:8px}.geometry strong{font:900 26px var(--cp-font-display)}.geometry span{font-size:14px;color:var(--cp-text-muted)}.radius-small{border-radius:4px}.radius-medium{border-radius:8px}.radius-pill{border-radius:48px}.responsive-demo{background:var(--cp-sand);border-radius:8px;padding:24px;display:grid;gap:24px;align-items:center;margin-bottom:20px}.layout-schematic{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.layout-schematic span{height:100px;background:var(--cp-cream);border:1px solid var(--cp-border-control);border-top:30px solid var(--cp-plum);border-radius:4px}.toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:24px 0}.search-field{min-height:48px;display:flex;align-items:center;gap:12px;border:1px solid var(--cp-border-control);border-radius:4px;background:var(--cp-white);padding:0 14px;flex:1;min-width:0}.search-field input{min-height:46px;border:0;width:100%;min-width:0;color:var(--cp-plum);background:none;font-size:16px}.search-field input:focus-visible{outline-offset:0}.search-field:focus-within{outline:2px solid var(--cp-plum);outline-offset:2px}.icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.icon-tile{display:grid;justify-items:center;align-content:center;gap:10px;padding:16px 4px;min-height:110px;border:1px solid var(--cp-border);background:var(--cp-white);border-radius:4px;text-decoration:none;text-align:center}.icon-tile:hover{border-color:var(--cp-guava);background:var(--cp-blush)}.icon-tile svg{width:24px;height:24px}.icon-tile span{font:500 9px/1.5 var(--cp-font-data);overflow-wrap:anywhere}.code-example{position:relative;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-sand);padding:68px 18px 20px;margin:24px 0}.code-example::before{content:attr(data-code-title);position:absolute;top:19px;left:18px;font-size:12px;color:var(--cp-text-muted);max-width:calc(100% - 130px)}pre{margin:0;overflow-x:auto;line-height:1.8;white-space:pre;font-size:11px}.copy-code{position:absolute;right:12px;top:10px;display:flex;gap:6px;align-items:center;border:1px solid var(--cp-border-control);border-radius:4px;color:var(--cp-plum);background:var(--cp-cream);min-height:44px;padding:6px 10px;font-size:12px}.copy-code svg{width:15px}.preview-panel{position:relative;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white);padding:56px 20px 24px;margin:16px 0}.preview-label{position:absolute;top:17px;left:20px;font:500 10px var(--cp-font-data);text-transform:uppercase;color:var(--cp-text-muted)}.button-showcase{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.form-preview{display:grid;gap:32px;border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white);padding:24px}.form-preview form{display:grid;gap:24px;min-width:0}.form-row{display:grid;gap:20px}.form-notes{background:var(--cp-sand);padding:24px;border-radius:4px}.form-notes h3{margin:16px 0}.form-notes ol{padding-left:20px;margin:0 0 20px}.form-notes li{margin-bottom:12px;font-size:15px}.form-notes p{font-size:14px;color:var(--cp-text-muted)}#form-result{background:var(--cp-lavender);padding:16px;border-radius:4px;font-weight:600}.feedback-grid{display:grid;gap:16px}.states-grid{display:grid;gap:24px;margin-top:24px}.state-example{border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white);padding:28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.state-example>img{width:150px;height:150px;object-fit:contain}.state-example p{color:var(--cp-text-muted);max-width:30ch}.skeleton{width:100%;max-width:250px;height:150px;display:grid;gap:10px;align-content:center}.skeleton span{background:var(--cp-sand);border-radius:4px;height:18px}.skeleton span:first-child{height:60px}.skeleton span:last-child{width:70%}.card-demo-layout{display:grid;gap:28px;align-items:center}.specimen-card{max-width:450px}.card-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}.specimen-card .card-more{position:relative;min-height:48px}.specimen-card .card-body{gap:12px}.card-demo-status{display:flex;gap:8px;align-items:center;color:var(--cp-text-muted);font-size:14px}.ordered-rules{padding-left:20px}.ordered-rules li{margin-bottom:12px}.card-demo-layout>div>p{color:var(--cp-text-muted)}.plan-picker{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 16px}.plan-preview{border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white);padding:28px;min-height:225px;display:grid;gap:22px}.plan-preview h3{font:900 26px/1.15 var(--cp-font-display);margin:12px 0}.plan-preview p{max-width:65ch}.plan-preview.is-pro{border-top:8px solid var(--cp-guava);background:var(--cp-blush)}.plan-preview.is-plus{background:var(--cp-plum);color:var(--cp-cream)}.plan-preview.is-plus .caption{color:var(--cp-cream)}.plan-preview .caption{margin-top:14px}.plan-preview .cp-badge{width:fit-content}.plan-preview>.plan-image{width:100%;height:160px;object-fit:cover;border-radius:4px}.plan-preview+.caption{margin-top:16px}.pattern-grid{display:grid;gap:24px}.pattern-card{background:var(--cp-white);border:1px solid var(--cp-border);border-radius:8px;overflow:hidden}.pattern-card img{width:100%;aspect-ratio:1.44;object-fit:cover;object-position:top}.pattern-card>div{padding:20px}.pattern-card h3{margin-bottom:10px}.pattern-card p{font-size:15px;color:var(--cp-text-muted)}.pattern-card .text-link{font-size:14px;margin-top:12px}.compact-quiz{display:grid;gap:20px;background:var(--cp-sand);border:1px solid var(--cp-border);border-radius:8px;padding:24px;margin-top:32px;align-items:end}.compact-quiz h3{margin-top:8px}.compact-quiz label>span{font-size:14px;font-weight:600}.compact-quiz select{font-size:16px}.compact-quiz>p{grid-column:1/-1}.illustration-feature{display:grid;gap:28px;align-items:center;background:var(--cp-sand);padding:24px;border-radius:8px}.illustration-feature>img{max-width:360px;width:100%;justify-self:center}.illustration-feature h3{font:900 clamp(26px,3vw,34px)/1.15 var(--cp-font-display);margin:16px 0}.illustration-feature p{color:var(--cp-text-muted)}.illustration-feature .text-link{color:var(--cp-guava-strong);margin-top:16px}.asset-grid{display:grid;gap:20px}.illustration-grid{margin-top:24px}.asset-card{border:1px solid var(--cp-border);border-radius:8px;background:var(--cp-white);overflow:hidden;min-width:0;display:flex;flex-direction:column}.asset-visual{position:relative;background:var(--cp-cream);display:grid;place-items:center;aspect-ratio:1.4;overflow:hidden}.asset-visual img{width:100%;height:100%;object-fit:contain}.asset-card[data-category=photo] .asset-visual img{object-fit:cover}.asset-card[data-category=brand] .asset-visual{background:var(--cp-sand)}.asset-card[data-category=brand] .asset-visual img{width:72px;height:88px;object-fit:contain}.asset-info{padding:20px;display:grid;gap:12px;flex:1}.asset-info h3{font-size:20px}.asset-info p{font-size:14px;color:var(--cp-text-muted)}.asset-info .text-link{font-size:14px;align-self:end}.asset-info .cp-badge{font-size:9px;justify-self:start}.photo-story{display:grid;gap:0;border-radius:8px;overflow:hidden;background:var(--cp-plum);color:var(--cp-cream)}.photo-story>img{width:100%;height:100%;object-fit:cover;aspect-ratio:1.5}.photo-story>div{padding:28px}.photo-story h3{font:900 clamp(25px,3vw,34px)/1.12 var(--cp-font-display);margin:16px 0}.photo-story p{margin-bottom:22px;color:var(--cp-cream)}.crop-examples{display:grid;gap:20px;margin-top:24px}.crop-examples img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}.crop-examples figure:nth-child(2) img{aspect-ratio:4/3}.crop-examples figure:nth-child(3) img{aspect-ratio:1}.crop-examples figcaption{font:500 11px var(--cp-font-data);margin-top:12px}.motion-preview{display:grid;gap:32px;border:1px solid var(--cp-border);border-radius:8px;padding:28px;background:var(--cp-white);align-items:center}.motion-track{background:var(--cp-sand);border-radius:8px;height:200px;display:flex;align-items:center;padding:20px;overflow:hidden}.motion-track>div{width:80px;height:80px;display:grid;place-items:center;background:var(--cp-yellow);border:1px solid var(--cp-plum);border-radius:50%;transition:transform 180ms var(--cp-ease-out);color:var(--cp-plum)}.motion-track svg{width:46px;height:46px;stroke-width:1.5}.motion-track>div.is-moved{transform:translateX(100px) rotate(90deg)}.motion-preview h3{margin:14px 0}.motion-preview p{margin-bottom:20px;color:var(--cp-text-muted)}.accessibility-checklist{background:var(--cp-lavender);border-radius:8px;padding:28px;margin-top:28px}.accessibility-checklist ul{padding-left:22px;margin-bottom:0}.accessibility-checklist li{margin:10px 0}.asset-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.library-grid{margin-top:22px}.download-banner{background:var(--cp-plum);color:var(--cp-cream);border-radius:8px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px}.download-banner h3{font:900 28px/1.1 var(--cp-font-display);margin:16px 0}.download-banner p{max-width:52ch}.token-table{max-height:440px;overflow:auto}.token-table th{position:sticky;top:0}.token-table td:first-child{font-weight:500}.sources{margin-top:32px;padding-top:28px;border-top:1px solid var(--cp-border)}.sources ul{padding-left:20px}.sources li{margin-bottom:12px;color:var(--cp-text-muted)}.guide-footer{padding:40px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--cp-text-muted);font:500 11px/1.6 var(--cp-font-data)}.empty-result{padding:24px;border:1px dashed var(--cp-border-control);border-radius:4px}.copy-fallback{width:100%;min-height:160px;font:12px/1.6 var(--cp-font-data)}.all-hidden{display:none!important}
@media(min-width:640px){.guide-main{padding-inline:32px}.header-label{display:block}.brand-grid,.type-columns,.geometry-grid,.feedback-grid,.states-grid,.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.form-row{grid-template-columns:1fr 1fr}.crop-examples{grid-template-columns:repeat(3,minmax(0,1fr))}.intro-art{max-width:400px}.pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pattern-card>div{padding:16px}.pattern-card h3{font-size:18px}.geometry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.responsive-demo{grid-template-columns:.8fr 1fr}.photo-story{grid-template-columns:1.1fr 1fr}.illustration-feature{grid-template-columns:1fr 1fr}.motion-preview{grid-template-columns:.8fr 1fr}.card-demo-layout{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.guide-header{padding-inline:28px}.header-version,.header-download{display:inline-flex}.header-download{font-size:14px;min-height:44px;padding-inline:18px}.menu-toggle{display:none}.sidebar{display:block;width:var(--guide-rail);right:auto;border-right:1px solid var(--cp-border);padding:24px 18px}.guide-main{margin-left:var(--guide-rail);padding:0 48px}.doc-section{padding-block:76px}.intro-section{padding-top:60px}.intro-grid{grid-template-columns:1.2fr 1fr;gap:12px}.intro-art{max-width:430px}.intro-grid h1{font-size:clamp(36px,3.9vw,60px)}.intro-grid .lead{font-size:17px}.principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.section-heading{gap:22px}.swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.icon-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.form-preview{grid-template-columns:1.25fr 1fr}.compact-quiz{grid-template-columns:1.1fr 1fr .8fr auto}.compact-quiz .button{padding-inline:16px;font-size:14px}.compact-quiz h3{font-size:20px}.plan-preview{grid-template-columns:1fr auto;align-items:center}.plan-preview>.plan-image{max-width:220px;height:160px}.download-banner{flex-direction:row;justify-content:space-between;align-items:center}.illustration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1600px){.guide-main{padding-inline:64px;max-width:1440px}.intro-grid h1{font-size:64px}.intro-grid .lead{font-size:19px}}
@media(max-width:359px){.guide-header{padding-inline:12px}.guide-main{padding-inline:14px}.intro-grid h1{font-size:32px}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-info{padding:10px}.button{padding-inline:16px}.brand-lockup strong{font-size:14px}.code-example{padding-inline:12px}.preview-panel{padding-inline:14px}.form-preview{padding:16px}.cp-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-track>div.is-moved{transform:none}}

.swatch-value{background:var(--cp-cream);color:var(--cp-plum);padding:4px 6px;border-radius:3px}