.demo-preview{min-width:0}.demo-view-controls{display:flex;gap:8px;margin:18px 0}.demo-view-controls button{border:1px solid currentColor;border-radius:30px;padding:8px 16px;min-height:44px;background:transparent;color:inherit}.demo-view-controls button[aria-pressed=true]{background:#131313;color:#f2f0e7}.demo #demo-layout{display:block;max-height:650px;overflow:auto;overscroll-behavior:contain;width:100%;margin:0 auto 16px;background:#e9e5df;border:1px solid #13131355;border-radius:10px;transition:width .5s cubic-bezier(.22,1,.36,1);scrollbar-width:thin;container-type:inline-size}.demo #demo-layout.is-mobile{width:min(100%,290px)}.sample-site{color:#242326;background:#f6f3ed;text-align:left;font-family:'DM Sans',sans-serif}.sample-nav{display:flex;justify-content:space-between;gap:15px;padding:18px 22px;border-bottom:1px solid #24232622}.sample-nav b{font-size:13px;max-width:65%;overflow-wrap:anywhere}.sample-nav span,.sample-site small,.sample-footer{font-size:8px;letter-spacing:.12em}.sample-hero{padding:36px 24px;background:#c5b2e9}.sample-site .sample-hero h4{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,8cqi,54px);line-height:1;margin:18px 0;font-weight:600;letter-spacing:-.025em}.sample-site p{color:#444049;font-size:12px;line-height:1.55;margin:8px 0}.sample-module{padding:22px;border-bottom:1px solid #24232620;animation:sample-appear .4s ease both}.sample-site h5{font-size:17px;line-height:1.2;margin:8px 0}.sample-services{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sample-services span{font-size:10px}.sample-work{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.sample-art{height:130px;background:#d9e2b9;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.sample-art i{width:45px;height:90px;border:1px solid #323b28;transform:rotate(28deg);border-radius:50%;margin-left:-19px}.sample-site summary{cursor:pointer;font-size:12px;padding:12px 0}.sample-event{display:flex;gap:20px}.sample-event>span{font-size:34px}.sample-button{text-decoration:none;display:inline-block;padding:10px 15px;background:#242326;color:#f6f3ed;font-size:11px;margin-top:8px}.sample-tool label{display:block;font-size:12px;padding:6px 0;cursor:pointer}.sample-tool progress{display:block;width:100%;height:7px;margin:14px 0;accent-color:#7150a4}.sample-tool output{font-size:10px}.sample-footer{padding:22px}.demo-example-note{font-size:11px!important;opacity:.7}.is-mobile .sample-work,.is-mobile .sample-services{grid-template-columns:1fr}.is-mobile .sample-nav span{display:none}@container(max-width:320px){.sample-work,.sample-services{grid-template-columns:1fr}.sample-nav span{display:none}}@keyframes sample-appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.demo #demo-layout,.sample-module{transition:none;animation:none}}.motion-off .sample-module{animation:none}