
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.5 Inter,Arial,sans-serif;color:#0f172a;background:#f8fafc}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #818cf8;outline-offset:4px}header,main,footer{max-width:1440px;margin:auto;padding-inline:5vw}header,nav,.row,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}header{padding-block:20px;border-bottom:1px solid #e2e8f0}.logo{font-size:26px;font-weight:800;letter-spacing:-1.8px}.logo i{display:inline-block;width:21px;height:21px;background:repeating-linear-gradient(135deg,#2563eb 0 4px,transparent 4px 6px);margin-right:7px;border-radius:50%}nav{font-size:14px;flex-wrap:wrap}.btn,button{display:inline-block;border:0;background:#2563eb;color:white;padding:12px 19px;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}.hero{padding:clamp(35px,6vw,88px) 0;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:5vw}.label{font:600 11px/1.4 monospace;text-transform:uppercase;letter-spacing:.12em}.hero h1,h2{letter-spacing:-.065em;line-height:1.01}.hero h1{font-size:clamp(54px,6.7vw,100px);margin:22px 0}.hero h1 em{font:italic 1em Georgia;color:#254cb8;letter-spacing:-.065em}.lead{font-size:18px;max-width:41ch;color:#475569}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:26px}.feature{display:block;background:#dcdffa;padding:8% 6% 4%;border-radius:10px;background-image:linear-gradient(125deg,#eff0ff,#b1b6f6)}.feature .mini{transform:rotate(-3deg);box-shadow:0 15px 26px #34325435}.feature .label{display:block;margin-top:30px}.mini{position:relative;overflow:hidden;isolation:isolate;min-height:240px;padding:20px;color:white;background:#25303a}.mini:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#121820b8,transparent),var(--photo) center/cover}.mini small,.mini strong,.mini span{display:block}.mini small{font:700 10px monospace;letter-spacing:.12em}.mini strong{font:normal clamp(28px,3.2vw,52px)/.98 Georgia;letter-spacing:-.055em;margin:42px 0 18px;max-width:8em}.mini span{font-size:11px}.arch{--photo:url(https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1000&q=85)}.food{--photo:url(https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=900&q=85);background:#672c20}.food strong{font-style:italic;color:#ffe2a5}.trade{--photo:url(https://images.unsplash.com/photo-1486006920555-c77dcf18193c?w=900&q=85);background:#222932}.trade strong{font:900 clamp(29px,3.1vw,50px)/.95 Arial;color:#e4fc73;text-transform:uppercase}section{padding-block:44px;border-top:1px solid #dbe1e9;scroll-margin-top:15px}h2{font-size:clamp(38px,4.8vw,70px);margin:10px 0 26px}h3{letter-spacing:-.035em}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{display:block}.card .mini{border-radius:6px}.card .row{margin-top:12px}.card b{font-size:20px}.card small{color:#526073}.card .mini small{color:white}.service{border-top:1px solid #cad3de;padding:16px 0}.service summary{cursor:pointer;font-size:24px;font-weight:600}.service p{max-width:65ch;color:#475569}.contact{background:#142353;color:white;border-radius:10px;padding:5%;margin:20px 0 32px}.contact h2{max-width:15ch}.demo{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid #d8dfe9;gap:15px}.demo strong{font-size:24px}.demo p{margin:3px 0;color:#475569}footer{padding-block:25px;font-size:14px;flex-wrap:wrap}.active{color:#254cb8;text-decoration:underline;text-underline-offset:5px}dialog{padding:0;border:0;border-radius:12px;width:min(660px,94vw);max-height:90vh;color:#0f172a}dialog::backdrop{background:#11182bc9}dialog .body{padding:22px}dialog .mini{min-height:260px}dialog button{position:absolute;right:12px;top:12px;background:white;color:#0f172a;z-index:2;padding:5px 12px}[hidden]{display:none!important}@media(max-width:760px){header{flex-wrap:wrap;gap:12px}nav{gap:15px}.hero,.grid{grid-template-columns:1fr}.hero{gap:32px}.feature{padding:8%}.grid{gap:28px}.hero h1{margin:16px 0}.mini{min-height:220px}.row{align-items:baseline}.demo strong{font-size:20px}header .btn{padding:7px 10px}.hero .btn{padding:12px 15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.card .mini[class*=look] small{color:inherit}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 24px}.controls select{font:inherit;padding:10px;background:white;color:#0f172a;border:1px solid #94a3b8;border-radius:5px}.outline{background:white;color:#183b8e;border:1px solid #cbd5e1;margin-top:20px}.plan{padding:22px;background:white;border:1px solid #d7dfeb;border-radius:10px;display:flex;flex-direction:column}.plan b{font-size:36px;letter-spacing:-.055em}.plan ul{padding-left:18px;flex:1}.plan a{color:#1744ad;font-weight:bold}.switch{display:flex;gap:5px;margin:18px 0}.switch button{background:#e2e8f0;color:#263854}.switch button[aria-pressed=true]{background:#17378b;color:white}header{background:#f8fafc}header nav{gap:clamp(10px,2vw,28px)}@media(max-width:760px){header{display:grid;grid-template-columns:1fr auto}header nav{grid-column:1/-1;grid-row:2;justify-content:space-between}header>.btn{grid-column:2;grid-row:1}section{padding-block:30px}}
.builder{padding:24px}.builder h2{font-size:32px;padding-right:65px}.builder label{display:grid;gap:4px;margin:12px 0;font-weight:600}.builder select,.builder input,.builder textarea{min-width:0;width:100%;padding:9px;border:1px solid #94a3b8;border-radius:5px;font:inherit}.builder input[type=color]{height:44px;padding:3px}.builder .pair{display:flex;gap:15px}.pair label{flex:1}.builder button{position:static;background:#2563eb;color:white;padding:10px 16px}.builder #sample .mini{min-height:160px}.builder .mini strong{margin:20px 0}.builder #backStep{background:#e2e8f0;color:#0f172a}.builder form{margin:0}dialog>button{z-index:3}
.design{box-sizing:border-box;position:relative;isolation:isolate;container-type:inline-size;height:258px;overflow:hidden;padding:21px 19px;border-radius:5px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:8px;background:var(--paper);color:var(--ink);text-align:left}
.design *{box-sizing:border-box}.design .brand{position:absolute;top:15px;left:19px;font:bold 10px/1.2 Arial;letter-spacing:.12em;text-transform:uppercase;max-width:80%;overflow-wrap:anywhere}.design strong{font:normal clamp(23px,8cqw,42px)/.98 Georgia;letter-spacing:-.055em;max-width:61%;position:relative;z-index:1;overflow-wrap:anywhere}.design .action{font:700 10px/1.2 Arial;background:var(--ink);color:var(--paper);padding:7px 9px;border-radius:2px;z-index:1}.design aside,.design figure{position:absolute;margin:0;right:5%;width:32%}.design em{position:absolute;font:9px/1.2 monospace;bottom:12px;left:19px;letter-spacing:.04em}.design aside{font:11px/1.4 Arial}.design aside p{margin:8px 0}.design aside hr{border:0;border-top:1px solid currentColor;opacity:.35}.design .room{background:#938d76 url(https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=700&q=80) center/cover}.design .arch-window{height:72%;border-radius:100px 100px 0 0;width:40%;bottom:0;right:0}.design .menuboard{background:#f6e4b4;color:#5e251a;padding:14px 9px;transform:rotate(4deg);box-shadow:2px 4px #250b0670}.supper{background:repeating-linear-gradient(90deg,transparent 0 28px,#0002 29px 30px),var(--paper)}.design .plate{border:3px solid;border-radius:6px;background:#e9e3ad;color:#151719;transform:rotate(-9deg);padding:8px;top:28%;font:bold 9px monospace}.plate b{display:block;font-size:16px}.garage strong,.electric strong,.barber strong,.identity strong,.physio strong{font-family:Arial;font-weight:900}.design .stripe{width:100%;left:0;padding:6px 18px;bottom:0;background:#d3f059;color:#202325}.prop{position:absolute;top:48px;right:4%;width:37%;background:#fff;color:#223949;padding:4px;font:10px Arial}.prop .room{position:static;width:100%;height:68px}.prop div{padding:5px}.design .searchbar{width:90%;bottom:12px;background:#fff;color:#1f3a4e;padding:6px 12px;border-radius:15px}.estimate,.calendar,.ledgerlines{padding:12px 9px;border-radius:8px;background:#fff;color:#233843;box-shadow:0 4px 14px #18233120}.design .estimate{border-top:4px solid #5a91ba}.design .circuit{border:1px solid;padding:12px;background:repeating-linear-gradient(0deg,#41451916 0 1px,transparent 1px 10px)}.design .joinery{height:70%;background:repeating-linear-gradient(90deg,#7b442b 0 7px,#aa7c54 8px 18px,#c89970 19px 21px);transform:skewY(-9deg)}.pets .paw{font:bold 90px/.9 Georgia;color:#9c73c5;transform:rotate(-15deg);text-align:center}.paw sup{position:absolute;left:12%;top:-12%;font:42px Georgia}.design .calendar{border-radius:0;border-top:10px solid #999569}.barberpole{height:76%;max-width:15%;background:repeating-linear-gradient(145deg,#e6cba9 0 14px,#8d4031 15px 28px,#263b42 29px 42px);border-radius:32px}.mirror{height:73%;border:7px double #a78074;border-radius:60% 60% 5% 5%;background:linear-gradient(145deg,#deb3a3,#fdf4e7,#c59289)}.ticket{background:#fbf1c8;color:#703f2c;padding:17px 9px;border:2px dashed #b16e3a;transform:rotate(-7deg);line-height:2!important}.design .window{height:70%;border:6px solid #fff7;box-shadow:0 0 0 1px #fff8}.design .setting{width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:34px;background:#ece2c4;color:#75624d;border:10px double #b6a489}.design .bloom{font:100px/1 Georgia;color:#c45475;transform:rotate(12deg)}.swatches{display:flex;gap:2px;height:60%;transform:rotate(-5deg)}.swatches i{flex:1;background:#ad705c}.swatches i+i{background:#5c7084}.swatches i+i+i{background:#cba99d}.design .vinyl{width:42%;aspect-ratio:1;right:-6%;border-radius:50%;background:radial-gradient(circle,#272222 0 3%,#ffa847 4% 29%,transparent 30%),repeating-radial-gradient(circle,#171719 0 2px,#39393a 3px 4px)}.sheets{height:48%;border:1px solid #b39177;background:#fff8dd;transform:rotate(9deg);box-shadow:5px 6px #cc9f7c,10px 12px #a6a5b2,15px 18px #685a59}.frames{display:flex;gap:2px;height:55%;background:#111;padding:5px}.frames i{flex:1}.frames i+i{background-position:80% center!important}.design .letters{font:italic 72px/1 Georgia;color:#ffc6e2}.ledgerlines{border:1px solid #a7b3b0;border-radius:0}.ledgerlines p{border-bottom:1px dotted #93a79e}.gardenplan{height:62%;border:1px solid #607757;background:radial-gradient(ellipse at 25% 70%,#628153 0 19%,transparent 20%),radial-gradient(ellipse at 72% 45%,#a0b678 0 26%,transparent 27%),repeating-linear-gradient(90deg,#dce4cc 0 11px,#c1cfab 12px)}.motion{display:flex;gap:5px;align-items:end;height:50%}.motion i{width:22%;height:38%;border-radius:12px;background:#84c0ba}.motion i+i{height:65%;background:#568c8e}.motion i+i+i{height:88%;background:#31636b}.summits{height:56%;background:linear-gradient(145deg,#d9c8a6,#506b56);clip-path:polygon(0 90%,35% 20%,50% 52%,72% 4%,100% 76%,100% 100%,0 100%)}
#sample .design{height:clamp(225px,33vh,320px)}.feature .design{transform:rotate(-2deg);box-shadow:0 16px 30px #26344828}.sectionlinks{display:flex;flex-wrap:wrap;gap:12px}.sectionlinks a{border-bottom:1px solid #8ba1dc;color:#193b87;padding:5px 0}.localcopy{max-width:65ch;color:#475569}.galleryintro{max-width:60ch}.design .action{max-width:65%}
.design.linen{--paper:#eee9dd;--ink:#342f22}.design.supper{--paper:#6b241b;--ink:#fff0d1}.design.garage{--paper:#242627;--ink:#e6f584}.design.estate{--paper:#dce7ec;--ink:#153549}.design.clean{--paper:#eef4fb;--ink:#213651}.design.electric{--paper:#f0e884;--ink:#323820}.design.joiner{--paper:#eee0ca;--ink:#4b3124}.design.pets{--paper:#f1e8fa;--ink:#493052}.design.pilates{--paper:#e6e5d7;--ink:#363c2c}.design.barber{--paper:#202b30;--ink:#fbe4ba}.design.salon{--paper:#f4ddd4;--ink:#603832}.design.bakery{--paper:#b76b39;--ink:#fff5cd}.design.guest{--paper:#2f4050;--ink:#f2e5d2}.design.cater{--paper:#743e45;--ink:#fff1db}.design.florist{--paper:#f3e2c2;--ink:#4b5235}.design.fashion{--paper:#efdfd7;--ink:#452f31}.design.record{--paper:#33314a;--ink:#ffdda0}.design.paper{--paper:#ddd9ec;--ink:#4f425a}.design.photo{--paper:#202426;--ink:#e7ded3}.design.identity{--paper:#42204e;--ink:#ffe4ed}.design.ledger{--paper:#e7edeb;--ink:#213d38}.design.garden{--paper:#dee4ce;--ink:#31452b}.design.physio{--paper:#daeaf0;--ink:#1c424a}.design.walk{--paper:#dfe6db;--ink:#2d4637}
.design.garage{justify-content:flex-end;padding-bottom:42px}.garage strong{font-style:italic;text-transform:uppercase}.design.supper{align-items:start;padding-left:8%;border:7px double #e4bd81}.design.supper strong{font-style:italic;max-width:50%}.design.estate{justify-content:flex-start;padding-top:50px}.design.clean{background:linear-gradient(0deg,#ccdfee 0 19%,transparent 19%),#e9f2fa}.clean .estimate{top:30px;min-height:130px}.design.guest{padding:14px 18px;justify-content:flex-end;color:white;background:#465455}.guest .window{inset:0;border:0;width:100%;height:100%;z-index:-1;box-shadow:inset 0 -170px 95px -45px #18222bd9}.guest strong{max-width:85%;margin-bottom:24px}.guest .token{position:static;margin:0}.design.photo{justify-content:flex-end;padding-bottom:17px}.photo .frames{top:36px;height:44%;left:6%;width:88%}.photo strong{font:22px/1 Georgia;max-width:90%}.photo .caption{left:auto;right:10px}.design.identity{background:linear-gradient(115deg,#402051 50%,#542c67 50%)}.design.identity .letters{right:0;width:50%;font-size:clamp(66px,24cqw,115px)}.design.fashion{justify-content:flex-end;align-items:start}.fashion .swatches{top:36px;left:19px;right:19px;width:auto;height:36%;transform:none}.fashion strong{font-size:24px;max-width:90%}.fashion .token{bottom:20px;left:auto;right:16px}.design.record{background:linear-gradient(30deg,#342641,#242537)}.design.paper,.design.joiner{background-image:linear-gradient(#90807020 1px,transparent 1px),linear-gradient(90deg,#90807020 1px,transparent 1px);background-size:13px 13px}.design.pilates{padding-bottom:25%;justify-content:end}.pilates .calendar{bottom:14px;right:14px;width:48%}.pilates strong{max-width:52%}.design.barber strong{font-stretch:condensed;text-transform:uppercase;letter-spacing:-.075em}.design.cater{border:8px solid #a16c65}.design.bakery .brand{background:#f8e6c0;color:#693a2a;padding:5px}.design.pets{border-radius:32px 6px}.design.physio strong{max-width:57%}

body{margin:0;background:var(--paper);color:var(--ink)}.examplebar,.samplemain{width:min(100%,1000px);margin:auto;padding:16px clamp(16px,4vw,42px)}.examplebar{display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:none;background:#f8fafc;color:#0f172a}.examplebar a{font-size:14px;font-weight:700;padding:9px}.examplebar .use{background:#1f4abb;color:white;border-radius:6px}.samplemain{padding-block:24px 52px}.samplemain .design{height:clamp(270px,43vw,430px);width:100%;border-radius:6px}.samplemain .design strong{font-size:clamp(26px,5vw,60px)}.samplemain .design aside{font-size:clamp(12px,1.8vw,21px)}.samplemain .design .action{font-size:14px;display:inline-block}.samplemain h1{font-size:clamp(30px,5vw,50px);line-height:1.07;letter-spacing:-.05em;margin:28px 0 15px}.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:12px}.option{border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);color:var(--ink);background:transparent;text-align:left;padding:16px;cursor:pointer;font:inherit;border-radius:7px}.option[aria-pressed=true]{outline:2px solid var(--ink);background:color-mix(in srgb,var(--ink) 8%,var(--paper))}.option b,.option small{display:block}.option small{margin:6px 0 0}.result{margin:16px 0;padding:15px;border-left:3px solid var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--paper))}.examplebar span{font-size:12px}@media(max-width:480px){.examplebar span{display:none}.examplebar{gap:2px}.examplebar a{font-size:13px}.samplemain .design{height:260px}}