/* ============================================================
   PUBLIC LANDING — index.html + download.html
   Built on the PatchWork Standard (css/slate.css tokens + .sl-*
   components). Only `.lp-*` lives here. Dark only, like the app.
   The canvas demo is pure CSS: one 11 s loop, every moving part
   keyed off the same timeline, paused under reduced motion.
   ============================================================ */

:root {
    color-scheme: dark;
    --lp-bg:      oklch(0.13 0.003 250);   /* page — a step under --sl-app */
    --lp-bg-2:    oklch(0.145 0.003 250);  /* recessed wells, demo stage */
    --lp-node:    oklch(0.21 0.006 250);   /* node cards inside the demo */
    --lp-max:     1160px;
    --lp-gutter:  44px;
    --lp-gen:     oklch(0.72 0.13 230);    /* Generation node = the accent */
    --lp-edit:    oklch(0.7 0.12 300);     /* Editor node */
    --lp-note:    oklch(0.8 0.14 85);      /* Note node */
    --lp-ok:      oklch(0.8 0.15 155);     /* approved take */
    --lp-loop:    11s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
    margin: 0;
    background: var(--lp-bg);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.lp a { color: var(--sl-link); text-decoration: none; }
.lp a:hover { color: var(--sl-link-hover); }
.lp :focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; border-radius: 4px; }
.lp img, .lp svg { display: block; }
.lp .mono { font-family: var(--sl-font-mono); }

.lp-skip {
    position: absolute; left: 12px; top: -60px; z-index: 50;
    background: var(--sl-accent); color: var(--sl-on-accent) !important;
    padding: 8px 14px; border-radius: var(--sl-r-8); font-weight: 700; font-size: 13px;
}
.lp-skip:focus { top: 12px; }

.lp-wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-gutter); }
.lp-section { margin-top: 96px; scroll-margin-top: 80px; }
.lp-icon { width: 16px; height: 16px; flex: none; }
.lp-icon-sm { width: 14px; height: 14px; flex: none; }

/* ── buttons: the Standard's, one size up for a marketing page ── */
.lp-btn { height: 44px; padding: 0 20px; border-radius: 11px; font-size: 14px; gap: 8px; text-decoration: none; }
.lp .lp-btn.sl-btn-primary, .lp .lp-btn.sl-btn-primary:hover { color: var(--sl-on-accent); }
.lp .lp-btn.sl-btn-secondary, .lp .lp-btn.sl-btn-secondary:hover { color: var(--sl-text-1); }
.lp-btn-md { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 9px; }

/* ── topbar ── */
.lp-top {
    position: sticky; top: 0; z-index: 20;
    background: oklch(0.13 0.003 250 / 0.82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.lp-top-inner { display: flex; align-items: center; gap: 28px; height: 60px; }
.lp-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--sl-text-1) !important; }
.lp-brand svg { width: 24px; height: 24px; }
.lp-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lp-ver {
    font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3);
    border: 1px solid var(--sl-border); border-radius: 6px; padding: 2px 6px;
}
.lp-nav { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.lp-nav a { color: var(--sl-text-2); }
.lp-nav a:hover { color: var(--sl-text-1); }
.lp-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lp-top-actions .lp-signin { font-size: 13px; color: var(--sl-text-2); padding: 0 6px; }
.lp-top-actions .lp-signin:hover { color: var(--sl-text-1); }

/* ── hero ── */
.lp-hero { position: relative; padding-top: 64px; text-align: center; }
.lp-hero-glow {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    width: min(860px, 100%); height: 380px; pointer-events: none;
    background: radial-gradient(ellipse, oklch(0.72 0.13 230 / 0.12), transparent 65%);
}
.lp-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sl-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sl-accent-text); background: oklch(0.72 0.13 230 / 0.1);
    border: 1px solid oklch(0.72 0.13 230 / 0.3); padding: 5px 11px; border-radius: 7px;
}
.lp-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-accent); animation: lpPulse 2s ease-in-out infinite; }
.lp-h1 {
    position: relative; margin: 22px auto 0; max-width: 860px;
    font-size: 60px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
    color: oklch(0.97 0.002 250); text-wrap: balance;
}
.lp-lead { position: relative; margin: 18px auto 0; max-width: 560px; font-size: 17px; color: oklch(0.7 0.005 250); text-wrap: pretty; }
.lp-cta { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp-cta-meta { position: relative; margin-top: 12px; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.lp-cta-web { position: relative; margin-top: 6px; font-size: 13px; color: var(--sl-text-3); }

/* ── demo window ── */
.lp-demo {
    position: relative; margin: 44px 0 0; text-align: left;
    background: var(--sl-app); border: 1px solid oklch(1 0 0 / 0.09); border-radius: 16px; overflow: hidden;
    box-shadow: 0 40px 90px -50px oklch(0.72 0.13 230 / 0.45);
}
.lp-demo-bar {
    display: flex; align-items: center; gap: 12px; min-height: 50px;
    padding: 9px 14px; border-bottom: 1px solid oklch(1 0 0 / 0.07);
}
.lp-run {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; background: var(--sl-accent); color: var(--sl-on-accent);
    font-family: var(--sl-font-ui); flex: none;
}
.lp-status { position: relative; flex: 1; min-width: 0; height: 18px; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.lp-status > span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cost {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2);
    background: var(--lp-bg); border: 1px solid oklch(1 0 0 / 0.07); padding: 5px 10px; border-radius: 8px;
}
.lp-cost svg { color: var(--sl-warning); }
.lp-pause {
    flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid oklch(1 0 0 / 0.1);
    background: transparent; color: var(--sl-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.lp-pause:hover { color: var(--sl-text-1); border-color: oklch(1 0 0 / 0.2); }
.lp-pause .ic-play { display: none; }
.lp-demo.is-paused .lp-pause .ic-play { display: block; }
.lp-demo.is-paused .lp-pause .ic-pause { display: none; }

/* the stage keeps its box from aspect-ratio (no layout shift); JS only sets --lp-s */
.lp-stage {
    --lp-s: 1;
    position: relative; width: 100%; aspect-ratio: 1072 / 452; overflow: hidden;
    background-color: oklch(0.138 0.003 250);
    background-image: radial-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
}
.lp-stage-inner {
    position: absolute; top: 0; left: 0; width: 1072px; height: 452px;
    transform: scale(var(--lp-s)); transform-origin: top left;
}
.lp-wires { position: absolute; inset: 0; width: 1072px; height: 452px; overflow: visible; }
.lp-wire { fill: none; stroke-width: 2; stroke-dasharray: 7 6; }

.lp-n {
    position: absolute; background: var(--lp-node); border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 11px; box-shadow: 0 12px 30px -14px oklch(0 0 0 / 0.8); font-size: 11px;
}
.lp-n-head { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.lp-n-title { font-size: 11px; font-weight: 600; color: oklch(0.93 0.002 250); white-space: nowrap; }
.lp-tag {
    font-family: var(--sl-font-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.lp-tag-gen  { color: oklch(0.82 0.1 230); background: oklch(0.72 0.13 230 / 0.14); }
.lp-tag-edit { color: oklch(0.8 0.1 300);  background: oklch(0.7 0.12 300 / 0.15); }
.lp-tag-ok   { color: oklch(0.86 0.14 155); background: oklch(0.8 0.15 155 / 0.14); }
.lp-tag-dyn  { color: oklch(0.85 0.13 85);  background: oklch(0.8 0.14 85 / 0.14); }
.lp-n-meta { margin-left: auto; font-family: var(--sl-font-mono); font-size: 8.5px; color: oklch(0.62 0.005 250); white-space: nowrap; }
.lp-var { color: oklch(0.86 0.13 85); background: oklch(0.8 0.14 85 / 0.16); padding: 0 3px; border-radius: 3px; }
.lp-thumb { border-radius: 6px; background: linear-gradient(155deg, oklch(0.5 0.07 var(--h, 150)), oklch(0.28 0.045 var(--h, 150))); }

/* rows table inside the first generation node */
.lp-rows { padding: 9px 11px 11px; font-family: var(--sl-font-mono); font-size: 9px; color: oklch(0.66 0.005 250); display: grid; gap: 5px; }
.lp-rows-prompt { font-size: 9.5px; line-height: 1.6; color: oklch(0.7 0.005 250); padding-bottom: 6px; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.lp-row { display: flex; gap: 8px; align-items: center; }
.lp-row b { font-weight: 500; color: oklch(0.45 0.005 250); width: 12px; }
.lp-row i { font-style: normal; margin-left: auto; color: oklch(0.55 0.005 250); }

/* the four take slots */
.lp-takes { display: flex; gap: 7px; padding: 11px 11px 6px; }
.lp-slot { position: relative; flex: 1; height: 88px; border-radius: 7px; }
.lp-slot-empty, .lp-slot-spin, .lp-slot-img { position: absolute; inset: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.lp-slot-empty { background: oklch(0.17 0.004 250); border: 1.5px dashed oklch(1 0 0 / 0.13); font-family: var(--sl-font-mono); font-size: 9px; color: oklch(0.45 0.005 250); }
.lp-slot-spin { background: oklch(0.16 0.004 250); border: 1.5px solid oklch(1 0 0 / 0.08); }
.lp-slot-spin::after {
    content: ""; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid oklch(1 0 0 / 0.16); border-top-color: var(--sl-accent);
    animation: lpSpin 0.8s linear infinite;
}
.lp-slot-img { border: 1.5px solid oklch(1 0 0 / 0.1); background: linear-gradient(155deg, oklch(0.5 0.07 var(--h)), oklch(0.28 0.045 var(--h))); }
.lp-slot-img > span {
    position: absolute; bottom: 5px; left: 5px; font-family: var(--sl-font-mono); font-size: 8px;
    color: oklch(0.95 0 0); background: oklch(0 0 0 / 0.5); padding: 2px 5px; border-radius: 4px;
}
.lp-pickmark { position: absolute; inset: 0; border-radius: 7px; border: 1.5px solid var(--lp-ok); }
.lp-check {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--lp-ok); color: oklch(0.16 0.02 155); display: flex; align-items: center; justify-content: center;
}
.lp-cursor { position: absolute; left: 128px; top: 82px; width: 16px; height: 16px; color: oklch(0.96 0 0); filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.6)); }

.lp-send {
    margin: 0 11px 11px; padding: 6px 9px; border-radius: 7px; text-align: center;
    font-size: 10px; font-weight: 600; position: relative; height: 26px;
}
.lp-send > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; }
.lp-send-blocked { background: oklch(1 0 0 / 0.05); color: oklch(0.55 0.005 250); }
.lp-send-pick    { background: oklch(0.8 0.15 155 / 0.16); color: oklch(0.86 0.14 155); box-shadow: 0 0 0 3px oklch(0.8 0.15 155 / 0.12); }
.lp-send-sent    { background: oklch(0.8 0.15 155 / 0.1); color: oklch(0.8 0.1 155); }

/* editor node */
.lp-cut { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px 12px; }
.lp-cut-row { display: flex; gap: 2px; align-items: center; }
.lp-clip { height: 24px; border-radius: 4px; background: linear-gradient(155deg, oklch(0.5 0.07 var(--h)), oklch(0.3 0.045 var(--h))); }
.lp-clip-new { position: relative; width: 52px; height: 24px; border-radius: 4px; }
.lp-clip-new > span { position: absolute; inset: 0; border-radius: 4px; }
.lp-clip-hole { background: oklch(0.17 0.004 250); border: 1.5px dashed oklch(1 0 0 / 0.13); }
.lp-clip-fill { background: linear-gradient(155deg, oklch(0.5 0.07 42), oklch(0.3 0.045 42)); }
.lp-cut-len { position: relative; display: inline-block; width: 86px; height: 12px; }
.lp-cut-len > span { position: absolute; right: 0; top: 0; white-space: nowrap; }

/* note node */
.lp-note {
    position: absolute; background: oklch(0.24 0.02 90); border: 1px solid oklch(0.8 0.14 90 / 0.3);
    border-radius: 11px; padding: 12px 14px; box-shadow: 0 12px 30px -14px oklch(0 0 0 / 0.8);
}
.lp-note-by { font-family: var(--sl-font-mono); font-size: 8.5px; letter-spacing: 0.1em; color: oklch(0.75 0.1 90); }
.lp-note-text { font-size: 11px; line-height: 1.5; color: oklch(0.9 0.02 90); margin-top: 6px; }

.lp-stage-chips { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 7px; font-family: var(--sl-font-mono); font-size: 9.5px; }
.lp-stage-chips > span { position: relative; padding: 5px 10px; border-radius: 6px; background: oklch(0 0 0 / 0.35); border: 1px solid oklch(1 0 0 / 0.06); color: oklch(0.5 0.005 250); }
.lp-stage-chips > span::after {
    content: attr(data-t); position: absolute; inset: -1px; padding: 5px 10px; border-radius: 6px;
    background: oklch(0.21 0.02 var(--c)); border: 1px solid oklch(0.75 0.13 var(--c) / 0.5); color: oklch(0.92 0.03 250); opacity: 0;
}
.lp-demo-hint { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--sl-text-3); }

/* ── the loop ────────────────────────────────────────────────
   0–8% idle · 8–30% generating · 30–52% takes in, gate waits ·
   52% T2 picked · 56–64% sending · 64–94% sent + clip lands · 94–100% reset.
   Base styles = the FINISHED state, so reduced motion shows the
   whole story in one still frame. */
.lp-demo .lp-anim { animation-duration: var(--lp-loop); animation-iteration-count: infinite; animation-timing-function: steps(1, end); }
.lp-demo.is-paused .lp-anim,
.lp-demo.is-paused .lp-slot-spin::after,
.lp-demo.is-paused .lp-wire { animation-play-state: paused; }

.lp-a-idle  { animation-name: lpIdle; }      /* visible only while idle */
.lp-a-gen   { animation-name: lpGen; }       /* visible while generating */
.lp-a-rev   { animation-name: lpReview; }    /* visible while the gate waits */
.lp-a-send  { animation-name: lpSending; }   /* visible while sending */
.lp-a-done  { animation-name: lpDone; }      /* visible once sent */
.lp-a-in    { animation-name: lpIn; }        /* takes: hidden until they land, stay through done */
.lp-a-pick  { animation-name: lpPick; }      /* the check + green border: from the pick on */
.lp-a-dim   { animation-name: lpDim; }       /* unpicked takes fade after the pick */
.lp-a-pre   { animation-name: lpPre; }       /* before the clip lands */
.lp-a-block { animation-name: lpBlocked; }   /* before takes land */
.lp-a-cursor{ animation-name: lpCursor; animation-timing-function: ease-in-out; }

@keyframes lpIdle    { 0%, 7.9% { opacity: 1; } 8%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes lpBlocked { 0%, 29.9% { opacity: 1; } 30%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes lpGen     { 0%, 7.9% { opacity: 0; } 8%, 29.9% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes lpReview  { 0%, 29.9% { opacity: 0; } 30%, 55.9% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes lpSending { 0%, 55.9% { opacity: 0; } 56%, 63.9% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes lpDone    { 0%, 63.9% { opacity: 0; } 64%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes lpIn      { 0%, 29.9% { opacity: 0; } 30%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes lpPick    { 0%, 51.9% { opacity: 0; } 52%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes lpDim     { 0%, 55.9% { opacity: 1; } 56%, 93.9% { opacity: 0.4; } 94%, 100% { opacity: 1; } }
@keyframes lpPre     { 0%, 63.9% { opacity: 1; } 64%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes lpCursor  {
    0%, 36%  { opacity: 0; transform: translate(60px, 50px); }
    40%      { opacity: 1; transform: translate(60px, 50px); }
    50%, 54% { opacity: 1; transform: translate(0, 0); }
    60%, 100%{ opacity: 0; transform: translate(0, 0); }
}
@keyframes lpWire    { to { stroke-dashoffset: -26; } }
@keyframes lpSpin    { to { transform: rotate(360deg); } }
@keyframes lpPulse   { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.lp-wire-live { animation: lpWire 1.1s linear infinite; }
.lp-sc-gen::after  { animation: lpGen var(--lp-loop) steps(1, end) infinite; }
.lp-sc-gate::after { animation: lpReview var(--lp-loop) steps(1, end) infinite; }
.lp-sc-cut::after  { animation: lpDone var(--lp-loop) steps(1, end) infinite; }
.lp-demo.is-paused .lp-stage-chips > span::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .lp-demo .lp-anim, .lp-stage-chips > span::after, .lp-wire-live, .lp-slot-spin::after, .lp-kicker-dot { animation: none !important; }
    /* finished state: hide the transient layers */
    .lp-a-idle, .lp-a-gen, .lp-a-rev, .lp-a-send, .lp-a-pre, .lp-a-block, .lp-a-cursor { opacity: 0; }
    .lp-a-dim { opacity: 0.4; }
    .lp-stage-chips > span::after { opacity: 1; }
    .lp-pause { display: none; }
}
/* transient layers start hidden when not animating at all (no-JS pause state keeps them in-loop) */
.lp-a-cursor { opacity: 0; }

/* ── section heads ── */
.lp-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lp-h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: oklch(0.96 0.002 250); }
.lp-h2-sub { font-size: 14px; color: var(--sl-text-3); }
.lp-p { font-size: 14.5px; line-height: 1.6; color: oklch(0.7 0.005 250); margin: 8px 0 0; }

/* ── chip tabs (node explorer + surfaces) ── */
.lp-tabs { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.lp-tab.sl-chip { height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13px; gap: 7px; border-color: oklch(1 0 0 / 0.09); background: var(--sl-app); }
.lp-tab.sl-chip:hover { background: var(--sl-quiet); color: var(--sl-text-1); }
.lp-tab.sl-chip[aria-selected="true"] { background: var(--sl-accent-tint); border-color: oklch(0.72 0.13 230 / 0.5); color: var(--sl-accent-text); }
.lp-tab .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }

.lp-well {
    margin-top: 16px; border: 1px solid oklch(1 0 0 / 0.08); border-radius: 16px; padding: 30px;
    background-color: oklch(0.148 0.003 250);
    background-image: radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: 22px 22px;
}
.lp-panel { display: flex; align-items: center; gap: 36px; min-height: 236px; }
.lp-panel[hidden] { display: none; }
.lp-panel-copy { max-width: 440px; }
.lp-panel-title { font-size: 22px; font-weight: 600; color: oklch(0.96 0.002 250); }
.lp-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: oklch(0.72 0.005 250); }
.lp-list li { display: flex; gap: 9px; align-items: flex-start; }
.lp-list li svg { margin-top: 3px; color: var(--sl-accent); }

.lp-card-node { width: 320px; flex: none; }
.lp-card-node .lp-n { position: relative; }
.lp-gen-grid { padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: var(--sl-font-mono); font-size: 9.5px; color: oklch(0.7 0.005 250); }
.lp-gen-grid > span { background: var(--lp-bg-2); border: 1px solid oklch(1 0 0 / 0.07); padding: 5px 8px; border-radius: 5px; }
.lp-gen-grid > .wide { grid-column: span 2; }
.lp-gen-grid > .hot { background: oklch(0.72 0.13 230 / 0.14); border-color: oklch(0.72 0.13 230 / 0.3); color: oklch(0.85 0.09 230); }
.lp-n-foot { border-top: 1px solid oklch(1 0 0 / 0.06); padding: 8px 12px; display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--sl-font-mono); font-size: 9px; color: oklch(0.6 0.005 250); }
.lp-n-foot > span { background: oklch(1 0 0 / 0.06); padding: 2px 6px; border-radius: 4px; }

/* ── surfaces (video editor / assets / workspaces) ── */
.lp-surface { background: var(--sl-app); padding: 22px; }
.lp-surface .lp-panel { gap: 22px; min-height: 250px; }
.lp-surface-main { flex: 1; min-width: 0; }
.lp-surface-copy { width: 300px; flex: none; font-size: 13.5px; line-height: 1.55; color: oklch(0.7 0.005 250); }
.lp-surface-copy strong { color: oklch(0.94 0.002 250); font-weight: 600; }
.lp-tl { background: oklch(0.138 0.003 250); border: 1px solid oklch(1 0 0 / 0.07); border-radius: 11px; padding: 14px; overflow: hidden; }
.lp-tl-rows { display: flex; flex-direction: column; gap: 5px; }
.lp-tl-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lp-tl-row > b { font-family: var(--sl-font-mono); font-weight: 500; font-size: 8.5px; color: oklch(0.5 0.005 250); width: 24px; flex: none; }
.lp-tl-row > span { flex: 0 1 auto; min-width: 0; border-radius: 5px; }
.lp-tl-v > span { height: 34px; background: linear-gradient(155deg, oklch(0.48 0.07 var(--h)), oklch(0.28 0.045 var(--h))); }
.lp-tl-v2 > span { height: 22px; background: oklch(0.72 0.13 230 / 0.2); border: 1px solid oklch(0.72 0.13 230 / 0.4); }
.lp-tl-a > span { height: 20px; background: oklch(0.55 0.1 300 / 0.4); }
.lp-tl-c > span { height: 14px; background: oklch(0.8 0.14 85 / 0.35); }
.lp-tl-sel { outline: 1.5px solid var(--sl-accent); outline-offset: -1.5px; }
.lp-pills { display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; font-family: var(--sl-font-mono); font-size: 9.5px; color: oklch(0.66 0.005 250); }
.lp-pills > span { background: oklch(1 0 0 / 0.06); padding: 4px 8px; border-radius: 5px; }
.lp-pills > .ok { background: oklch(0.8 0.15 155 / 0.14); color: oklch(0.85 0.14 155); }
.lp-assets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.lp-assets > span { aspect-ratio: 4 / 3; border-radius: 7px; background: linear-gradient(155deg, oklch(0.46 0.065 var(--h)), oklch(0.26 0.04 var(--h))); }
.lp-assets > .drop { background: none; border: 1.5px dashed oklch(0.72 0.13 230 / 0.4); color: var(--sl-accent); display: flex; align-items: center; justify-content: center; }
.lp-ws { display: flex; flex-direction: column; gap: 10px; }
.lp-ws-team { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: oklch(0.138 0.003 250); border: 1px solid oklch(1 0 0 / 0.07); border-radius: 11px; }
.lp-ws-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(140deg, oklch(0.6 0.13 300), oklch(0.4 0.1 300)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: oklch(0.97 0 0); flex: none; }
.lp-ws-name { font-size: 13px; font-weight: 600; }
.lp-ws-sub { font-family: var(--sl-font-mono); font-size: 9.5px; color: var(--sl-text-3); }
.lp-faces { margin-left: auto; display: flex; }
.lp-face { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid oklch(0.138 0.003 250); background: linear-gradient(140deg, oklch(0.66 0.12 var(--h)), oklch(0.44 0.09 var(--h))); }
.lp-face + .lp-face { margin-left: -8px; }
.lp-ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; color: oklch(0.74 0.005 250); }
.lp-ws-box { background: oklch(0.138 0.003 250); border: 1px solid oklch(1 0 0 / 0.07); border-radius: 11px; padding: 12px; min-width: 0; }
.lp-ws-box .sl-kicker { display: block; margin-bottom: 8px; }
.lp-ws-box div + div { margin-top: 4px; }

/* ── agents + collaboration ── */
.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-duo-card { border: 1px solid oklch(1 0 0 / 0.09); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.lp-term { background: oklch(0.105 0.003 250); }
.lp-term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid oklch(1 0 0 / 0.06); }
.lp-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lp-term-bar span { margin-left: 8px; font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-term-body { flex: 1; padding: 16px 18px; font-family: var(--sl-font-mono); font-size: 11.5px; line-height: 1.9; color: oklch(0.55 0.005 250); overflow-wrap: anywhere; }
.lp-term-body .you { color: oklch(0.82 0.005 250); }
.lp-term-body .you b { color: var(--lp-ok); font-weight: 500; }
.lp-term-body .arg { color: oklch(0.66 0.005 250); }
.lp-term-body .hot { color: oklch(0.83 0.12 85); }
.lp-term-body .done { color: var(--lp-ok); margin-top: 9px; }
.lp-caret { animation: lpPulse 1.2s ease-in-out infinite; }
.lp-duo-copy { padding: 0 18px 20px; }
.lp-duo-title { font-size: 20px; font-weight: 600; color: oklch(0.96 0.002 250); }
.lp-duo-copy p { font-size: 13.5px; line-height: 1.55; color: oklch(0.68 0.005 250); margin: 7px 0 0; }
.lp-collab { background: oklch(0.148 0.003 250); }
.lp-collab-canvas {
    position: relative; flex: 1; min-height: 246px; overflow: hidden;
    background-image: radial-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px); background-size: 20px 20px;
}
.lp-collab-canvas .lp-n { width: 142px; }
.lp-cur { position: absolute; display: flex; align-items: flex-start; gap: 3px; }
.lp-cur svg { width: 16px; height: 16px; color: oklch(0.72 0.13 var(--h)); }
.lp-cur span { font-size: 10px; font-weight: 700; color: oklch(0.16 0.02 var(--h)); background: oklch(0.74 0.13 var(--h)); padding: 2px 6px; border-radius: 5px; margin-top: 10px; }
.lp-bubble { position: absolute; width: 176px; background: oklch(0.19 0.005 250); border: 1px solid oklch(0.8 0.14 85 / 0.35); border-radius: 10px; padding: 9px 11px; font-size: 11px; line-height: 1.45; color: oklch(0.8 0.005 250); }

/* ── model wall ── */
.lp-models { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-model-col { background: var(--sl-app); border: 1px solid oklch(1 0 0 / 0.08); border-radius: 14px; padding: 18px; min-width: 0; }
.lp-model-col h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.lp-model-col h3 svg { color: var(--sl-accent); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chips > span {
    font-family: var(--sl-font-mono); font-size: 11px; color: oklch(0.8 0.005 250);
    background: var(--sl-quiet); border: 1px solid var(--sl-hairline); padding: 5px 9px; border-radius: 7px;
}
.lp-chips > span small { font-size: 9.5px; color: var(--sl-text-3); margin-left: 4px; }
.lp-fine { margin-top: 12px; font-size: 12.5px; color: var(--sl-text-3); }

/* the small stuff */
.lp-rule-head { display: flex; align-items: baseline; gap: 14px; }
.lp-rule-head h2 { margin: 0; font-size: 22px; font-weight: 600; color: oklch(0.9 0.002 250); white-space: nowrap; }
.lp-rule-head::after { content: ""; height: 1px; flex: 1; background: oklch(1 0 0 / 0.08); }
.lp-small { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; font-family: var(--sl-font-mono); font-size: 11px; color: oklch(0.72 0.005 250); }
.lp-small > span { background: var(--sl-app); border: 1px solid oklch(1 0 0 / 0.08); padding: 7px 12px; border-radius: 8px; }

/* ── downloads ── */
.lp-dl-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-dl {
    background: var(--sl-app); border: 1px solid oklch(1 0 0 / 0.09); border-radius: 14px; padding: 22px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.lp-dl-top { display: flex; align-items: center; gap: 10px; }
.lp-dl-top h3 { margin: 0; font-size: 18px; font-weight: 700; }
.lp-dl-top svg { width: 20px; height: 20px; color: var(--sl-text-2); }
.lp-dl-spec { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.lp-dl p { margin: 0; font-size: 13.5px; color: oklch(0.7 0.005 250); flex: 1; }
.lp-dl .lp-btn { align-self: flex-start; }

/* ── invite + FAQ ── */
.lp-join { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
.lp-invite { background: var(--sl-app); border: 1px solid oklch(0.72 0.13 230 / 0.35); border-radius: 16px; padding: 24px; scroll-margin-top: 80px; }
.lp-invite h2 { margin: 16px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.lp-invite > p { font-size: 14px; color: oklch(0.68 0.005 250); margin: 10px 0 0; }
.lp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field > label, .lp-field > legend { font-size: 12px; font-weight: 600; color: var(--sl-text-2); padding: 0; }
.lp-field .req { color: var(--sl-text-3); font-weight: 400; }
.lp .lp-input.sl-input { height: 42px; border-radius: 10px; font-size: 14px; padding: 0 13px; background: var(--lp-bg); width: 100%; }
.lp textarea.lp-input.sl-input { height: auto; min-height: 76px; padding: 10px 13px; resize: vertical; }
fieldset.lp-field { border: none; margin: 0; padding: 0; min-width: 0; }
.lp-uses { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-use { position: relative; }
.lp-use input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lp-use span {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--sl-text-2); background: var(--sl-quiet); border: 1px solid var(--sl-hairline);
}
.lp-use input:checked + span { background: var(--sl-accent-tint); border-color: var(--sl-accent-line); color: var(--sl-accent-text); }
.lp-use input:focus-visible + span { outline: 2px solid var(--sl-focus); outline-offset: 2px; }
.lp-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-form .lp-btn { width: 100%; }
.lp-form-msg { min-height: 0; font-size: 13px; color: var(--sl-danger-text); }
.lp-form-msg:empty { display: none; }
.lp-done { margin-top: 18px; padding: 18px; border-radius: 12px; background: oklch(0.8 0.15 155 / 0.08); border: 1px solid oklch(0.8 0.15 155 / 0.3); }
.lp-done[hidden] { display: none; }
.lp-done h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.lp-done h3 svg { color: var(--lp-ok); }
.lp-done p { margin: 8px 0 0; font-size: 13.5px; color: oklch(0.74 0.005 250); overflow-wrap: anywhere; }
.lp-done strong { color: var(--sl-text-1); font-family: var(--sl-font-mono); font-size: 12.5px; font-weight: 500; }
.lp-invite-foot { font-size: 12px; color: var(--sl-text-3); margin-top: 14px; }

.lp-faq { border: 1px solid oklch(1 0 0 / 0.07); border-radius: 14px; overflow: hidden; background: oklch(1 0 0 / 0.07); display: flex; flex-direction: column; gap: 1px; }
.lp-faq details { background: oklch(0.155 0.004 250); }
.lp-faq summary {
    display: flex; align-items: center; gap: 12px; padding: 17px 20px; cursor: pointer; list-style: none;
    font-size: 14.5px; font-weight: 600; color: oklch(0.94 0.002 250);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { background: oklch(0.17 0.004 250); }
.lp-faq summary svg { margin-left: auto; color: var(--sl-text-3); transition: transform 0.15s; }
.lp-faq details[open] summary svg { transform: rotate(45deg); }
.lp-faq details > div { padding: 0 20px 17px; font-size: 13.5px; line-height: 1.6; color: oklch(0.7 0.005 250); max-width: 660px; }
.lp-faq-title { margin: 0 0 14px; font-size: 22px; font-weight: 600; }

/* ── footer ── */
.lp-foot { margin-top: 96px; border-top: 1px solid oklch(1 0 0 / 0.07); }
.lp-foot-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 40px; }
.lp-foot .lp-brand svg { width: 20px; height: 20px; }
.lp-foot .lp-brand-name { font-size: 15px; }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin: 0; padding: 0; list-style: none; }
.lp-foot-links a { color: var(--sl-text-2); }
.lp-foot-links a:hover { color: var(--sl-text-1); }
.lp-foot-copy { margin-left: auto; font-family: var(--sl-font-mono); font-size: 10.5px; color: oklch(0.5 0.005 250); }

/* ── download page ── */
.lp-doc { max-width: 820px; }
.lp-doc h1 { margin: 56px 0 0; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lp-doc .lp-lead { margin: 14px 0 0; max-width: 640px; text-align: left; }
.lp-doc h2 { margin: 56px 0 14px; font-size: 22px; font-weight: 600; }
.lp-dtabs { margin-top: 32px; }
.lp-dtabs .sl-tab { font-size: 14px; }
.lp-tabpanel { display: none; padding-top: 20px; }
.lp-tabpanel.active { display: block; }
.lp-doc .lp-dl-grid { margin-top: 0; }
.lp-card { background: var(--sl-app); border: 1px solid oklch(1 0 0 / 0.08); border-radius: 14px; padding: 20px 22px; margin-top: 14px; font-size: 14px; color: oklch(0.76 0.005 250); }
.lp-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--sl-text-1); }
.lp-card p { margin: 8px 0 0; }
.lp-card ol, .lp-card ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.lp-card strong { color: var(--sl-text-1); }
.lp-card.is-warn { border-color: oklch(0.83 0.12 85 / 0.35); }
.lp-card.is-warn h3 { color: oklch(0.88 0.1 85); }
.lp-card.is-exp { border-color: oklch(0.7 0.12 300 / 0.35); }
.lp-card.is-exp h3 { color: oklch(0.82 0.1 300); }
.lp-meta { margin-top: 14px; font-size: 13.5px; color: var(--sl-text-3); }
.lp-keys { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.lp-keys td { padding: 9px 0; border-top: 1px solid var(--sl-hairline); vertical-align: top; }
.lp-keys td:first-child { width: 150px; padding-right: 14px; font-weight: 600; color: var(--sl-text-1); }
.lp-versions { list-style: none; margin: 0; padding: 0; }
.lp-versions li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--sl-hairline); }
.lp-versions li:first-child { border-top: none; }
.lp-versions .v { font-family: var(--sl-font-mono); font-size: 13px; color: var(--sl-text-1); min-width: 70px; }
.lp-versions .d { font-size: 12.5px; color: var(--sl-text-3); }
.lp-versions .l { margin-left: auto; display: flex; gap: 14px; font-size: 13px; }
.lp-badge { font-family: var(--sl-font-mono); font-size: 9.5px; padding: 2px 6px; border-radius: 5px; margin-left: 6px; }
.lp-badge.stable { color: var(--sl-accent-text); background: var(--sl-accent-tint); }
.lp-badge.exp { color: oklch(0.82 0.1 300); background: oklch(0.7 0.12 300 / 0.15); }
.lp .lp-btn.lp-btn-exp { background: oklch(0.7 0.12 300); color: oklch(0.16 0.03 300); }

/* ── responsive ── */
@media (max-width: 960px) {
    .lp-nav { display: none; }
    .lp-join { grid-template-columns: 1fr; }
    .lp-models { grid-template-columns: 1fr 1fr; }
    .lp-surface-copy { width: 240px; }
}
@media (max-width: 760px) {
    :root { --lp-gutter: 16px; }
    .lp-section { margin-top: 72px; }
    .lp-top-inner { gap: 12px; }
    .lp-ver { display: none; }
    .lp-hero { padding-top: 40px; }
    .lp-h1 { font-size: 38px; }
    .lp-lead { font-size: 15.5px; }
    .lp-cta .lp-btn { width: 100%; }
    .lp-h2 { font-size: 27px; }
    .lp-demo { margin: 32px 0 0; border-radius: 12px; }
    .lp-demo-bar { flex-wrap: wrap; gap: 8px 10px; }
    .lp-status { order: 5; flex-basis: 100%; }
    .lp-cost { margin-left: auto; }
    .lp-well { padding: 18px; }
    .lp-panel, .lp-surface .lp-panel { flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; }
    .lp-card-node { width: 100%; max-width: 340px; align-self: center; }
    .lp-surface { padding: 16px; }
    .lp-surface-copy { width: auto; }
    .lp-assets { grid-template-columns: repeat(4, 1fr); }
    .lp-duo, .lp-models, .lp-dl-grid { grid-template-columns: 1fr; }
    .lp-collab-canvas { min-height: 230px; }
    .lp-foot-copy { margin-left: 0; width: 100%; }
    .lp-doc h1 { font-size: 30px; margin-top: 36px; }
    .lp-keys td:first-child { width: 110px; }
}
@media (max-width: 420px) {
    .lp-top-actions .lp-signin { display: none; }
    .lp-ws-grid { grid-template-columns: 1fr; }
}