:root{--navy:#171c1f;--panel:#21272a;--muted:#8b9697;--line:rgba(255,255,255,.12);--lime:#cce8a0}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #a5d8ff;outline-offset:3px}.app-shell{display:grid;grid-template-columns:330px minmax(0,1fr);height:100dvh;overflow:hidden;background:#e8ebe8}.sidebar{background:var(--navy);color:#f9faf3;display:flex;flex-direction:column;min-height:0;border-right:1px solid #333a3b}.side-top{padding:26px 27px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.studio-logo{display:flex;align-items:center;gap:12px}.studio-mark{font-family:'Space Grotesk';font-size:30px;letter-spacing:-4px;line-height:1;font-weight:700}.mark-dot{color:var(--lime)}.studio-logo strong{font-family:'Space Grotesk';font-size:12px;letter-spacing:.12em;display:block}.studio-logo small{display:block;color:#99a09d;font-size:9px;letter-spacing:.15em;margin-top:4px}.sidebar-close{display:none}.side-scroll{overflow:auto;padding:0 27px 24px;scrollbar-width:thin;scrollbar-color:#4a5352 transparent}.intro-block{padding:32px 0 27px}.micro-kicker{display:flex;gap:9px;align-items:center;color:#bad0b8;font-size:9px;letter-spacing:.16em;font-weight:700}.live-dot,.green-led{display:inline-block;background:#b4ef8f;height:7px;width:7px;border-radius:50%;box-shadow:0 0 0 4px rgba(161,221,133,.08)}.intro-block h1{font-family:'Space Grotesk',sans-serif;font-size:41px;line-height:1.04;letter-spacing:-.055em;font-weight:600;margin:15px 0 12px}.intro-block em{font-style:normal;color:var(--lime)}.intro-block p{font-size:12px;line-height:1.75;color:#9da8a9;max-width:220px;margin:0}.control-section{padding:23px 0 25px;border-top:1px solid var(--line)}.section-meta{display:flex;gap:9px;font-size:10px;font-weight:800;letter-spacing:.15em;margin-bottom:17px}.section-meta .step{color:#798783}.tier-group{display:grid;grid-template-columns:1fr;gap:7px}.tier-btn{display:flex;align-items:center;justify-content:space-between;border:1px solid #394142;border-radius:9px;color:#ecefed;padding:12px 13px;background:#222a2d;text-align:left;transition:all .18s}.tier-btn span{font-size:13px;font-weight:700}.tier-btn small{font-size:10px;color:#929e9e}.tier-btn.active{background:#e3edcc;border-color:#e3edcc;color:#1b2b21}.tier-btn.active small{color:#4b6655}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.template-option{border:1px solid #3a4445;border-radius:10px;text-align:left;color:white;background:#232a2d;overflow:hidden;padding:5px 5px 11px;transition:all .18s}.template-option.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}.template-option strong{display:block;margin:10px 6px 2px;font-size:11px}.template-option small{margin-left:6px;font-size:9px;color:#9da7a4}.mini-art{height:73px;width:100%;border-radius:5px;overflow:hidden;position:relative;display:block}.mini-art i,.mini-art b,.mini-art u{position:absolute;display:block}.art-editorial{background:#efeee2}.art-editorial i{left:10px;top:19px;width:45%;height:8px;background:#314a3a;box-shadow:0 13px 0 -1px #314a3a,0 23px 0 -3px #84998a}.art-editorial b{right:8px;top:8px;bottom:8px;width:39%;background:linear-gradient(25deg,#8f9c7a,#c5b89e)}.art-editorial u{left:10px;bottom:10px;height:4px;width:21px;background:#73958d}.art-impact{background:#1e2424}.art-impact i{inset:6px 6px 6px 42%;background:linear-gradient(45deg,#667866,#b7bfa9)}.art-impact b{top:14px;left:8px;width:75px;height:12px;background:white;box-shadow:0 16px 0 white,0 29px 0 -3px #e3ef97}.art-impact u{bottom:10px;left:9px;width:34px;height:5px;background:#dce7a0}.art-minimal{background:#f6f6f3}.art-minimal i{left:22px;top:10px;right:22px;height:4px;background:#272d31;box-shadow:0 9px 0 -1px #717978}.art-minimal b{left:10px;right:10px;bottom:9px;height:35px;background:linear-gradient(90deg,#bfc5c0,#91a8a3)}.art-minimal u{top:4px;right:9px;width:9px;height:9px;border:2px solid #242b2c;border-radius:50%}.art-playful{background:#e2e7ff}.art-playful i{left:-14px;top:22px;width:70px;height:65px;border-radius:50%;background:#f6b8a0}.art-playful b{right:10px;top:9px;width:47px;height:52px;border-radius:60px 60px 8px 8px;background:#5364a9}.art-playful u{left:24px;top:14px;width:54px;height:10px;background:#2b335c;box-shadow:0 14px 0 #2b335c}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.palette-option{display:flex;align-items:center;gap:9px;padding:9px;background:#22292b;border:1px solid #394344;border-radius:8px;color:#dee5e1;text-align:left;font-size:11px;transition:all .18s}.palette-option.active{border-color:var(--lime);background:#313e37;color:#fff}.palette-dots{display:flex;align-items:center}.palette-dots i{display:block;width:14px;height:20px;border-radius:7px;border:1px solid rgba(0,0,0,.08);margin-left:-5px}.palette-dots i:first-child{margin-left:0}.what-changes{display:flex;gap:13px;margin-top:5px;border-radius:10px;background:#28302f;padding:16px 14px}.what-icon{font-size:22px;color:#c8e3a6}.what-changes strong{font-size:12px}.what-changes p{font-size:11px;line-height:1.6;margin:5px 0 0;color:#aebbb3}.side-footer{padding:20px 27px;border-top:1px solid var(--line);display:flex;gap:11px;align-items:center;color:#d8e0d9;font-size:11px}.side-footer-icon{font-size:24px;color:#c8e4a2}.side-footer small{display:block;color:#83908d;font-size:10px;margin-top:3px}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0}.workspace-bar{background:#f8faf8;border-bottom:1px solid #d4dcda;height:72px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 35px;gap:20px}.bar-left,.bar-right{display:flex;align-items:center;gap:15px}.crumb{font-size:11px;letter-spacing:.13em;color:#9ba5a2;font-weight:700}.crumb-sep{color:#bac3c0}.bar-left strong{font-size:13px}.bar-tag{font-size:9px;letter-spacing:.1em;background:#e9f3df;color:#537645;border-radius:100px;padding:7px 10px;font-weight:800;margin-left:5px}.icon-btn{border:1px solid #dce3df;border-radius:7px;background:transparent;height:33px;width:36px;font-size:17px;color:#77847d}.icon-btn.active{background:#e0e9e1;border-color:#b9c6bc;color:#1c382c}.bar-divider{height:21px;border-left:1px solid #d3dad5;margin:0 2px}.bar-btn{border:1px solid #c9d1cc;border-radius:8px;background:transparent;font-size:11px;font-weight:800;color:#23312a;padding:11px 13px;white-space:nowrap}.bar-btn span{margin-left:13px}.primary-bar-btn{background:#202d29;border-color:#202d29;color:white}.mobile-control{display:none}.canvas-area{padding:28px clamp(18px,3vw,46px) 20px;overflow:auto;display:flex;flex-direction:column;flex:1;min-height:0}.canvas-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:20px}.eyebrow{font-size:10px;letter-spacing:.14em;color:#68736d;font-weight:800;display:flex;gap:10px;align-items:center}.green-led{width:6px;height:6px;background:#63947c;box-shadow:none}.slash{color:#b6bbb5}#previewHeading{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.4vw,33px);letter-spacing:-.045em;font-weight:600;color:#202d27;line-height:1.15;margin:10px 0 0}.config-note{text-align:right;font-size:10px;color:#52635a;letter-spacing:.13em;font-weight:800;white-space:nowrap}.config-note small{display:block;font-size:11px;letter-spacing:0;font-weight:500;margin-top:8px;color:#88918d}.config-dot{margin:0 7px}.device-stage{display:flex;justify-content:center;flex:1;min-height:500px;min-width:0;transition:all .35s}.browser-window{background:white;width:100%;max-width:1560px;min-width:0;border-radius:13px 13px 0 0;box-shadow:0 24px 65px rgba(38,63,50,.16);border:1px solid #d9e1dc;display:flex;flex-direction:column;overflow:hidden;transition:width .35s}.browser-toolbar{height:39px;background:#f8faf9;border-bottom:1px solid #e0e6e3;display:flex;justify-content:space-between;align-items:center;padding:0 14px;flex-shrink:0}.traffic{display:flex;gap:6px}.traffic i{width:9px;height:9px;border-radius:50%;background:#edb5ac}.traffic i:nth-child(2){background:#eed3a0}.traffic i:nth-child(3){background:#bbdac1}.address{font-size:10px;background:#eef2f0;border-radius:5px;color:#7f8f85;padding:5px 30px;min-width:270px;text-align:center}.lock{margin-right:8px;color:#4d7b66}.toolbar-menu{color:#8c9a92;letter-spacing:2px}.browser-window iframe{width:100%;flex:1;border:0;background:#f2f0eb;min-height:0}.device-stage.mobile .browser-window{width:390px;max-width:100%;border-radius:18px 18px 0 0}.below-preview{padding:17px 0;display:flex;align-items:center;justify-content:space-between;color:#748078;font-size:11px;gap:10px}.below-preview button{border:0;background:transparent;color:#2b4333;font-weight:800;font-size:12px}.below-preview button span{margin-left:12px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,16px);padding:12px 18px;background:#20362a;color:#fff;font-size:13px;border-radius:9px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 20px rgba(0,0,0,.15);z-index:90}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:1170px){.app-shell{grid-template-columns:290px 1fr}.side-top,.side-scroll,.side-footer{padding-left:19px;padding-right:19px}.workspace-bar{padding:0 18px}.bar-tag{display:none}.copy-btn{display:none}}@media(max-width:800px){.app-shell{display:block}.sidebar{position:fixed;z-index:70;inset:0 auto 0 0;width:min(330px,90vw);transform:translateX(-100%);transition:transform .24s;box-shadow:20px 0 50px #0003}.sidebar.open{transform:translateX(0)}.sidebar-close{display:block;border:0;background:transparent;color:white;font-size:30px}.workspace{height:100dvh}.mobile-control{display:inline-flex;align-items:center;gap:7px;background:#23342a;color:white;border:0;border-radius:7px;padding:8px 11px;font-size:13px}.mobile-control span{font-size:11px;font-weight:700}.workspace-bar{height:61px}.crumb,.crumb-sep{display:none}.bar-left strong{font-size:12px}.bar-right{gap:6px}.bar-divider{display:none}.bar-btn{font-size:0;padding:9px 10px}.bar-btn span{font-size:13px;margin-left:0}.canvas-area{padding:19px 14px 12px}.canvas-meta{align-items:start}.config-note{display:none}.device-stage{min-height:500px}.below-preview{font-size:10px}}@media(max-width:450px){.bar-left strong{display:none}.workspace-bar{padding:0 9px;gap:7px}.bar-right{gap:5px}.icon-btn{width:28px;height:30px}.bar-btn{padding:7px}.canvas-area{padding:16px 8px 8px}.canvas-meta{padding:0 8px}#previewHeading{font-size:23px}.address{min-width:auto;padding:5px 12px}.device-stage.mobile .browser-window{width:340px}}
/* Business switch — first control in the showroom */
.business-select{padding-top:21px}
.business-group{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.business-option{background:#252d30;border:1px solid #465052;border-radius:11px;color:#f7faf6;display:flex;align-items:center;gap:9px;text-align:left;padding:12px 10px;min-height:78px;transition:background .2s,border-color .2s,transform .2s}
.business-option:hover{background:#344039;transform:translateY(-1px)}
.business-option.active{border-color:#cce8a0;background:#344b3a;box-shadow:0 0 0 1px #cce8a055}
.business-icon{display:flex;align-items:center;justify-content:center;height:31px;width:31px;border-radius:9px;background:#44554c;color:#d4e7ba;font-size:19px;flex:0 0 auto}
.business-option.active .business-icon{background:#d2e8a8;color:#203329}
.business-option strong{display:block;font-size:12px;font-weight:800}
.business-option small{display:block;color:#b5c4bd;font-size:9px;line-height:1.45;margin-top:4px}
.business-option.active small{color:#d2e4cc}
@media(max-width:430px){.business-option{padding:10px 7px;gap:6px}.business-icon{height:28px;width:28px}.business-option small{font-size:8px}}