.button-demo{color:#333d31;text-align:left;isolation:isolate;background:#e7ecd9;flex-direction:column;justify-content:space-between;gap:24px;padding:25px;display:flex;overflow:auto;container-type:inline-size}.button-demo-top,.button-demo-bottom{color:currentColor;letter-spacing:.08em;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:7px;font-weight:500;line-height:1.5;display:flex}.button-demo-top{opacity:.7}.button-demo-top span:last-child{font-variant-numeric:tabular-nums}.button-demo-center{text-align:center;justify-items:center;gap:26px;width:100%;margin-block:auto;padding-block:20px;display:grid}.button-demo-title{font-family:var(--serif,Georgia, serif);letter-spacing:-.045em;margin:0;font-size:clamp(28px,8cqw,44px);font-weight:400;line-height:1.08}.button-demo-action{justify-content:center;width:100%;padding:6px;display:flex}.button-demo-feedback{opacity:.7;min-height:14px;margin:0;font-size:9px;line-height:1.5}.button-demo-bottom{margin-top:auto}.button-demo-bottom label{letter-spacing:0;cursor:pointer;align-items:center;gap:7px;min-height:36px;font-size:9px;display:inline-flex}.button-demo-bottom input{accent-color:currentColor;cursor:pointer;width:13px;height:13px;margin:0}.button-demo-bottom input:focus-visible{outline-offset:4px;outline:2px solid}.button-demo--rolling-text-button{color:#413851;background:#dbd7ec}.button-demo--circle-fill-button{color:#444138;background:#ede8de}.button-demo--shutter-button{color:#354147;background:#d9e0e3}.button-demo--outline-trace-button{color:#e2e8d9;background:#252923}.button-demo--tactile-button{color:#634335;background:#f0d7c4}.button-demo--tactile-button .button-demo-title,.button-demo--shutter-button .button-demo-title{font-family:var(--sans,Arial, sans-serif);font-size:clamp(26px,7cqw,38px);font-weight:500}.button-collection-page .button-demo{gap:12px;padding:18px 22px}.button-collection-page .button-demo-center{gap:14px;padding-block:4px}.button-collection-page .button-demo-title{font-size:clamp(25px,7cqw,34px)}.component-workbench .button-demo{padding:32px}.component-workbench .button-demo-center{gap:32px}.component-workbench .button-demo-title{font-size:clamp(32px,7cqw,58px)}@media (max-width:640px){.button-demo,.component-workbench .button-demo{gap:18px;padding:22px}.button-demo-top{font-size:6px}.button-demo-top span:last-child{display:none}.component-workbench .button-demo-title{font-size:36px}}
.ac-process{--ac-process-ink:#272d25;--ac-process-muted:#71776d;--ac-process-line:#d6dacf;--ac-process-accent:#536d3f;--ac-process-surface:#e9eddf;--ac-process-radius:4px;width:100%;color:var(--ac-process-ink);text-align:left;font-family:inherit;font-size:14px;container:ac-process/inline-size}.ac-process,.ac-process:before,.ac-process:after,.ac-process *,.ac-process :before,.ac-process :after{box-sizing:border-box}.ac-process-heading{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;display:flex}.ac-process-eyebrow{color:var(--ac-process-muted);letter-spacing:.14em;margin-bottom:15px;font-size:10px;line-height:1.5;display:block}.ac-process-heading h2{letter-spacing:-.055em;overflow-wrap:anywhere;max-width:15ch;margin:0;font-size:clamp(28px,5.6cqw,48px);font-weight:500;line-height:1.04}.ac-process-total{color:var(--ac-process-muted);font-variant-numeric:tabular-nums;flex-shrink:0;padding-bottom:3px;font-size:10px}.ac-process-layout{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:start;gap:40px;display:grid}.ac-process-steps{margin:0;padding:0;list-style:none}.ac-process-step{border-top:1px solid var(--ac-process-line);min-height:260px;margin:0;padding:24px 0 35px;position:relative}.ac-process-step:before{background:var(--ac-process-accent);content:"";transform-origin:0;width:26px;height:2px;transition:transform .22s;position:absolute;top:-1px;left:0;transform:scaleX(0)}.ac-process-step[aria-current=step]:before{transform:scaleX(1)}.ac-process-step-meta{color:var(--ac-process-muted);justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px;font-size:10px;line-height:1.5;display:flex}.ac-process-number{color:var(--ac-process-accent);font-variant-numeric:tabular-nums}.ac-process-step h3{letter-spacing:-.045em;overflow-wrap:anywhere;margin:0 0 13px;font-size:clamp(24px,4cqw,34px);font-weight:500;line-height:1.1}.ac-process-step p{max-width:44ch;color:var(--ac-process-muted);overflow-wrap:anywhere;margin:0;font-size:13px;line-height:1.7}.ac-process-deliverables{flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;list-style:none;display:flex}.ac-process-deliverables li{border:1px solid var(--ac-process-line);overflow-wrap:anywhere;border-radius:3px;padding:5px 8px;font-size:9px;line-height:1.4}.ac-process-preview{border-radius:var(--ac-process-radius);background:var(--ac-process-surface);pointer-events:none;position:sticky;top:16px;overflow:hidden}.ac-process-preview-art{aspect-ratio:4/5;animation:.28s ease-out both ac-process-arrive;overflow:hidden}.ac-process-preview-art>*,.ac-process-inline-art>*{object-fit:cover;width:100%;height:100%;display:block}.ac-process-preview-caption{font-variant-numeric:tabular-nums;justify-content:space-between;gap:14px;padding:13px 14px;font-size:10px;line-height:1.5;display:flex}.ac-process-preview-caption span:last-child{color:var(--ac-process-muted)}.ac-process-progress{background:var(--ac-process-line);height:3px}.ac-process-progress span{background:var(--ac-process-accent);height:100%;transition:width .25s;display:block}.ac-process-inline-art{pointer-events:none;display:none;overflow:hidden}.ac-process-empty{border-top:1px solid var(--ac-process-line);color:var(--ac-process-muted);margin:0;padding:30px 0;line-height:1.7}@container ac-process (max-width:560px){.ac-process-layout{grid-template-columns:minmax(0,1fr);gap:0}.ac-process-heading{gap:15px;margin-bottom:24px}.ac-process-heading h2{font-size:clamp(26px,7cqw,38px)}.ac-process-eyebrow{margin-bottom:12px;font-size:8px}.ac-process-total{font-size:9px}.ac-process-step{min-height:220px;padding-block:22px 28px}.ac-process-step h3{font-size:28px}.ac-process-step p{max-width:50ch;font-size:12px}.ac-process-preview{display:none}.ac-process-inline-art{border-radius:var(--ac-process-radius);background:var(--ac-process-surface);height:220px;margin-top:24px;display:block}}@container ac-process (max-width:300px){.ac-process-total{display:none}.ac-process-inline-art{height:190px}.ac-process-deliverables{gap:5px}.ac-process-deliverables li{padding:5px 7px;font-size:8px}}@keyframes ac-process-arrive{0%{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.ac-process-preview-art{animation:none}.ac-process-progress span,.ac-process-step:before{transition:none}}
.process-timeline-demo{overscroll-behavior-y:contain;color:#343a2c;text-align:left;background:#f1f0e6;padding:25px!important;display:block!important;overflow-y:auto!important}.process-timeline-demo:focus-visible{outline-offset:-4px;outline:2px solid #607b42}.process-demo-scroll-hint{color:#78806b;letter-spacing:.1em;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:0 0 27px;font-size:7px;line-height:1.5;display:flex}.process-demo-scroll-hint span:last-child{color:#536b3a;letter-spacing:.02em}.process-timeline-demo .ac-process{--ac-process-ink:#343a2c;--ac-process-muted:#787e6e;--ac-process-line:#d8d9cc;--ac-process-accent:#5c763d;--ac-process-surface:#e8e9da}.process-timeline-demo .ac-process-heading h2{max-width:14ch}.process-demo-art{color:#39482e;width:100%;height:100%;font-family:var(--sans,Arial, sans-serif);background:#bfcba5;position:relative;overflow:hidden;container-type:inline-size}.process-demo-art-top,.process-demo-art-bottom{letter-spacing:.08em;justify-content:space-between;align-items:center;gap:5px;font-size:2.4cqw;display:flex;position:absolute;left:7%;right:7%}.process-demo-art-top{top:7%}.process-demo-art-bottom{font-size:2cqw;bottom:6%}.process-demo-art-bottom span:last-child{font-size:6cqw}.process-demo-art-title{letter-spacing:-.06em;font-size:clamp(22px,12.4cqw,52px);font-weight:500;line-height:.96;position:absolute;top:20%;left:8%;right:8%}.process-demo-art-title em{font-family:var(--serif,Georgia, serif);font-weight:400}.process-demo-strategy{color:#59614d;background:#f4f3e8;width:62%;height:37%;padding:6%;position:absolute;top:45%;left:8%;transform:rotate(-4deg);box-shadow:0 4px 10px #3a4c2720}.process-demo-strategy>span{letter-spacing:.08em;font-size:2.7cqw;display:block}.process-demo-strategy strong{letter-spacing:-.045em;margin-block:6%;font-size:6.6cqw;font-weight:500;line-height:1.1;display:block}.process-demo-strategy>div{gap:5px;margin-block:8%;display:flex}.process-demo-strategy i{aspect-ratio:1;background:#bbc8a4;border-radius:50%;width:12%}.process-demo-strategy i:nth-child(2){background:#8c9b75}.process-demo-strategy i:nth-child(3){background:#4f6340}.process-demo-sticky-note{aspect-ratio:1;color:#4b582f;letter-spacing:-.06em;background:#e8ec91;align-content:center;width:34%;padding:6%;font-size:8cqw;line-height:.95;display:grid;position:absolute;top:56%;right:5%;transform:rotate(8deg);box-shadow:0 4px 10px #3a4c2715}.process-demo-sticky-note em{font-family:var(--serif,Georgia, serif)}.process-demo-sticky-note>span{margin-top:10%;font-size:9cqw}.process-demo-art-design{color:#573829;background:#d47b5c}.process-demo-type{border-bottom:1px solid #57382940;justify-content:space-between;align-items:center;padding-bottom:5%;display:flex;position:absolute;top:43%;left:8%;right:8%}.process-demo-type>span:first-child{font-family:var(--serif,Georgia, serif);letter-spacing:-.08em;font-size:23cqw;line-height:1}.process-demo-type>span:last-child{font-size:2.8cqw;line-height:1.6}.process-demo-swatches{width:38%;display:flex;position:absolute;top:68%;left:8%}.process-demo-swatches i{aspect-ratio:1;background:#f4e8ce;flex:1}.process-demo-swatches i:nth-child(2){background:#c6cb8a}.process-demo-swatches i:nth-child(3){background:#c06642}.process-demo-swatches i:nth-child(4){background:#4b472f}.process-demo-wireframe{border:1px solid #57382970;gap:5%;width:35%;height:18%;padding:4%;display:grid;position:absolute;top:65%;right:8%}.process-demo-wireframe span{background:#57382930;display:block}.process-demo-wireframe span:first-child{width:60%}.process-demo-art-build{color:#373c35;background:#dad7cd}.process-demo-code{color:#eff1e4;background:#343d34;border-radius:4px;padding:5%;position:absolute;top:45%;left:7%;right:7%;transform:rotate(-2deg);box-shadow:0 5px 12px #252b2520}.process-demo-code>div{align-items:center;gap:3px;margin-bottom:8%;display:flex}.process-demo-code i{aspect-ratio:1;background:#9aa98d;border-radius:50%;width:3cqw}.process-demo-code i:nth-child(2){background:#c1c68e}.process-demo-code i:nth-child(3){background:#d08f72}.process-demo-code>div>span{color:#a5b39c;margin-left:auto;font-size:2.7cqw}.process-demo-code code{font-size:3.4cqw;line-height:1.5;display:block}.process-demo-code code>span{white-space:pre;display:block}.process-demo-code code b{color:#c8d79f;font-weight:400}.process-demo-code code em{color:#e6b69b;font-style:normal}.process-demo-code p{color:#c8d79f;border-top:1px solid #ffffff20;margin:8% 0 0;padding-top:5%;font-size:3cqw}.process-demo-code p span{margin-right:5%}.process-demo-art-launch{color:#44415e;background:#cecee0}.process-demo-launch-check{border-bottom:1px solid #44415e40;align-items:center;gap:7%;padding-bottom:7%;display:flex;position:absolute;top:43%;left:8%;right:8%}.process-demo-launch-check>span{aspect-ratio:1;border:1px solid #44415e70;border-radius:50%;place-items:center;width:26%;font-size:13cqw;display:grid}.process-demo-launch-check strong{letter-spacing:-.04em;font-size:6cqw;font-weight:500;line-height:1.1}.process-demo-launch-list{gap:12%;height:15%;display:grid;position:absolute;top:65%;left:8%;right:8%}.process-demo-launch-list>span{letter-spacing:.04em;justify-content:space-between;align-items:center;font-size:2.8cqw;display:flex}.process-demo-launch-list b{font-size:4cqw;font-weight:400}.process-demo-end{color:#7b816f;letter-spacing:.08em;border-top:1px solid #d8d9cc;justify-content:space-between;gap:15px;margin:6px 0 0;padding-top:18px;font-size:8px;display:flex}.component-workbench .process-timeline-demo{padding:30px!important}@container ac-process (max-width:560px){.process-timeline-demo .process-demo-art{max-width:100%}.process-timeline-demo .process-demo-art-title{font-size:9.5cqw;top:18%;left:6%;right:48%}.process-timeline-demo .process-demo-art-top{font-size:1.8cqw;top:6%;left:6%;right:6%}.process-timeline-demo .process-demo-art-bottom{font-size:1.65cqw;bottom:5%;left:6%;right:6%}.process-timeline-demo .process-demo-art-bottom span:last-child{font-size:5cqw}.process-timeline-demo .process-demo-strategy{width:38%;height:54%;padding:4%;top:21%;left:53%}.process-timeline-demo .process-demo-strategy>span{font-size:1.6cqw}.process-timeline-demo .process-demo-strategy strong{font-size:4.3cqw}.process-timeline-demo .process-demo-sticky-note{width:22%;padding:3%;font-size:5cqw;top:53%;right:4%}.process-timeline-demo .process-demo-sticky-note>span{font-size:5cqw}.process-timeline-demo .process-demo-type{padding-bottom:3%;top:20%;left:57%;right:7%}.process-timeline-demo .process-demo-type>span:first-child{font-size:18cqw}.process-timeline-demo .process-demo-type>span:last-child{font-size:1.6cqw}.process-timeline-demo .process-demo-swatches{width:30%;top:72%;left:7%}.process-timeline-demo .process-demo-wireframe{width:36%;height:20%;padding:3%;top:66%;right:7%}.process-timeline-demo .process-demo-code{padding:4%;top:20%;left:51%;right:5%}.process-timeline-demo .process-demo-code code{font-size:2.2cqw}.process-timeline-demo .process-demo-code i{width:2cqw}.process-timeline-demo .process-demo-code>div>span{font-size:1.7cqw}.process-timeline-demo .process-demo-code p{font-size:1.9cqw}.process-timeline-demo .process-demo-launch-check{gap:8%;top:23%;left:54%;right:7%}.process-timeline-demo .process-demo-launch-check>span{width:29%;font-size:7cqw}.process-timeline-demo .process-demo-launch-check strong{font-size:3.6cqw}.process-timeline-demo .process-demo-launch-list{height:23%;top:55%;left:54%;right:7%}.process-timeline-demo .process-demo-launch-list>span{font-size:1.8cqw}.process-timeline-demo .process-demo-launch-list b{font-size:3cqw}}@media (max-width:640px){.process-timeline-demo,.component-workbench .process-timeline-demo{padding:22px!important}}
