.builder-overlay .builder-bar-wrap{background:transparent;border:0;box-shadow:none;display:flex;justify-content:center;gap:24px;padding:18px 24px calc(18px + env(safe-area-inset-bottom));pointer-events:none}
.builder-glass-tools{position:relative;display:flex;gap:12px;align-items:center;pointer-events:auto}
.glass-circle{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:linear-gradient(145deg,rgba(255,255,255,.83),rgba(239,242,247,.48));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 2px 2px #fff,0 6px 24px #17203329;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#242b34;transition:transform .2s,box-shadow .2s}
.glass-circle:hover{transform:translateY(-3px);box-shadow:inset 0 2px 2px #fff,0 10px 28px #17203338}
.glass-circle:focus-visible,.builder-options button:focus-visible{outline:3px solid #367eef;outline-offset:3px}
.glass-circle svg{width:29px;height:29px}
.builder-primary{height:64px;min-width:214px;padding:0 22px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:linear-gradient(145deg,#4c8bf5d9,#2662e0e8);box-shadow:inset 0 1px 1px #ffffff55,0 8px 26px #1c4ec455;color:#fff;font:700 15px/1 var(--body);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}.builder-primary:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px #ffffff55,0 12px 30px #1c4ec466}.builder-primary svg{width:22px;height:22px;color:#fff}.builder-primary:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.glass-circle[aria-expanded=true]> *{opacity:0}.glass-circle[aria-expanded=true]::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-70%) rotate(45deg)}
.palette-orb{width:32px;height:32px;border-radius:50%;background:conic-gradient(#e6d9cf 0 120deg,#aa9084 120deg 240deg,#70564b 240deg);box-shadow:inset 0 0 0 1px #0001}.font-orb{font-family:Georgia,serif;font-size:29px}
.builder-options{position:absolute;bottom:calc(100% + 16px);right:0;width:350px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--header-h,75px) - 125px);overflow:auto;padding:18px;border-radius:24px;background:linear-gradient(135deg,#ffffffdf,#edf1f5bf);border:1px solid #fffffff0;backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);box-shadow:inset 0 1px 0 white,0 16px 60px #17203333;color:#242b34;animation:options-in .2s ease-out}
.builder-options[hidden]{display:none}.builder-options h3{font-size:15px;margin:0 0 12px}.builder-options p{font-size:11px;text-align:center;margin:12px 0 0;color:#56606c}.builder-options-title{font-size:12px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#68727e;margin:2px 0 18px}.palette-tabs{display:flex;gap:3px;overflow-x:auto;margin-bottom:16px}.palette-tabs button{flex:1;border:0;border-radius:12px;padding:10px 7px;background:transparent;font-size:12px;color:#35404c;cursor:pointer}.palette-tabs button[aria-pressed=true]{background:#fff;box-shadow:0 2px 7px #0001}
.palette-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px}.palette-choice{flex:0 0 76px;border:1px solid #fff;background:#ffffff65;border-radius:16px;padding:8px;cursor:pointer;scroll-snap-align:start}.palette-choice>span{display:block;height:36px}.palette-choice>span:first-child{border-radius:9px 9px 0 0}.palette-choice>span:nth-child(3){border-radius:0 0 9px 9px}.palette-choice small{display:block;font-size:11px;margin-top:9px;color:#25303b}
.builder-choice-list{display:grid;gap:6px}.builder-choice-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;background:#ffffff60;border:1px solid transparent;border-radius:12px;padding:11px 13px;color:#242b34;text-align:left;cursor:pointer}.builder-choice-list button[aria-pressed=true]{border-color:#7b8c9e;background:#fff}.builder-choice-list small{font-size:10px;color:#626d79}.builder-choice-list span{font-size:24px}
.template-current{display:grid;gap:4px;padding:14px;border:1px solid #dce4ea;border-radius:14px;background:#fff;margin-bottom:14px}.template-current span,.template-current small{font-size:11px;color:#68727e}.template-current strong{font-size:18px;color:#242b34}.template-select-label{display:block;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#68727e}.builder-options select[data-layout-select]{display:block;width:100%;border:1px solid #cfd8e0;border-radius:10px;background:#fff;padding:12px;color:#242b34;font:inherit;font-size:13px}
.hero-palette-choice{width:100%;display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:14px;border:1px solid #ffffffb8;border-radius:15px;background:#ffffff70;color:#242b34;text-align:left;cursor:pointer;font-size:13px}.hero-palette-choice[aria-pressed=true]{border-color:#7b8c9e}.hero-palette-choice small{display:block;font-size:11px;color:#626d79;margin-top:2px}.hero-palette-swatches{display:flex;overflow:hidden;border-radius:9px;flex:none}.hero-palette-swatches i{width:19px;height:40px}
.designer-send{width:100%;border:0;padding:15px 20px;border-radius:15px;background:#12af52;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.builder-overlay .builder-segmented{background:#ffffffb8;backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 5px 22px #17203322}.builder-overlay #handoffStatus:not(:empty){position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:min(90vw,420px);background:#fffffff0;padding:14px;border-radius:12px;color:#25303b}
.designer-email{margin-top:8px;background:#2867e3}.designer-email:before{content:'✉';margin-right:8px}
@keyframes options-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.builder-overlay .builder-bar-wrap{padding:12px 12px calc(12px + env(safe-area-inset-bottom));justify-content:center}.builder-glass-tools{width:min(100%,390px);justify-content:center;gap:8px}.glass-circle{width:44px;height:44px}.glass-circle svg{width:22px;height:22px}.palette-orb{width:25px;height:25px}.font-orb{font-size:23px}.builder-primary{height:48px;min-width:0;width:min(43vw,168px);padding:0 14px;font-size:13px}.builder-primary svg{width:18px;height:18px}.builder-options{right:0;width:100%}}
@media(prefers-reduced-motion:reduce){.glass-circle,.builder-options{animation:none;transition:none}}

/* Double-buffered preview: a freshly rendered site sits over the visible one
   and fades in once painted, so full re-renders (template swipes) never
   flash white. Inset matches the frame's padding (the desktop phone bezel). */
.builder-phone-frame{position:relative}
.builder-phone-frame .preview-buffer{position:absolute;top:0;bottom:0;left:0;right:0;height:auto;opacity:0;transition:opacity .19s ease}
.builder-preview.mobile-view .builder-phone-frame .preview-buffer{top:14px;bottom:14px;left:14px;right:14px}
.builder-phone-frame .preview-buffer.is-in{opacity:1}
@media(max-width:820px){.builder-preview.mobile-view .builder-phone-frame .preview-buffer{top:0;bottom:0;left:0;right:0}}
@media(prefers-reduced-motion:reduce){.builder-phone-frame .preview-buffer{transition:none}}

/* Phones use the same four glass circles as desktop at the bottom; this swipe
   editor is parked (kept hidden) in case it comes back. */
.mobile-builder-actions{display:none!important}
@media(max-width:900px){
  .mobile-builder-bottom{position:fixed;z-index:63;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:auto}
  /* Bottom actions ghost out while the preview sits still so the site is easy
     to see, and come straight back on any scroll, swipe or tap. */
  .mobile-builder-bottom{transition:opacity .18s ease-out}
  .mobile-builder-bottom.is-idle{opacity:.4;transition:opacity .6s ease}
  .mobile-builder-bottom button,.mobile-send-choices button{height:48px;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:0 16px;font:700 12px/1 var(--body);white-space:nowrap;cursor:pointer;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 9px 25px rgba(6,18,43,.22)}
  .mobile-submit{width:calc(56vw - 16px);max-width:184px;flex:none;color:#fff;background:linear-gradient(135deg,#3b8cff,#2867e3);border-color:#79adff!important}
  /* Edit is pinned to the right edge (margin-left:auto) and its active width
     is whatever is left beside Submit, so it only ever grows leftwards and
     never pushes past the screen edge on narrow phones. */
  .mobile-edit{width:78px;flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:#fff;background:rgba(8,21,47,.62);transition:width .42s cubic-bezier(.32,.72,0,1),background .3s,border-color .3s}
  .mobile-edit span{font-size:17px;transition:transform .42s cubic-bezier(.32,.72,0,1)}.mobile-edit b{font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-edit.label-swap b,.mobile-edit.label-swap span{animation:mobile-label-in .32s ease-out}
  .builder-overlay.mobile-editor-active .mobile-edit{width:min(184px,calc(100vw - 38px - min(56vw - 16px,184px)));background:rgba(8,21,47,.78);border-color:rgba(255,255,255,.54)}
  .mobile-send-choices{position:fixed;z-index:64;left:14px;bottom:calc(70px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:auto;animation:mobile-send-in .22s ease-out}
  .mobile-send-choices[hidden]{display:none}.mobile-send-choices button{width:calc(56vw - 16px);max-width:184px;color:#fff;background:rgba(8,21,47,.78)}
  .mobile-send-choices button:first-child{background:rgba(37,211,102,.9)}.mobile-send-choices button:first-child:before{content:'◉';margin-right:8px}.mobile-send-choices button:last-child:before{content:'✉';margin-right:8px}
  /* The rail is never display:none (that would kill the slide-in); it just
     stops taking touches while closed and its tabs sit off-screen. */
  .mobile-swipe-rail{position:fixed;z-index:62;top:calc(var(--header-h,75px) + 18px);bottom:76px;left:0;width:39px;display:flex;flex-direction:column;justify-content:space-between;gap:9px;pointer-events:none;transition:top .42s cubic-bezier(.32,.72,0,1)}
  .builder-overlay.mobile-editor-active .mobile-swipe-rail{pointer-events:auto}
  .mobile-swipe-rail button{position:relative;flex:1;width:39px;border:1px solid rgba(255,255,255,.36);border-left:0;border-radius:0 14px 14px 0;background:rgba(236,244,255,.32);box-shadow:6px 0 20px rgba(0,0,0,.09),inset -1px 0 rgba(255,255,255,.18);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);color:#102039;display:grid;place-items:center;padding:0 0 0 9px;font:700 10px/1.95 var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translate3d(-110%,0,0);will-change:transform;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s ease,background .25s,color .25s}
  .mobile-swipe-rail button:nth-child(2){transition-delay:.04s,.04s,0s,0s}.mobile-swipe-rail button:nth-child(3){transition-delay:.08s,.08s,0s,0s}
  .mobile-swipe-rail button span{text-align:center}.builder-overlay.mobile-editor-active .mobile-swipe-rail button{opacity:1;transform:translate3d(0,0,0)}
  /* Progress reads as a segmented bar: slim rectangles stacked with hairline
     gaps, the current one darker and a touch wider. */
  .swipe-dots{position:absolute;left:5px;top:10px;bottom:10px;width:4px;display:flex;flex-direction:column;gap:1.5px;align-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
  .builder-overlay.mobile-editor-active .swipe-dots{opacity:1}
  .swipe-dots i{width:2px;flex:1 1 0;min-height:2px;border-radius:1px;background:rgba(0,0,0,.14);transition:background .2s,width .2s cubic-bezier(.32,.72,0,1)}
  .swipe-dots i.active{width:4px;background:rgba(0,0,0,.66)}
  /* Full-width gesture bands mirror the three labels at the left. They sit
     over the preview only while edit mode is active, so ordinary browsing and
     scrolling stay native the rest of the time. */
  .mobile-swipe-zones{position:fixed;z-index:61;top:var(--header-h,75px);bottom:76px;left:0;right:0;display:grid;grid-template-rows:repeat(3,1fr);pointer-events:auto}
  .mobile-swipe-zones[hidden]{display:none}.mobile-swipe-zones button{border:0;background:transparent;touch-action:none;cursor:ew-resize}
  .mobile-swipe-zones button:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:-5px}
  .mobile-swipe-rail{z-index:62}
  /* Edit mode hides the app's own header so the live preview reads as a
     real full-screen phone, not a page inside a page. */
  body:has(#builderOverlay.mobile-editor-active) .top{transform:translateY(-100%)}
  /* Header and preview move on the same curve and duration so the preview
     glides up with the header instead of snapping to full screen. */
  .top{transition:transform .42s cubic-bezier(.32,.72,0,1)}
  .builder-overlay .builder-preview{transition:top .42s cubic-bezier(.32,.72,0,1),padding .3s var(--qa-ease),bottom .2s var(--qa-ease)}
  .builder-overlay.mobile-editor-active .builder-preview{top:0}
  .builder-overlay.mobile-editor-active .mobile-swipe-rail{top:18px}
  .builder-overlay.mobile-editor-active .mobile-swipe-zones{top:0}
  @keyframes mobile-label-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @keyframes mobile-send-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.mobile-edit,.mobile-swipe-rail button,.mobile-swipe-rail,.top,.builder-overlay .builder-preview{transition:none}.mobile-send-choices,.mobile-edit.label-swap b,.mobile-edit.label-swap span{animation:none}}