/* The clip is one 1600 x 900 stage, rendered at 1920 x 1080, or for the
   4:5 version one 1080 x 1350 stage at its own size. promo.js sets
   every moving value from the clock, so nothing here transitions or
   animates on its own. */

/* Every face the clip draws is in assets/fonts, so the folder stands on its own. */
@font-face { font-family: "Jjannon Display"; src: url("assets/fonts/JJannon-Display-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: block; }
/* Sonata's faces, for the call to action built inside the folder. */
@font-face { font-family: "EB Garamond"; src: url("assets/fonts/eb-garamond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Funnel Sans"; src: url("assets/fonts/funnel-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
/* The licensed Sohne cut the site's diagram ships. */
@font-face { font-family: "LP Sohne"; src: url("assets/fonts/soehne-buch.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

:root {
  --ink: #002142;
  --ink-62: rgba(0, 33, 66, .62);
  --ink-38: rgba(0, 33, 66, .38);
  --line: #e5e5e5;
  /* The cast takes Little Plains' illustration colors: the sun, the waves,
     the dune grass and the umbrella. One value each, for every use. */
  --sun: #f0b429;
  --wave: #3593ee;
  --dune: #479c58;
  --umbrella: #d0392f;
  --box: #e2e2e2;
  --sans: "LP Sohne", "Helvetica Neue", Arial, sans-serif;
  /* The article's kit figure sets its file names in JetBrains Mono. */
  --mono: "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
/* The stage is a fixed layout scaled to fit, so phone browsers must not
   enlarge its text, as Safari does when a phone turns to landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; color: var(--ink); }

.frame { position: relative; width: 1600px; height: 900px; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; overflow: hidden; background: #fff; transform-origin: 0 0; }

/* The diagram draws in stage pixels, so a 1px line stays 1px at any zoom. */
.diagram { position: absolute; left: 0; top: 0; overflow: visible; font-family: var(--sans); }
.diagram .line { fill: none; stroke: var(--line); stroke-width: 1; }
.diagram .label { fill: var(--ink); dominant-baseline: central; }
.diagram .pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.diagram .folder-fill { fill: #fff; }
.diagram .folder-outline { fill: none; }
.diagram .folder-title { fill: var(--ink); font-size: 21.21px; letter-spacing: -.5302px; }
.diagram .box { fill: #fff; }
/* The title version: JJannon over the diagram, the wordmark under it. */
.diagram .title { fill: var(--ink); font-family: "Jjannon Display", Georgia, serif; font-weight: 300; letter-spacing: -.012em; }

/* The kit window. It lives inside the folder at 1360 x 768 and the camera
   scales it, so it takes no will-change: text re-rasterizes at each scale. */
.win { position: absolute; left: 0; top: 0; width: 1360px; height: 768px; transform-origin: 0 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 33, 66, .06), 0 2px 6px rgba(0, 33, 66, .03); visibility: hidden; }
.win-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 24px; border-bottom: 1px solid var(--line); font: 400 14px/1 var(--sans); color: var(--ink); }
.crumbs span { color: var(--ink-38); }
.presence { display: flex; }
.presence i { width: 30px; height: 30px; margin-left: -7px; border-radius: 50%; border: 2px solid #fff; background: var(--c); color: var(--t, #fff); display: grid; place-items: center; font: 400 10.5px/1 var(--sans); letter-spacing: .04em; font-style: normal; opacity: 0; }
.win-body { display: flex; height: calc(100% - 56px); }
.tree { width: 280px; flex: none; padding: 14px 12px; background: #fafafa; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.tree b { font: 400 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); padding: 16px 12px 9px; }
.tree b:first-child { padding-top: 6px; }
.tree span { position: relative; font: 400 13px/1 var(--mono); color: var(--ink-62); padding: 8px 12px; border-radius: 8px; }
.tree span.open { background: #ededed; color: var(--ink); }
.tree .row-sel { position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--c); opacity: 0; }
.portrait .tree { width: 240px; }
.file { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-bar { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); font: 400 14px/1 var(--sans); color: var(--ink); }
/* The view switch starts on Code, for the text, and promo.js moves it to
   Preview as the first artifact opens. */
.tabs { display: flex; gap: 4px; }
.tabs b { font: 400 13px/1 var(--sans); padding: 8px 12px; border-radius: 8px; color: var(--ink-38); }
.tabs #view-code { background: #f1f6fb; color: var(--ink); }
/* One tab for the file, then one per artifact. promo.js opens each and moves the active fill to it. */
.docs { display: flex; gap: 4px; }
.docs b { font: 400 14px/1 var(--sans); padding: 8px 12px; border-radius: 8px; color: var(--ink); }
.docs b + b { opacity: 0; }
.canvas { position: relative; flex: 1; min-height: 0; }
.art { position: absolute; inset: 20px; border-radius: 12px; }

/* The text, the brand's voice-and-tone.md. Claude selects its principles
   with a drag; each .hl is that selection on one line. */
.src { position: absolute; inset: 0; padding: 24px 28px; font: 400 14px/24px var(--mono); color: rgba(0, 33, 66, .78); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%); mask-image: linear-gradient(to bottom, #000 74%, transparent 97%); }
.src p { position: relative; margin: 0; white-space: pre; height: 24px; }
.src p.gap { height: 12px; }
.src p.read { z-index: 0; }
.src .hl { position: absolute; left: -4px; top: 1px; height: 22px; width: 0; border-radius: 3px; background: color-mix(in srgb, var(--sun) 30%, transparent); z-index: -1; }

/* The badge colorways, to the product kit's Badge: 28px pills, 16px sides,
   JetBrains Mono 13/14 at .05em in capitals, the colors from its tokens.
   The canvas shows them at twice size, --k, so they read at the clip's
   scale. Each badge is a grey outline with the paint over it: promo.js
   shapes them first, from Badge.tsx, then paints them, from tokens.css. */
.badges { --k: 2; opacity: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14px * var(--k)); }
.bdg-row { display: flex; gap: calc(14px * var(--k)); }
.bdg { position: relative; display: flex; opacity: 0; }
.bdg i { display: inline-flex; align-items: center; justify-content: center; height: calc(28px * var(--k)); padding: 0 calc(16px * var(--k)); border-radius: 999px; font: 400 calc(13px * var(--k))/calc(14px * var(--k)) "JetBrains Mono", monospace; font-style: normal; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #2b2b2b; }
.bdg .shape { background: #fff; box-shadow: inset 0 0 0 1px #dbdbdb; color: rgba(43, 43, 43, .4); }
.bdg .paint { position: absolute; inset: 0; opacity: 0; }
.paint.lit { box-shadow: inset 0 0 calc(5px * var(--k)) 0 rgba(255, 255, 255, .3); }
.paint.default { background: #2b2b2b; color: #fff; }
.paint.ghost { background: #e6e6e6; }
.paint.lavender { background: #ede4fb; }
.paint.mint { background: #ccefe4; }
.paint.coral { background: #ffc9c1; }
.paint.azure { background: #d5ebff; }
.paint.gradient { background: linear-gradient(to right, #fffbf3, #d8f1e9); }
.paint.outlined { background: #fff; box-shadow: inset 0 0 0 calc(.5px * var(--k)) #3d3d3d; }
.paint.ai { background: #fffbf3; box-shadow: calc(2px * var(--k)) calc(2px * var(--k)) calc(5px * var(--k)) 0 #5585ff33, calc(-2px * var(--k)) calc(-2px * var(--k)) calc(5px * var(--k)) 0 #ff948433; }

/* The founding member CTA, to the guided demo's own values: the kit's cosmic
   latte ground, the flower that blurs to become it, EB Garamond over Funnel
   Sans, and the Section badge and large black button from the product kit.
   promo.js reveals each piece as an agent opens the file it comes from. */
.cta { isolation: isolate; overflow: hidden; background: #fffbf3; display: flex; align-items: center; justify-content: center; padding: 32px; color: #2b2b2b; opacity: 0; }
.flower { position: absolute; inset: 0; z-index: -2; opacity: 0; }
.flower img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 42%; }
.veil { position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(180deg, color-mix(in srgb, #fffbf3 54%, transparent), color-mix(in srgb, #fffbf3 32%, transparent) 48%, color-mix(in srgb, #fffbf3 70%, transparent)); }
.cta-copy { display: flex; align-items: center; flex-direction: column; gap: 24px; width: 100%; max-width: 460px; text-align: center; }
.cta-copy > :not(.cta-action), .cta-action > * { opacity: 0; }
.cta-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border-radius: 999px; background: #ffffffcc; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); font: 400 13px/14px "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: #2b2b2b; }
.cta-h { margin: 0; max-width: 15ch; font: 400 48px/1.05 "EB Garamond", serif; letter-spacing: -.02em; text-wrap: balance; }
.cta-p { margin: 0; max-width: 29ch; font: 400 16px/1.5 "Funnel Sans", sans-serif; color: #2b2b2bcc; text-wrap: pretty; }
.cta-action { display: flex; align-items: center; flex-direction: column; gap: 16px; padding-top: 8px; }
.cta-btn { display: inline-flex; align-items: center; height: 62px; padding: 0 32px; border-radius: 999px; background: linear-gradient(to bottom, #171717, #2f2f2f); box-shadow: inset 0 -2px 6px rgba(255, 255, 255, .25); font: 400 20px/28px "Funnel Sans", sans-serif; color: #fff; }
.cta-note { max-width: 25ch; font: 400 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: #2b2b2bcc; text-wrap: balance; }

/* The closing clip's bento: its frames at 1380 x 721, which the camera scales. */
.bento { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }

/* Cursors */
.cursors { position: absolute; inset: 0; pointer-events: none; }
.cursor { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor .arrow { position: absolute; left: -2px; top: -2px; width: 24px; height: 24px; transform-origin: 2px 2px; filter: drop-shadow(0 1px 1.5px rgba(0, 20, 40, .28)); }
.cursor .tag { position: absolute; left: 15px; top: 19px; display: flex; align-items: center; height: 23px; padding: 0 9px; border-radius: 999px; background: var(--c); color: var(--t, #fff); font: 400 12.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 20, 40, .16); }
.cursor .ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--l, var(--c)); opacity: 0; }

/* Preview controls, hidden during capture */
.controls { position: fixed; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff; border-top: 1px solid var(--line); font: 400 13px/1 var(--sans); color: var(--ink); }
.controls button { font: inherit; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0, 33, 66, .15); background: #fff; color: var(--ink); cursor: pointer; }
.controls input { flex: 1; accent-color: var(--ink); }
.controls output { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.capture .controls, .embed .controls { display: none; }
.embed body { overflow: hidden; }