/* ============================================================================
   BARBAROS — lp-result.css (roots #lfResult and #lfComposer, namespace lf-) — the result screen of the sales-page
   generator (lp-result.js): A and B side by side as the visitor gets them, a quiet room around them, and one small
   AI composer (Sidekick family: gyroscope orb, edge light, spring) that comes to whatever the merchant picks.
   #lfResult sits in #lfRoot (lp-forge); #lfComposer is a child of <body> (position: fixed must not be caught by a
   transformed panel), so it carries its own tokens. Layout follows the width of the result (container lfres);
   the composer follows the viewport.
   Collision list (the only !important here): headings, buttons, the textarea — buld-theme.css forces font-family,
   letter-spacing, colour, borders, backgrounds and focus rings on h2, button, textarea with !important; [hidden]
   must win over the display of the element it hides; reduced motion.
   ============================================================================ */

/* ---------- tokens ---------- */
html[data-buld-theme] #lfResult, html[data-buld-theme] #lfComposer {
    --lf-c1: var(--buld-cta);
    --lf-c2: color-mix(in srgb, var(--buld-cta) 55%, var(--buld-success));
    --lf-c3: color-mix(in srgb, var(--buld-cta) 62%, var(--buld-danger));
    --lf-line: color-mix(in srgb, var(--buld-ink-1) 9%, transparent);
    --lf-line-2: color-mix(in srgb, var(--buld-ink-1) 15%, transparent);
    --lf-muted: color-mix(in srgb, var(--buld-ink-1) 4.5%, transparent);
    --lf-face: var(--buld-elevated-2);
    --lf-shade: var(--buld-ink-1);
    --lf-glow: var(--buld-elevated-2);
    --lf-on-accent: var(--buld-elevated-2);
    --lf-ease: cubic-bezier(.2, .8, .2, 1);
    --lf-spring: cubic-bezier(.32, .72, 0, 1);
    --lf-glide: cubic-bezier(.32, .72, 0, 1);
    --lf-fd: "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, var(--buld-font-display, system-ui), sans-serif;
    --lf-ft: "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, var(--buld-font-text, system-ui), sans-serif;
    color: var(--buld-ink-1); font-family: var(--lf-ft); font-size: 14px; line-height: 1.47; letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased; text-align: start;
}
@supports (transition-timing-function: linear(0, 1)) {
    html[data-buld-theme] #lfResult, html[data-buld-theme] #lfComposer {
        /* a real spring: ~5 % overshoot, settles quietly */
        --lf-spring: linear(0, 0.0062, 0.0245 1.7%, 0.0964 3.6%, 0.2118 5.7%, 0.4386 9.3%, 0.6305 12.6%, 0.7795 15.8%, 0.8909 19.1%, 0.9673 22.4%, 1.0168 25.8%, 1.0445 29.3%, 1.0533 32.3%, 1.0518 35.4%, 1.0412 39.6%, 1.0183 46.7%, 1.0026 53.8%, 0.9963 61.4%, 0.9967 74.8%, 1);
        /* the same spring, damped: long flights (bottom → beside a part) settle with ~2 % overshoot */
        --lf-glide: linear(0, 0.0099, 0.0393 2.2%, 0.1532 4.8%, 0.3376 7.9%, 0.5464 11.6%, 0.7166 15.4%, 0.8448 19.5%, 0.9311 23.8%, 0.9817 28.3%, 1.0097 33.4%, 1.0209 38.4%, 1.0218 43.4%, 1.0127 52.8%, 1.0029 63.8%, 0.999 76.5%, 1);
    }
}
html[data-buld-theme][data-buld-theme="dark"] #lfResult, html[data-buld-theme][data-buld-theme="dark"] #lfComposer {
    --lf-face: var(--buld-surface-2);
    --lf-line: color-mix(in srgb, var(--buld-ink-1) 12%, transparent);
    --lf-line-2: color-mix(in srgb, var(--buld-ink-1) 19%, transparent);
    --lf-muted: color-mix(in srgb, var(--buld-ink-1) 6%, transparent);
    --lf-glow: color-mix(in srgb, var(--buld-ink-1) 7%, transparent);
    --lf-shade: var(--buld-page);
    --lf-on-accent: var(--buld-ink-1);
}
@supports (color: oklch(from red l c h)) {
    html[data-buld-theme][data-buld-theme="dark"] #lfResult, html[data-buld-theme][data-buld-theme="dark"] #lfComposer { --lf-shade: oklch(from var(--buld-page) calc(l * .3) c h); }
}
html[data-buld-theme] #lfResult *, html[data-buld-theme] #lfResult *::before, html[data-buld-theme] #lfResult *::after,
html[data-buld-theme] #lfComposer *, html[data-buld-theme] #lfComposer *::before, html[data-buld-theme] #lfComposer *::after { box-sizing: border-box; }
html[data-buld-theme] #lfResult [hidden], html[data-buld-theme] #lfComposer [hidden] { display: none !important; }
html[data-buld-theme] #lfResult p:where(:not(#lfFormSlot *)), html[data-buld-theme] #lfComposer p { margin: 0; }
html[data-buld-theme] #lfResult :focus-visible, html[data-buld-theme] #lfComposer :focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 3px; }
/* the resets stop at #lfFormSlot: the next step is another module's, with its own buttons (:where keeps them weightless) */
html[data-buld-theme] #lfResult button:where(:not(#lfFormSlot *)), html[data-buld-theme] #lfComposer button, html[data-buld-theme] #lfComposer textarea { font-family: inherit !important; letter-spacing: inherit !important; }
html[data-buld-theme] #lfResult button:where(:not(#lfFormSlot *)), html[data-buld-theme] #lfComposer button {
    font-size: 13px; color: inherit; cursor: pointer; margin: 0; padding: 0; border: 0; background: none; min-width: 0; min-height: 0;
    text-transform: none; text-shadow: none; -webkit-appearance: none; appearance: none; line-height: 1;
}
html[data-buld-theme] #lfResult button:disabled, html[data-buld-theme] #lfComposer button:disabled { cursor: default; }
html[data-buld-theme] #lfResult .lf-act:disabled, html[data-buld-theme] #lfResult .lf-ab button:disabled { opacity: .45; }
/* scrolled to, a version stops below the platform's sticky top bar (--lf-bar: lp-result.js barToMargin) */
html[data-buld-theme] #lfResult .lf-device { scroll-margin-top: calc(var(--lf-bar, 0px) + 10px); }
html[data-buld-theme] #lfResult .lf-ic, html[data-buld-theme] #lfComposer .lf-ic { flex: none; display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-buld-theme] #lfResult .lf-n, html[data-buld-theme] #lfComposer .lf-n { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
html[data-buld-theme] #lfResult .lf-sr, html[data-buld-theme] #lfComposer .lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-buld-theme] #lfResult .lf-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--buld-ink-4); }

/* ---------- the stage: the width it is given decides the layout (container lfres) ---------- */
html[data-buld-theme] #lfRoot > .lf-stage { display: block; margin: 0; }
html[data-buld-theme] #lfRoot > .lf-stage[hidden] { display: none; }
html[data-buld-theme] #lfResult { position: relative; isolation: isolate; display: block; container: lfres / inline-size; padding: 0 0 40px; }
html[data-buld-theme] #lfResult .lf-in {
    --lf-scr-w: 390px;
    --lf-dev-w: var(--lf-scr-w);
    --lf-dev-h: clamp(540px, calc(100vh - 250px), 880px);
    --lf-aisle: clamp(300px, calc(100cqi - 2 * var(--lf-dev-w) - 24px), 384px);
    --lf-room-w: calc(var(--lf-dev-w) * 2 + var(--lf-aisle));
    position: relative; padding: 0 16px;
}
html[data-buld-theme] #lfResult[data-n="1"] .lf-in { --lf-room-w: min(100%, 860px); }

/* ---------- the header: product · published · the one link; then what to do ---------- */
html[data-buld-theme] #lfResult .lf-head { max-width: var(--lf-room-w); margin: 0 auto; padding: 6px 0 16px; border-bottom: 1px solid var(--lf-line); display: grid; gap: 10px; }
html[data-buld-theme] #lfResult .lf-head-r { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
html[data-buld-theme] #lfResult .lf-head-s { display: flex; align-items: baseline; gap: 6px 14px; min-width: 0; flex-wrap: wrap; }
html[data-buld-theme] #lfResult h2.lf-prod {
    margin: 0 !important; font-family: var(--lf-fd) !important; font-size: 24px; font-weight: 600 !important; line-height: 1.2 !important;
    letter-spacing: -0.022em !important; color: var(--buld-ink-1) !important; overflow-wrap: anywhere;
}
html[data-buld-theme] #lfResult .lf-pub { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--buld-ink-3); white-space: nowrap; }
html[data-buld-theme] #lfResult .lf-pub i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--buld-success); }
html[data-buld-theme] #lfResult .lf-pub i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--buld-success); opacity: 0; animation: lf-breathe 2.8s ease-out infinite; }
@keyframes lf-breathe { 0% { transform: scale(.4); opacity: .45; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
html[data-buld-theme] #lfResult .lf-url-k { margin-inline-start: auto; margin-inline-end: -6px; font-size: 12.5px; color: var(--buld-ink-4); white-space: nowrap; }
html[data-buld-theme] #lfResult .lf-url {
    display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; height: 38px; padding: 0 4px 0 14px; border-radius: 999px;
    background: var(--lf-face); box-shadow: 0 0 0 1px var(--lf-line), 0 1px 2px color-mix(in srgb, var(--lf-shade) 5%, transparent);
}
html[data-buld-theme] #lfResult .lf-url > .lf-ic { width: 15px; height: 15px; color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-url-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--buld-ink-1); direction: ltr; font-variant-numeric: tabular-nums; }
html[data-buld-theme] #lfResult .lf-url-t span { color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-copy {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 11px; border-radius: 999px;
    background: var(--buld-ink-1); color: var(--buld-page); font-size: 13px; font-weight: 600; transition: transform .2s var(--lf-ease), background .2s;
}
html[data-buld-theme] #lfResult .lf-copy .lf-ic { width: 14px; height: 14px; }
@media (hover: hover) { html[data-buld-theme] #lfResult .lf-copy:hover { transform: scale(1.03); } }
html[data-buld-theme] #lfResult .lf-copy:active { transform: scale(.97); }
html[data-buld-theme] #lfResult .lf-copy.lf-copied { background: var(--buld-success); color: var(--lf-on-accent); }
html[data-buld-theme] #lfResult .lf-lead { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
html[data-buld-theme] #lfResult .lf-lead p { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--buld-ink-3); }
html[data-buld-theme] #lfResult .lf-lead p .lf-ic { width: 15px; height: 15px; color: var(--lf-c1); }
html[data-buld-theme] #lfResult .lf-lead-a { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-buld-theme] #lfResult .lf-act {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
    color: var(--buld-ink-1); text-decoration: none; background: color-mix(in srgb, var(--lf-face) 70%, transparent); white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--lf-line-2); transition: background .15s, box-shadow .15s, transform .2s var(--lf-ease);
}
html[data-buld-theme] #lfResult .lf-act .lf-ic { width: 13px; height: 13px; stroke-width: 2; color: var(--buld-ink-3); }
@media (hover: hover) { html[data-buld-theme] #lfResult .lf-act:hover { background: var(--lf-face); box-shadow: inset 0 0 0 1px var(--lf-line-2), 0 2px 6px -2px color-mix(in srgb, var(--lf-shade) 18%, transparent); } }
html[data-buld-theme] #lfResult .lf-act:active { transform: scale(.97); }

/* ---------- the room: A · the aisle · B ---------- */
html[data-buld-theme] #lfResult .lf-room {
    position: relative; display: grid; justify-content: center; align-items: start;
    grid-template-columns: var(--lf-dev-w) var(--lf-aisle) var(--lf-dev-w); grid-template-areas: "a wall b";
    padding-top: 22px;
}
html[data-buld-theme] #lfResult[data-n="1"] .lf-room { grid-template-columns: var(--lf-dev-w); grid-template-areas: "a"; }
/* the light: a soft wash behind each version, a cooler floor below */
html[data-buld-theme] #lfResult .lf-room::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: -20px; width: min(1400px, 100%); height: calc(100% + 40px); transform: translateX(-50%); pointer-events: none;
    background:
        radial-gradient(32% 46% at 24% 44%, var(--lf-glow), transparent 70%),
        radial-gradient(32% 46% at 76% 44%, var(--lf-glow), transparent 70%),
        radial-gradient(56% 16% at 50% 86%, color-mix(in srgb, var(--lf-shade) 4%, transparent), transparent 72%);
}
html[data-buld-theme] #lfResult .lf-plinth { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: lf-rise .8s var(--lf-ease) backwards; }
html[data-buld-theme] #lfResult .lf-plinth[data-v="A"] { grid-area: a; }
html[data-buld-theme] #lfResult .lf-plinth[data-v="B"] { grid-area: b; animation-delay: .08s; }
/* the other version steps back while one is being edited: light and size, never a grey wash */
html[data-buld-theme] #lfResult .lf-plinth .lf-device { transition: opacity .45s var(--lf-ease), transform .45s var(--lf-ease); }
html[data-buld-theme] #lfResult .lf-plinth[data-recede] .lf-device { opacity: .62; transform: scale(.985); }
@media (hover: hover) { html[data-buld-theme] #lfResult .lf-plinth[data-recede] .lf-device:hover { opacity: 1; transform: none; } }
@keyframes lf-rise { from { opacity: 0; transform: translateY(18px); } }

/* the placard above each version: the letter, the angle on one line with the action on its baseline, the hint below */
html[data-buld-theme] #lfResult .lf-plaque {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ver ang acts" "ver hint hint"; align-items: baseline;
    column-gap: 14px; row-gap: 4px; min-height: 52px; padding: 0 2px 0 4px;
}
html[data-buld-theme] #lfResult .lf-ver { grid-area: ver; align-self: start; font-family: var(--lf-fd); font-size: 42px; font-weight: 600; line-height: .82; letter-spacing: -0.04em; color: var(--buld-ink-1); }
html[data-buld-theme] #lfResult .lf-angle { grid-area: ang; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #lfResult .lf-hint { grid-area: hint; font-size: 12.5px; line-height: 1.38; color: var(--buld-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; min-height: 2.76em; }
html[data-buld-theme] #lfResult .lf-acts { grid-area: acts; display: flex; gap: 6px; }
html[data-buld-theme] #lfResult[data-n="1"] .lf-plaque { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ang acts" "hint hint"; }

/* the version itself: a quiet sheet with an address line (the line opens the version, without counting a visit) */
html[data-buld-theme] #lfResult .lf-device {
    position: relative; display: flex; flex-direction: column; width: var(--lf-dev-w); height: var(--lf-dev-h); overflow: hidden; border-radius: 26px;
    background: var(--lf-face);
    box-shadow:
        0 0 0 1px var(--lf-line),
        0 1px 2px color-mix(in srgb, var(--lf-shade) 6%, transparent),
        0 26px 56px -30px color-mix(in srgb, var(--lf-shade) 34%, transparent),
        0 54px 100px -56px color-mix(in srgb, var(--lf-shade) 28%, transparent);
}
html[data-buld-theme][data-buld-theme="dark"] #lfResult .lf-device {
    box-shadow: 0 0 0 1px var(--lf-line), inset 0 1px 0 color-mix(in srgb, var(--buld-ink-1) 9%, transparent), 0 26px 60px -28px color-mix(in srgb, var(--lf-shade) 80%, transparent);
}
html[data-buld-theme] #lfResult .lf-bar {
    flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--lf-line);
    font-size: 12.5px; color: var(--buld-ink-3); text-decoration: none; direction: ltr; transition: color .15s, background .15s;
}
@media (hover: hover) { html[data-buld-theme] #lfResult .lf-bar:hover { color: var(--buld-ink-1); background: var(--lf-muted); } }
html[data-buld-theme] #lfResult .lf-bar .lf-ic { width: 13px; height: 13px; color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-bar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
html[data-buld-theme] #lfResult .lf-bar-t b { font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] #lfResult .lf-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--buld-elevated-2); }
html[data-buld-theme] #lfResult .lf-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; margin: 0; background: transparent; transition: opacity .28s var(--lf-ease); }
/* the next document loads under the visible one, then takes its place: no blank flash when a page is redrawn */
html[data-buld-theme] #lfResult .lf-frame.lf-next-f { opacity: 0; pointer-events: none; }
html[data-buld-theme] #lfResult .lf-wait { position: absolute; inset: 0; z-index: 1; display: grid; gap: 14px; align-content: start; padding: 22px 18px; background: var(--buld-elevated-2); transition: opacity .4s, visibility .4s; pointer-events: none; }
html[data-buld-theme] #lfResult .lf-wait i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--lf-muted) 0 30%, var(--lf-line-2) 50%, var(--lf-muted) 70% 100%) 0 0 / 300% 100%; animation: lf-shimmer 1.4s linear infinite; }
html[data-buld-theme] #lfResult .lf-wait i:first-child { height: 300px; border-radius: 12px; }
html[data-buld-theme] #lfResult .lf-wait i:nth-child(3) { width: 70%; }
@keyframes lf-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
html[data-buld-theme] #lfResult .lf-plinth.lf-ready .lf-wait { opacity: 0; visibility: hidden; }
html[data-buld-theme] #lfResult .lf-wait-m { position: absolute; left: 18px; right: 18px; bottom: 22px; font-size: 13px; color: var(--buld-ink-3); }

/* ---------- the wall text in the aisle: the test, in a few words ---------- */
html[data-buld-theme] #lfResult .lf-wall {
    grid-area: wall; align-self: center; display: grid; justify-items: center; gap: 14px; padding: 0 28px; text-align: center;
    transition: opacity .35s var(--lf-ease), transform .45s var(--lf-ease); animation: lf-fade 1s .2s var(--lf-ease) backwards;
}
@keyframes lf-fade { from { opacity: 0; } }
html[data-buld-theme] #lfResult .lf-kicker-x { display: none; }
html[data-buld-theme] #lfResult .lf-split { display: flex; align-items: flex-start; gap: 18px; margin-top: 2px; }
html[data-buld-theme] #lfResult .lf-split > span { display: grid; justify-items: center; gap: 6px; }
html[data-buld-theme] #lfResult .lf-split b { font-family: var(--lf-fd); font-size: 54px; font-weight: 200; line-height: .9; letter-spacing: -0.04em; color: var(--buld-ink-1); font-variant-numeric: tabular-nums; }
html[data-buld-theme] #lfResult .lf-split b small { font-size: 22px; font-weight: 300; letter-spacing: 0; color: var(--buld-ink-3); margin-inline-start: 2px; }
html[data-buld-theme] #lfResult .lf-split em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-split > i { align-self: stretch; width: 1px; margin: 4px 0 22px; background: var(--lf-line-2); }
html[data-buld-theme] #lfResult .lf-wall-p { max-width: 250px; font-size: 13px; line-height: 1.5; color: var(--buld-ink-3); text-wrap: balance; }
html[data-buld-theme] #lfResult .lf-wall-p b { font-weight: 600; color: var(--buld-ink-2); }
html[data-buld-theme] #lfResult .lf-meter { display: grid; gap: 6px; width: 200px; margin-top: 4px; }
html[data-buld-theme] #lfResult .lf-meter-r { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 11.5px; color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-meter-r > span:first-child { font-weight: 600; color: var(--buld-ink-3); }
html[data-buld-theme] #lfResult .lf-meter-r i { position: relative; height: 3px; border-radius: 3px; background: var(--lf-line); overflow: hidden; }
html[data-buld-theme] #lfResult .lf-meter-r i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: inherit; background: var(--buld-ink-3); }
/* the composer lives in the aisle: the wall text steps back while it is there */
html[data-buld-theme] #lfResult[data-cmp="selected"] .lf-wall, html[data-buld-theme] #lfResult[data-cmp="running"] .lf-wall, html[data-buld-theme] #lfResult[data-cmp="done"] .lf-wall { opacity: 0; transform: scale(.98); pointer-events: none; }

/* ---------- the A | B switch (one version at a time when the room is narrow) ---------- */
html[data-buld-theme] #lfResult .lf-ab {
    grid-area: ab; position: relative; display: none; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px;
    background: var(--lf-muted); box-shadow: inset 0 0 0 1px var(--lf-line);
}
html[data-buld-theme] #lfResult .lf-ab button {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 9px;
    color: var(--buld-ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; transition: color .2s;
}
html[data-buld-theme] #lfResult .lf-ab button b { font-family: var(--lf-fd); font-size: 15px; font-weight: 600; color: inherit; }
html[data-buld-theme] #lfResult .lf-ab button span { overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #lfResult .lf-ab button[aria-selected="true"] { color: var(--buld-ink-1); }
html[data-buld-theme] #lfResult .lf-ab-k {
    position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--lf-face);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--lf-shade) 12%, transparent), 0 0 0 .5px var(--lf-line); transition: transform .45s var(--lf-spring);
}
html[data-buld-theme] #lfResult[data-show="B"] .lf-ab-k { transform: translateX(100%); }

/* ---------- the next step: order form and offers (another module fills #lfFormSlot; the section shows once it does) ---------- */
html[data-buld-theme] #lfResult .lf-next { max-width: var(--lf-room-w); margin: 72px auto 0; padding-top: 36px; border-top: 1px solid var(--lf-line); scroll-margin-top: 80px; }
html[data-buld-theme] #lfResult .lf-next-hd { display: grid; gap: 8px; margin-bottom: 22px; }
html[data-buld-theme] #lfResult h2.lf-next-h {
    margin: 0 !important; font-family: var(--lf-fd) !important; font-size: 28px; font-weight: 600 !important; line-height: 1.15 !important;
    letter-spacing: -0.025em !important; color: var(--buld-ink-1) !important;
}
html[data-buld-theme] #lfResult .lf-next-p { max-width: 560px; font-size: 15px; color: var(--buld-ink-3); text-wrap: pretty; }
/* where the merchant is: the page(s) made, the order form, putting it online (data-stage on .lf-next) */
html[data-buld-theme] #lfResult .lf-track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--buld-ink-4); }
html[data-buld-theme] #lfResult .lf-track li { display: inline-flex; align-items: center; gap: 7px; transition: color .3s var(--lf-ease); }
html[data-buld-theme] #lfResult .lf-track li:not(:last-child)::after { content: ""; width: 22px; height: 1.5px; margin-inline-start: 3px; border-radius: 2px; background: var(--lf-line); }
html[data-buld-theme] #lfResult .lf-track i { position: relative; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 11px/1 var(--lf-ft); background: var(--lf-muted); color: var(--buld-ink-3); box-shadow: inset 0 0 0 1px var(--lf-line); transition: background .3s var(--lf-ease), box-shadow .3s var(--lf-ease); }
html[data-buld-theme] #lfResult .lf-track i .lf-ic { display: none; width: 12px; height: 12px; stroke-width: 2.6; }
html[data-buld-theme] #lfResult .lf-track li[data-k="pages"], html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="form"] { color: var(--buld-ink-2); }
html[data-buld-theme] #lfResult .lf-track li[data-k="pages"] i, html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="form"] i { background: var(--buld-success); color: var(--lf-on-accent); box-shadow: none; }
html[data-buld-theme] #lfResult .lf-track li[data-k="pages"] i .lf-ic, html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="form"] i .lf-ic { display: block; }
html[data-buld-theme] #lfResult .lf-track li[data-k="pages"] i span, html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="form"] i span { display: none; }
html[data-buld-theme] #lfResult .lf-next[data-stage="form"] .lf-track li[data-k="form"], html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="live"] { color: var(--buld-ink-1); }
html[data-buld-theme] #lfResult .lf-next[data-stage="form"] .lf-track li[data-k="form"] i, html[data-buld-theme] #lfResult .lf-next[data-stage="live"] .lf-track li[data-k="live"] i { background: var(--buld-cta); color: var(--lf-on-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--buld-cta) 18%, transparent); }

/* ---------- medium: both versions side by side, the wall text becomes one line above ---------- */
@container lfres (max-width: 1119px) {
    html[data-buld-theme] #lfResult .lf-in { --lf-room-w: calc(var(--lf-dev-w) * 2 + 32px); --lf-dev-h: clamp(520px, calc(100vh - 290px), 840px); }
    html[data-buld-theme] #lfResult .lf-room { grid-template-columns: var(--lf-dev-w) var(--lf-dev-w); grid-template-areas: "wall wall" "a b"; column-gap: 32px; row-gap: 22px; }
    html[data-buld-theme] #lfResult .lf-wall { gap: 6px; padding: 0; animation: none; }
    html[data-buld-theme] #lfResult .lf-split, html[data-buld-theme] #lfResult .lf-meter { display: none; }
    html[data-buld-theme] #lfResult .lf-kicker-x { display: inline; }
    html[data-buld-theme] #lfResult .lf-wall-p { max-width: 560px; }
    html[data-buld-theme] #lfResult[data-cmp] .lf-wall { opacity: 1; transform: none; }
}
/* ---------- narrow: one version at a time, A | B switch ---------- */
@container lfres (max-width: 851px) {
    html[data-buld-theme] #lfResult .lf-in { --lf-scr-w: min(390px, 100cqi - 32px); --lf-room-w: var(--lf-dev-w); --lf-dev-h: clamp(480px, calc(100svh - 190px), 780px); }
    html[data-buld-theme] #lfResult .lf-room { grid-template-columns: var(--lf-dev-w); grid-template-areas: "wall" "ab" "a"; row-gap: 16px; }
    html[data-buld-theme] #lfResult[data-n="1"] .lf-room { grid-template-areas: "a"; }
    html[data-buld-theme] #lfResult .lf-plinth[data-v="B"] { grid-area: a; }
    html[data-buld-theme] #lfResult:not([data-show="B"]) .lf-plinth[data-v="B"], html[data-buld-theme] #lfResult[data-show="B"] .lf-plinth[data-v="A"] { display: none; }
    html[data-buld-theme] #lfResult .lf-ab { display: grid; }
    html[data-buld-theme] #lfResult[data-n="2"] .lf-plaque .lf-ver, html[data-buld-theme] #lfResult[data-n="2"] .lf-plaque .lf-angle { display: none; }
    html[data-buld-theme] #lfResult[data-n="2"] .lf-plaque { grid-template-areas: "hint acts"; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; align-items: center; }
    html[data-buld-theme] #lfResult[data-n="2"] .lf-hint { min-height: 0; }
    html[data-buld-theme] #lfResult .lf-plinth { animation: none; }
    html[data-buld-theme] #lfResult .lf-room::before { display: none; }
}
/* ---------- phone: the page edge to edge, a hairline sheet ---------- */
@container lfres (max-width: 539px) {
    html[data-buld-theme] #lfResult .lf-in { --lf-scr-w: calc(100cqi - 8px); padding: 0 4px; }
    html[data-buld-theme] #lfResult .lf-head { padding: 4px 4px 14px; gap: 12px; }
    html[data-buld-theme] #lfResult h2.lf-prod { font-size: 22px; }
    html[data-buld-theme] #lfResult .lf-url { width: 100%; }
    html[data-buld-theme] #lfResult .lf-url-t { flex: 1; }
    html[data-buld-theme] #lfResult .lf-url-k { display: none; }
    html[data-buld-theme] #lfResult .lf-room { padding-top: 14px; row-gap: 12px; }
    html[data-buld-theme] #lfResult .lf-wall { justify-items: start; text-align: start; padding: 0 4px; }
    html[data-buld-theme] #lfResult .lf-wall-p { font-size: 12.5px; }
    html[data-buld-theme] #lfResult .lf-device { border-radius: 20px; box-shadow: 0 0 0 1px var(--lf-line); }
    html[data-buld-theme] #lfResult .lf-plaque { padding: 0 4px; }
    html[data-buld-theme] #lfResult .lf-next { margin-top: 48px; padding: 28px 4px 0; }
    html[data-buld-theme] #lfResult h2.lf-next-h { font-size: 23px; }
}

/* ============================================================================
   THE COMPOSER — one element, four shapes (rest · selected · running · done), one position system:
   JS writes --x / --y (top-left, viewport px), --cw / --ch (target size), --ny / --nx (notch); CSS springs between them.
   ============================================================================ */
html[data-buld-theme] #lfComposer {
    position: fixed; z-index: 960; left: 0; top: 0; margin: 0; padding: 0; border: 0;
    width: var(--cw, 296px); height: var(--ch, 46px); border-radius: var(--cr, 23px);
    transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
    transition: transform .66s var(--lf-glide), width .52s var(--lf-spring), height .52s var(--lf-spring), border-radius .45s var(--lf-spring), opacity .25s, visibility 0s;
}
html[data-buld-theme] #lfComposer.lf-track { transition: width .52s var(--lf-spring), height .52s var(--lf-spring), border-radius .45s var(--lf-spring), opacity .25s; }
html[data-buld-theme] #lfComposer.lf-boot { opacity: 0; transition: none; }
/* away: the result is not on screen (scrolled past, another section, the studio editor) */
html[data-buld-theme] #lfComposer[data-away] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
html[data-buld-theme] #lfComposer .lf-c-face {
    position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit;
    background: color-mix(in srgb, var(--lf-face) 94%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    box-shadow:
        0 0 0 1px var(--lf-line),
        0 1px 2px color-mix(in srgb, var(--lf-shade) 8%, transparent),
        0 14px 34px -14px color-mix(in srgb, var(--lf-shade) 30%, transparent),
        0 24px 60px -28px color-mix(in srgb, var(--lf-c1) 45%, transparent);
    transition: box-shadow .3s;
}
/* the layers: each has its own width so the content lays out at its final size while the shell springs */
html[data-buld-theme] #lfComposer .lf-c-layer {
    position: absolute; left: 0; top: 0; width: var(--cw, 296px);
    opacity: 0; visibility: hidden; transform: scale(.97); transform-origin: 50% 0; filter: blur(4px);
    transition: opacity .18s, visibility 0s .18s, transform .3s var(--lf-ease), filter .25s;
}
html[data-buld-theme] #lfComposer[data-shape="rest"] .lf-c-rest,
html[data-buld-theme] #lfComposer[data-shape="selected"] .lf-c-body,
html[data-buld-theme] #lfComposer[data-shape="running"] .lf-c-run,
html[data-buld-theme] #lfComposer[data-shape="done"] .lf-c-ok {
    opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .28s .08s, visibility 0s, transform .45s var(--lf-spring), filter .3s .05s;
}

/* rest — the small pill; it names the part under the pointer */
html[data-buld-theme] #lfComposer .lf-c-rest {
    display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 23px;
    font-size: 13.5px; font-weight: 500; color: var(--buld-ink-2); white-space: nowrap;
}
html[data-buld-theme] #lfComposer .lf-c-rest-in { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px 0 14px; }
@media (hover: hover) { html[data-buld-theme] #lfComposer .lf-c-rest:hover { color: var(--buld-ink-1); } }
html[data-buld-theme] #lfComposer .lf-c-rest-t { display: inline-block; }
html[data-buld-theme] #lfComposer .lf-c-rest-t.lf-swap { animation: lf-swap .32s var(--lf-ease); }

/* selected — what was picked, the note, suggestions, cost, send */
html[data-buld-theme] #lfComposer .lf-c-body { display: grid; padding: 12px 12px 10px; }
html[data-buld-theme] #lfComposer .lf-c-grip { display: none; width: 36px; height: 4px; margin: -4px auto 10px; border-radius: 4px; background: var(--lf-line-2); }
html[data-buld-theme] #lfComposer .lf-c-ctx { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 0 8px; }
html[data-buld-theme] #lfComposer .lf-c-thumb {
    flex: none; position: relative; width: 36px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--lf-muted); padding: 0;
    box-shadow: 0 0 0 1px var(--lf-line), 0 4px 10px -4px color-mix(in srgb, var(--lf-shade) 40%, transparent);
}
html[data-buld-theme] #lfComposer .lf-c-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-buld-theme] #lfComposer .lf-c-quote {
    flex: none; position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; padding: 0;
    background: var(--lf-muted); color: var(--buld-ink-2); box-shadow: inset 0 0 0 1px var(--lf-line);
}
html[data-buld-theme] #lfComposer .lf-c-quote .lf-ic { width: 17px; height: 17px; }
html[data-buld-theme] #lfComposer[data-kind="image"] .lf-c-quote, html[data-buld-theme] #lfComposer:not([data-kind="image"]) .lf-c-thumb { display: none; }
/* the version mark in the corner of the token; an arrow replaces it while the part is out of sight */
html[data-buld-theme] #lfComposer .lf-c-v {
    position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 6px 0 7px 0;
    font-family: var(--lf-fd); font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--buld-page); background: var(--buld-ink-1);
}
html[data-buld-theme] #lfComposer .lf-c-v .lf-ic { width: 11px; height: 11px; stroke-width: 2.6; }
html[data-buld-theme] #lfComposer[data-off] .lf-c-v { background: var(--lf-c1); color: var(--lf-on-accent); }
html[data-buld-theme] #lfComposer .lf-c-what { display: grid; gap: 2px; min-width: 0; flex: 1; }
html[data-buld-theme] #lfComposer .lf-c-name { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #lfComposer .lf-c-name s { font-weight: 400; color: var(--buld-ink-4); margin-inline-start: 6px; }
html[data-buld-theme] #lfComposer .lf-c-sub { font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #lfComposer .lf-c-x {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--buld-ink-3); align-self: flex-start;
    transition: background .15s, color .15s;
}
@media (hover: hover) { html[data-buld-theme] #lfComposer .lf-c-x:hover { background: var(--lf-muted); color: var(--buld-ink-1); } }
html[data-buld-theme] #lfComposer .lf-c-x .lf-ic { width: 14px; height: 14px; stroke-width: 2; }
html[data-buld-theme] #lfComposer textarea.lf-c-ta,
html[data-buld-theme] #lfComposer textarea.lf-c-ta:hover,
html[data-buld-theme] #lfComposer textarea.lf-c-ta:focus,
html[data-buld-theme] #lfComposer textarea.lf-c-ta:focus-visible {
    display: block; width: 100%; height: var(--lf-ta-h, 44px); min-height: 44px; max-height: 148px; margin: 0; padding: 8px 2px 6px !important; resize: none; overflow-y: auto;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important;
    color: var(--buld-ink-1) !important; font-size: 14.5px; line-height: 1.45; caret-color: var(--lf-c1);
}
html[data-buld-theme] #lfComposer textarea.lf-c-ta::placeholder { color: var(--buld-ink-4) !important; opacity: 1; }
html[data-buld-theme] #lfComposer .lf-c-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
html[data-buld-theme] #lfComposer .lf-c-sugg:empty { display: none; }
html[data-buld-theme] #lfComposer .lf-c-pill {
    display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
    color: var(--buld-ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--lf-line-2);
    transition: background .18s, color .18s, box-shadow .18s, transform .2s var(--lf-ease); animation: lf-in-up .4s var(--lf-ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
html[data-buld-theme] #lfComposer .lf-c-pill .lf-ic { width: 12px; height: 12px; stroke-width: 2.4; display: none; }
@media (hover: hover) { html[data-buld-theme] #lfComposer .lf-c-pill:hover { background: var(--lf-muted); color: var(--buld-ink-1); } }
html[data-buld-theme] #lfComposer .lf-c-pill:active { transform: scale(.96); }
html[data-buld-theme] #lfComposer .lf-c-pill[aria-pressed="true"] { color: var(--buld-ink-1); background: var(--lf-muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--buld-ink-1) 34%, transparent); }
html[data-buld-theme] #lfComposer .lf-c-pill[aria-pressed="true"] .lf-ic { display: block; }
@keyframes lf-in-up { from { opacity: 0; transform: translateY(6px); } }
html[data-buld-theme] #lfComposer.lf-nudge .lf-c-face { animation: lf-nudge .36s var(--lf-ease); }
@keyframes lf-nudge { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
html[data-buld-theme] #lfComposer .lf-c-err { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--buld-danger); }
html[data-buld-theme] #lfComposer .lf-c-err .lf-ic { width: 14px; height: 14px; margin-top: 1px; }
html[data-buld-theme] #lfComposer .lf-c-foot { display: flex; align-items: center; gap: 8px; padding: 10px 0 0 2px; border-top: 1px solid var(--lf-line); }
html[data-buld-theme] #lfComposer .lf-c-cost { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; }
html[data-buld-theme] #lfComposer .lf-c-cost b { font-weight: 600; color: var(--buld-ink-2); }
html[data-buld-theme] #lfComposer .lf-c-zone { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; transition: background .15s, color .15s; }
html[data-buld-theme] #lfComposer .lf-c-zone .lf-ic { width: 13px; height: 13px; }
@media (hover: hover) { html[data-buld-theme] #lfComposer .lf-c-zone:hover { background: var(--lf-muted); color: var(--buld-ink-1); } }
html[data-buld-theme] #lfComposer .lf-c-hint { margin-inline-start: auto; font-size: 11.5px; color: var(--buld-ink-4); white-space: nowrap; }
html[data-buld-theme] #lfComposer .lf-c-send {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--lf-line-2); color: var(--buld-ink-4); transition: background .2s, color .2s, transform .25s var(--lf-spring), box-shadow .2s;
}
html[data-buld-theme] #lfComposer .lf-c-send .lf-ic { width: 16px; height: 16px; stroke-width: 2.2; }
html[data-buld-theme] #lfComposer.lf-typed .lf-c-send {
    background: linear-gradient(135deg, var(--lf-c1), var(--lf-c3)); color: var(--lf-on-accent);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lf-c1) 85%, transparent);
}
@media (hover: hover) { html[data-buld-theme] #lfComposer.lf-typed .lf-c-send:hover { transform: scale(1.07); } }

/* running — a status strip, the moving edge light, the time it takes */
html[data-buld-theme] #lfComposer .lf-c-run, html[data-buld-theme] #lfComposer .lf-c-ok {
    display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 9px 0 15px; white-space: nowrap;
}
html[data-buld-theme] #lfComposer .lf-c-run-t, html[data-buld-theme] #lfComposer .lf-c-ok-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 500; }
html[data-buld-theme] #lfComposer .lf-c-run-t {
    color: transparent; background: linear-gradient(90deg, var(--buld-ink-2) 0 30%, var(--lf-c1) 44%, var(--lf-c2) 50%, var(--buld-ink-2) 64% 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: lf-shine 1.7s linear infinite;
}
html[data-buld-theme] #lfComposer .lf-c-run-t.lf-swap { animation: lf-shine 1.7s linear infinite, lf-swap .38s var(--lf-ease); }
@keyframes lf-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes lf-swap { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } }
html[data-buld-theme] #lfComposer .lf-c-time { flex: none; min-width: 34px; padding: 0 6px; font-size: 12px; color: var(--buld-ink-4); text-align: end; }

/* done — a short success flash, with a way back */
html[data-buld-theme] #lfComposer .lf-c-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--buld-success); color: var(--lf-on-accent); }
html[data-buld-theme] #lfComposer .lf-c-check .lf-ic { width: 14px; height: 14px; stroke-width: 2.6; }
html[data-buld-theme] #lfComposer[data-shape="done"] .lf-c-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: lf-ink .45s .12s var(--lf-ease) forwards; }
@keyframes lf-ink { to { stroke-dashoffset: 0; } }
html[data-buld-theme] #lfComposer .lf-c-ok-t b { font-weight: 600; }
html[data-buld-theme] #lfComposer .lf-c-ok-t span { color: var(--buld-ink-3); font-weight: 400; }
html[data-buld-theme] #lfComposer .lf-c-undo {
    flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
    color: var(--buld-ink-2); background: var(--lf-muted); transition: background .15s;
}
@media (hover: hover) { html[data-buld-theme] #lfComposer .lf-c-undo:hover { background: var(--lf-line-2); color: var(--buld-ink-1); } }
html[data-buld-theme] #lfComposer .lf-c-undo .lf-ic { width: 13px; height: 13px; }
html[data-buld-theme] #lfComposer[data-shape="done"] .lf-c-face { animation: lf-ping 1.1s var(--lf-ease); }
@keyframes lf-ping {
    0% { box-shadow: 0 0 0 1px var(--lf-line), 0 0 0 0 color-mix(in srgb, var(--buld-success) 55%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--lf-shade) 30%, transparent); }
    100% { box-shadow: 0 0 0 1px var(--lf-line), 0 0 0 16px transparent, 0 14px 34px -14px color-mix(in srgb, var(--lf-shade) 30%, transparent); }
}

/* the notch — points at the picked part */
html[data-buld-theme] #lfComposer .lf-c-notch {
    position: absolute; z-index: 2; width: 9px; height: 20px; top: calc(var(--ny, 30px) - 10px); left: -8px; opacity: 0; transition: opacity .2s, top .45s var(--lf-spring);
    fill: color-mix(in srgb, var(--lf-face) 96%, transparent); stroke: var(--lf-line); stroke-width: 1; pointer-events: none; overflow: visible;
}
html[data-buld-theme] #lfComposer[data-side="right"] .lf-c-notch { left: auto; right: -8px; transform: scaleX(-1); }
html[data-buld-theme] #lfComposer[data-side="top"] .lf-c-notch { top: -14px; left: calc(var(--nx, 50%) - 4px); transform: rotate(90deg); transition: opacity .2s, left .45s var(--lf-spring); }
html[data-buld-theme] #lfComposer[data-side="bottom"] .lf-c-notch { top: auto; bottom: -14px; left: calc(var(--nx, 50%) - 4px); transform: rotate(-90deg); transition: opacity .2s, left .45s var(--lf-spring); }
html[data-buld-theme] #lfComposer:not([data-shape="rest"]):not([data-side="none"]) .lf-c-notch { opacity: 1; }

/* the gyroscope — the agent's mark (as Sidekick .sx-orb: three rings on three axes around a point of light) */
html[data-buld-theme] #lfComposer .lf-orb {
    --s: 20px; --sp: 5s; --rw: max(1.5px, calc(var(--s) * .07));
    position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s); perspective: calc(var(--s) * 4); transform-style: preserve-3d;
}
html[data-buld-theme] #lfComposer .lf-orb i {
    position: absolute; inset: 0; border-radius: 50%; border: var(--rw) solid transparent;
    border-top-color: var(--lf-c1); border-right-color: color-mix(in srgb, var(--lf-c1) 32%, transparent);
    animation: lf-g1 var(--sp) linear infinite; transition: inset .4s var(--lf-spring);
}
html[data-buld-theme] #lfComposer .lf-orb i:nth-child(2) { inset: 9%; border-top-color: var(--lf-c2); border-right-color: color-mix(in srgb, var(--lf-c2) 32%, transparent); animation-name: lf-g2; }
html[data-buld-theme] #lfComposer .lf-orb i:nth-child(3) { inset: 18%; border-top-color: var(--lf-c3); border-right-color: color-mix(in srgb, var(--lf-c3) 32%, transparent); animation-name: lf-g3; }
html[data-buld-theme] #lfComposer .lf-orb u {
    position: absolute; left: 50%; top: 50%; width: max(2px, calc(var(--s) * .16)); height: max(2px, calc(var(--s) * .16));
    transform: translate(-50%, -50%); border-radius: 50%; text-decoration: none;
    background: radial-gradient(circle at 35% 35%, var(--buld-elevated-2), var(--lf-c2) 70%); box-shadow: 0 0 calc(var(--s) * .25) var(--lf-c2); opacity: .9;
}
html[data-buld-theme] #lfComposer .lf-orb--xs { --s: 15px; }
html[data-buld-theme] #lfComposer .lf-c-rest .lf-orb, html[data-buld-theme] #lfComposer .lf-c-run .lf-orb { --s: 22px; --rw: 2px; }
html[data-buld-theme] #lfComposer[data-shape="running"] .lf-orb { --sp: 1.2s; animation: lf-glow 1.6s ease-in-out infinite; }
html[data-buld-theme] #lfComposer.lf-aim .lf-c-rest .lf-orb i { inset: -12%; }
html[data-buld-theme] #lfComposer.lf-aim .lf-c-rest .lf-orb i:nth-child(2) { inset: 2%; }
html[data-buld-theme] #lfComposer.lf-aim .lf-c-rest .lf-orb i:nth-child(3) { inset: 16%; }
@keyframes lf-g1 { from { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0); } to { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }
@keyframes lf-g2 { from { transform: rotateX(50deg) rotateY(10deg) rotateZ(0); } to { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } }
@keyframes lf-g3 { from { transform: rotateX(35deg) rotateY(55deg) rotateZ(0); } to { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }
@keyframes lf-glow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--s) * .12) color-mix(in srgb, var(--lf-c1) 55%, transparent)); } 50% { filter: drop-shadow(0 0 calc(var(--s) * .35) color-mix(in srgb, var(--lf-c2) 80%, transparent)); } }

/* the edge light — a hairline of colour while a part is picked, a running conic light while the AI works */
@property --lf-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html[data-buld-theme] #lfComposer .lf-c-aura { position: absolute; z-index: 0; inset: -1.5px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; }
html[data-buld-theme] #lfComposer .lf-c-aura::before, html[data-buld-theme] #lfComposer .lf-c-aura::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--lf-a), var(--lf-c1), var(--lf-c2), var(--lf-c3), var(--lf-c1) 50%, var(--lf-c2), var(--lf-c3), var(--lf-c1));
    -webkit-mask: linear-gradient(var(--buld-ink-1) 0 0) content-box, linear-gradient(var(--buld-ink-1) 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(var(--buld-ink-1) 0 0) content-box exclude, linear-gradient(var(--buld-ink-1) 0 0);
}
html[data-buld-theme] #lfComposer .lf-c-aura::after { padding: 0; -webkit-mask: none; mask: none; filter: blur(16px); opacity: 0; z-index: -1; transition: opacity .4s; }
html[data-buld-theme] #lfComposer[data-shape="selected"] .lf-c-aura { opacity: .55; }
html[data-buld-theme] #lfComposer[data-shape="selected"]:focus-within .lf-c-aura { opacity: .9; }
html[data-buld-theme] #lfComposer[data-shape="running"] .lf-c-aura { opacity: 1; inset: -2px; }
html[data-buld-theme] #lfComposer[data-shape="running"] .lf-c-aura::before { padding: 2px; animation: lf-spin 2.2s linear infinite; }
html[data-buld-theme] #lfComposer[data-shape="running"] .lf-c-aura::after { opacity: .5; animation: lf-spin 2.2s linear infinite; }
@keyframes lf-spin { to { --lf-a: 360deg; } }

/* phones: the composer docks to the bottom as a sheet */
@media (max-width: 719px) {
    html[data-buld-theme] #lfComposer[data-mode="sheet"][data-shape="selected"] .lf-c-face { background: var(--lf-face); box-shadow: 0 0 0 1px var(--lf-line), 0 -18px 50px -20px color-mix(in srgb, var(--lf-shade) 40%, transparent); }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] .lf-c-body { padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] .lf-c-grip { display: block; }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] .lf-c-hint { display: none; }
    html[data-buld-theme] #lfComposer[data-mode="sheet"][data-shape="selected"] .lf-c-aura { opacity: 0; }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] textarea.lf-c-ta { font-size: 16px; }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] .lf-c-foot { padding-top: 12px; }
    html[data-buld-theme] #lfComposer[data-mode="sheet"] .lf-c-send { width: 36px; height: 36px; margin-inline-start: auto; }
}
@media (hover: none) { html[data-buld-theme] #lfComposer .lf-c-hint { display: none; } }

/* while the result is on screen, the page's own AI input is this composer: Sidekick's idle pill steps aside */
html[data-buld-theme][data-lf-stage] .sx-root:not(.is-busy):not(.is-min):not(.is-open):not(.is-focus):not(.is-peek):not(.is-ctx) .sx-float { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s, transform .3s; }

@media (prefers-reduced-motion: reduce) {
    html[data-buld-theme] #lfResult *, html[data-buld-theme] #lfResult *::before, html[data-buld-theme] #lfResult *::after,
    html[data-buld-theme] #lfComposer, html[data-buld-theme] #lfComposer *, html[data-buld-theme] #lfComposer *::before, html[data-buld-theme] #lfComposer *::after { animation: none !important; transition: none !important; }
    html[data-buld-theme] #lfComposer .lf-c-run-t { color: var(--buld-ink-2); background: none; }
    html[data-buld-theme] #lfComposer[data-shape="done"] .lf-c-check path { stroke-dashoffset: 0; }
}