/* Website Builder card: the showcase image, travelled by a camera under a moving spotlight. */
.app-builder{background:linear-gradient(165deg,#f6ece3,#ead9cb)}
.app-builder .application-visual{inset:222px 0 78px}
.bf-film{position:absolute;inset:0 34px}
.bf-stage{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:linear-gradient(115deg,#ff6a1a 0%,#f7a46c 52%,#fbe6d4 100%);box-shadow:0 0 0 1px #5a2a0f1f,0 30px 56px -24px #6a2d0d88,0 10px 22px -12px #6a2d0d55;transform:translateZ(0);font-family:Inter,system-ui,sans-serif}
.bf-amb{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(18px) saturate(1.25);opacity:.9}
.bf-world{position:absolute;left:0;top:0;width:100%;aspect-ratio:2000/733;transform-origin:0 0;will-change:transform,opacity,filter;opacity:0;--inv:1}
.bf-img{display:block;width:100%;height:100%;user-select:none}
.bf-dim{position:absolute;inset:0;background:rgba(22,9,3,.78);opacity:0;pointer-events:none;--cx:50%;--cy:50%;--rx:60%;--ry:60%;-webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),transparent 52%,#000 100%);mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),transparent 52%,#000 100%)}

/* floating tags, in the camera's space but always the same on-screen size */
.bf-tag{position:absolute;left:0;top:0;transform:scale(var(--inv)) translateY(-100%);transform-origin:0 0;opacity:0;white-space:nowrap;padding:8px 13px 9px;border-radius:14px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#23150d;box-shadow:0 12px 26px -10px #3a180a99,0 0 0 1px #ffffffaa inset;transition:opacity .5s ease,margin .7s cubic-bezier(.16,1,.3,1);margin-top:10px;z-index:3}
.bf-tag.on{opacity:1;margin-top:0}
.bf-tag b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.bf-tag span{display:block;margin-top:3px;font-size:9.5px;color:#8a6a58}

/* Techy's cursor */
.bf-cursor{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:4;will-change:transform}
.bf-cursor-in{position:relative;transform:scale(var(--inv));transform-origin:0 0}
.bf-cursor svg{display:block;width:17px;height:23px;overflow:visible;filter:drop-shadow(0 3px 5px rgba(60,20,5,.4))}
.bf-cursor svg path{fill:#fff;stroke:#23150d;stroke-width:1.5;stroke-linejoin:round}
.bf-label{position:absolute;left:15px;top:19px;display:flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 4px;border-radius:99px;background:#23150d;color:#fff;font:600 10.5px/1 Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 18px -6px rgba(40,12,2,.6)}
.bf-label img{width:17px;height:17px;border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%}
.bf-label em{font-style:normal;font-size:9px;color:#ffb27a}

/* builder chrome (screen space) */
.bf-bar{position:absolute;left:12px;right:12px;top:12px;z-index:6;display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 14px;border-radius:99px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 28px -14px #3a180aaa,0 0 0 1px #ffffffb0 inset;opacity:0;transform:translateY(-8px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.bf-bar.on{opacity:1;transform:none}
.bf-site{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#23150d;white-space:nowrap}
.bf-site i{width:8px;height:8px;border-radius:50%;background:#f26a1b;box-shadow:0 0 0 3px #f26a1b33}
.bf-views{display:flex;align-items:center;gap:3px;margin:0 auto;padding:3px;border-radius:99px;background:#2a190f10}
.bf-views>span{width:30px;height:26px;border-radius:99px;display:grid;place-items:center;color:#8a6a58;transition:background .45s,color .45s,box-shadow .45s}
.bf-views svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bf-views>span.on{background:#fff;color:#23150d;box-shadow:0 3px 8px -2px #3a180a55}
.bf-views.is-all>span{background:#fff;color:#23150d}
.bf-viewlabel{position:relative;display:block;width:92px;height:14px;margin:0 8px 0 6px;font-style:normal;font-size:10px;font-weight:500;color:#6b4d3c}
.bf-viewlabel span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .4s}
.bf-views.is-m .v-m,.bf-views.is-d .v-d{opacity:1}
.bf-publish{position:relative;display:grid;height:28px;min-width:76px;border-radius:99px;background:#23150d;color:#fff;font-size:10.5px;font-weight:600;transition:background .5s}
.bf-publish>span{grid-area:1/1;display:grid;place-items:center;padding:0 13px;transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.bf-publish .p-on{opacity:0;transform:translateY(8px)}
.bf-publish.on{background:#1f9d4a}.bf-publish.on .p-off{opacity:0;transform:translateY(-8px)}.bf-publish.on .p-on{opacity:1;transform:none}

.bf-prompt{position:absolute;left:50%;top:50%;z-index:7;width:min(82%,500px);padding:18px 20px 16px;border-radius:24px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 30px 60px -24px #4a1c0acc,0 0 0 1px #ffffffb8 inset;opacity:0;transform:translate(-50%,-46%) scale(.96);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.bf-prompt.on{opacity:1;transform:translate(-50%,-50%)}
.bf-kicker{margin:0;font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:#a08373}
.bf-typed{margin:10px 0 0;min-height:48px;font-size:17px;line-height:1.28;letter-spacing:-.03em;color:#23150d}
.bf-typed::after{content:"";display:inline-block;width:1.5px;height:17px;margin-left:2px;vertical-align:-3px;background:#f26a1b;animation:bf-caret 1s steps(2,jump-none) infinite}
@keyframes bf-caret{50%{opacity:0}}
.bf-steps{display:flex;gap:6px;margin-top:12px}
.bf-steps span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px 0 6px;border-radius:99px;font-size:10px;font-weight:600;color:#a08373;background:#2a190f0d;transition:background .5s,color .5s}
.bf-steps u{text-decoration:none;width:13px;height:13px;border-radius:50%;background:#2a190f22;color:transparent;display:grid;place-items:center;font-size:8px;font-weight:800;transition:background .4s,color .4s}
.bf-steps span.on{background:#fdeadb;color:#9a3c0a}.bf-steps span.on u{background:#f26a1b;color:#fff}
.bf-agentline{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #2a190f12;font-size:10.5px;color:#6b4d3c}
.bf-agentline img{width:22px;height:22px;border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 1px #2a190f14}
.bf-prog{margin-left:auto;display:block;width:96px;height:4px;border-radius:4px;background:#2a190f14;overflow:hidden}
.bf-prog u{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#f26a1b,#ffa45e);transform-origin:0 50%;transform:scaleX(0)}

.bf-live{position:absolute;left:50%;bottom:16px;z-index:7;display:flex;align-items:center;gap:11px;padding:10px 18px 10px 11px;border-radius:99px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 40px -16px #3a180acc,0 0 0 1px #ffffffb8 inset;opacity:0;transform:translate(-50%,12px) scale(.96);transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.25,.4,1);white-space:nowrap}
.bf-live.on{opacity:1;transform:translate(-50%,0)}
.bf-live u{text-decoration:none;width:26px;height:26px;border-radius:50%;background:#1f9d4a;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.bf-live b{display:block;font-size:12px;font-weight:600;color:#23150d}.bf-live span{display:block;margin-top:2px;font-size:9.5px;color:#8a6a58}
.bf-static *,.bf-static *::before,.bf-static *::after{transition:none!important;animation:none!important}

@media(max-width:800px){
 .app-builder .application-visual{inset:204px 0 72px}
 .bf-film{inset:0 18px}.bf-stage{border-radius:18px}
 .bf-bar{left:8px;right:8px;top:8px;height:36px;padding-left:10px;gap:6px}
 .bf-viewlabel,.bf-site b{display:none}
 .bf-views>span{width:26px;height:24px}
 .bf-prompt{width:calc(100% - 28px);padding:14px 14px 12px}.bf-typed{font-size:14.5px;min-height:56px}
 .bf-steps{flex-wrap:wrap}.bf-live{max-width:calc(100% - 20px)}.bf-live span{display:none}
}
@media(prefers-reduced-motion:reduce){.bf-typed::after{animation:none}.bf-bar,.bf-prompt,.bf-tag,.bf-live{transition:none}}