500;600;700&display=swap');
#webbr-live-preview{font-family:Sora,Arial,sans-serif;color:light-dark(#342c24,#f4f1ee);color-scheme:light dark;--studio-accent:#e8a45c}
#webbr-live-preview *{box-sizing:border-box}
#webbr-live-preview .library-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;align-items:end}
#webbr-live-preview .library-controls label{font-size:12px;display:grid;gap:6px;flex:1;min-width:210px}
#webbr-live-preview select{font:500 13px Sora,Arial,sans-serif;width:100%;padding:12px 16px;border:1px solid light-dark(#d1c5b5,#574936);border-radius:16px;background:light-dark(#f8f3eb,#211b14);color:inherit}
#webbr-live-preview .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:700px;margin:auto}
#webbr-live-preview figure{margin:0;min-width:0}
#webbr-live-preview figcaption{font:500 12px Sora,Arial,sans-serif;margin:0 0 10px;color:light-dark(#776650,#beae9a);text-align:center}
#webbr-live-preview .fit{position:relative;margin:auto;width:100%;max-width:272px;height:629px}
#webbr-live-preview .phone{width:320px;height:740px;transform-origin:top left;position:absolute;isolation:isolate;overflow:hidden;border-radius:30px;background:var(--page);color:var(--ink);border:1px solid var(--line);font:400 12px Arial,sans-serif;--accent:#bf7337;--accent2:#e8c19a;--on-accent:#fff;--page:#f8f6f1;--surface:#fff;--ink:#262622;--muted:#66665f;--line:#deddd6;--shadow:#a29a8860;--shine:#fff;--tint:#eee7da;--status:#47704b}
#webbr-live-preview .phone.dark{color-scheme:dark;--page:#141513;--surface:#222320;--ink:#f3f1e9;--muted:#b6b7ad;--line:#42443b;--shadow:#0009;--shine:#41443e;--tint:#303226;--accent:#e8a96b;--accent2:#8f6c48;--on-accent:#20170f;--status:#a9c2a0}
#webbr-live-preview .lp-mobile-body{position:relative;z-index:1;padding:0 24px;height:100%;display:flex;flex-direction:column}
#webbr-live-preview .lp-statusbar{height:35px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;flex-shrink:0}
#webbr-live-preview .lp-statusbar .lp-signals{display:flex;gap:5px;align-items:center}
#webbr-live-preview svg{width:17px;height:17px;stroke-width:1.6;flex-shrink:0}
#webbr-live-preview .lp-statusbar svg{width:12px;height:12px}
#webbr-live-preview .lp-brand{display:flex;justify-content:space-between;align-items:center;height:48px;font-size:15px;font-weight:600;flex-shrink:0}
#webbr-live-preview .lp-brand .lp-brandmark{display:flex;align-items:center;gap:6px}
#webbr-live-preview .lp-brandmark svg{color:var(--accent)}
#webbr-live-preview .lp-round{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%}
#webbr-live-preview .lp-hero{padding:21px 0 22px}
#webbr-live-preview .lp-eyebrow{color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px}
#webbr-live-preview h2{font-size:36px;line-height:1.08;letter-spacing:-1.4px;font-weight:500;margin:0 0 14px;color:inherit}
#webbr-live-preview h2 em{font-style:normal;color:var(--accent)}
#webbr-live-preview .lp-intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:235px}
#webbr-live-preview .lp-services{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
#webbr-live-preview .lp-service{height:86px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;justify-content:space-between}
#webbr-live-preview .lp-service svg{color:var(--accent);width:21px;height:21px}
#webbr-live-preview .lp-service span{display:flex;align-items:center;justify-content:space-between;font-size:12px}
#webbr-live-preview .lp-service span svg{width:13px;height:13px}
#webbr-live-preview .lp-feature{padding:17px;border-radius:16px;border:1px solid var(--line);background:var(--surface);margin-bottom:17px;position:relative}
#webbr-live-preview .lp-feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#webbr-live-preview .lp-feature-label{font-size:10px;color:var(--muted)}
#webbr-live-preview .lp-badge{font-size:9px;border-radius:12px;padding:4px 7px;background:var(--tint);color:var(--ink)}
#webbr-live-preview .lp-feature h3{font-size:15px;font-weight:500;margin:0 0 6px;color:inherit}
#webbr-live-preview .lp-feature p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}
#webbr-live-preview .lp-samples{display:flex;gap:5px;margin-top:13px}
#webbr-live-preview .lp-samples span{height:5px;width:25px;border-radius:4px;background:var(--line)}
#webbr-live-preview .lp-samples span:first-child{background:var(--accent);width:48px}
#webbr-live-preview .lp-cta{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:24px;padding:0 18px;background:var(--accent);color:var(--on-accent);font-family:inherit;font-size:12px;font-weight:500}
#webbr-live-preview .lp-bottomnav{display:flex;justify-content:space-around;align-items:center;flex:1;min-height:51px;margin-top:12px;color:var(--muted)}
#webbr-live-preview .lp-bottomnav span{display:flex;align-items:center;flex-direction:column;gap:5px;font-size:9px}
#webbr-live-preview .lp-bottomnav span:first-child{color:var(--accent)}
#webbr-live-preview .lp-homebar{width:88px;height:3px;background:var(--ink);opacity:.45;border-radius:3px;margin:0 auto 12px;flex-shrink:0}
/* 01 — quiet, open surfaces */
#webbr-live-preview .minimal{font-family:Sora,Arial,sans-serif}
#webbr-live-preview .minimal .lp-hero{padding-top:27px;padding-bottom:25px}
#webbr-live-preview .minimal h2{font-size:33px;letter-spacing:-1.5px}
#webbr-live-preview .minimal .lp-service{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;background:transparent}
#webbr-live-preview .minimal .lp-feature{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:15px 0}
#webbr-live-preview .minimal .lp-cta{background:var(--ink);color:var(--page)}
#webbr-live-preview .minimal .lp-badge{background:none;color:var(--muted);padding-right:0}
/* 02 — exposed, raw structure */
#webbr-live-preview .brutal{font-family:'Courier New',monospace;border-radius:2px;border:3px solid var(--ink)}
#webbr-live-preview .brutal .lp-mobile-body{padding:0 18px}
#webbr-live-preview .brutal .lp-brand{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-transform:uppercase}
#webbr-live-preview .brutal .lp-round{border:2px solid var(--ink);border-radius:0}
#webbr-live-preview .brutal h2{font-family:Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:36px;letter-spacing:-2px}
#webbr-live-preview .brutal h2 em{color:var(--page);background:var(--ink);display:inline;padding:0 4px}
#webbr-live-preview .brutal .lp-service,#webbr-live-preview .brutal .lp-feature{border:2px solid var(--ink);border-radius:0;background:none}
#webbr-live-preview .brutal .lp-services{gap:0}
#webbr-live-preview .brutal .lp-service+ .lp-service{border-left:0}
#webbr-live-preview .brutal .lp-badge{border:1px solid var(--ink);background:none;border-radius:0}
#webbr-live-preview .brutal .lp-cta{border:2px solid var(--ink);border-radius:0;background:var(--accent);font-weight:700;text-transform:uppercase}
#webbr-live-preview .brutal .lp-bottomnav{border-top:2px solid var(--ink)}
/* 03 — translucent surfaces over visible depth */
#webbr-live-preview .glass{background:var(--page)}
#webbr-live-preview .glass:before,#webbr-live-preview .glass:after{content:'';position:absolute;border-radius:50%;z-index:0;filter:blur(6px);background:radial-gradient(circle at 30% 25%,var(--accent2),var(--accent));width:230px;height:230px;opacity:.6;top:150px;right:-100px}
#webbr-live-preview .glass:after{top:350px;left:-130px;width:250px;height:250px;opacity:.35}
#webbr-live-preview .glass .lp-brand,#webbr-live-preview .glass .lp-service,#webbr-live-preview .glass .lp-feature,#webbr-live-preview .glass .lp-bottomnav{background:color-mix(in srgb,var(--surface) 42%,transparent);backdrop-filter:blur(15px);border:1px solid color-mix(in srgb,var(--shine) 60%,transparent);box-shadow:inset 0 1px 0 var(--shine),0 7px 22px color-mix(in srgb,var(--shadow) 30%,transparent);border-radius:18px}
#webbr-live-preview .glass .lp-brand{padding:0 12px}
#webbr-live-preview .glass .lp-bottomnav{margin-bottom:12px;min-height:47px;flex:0 0 47px}
#webbr-live-preview .glass .lp-cta{background:color-mix(in srgb,var(--accent) 82%,transparent);border:1px solid color-mix(in srgb,var(--shine) 55%,transparent);box-shadow:inset 0 1px 0 var(--shine)}
/* 04 — raised and inset, same-material surfaces */
#webbr-live-preview .neumo{--surface:var(--page)}
#webbr-live-preview .neumo .lp-service,#webbr-live-preview .neumo .lp-round,#webbr-live-preview .neumo .lp-cta{border:0;box-shadow:6px 6px 13px var(--shadow),-6px -6px 13px var(--shine)}
#webbr-live-preview .neumo .lp-feature{border:0;background:var(--page);box-shadow:inset 5px 5px 10px var(--shadow),inset -5px -5px 10px var(--shine)}
#webbr-live-preview .neumo .lp-badge{background:var(--page);box-shadow:inset 2px 2px 4px var(--shadow),inset -2px -2px 4px var(--shine)}
#webbr-live-preview .neumo .lp-cta{background:var(--page);color:var(--accent);border-radius:13px}
#webbr-live-preview .neumo .lp-service{border-radius:19px}
#webbr-live-preview .neumo .lp-samples{padding:3px;border-radius:8px;box-shadow:inset 2px 2px 3px var(--shadow)}
/* 05 — stitching, paper, engraved metal */
#webbr-live-preview .skeuo{background:repeating-linear-gradient(4deg,transparent 0 3px,color-mix(in srgb,var(--ink) 4%,transparent) 3px 4px),var(--tint);font-family:Georgia,serif}
#webbr-live-preview .skeuo .lp-brand{margin:0 -24px;padding:0 24px;height:49px;background:linear-gradient(color-mix(in srgb,var(--accent) 86%,var(--ink)),color-mix(in srgb,var(--accent) 56%,var(--ink)));color:var(--on-accent);outline:1px dashed color-mix(in srgb,var(--on-accent) 50%,transparent);outline-offset:-5px;box-shadow:0 3px 5px var(--shadow)}
#webbr-live-preview .skeuo .lp-brandmark svg{color:inherit}
#webbr-live-preview .skeuo .lp-hero{padding-top:23px;padding-bottom:20px}
#webbr-live-preview .skeuo h2{font-family:Georgia,serif;font-size:35px;text-shadow:0 1px var(--shine);letter-spacing:-1px}
#webbr-live-preview .skeuo .lp-service{border-radius:5px;background:linear-gradient(145deg,var(--surface),var(--tint));border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--shine),0 3px 4px var(--shadow)}
#webbr-live-preview .skeuo .lp-feature{border-radius:3px;background:repeating-linear-gradient(0deg,transparent 0 19px,var(--line) 19px 20px),var(--surface);box-shadow:0 3px 0 var(--tint),0 4px 0 var(--line),0 7px 9px var(--shadow)}
#webbr-live-preview .skeuo .lp-cta{border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 70%,var(--ink));background:linear-gradient(color-mix(in srgb,var(--accent) 70%,var(--shine)),var(--accent));box-shadow:inset 0 1px var(--shine),0 3px 0 color-mix(in srgb,var(--accent) 70%,var(--ink)),0 5px 7px var(--shadow);text-shadow:0 1px color-mix(in srgb,var(--ink) 20%,transparent)}
/* 06 — playful flat blocks and offset ink shadows */
#webbr-live-preview .neo{font-family:Arial,sans-serif}
#webbr-live-preview .neo h2{font-size:39px;font-weight:900;letter-spacing:-1.8px}
#webbr-live-preview .neo .lp-service,#webbr-live-preview .neo .lp-feature,#webbr-live-preview .neo .lp-cta{border:2px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink)}
#webbr-live-preview .neo .lp-service:first-child{background:var(--accent);color:var(--on-accent)}
#webbr-live-preview .neo .lp-service:first-child svg{color:inherit}
#webbr-live-preview .neo .lp-service:nth-child(2){background:var(--accent2);color:var(--on-second)}
#webbr-live-preview .neo .lp-service:nth-child(2) svg{color:inherit}
#webbr-live-preview .neo .lp-feature{background:var(--tint);transform:rotate(-1deg)}
#webbr-live-preview .neo .lp-badge{border:1px solid var(--ink);border-radius:3px;background:var(--surface);transform:rotate(5deg)}
#webbr-live-preview .neo .lp-cta{font-weight:700}
/* 07 — typographic hierarchy and a strict grid */
#webbr-live-preview .swiss{font-family:Helvetica,Arial,sans-serif;border-radius:0}
#webbr-live-preview .swiss .lp-brand{border-bottom:1px solid var(--ink);font-weight:700;letter-spacing:-.5px}
#webbr-live-preview .swiss .lp-round{border:0}
#webbr-live-preview .swiss .lp-hero{padding-top:20px;padding-bottom:19px}
#webbr-live-preview .swiss .lp-eyebrow{font-size:9px;letter-spacing:2px}
#webbr-live-preview .swiss h2{font-size:44px;line-height:.98;letter-spacing:-2.4px;font-weight:700}
#webbr-live-preview .swiss .lp-services{gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
#webbr-live-preview .swiss .lp-service{border:0;border-radius:0;background:transparent;padding:12px 0;height:77px}
#webbr-live-preview .swiss .lp-service:nth-child(2){border-left:1px solid var(--line);padding-left:14px}
#webbr-live-preview .swiss .lp-service svg{width:17px;height:17px}
#webbr-live-preview .swiss .lp-feature{border:0;border-radius:0;background:transparent;padding:0 0 13px;border-bottom:1px solid var(--ink)}
#webbr-live-preview .swiss .lp-feature h3{font-size:21px;letter-spacing:-.7px}
#webbr-live-preview .swiss .lp-badge{border-radius:0;background:var(--accent);color:var(--on-accent)}
#webbr-live-preview .swiss .lp-cta{border-radius:0}
/* 08 — tonal surfaces, elevation and friendly geometry */
#webbr-live-preview .material .lp-hero{padding-top:18px}
#webbr-live-preview .material .lp-brand .lp-round{background:var(--tint);border:0}
#webbr-live-preview .material h2{font-size:36px;letter-spacing:-1px}
#webbr-live-preview .material .lp-service{border:0;border-radius:18px;background:var(--tint)}
#webbr-live-preview .material .lp-feature{border:0;border-radius:20px;box-shadow:0 2px 3px var(--shadow),0 6px 13px color-mix(in srgb,var(--shadow) 40%,transparent)}
#webbr-live-preview .material .lp-cta{box-shadow:0 3px 5px var(--shadow);border-radius:16px}
#webbr-live-preview .material .lp-bottomnav{margin:14px -24px 6px;padding:8px 12px;background:var(--tint)}
#webbr-live-preview .material .lp-bottomnav span:first-child svg{box-sizing:content-box;background:var(--accent2);color:var(--on-second);padding:4px 15px;border-radius:20px;margin-top:-4px;margin-bottom:-4px}
/* 09 — solid fills, no gradients, no shadows */
#webbr-live-preview .flat .lp-brand{color:var(--accent)}
#webbr-live-preview .flat h2{font-size:35px;font-weight:600;letter-spacing:-1px}
#webbr-live-preview .flat .lp-service{background:var(--tint);border:0;border-radius:5px}
#webbr-live-preview .flat .lp-feature{background:var(--accent2);color:var(--on-second);border:0;border-radius:5px}
#webbr-live-preview .flat .lp-feature p,#webbr-live-preview .flat .lp-feature-label{color:inherit}
#webbr-live-preview .flat .lp-badge{background:var(--surface);color:var(--ink);border-radius:3px}
#webbr-live-preview .flat .lp-cta{border-radius:5px}
#webbr-live-preview .flat .lp-bottomnav{border-top:1px solid var(--line)}
#webbr-live-preview .phone .lp-hero{padding-top:16px;padding-bottom:16px}
#webbr-live-preview .phone .lp-statusbar{height:30px}
#webbr-live-preview .phone .lp-brand{height:44px}
#webbr-live-preview .phone .lp-service{height:80px}
#webbr-live-preview .phone .lp-bottomnav{min-height:43px}
@media(max-width:560px){#webbr-live-preview .pair{grid-template-columns:1fr;gap:22px}}

#webbr-live-preview{display:none;min-width:0;width:100%;max-width:380px;justify-self:center;align-self:start;color:var(--wg-text);font-family:Sora,sans-serif}
#proposal[data-flow="questions"] #webbr-live-preview{display:block}
#proposal[data-flow="questions"] .wp-main{grid-template-columns:minmax(0,640px) minmax(250px,1fr);gap:clamp(28px,4vw,70px)}
#webbr-live-preview .preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#webbr-live-preview .preview-title{font-size:12px;line-height:1.5;margin:0;color:var(--wg-muted)}
#webbr-live-preview .preview-mode{display:flex;padding:3px;border-radius:30px;border:1px solid var(--wg-line)}
#webbr-live-preview button{font:500 11px Sora,sans-serif;cursor:pointer;border:1px solid transparent;padding:7px 10px;background:none;color:var(--wg-muted);border-radius:24px}
#webbr-live-preview button[aria-pressed="true"]{color:var(--wg-brand);background:color-mix(in srgb,var(--wg-brand) 10%,transparent);border-color:color-mix(in srgb,var(--wg-brand) 30%,transparent)}
#webbr-live-preview .pair{display:block;max-width:none}
#webbr-live-preview .fit{max-width:272px}
#webbr-live-preview .palette-options{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:10px}
#webbr-live-preview .palette-options:empty{display:none}
#webbr-live-preview .preview-note{font-size:11px;line-height:1.6;color:var(--wg-muted);text-align:center;margin:10px auto 0;max-width:300px}
#webbr-live-preview .palette-label{font-size:10px;line-height:1.5;color:var(--wg-muted);text-align:center;margin:8px 0 0}
@media(max-width:900px){#proposal[data-flow="questions"] .wp-main{grid-template-columns:minmax(0,1fr)}#webbr-live-preview{margin:15px auto 0;max-width:380px}}

/* The question layout reserves this column, but the preview stays invisible
   until the shared widget has completed its transformation. */
#webbr-live-preview{visibility:hidden;opacity:0;pointer-events:none}
#proposal[data-preview-ready="true"] #webbr-live-preview{visibility:visible;opacity:1;pointer-events:auto}
#webbr-live-preview .phone{height:680px}
#webbr-live-preview .fit{max-width:304px}
#webbr-live-preview .preview-top{height:38px;margin-bottom:8px}
#webbr-live-preview .preview-title{max-width:190px}
#webbr-live-preview .palette-options,#webbr-live-preview .palette-options:empty{display:flex;height:44px;margin-top:8px;flex-wrap:nowrap;align-items:center}
#webbr-live-preview .palette-options button{flex:1;min-width:0;max-width:125px;padding:5px 6px;font-size:10px;line-height:1.35;min-height:34px}
#webbr-live-preview .palette-label{display:none}
#webbr-live-preview .preview-note{height:32px;margin-top:4px;line-height:1.45}
#webbr-live-preview .preview-ghost{pointer-events:none;z-index:3}