.crafteno-demo,.crafteno-app{--blue:#2044ed;--lemon:#e5ff51;--coral:#ff755c}
.crafteno-demo{background:#fff;color:#141414;font-family:Arial,Helvetica,sans-serif}
.crafteno-demo a{color:var(--blue);text-underline-offset:4px}
.crafteno-demo>header{background:#fff;border-bottom:2px solid #141414;padding:20px 24px}
.crafteno-demo nav{max-width:1200px}
.crafteno-demo .brand{font:900 30px/1 Arial,Helvetica,sans-serif;letter-spacing:-1.5px;color:#141414}
.crafteno-demo .brand img{width:36px;height:36px}
.crafteno-demo main{max-width:1200px;padding-top:48px}
.crafteno-demo h1{font:800 clamp(34px,5.7vw,68px)/1.04 Arial,Helvetica,sans-serif;letter-spacing:-2px;max-width:920px}
.crafteno-demo h2{font:800 25px/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.5px}
.crafteno-demo .intro{max-width:920px}
.crafteno-demo .eyebrow{color:var(--blue);letter-spacing:1.5px}
.crafteno-demo .note{background:var(--lemon);color:#141414;border:0;border-left:6px solid #141414;padding:20px 24px}
.crafteno-demo .layout{grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:32px;margin-top:40px}
.crafteno-demo .card{border:1px solid #d9dce3;border-radius:4px;background:#f5f6f8;padding:26px}
.crafteno-demo .card h2{margin-top:0}
.crafteno-demo .small{color:#53565f}
.crafteno-demo>footer{background:#141414;color:#fff;border:0;padding:32px 20px}
.crafteno-demo>footer a{color:#fff}
.crafteno-palette{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 24px;background:#141414;color:#fff;font:600 12px/1.4 Arial,Helvetica,sans-serif;position:relative;z-index:101}
.crafteno-palette>span{margin-right:8px}
.crafteno-palette button{min-height:36px;border:1px solid #666;border-radius:30px;padding:7px 12px;background:transparent;color:white;cursor:pointer;font:inherit}
.crafteno-palette button[aria-pressed=true]{background:#fff;color:#141414;border-color:#fff}
.crafteno-palette button:focus-visible,.crafteno-example-nav a:focus-visible{outline:3px solid #ffbd61;outline-offset:3px}
.crafteno-palette i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--swatch);margin-right:7px;border:1px solid #ffffff70}
.crafteno-example-nav{position:relative;z-index:100;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;background:#2044ed;color:white;font:600 13px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0}
.crafteno-example-nav a{color:white;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:8px;min-height:30px}
.crafteno-example-nav img{width:25px;height:25px;background:white;padding:3px}
.crafteno-example-nav~header{position:relative!important;top:auto!important;left:auto!important;right:auto!important}
.crafteno-example-dark>header{background:#141414}
.crafteno-app{--brand:var(--blue);--brand-dark:#141414;--brand-tint:#eef1ff;background:#f1f3fb;background-image:none}
.crafteno-app .crafteno-mark{font-weight:900;letter-spacing:-1px;display:flex;align-items:center;gap:8px}
.crafteno-app .crafteno-mark:before{content:'';display:inline-block;width:24px;height:24px;background:url(crafteno-icon.svg) center/contain no-repeat}
@media(max-width:780px){.crafteno-demo .layout{grid-template-columns:1fr}.crafteno-demo main{padding:30px 18px 44px}.crafteno-demo h1{letter-spacing:-1.2px}.crafteno-palette{padding:10px 16px;gap:6px}.crafteno-palette>span{width:100%}.crafteno-demo .card{padding:22px}.crafteno-example-nav{padding:10px 16px}.crafteno-demo nav{gap:16px}}
@media(prefers-reduced-motion:reduce){.crafteno-demo *,.crafteno-app *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}