/* Playground — landing.css
   The landing page at playground.ar. The design tokens are the app's own
   (copied from app.css §tokens, which is copied from Playground's
   index.html); everything else here is the page. Class prefix: ld-.
   The composer in the hero keeps the app's lc- names so its recipe is
   the app's recipe. No dark theme: the app has none. */

/* ── design tokens (app.css:6-121) ── */
:root {
  --canvas:        #F5F6F8;
  --surface:       #FFFFFF;
  --surface-2:     #F7F8FA;
  --surface-3:     #EEF0F4;
  --surface-4:     #E4E7EC;
  --border:        #E4E7EC;
  --border-strong: #D0D5DD;
  --ink:    #111318;
  --ink-2:  #454C5E;
  --ink-3:  #6B7385;
  --ink-on-color: #FFFFFF;
  --brand:        #7C3AED;
  --brand-ink:    #6425C7;
  --brand-hover:  #6D28D9;
  --brand-tint:   #EDE3FC;
  --brand-tint-2: #F6F1FE;
  --green:      #0ACF83;  --green-ink:  #047952;  --green-tint:  #DDF8EE;
  --red:        #F24E1E;  --red-ink:    #C13209;  --red-tint:    #FDE6DF;
  --amber:      #F5A524;  --amber-ink:  #8A5A05;  --amber-tint:  #FEF2E0;
  --orange:     #F97316;  --orange-ink: #C2410C;  --orange-tint: #FFEDD5;
  --blue:       #1A8CFF;  --blue-ink:   #0A5FC2;  --blue-tint:   #DFEFFF;
  --loc:        #1A8CFF;  --loc-ink:    #0A5FC2;  --loc-tint:    #DFEFFF;
  --obj:        #98A0B3;  --obj-ink:    #555C6E;  --obj-tint:    #EDEFF3;
  --char-1:  #0ACF83;  --char-1-ink: #047952;
  --char-2:  #E11FD4;  --char-2-ink: #9C1A93;
  --char-3:  #FF7262;  --char-3-ink: #C03A22;
  --char-4:  #12C0C0;  --char-4-ink: #0A6E70;
  --char-5:  #FF3D8B;  --char-5-ink: #B5155A;
  --char-6:  #F5A524;  --char-6-ink: #8A5A05;
  --char-7:  #84CC16;  --char-7-ink: #4A6E0A;
  --char-8:  #4F62F5;  --char-8-ink: #2F3FC4;
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,0.05);
  --sh-2: 0 2px 4px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --sh-3: 0 8px 20px rgba(16,24,40,0.10), 0 2px 6px rgba(16,24,40,0.05);
  --sh-4: 0 20px 48px rgba(16,24,40,0.16), 0 4px 12px rgba(16,24,40,0.08);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t:      160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-lc:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1180px;
  --gutter: 24px;
}

/* ── base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overscroll-behavior-x: a two-finger swipe to the left is also the Mac's
   "back" gesture, and a pan that wanders sideways while reading would
   leave the page. Chrome and Firefox honour this on the root; Safari does
   not, and landing.js cancels the wheel event there instead (§10). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body.ld {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
::selection { background: var(--brand-tint); color: var(--brand-ink); }
/* What a drag takes: the words, only the words. Pictures, videos and
   icons, the composer and the boards (drawn things, whatever they say),
   the frame and the reel (pictures with a button's job), the controls and
   the player's bar stay out of a selection, so a drag across the page
   highlights the text alone. Nor can a picture or a cut be dragged off
   the page, or saved from a right click or a long press, and a copy
   carries no picture (landing.js §9 keeps the same list). That keeps the
   casual grab away; what a browser shows, a browser has, so it is no lock. */
img, video, picture, canvas, svg { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
button, .ld-cs, .ld-board, .ld-frame, .ld-reel, .ld-island, .ld-player-bar { user-select: none; -webkit-user-select: none; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }
.ld-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ld-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.ld-wrap-wide { width: min(1320px, 100% - 2 * var(--gutter)); }
.ld-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); }
.ld-skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ── type ── */
.ld-h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
.ld-h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.ld-lede { font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.55; color: var(--ink-2); max-width: 62ch; margin-top: 14px; text-wrap: pretty; }
.ld-hero-lede { max-width: 58ch; }

/* ── top bar ── */
.ld-top { padding: 18px 0; }
.ld-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.ld-mark { width: 16px; height: 16px; color: var(--brand); flex: none; }
.ld-mark svg { width: 100%; height: 100%; }
.ld-brand-label { font-size: 16.5px; font-weight: 400; letter-spacing: -0.2px; }
.ld-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--ink-2); }
.ld-nav a { text-decoration: none; transition: color var(--t-fast); }
.ld-nav a:hover { color: var(--ink); }
.ld-nav-app { color: var(--brand-ink); font-weight: 500; }
/* The way in, when there is a login route (LOGIN_URL): the one solid thing
   in the bar. A button, not a link — it opens the overlay below. The narrow
   rule under it hides the section links, not this: it is not an <a>. */
.ld-nav .ld-nav-auth {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid var(--brand);
  background: var(--brand); color: var(--ink-on-color);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ld-nav .ld-nav-auth:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--ink-on-color); }
@media (max-width: 720px) {
  .ld-nav a:not(.ld-nav-app) { display: none; }
  .ld-nav .ld-nav-auth { height: 36px; padding: 0 14px; font-size: 13.5px; }
}

/* ── sections ── */
main { display: block; }
.ld-section { padding: clamp(64px, 9vw, 120px) 0 0; }
.ld-hero { padding-top: clamp(20px, 3.5vw, 44px); }
.ld-hero .ld-wrap-wide { margin-top: clamp(28px, 4vw, 48px); }
.ld-hero-box {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(8px, 2vw, 24px) 0 0;
}
.ld-hero-lede { max-width: 52ch; margin-top: 18px; }
@media (max-width: 860px) {
  .ld-hero-box { grid-template-columns: 1fr; gap: 28px; }
  .ld-hero-lede { max-width: none; }
}

/* ── buttons, pills ── */
.ld-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.ld-btn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint-2); }
.ld-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ld-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.ld-btn:disabled { opacity: .6; cursor: not-allowed; }
.ld-linkbtn { color: var(--brand-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color var(--t-fast); }
.ld-linkbtn:hover { text-decoration-color: currentColor; }
.ld-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ld-pill {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink-3);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.ld-pill:hover:not(.is-on) { border-color: var(--border-strong); color: var(--ink-2); }
.ld-pill.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ══ the board: cards and wires, laid out for the width ══
   A diagram in the flow of the page, not the canvas: the cards use the
   app's card recipe and the wires its bezier, and that is where it ends.
   Wide screens get the app's columns (a card's input on its left, its
   output on its right); narrow ones get rows, with the ports on the top
   and bottom edges, so the same chain reads top to bottom. */
.ld-board {
  position: relative; margin-top: clamp(22px, 3vw, 36px); padding: clamp(18px, 3vw, 32px) 0;
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17, 19, 24, 0.19) 1.7px, transparent 1.8px),
    radial-gradient(circle at 1px 1px, rgba(17, 19, 24, 0.12) 1px, transparent 1.1px);
  background-size: 120px 120px, 24px 24px;
  background-position: -2px -2px, -2px -2px;
}
.ld-board-inner { position: relative; min-height: 120px; }
/* No frame around a board: the dots alone say "canvas". */
.ld-board-hero { padding: clamp(24px, 3vw, 36px) 0 8px; margin-top: clamp(30px, 4vw, 52px); }
.ld-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 1; }
.ld-nodes { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.ld-board-wired { margin-top: 26px; }
.ld-board-wired .ld-board-inner { min-height: 90px; }
/* The workflows and the ideas play whole in about a second (landing.js
   §4), so their cards and wires arrive quicker than the hero's. */
.ld-board-wired .ld-node, .ld-ideas .ld-node { transition: opacity .2s ease-out, transform .3s var(--ease-out), border-color var(--t), box-shadow var(--t); }
.ld-board-wired .ld-edge.is-in, .ld-ideas .ld-edge.is-in { transition-duration: .22s; }

/* cards: the app's node recipe (app.css §node cards) at the hero's size */
.ld-node {
  --card-accent: var(--brand);
  position: absolute; width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); font-family: var(--font);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .32s ease-out, transform .5s var(--ease-out), border-color var(--t), box-shadow var(--t);
}
.ld-node.is-in { opacity: 1; transform: none; }
.ld-node:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); }
.ld-node.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint), var(--sh-3); }
.ld-node[data-accent="brand"] { --card-accent: var(--brand); }
.ld-node[data-accent="blue"]  { --card-accent: var(--loc); }
.ld-node[data-accent="green"] { --card-accent: var(--green); }
.ld-node[data-accent="amber"] { --card-accent: var(--char-6); }
.ld-node[data-accent="rose"]  { --card-accent: var(--char-5); }
.ld-node[data-accent="teal"]  { --card-accent: var(--char-4); }
.ld-node-head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; min-height: 46px; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ld-node-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent); }
.ld-node-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: -0.1px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-node-badge { flex: none; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.ld-node-body { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.ld-node-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ld-port { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); z-index: 2; transition: border-color var(--t-fast), background var(--t-fast); }
.ld-port-in  { left: -6px; top: 17.5px; }
.ld-port-out { right: -6px; bottom: 17.5px; }
.ld-board-inner[data-mode="tall"] .ld-port-in  { left: 50%; top: -6px; margin-left: -5.5px; }
.ld-board-inner[data-mode="tall"] .ld-port-out { right: auto; left: 50%; bottom: -6px; margin-left: -5.5px; }
.ld-port.is-on { border-color: var(--card-accent); background: var(--card-accent); }
.ld-edge { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.ld-edge.is-in { opacity: 1; transition: stroke-dashoffset .6s ease-out; }
.ld-node.is-mini .ld-node-head { min-height: 40px; padding: 10px 12px; }
.ld-node.is-mini .ld-node-title { font-size: 12.5px; }
.ld-node.is-mini .ld-node-body { padding: 9px 12px; font-size: 11.5px; color: var(--ink-3); }
.ld-board-inner[data-mode="tall"] .ld-node-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.ld-board-inner[data-mode="tall"] .ld-node.is-narrow .ld-node-badge { display: none; }
.ld-board-inner[data-mode="tall"] .ld-node.is-narrow .ld-node-head { padding: 10px 11px; }
.ld-board-inner[data-mode="tall"] .ld-node.is-narrow .ld-node-body { padding: 9px 11px; font-size: 11px; }

/* card bodies (the app's card-body recipes, demo.css §1) */
.ld-doc { display: block; width: 100%; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-size: 11px; line-height: 1.5; font-family: var(--font-mono); }
.ld-doc > div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.ld-clamp-2, .ld-clamp-3, .ld-clamp-4, .ld-clamp-5 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ld-clamp-2 { -webkit-line-clamp: 2; } .ld-clamp-3 { -webkit-line-clamp: 3; } .ld-clamp-4 { -webkit-line-clamp: 4; } .ld-clamp-5 { -webkit-line-clamp: 5; }
.ld-summary { font-size: 12px; color: var(--ink); line-height: 1.5; }
.ld-brieftxt { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.ld-pillrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ld-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--tag-tint, var(--surface-3)); color: var(--tag-ink, var(--ink-2)); }
.ld-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tag-dot, var(--ink-3)); flex: none; }
.ld-tag.is-loc { --tag-tint: var(--loc-tint); --tag-ink: var(--loc-ink); --tag-dot: var(--loc); }
.ld-tag.is-obj { --tag-tint: var(--obj-tint); --tag-ink: var(--obj-ink); --tag-dot: var(--obj); }
.ld-tag.is-plain::before { display: none; }
.ld-tag.is-c1 { --tag-tint: var(--green-tint); --tag-ink: var(--char-1-ink); --tag-dot: var(--char-1); }
.ld-tag.is-c2 { --tag-tint: #FBE3F8; --tag-ink: var(--char-2-ink); --tag-dot: var(--char-2); }
.ld-tag.is-c3 { --tag-tint: #FFE7E3; --tag-ink: var(--char-3-ink); --tag-dot: var(--char-3); }
.ld-tag.is-c4 { --tag-tint: #DFF6F6; --tag-ink: var(--char-4-ink); --tag-dot: var(--char-4); }
.ld-tag.is-c5 { --tag-tint: #FFE3EE; --tag-ink: var(--char-5-ink); --tag-dot: var(--char-5); }
.ld-tag.is-c6 { --tag-tint: var(--amber-tint); --tag-ink: var(--char-6-ink); --tag-dot: var(--char-6); }
.ld-tag.is-c7 { --tag-tint: #EEF8DA; --tag-ink: var(--char-7-ink); --tag-dot: var(--char-7); }
.ld-tag.is-c8 { --tag-tint: #E6E9FE; --tag-ink: var(--char-8-ink); --tag-dot: var(--char-8); }
.ld-mediagrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ld-well { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-4); aspect-ratio: 1; }
.ld-well img { width: 100%; height: 100%; object-fit: cover; }
.ld-well.is-empty { background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 5px, var(--surface-4) 5px, var(--surface-4) 10px); }
.ld-well.is-wide { aspect-ratio: 16 / 9; }
.ld-well.is-tall { aspect-ratio: 9 / 16; }
.ld-counts { margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }
.ld-rows { font-size: 11px; color: var(--ink-3); }
.ld-row { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.ld-row + .ld-row { border-top: 1px solid var(--border); }
.ld-row .n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); flex: none; width: 24px; }
.ld-row .t { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row .v { flex: none; text-align: right; color: var(--ink); font-family: var(--font-mono); font-size: 10.5px; }
.ld-row .v.is-ok { color: var(--green-ink); }
.ld-row .v.is-off { color: var(--ink-3); }
.ld-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ld-strip.is-1 { grid-template-columns: 1fr; }
.ld-strip.is-2 { grid-template-columns: repeat(2, 1fr); }
.ld-strip.is-3 { grid-template-columns: repeat(3, 1fr); }
.ld-cut { display: flex; justify-content: center; }
.ld-cut .ld-well { width: 100%; }
.ld-cut.is-tall .ld-well { width: 48%; }
.ld-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(17,19,24,.72); color: #fff; display: grid; place-items: center; }
.ld-play svg { width: 14px; height: 14px; margin-left: 2px; }
.ld-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.ld-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.ld-check.is-on { color: var(--ink-2); }
.ld-check i { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--border-strong); background: var(--surface); flex: none; display: grid; place-items: center; }
.ld-check.is-on i { background: var(--brand); border-color: var(--brand); }
.ld-check.is-on i::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.ld-select { margin-top: 8px; padding: 6px 26px 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-node-btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--ink); flex: 1; }
.ld-mini { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* the composer, from the app (app.css §landing composer), as a link */
.ld-cs { display: block; width: 100%; max-width: 480px; margin: 0 0 0 auto; cursor: default; }   /* not selectable: §base */
@media (max-width: 860px) { .ld-cs { margin: 0 auto; } }
.ld-cs .lc-composer {
  display: block; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: 12px 14px 10px; text-align: left;
}
.lc-pills { display: flex; gap: 5px; margin-bottom: 9px; }
.lc-pillbtn { font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); border: 1.5px solid transparent; }
.lc-pillbtn[data-c="brief"]  { --pill: var(--brand); --pill-ink: var(--brand-ink); --pill-tint: var(--brand-tint); }
.lc-pillbtn[data-c="script"] { --pill: var(--blue);  --pill-ink: var(--blue-ink);  --pill-tint: var(--blue-tint); }
.lc-pillbtn[data-c="ideas"]  { --pill: var(--green); --pill-ink: var(--green-ink); --pill-tint: var(--green-tint); }
.lc-pillbtn[data-c] { background: var(--pill-tint); color: var(--pill-ink); }
.lc-pillbtn.on { background: var(--pill, var(--brand)); border-color: var(--pill, var(--brand)); color: #fff; }
.lc-input-row { display: flex; align-items: flex-end; gap: 9px; }
.lc-clip-btn { display: flex; align-items: center; justify-content: center; padding: 3px; color: var(--ink); opacity: .75; align-self: flex-start; height: 20px; margin-top: 4px; flex-shrink: 0; }
.lc-clip-icon { transform: rotate(-45deg); }
.lc-ph { flex: 1; min-height: 24px; line-height: 1.45; color: var(--ink); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; padding: 4px 0; overflow: hidden; text-align: left;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ld-cs.is-sent .lc-ph { color: var(--ink-2); }
.lc-ph:empty::before { content: attr(data-ph); color: var(--ink-3); }
.lc-ph.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; background: var(--ink); vertical-align: -2px; animation: ld-caret 1s steps(2, start) infinite; }
@keyframes ld-caret { to { visibility: hidden; } }
.lc-send { width: 27px; height: 27px; border-radius: 50%; background: var(--border-strong); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .6; transition: background var(--t), opacity var(--t), transform var(--t); }
.lc-send.is-ready { background: var(--brand); opacity: 1; }
.lc-send.is-sent { transform: scale(.9); background: var(--brand-hover); }
/* ══ no brief: the composer on Ideas, wired to a wall of ideas ══
   Wide: the composer centred, four ideas in a row under it, the wires
   fanning down. Narrow: the ideas stacked, one spine down the left. */
.ld-ideas { position: relative; }
.ld-ideas .ld-edges { z-index: 1; }
.ld-ideas-cs { position: relative; z-index: 2; max-width: 440px; margin: 0 auto; --card-accent: var(--green); }
.ld-ideas-cs .ld-port-out { right: auto; left: 50%; bottom: -6px; margin-left: -5.5px; }
.ld-ideas-wall { list-style: none; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 72px; }
.ld-ideas .ld-node { position: relative; width: auto; }
.ld-ideas .ld-port-in { left: 50%; top: -6px; margin-left: -5.5px; }
.ld-ideas .ld-node-badge { margin-bottom: 8px; }
.ld-idea-line { font-size: 12.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (max-width: 899px) {
  .ld-ideas-cs { max-width: none; }
  .ld-ideas-cs .ld-port-out { left: 26px; }
  .ld-ideas-wall { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; padding-left: 44px; }
  .ld-ideas .ld-port-in { left: -6px; top: 17.5px; margin-left: 0; }
}

/* ══ what you can do ══ */
.ld-caps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.ld-cap {
  --card-accent: var(--brand);
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transition: border-color var(--t), box-shadow var(--t), transform .4s var(--ease-out);
}
.ld-cap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent); z-index: 1; }
.ld-cap:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.ld-cap[data-accent="brand"] { --card-accent: var(--brand); }
.ld-cap[data-accent="blue"]  { --card-accent: var(--loc); }
.ld-cap[data-accent="green"] { --card-accent: var(--green); }
.ld-cap[data-accent="amber"] { --card-accent: var(--char-6); }
.ld-cap[data-accent="rose"]  { --card-accent: var(--char-5); }
.ld-cap[data-accent="teal"]  { --card-accent: var(--char-4); }
.ld-cap h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; padding: 24px 22px 6px; }
.ld-cap p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding: 0 22px 24px; text-wrap: pretty; }
@media (max-width: 900px) { .ld-caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ld-caps { grid-template-columns: 1fr; gap: 14px; } }

/* ══ how it works ══ */
.ld-how-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 40px; margin-top: 40px; align-items: start; }
.ld-steps { list-style: none; }
.ld-step { position: relative; padding: 20px 0 20px 56px; border-top: 1px solid var(--border); transition: opacity .25s; }
.ld-step:first-child { border-top: 0; padding-top: 4px; }
.ld-step-n { position: absolute; left: 0; top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface-3); transition: background var(--t), color var(--t); }
.ld-step:first-child .ld-step-n { top: 8px; }
.ld-step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ld-step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; text-wrap: pretty; }
.ld-step.is-active .ld-step-n { background: var(--brand); color: #fff; }
.ld-step-img { display: none; }
.ld-stage { position: sticky; top: 24px; }
.ld-frame {
  position: relative; height: 480px; overflow: hidden; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-3); cursor: zoom-in;
  transition: height .4s var(--ease-out);
}
.ld-frame-hint { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(17,19,24,.72); color: #fff; font-family: var(--font-mono); font-size: 10.5px; opacity: 0; transition: opacity var(--t); pointer-events: none; }
.ld-frame:hover .ld-frame-hint { opacity: 1; }
.ld-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity .35s ease-out; }
.ld-shot.is-active { opacity: 1; }
@media (max-width: 900px) {
  .ld-how-grid { grid-template-columns: 1fr; gap: 0; }
  .ld-stage { display: none; }
  .ld-step { padding-left: 0; padding-top: 22px; }
  .ld-step-n { position: static; display: inline-block; margin-bottom: 10px; }
  .ld-step:first-child .ld-step-n { margin-top: 0; }
  .ld-step-img { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-2); background: var(--surface); }
  .ld-step.is-active .ld-step-n { background: var(--surface-3); color: var(--ink-3); }
}

/* ══ made in Playground: the reel ══ */
/* One row height for every card, phones included; a card is as wide as
   its shape makes it (--ld-ratio, width over height, set per card by the
   script): a tall or square cut's own, 4:3 for a landscape one, whose
   frame is cropped to the card (object-fit, around the focus the package
   files as --ld-focus) rather than shown whole. The row does not shrink
   on a phone: below ~407px a 9:16 card is too narrow for its kind pill
   beside the Spec Ad one. */
/* With the head switched off the row is the whole section, and the gap
   that stood under the pills goes with them. The row also sits closer to
   the composer than a section normally would: two thirds of the usual
   space above it, at every width (clamp(64px, 9vw, 120px) × 0.66). */
.ld-made { padding-top: clamp(42px, 5.94vw, 79px); }
#made-head[hidden] + .ld-reel { margin-top: 0; }
.ld-reel { position: relative; margin-top: 28px; overflow: hidden; padding: 12px 0 8px; --ld-reel-h: 420px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ld-reel-track { display: flex; gap: 18px; width: max-content; padding: 0 var(--gutter); animation: ld-drift var(--ld-drift, 60s) linear infinite; }
.ld-reel:hover .ld-reel-track, .ld-reel.is-still .ld-reel-track { animation-play-state: paused; }
.ld-reel.is-static { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
.ld-reel.is-static .ld-reel-track { animation: none; }
@keyframes ld-drift { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ld-half, 0px))); } }
.ld-reel-card {
  position: relative; flex: none; width: calc(var(--ld-reel-h) * var(--ld-ratio, 0.5625)); margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow var(--t), border-color var(--t);
}
.ld-reel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--border-strong); }
.ld-reel-card.is-hidden { display: none; }
.ld-reel-media { position: relative; height: var(--ld-reel-h); background: #000; }
.ld-reel-media img, .ld-reel-media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--ld-focus, 50% 50%); }
.ld-reel-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.ld-reel-media.is-playing video { opacity: 1; }
.ld-reel-kind { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(17,19,24,.72); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2px;
  max-width: calc(100% - 90px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* room for the Spec Ad pill on its right */
.ld-reel-cap { padding: 11px 13px 12px; }
.ld-reel-cap b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-reel-cap span { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ want to chat? ══ */
.ld-chat { padding-bottom: clamp(48px, 7vw, 96px); }
.ld-chat-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The mark sits alone under the line; the wrap is its own size, so the
   pen's arrow (which hangs off the wrap) lands on it at any width. */
.ld-chat-links { display: inline-flex; margin-top: 26px; }
.ld-social { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff;
  box-shadow: var(--sh-3); transition: background var(--t), transform .3s var(--ease-out), box-shadow var(--t); }
.ld-social svg { width: 30px; height: 30px; }
.ld-social:hover { transform: translateY(-3px); box-shadow: var(--sh-4); }
.ld-social:focus-visible { border-radius: 50%; }
.ld-social-li { background: #0A66C2; }              /* LinkedIn's own blue */
.ld-social-li:hover { background: #004182; }

/* ══ the island ══ */
.ld-island {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 9px 0 18px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--sh-4); color: var(--ink); text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .2s, opacity .3s, border-color var(--t);
}
.ld-island:hover { border-color: var(--brand); box-shadow: 0 24px 56px rgba(16,24,40,.2), 0 4px 12px rgba(16,24,40,.08); }
.ld-island-mark { width: 18px; height: 18px; color: var(--brand); }
.ld-island-label { font-size: 16.5px; font-weight: 400; letter-spacing: -0.2px; }
.ld-island-go { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; transition: background var(--t), transform .3s var(--ease-out); }
.ld-island-go svg { width: 16px; height: 16px; }
.ld-island:hover .ld-island-go { background: var(--brand-hover); transform: translateX(2px); }
.ld-island-float { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%); }
.ld-island-float:hover { transform: translateX(-50%) translateY(-2px); }
.ld-island-float.is-hidden { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }

/* ══ footer ══ */
.ld-foot { border-top: 1px solid var(--border); padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); font-size: 12.5px; color: var(--ink-3); }
.ld-foot-row { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ld-foot-note { text-wrap: pretty; }
.ld-foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.ld-foot-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* the one line under an email field: what the address is for, and where the rest is said */
.ld-privacy-line { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.ld-privacy-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.ld-privacy-line a:hover { color: var(--ink); text-decoration-color: currentColor; }
.ld-contact-privacy { margin-top: 4px; }
/* every finished cut on the page says what it is (the footer says it once more) */
.ld-reel-ai { position: absolute; right: 10px; top: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(17,19,24,.72); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2px; }

/* ══ a document page (privacy) on the landing's chrome ══ */
.ld-doc-body { padding: 24px 0 72px; max-width: 72ch; }
.ld-doc-body section { margin-top: 40px; }
.ld-doc-body h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.ld-doc-body h3 { font-size: 15.5px; font-weight: 600; margin: 22px 0 6px; }
.ld-doc-body p, .ld-doc-body li { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ld-doc-body p + p { margin-top: 10px; }
.ld-doc-body ul { padding-left: 20px; }
.ld-doc-body li + li { margin-top: 6px; }
.ld-doc-body a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--brand-tint); }
.ld-doc-body a:hover { text-decoration-color: currentColor; }
.ld-doc-body code { font-family: var(--font-mono); font-size: 13px; padding: 1px 5px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--ink); }
.ld-doc-body b { color: var(--ink); font-weight: 600; }

/* ══ not found (not_found.html): the hero's type and pen, nothing else ══ */
body.ld-nf-page { display: flex; flex-direction: column; }
.ld-nf { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(40px, 8vw, 96px) 0 clamp(64px, 10vw, 128px); }
.ld-nf-code { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-bottom: 18px; border-radius: var(--r-pill); border: 1px solid var(--brand-tint); background: var(--brand-tint-2); color: var(--brand-ink); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
.ld-nf .ld-lede { max-width: 48ch; margin-top: 18px; }
.ld-nf-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* the app's contact button (demo.css), bottom-right */
.ld-fab { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 48; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); box-shadow: var(--sh-3);
  display: flex; align-items: center; justify-content: center; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.ld-fab:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-tint-2); }
.ld-fab svg { width: 20px; height: 20px; display: block; }

/* ══ modals (demo.css §contact, as the page needs them) ══ */
.ld-modal-overlay { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(17,19,24,.34); backdrop-filter: blur(2px); }
.ld-modal-overlay.show { display: flex; }
.ld-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--ink-2); z-index: 2; }
.ld-modal-close:hover { color: var(--red-ink); border-color: #F3B7A4; background: var(--red-tint); }
.ld-modal-close svg { width: 14px; height: 14px; }
.ld-player { position: relative; width: min(960px, 100%); max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; }
/* The well is the cut's own shape (the script sizes it from the picture,
   whatever the package calls the cut), so the cut fills it edge to edge.
   Nothing lies over the picture: the controls are the bar under it, and
   a paused cut shows one small disc in the middle. */
.ld-player-well { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; flex: none; cursor: pointer; }
.ld-player-well video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ld-player-badge { width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.ld-player-badge svg { width: 22px; height: 22px; margin-left: 3px; }
.ld-player-well.is-paused .ld-player-badge { opacity: 1; }
.ld-player-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.ld-player-btn { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.ld-player-btn:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-tint-2); }
.ld-player-btn svg { width: 16px; height: 16px; display: block; }
.ld-player-btn.is-primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.ld-player-btn.is-primary:hover { color: #fff; background: var(--brand-hover); border-color: var(--brand-hover); }
.ld-player-btn .ld-ico-pause, .ld-player-btn .ld-ico-muted, .ld-player-btn .ld-ico-exit { display: none; }
.ld-player.is-playing .ld-ico-play, .ld-player.is-muted .ld-ico-sound, .ld-player.is-full .ld-ico-enter { display: none; }
.ld-player.is-playing .ld-ico-pause, .ld-player.is-muted .ld-ico-muted, .ld-player.is-full .ld-ico-exit { display: block; }
.ld-player-time { flex: none; min-width: 38px; font-size: 12px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.ld-player-seek { flex: 1; min-width: 60px; height: 20px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; --ld-p: 0%; }
.ld-player-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand) var(--ld-p), var(--surface-4) var(--ld-p)); }
.ld-player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: var(--sh-2); }
.ld-player-seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-4); }
.ld-player-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
.ld-player-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: var(--sh-2); }
.ld-player-seek:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
/* Full screen is the box itself, so the bar stays and only the picture grows. */
.ld-player.is-full { width: 100% !important; height: 100%; max-height: none; border: 0; border-radius: 0; background: #000; }
.ld-player.is-full .ld-player-well { flex: 1; min-height: 0; aspect-ratio: auto !important; }
.ld-player.is-full .ld-player-nav, .ld-player.is-full .ld-player-foot, .ld-player.is-full .ld-modal-close { display: none; }
/* ── log in / create account ── */
/* The contact modal's box, with the two tabs on top. Nothing in it takes a
   password: both buttons leave the page (AUTH_PLAN.md §30). */
.ld-auth {
  position: relative; width: 420px; max-width: 100%; max-height: calc(100dvh - 40px); overflow: auto;
  padding: 26px 26px 22px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: var(--r-lg); box-shadow: var(--sh-4);
}
.ld-auth-mark { display: block; width: 26px; height: 26px; margin: 0 auto 10px; color: var(--brand); }
.ld-auth-mark svg { width: 100%; height: 100%; }
.ld-auth h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.ld-auth-tabs { display: flex; gap: 4px; margin: 18px 0 16px; padding: 4px; background: var(--surface-3); border-radius: var(--r-pill); }
.ld-auth-tab { flex: 1; height: 36px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: background var(--t-fast), color var(--t-fast); }
.ld-auth-tab:hover { color: var(--ink); }
.ld-auth-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.ld-auth-say { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ld-auth-go { width: 100%; height: 44px; justify-content: center; margin-top: 16px; border-radius: var(--r-pill); }
.ld-auth-privacy { margin-top: 14px; }

.ld-lightbox { position: fixed; inset: 0; z-index: 320; display: none; overflow: auto; padding: 24px; background: rgba(17,19,24,.78); cursor: zoom-out; }
.ld-lightbox.show { display: block; }
.ld-lightbox img { width: min(1600px, 100%); height: auto; margin: 0 auto; border-radius: var(--r-lg); box-shadow: var(--sh-4); background: var(--surface); }
.ld-player-nav { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }
.ld-player-arrow { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); transition: color var(--t-fast), border-color var(--t-fast); }
.ld-player-arrow:hover { color: var(--brand-ink); border-color: var(--brand); }
.ld-player-arrow svg { width: 16px; height: 16px; }
.ld-player-variants { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ld-player-variants::-webkit-scrollbar { display: none; }
.ld-variant { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color var(--t), background var(--t), color var(--t); }
.ld-variant:hover { border-color: var(--border-strong); color: var(--ink); }
.ld-variant.is-on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
.ld-variant-flag { font-size: 17px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ld-variant.is-format { font-family: var(--font-mono); font-weight: 500; }
.ld-player-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ld-player-title { min-width: 0; flex: 1 1 160px; }
.ld-player-title b, .ld-player-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-player-title b { font-size: 14px; }
/* the name, and beside it the spec-ad pill, which never shrinks */
.ld-player-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ld-player-head b { min-width: 0; }
.ld-player-title .ld-spec { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--orange-tint); border: 1px solid #FDBA74; color: var(--orange-ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ld-contact { position: relative; width: 440px; max-width: 100%; max-height: calc(100dvh - 40px); overflow: auto; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--sh-4); }
.ld-contact h3 { font-size: 16px; margin-bottom: 4px; }
.ld-contact-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.ld-field { display: block; margin-bottom: 12px; }
.ld-field > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 5px; }
.ld-field input, .ld-field textarea { width: 100%; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--t-fast), background var(--t-fast); }
.ld-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.ld-field input:focus, .ld-field textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.ld-field.is-invalid input { border-color: var(--red); background: var(--red-tint); }
.ld-field-hint { display: none; margin-top: 6px; font-size: 12px; color: var(--red-ink); }
.ld-field.is-invalid .ld-field-hint { display: block; }
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ld-contact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.ld-contact-error { flex: 1; font-size: 12.5px; color: var(--red-ink); }
.ld-contact-ok { text-align: center; padding: 10px 0 4px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ld-contact-ok b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.ld-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(8px); z-index: 400; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; box-shadow: var(--sh-3); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); }
.ld-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ the pen: the review window's marker, loose on the page ══
   A few marks drawn by hand around the words that matter in the titles
   and next to the pictures — a loop, an underline, an arrow — in the
   pen's four colours (never the brand purple). The template says what is
   marked; pen.js draws it as SVG, crisp at any size, the first time it
   scrolls into view. The stroke sits over the page like ink over print
   (no blend mode: a blended overlay blanks the page in some Chromium
   builds). In the title alone it goes behind the word instead, the
   letters over the loop: the span is made its own stacking context
   (a z-index on the positioned inline), so a negative z-index puts the
   SVG under the word and under nothing else — without that it would
   fall behind the body's background. */
.ld-pen { position: relative; white-space: nowrap; }
.ld-pen-probe { display: inline-block; width: 0; height: 0; }
.ld-pen-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; pointer-events: none; z-index: 1; }
.ld-pen-svg path { fill: none; stroke: var(--pen, var(--red)); stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.ld-h1 .ld-pen { z-index: 0; }
.ld-h1 .ld-pen-svg { z-index: -1; }
[data-pen][data-ink="red"]   { --pen: var(--red); }
[data-pen][data-ink="amber"] { --pen: var(--amber); }
[data-pen][data-ink="green"] { --pen: var(--green); }
[data-pen][data-ink="blue"]  { --pen: var(--blue); }
/* The arrows and strokes: empty boxes placed next to what they point at.
   The box is the pen's room; the arrow runs from one point of it to
   another (data-from, data-to) and bends to one side (data-bend). */
.ld-pen-arrow { position: absolute; pointer-events: none; z-index: 2; }
/* Off the end of the lede's line: no offsets, so it takes its static
   position, and that is the inline one (after the last word) as long as
   nothing sets display on it. Down onto the frame from there. */
.ld-pen-how { margin-left: 12px; margin-top: -10px; width: 120px; height: 82px; }
.ld-chat-links { position: relative; }
.ld-pen-chat { left: -146px; top: -40px; width: 132px; height: 100px; }
@media (max-width: 900px) { .ld-pen-how { display: none; } }
@media (max-width: 780px) { .ld-pen-chat { display: none; } }

/* ══ responsive ══ */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .ld-board { padding: 14px 0; }
  .ld-lede { font-size: 15.5px; }
  .ld-hero-box { padding: 4px 0 0; }
  .ld-player-foot { flex-direction: column; align-items: stretch; }
  .ld-player-title { flex: none; }
  .ld-fab { right: 14px; }
  .ld-chat-row { height: 56px; padding-left: 18px; }
}

/* ══ motion off when asked ══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ld-node, .ld-cs .lc-composer, .ld-cap, .ld-shot, .ld-frame, .ld-reel-card, .ld-island, .ld-chat-go, .ld-edge { transition: none !important; }
  .ld-reel-track { animation: none !important; }
  .lc-ph.is-typing::after { animation: none; }
  .ld-pen-svg path { transition: none !important; }
}