/* scrimpl landing v4: the demos. Each one is a fixed-size world (world units = pixels of the 1440-wide page it shows),
   scaled to its stage by --k. Inside: scrimpl's real result of a famous page (an inline svg) and the app's own props
   (cursor, selection corners, toolbar, shelf, pop-up card, video panel), all moved by anim.js. */

.stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  --k: 1;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  contain: layout paint;
}
.world { position: absolute; left: 0; top: 0; transform: scale(var(--k)); transform-origin: 0 0; }
.world * { will-change: auto; }
.demo .ss, .out .ss { display: block; overflow: visible; max-width: none; }
.demo .ss text { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.aw { transform-box: fill-box; transform-origin: 50% 50%; }
.abs { position: absolute; left: 0; top: 0; }

/* The hero: a white page that later sits on its brand's background */
.demo-hero .stage { background: #fff; box-shadow: var(--shadow-media); border: 1px solid rgba(0, 0, 0, .07); }
.demo-f .stage { border-radius: 16px; }
.demo-hero .stage.tight { background: #ECE9E4; }
.demo-hero .stage.tight .d-win { border-radius: 16px !important; }
.tone-butter .stage { background: var(--tone-butter); }
.tone-mint .stage { background: var(--tone-mint); }
.tone-peach .stage { background: var(--tone-peach); }
.tone-sky .stage { background: var(--tone-sky); }
.tone-stone .stage { background: var(--tone-stone); }
.tone-pink .stage { background: var(--tone-pink); }

.d-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.d-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.d-win {
  position: absolute;
  overflow: hidden;
  background: #fff;
  transform-origin: 50% 50%;
}
.d-win > img, .d-win > .ss { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.d-shot { object-fit: cover; }
.d-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .345); }
.d-crop { position: absolute; background-repeat: no-repeat; }

/* the cursor: the oversized macOS arrow, hotspot at the tip; a click rings out from the tip */
.d-cursor { position: absolute; left: 0; top: 0; z-index: 30; transform-origin: 4px 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
.d-cursor svg { display: block; }
.d-ring { position: absolute; left: 0; top: 0; z-index: 29; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid rgba(67, 110, 255, .75); opacity: 0; }

/* scrimpl's selection: blue viewfinder corners (the app's selection signature) */
.d-corners { position: absolute; z-index: 20; transform-origin: 50% 50%; opacity: 0; }
.d-corners i { position: absolute; width: 22px; height: 22px; border: 0 solid #436EFF; }
.d-corners .tl { left: -3px; top: -3px; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 6px; }
.d-corners .tr { right: -3px; top: -3px; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 6px; }
.d-corners .bl { left: -3px; bottom: -3px; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 6px; }
.d-corners .br { right: -3px; bottom: -3px; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 6px; }
.d-corners.thin i { width: 16px; height: 16px; }

/* the selection toolbar (ctxbar) */
.d-toolbar {
  position: absolute;
  z-index: 25;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 14px;
  background: #1B1B19;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  font: 500 17px/1 'Geist', system-ui, sans-serif;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  transform-origin: 50% 100%;
  opacity: 0;
}
.d-tb { padding: 10px 13px; border-radius: 10px; }
.d-tb.hot { background: rgba(255, 255, 255, .1); color: #fff; }
.d-tb.go { background: #fff; color: #141413; }

/* the Hidden shelf at the stage's right edge */
.d-shelf {
  position: absolute;
  z-index: 18;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 8px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06);
  font: 600 13px/1 'Geist', system-ui, sans-serif;
  color: rgba(0, 0, 0, .55);
  transform-origin: 100% 50%;
}
.d-shelf b { font-weight: 600; color: rgba(0, 0, 0, .55); letter-spacing: .01em; }
.d-shelf .tile { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #F1F0EE center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.d-shelf .count { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #141413; color: #fff; font: 600 12px/22px 'Geist', system-ui, sans-serif; text-align: center; }

/* the floating Simplify button (the app's next step) */
.d-pill {
  position: absolute;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 0 18px;
  height: 58px;
  border-radius: 16px;
  background: #141413;
  color: #fff;
  font: 600 21px/1 'Geist', system-ui, sans-serif;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  transform-origin: 50% 50%;
}
.d-pill .spark { width: 22px; height: 22px; }
.d-pill .sub { font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, .6); }
.d-pill .key { display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px; background: rgba(255, 255, 255, .14); font-size: 15px; }

/* the video moment: a player bar under the framed screen */
.d-player {
  position: absolute;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 16px 0 14px;
  border-radius: 14px;
  background: rgba(20, 20, 19, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font: 500 15px/1 'Geist', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.d-player .bar { position: relative; width: 340px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.d-player .bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.d-player .chip { padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.d-player svg { width: 16px; height: 16px; }
.d-rec { position: absolute; z-index: 26; display: flex; align-items: center; gap: 8px; font: 600 14px/1 'Geist', system-ui, sans-serif; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.d-rec i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }

.d-logo { position: absolute; z-index: 3; }
.d-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* a label above a demo moment ("Spotlight", "Hidden") */
.d-chip {
  position: absolute;
  z-index: 24;
  padding: 9px 13px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06);
  font: 600 16px/1 'Geist', system-ui, sans-serif;
  color: #141413;
  white-space: nowrap;
}

/* ── Feature: the Mac pop-up ─────────────────────────────────────────────────────────────────────────────────────── */
.d-mac { position: absolute; inset: 0; }
.d-browser { position: absolute; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(60, 40, 0, .18), 0 0 0 1px rgba(0, 0, 0, .08); }
.d-browser .chrome { position: absolute; left: 0; right: 0; top: 0; height: 44px; background: #F3F1EE; border-bottom: 1px solid rgba(0, 0, 0, .07); display: flex; align-items: center; gap: 8px; padding-left: 16px; }
.d-browser .chrome i { width: 12px; height: 12px; border-radius: 50%; background: #E1DDD7; }
.d-browser .chrome .url { margin-left: 18px; height: 26px; width: 46%; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); display: flex; align-items: center; padding-left: 12px; font: 500 13px/1 'Geist', system-ui, sans-serif; color: rgba(0, 0, 0, .5); }
.d-browser .page { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; overflow: hidden; }
.d-browser .page > * { position: absolute; left: 0; top: 0; }
.d-marquee { position: absolute; z-index: 15; border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); background: rgba(255, 255, 255, .12); }
.d-marquee .dims { position: absolute; right: -6px; bottom: -34px; padding: 5px 8px; border-radius: 6px; background: rgba(20, 20, 19, .82); color: #fff; font: 500 13px/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-xhair { position: absolute; z-index: 31; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.d-xhair::before, .d-xhair::after { content: ''; position: absolute; background: #141413; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); }
.d-xhair::before { left: 16px; top: 0; width: 2px; height: 34px; }
.d-xhair::after { top: 16px; left: 0; height: 2px; width: 34px; }
.d-flash { position: absolute; inset: 0; z-index: 40; background: #fff; opacity: 0; }
.d-keys { position: absolute; z-index: 35; display: flex; gap: 8px; }
.d-keys span { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 12px; border-radius: 13px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .14), 0 10px 26px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .08); font: 600 26px/1 'Geist', system-ui, sans-serif; color: #141413; }
.d-popup {
  position: absolute;
  z-index: 34;
  width: 440px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(252, 251, 250, .97);
  box-shadow: 0 26px 70px rgba(30, 20, 0, .26), 0 0 0 1px rgba(0, 0, 0, .07);
  font-family: 'Geist', system-ui, sans-serif;
  color: #141413;
  transform-origin: 100% 100%;
}
.d-popup .ph { display: flex; align-items: baseline; justify-content: space-between; }
.d-popup .pt { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.d-popup .px { font-size: 18px; color: rgba(0, 0, 0, .4); }
.d-popup .pm { margin-top: 4px; font-size: 14px; color: rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.d-popup .thumb { position: relative; margin-top: 14px; height: 196px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.d-popup .thumb > * { position: absolute; left: 0; top: 0; }
.d-popup .btns { display: grid; grid-template-columns: 1.25fr 1fr 1fr 0.85fr; gap: 8px; margin-top: 14px; }
.d-popup .btns span { display: grid; place-items: center; height: 46px; border-radius: 12px; background: rgba(0, 0, 0, .055); font-size: 16px; font-weight: 600; }
.d-popup .btns .pink { background: #D92A78; color: #fff; }
.d-popup .state { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 12px; background: #F2EFEA; font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, .7); opacity: 0; }
.d-popup .state.done { background: #E3F3E8; color: #1F6B3A; }
.d-popup .state .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, .12); border-top-color: #D92A78; }
.d-popup .state .ok { width: 20px; height: 20px; border-radius: 50%; background: #2F9D5D; display: grid; place-items: center; }
.d-popup .state kbd { margin-left: auto; font: 600 13px/1 'Geist', system-ui, sans-serif; padding: 5px 7px; border-radius: 6px; background: rgba(0, 0, 0, .06); }
.d-doc { position: absolute; z-index: 12; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(30, 20, 0, .22), 0 0 0 1px rgba(0, 0, 0, .07); overflow: hidden; }
.d-doc .dh { padding: 22px 26px 0; font: 600 22px/1.2 'Geist', system-ui, sans-serif; color: #141413; letter-spacing: -0.015em; }
.d-doc .dl { margin: 10px 26px 0; height: 10px; border-radius: 5px; background: #EDEBE7; }
.d-doc .img { position: absolute; left: 26px; right: 26px; bottom: 26px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.d-doc .img > * { position: absolute; left: 0; top: 0; }

/* ── Feature: styles switch (Original | Clean | Skeleton) ───────────────────────────────────────────────────────── */
.d-seg { position: absolute; z-index: 20; display: flex; padding: 4px; border-radius: 13px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06); font: 600 17px/1 'Geist', system-ui, sans-serif; color: rgba(0, 0, 0, .5); }
.d-seg span { position: relative; z-index: 1; padding: 11px 18px; }
.d-seg .knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 10px; background: #141413; }
.d-seg span.on { color: #fff; }
.d-frame { position: absolute; overflow: hidden; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .06); background: #fff; }
.d-frame.dark { background: #0D1117; }
.d-frame > .ss, .d-frame > .layer { position: absolute; left: 0; top: 0; }
.d-wipe { position: absolute; z-index: 16; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 24px rgba(0, 0, 0, .18); }
.d-wipe b { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); display: grid; place-items: center; }
.d-tag { position: absolute; z-index: 17; padding: 8px 12px; border-radius: 9px; font: 600 14px/1 'Geist', system-ui, sans-serif; background: rgba(20, 20, 19, .8); color: #fff; letter-spacing: .01em; }

/* ── Feature: translate (the globe pill) ──────────────────────────────────────────────────────────────────────── */
.d-lang { position: absolute; z-index: 20; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: 25px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06); font: 600 18px/1 'Geist', system-ui, sans-serif; color: #141413; }
.d-lang .globe { width: 22px; height: 22px; opacity: .8; }
.d-lang .lw { position: relative; height: 22px; overflow: hidden; }
.d-lang .lw span { display: block; height: 22px; line-height: 22px; white-space: nowrap; }

/* ── Video band: the "Make the video" panel ──────────────────────────────────────────────────────────────────── */
.demo-video .stage { background: #1E1E1C; border: 1px solid rgba(255, 255, 255, .08); }
.d-panel { position: absolute; z-index: 20; border-radius: 22px; background: #FBFAF8; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); font-family: 'Geist', system-ui, sans-serif; color: #141413; overflow: hidden; }
.d-panel .ph { padding: 22px 24px 0; font-size: 21px; font-weight: 600; letter-spacing: -0.012em; }
.d-panel .steps3 { display: flex; gap: 18px; padding: 10px 24px 0; font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, .4); }
.d-panel .steps3 .on { color: #141413; }
.d-panel .q { margin: 18px 24px 0; font-size: 15px; font-weight: 600; color: rgba(0, 0, 0, .55); }
.d-panel .box { margin: 10px 24px 0; min-height: 96px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1); font-size: 18px; line-height: 1.4; color: #141413; }
.d-panel .box .ph2 { color: rgba(0, 0, 0, .35); }
.d-panel .box .caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.2em; background: #D92A78; margin-left: 1px; }
.d-panel .row2 { display: flex; gap: 10px; margin: 14px 24px 0; }
.d-panel .row2 span { display: grid; place-items: center; height: 46px; padding: 0 18px; border-radius: 12px; font-size: 16px; font-weight: 600; background: rgba(0, 0, 0, .06); }
.d-panel .row2 .make { background: #D92A78; color: #fff; }
.d-panel .sugg { margin: 18px 24px 0; font-size: 14px; color: rgba(0, 0, 0, .45); font-weight: 500; }
.d-panel .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 24px 0; }
.d-panel .chips span { padding: 8px 11px; border-radius: 9px; background: rgba(0, 0, 0, .05); font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, .65); }
.d-panel .tlx { position: relative; margin: 10px 24px 0; height: 62px; border-radius: 12px; background: rgba(0, 0, 0, .045); }
.d-panel .tlx b { position: absolute; top: 11px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05); font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; opacity: 0; }
.d-panel .tlx b:nth-child(2) { background: #FCE6F0; color: #A3154F; }
.d-panel .tlx .head { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: #D92A78; opacity: 0; }
.d-panel .ex { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; gap: 8px; }
.d-panel .ex span { flex: 1; display: grid; place-items: center; height: 48px; border-radius: 12px; font-size: 16px; font-weight: 600; background: rgba(0, 0, 0, .06); }
.d-panel .ex .go { background: #141413; color: #fff; }
.d-shot2 { position: absolute; overflow: hidden; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.d-shot2 .ss { position: absolute; left: 0; top: 0; }

/* ── Outputs (the layout switch) ───────────────────────────────────────────────────────────────────────────────── */
/* [r8] div.out, not .out: a simplified screen's own text class "out" (Fernway's "Sold out" pill) matched this rule and vanished */
div.out { opacity: 0; transform: scale(.985); transition: opacity 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease; filter: blur(6px); }
div.out.on { opacity: 1; transform: none; filter: none; }
div.out .ow { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.o-card { position: absolute; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06); }
.o-card > .ss { position: absolute; left: 0; top: 0; }
.o-size { position: absolute; padding: 8px 12px; border-radius: 9px; background: rgba(20, 20, 19, .78); color: #fff; font: 600 15px/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.o-step { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #D92A78; color: #fff; font: 700 21px/1 'Geist', system-ui, sans-serif; box-shadow: 0 6px 16px rgba(217, 42, 120, .35), 0 0 0 4px #fff; }
.o-note { position: absolute; padding: 10px 14px; border-radius: 10px; background: #141413; color: #fff; font: 600 17px/1.2 'Geist', system-ui, sans-serif; white-space: nowrap; }
.o-figma { position: absolute; border-radius: 12px; overflow: hidden; background: #2C2C2C; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); font: 500 15px/1 'Inter', 'Geist', system-ui, sans-serif; color: #E6E6E6; }
.o-figma .fh { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #3D3D3D; font-weight: 600; color: #fff; }
.o-figma .fh i { width: 12px; height: 12px; border-radius: 3px; background: #D92A78; }
.o-figma ul { padding: 8px 0; }
.o-figma li { display: flex; align-items: center; gap: 9px; height: 34px; padding-left: calc(16px + var(--d, 0) * 18px); color: #D9D9D9; white-space: nowrap; }
.o-figma li.sel { background: #0C8CE9; color: #fff; }
.o-figma li svg { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }
.o-figma li.t svg { opacity: .55; }
.o-canvas { position: absolute; background: #E5E5E5; }
.o-sel { position: absolute; border: 2px solid #0C8CE9; }
.o-sel::before { content: attr(data-name); position: absolute; left: -2px; top: -26px; padding: 4px 7px; background: #0C8CE9; color: #fff; font: 500 13px/1 'Inter', 'Geist', system-ui, sans-serif; border-radius: 3px; white-space: nowrap; }

/* ── [v5] The hero (owner, 2026-10-07: show busy → simplified clearly, tidy fly-ins, a better video moment for small
   teams posting their product): the canvas around the 4:5 post, the post's brand colour field (the app's "field"
   background: one colour lit from the top left, a little grain), its caption, the busy page layer, the app's
   Original | Simplified switch and the export chip. ───────────────────────────────────────────────────────────────── */
.h-canvas { position: absolute; inset: 0; background: #EFEDEA; }
.h-full { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.h-field { position: absolute; inset: 0; background: radial-gradient(120% 85% at 22% 0%, #FF6680 0%, #FF385C 46%, #E3224D 100%); }
.h-field::after { content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.h-cap { position: absolute; text-align: left; color: #fff; font-weight: 600; line-height: 1.06; letter-spacing: -0.035em; white-space: nowrap; font-family: 'Geist', system-ui, sans-serif; }
.h-cap .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.h-cap .ln > span { display: inline-block; }
.h-logo { position: absolute; display: block; object-fit: contain; filter: brightness(0) invert(1); }
.h-winsh { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; box-shadow: 0 28px 70px rgba(110, 8, 32, .32), 0 6px 18px rgba(110, 8, 32, .18); }
.h-busy { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; }
.h-busy > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.demo-hero .stage.tight .h-busy { border-radius: 16px; }
.h-vs {
  position: absolute; z-index: 24; display: flex; gap: 3px; padding: 4px; border-radius: 16px;
  background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .07);
  font: 500 21px/1 'Geist', system-ui, sans-serif; letter-spacing: -0.005em; white-space: nowrap;
}
.h-vs span { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px; color: rgba(0, 0, 0, .45); }
.h-vs .spark { width: 20px; height: 20px; }
.h-vs:not(.is-s) span[data-v="o"], .h-vs.is-s span[data-v="s"] { color: #141413; }
.h-vs.is-s span[data-v="s"] .spark { color: #EC3D8E; }
.h-vs .thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; border-radius: 12px; background: #F3F2EF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(20, 20, 19, .14); }
.h-chip {
  position: absolute; z-index: 26; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px 0 12px;
  border-radius: 15px; background: #141413; color: rgba(255, 255, 255, .7); white-space: nowrap;
  font: 500 18px/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.h-chip b { color: #fff; font-weight: 600; }
.h-chip .ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2FBF71; color: #fff; }
.h-chip .ok svg { width: 17px; height: 17px; }

/* ── [r7] Message stories (demos/stories.js). World units; --u scales the type up on phones. ── */
.im { position: absolute; overflow: hidden; border-radius: calc(30px * var(--u, 1)); background: #fff; box-shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 24px 60px -24px rgba(60, 40, 20, .28); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #000; }
.im-head { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--u, 1)); padding: calc(18px * var(--u, 1)) 0 calc(12px * var(--u, 1)); background: rgba(246, 246, 248, .96); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.im-av { display: grid; place-items: center; width: calc(52px * var(--u, 1)); height: calc(52px * var(--u, 1)); border-radius: 50%; background: linear-gradient(#A7ABB4, #868A93); color: #fff; font-size: calc(22px * var(--u, 1)); font-weight: 500; }
.im-head b { display: flex; align-items: center; gap: calc(4px * var(--u, 1)); font-size: calc(14px * var(--u, 1)); font-weight: 500; color: #000; }
.im-head b i { width: calc(6px * var(--u, 1)); height: calc(6px * var(--u, 1)); border: solid #8E8E93; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); }
.im-body { position: absolute; left: 0; right: 0; top: calc(112px * var(--u, 1)); bottom: 0; overflow: hidden; }
.im-when { margin: calc(10px * var(--u, 1)) 0 0; text-align: center; font-size: calc(12px * var(--u, 1)); line-height: 1.35; color: #8E8E93; }
.im-when span { font-weight: 400; }
.im-list { position: absolute; left: calc(16px * var(--u, 1)); right: calc(16px * var(--u, 1)); top: 0; bottom: 0; }
.im-b { position: absolute; left: 0; top: 0; max-width: 78%; border-radius: calc(21px * var(--u, 1)); font-size: calc(19px * var(--u, 1)); line-height: 1.3; letter-spacing: -0.012em; visibility: hidden; }
.im-in { position: relative; overflow: hidden; padding: calc(10px * var(--u, 1)) calc(15px * var(--u, 1)); border-radius: inherit; }
.im-b .im-t { display: block; }
.im-b.me { background: #0A84FF; color: #fff; transform-origin: 100% 100%; }
.im-b.them { background: #E9E9EB; color: #000; transform-origin: 0 100%; }
.im-tail { position: absolute; bottom: 0; width: calc(16px * var(--u, 1)); height: calc(20px * var(--u, 1)); }
.im-b.me .im-tail { right: calc(-5px * var(--u, 1)); fill: #0A84FF; }
.im-b.them .im-tail { left: calc(-5px * var(--u, 1)); fill: #E9E9EB; }
.im-dots { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(5px * var(--u, 1)); }
.im-dots i { width: calc(9px * var(--u, 1)); height: calc(9px * var(--u, 1)); border-radius: 50%; background: #8E8E93; }

.st-win { position: absolute; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 30px 70px -24px rgba(40, 25, 10, .35), 0 0 0 1px rgba(0, 0, 0, .07); }
.st-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 7px; padding-left: 14px; background: #F2F2F4; border-bottom: 1px solid #E3E3E7; }
.st-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.st-bar i:nth-child(2) { background: #FEBC2E; }
.st-bar i:nth-child(3) { background: #28C840; }
.st-view { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.st-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.st-slide { position: absolute; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px -30px rgba(40, 25, 10, .4), 0 0 0 1px rgba(0, 0, 0, .06); font-family: var(--font); opacity: 0; }
.st-slide p { position: absolute; margin: 0; line-height: 1; white-space: nowrap; }
.st-kick { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8780; }
.st-title { font-weight: 600; letter-spacing: -0.035em; color: #141413; }
.st-num { font-weight: 600; color: #B5B1AA; font-variant-numeric: tabular-nums; }
.st-ring { position: absolute; border-radius: 12px; box-shadow: 0 0 0 3px #EC3D8E, 0 0 0 9px rgba(236, 61, 142, .16); opacity: 0; }
/* [r8] the Pulse story's snapshot: viewfinder corners round the whole window, a shutter flash, the slide's note */
.st-vf { position: absolute; opacity: 0; pointer-events: none; z-index: 6; }
.st-vf i { position: absolute; width: calc(26px * var(--u, 1)); height: calc(26px * var(--u, 1)); border: 0 solid #EC3D8E; }
.st-vf i:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 10px; }
.st-vf i:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 10px; }
.st-vf i:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 10px; }
.st-vf i:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 10px; }
.st-flash { position: absolute; border-radius: 12px; background: #fff; opacity: 0; pointer-events: none; z-index: 7; }
.st-note { font-weight: 600; color: #141413; line-height: 1.35 !important; white-space: nowrap; }
.st-note span { font-weight: 450; color: #8A8780; }

.st-post { position: absolute; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -30px rgba(40, 25, 10, .4), 0 0 0 1px rgba(0, 0, 0, .06); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, .9); opacity: 0; }
.st-ph { display: flex; align-items: center; gap: calc(10px * var(--u, 1)); padding: 0 calc(16px * var(--u, 1)); }
.st-av { position: relative; width: calc(40px * var(--u, 1)); height: calc(40px * var(--u, 1)); border-radius: calc(6px * var(--u, 1)); overflow: hidden; background: #F7F7F8; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.st-av i { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; background: 0 50% / auto 100% no-repeat; }
.st-who { display: grid; gap: 2px; line-height: 1.2; }
.st-who b { font-size: calc(15px * var(--u, 1)); font-weight: 600; }
.st-who small { font-size: calc(12.5px * var(--u, 1)); color: rgba(0, 0, 0, .55); }
.st-pt { display: flex; align-items: center; margin: 0; padding: 0 calc(16px * var(--u, 1)); font-size: calc(14.5px * var(--u, 1)); line-height: 1.35; }
.st-media { position: relative; overflow: hidden; }
.st-mlogo { position: absolute; display: block; box-sizing: border-box; background: #fff; box-shadow: 0 6px 18px -8px rgba(0, 40, 30, .45); } /* [r8] the real logo on a white chip, never a white silhouette */
.st-mlogo img { display: block; height: 100%; width: auto; max-width: none; }
.st-cap { position: absolute; margin: 0; color: #fff; font: 600 1em/1.12 var(--font); letter-spacing: -0.03em; }
.st-pa { display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(0, 0, 0, .08); font-size: calc(13.5px * var(--u, 1)); font-weight: 600; color: rgba(0, 0, 0, .6); }
.st-pa span { display: inline-block; transform-origin: 50% 50%; }
.st-pa span.on { color: #0A66C2; }

.st-cmd { position: absolute; display: flex; align-items: center; gap: calc(10px * var(--u, 1)); height: calc(52px * var(--u, 1)); padding: 0 calc(10px * var(--u, 1)) 0 calc(18px * var(--u, 1)); border-radius: 999px; background: #fff; box-shadow: 0 18px 44px -16px rgba(20, 20, 19, .4), 0 0 0 1px rgba(20, 20, 19, .08); font: 500 calc(17px * var(--u, 1))/1 var(--font); color: #141413; white-space: nowrap; opacity: 0; }
.st-spark { flex: 0 0 auto; width: calc(18px * var(--u, 1)); height: calc(18px * var(--u, 1)); background: #EC3D8E; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l1.9 5.6L19.5 10.5l-5.6 1.9L12 18l-1.9-5.6L4.5 10.5l5.6-1.9z"/></svg>') center / contain no-repeat; }
.st-typed { overflow: hidden; text-overflow: clip; }
.st-caret { flex: 0 0 auto; width: 2px; height: 1.1em; margin-left: -8px; background: #EC3D8E; }
.st-cmd kbd { margin-left: auto; display: grid; place-items: center; min-width: calc(34px * var(--u, 1)); height: calc(34px * var(--u, 1)); border-radius: 999px; background: #F1EFEC; color: #6B6862; font: 600 calc(16px * var(--u, 1))/1 var(--font); transition: background-color 120ms, color 120ms; }
.st-cmd kbd.on { background: #EC3D8E; color: #fff; }
.st-chip { position: absolute; display: flex; align-items: center; gap: calc(10px * var(--u, 1)); height: calc(52px * var(--u, 1)); padding: 0 calc(20px * var(--u, 1)) 0 calc(14px * var(--u, 1)); border-radius: 999px; background: rgba(20, 20, 19, .92); color: #fff; font: 500 calc(16px * var(--u, 1))/1 var(--font); white-space: nowrap; translate: -50% 0; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); opacity: 0; }
.st-chip i { width: calc(22px * var(--u, 1)); height: calc(22px * var(--u, 1)); border-radius: 50%; background: #EC3D8E url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.6 8.4l2.9 2.8 5.9-6.4" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 70% no-repeat; }
.st-chip b { font-weight: 600; color: #fff; }
.st-chip span { color: rgba(255, 255, 255, .7); }

/* [r9] Message stories on phones: the bubbles float over the screen (no card, no header) on a soft shade */
.im.im-ov { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.im.im-ov .im-head, .im.im-ov .im-when { display: none; }
.im.im-ov .im-body { top: 0; overflow: visible; }
.im.im-ov .im-b { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45); }
.im-shade { position: absolute; pointer-events: none; opacity: 0; background: linear-gradient(rgba(20, 20, 19, 0), rgba(20, 20, 19, .34) 45%, rgba(20, 20, 19, .5)); }

/* ══ [r10] Demo controls (anim.js demoControls): pause / play with the loop's progress as a thin ring, and replay. Quiet
   in the stage's corner; full strength on hover, on focus, and under reduced motion (where Play runs the demo once). ── */
.dctl {
  position: absolute; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .07); opacity: .66; pointer-events: auto;
  transition: opacity 220ms ease; -webkit-user-select: none; user-select: none;
}
.dctl:hover, .dctl:focus-within, .dctl.is-still, .dctl.is-paused { opacity: 1; }
.dctl button {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #2A2927;
  transition: background-color 160ms ease; -webkit-tap-highlight-color: transparent;
}
.dctl button:hover { background: rgba(0, 0, 0, .06); }
.dctl button:focus-visible { outline: 2px solid var(--cta, #D92A78); outline-offset: 1px; border-radius: 50%; }
.dctl svg { width: 13px; height: 13px; fill: currentColor; }
.dctl .dctl-ic { display: grid; place-items: center; }
.dctl .dctl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; pointer-events: none; }
.dctl .dctl-ring circle { fill: none; stroke: rgba(0, 0, 0, .1); stroke-width: 2; }
.dctl .dctl-ring circle.on { stroke: #2A2927; stroke-linecap: round; }
.dctl.is-still .dctl-ring { display: none; }
.dctl-rp svg { width: 14px; height: 14px; }
/* inline (the hero: beside "Demo sped up", under the demo) */
.dctl.dctl-inline { position: relative; right: auto; bottom: auto; opacity: 1; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line); }
/* on the dark video panel */
.demo-video .dctl { background: rgba(255, 255, 255, .86); }
@media (hover: none) { .dctl { opacity: .85; } }

/* [r11] Phones and tablets (one column, below 1024 px): the controls have a row of their own under the frame, right-
   aligned to its edge, never over the picture (anim.js DOCK). The row's height is reserved from the first paint. Two
   44 px buttons in a quiet hairline pill, the progress ring inside the first; the hero's inline controls match.
   [r12 site] Owner, 2026-10-08: desktop too ("the demo pause/replay controls still sit in each demo's corner over the
   frame"). Every width now: the row under the frame, right-aligned to its edge. Wide screens keep the smaller pill the
   hero's inline controls have there (32 px buttons, a hairline ring); the hero itself is unchanged (its controls were
   already beside "Demo sped up", under the demo). The posts panel (.sw-stage) keeps its row inside the panel, at its
   foot, where nothing is drawn (site.css). */
.demo[data-demo]:not(.demo-hero), .o5-switch { position: relative; padding-bottom: 50px; }
.dctl-row { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; height: 38px; pointer-events: none; }
.dctl-row .dctl { position: static; opacity: 1; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line, rgba(0, 0, 0, .08)); pointer-events: auto; }
/* on the dark video band */
.vid .dctl-row .dctl { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.vid .dctl-row .dctl button { color: rgba(255, 255, 255, .92); }
.vid .dctl-row .dctl button:hover { background: rgba(255, 255, 255, .1); }
.vid .dctl-row .dctl .dctl-ring circle { stroke: rgba(255, 255, 255, .18); }
.vid .dctl-row .dctl .dctl-ring circle.on { stroke: #fff; }
@media (max-width: 1023.98px) {
  .demo[data-demo]:not(.demo-hero), .o5-switch { padding-bottom: 58px; }
  .dctl-row { height: 44px; }
  .dctl-row .dctl, .dctl.dctl-inline {
    position: static; gap: 0; padding: 0; opacity: 1; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); pointer-events: auto;
  }
  .dctl-row .dctl button, .dctl.dctl-inline button { width: 44px; height: 44px; color: var(--ink-2, #2A2927); }
  .dctl-row .dctl .dctl-ring, .dctl.dctl-inline .dctl-ring { inset: 7px; width: 30px; height: 30px; }
  .dctl-row .dctl svg, .dctl.dctl-inline svg { width: 13px; height: 13px; }
  .dctl-row .dctl .dctl-rp svg, .dctl.dctl-inline .dctl-rp svg { width: 15px; height: 15px; }
  .dctl-row .dctl button:hover { background: none; }
  .vid .dctl-row .dctl { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
  .vid .dctl-row .dctl button:hover { background: none; }
}

/* ══ [r10] scrimpl's editor, drawn in world units around a demo (kit.js editorBar): its top bar as the app has it
   (traffic lights, the logo, Library, the Original | Simplified switch, History, Export in pink, the credits), the
   command bar at the canvas's foot. --bs scales the bar on phones so its words stay readable. ── */
.ed-bar {
  position: absolute; left: 0; top: 0; z-index: 22; display: flex; align-items: center; gap: calc(10px * var(--bs, 1));
  padding: 0 calc(18px * var(--bs, 1)); background: #FFFFFF; border-bottom: 1px solid rgba(0, 0, 0, .07);
  font: 500 calc(15px * var(--bs, 1))/1 'Geist', system-ui, sans-serif; color: #141413; white-space: nowrap; box-sizing: border-box;
}
.ed-lights { display: flex; gap: calc(8px * var(--bs, 1)); margin-right: calc(10px * var(--bs, 1)); }
.ed-lights i { width: calc(12px * var(--bs, 1)); height: calc(12px * var(--bs, 1)); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.ed-lights i:nth-child(2) { background: #FEBC2E; }
.ed-lights i:nth-child(3) { background: #28C840; }
.ed-logo { display: flex; align-items: center; margin-right: calc(8px * var(--bs, 1)); }
.ed-logo svg { display: block; height: calc(21px * var(--bs, 1)); width: auto; }
.ed-btn { display: inline-flex; align-items: center; gap: calc(8px * var(--bs, 1)); height: calc(38px * var(--bs, 1)); padding: 0 calc(13px * var(--bs, 1)); border-radius: calc(10px * var(--bs, 1)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); color: #2A2927; }
.ed-btn svg { width: calc(16px * var(--bs, 1)); height: calc(16px * var(--bs, 1)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-btn b { font-weight: 500; color: inherit; }
.ed-btn .n { display: grid; place-items: center; min-width: calc(20px * var(--bs, 1)); height: calc(20px * var(--bs, 1)); padding: 0 calc(5px * var(--bs, 1)); border-radius: 999px; background: rgba(0, 0, 0, .06); font-size: .8em; font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-sp { flex: 1 1 0; }
.ed-export { background: #D92A78; color: #fff; box-shadow: 0 1px 2px rgba(150, 20, 80, .25); font-weight: 600; }
.ed-export b { font-weight: 600; }
.ed-credits { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.ed-credits i { width: calc(14px * var(--bs, 1)); height: calc(14px * var(--bs, 1)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2px * var(--bs, 1)) #EC3D8E; }
/* the switch in the bar (the hero's .h-vs, sized for the bar) */
.ed-bar .h-vs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; padding: calc(3px * var(--bs, 1)); border-radius: calc(12px * var(--bs, 1)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); background: #F4F3F1; font-size: calc(15.5px * var(--bs, 1)); }
.ed-bar .h-vs span { height: calc(36px * var(--bs, 1)); padding: 0 calc(16px * var(--bs, 1)); gap: calc(7px * var(--bs, 1)); }
.ed-bar .h-vs .spark { width: calc(15px * var(--bs, 1)); height: calc(15px * var(--bs, 1)); }
.ed-bar.vs-end .h-vs { left: auto; right: calc(18px * var(--bs, 1)); translate: 0 -50%; } /* [r11] phones: clear of the logo */
.ed-bar .h-vs .thumb { left: calc(3px * var(--bs, 1)); top: calc(3px * var(--bs, 1)); bottom: calc(3px * var(--bs, 1)); border-radius: calc(9px * var(--bs, 1)); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 1px 3px rgba(20, 20, 19, .14); }
/* the command bar at the canvas's foot */
.ed-cmd {
  position: absolute; z-index: 21; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 22px; border-radius: 18px;
  background: #fff; box-shadow: 0 14px 40px -14px rgba(20, 20, 19, .32), 0 0 0 1px rgba(20, 20, 19, .08);
  font: 400 19px/1 'Geist', system-ui, sans-serif; color: #141413; white-space: nowrap; box-sizing: border-box;
}
.ed-cmd .ph { color: rgba(0, 0, 0, .42); }
.ed-cmd .typed { overflow: hidden; }
.ed-cmd .caret { flex: 0 0 auto; width: 2px; height: 22px; margin-left: -10px; background: #D92A78; }
.ed-cmd .sp { flex: 1 1 0; }
.ed-cmd .mic, .ed-cmd .go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #2A2927; }
.ed-cmd .mic { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.ed-cmd .go { background: #F1EFEC; transition: background-color 120ms ease, color 120ms ease; }
.ed-cmd .go.on { background: #D92A78; color: #fff; }
.ed-cmd svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the export menu and the saved toast */
.ed-menu { position: absolute; z-index: 28; width: 270px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 22px 50px -16px rgba(20, 20, 19, .4), 0 0 0 1px rgba(0, 0, 0, .08); font: 500 16px/1 'Geist', system-ui, sans-serif; color: #141413; transform-origin: 100% 0; opacity: 0; }
.ed-menu span { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; border-radius: 9px; }
.ed-menu span small { font-size: 13.5px; color: rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
.ed-menu span.hot { background: #F4F3F1; }
.ed-saved { position: absolute; z-index: 27; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 12px; border-radius: 16px; background: #141413; color: rgba(255, 255, 255, .72); font: 500 18px/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); opacity: 0; }
.ed-saved b { color: #fff; font-weight: 600; }
.ed-saved .ok { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2FBF71; color: #fff; }
.ed-saved .ok svg { width: 17px; height: 17px; }
/* the canvas: the screen as a sheet on the editor's grey */
.ed-sheet { position: absolute; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 50px -18px rgba(20, 20, 19, .28), 0 0 0 1px rgba(0, 0, 0, .06); }
.ed-sheet > .layer, .ed-sheet .ed-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ed-caret { position: absolute; z-index: 5; width: 2.4px; background: #2B5BFF; }
.ed-sel { position: absolute; z-index: 4; background: rgba(67, 110, 255, .2); border-radius: 3px; }
.ed-edit-box { position: absolute; z-index: 4; border-radius: 6px; box-shadow: 0 0 0 2px #436EFF; }

/* [r11] Message stories on phones: the thread's own band under the screen; older bubbles leave at its top under a fade */
.im.im-ov.im-band { overflow: hidden; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 44px); mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 44px); }
.im.im-ov.im-band .im-body { overflow: hidden; }
.im.im-ov.im-band .im-b { box-shadow: none; }
.im.im-ov.im-band .im-b.them { background: #fff; box-shadow: 0 1px 1px rgba(60, 40, 20, .05); }
.im.im-ov.im-band .im-b.them .im-tail { fill: #fff; }

/* [r11] Every demo's frame has its height before its script draws it (the same ratio kit.js world() then sets), so the
   page never jumps when a demo mounts, nor when a visitor jumps to an anchor past demos that have not drawn yet. */
[data-demo="hero"] .stage { aspect-ratio: 1440 / 964; }
[data-demo="editscreen"] .stage, [data-demo="video"] .stage { aspect-ratio: 1440 / 900; }
[data-demo="translate"] .stage, [data-demo="styles"] .stage, [data-demo="popup"] .stage { aspect-ratio: 1200 / 800; }
[data-demo="translate"][data-fit="tight"] .stage { aspect-ratio: 660 / 644; }
[data-demo="safe"] .stage { aspect-ratio: 1568 / 1028; }
[data-demo="safe"][data-fit="tight"] .stage { aspect-ratio: 712 / 695; }
[data-demo="edit"] .stage { aspect-ratio: 1200 / 788; }
[data-demo^="story-"] .stage { aspect-ratio: 1440 / 820; }
[data-demo="brandkit"] .stage { aspect-ratio: 1200 / 760; } /* [r13] */
@media (max-width: 699.98px) {
  [data-demo="brandkit"] .stage { aspect-ratio: 720 / 1340; }
  [data-demo="hero"] .stage { aspect-ratio: 720 / 1009; }
  [data-demo="editscreen"] .stage { aspect-ratio: 720 / 900; }
  [data-demo="translate"] .stage, [data-demo="translate"][data-fit="tight"] .stage { aspect-ratio: 660 / 808; }
  [data-demo="safe"] .stage, [data-demo="safe"][data-fit="tight"] .stage { aspect-ratio: 438 / 696; } /* [r12 site] the readable crop */
  [data-demo="video"] .stage { aspect-ratio: 720 / 1146; }
  [data-demo="story-post"] .stage { aspect-ratio: 720 / 1004; }
  [data-demo="story-pulse"] .stage, [data-demo="story-swap"] .stage { aspect-ratio: 720 / 852; }
  [data-demo="styles"] .stage { aspect-ratio: 780 / 800; }
  [data-demo="edit"] .stage { aspect-ratio: 560 / 546; }
  [data-demo="popup"] .stage { aspect-ratio: 1100 / 770; }
}

/* ══ [r13] The brand showcase (demos/brandkit.js): the app's Brand kit panel and a 4:5 post that builds from it. World
   units; --u scales the kit's type on phones, --pu is the post's own unit (its width / 432). The brand is made up. ── */
.bk-panel { position: absolute; border-radius: calc(22px * var(--u, 1)); background: #fff; box-shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 24px 60px -26px rgba(20, 20, 19, .3), 0 0 0 1px rgba(20, 20, 19, .06); font-family: 'Geist', system-ui, sans-serif; color: #141413; }
.bk-panel > * { position: absolute; }
.bk-title { font-size: calc(24px * var(--u, 1)); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.bk-sub { font-size: 15px; line-height: 1.3; color: rgba(0, 0, 0, .55); }
.bk-label { font-size: calc(14px * var(--u, 1)); line-height: 1; font-weight: 600; color: rgba(0, 0, 0, .7); }
.bk-field { display: flex; align-items: center; gap: calc(10px * var(--u, 1)); padding: 0 calc(16px * var(--u, 1)); border-radius: calc(14px * var(--u, 1)); background: #FAF9F7; box-shadow: inset 0 0 0 1.5px #DCD8D2; box-sizing: border-box; }
.bk-field .ic { display: grid; flex: none; width: calc(20px * var(--u, 1)); height: calc(20px * var(--u, 1)); color: rgba(0, 0, 0, .45); }
.bk-field .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.bk-field .tx { position: relative; display: flex; align-items: center; height: 100%; font-size: calc(19px * var(--u, 1)); letter-spacing: -0.01em; white-space: nowrap; }
.bk-field .ph { position: absolute; left: 0; color: rgba(0, 0, 0, .34); }
.bk-field .val { color: #141413; }
.bk-field .caret { width: 2px; height: calc(24px * var(--u, 1)); margin-left: 1px; background: #D92A78; opacity: 0; }
.bk-field .focus { position: absolute; inset: -3px; border-radius: calc(16px * var(--u, 1)); box-shadow: 0 0 0 2px #D92A78, 0 0 0 6px rgba(217, 42, 120, .14); opacity: 0; pointer-events: none; }
.bk-btn { display: grid; place-items: center; border-radius: calc(13px * var(--u, 1)); background: #D92A78; color: #fff; font-size: calc(17px * var(--u, 1)); font-weight: 600; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(150, 20, 80, .2); overflow: hidden; }
.bk-btn .l { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(10px * var(--u, 1)); white-space: nowrap; }
.bk-btn .l2, .bk-btn .l3 { opacity: 0; }
.bk-btn .spin { width: calc(16px * var(--u, 1)); height: calc(16px * var(--u, 1)); border-radius: 50%; border: calc(2.5px * var(--u, 1)) solid rgba(255, 255, 255, .3); border-top-color: #fff; }
.bk-btn .ok { display: grid; place-items: center; width: calc(20px * var(--u, 1)); height: calc(20px * var(--u, 1)); border-radius: 50%; background: rgba(255, 255, 255, .22); }
.bk-btn .ok svg { width: 70%; height: 70%; }
.bk-slot { overflow: hidden; border-radius: calc(14px * var(--u, 1)); background: #FAF9F7; box-shadow: inset 0 0 0 1.5px #E7E3DD; }
.bk-shim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(236, 61, 142, .1) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(calc((var(--p, 0) - 0.8) * 100%)); }
.bk-chip { position: absolute; inset: 0; display: flex; align-items: center; border-radius: inherit; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 6px 18px -8px rgba(20, 20, 19, .25); opacity: 0; }
.bk-logo { gap: calc(12px * var(--u, 1)); padding: 0 calc(20px * var(--u, 1)); }
.bk-logo .mk, .bk-flylogo .mk { display: block; flex: none; width: calc(40px * var(--u, 1)); height: calc(40px * var(--u, 1)); }
.bk-logo .mk svg, .bk-flylogo .mk svg, .bk-plogo .mk svg, .bk-win .wb .mk svg { display: block; width: 100%; height: 100%; }
.bk-logo .wm, .bk-flylogo .wm { display: inline-block; font: 700 calc(30px * var(--u, 1))/1 Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; color: #13201E; white-space: nowrap; }
.bk-col { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: calc(12px * var(--u, 1)); }
.bk-col .sw { display: block; flex: none; width: calc(30px * var(--u, 1)); height: calc(30px * var(--u, 1)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.bk-col .hx { display: grid; font-size: calc(12.5px * var(--u, 1)); line-height: 1.2; color: rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.bk-col .hx b { font-weight: 600; color: #141413; letter-spacing: 0; }
.bk-panel.ph .bk-col { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 14px; } /* phones: the swatch and its name */
.bk-panel.ph .bk-col .sw { width: 40px; height: 40px; flex: none; }
.bk-panel.ph .bk-col .hx { font-size: 21px; }
.bk-panel.ph .bk-col .hv { display: none; }
.bk-font { gap: calc(14px * var(--u, 1)); padding: 0 calc(18px * var(--u, 1)); }
.bk-font .aa { font: 700 calc(30px * var(--u, 1))/1 Georgia, 'Times New Roman', serif; color: #13201E; }
.bk-font .fn { display: grid; font-size: calc(13px * var(--u, 1)); line-height: 1.25; color: rgba(0, 0, 0, .5); }
.bk-font .fn b { font-weight: 600; color: #141413; }
/* the post */
.bk-artlabel { position: absolute; font: 400 calc(14px * var(--u, 1))/1.2 'Geist', system-ui, sans-serif; color: rgba(0, 0, 0, .5); text-align: center; white-space: nowrap; }
.bk-artlabel b { font-weight: 600; color: rgba(0, 0, 0, .78); }
.bk-art { position: absolute; overflow: hidden; border-radius: calc(18px * var(--pu, 1)); background: #fff; box-shadow: 0 1px 2px rgba(20, 20, 19, .05), 0 30px 70px -30px rgba(20, 20, 19, .35), 0 0 0 1px rgba(20, 20, 19, .06); font-family: 'Geist', system-ui, sans-serif; }
.bk-art > * { position: absolute; }
.bk-empty { inset: calc(14px * var(--pu, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--pu, 1)); box-shadow: inset 0 0 0 1.5px #E3DFD8; background: repeating-linear-gradient(135deg, #FBFAF8 0 calc(10px * var(--pu, 1)), #F6F4F1 calc(10px * var(--pu, 1)) calc(20px * var(--pu, 1))); }
.bk-make { padding: calc(14px * var(--pu, 1)) calc(22px * var(--pu, 1)); border-radius: 999px; background: #141413; color: #fff; font-size: calc(17px * var(--pu, 1) * var(--u, 1)); font-weight: 600; white-space: nowrap; box-shadow: 0 12px 30px -12px rgba(20, 20, 19, .5); }
.bk-flood { inset: 0; clip-path: circle(0 at 50% 50%); }
.bk-plogo { left: calc(26px * var(--pu, 1)); top: calc(24px * var(--pu, 1)); display: flex; align-items: center; gap: calc(9px * var(--pu, 1)); opacity: 0; }
.bk-plogo .mk { display: block; width: calc(30px * var(--pu, 1)); height: calc(30px * var(--pu, 1)); }
.bk-plogo .wm { display: inline-block; font: 700 calc(22.5px * var(--pu, 1))/1 Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; color: #F6F1E7; white-space: nowrap; }
.bk-cap { left: calc(28px * var(--pu, 1)); top: calc(86px * var(--pu, 1)); display: grid; font: 700 calc(46px * var(--pu, 1))/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; color: #F6F1E7; }
.bk-cap .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.bk-cap .ln > span { display: block; opacity: 0; }
.bk-win { left: calc(28px * var(--pu, 1)); right: calc(28px * var(--pu, 1)); top: calc(222px * var(--pu, 1)); height: calc(262px * var(--pu, 1)); overflow: hidden; border-radius: calc(14px * var(--pu, 1)); background: #fff; box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .55); opacity: 0; transform-origin: 50% 100%; }
.bk-win .wb { display: flex; align-items: center; gap: calc(7px * var(--pu, 1)); height: calc(36px * var(--pu, 1)); padding: 0 calc(14px * var(--pu, 1)); background: #13201E; }
.bk-win .wb .mk { display: block; width: calc(16px * var(--pu, 1)); height: calc(16px * var(--pu, 1)); }
.bk-win .wb .wm { display: inline-block; font: 700 calc(13px * var(--pu, 1))/1 Georgia, 'Times New Roman', serif; color: #F6F1E7; white-space: nowrap; margin-right: auto; }
.bk-win .wb .d { width: calc(34px * var(--pu, 1)); height: calc(6px * var(--pu, 1)); border-radius: 3px; background: rgba(246, 241, 231, .3); }
.bk-win .wc { position: relative; display: grid; gap: calc(10px * var(--pu, 1)); padding: calc(16px * var(--pu, 1)); }
.bk-win .wc .h { width: 46%; height: calc(12px * var(--pu, 1)); border-radius: 6px; background: #13201E; }
.bk-win .wc .ln { height: calc(7px * var(--pu, 1)); border-radius: 4px; background: #E6E3DE; }
.bk-win .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(9px * var(--pu, 1)); }
.bk-win .cards i { height: calc(70px * var(--pu, 1)); border-radius: calc(9px * var(--pu, 1)); background: #E8F1EE; }
.bk-win .cards i.on { position: relative; background: #fff; box-shadow: inset 0 0 0 1.5px #0E6B63; }
.bk-win .cards i.on b { position: absolute; left: 14%; right: 30%; top: 22%; height: calc(9px * var(--pu, 1)); border-radius: 5px; background: #0E6B63; }
.bk-win .cta { position: absolute; right: calc(16px * var(--pu, 1)); bottom: calc(16px * var(--pu, 1)); display: grid; place-items: center; height: calc(32px * var(--pu, 1)); padding: 0 calc(16px * var(--pu, 1)); overflow: hidden; border-radius: calc(9px * var(--pu, 1)); background: #EDEBE7; font-size: calc(13px * var(--pu, 1)); font-weight: 600; color: #13201E; }
.bk-win .cta .fill { position: absolute; inset: -40% -20%; border-radius: 50%; background: #F2A541; transform: scale(0); }
.bk-win .cta > span { position: relative; }
.bk-url { left: calc(28px * var(--pu, 1)); bottom: calc(22px * var(--pu, 1)); font-size: calc(13px * var(--pu, 1)); font-weight: 500; letter-spacing: .01em; color: rgba(246, 241, 231, .75); opacity: 0; }
/* what flies from the kit to the post */
.bk-dot { position: absolute; z-index: 27; border-radius: 50%; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); opacity: 0; }
.bk-flylogo { position: absolute; z-index: 27; display: grid; transform-origin: 0 0; opacity: 0; }
.bk-flylogo > span { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(12px * var(--u, 1)); }
.bk-flylogo .cr { opacity: 0; }
.bk-flylogo .cr .wm { color: #F6F1E7; }
.bk-flyaa { position: absolute; z-index: 27; font: 700 calc(30px * var(--u, 1))/1 Georgia, 'Times New Roman', serif; transform-origin: 0 0; opacity: 0; color: color-mix(in srgb, #F6F1E7 calc(var(--cr, 0) * 100%), #13201E); }
.bk-export { z-index: 28; }

/* ══ [r13] The hero's richer post (demos/hero.js): scrimpl's neutral canvas under the post until the brand kit is
   applied, the Brand kit card with Apply, and the format switch under the post. World units; .tight = phones. ── */
.h-field0 { position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, #F1EFEB 0%, #E7E3DD 60%, #DEDAD3 100%); }
.h-field { clip-path: circle(0 at 50% 50%); }
.h-kit {
  --ks: 1; position: absolute; z-index: 24; display: grid; gap: calc(14px * var(--ks)); padding: calc(18px * var(--ks)); border-radius: calc(18px * var(--ks));
  background: #fff; color: #141413; font: 500 calc(15px * var(--ks))/1.2 'Geist', system-ui, sans-serif; box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(20, 20, 19, .06), 0 28px 60px -22px rgba(20, 20, 19, .38), 0 0 0 1px rgba(20, 20, 19, .07);
}
.h-kit.tight { --ks: 1.62; }
.h-kit .kh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.h-kit .kh b { font-size: calc(17px * var(--ks)); font-weight: 600; letter-spacing: -0.01em; color: #141413; }
.h-kit .kh span { color: rgba(0, 0, 0, .5); font-size: calc(14px * var(--ks)); }
.h-kit .kl { display: flex; align-items: center; height: calc(52px * var(--ks)); padding: 0 calc(14px * var(--ks)); border-radius: calc(12px * var(--ks)); background: #FAF9F7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.h-kit .kl img { height: calc(26px * var(--ks)); width: auto; }
.h-kit .ks { display: flex; align-items: center; gap: calc(8px * var(--ks)); }
.h-kit .ks i { width: calc(26px * var(--ks)); height: calc(26px * var(--ks)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.h-kit .ks span { margin-left: calc(4px * var(--ks)); color: rgba(0, 0, 0, .5); font-size: calc(13.5px * var(--ks)); }
.h-kit .kb { display: grid; place-items: center; height: calc(46px * var(--ks)); border-radius: calc(12px * var(--ks)); background: #D92A78; color: #fff; font-size: calc(16px * var(--ks)); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(150, 20, 80, .2); }
.h-fmt {
  --ks: 1; position: absolute; z-index: 24; display: flex; padding: calc(4px * var(--ks)); border-radius: calc(14px * var(--ks)); translate: -50% 0;
  background: #fff; font: 600 calc(16px * var(--ks))/1 'Geist', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(20, 20, 19, .06), 0 18px 40px -16px rgba(20, 20, 19, .35), 0 0 0 1px rgba(20, 20, 19, .07);
}
.h-fmt.tight { --ks: 1.7; }
.h-fmt span { position: relative; z-index: 1; display: grid; place-items: center; height: calc(40px * var(--ks)); padding: 0 calc(18px * var(--ks)); color: rgba(0, 0, 0, .45); transition: color 160ms ease; }
.h-fmt span.on { color: #141413; }
.h-fmt .th { position: absolute; left: 0; top: calc(4px * var(--ks)); bottom: calc(4px * var(--ks)); border-radius: calc(10px * var(--ks)); background: #F1EFEC; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }