.b-scene{--b-pane:color-mix(in srgb, var(--color-paper) 90%, var(--color-ink-dark))}@media (max-width:899.98px){.b-scene{--len:2.2!important}}.b-root{height:100%;color:var(--fg);flex-direction:column;gap:18px;padding:84px 0 68px;display:flex;position:relative}.b-dots{pointer-events:none;background-image:radial-gradient(circle,#02040724 1px,#0000 1.6px);background-size:24px 24px;position:absolute;inset:0}.b-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:24px;display:grid;position:relative}.b-h2{font-size:var(--text-section);margin:0}.b-sub-text{max-width:44ch;font-size:var(--text-lede);letter-spacing:-.01em;margin:0;line-height:1.3}.b-count{color:var(--fg-2);font-variant-numeric:tabular-nums;margin-top:10px;display:none}.b-root[data-mode=pin] .b-count{display:block}.b-editor{flex-direction:column;flex:auto;justify-content:center;min-height:0;display:flex;position:relative}.gwe{color:var(--fg);flex-direction:column;gap:10px;font-size:14px;display:flex}.gw-top{border:1px solid var(--line);background:#ffffff80;border-radius:6px;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:44px;padding:0 14px;display:grid}.gw-brand{letter-spacing:-.01em;align-items:center;gap:10px;font-weight:500;display:inline-flex}.gw-guide{color:var(--fg-2);align-items:center;gap:12px;display:none}.gwe[data-guide=on] .gw-guide{display:inline-flex}.gwe[data-gw-build="1"] .gw-guide{display:none}.gw-guide-step{color:var(--fg)}.gw-take{appearance:none;min-height:44px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0 6px;text-decoration:underline}.gw-status{color:var(--fg);font-variant-numeric:tabular-nums;justify-self:end}.gw-status-build,.gwe[data-gw-build="1"] [data-gw-status-live]{display:none}.gwe[data-gw-build="1"] .gw-status-build{display:inline}.gw-body{grid-template-columns:2fr 7fr 3fr;align-items:start;column-gap:16px;display:grid}.gw-pal,.gw-ins-wrap{min-width:0}.gw-pal-list{flex-direction:column;gap:8px;display:flex}.gw-chip{appearance:none;border:1px solid var(--line);min-height:44px;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background .2s var(--ease-out-expo), transform .2s var(--ease-out-expo);background:#ffffff73;border-radius:4px;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;display:flex}.gw-chip:hover{background:#ffffffe6}.gw-chip:active{transform:scale(.97)}.gw-chip[aria-disabled=true]{color:var(--fg-2);cursor:not-allowed;background:0 0}.gw-chip[aria-disabled=true]:active{transform:none}.gw-chip-name{align-items:center;gap:8px;display:inline-flex}.gw-plus{font-family:var(--font-mono);color:var(--accent)}.gw-chip-note{color:var(--fg-2)}.gwe-mid{flex-direction:column;gap:8px;min-width:0;display:flex}.gw-device .device-body{background:color-mix(in srgb, white 60%, var(--color-paper));color:var(--fg);border-color:var(--line);will-change:auto;transform:none!important}.gw-device .device-bar{border-bottom-color:var(--line);background:#02040709}.gw-device .device-dot{border-color:#0204074d}.gw-device .device-bar .mono{color:var(--fg-2)}.gw-pane{aspect-ratio:1200/640;overscroll-behavior:auto;scrollbar-width:thin;background:var(--b-pane);align-content:start;justify-items:center;min-height:200px;max-height:calc(100svh - 400px);display:grid;overflow:auto}.gw-canvas{--gw-ink:var(--color-ink-dark);--gw-ink2:#020407a8;--gw-line:#02040724;--gw-bg:color-mix(in srgb, white 70%, var(--color-paper));--gw-on:var(--color-ink-dark);--gw-font:var(--font-sans);background:var(--gw-bg);flex:none;position:relative;container-type:inline-size}.gw-canvas:not([data-zoomed]){max-width:100%}.gw-block{outline-offset:calc(-2px / var(--gw-z,1));cursor:pointer;outline:0 solid #0000;position:relative}.gw-block:hover{outline:calc(1px / var(--gw-z,1)) dashed #02040759}.gw-block[data-selected="1"],.gw-block:focus-visible{outline:calc(2px / var(--gw-z,1)) solid var(--color-blue)}.gw-block{-webkit-user-select:none;user-select:none}.gw-block [data-edit]{-webkit-user-select:text;user-select:text;cursor:text;outline-offset:calc(3px / var(--gw-z,1))}.gw-block [data-edit]:hover{background:hsl(var(--gw-hue) 90% 64% / .1)}.gw-block [data-edit]:focus{outline:calc(1.5px / var(--gw-z,1)) dashed var(--gw-acc);background:0 0}.gw-canvas[data-drag="1"]{cursor:grabbing;-webkit-user-select:none;user-select:none}.gw-slot{height:calc(3px / var(--gw-z,1));margin-top:calc(-1.5px / var(--gw-z,1));background:var(--color-blue);opacity:0;pointer-events:none;z-index:4;position:absolute;top:0;left:0;right:0}.gw-empty{text-align:center;color:var(--gw-ink2);font-size:max(12px, calc(var(--u,1cqw) * 2));padding:12cqw 0}.gw-end{height:calc(var(--u) * var(--end-h));padding:0 calc(var(--u) * var(--navpad));align-items:center;display:flex}.gw-end span{width:100%;height:calc(var(--u) * 7.5);padding:0 calc(var(--u) * 2.4);border:1px dashed var(--gw-line);border-radius:var(--gw-radius);font-size:max(12px, calc(var(--u) * var(--fs-s)));color:var(--gw-ink2);align-items:center;display:flex}@container (min-width:560px){.gw-end span{height:calc(var(--u) * 3.6)}}@container (min-width:1000px){.gw-end span{height:calc(var(--u) * 3)}}.gw-dock{align-items:center;gap:8px;min-height:44px;display:flex}.gw-dock-name{min-width:0;color:var(--fg-2);flex:auto}.gw-dock-hint{color:var(--fg-2)}.gw-grip,.gw-tool{appearance:none;border:1px solid var(--line);min-width:44px;min-height:44px;color:var(--fg);font:inherit;cursor:pointer;transition:background .2s var(--ease-out-expo), transform .2s var(--ease-out-expo);background:#ffffff73;border-radius:4px;padding:0 14px}.gw-tool:hover,.gw-grip:hover{background:#ffffffe6}.gw-tool:active{transform:scale(.96)}.gw-tool[aria-disabled=true]{color:var(--fg-2);cursor:not-allowed;background:0 0}.gw-grip{font-family:var(--font-mono);letter-spacing:.1em;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.gw-grip:active{cursor:grabbing}.gw-ins{border:1px solid var(--line);background:#ffffff80;border-radius:6px;flex-direction:column;gap:14px;padding:14px;display:flex}.gw-field{flex-direction:column;gap:2px;display:flex}.gw-label{color:var(--fg);justify-content:space-between;align-items:baseline;gap:8px;display:flex}.gw-label output{color:var(--fg-2)}.gw-range{appearance:none;cursor:pointer;touch-action:pan-y;overscroll-behavior:auto;background:0 0;width:100%;height:44px;margin:0}.gw-range::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:4px}.gw-range::-moz-range-track{background:var(--line);border-radius:2px;height:4px}.gw-range-hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,#3db8f5,#457af7,#755cf5,#c15ff1)}.gw-range-hue::-moz-range-track{background:linear-gradient(90deg,#3db8f5,#457af7,#755cf5,#c15ff1)}.gw-range::-webkit-slider-thumb{appearance:none;border:3px solid var(--color-paper);background:var(--color-ink-dark);box-sizing:border-box;border-radius:50%;width:20px;height:20px;margin-top:-8px}.gw-range::-moz-range-thumb{border:3px solid var(--color-paper);background:var(--color-ink-dark);box-sizing:border-box;border-radius:50%;width:20px;height:20px}.gw-bps{grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px;display:grid}.gw-bp{appearance:none;border:1px solid var(--line);min-height:44px;color:var(--fg);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:4px;font-size:12px}.gw-bp[aria-checked=true]{background:var(--color-ink-dark);color:var(--color-paper);border-color:var(--color-ink-dark)}.gw-export-wrap{display:block}.gw-export{appearance:none;background:var(--color-blue);width:100%;min-height:44px;color:var(--color-ink-dark);font:inherit;cursor:pointer;transition:transform .2s var(--ease-out-expo);border:0;border-radius:4px;font-weight:500}.gw-export:active{transform:scale(.97)}.b-wf-wrap{pointer-events:none;z-index:2;width:100%;display:none;position:absolute;top:0;left:0}.b-root[data-mode=pin] .gw-canvas[data-pristine="1"] .b-wf-wrap{display:block}.b-wf{width:100%;height:auto;display:none}.gw-canvas[data-bp="1280"] .b-wf[data-variant=wide]{aspect-ratio:1200/640;display:block}.gw-canvas[data-bp="375"] .b-wf[data-variant=tall]{aspect-ratio:320/432;display:block}.b-wf path{fill:none;stroke:var(--color-ink-dark);stroke-width:3px;stroke-linejoin:round}.b-wf[data-variant=tall] path{stroke-width:2px}.b-after{position:relative}.b-dock{padding-block:8px 24px;display:none}.b-tail{flex-direction:column;gap:12px;min-height:40svh;padding-block:40px 56px;display:flex}.b-echo{color:var(--fg);font-variant-numeric:tabular-nums;margin:0;font-size:13px}.b-tail-note{max-width:46ch;color:var(--fg-2);margin:0}@media (min-width:900px) and (max-height:820px){.b-root{gap:12px;padding-top:72px;padding-bottom:56px}.b-h2{font-size:clamp(2.25rem,4vw,3.5rem)}.b-sub-text{font-size:1rem}}@media (min-width:900px) and (not ((min-height:700px) and (hover:hover) and (pointer:fine))){.b-root{height:auto;padding-bottom:40px}.gw-body{grid-template-columns:1fr;row-gap:12px}.gw-pal-list{flex-flow:wrap}.gw-pane{max-height:none}}@media (max-width:899.98px){.b-root{gap:12px;padding-top:72px;padding-bottom:56px}.b-head{grid-template-columns:1fr;gap:8px}.b-sub-text{font-size:.9375rem}.b-count{margin-top:6px}.gw-body{grid-template-columns:1fr;align-items:stretch;row-gap:8px}.gw-top{display:none}.gw-pal-list{scrollbar-width:none;overscroll-behavior-x:contain;flex-direction:row;padding-bottom:2px;overflow-x:auto}.gw-chip{flex:none}.gw-chip-note,.gw-ins-wrap{display:none}.b-dock{display:block}.gw-bp:not([data-bp="375"]){display:none}.gw-bps{grid-template-columns:minmax(0,120px)}.gw-guide{display:none!important}.gw-pane{aspect-ratio:auto;height:clamp(300px,62svh,560px);max-height:none}.b-root[data-mode=pin] .b-editor,.b-root[data-mode=pin] .gwe,.b-root[data-mode=pin] .gw-body,.b-root[data-mode=pin] .gwe-mid,.b-root[data-mode=pin] .gw-device,.b-root[data-mode=pin] .gw-device .device-body,.b-root[data-mode=pin] .gw-device .device-body>div:last-child{flex-direction:column;flex:auto;min-height:0;display:flex}.b-root[data-mode=pin] .gw-pane{flex:auto;height:auto;min-height:0}}@media (prefers-reduced-motion:reduce){.gw-chip,.gw-tool,.gw-export{transition:none}}html:not(.motion-ok) .b-scene .scene-label{padding:14px var(--gutter) 0}#builder{--text-mono:.75rem}