/* Build Studio — scoped to the product shell; generated sites keep their own design. */
.build-product {
 --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --bg:#101924;--bg2:#172433;--card:#1d2e40;--card2:#2b4159;
 --line:#8196ae;--line2:#334b63;--line-h:#ffe447;
 --ink:#f5f5ed;--mut:#c4d3e3;--mut2:#a8bdd2;
 --accent:#ffe447;--accent-ink:#111;--halo:rgba(255,228,71,.12);
 --tint:rgba(255,255,255,.04);--hdr:#101924;--pri-bg:#ffe447;--pri-ink:#111;
 --blue:#8bc2ff;--teal:#96e6bf;--glow:255,228,71;--action:#ffe447;
 --edge:#080d14;--paper:#dcebff;--yellow:#ffe447;--cobalt:#2359ed;
 font-family:var(--font-display);background:var(--bg);color:var(--ink);
 -webkit-tap-highlight-color:transparent;isolation:isolate;
}
html[data-theme="light"] .build-product {
 --bg:#dcebff;--bg2:#edf5ff;--card:#fffef7;--card2:#c9ddf5;
 --line:#161a20;--line2:#a8c0dc;--line-h:#2359ed;
 --ink:#101114;--mut:#3b4e65;--mut2:#50647b;
 --accent:#2359ed;--accent-ink:#fff;--halo:rgba(35,89,237,.1);
 --tint:rgba(255,255,255,.25);--hdr:#dcebff;--pri-bg:#2359ed;--pri-ink:#fff;
 --blue:#2359ed;--teal:#12694a;--action:#2359ed;
}
.build-product::before{content:none}
.build-product .app-shell{display:flex;flex-direction:column}
.build-product .app-main{margin:0;width:100%}
.build-product .app-topbar {
 padding:16px 32px;min-height:80px;height:auto;gap:12px;flex-shrink:0;position:relative;
 background:var(--hdr);border-bottom:1px solid var(--line2);width:100%;margin:0;
}
.build-product .topbar-brand{display:inline-flex;align-items:center;margin-right:auto;gap:12px;min-height:44px;white-space:nowrap}
.build-product .brand-mark{display:inline-flex;color:var(--accent)}
.build-product .brand-mark svg{width:28px;height:28px;display:block}
.build-product .brand-word{display:none}
.build-product .brand-divider{display:none}
.build-product .brand-product{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-1.2px;color:var(--ink)}
.build-product .theme-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--mut)}
.build-product .topbar-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;font-family:inherit;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;border-radius:100px}
.build-product .topbar-btn-solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.build-product .topbar-btn-solid:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.build-product .app-content{padding-bottom:0}
.build-product .app-shell:has(.pf-site){height:100dvh;min-height:0;overflow:hidden}
.build-product .app-main:has(>.pf-site){min-height:0}
.build-product .app-main:has(>.pf-site)>.app-content{display:none}
.build-product .build-workspace{display:flex;align-items:flex-start;min-height:calc(100dvh - 180px);padding:clamp(40px,9vh,96px) 24px 64px}
.build-product .build-workspace>.wrap{width:100%;max-width:800px;padding:0;margin:0 auto}
.build-product #flow{scroll-margin-top:24px}
.build-product .pf{max-width:none}
.build-product .pf-card{background:transparent;border:0;border-radius:0;padding:0}
.build-product .pf-body{min-height:0;max-height:none;overflow:visible;mask-image:none!important;-webkit-mask-image:none!important}
.build-product .pf-step :is(h1,h4) {
 margin:0 0 20px;font-family:var(--font-display);font-size:clamp(36px,5.5vw,64px);
 font-weight:700;letter-spacing:-.055em;line-height:1.08;text-wrap:balance;color:var(--ink);
}
.build-product .pf-step h1::before {
 content:"YOUR IDEAS. YOUR SPACE.";display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
 font-weight:500;line-height:1.5;color:var(--teal);margin-bottom:24px;
}
.build-product .bc-hint{max-width:540px;margin-bottom:32px;font-size:17px;line-height:1.7;color:var(--mut)}
.build-product .pf-form{gap:16px}
.build-product .pf-field-label{font-size:13px;font-weight:600;letter-spacing:0;color:var(--mut);margin-bottom:10px}
.build-product .pf-field:has(textarea[data-field="brief"])>.pf-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.pf-input-wrap{display:block;position:relative}
.build-product .pf-field textarea[data-field="brief"] {
 display:block;width:100%;min-height:208px;padding:24px 24px 82px;
 font-family:inherit;font-size:18px;line-height:1.65;background:var(--card);
 color:var(--ink);border:1px solid transparent;border-radius:24px;resize:vertical;
 background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,var(--accent),var(--blue),var(--teal)) border-box;
 box-shadow:0 8px 36px rgba(0,0,0,.045);-webkit-appearance:none;appearance:none;
}
.build-product .pf-field textarea::placeholder{color:var(--mut2);opacity:1}
.build-product .pf-input-wrap:focus-within{border-radius:24px;box-shadow:0 0 0 3px var(--halo)}
.build-product .pf-field textarea[data-field="brief"]:focus-visible{outline:2px solid var(--line-h);outline-offset:2px}
.build-product .pf-send-inline {
 position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;justify-content:center;
 gap:10px;width:auto;min-width:100px;min-height:48px;padding:0 20px;margin:0;border-radius:100px;
}
.build-product .bc-next{background:var(--action);color:var(--accent-ink);font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;min-height:48px;border:0;box-shadow:none;transition:background .18s ease-out,transform .18s ease-out}
.build-product .bc-next:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06)}
.build-product .bc-next:disabled{background:var(--card2);color:var(--mut2);box-shadow:none;opacity:1}
.build-product .pf-send-inline svg{width:18px;height:18px}
.pf-voice{position:absolute;left:16px;bottom:16px;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pf-voice svg{width:20px;height:20px}
.pf-voice:hover{color:var(--ink);background:var(--tint)}
.pf-voice.is-recording{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pf-voice.is-unavailable{opacity:.65}
.pf-voice-status{display:block;font-size:12px;line-height:1.5;color:var(--mut);margin-top:8px}
.pf-voice-status:empty{display:none}
.pf-voice-status.is-error{color:var(--red)}
.build-product .pf-field input{min-height:52px;padding:14px 16px;font:inherit;font-size:16px;appearance:none;border-radius:12px;background:var(--card)}
.build-product .pf-foot{margin-top:24px}
.build-product :is(.pf-bar,.bc-steps,.bc-stepno)[hidden]{display:none}
.build-product .pf-extra{margin:0;padding:0;border:0;gap:12px}
.build-product .pf-extra-h{gap:8px}
.build-product .pf-extra-h b{display:none}
.build-product .pf-extra-h small{font-size:12px;color:var(--mut)}
.build-product .pf-attach{gap:8px}
.build-product .pf-attach-btn{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;font-size:12px;background:var(--tint);color:var(--mut)}
.build-product .pf-attach-btn:hover{background:var(--card2);color:var(--ink)}
.build-product .pf-field-hint:empty{display:none}
.pf-settings{border-top:1px solid var(--line2);font-size:13px;color:var(--mut)}
.pf-settings>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;list-style:none;gap:12px;font-weight:500}
.pf-settings>summary::-webkit-details-marker{display:none}
.pf-settings>summary::after{content:"+";font-size:20px;font-weight:400}
.pf-settings[open]>summary::after{content:"−"}
.pf-settings-body{padding:8px 0 20px;display:flex;flex-direction:column;gap:16px}
.build-product .pf-settings-body .pf-extra-h b{display:block}
.build-product .pf-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.build-product .pf-model{width:100%;min-width:0;min-height:52px;border-radius:12px}
.build-product .pf-model.on{background:var(--halo);border-color:var(--line-h)}
.build-product .pf-switch{min-height:44px;padding:8px 0}
.build-product .pf-switch input{margin-top:4px}
.pf-examples{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.pf-examples-label{font-size:11px;color:var(--mut2)}
.pf-example-row{display:flex;flex-wrap:wrap;gap:8px}
.pf-example{min-height:44px;padding:8px 16px;border:1px solid var(--line2);border-radius:100px;background:transparent;color:var(--mut);font:inherit;font-size:12px;cursor:pointer;transition:background .18s ease-out,border-color .18s ease-out}
.pf-example::after{content:"↗";margin-left:16px;color:var(--mut2)}
.pf-example:hover{border-color:var(--line-h);background:var(--card)}
.build-projects{margin:0 0 32px;padding:20px;border:1px solid var(--line2);border-radius:20px;background:var(--tint)}
.build-projects[hidden]{display:none}
.build-projects-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:13px;font-weight:600}
.build-projects-head small{color:var(--mut);font-weight:400}
.build-projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.build-project-card{min-width:0;padding:16px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.build-project-card:hover{border-color:var(--line-h)}
.build-project-card b,.build-project-card span,.build-project-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-project-card b{font-size:13px}.build-project-card span{margin-top:8px;font-size:12px;color:var(--mut)}.build-project-card small{margin-top:4px;font-size:11px;color:var(--mut2)}
.build-product .bp-chat{background:var(--bg2)}
.build-product :is(.bp-head,.bp-bar,.bp-tabs){background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}
.build-product .bp-msg.me{background:var(--card2);color:var(--ink);border-radius:16px 16px 4px 16px}
.build-product .bp-form{border-radius:18px}
.build-product .bp-form textarea{font-size:16px}
.build-product :is(.bp-send,.bp-undo,.bp-seg button){min-width:44px;min-height:44px}
.build-product .bp-manage-field :is(input,textarea,select){min-height:44px;font-size:16px;border-radius:12px}
.build-product .bp-form:focus-within{border-color:var(--line-h);box-shadow:0 0 0 3px var(--halo)}
.build-product :is(.bp-send,.bp-live){background:var(--action);color:var(--accent-ink)}
.build-product .bp-seg button.on,.build-product .bp-tabs button.on{background:var(--card2);color:var(--ink)}
.build-product .bp-live-menu{border-color:var(--line);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.build-footer{max-width:1064px;width:100%;margin:auto;padding:24px 32px max(24px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--mut2);font-size:11px;border-top:1px solid var(--line2)}
.build-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.build-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut)}
.build-product a:hover{color:var(--ink)}
.build-product :is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--line-h);outline-offset:4px}
.build-product :is(a,button,summary){touch-action:manipulation}
.build-skip{position:fixed;left:16px;top:-100px;z-index:1000;padding:12px 16px;background:var(--ink);color:var(--bg)}
.build-skip:focus{top:12px}
.build-start-note{font-size:13px;color:var(--mut);line-height:1.5}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
@media(max-width:680px){
 .build-product .app-topbar{padding:12px 16px;min-height:72px;gap:8px;flex-wrap:nowrap}
 .build-product .topbar-btn[data-build-pricing]{padding:0 12px}
 .build-product .topbar-btn{padding:0 14px;font-size:12px}
 .build-product .brand-product{font-size:23px}
 .build-product .build-workspace{min-height:0;padding:40px 20px 48px}
 .build-product .build-workspace>.wrap{max-width:none}
 .build-product .pf-step :is(h1,h4){font-size:38px;letter-spacing:-.05em}
 .build-product .pf-step h1::before{margin-bottom:20px;font-size:9px}
 .build-product .bc-hint{font-size:15px;margin-bottom:24px;line-height:1.65}
 .build-product .pf-field textarea[data-field="brief"]{font-size:16px;min-height:196px;padding:20px 20px 80px;border-radius:20px}
 .build-product .pf-input-wrap:focus-within{border-radius:20px}
 .build-product .pf-models{grid-template-columns:1fr}
 .pf-example-row{gap:6px}.pf-example{padding-inline:12px;font-size:11px}.pf-example::after{margin-left:8px}
 .build-projects-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.build-project-card{min-width:180px;scroll-snap-align:start}
 .build-footer{padding:20px;flex-direction:column;align-items:flex-start;gap:8px}
 .build-footer nav{gap:18px}
}
@media(max-width:420px){
 .build-product .topbar-btn-solid{font-size:0}
 .build-product .topbar-btn-solid::after{content:"Connect";font-size:12px}
 .build-product .topbar-btn-solid[data-account-logout]::after{content:"Log out"}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .build-product *,.build-product *::before,.build-product *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Creative playground: original browser-window art, print-like type and tactile controls. */
.build-product .app-topbar{background:var(--bg);border-bottom:0;padding:20px 36px;min-height:88px}
.build-product .brand-mark{color:var(--ink);border:2px solid var(--ink);border-radius:50%;width:46px;height:46px;align-items:center;justify-content:center;background:var(--card)}
.build-product .brand-product{font-size:29px;letter-spacing:-1.8px;font-weight:800}
.build-product .theme-toggle{border:2px solid var(--ink);color:var(--ink);background:var(--card)}
.build-product .topbar-btn{border:2px solid var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;min-height:46px}
.build-product .topbar-btn-ghost{background:var(--card);color:var(--ink)}
.build-product .topbar-btn-solid{background:var(--ink);color:var(--bg)}
.build-product .build-workspace{padding:32px 36px 64px;min-height:calc(100dvh - 190px)}
.build-product .build-workspace>.wrap{max-width:1320px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:center}
.build-product #flow{grid-column:1;grid-row:2;min-width:0;position:relative;z-index:1}
.build-projects{grid-column:1/-1;grid-row:1}
.build-art{grid-column:2;grid-row:2;align-self:center;min-width:0;pointer-events:none}
.build-art img{width:100%;height:auto;display:block;transform:rotate(2deg)}
.build-art-note{display:block;text-align:center;font:600 10px var(--mono);letter-spacing:.12em;color:var(--mut);margin-top:12px}
.build-product .pf-step h1{font-family:'Barlow Condensed','Plus Jakarta Sans',Impact,sans-serif;font-weight:900;font-size:clamp(76px,7.7vw,112px);line-height:.85;letter-spacing:-.035em;text-transform:uppercase;white-space:pre-line;color:var(--ink);text-wrap:initial;margin-bottom:24px}
.build-product .pf-step h1::before{content:"SMALL SPARK. BIG POSSIBILITIES.";font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.09em;line-height:1.5;color:var(--ink);margin-bottom:22px;white-space:normal}
.build-product .bc-hint{font-size:15px;line-height:1.65;margin-bottom:24px;max-width:450px}
.build-product .pf-field textarea[data-field="brief"]{background:var(--card);border:2px solid var(--ink);border-radius:22px;min-height:188px;padding:20px 20px 80px;font-size:16px;box-shadow:5px 6px 0 var(--edge)}
.build-product .pf-input-wrap:focus-within{box-shadow:none}
.build-product .pf-field textarea[data-field="brief"]:focus-visible{outline:3px solid var(--line-h);outline-offset:5px}
.build-product .bc-next{background:var(--action);border:2px solid var(--edge);color:var(--accent-ink);box-shadow:2px 3px 0 var(--edge);font-weight:800}
.build-product .bc-next:not(:disabled):hover{transform:translate(-1px,-2px);box-shadow:3px 5px 0 var(--edge);filter:none}
.build-product .bc-next:not(:disabled):active{transform:translate(1px,2px);box-shadow:none}
.build-product .bc-next:disabled{border:2px solid var(--line2);background:var(--card2);color:var(--mut2);box-shadow:none}
.build-product .pf-voice{border:2px solid var(--line);background:var(--bg2);color:var(--ink)}
.build-product .pf-attach-btn{border:1px solid var(--line);color:var(--ink);background:var(--tint)}
.build-product .pf-examples-label{color:var(--mut);font-size:11px}
.build-product .pf-example{border:1.5px solid #111;color:#111;background:#ffe447;font-weight:700;box-shadow:2px 2px 0 #111}
.build-product .pf-example:nth-child(2){background:#ffac93;color:#111;transform:rotate(-2deg)}
.build-product .pf-example:nth-child(3){background:#b9a0ff;color:#111;transform:rotate(2deg)}
.build-product .pf-example::after{color:inherit}
.build-product .pf-example:hover{background:#fff;transform:translateY(-2px)}
.build-product .bp-tabs button.on,.build-product .bp-seg button.on{background:var(--accent);color:var(--accent-ink)}
.build-product .bp-live,.build-product .bp-send{border:2px solid var(--edge)}
.build-product .bp-live-menu{border:2px solid var(--ink);border-radius:24px 24px 0 0}
.build-footer{max-width:1320px;border-top:1px solid var(--line2)}
@media(min-width:1500px){.build-art img{max-height:660px}}
@media(max-width:1000px) and (min-width:681px){
 .build-product .build-workspace>.wrap{column-gap:24px;grid-template-columns:1.15fr 1fr}
 .build-product .build-workspace{padding-inline:24px}
 .build-product .pf-step h1{font-size:76px}
 .build-art img{width:100%;max-width:100%;margin-left:0}
}
@media(max-width:680px){
 .build-product .app-topbar{padding:16px 20px;min-height:80px;gap:8px}
 .build-product .brand-mark{width:40px;height:40px}
 .build-product .brand-product{font-size:26px}
 .build-product .topbar-btn{min-height:44px;padding-inline:14px}
 .build-product .build-workspace{padding:12px 22px 40px}
 .build-product .build-workspace>.wrap{display:flex;flex-direction:column;gap:0}
 .build-product #flow{width:100%;order:1}
 .build-projects{order:0;width:100%}
 /* The mobile illustration shares the headline, not the bottom of the form. */
 .build-art{display:none}
 .build-product .pf-resume{min-height:44px;align-self:flex-start;margin-bottom:12px;font-size:12px}
 .build-product .pf-step h1{position:relative;padding:36px 44% 8px 0;min-height:160px}
 .build-product .pf-step h1::after{content:"";position:absolute;right:-8px;top:20px;width:48%;height:148px;background:url('/ai/build-playground.svg?v=1') center/contain no-repeat;pointer-events:none}
 .build-product .pf-step h1{font-size:clamp(40px,14vw,80px);line-height:.92;margin-bottom:12px}
 .build-product .pf-step h1::before{position:absolute;top:0;left:0;width:100%;font-size:9px;margin:0;letter-spacing:.08em}
 .build-product .bc-hint{font-size:14px;line-height:1.6;margin-bottom:16px}
 .build-product .pf-field textarea[data-field="brief"]{min-height:166px;padding:16px 18px 72px;line-height:1.5}
 .build-product .pf-examples{margin-top:0;gap:8px}
 .build-product .pf-example-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .build-product .pf-example{font-size:10px;padding-inline:6px}
 .build-product .pf-example::after{margin-left:6px}
 .build-footer{padding:20px 22px}
}
@media(max-width:360px){.build-product .brand-product{font-size:23px}.build-product .pf-example::after{display:none}}
@media(prefers-reduced-motion:reduce){.build-art img{transform:none}}

@media(max-width:420px){
 .build-product .topbar-btn-solid{font-size:0}
 .build-product .topbar-btn-solid::after{font-size:12px}
 .build-product .topbar-brand{gap:8px}
 /* T-1463: signing in stays reachable on a phone — it is the door to My sites and
    billing. The header's "Connect" label is for the old Google button, not this one. */
 .build-product .topbar-btn-solid[data-account-login]{font-size:12px}
 .build-product .topbar-btn-solid[data-account-login]::after{content:none}
}
@media(max-width:374px){.build-product .topbar-btn[data-build-pricing]{display:none}}