.example-header{border-bottom:1px solid var(--line);background:var(--paper)}
.example-header>.wrap{min-height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.example-back{font-size:14px;display:flex;align-items:center;gap:14px;min-height:44px;width:fit-content}
.example-back:hover{color:var(--accent)}
.example-label{justify-self:end;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.example-intro{text-align:center;padding-block:60px 30px}
.example-intro h1{font-size:clamp(36px,5vw,62px);text-wrap:balance}
.example-intro>p:not(.eyebrow){margin-top:18px;color:var(--muted);font-size:16px}
.design-switcher{display:flex;justify-content:center;gap:10px;margin-top:28px}
.design-switcher a{border:1px solid var(--line);border-radius:5px;padding:12px 18px;min-height:46px;font-size:14px;display:flex;align-items:center;gap:22px}
.design-switcher a span{font-size:10px;color:var(--muted)}
.design-switcher a:hover{background:var(--wash)}
.design-switcher a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.design-switcher a[aria-current="page"] span{color:#d8d0c4}
.example-intro>.example-provenance{font-size:12px;margin-top:22px;line-height:1.6}
.example-stage{width:min(430px,calc(100% - 40px));margin:auto;border:1px solid #d8caba;box-shadow:0 16px 60px #40311d12;border-radius:6px;overflow:hidden;background:var(--white)}
#design-frame{display:block;border:0;width:100%;height:1000px;background:var(--white)}
.example-footer{text-align:center;padding-block:38px 64px}
.example-footer p{color:var(--muted);font-size:15px;margin-bottom:12px}
@media(max-width:600px){
 .example-header>.wrap{min-height:72px;grid-template-columns:1fr auto;gap:15px}
 .example-label{display:none}
 .example-back{font-size:14px;gap:10px}
 .example-intro{padding-block:38px 25px}
 .example-intro .eyebrow{font-size:9px}
 .example-intro>p:not(.eyebrow){font-size:15px;margin-top:15px}
 .design-switcher{gap:8px;margin-top:24px}
 .design-switcher a{padding:11px 12px;gap:12px;font-size:13px;flex:1;justify-content:center}
 .example-intro>.example-provenance{font-size:11px}
 .example-stage{width:calc(100% - 24px)}
 .example-footer{padding-block:30px 48px}
}
@media(max-width:350px){.design-switcher a{gap:8px;padding-inline:9px}.example-intro h1{font-size:34px}}