:root {
  --bg: #ffffff;
  --ink: #0b0b0c;
  --ink-2: #5f5f67;
  --ink-3: #8b8b93;
  --line: #e8e8ec;
  --soft: #f5f5f7;
  --pink: #ff3d8b;
  --pink-ink: #ffffff;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 16px/1.55 'Geist', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 32px;
       padding: 0 max(20px, calc((100vw - 1200px) / 2)); background: rgba(255, 255, 255, .9);
       backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; font-size: 19px; letter-spacing: -.02em; }
.mark i { width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); display: inline-block; }
.mark i + i { margin-left: -4px; background: var(--pink); }
.links { display: flex; gap: 26px; margin-right: auto; }
.links a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.links a:hover { color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 999px;
       font: 550 15px/1 'Geist', sans-serif; text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease), background .15s, border-color .15s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262b; }
.btn-pink { background: var(--pink); color: var(--pink-ink); }
.btn-pink:hover { background: #ff5a9d; }
.btn-outline { border: 1px solid #d9d9df; color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }


/* ---- hero ---- */
/* the frame is sized so the whole graphic, and the scene strip under it, sit in the first screen */
.hero { position: relative; min-height: calc(100vh - 64px); padding: clamp(24px, 5vh, 64px) 20px 40px; text-align: center;
        --fw: min(1080px, 100%, max(620px, calc((100svh - 476px) * 16 / 9))); }
.title { position: relative; z-index: 2; margin: 0 auto; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; font-weight: 700; letter-spacing: -.04em; }
.title .l1, .title .l2 { display: block; white-space: nowrap; }
.title .m { display: none; }
.lede { position: relative; z-index: 2; margin: 14px auto 26px; max-width: min(100%, 840px); color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; text-wrap: balance; }
.lede-edit { display: none; }
.editing .lede-rest { display: none; }
.editing .lede-edit { display: inline; animation: ledeIn .5s var(--ease) both; }
.lede a { color: var(--ink); font-weight: 550; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lede a:hover { color: var(--pink); }
@keyframes ledeIn { from { opacity: 0; transform: translateY(4px); } }
.in { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.ready .in { opacity: 1; transform: none; filter: none; }
.hero .lede.in { transition-delay: .08s; }
.hero .bar.in { z-index: 3; transition: opacity .55s var(--ease) .16s, transform .55s var(--ease) .16s, filter .55s var(--ease) .16s, border-color .2s, box-shadow .2s; }
.later { opacity: 0; transition: opacity .7s var(--ease); }
.revealed .later { opacity: 1; }
.nav.later { pointer-events: none; }
.revealed .nav.later { pointer-events: auto; }

/* the headline's last word is a real text field inside a selection box: type, and the graphic below follows.
   home.js sizes the field to its own rendered text; the box keeps a fixed height so nothing below moves, and
   a long word shrinks (--ss, set by home.js) instead of overflowing. */
.say { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 1.2em; margin-left: .1em; padding: 0 .13em; vertical-align: baseline;
       border: 2px solid var(--pink); border-radius: 4px; background: rgba(255, 61, 139, .06); cursor: text;
       transition: background .2s, box-shadow .3s var(--ease); }
.say:hover { background: rgba(255, 61, 139, .1); }
.say:focus-within { background: #fff; box-shadow: 0 0 0 6px rgba(255, 61, 139, .13), 0 18px 40px -18px rgba(255, 61, 139, .45); }
.say > b { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid var(--pink); border-radius: 2px; }
.say > b:nth-of-type(1) { left: -7px; top: -7px; } .say > b:nth-of-type(2) { right: -7px; top: -7px; }
.say > b:nth-of-type(3) { left: -7px; bottom: -7px; } .say > b:nth-of-type(4) { right: -7px; bottom: -7px; }
.say-field { display: inline-block; font-size: var(--ss, 1em); border-radius: .06em; transition: background .12s; }
.say-field input { display: block; min-width: .4em; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; text-align: center;
                   font: inherit; letter-spacing: inherit; line-height: 1.1; color: var(--ink); caret-color: var(--pink); }
.say-field input::selection { background: rgba(255, 61, 139, .28); }
.say.sel .say-field { background: rgba(255, 61, 139, .24); }
.say-caret { position: absolute; right: .08em; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--pink); opacity: 0; }
.say.typing .say-caret { opacity: 1; }
.say:focus-within .say-caret { opacity: 0; }
/* the invitation: a tag beside the box, like a design tool's layer label */
.say-tag { position: absolute; left: calc(100% + 16px); top: 50%; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--ink); color: #fff;
           font: 600 13px/26px 'Geist', sans-serif; letter-spacing: 0; white-space: nowrap; pointer-events: none;
           opacity: 0; transform: translate(-6px, -50%); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.say-tag::before { content: ''; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--ink); transform: rotate(45deg); border-radius: 1px; }
.revealed .say-tag { opacity: 1; transform: translate(0, -50%); }
.say:focus-within .say-tag, .say.sel .say-tag, .say.typing .say-tag, .editing .say-tag { opacity: 0; transform: translate(-6px, -50%); }

/* the prompt bar */
.bar { position: relative; display: flex; align-items: center; gap: 12px; width: min(680px, 100%); height: 64px; margin: 0 auto;
       padding: 0 10px 0 18px; background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; text-align: left;
       box-shadow: 0 1px 2px rgba(15, 15, 30, .04), 0 12px 32px -14px rgba(15, 15, 30, .18); transition: border-color .2s, box-shadow .2s; }
.bar:focus-within { border-color: #c9c9d1; box-shadow: 0 0 0 4px rgba(255, 61, 139, .14), 0 12px 32px -14px rgba(15, 15, 30, .18); }
.bar-mark { display: inline-flex; align-items: center; flex: none; }
.bar-mark i { width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }
.bar-mark i + i { margin-left: -4px; background: var(--pink); }
.bar-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
.bar input { width: 100%; border: 0; outline: 0; background: transparent; font: 450 18px/1.2 'Geist', sans-serif; color: var(--ink); caret-color: var(--pink); padding: 0; }
.bar input::placeholder { color: var(--ink-3); }
.bar-hl { position: absolute; top: 50%; height: 30px; transform: translateY(-50%); background: rgba(255, 61, 139, .22); border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.bar-hl.on { opacity: 1; }
.bar-go { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; cursor: pointer;
          transition: transform .15s var(--ease), background .15s; }
.bar-go svg { width: 20px; height: 20px; }
.bar-go:hover { background: #ff5a9d; }
.bar-go.press, .bar-go:active { transform: scale(.9); }

/* the stage opens BELOW the bar: nothing above it moves */
.stage { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease); }
.stage.open { grid-template-rows: 1fr; opacity: 1; }
.stage-inner { overflow: hidden; }
/* once open, stop clipping so the frame's shadow and the ambient light aren't cut into hard edges */
.stage.settled .stage-inner { overflow: visible; }
.frame-wrap { position: relative; width: var(--fw); margin: 28px auto 4px; isolation: isolate; }
.frame { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; cursor: text;
         background: #05080f; box-shadow: 0 1px 2px rgba(10, 20, 45, .12), 0 26px 50px -32px rgba(10, 20, 45, .5); }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity .5s var(--ease), filter .6s var(--ease); filter: blur(14px) brightness(.85); }
.poster.sharp { filter: none; }
.poster.gone { opacity: 0; pointer-events: none; }
.progress { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--pink); z-index: 3; box-shadow: 0 0 12px rgba(255, 61, 139, .8); }
.progress.run { width: 100%; transition: width .8s var(--ease); }
.progress.done { opacity: 0; transition: opacity .3s; }

/* ambient light: the scene's light spills onto the page around the frame, like YouTube's ambient mode. Three
   soft lights per scene, placed where its light is (gold Japan low left, blue atmosphere top right, green cash
   below), drift between the clip's opening and its hero moment. */
@property --a1 { syntax: '<color>'; inherits: false; initial-value: rgb(255 255 255 / 0); }
@property --a2 { syntax: '<color>'; inherits: false; initial-value: rgb(255 255 255 / 0); }
@property --a3 { syntax: '<color>'; inherits: false; initial-value: rgb(255 255 255 / 0); }
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
/* light positions are authored in a box 132% x 148% of the frame; the painted box is larger (156% x 180%) so no
   light is cut off, and its edges fade out through a mask */
.ambient { position: absolute; inset: -30% -28% -50%; z-index: 0; pointer-events: none; opacity: 0;
           background: radial-gradient(ellipse 39% 41% at calc(7.7% + var(--x1) * .846) calc(8.9% + var(--y1) * .822), var(--a1), transparent),
                       radial-gradient(ellipse 30.5% 34.5% at calc(7.7% + var(--x2) * .846) calc(8.9% + var(--y2) * .822), var(--a2), transparent),
                       radial-gradient(ellipse 34% 25% at calc(7.7% + var(--x3) * .846) calc(8.9% + var(--y3) * .822), var(--a3), transparent);
           -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 16%, #000 84%, transparent);
           -webkit-mask-composite: source-in;
           mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 16%, #000 84%, transparent);
           mask-composite: intersect;
           --t: 1s;
           transition: opacity 1.6s var(--ease), --a1 var(--t) ease-in-out, --a2 var(--t) ease-in-out, --a3 var(--t) ease-in-out,
                       --x1 var(--t) ease-in-out, --y1 var(--t) ease-in-out, --x2 var(--t) ease-in-out, --y2 var(--t) ease-in-out,
                       --x3 var(--t) ease-in-out, --y3 var(--t) ease-in-out; }
.stage.settled .ambient { opacity: 1; }

/* the scene strip: every graphic in the loop, the live one ringed with its progress running along the bottom */
.reel { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; width: var(--fw); margin: 20px auto 0; }
.clip { position: relative; flex: none; width: 64px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; background: #0a0d14; cursor: pointer;
        opacity: .45; transition: opacity .3s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.clip img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.clip:hover, .clip:focus-visible { opacity: 1; transform: translateY(-2px); }
.clip.on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink), 0 10px 20px -10px rgba(255, 61, 139, .7); }
.clip i { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .28); opacity: 0; }
.clip.on i { opacity: 1; }
.clip i::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--pt, 0ms) linear; }
.clip::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 9px; border-radius: 7px; background: var(--ink); color: #fff;
               font: 550 12px/1 'Geist', sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s, transform .2s var(--ease); }
.clip:hover::after, .clip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* the demo cursor */
.cursor { position: absolute; left: 0; top: 0; z-index: 10; width: 22px; height: 26px; opacity: 0; pointer-events: none;
          transition: transform .45s var(--ease), opacity .18s; will-change: transform; }
.cursor.on { opacity: 1; }
.cursor.click svg { transform: scale(.82); }
.cursor svg { width: 100%; height: 100%; transition: transform .12s; transform-origin: 20% 10%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }

/* ---- sections ---- */
.section { width: min(1200px, 100% - 40px); margin: 0 auto; padding: 110px 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.sec-head.center { justify-content: center; text-align: center; }
.sec-head h2, .final h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.sec-head p { margin: 12px 0 0; color: var(--ink-2); max-width: 52ch; font-size: 17px; }

.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0a0d14; border: 1px solid rgba(0, 0, 0, .06); }
.vid video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat:hover video, .vid:hover video { transform: scale(1.03); }

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.cat h3 { margin: 16px 0 4px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.cat p { margin: 0; color: var(--ink-2); font-size: 15px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 22px; background: #fff; }
.step h3 { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; font-size: 18px; font-weight: 650; }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 650; }
.step-vis { height: 170px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; padding: 16px; }
.mini-bar { width: 100%; max-width: 300px; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; font-size: 14px; color: var(--ink); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .2); }
.mini-bar span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar b { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); flex: none; }
.mini-panel { width: 100%; max-width: 280px; display: grid; gap: 10px; background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 14px; font-size: 12.5px; color: var(--ink-2); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .2); }
.mini-panel label { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; }
.mini-input { border: 1px solid #e4e4e7; border-radius: 8px; padding: 5px 8px; color: var(--ink); font-size: 13px; }
.dots { display: flex; gap: 7px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.dots i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.slider { position: relative; height: 4px; border-radius: 4px; background: #e4e4e7; }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 4px; background: var(--pink); }
.slider i::after { content: ''; position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid #d9d9df; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.mini-export { display: grid; gap: 14px; justify-items: center; }
.chips { display: flex; gap: 6px; }
.chips span { border: 1px solid #e4e4e7; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 13px; color: var(--ink-2); }
.chips span.on { border-color: var(--ink); color: var(--ink); }
.mini-btn { background: var(--pink); color: #fff; border-radius: 12px; padding: 12px 34px; font-weight: 600; font-size: 15px; box-shadow: 0 10px 24px -12px rgba(255, 61, 139, .7); }

.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.plan { border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; }
.plan-main { border-color: var(--ink); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .35); }
.plan h3 { margin: 0; font-size: 17px; font-weight: 650; }
.price { margin: 12px 0 16px; display: flex; align-items: baseline; gap: 4px; }
.price b { font-size: 44px; font-weight: 700; letter-spacing: -.03em; }
.price span { color: var(--ink-2); }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.plan ul li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin-right: 10px; vertical-align: middle; }
.plan .btn { margin-top: auto; }
.fine { text-align: center; color: var(--ink-3); font-size: 14px; margin: 22px 0 0; }

.beta-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -14px 0 30px; color: var(--ink-2); font-size: 15px; }
.beta-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; }

/* ---- early access: an email field styled like the prompt bar ---- */
.early .sec-head { margin-bottom: 28px; }
.early .sec-head p { max-width: 64ch; }
.wl-slot { width: min(680px, 100%); min-height: 96px; margin: 0 auto; scroll-margin-top: 140px; }
.bar.wl { padding-right: 10px; }
.bar.wl:has(input[aria-invalid="true"]) { border-color: #e5484d; }
.wl-go { height: 44px; border: 0; cursor: pointer; flex: none; }
.wl-go:disabled { opacity: .6; cursor: default; }
.wl-msg { min-height: 22px; margin: 10px 4px 0; font-size: 14.5px; color: var(--ink-2); text-align: center; }
.wl-msg.err { color: #e5484d; }
.wl-done { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; margin: 0; padding: 14px 22px;
           border-radius: 18px; background: var(--soft); font-size: 17px; font-weight: 500; text-align: left; animation: wlIn .45s var(--ease) both; }
.wl-done i { width: 9px; height: 9px; background: var(--pink); transform: rotate(45deg); flex: none; }
@keyframes wlIn { from { opacity: 0; transform: translateY(6px); } }

.final { text-align: center; padding-bottom: 120px; }
.final .bar { margin-top: 28px; }
.hero .bar { height: 68px; box-shadow: 0 1px 2px rgba(15, 15, 30, .04), 0 18px 40px -16px rgba(15, 15, 30, .22); }

.foot { display: flex; align-items: center; gap: 26px; width: min(1200px, 100% - 40px); margin: 0 auto; padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.foot .mark { font-size: 16px; color: var(--ink); margin-right: auto; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .links { display: none; }
  .nav { gap: 12px; justify-content: space-between; }
  .cats, .steps, .more, .plans { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .section { padding-top: 80px; }
  .foot { flex-wrap: wrap; gap: 14px 22px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 36px; }
  .lede { margin-bottom: 24px; }
  .bar { height: 58px; }
  .bar input { font-size: 16px; }
  .frame-wrap { margin-top: 24px; }
  .frame { border-radius: 12px; }
  .bar.wl { flex-wrap: wrap; height: auto; padding: 6px; row-gap: 6px; }
  .bar.wl .bar-mark { margin-left: 10px; }
  .bar.wl .bar-field { flex: 1 1 0; height: 46px; }
  .wl-go { flex-basis: 100%; width: 100%; }
  .wl-done { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .in, .stage, .poster, .cursor, .progress, .vid video { transition: none !important; }
  .stage.open .stage-inner { overflow: visible; }
  html { scroll-behavior: auto; }
}


/* in-scene edit: a selection box over the text inside the live graphic */
.edit-box { position: absolute; z-index: 4; border: 2px solid var(--pink); border-radius: 4px; background: rgba(255, 61, 139, .12);
            opacity: 0; pointer-events: none; transition: opacity .15s, width .12s var(--ease), left .12s var(--ease); }
.edit-box.on { opacity: 1; }
.edit-box b { position: absolute; width: 9px; height: 9px; background: #fff; border: 2px solid var(--pink); border-radius: 2px; }
.edit-box b:nth-child(1) { left: -6px; top: -6px; } .edit-box b:nth-child(2) { right: -6px; top: -6px; }
.edit-box b:nth-child(3) { left: -6px; bottom: -6px; } .edit-box b:nth-child(4) { right: -6px; bottom: -6px; }
.edit-box.live { transition: opacity .15s, width .08s linear, left .08s linear; }
@media (max-width: 700px) {
  .say-tag { left: 50%; top: calc(100% + 12px); transform: translate(-50%, -4px); }
  .say-tag::before { left: 50%; top: -4px; margin: 0 0 0 -4.5px; }
  .revealed .say-tag { transform: translate(-50%, 0); }
  .say:focus-within .say-tag, .say.sel .say-tag, .say.typing .say-tag, .editing .say-tag { transform: translate(-50%, -4px); }
  .title .m { display: inline; }
  .title .l2 { margin-top: 6px; }
  .say { margin: 10px 0 0; }
  .lede { margin-top: 50px; }
}
@media (max-width: 560px) {
  .reel { gap: 5px; }
  .clip { flex: 1 1 0; width: auto; border-radius: 6px; }
  .clip i { left: 3px; right: 3px; bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ambient, .clip, .clip i::after, .say, .say-tag { transition: none !important; } .editing .lede-edit { animation: none; } }