/* The homepage below the hero. Loads after home.css (tokens, nav, the editable headline, the stage) and adds the
   logo's in-betweens, keyframe headings, the word wall, the library band, the scroll-scrubbed editor, the edit
   timeline, the rendering waitlist button, the page-as-timeline dock and the converging wordmark. */
:root { --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --opus: #ffc940; --frame: #05080f; }
html { scroll-behavior: auto; }

/* ---- the logo: two keyframes; on load and on hover they part and the in-betweens appear between them ---- */
.mark .dia { position: relative; display: inline-block; flex: none; width: 14px; height: 12px; transition: width .75s var(--ease); }
.mark .dia > i, .mark .dia > em { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0; display: block; transform: rotate(45deg); }
.mark .dia > i { background: var(--ink); }
.mark .dia > i:last-child { left: auto; right: 0; background: var(--pink); }
.mark .dia > em { --k: .25; left: calc((100% - 9px) * var(--k)); opacity: 0; transform: rotate(45deg) scale(.55);
                  background: color-mix(in oklab, var(--pink) calc(var(--k) * 100%), var(--ink));
                  transition: opacity .3s, transform .45s var(--ease); }
.mark .dia > em:nth-of-type(2) { --k: .5; }
.mark .dia > em:nth-of-type(3) { --k: .75; }
.mark.open .dia, .mark:hover .dia { width: 46px; }
.mark.open .dia > em, .mark:hover .dia > em { opacity: .9; transform: rotate(45deg) scale(.8); transition-delay: calc(.12s + var(--k) * .3s); }

/* ---- hero: no prompt bar. The brief is a caption on the frame's header, like the editor's ---- */
.hero { --fw: min(1080px, 100%, max(620px, calc((100svh - 412px) * 16 / 9))); }
.lede { margin-bottom: 18px; }
.frame-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: var(--fw); height: 26px; margin: 6px auto 0; padding: 0 2px;
              text-align: left; font-size: 14.5px; color: var(--ink-2); }
.frame-head .bar-mark i { width: 8px; height: 8px; }
.brief { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.spec { flex: none; font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.ready .frame-head.in { transition-delay: .16s; }
.hero .frame-wrap { margin-top: 10px; }

/* ---- keyframe headings: two diamonds pop, the in-between draws across, the words arrive as it passes ---- */
.sec { width: min(1200px, 100% - 40px); margin: 0 auto; padding: 150px 0 0; }
.kf-head { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.kf-head.left { margin: 0 0 30px; text-align: left; }
.kf-rail { position: relative; width: min(240px, 60%); height: 12px; margin: 0 auto 20px; }
.kf-head.left .kf-rail { margin-left: 0; }
.kf-rail::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--line); }
.kf-rail i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; background: var(--ink); transform: rotate(45deg) scale(0);
             transition: transform .45s cubic-bezier(.3, 1.7, .5, 1); }
.kf-rail i:last-of-type { left: auto; right: 0; background: var(--pink); }
.kf-rail s { position: absolute; top: 50%; left: 6px; height: 2px; margin-top: -1px; width: 0; border-radius: 2px;
             background: repeating-linear-gradient(90deg, var(--pink) 0 2px, transparent 2px 6px); transition: width 1s var(--ease) .3s; }
.kf-head.on .kf-rail i { transform: rotate(45deg) scale(1); }
.kf-head.on .kf-rail i:last-of-type { transition-delay: 1.15s; }
.kf-head.on .kf-rail s { width: calc(100% - 12px); }
.kf-title { margin: 0; font-size: clamp(34px, 4.3vw, 58px); line-height: 1.05; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.kf-head.left .kf-title { font-size: clamp(30px, 3.2vw, 44px); }
.kf-title .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.22em);
               transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.3s + var(--i) * 75ms); }
.kf-head.on .kf-title .w { opacity: 1; filter: none; transform: none; }
.kf-head p { margin: 18px auto 0; max-width: 60ch; color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.5; text-wrap: balance;
             opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .8s, transform .6s var(--ease) .8s; }
.kf-head.on p { opacity: 1; transform: none; }

/* the word inside a heading wears the headline's selection box */
.chip { position: relative; display: inline-flex; justify-content: center; padding: 0 .12em; margin-left: .06em; border: 2px solid var(--pink); border-radius: 4px;
        background: rgba(255, 61, 139, .06); white-space: nowrap; overflow: visible; }
.chip-t { display: inline-block; }
.chip > b { position: absolute; width: 9px; height: 9px; background: #fff; border: 2px solid var(--pink); border-radius: 2px; }
.chip > b:nth-of-type(1) { left: -6px; top: -6px; } .chip > b:nth-of-type(2) { right: -6px; top: -6px; }
.chip > b:nth-of-type(3) { left: -6px; bottom: -6px; } .chip > b:nth-of-type(4) { right: -6px; bottom: -6px; }

/* ---- the wall: live graphics, all saying the hero's word ---- */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--frame); isolation: isolate;
        box-shadow: 0 1px 2px rgba(10, 20, 45, .1), 0 22px 44px -30px rgba(10, 20, 45, .55); transform: translateZ(0); }
.tile.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tile .slot { position: absolute; inset: 0; overflow: hidden; }
.tile .slot.live { background: radial-gradient(120% 95% at 50% 28%, #1b2130 0%, #0b0f18 58%, #05080f 100%); }
.tile .still { position: absolute; inset: 0; transition: opacity .4s var(--ease); }
.tile .still.hidden { opacity: 0; pointer-events: none; }
.tile .still img { width: 100%; height: 100%; object-fit: cover; }
.tile iframe.anim, .ed-frame iframe, .mon-frame iframe, .spot-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
        background: transparent; color-scheme: normal; pointer-events: none; transition: opacity .35s var(--ease); }
.tile iframe.anim.pending { opacity: 0; }
.tile .lbl { position: absolute; left: 12px; bottom: 11px; z-index: 3; padding: 6px 9px; border-radius: 7px; background: rgba(8, 10, 16, .55); color: #fff;
             font: 550 12.5px/1 'Geist', sans-serif; backdrop-filter: blur(8px); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--ease); }
.tile:hover .lbl { opacity: 1; transform: none; }
/* a word change rings every tile once, in order */
.tile::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--pink); opacity: 0; pointer-events: none; }
.tile.swap::after { animation: ring .9s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes ring { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.wall-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; color: var(--ink-2); font-size: 15px; }
.wall-foot a { color: var(--ink); font-weight: 550; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dot { width: 8px; height: 8px; background: var(--pink); transform: rotate(45deg); flex: none; margin-right: 4px; }

/* ---- how it's made: a pinned editor; scrolling moves the playhead ---- */
.made { position: relative; height: 380vh; margin-top: 110px; }
.made-pin { position: sticky; top: 64px; height: calc(100vh - 64px); width: min(1200px, 100% - 40px); margin: 0 auto;
            display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 60px; align-items: center; }
.msteps { list-style: none; margin: 0; padding: 0; }
.msteps li { position: relative; padding: 13px 0 13px 30px; border-top: 1px solid var(--line); color: var(--ink-3); transition: color .3s; }
.msteps li:last-child { border-bottom: 1px solid var(--line); }
.msteps li::before { content: ''; position: absolute; left: 3px; top: 20px; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid #c9c9d1; transition: background .25s, border-color .25s, transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.msteps li b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.msteps li span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 14.5px; color: var(--ink-2); transition: max-height .4s var(--ease), opacity .3s; }
.msteps li.done { color: var(--ink-2); }
.msteps li.done::before { background: var(--ink); border-color: var(--ink); }
.msteps li.on { color: var(--ink); }
.msteps li.on::before { background: var(--pink); border-color: var(--pink); transform: rotate(45deg) scale(1.25); }
.msteps li.on span { max-height: 3em; opacity: 1; margin-top: 3px; }
.hint { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font: 500 12.5px/1 var(--mono); color: var(--ink-3); transition: opacity .3s; }
.hint::before { content: ''; width: 1px; height: 18px; background: linear-gradient(var(--ink-3), transparent); animation: hint 1.6s var(--ease) infinite; }
.hint.gone { opacity: 0; }
@keyframes hint { from { transform: translateY(-6px); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(6px); opacity: 0; } }

.ed { padding: 14px 14px 12px; border-radius: 20px; background: #0c0d11; color: #e9e9ee;
      box-shadow: 0 1px 2px rgba(10, 20, 45, .2), 0 50px 90px -50px rgba(10, 20, 45, .75); }
.ed-head { display: flex; align-items: center; gap: 10px; height: 26px; margin: 0 4px 10px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.ed .bar-mark i { width: 8px; height: 8px; background: #fff; }
.ed .bar-mark i + i { background: var(--pink); }
.ed-brief { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-brief b { color: #fff; font-weight: 600; }
.ed-brief .caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--pink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tc { flex: none; display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); }
.tc b { padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; }
.ed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: var(--frame); }
.ed-badge { position: absolute; left: 14px; top: 14px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
            background: rgba(8, 10, 16, .62); backdrop-filter: blur(10px); color: #fff; font: 500 12.5px/1 var(--mono); opacity: 0; transform: translateY(-4px);
            transition: opacity .25s, transform .3s var(--ease); }
.ed-badge.on { opacity: 1; transform: none; }
.ed-badge i { width: 7px; height: 7px; background: #3ccf9a; transform: rotate(45deg); }
.tl { position: relative; height: 78px; margin: 12px 8px 0; }
.ruler { position: relative; height: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1);
         background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px var(--step, 10px)) bottom / 100% 5px no-repeat; }
.ruler span { position: absolute; bottom: 0; padding: 0 0 7px 4px; border-left: 1px solid rgba(255, 255, 255, .3); height: 14px;
              font: 500 10.5px/1 var(--mono); color: rgba(255, 255, 255, .45); }
.track { position: relative; height: 28px; margin-top: 9px; border-radius: 6px; background: rgba(255, 255, 255, .045); }
.track .span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px 0 0 6px; background: rgba(255, 61, 139, .1); }
/* the in-betweens: one tick per frame, filled in behind the playhead */
.track .span::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px;
                      background: repeating-linear-gradient(90deg, rgba(255, 61, 139, .75) 0 1px, transparent 1px var(--fpx, 4px)); }
.kd { position: absolute; top: 50%; z-index: 2; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 2px;
      background: #0c0d11; transform: rotate(45deg) scale(.7); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1), background .2s, border-color .2s, box-shadow .3s; }
.kd.set { background: var(--pink); border-color: var(--pink); transform: rotate(45deg) scale(1); box-shadow: 0 0 14px rgba(255, 61, 139, .75); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 2px; margin-left: -1px; background: #fff; will-change: transform; }
.playhead b { position: absolute; top: -3px; left: -5px; width: 12px; height: 9px; border-radius: 3px 3px 1px 1px; background: #fff; }
.opus { position: absolute; left: 0; top: 41px; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; opacity: 0;
        transition: transform .55s var(--ease), opacity .25s; will-change: transform; }
.opus.on { opacity: 1; }
.opus svg { width: 18px; height: 22px; margin-left: -3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.opus span { margin: 15px 0 0 -2px; padding: 4px 6px; border-radius: 5px; background: var(--opus); color: #0b0b0c; font: 650 11.5px/1 'Geist', sans-serif; white-space: nowrap; }
.opus.click svg { transform: scale(.85); transform-origin: 20% 10%; }

/* ---- into your edit: an editing app, dark, the export dropped onto V2 over the footage ---- */
.nle { position: relative; border-radius: 18px; overflow: hidden; background: #111216; color: #c9cad1; font-size: 13px;
       box-shadow: 0 1px 2px rgba(10, 20, 45, .2), 0 60px 110px -60px rgba(10, 20, 45, .8); }
.nle-top { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px 0 16px; border-bottom: 1px solid #22232a; color: #8d8f99; }
.nle-dots { display: flex; gap: 7px; }
.nle-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2b2c33; }
.nle-seg { margin-left: auto; display: flex; padding: 3px; border-radius: 9px; background: #1b1c21; }
.nle-seg button { padding: 6px 11px; border: 0; border-radius: 7px; background: none; color: #8d8f99; font: 550 12.5px/1 'Geist', sans-serif; cursor: pointer; }
.nle-seg button.on { background: #2e2f37; color: #fff; }
.nle-mid { display: grid; grid-template-columns: 240px minmax(0, 1fr); border-bottom: 1px solid #22232a; }
.bin { display: grid; align-content: start; gap: 4px; padding: 14px 12px; border-right: 1px solid #22232a; }
.bin-h { margin: 0 6px 6px; color: #e6e7ec; font-weight: 600; }
.file { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 9px; min-width: 0; transition: opacity .3s; }
.file span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file small { display: block; color: #6f717b; font-size: 11.5px; }
.file.ib { color: #fff; background: rgba(255, 61, 139, .1); box-shadow: inset 0 0 0 1px rgba(255, 61, 139, .35); }
.file.ib.lift { opacity: .4; }
.th { position: relative; flex: none; width: 48px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.th-a { background: radial-gradient(60% 80% at 78% 34%, rgba(236, 148, 92, .7), transparent 62%), linear-gradient(172deg, #2b3550, #1d1c24); }
.th-b { background: radial-gradient(50% 70% at 30% 70%, rgba(84, 160, 220, .6), transparent 66%), linear-gradient(160deg, #273041, #121318); }
.th-ib { display: grid; place-items: center; background-color: #24252b; background-image: conic-gradient(#33343b 25%, transparent 0 50%, #33343b 0 75%, transparent 0); background-size: 8px 8px; }
.th-ib .bar-mark i { width: 7px; height: 7px; background: #fff; }
.th-ib .bar-mark i + i { background: var(--pink); }
.mon { display: grid; justify-items: center; gap: 8px; padding: 18px 22px 12px; }
.mon-frame { position: relative; width: min(100%, 760px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.checker { position: absolute; inset: 0; background-color: #1e1f23; background-image: conic-gradient(#2c2d33 25%, transparent 0 50%, #2c2d33 0 75%, transparent 0);
           background-size: 22px 22px; opacity: 0; transition: opacity .45s var(--ease); }
.mon-frame.alpha .checker { opacity: 1; }
.mon-frame canvas.backdrop { animation: drift 14s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes drift { to { transform: scale(1.06) translate(-1%, .5%); } }
.mon-tc { display: flex; justify-content: space-between; width: min(100%, 760px); font: 500 12px/1 var(--mono); color: #8d8f99; }
.mon-tc span:first-child { color: #fff; }
.nle-tl { position: relative; display: grid; gap: 6px; padding: 12px 14px 16px; }
.lane { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; height: 36px; }
.lab { display: grid; place-items: center; border-radius: 6px; background: #1b1c21; color: #6f717b; font: 600 11.5px/1 var(--mono); }
.lane-in { position: relative; border-radius: 6px; background: #17181c; }
.clip-v, .clip-a, .clip-ib, .ghost { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px;
                                      overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 550; }
.clip-v { left: 1%; width: 96%; color: #dce6ff; background: linear-gradient(90deg, rgba(10, 14, 24, .55), transparent 40%),
          repeating-linear-gradient(90deg, #2c3f6b 0 72px, #263862 72px 74px); box-shadow: inset 0 0 0 1px rgba(140, 170, 255, .25); }
.clip-a { left: 1%; width: 96%; padding: 0; background: #183327; box-shadow: inset 0 0 0 1px rgba(80, 220, 150, .25); }
.clip-a svg { width: 100%; height: 100%; display: block; }
.clip-ib, .ghost { color: #fff; background: var(--pink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.clip-ib .bar-mark i, .ghost .bar-mark i { width: 7px; height: 7px; background: #fff; }
.clip-ib .bar-mark i + i, .ghost .bar-mark i + i { background: #0b0b0c; }
.clip-ib { left: 34%; width: 24%; opacity: 0; transform: scaleY(.6); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.nle.placed .clip-ib { opacity: 1; transform: none; }
.ghost { z-index: 6; top: 0; left: 0; bottom: auto; height: 36px; opacity: 0; pointer-events: none; box-shadow: 0 16px 34px -10px rgba(255, 61, 139, .7); will-change: transform; }
.nle-ph { position: absolute; top: 6px; bottom: 10px; left: 0; z-index: 5; width: 2px; margin-left: -1px; background: #fff; opacity: 0; will-change: transform; }
.nle-ph::before { content: ''; position: absolute; top: -2px; left: -5px; width: 12px; height: 9px; border-radius: 3px; background: #fff; }
.nle.placed .nle-ph { opacity: 1; }
.nle-cur { position: absolute; left: 0; top: 0; z-index: 7; width: 20px; height: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; will-change: transform; }
.nle-cur.on { opacity: 1; }
.nle-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transition: transform .12s; transform-origin: 20% 10%; }
.nle-cur.down svg { transform: scale(.85); }
.nle-foot { display: flex; justify-content: center; margin: 18px 0 0; }
.replay { border: 0; background: none; padding: 6px 4px; color: var(--ink-2); font: 500 14.5px/1 'Geist', sans-serif; cursor: pointer; text-decoration: underline;
          text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.replay:hover { color: var(--ink); }

/* ---- the waitlist: the button renders, and your spot comes back as a graphic ---- */
.wl-sec .kf-head { margin-bottom: 30px; }
.wl-sec .bar.wl { width: min(600px, 100%); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.wl-go { position: relative; overflow: hidden; height: 44px; min-width: 176px; padding: 0 20px; border-radius: 999px; background: var(--pink); color: #fff;
         font: 600 15px/1 'Geist', sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.wl-go:hover { background: #ff5a9d; }
.wl-go:active { transform: scale(.97); }
.wl-fill { position: absolute; inset: 0; background: #d81f6c; transform-origin: left; transform: scaleX(var(--p, 0)); }
.wl-txt { position: relative; font-variant-numeric: tabular-nums; }
.wl-go.rendering .wl-txt { font-family: var(--mono); font-size: 13.5px; }
.bar.wl.sent { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; }
.spot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s var(--ease); }
.spot.open { grid-template-rows: 1fr; }
.spot-in { min-height: 0; overflow: hidden; }
.spot-frame { position: relative; width: min(780px, 100%); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--frame);
              box-shadow: 0 1px 2px rgba(10, 20, 45, .12), 0 40px 80px -44px rgba(10, 20, 45, .6); }
.spot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: min(780px, 100%); margin: 16px auto 0; }
.spot-say { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 550; }
.spot-say i { width: 9px; height: 9px; background: var(--pink); transform: rotate(45deg); }
.spot-btns { display: flex; gap: 8px; }
.wl-go.rendering:disabled { opacity: 1; cursor: progress; }   /* home.css fades a disabled button; this one is busy, not off */
.wl-sec.done .wl-msg { display: none; }
.wl-sec.done .bar.wl { display: none; }

/* ---- the end: the wordmark's in-betweens close up as you arrive ---- */
.end { margin-top: 170px; padding: 0 20px 26px; overflow: hidden; }
.word { position: relative; width: min(1200px, 100%); margin: 0 auto; text-align: center; font-weight: 760; font-size: clamp(64px, 16.4vw, 236px);
        line-height: .86; letter-spacing: -.065em; user-select: none; --p: 0; }
.word span { display: block; }
.word span:first-child { position: relative; z-index: 2; color: var(--ink); }
.word span + span { position: absolute; inset: 0; z-index: 1; --k: 1; color: var(--pink);
                    opacity: calc((.62 - var(--k) * .15) * (1 - var(--p)));
                    transform: translateX(calc((1 - var(--p)) * var(--k) * -.085em)); }
.word span:nth-child(3) { --k: 2; }
.word span:nth-child(4) { --k: 3; }
.end-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; width: min(1200px, 100%); margin: 44px auto 0; padding-top: 22px;
           border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; }
.end-row a { text-decoration: none; }
.end-row a:hover { color: var(--ink); }
.end-row .mark { margin-right: auto; color: var(--ink); }

/* ---- smaller screens ---- */
@media (max-width: 1000px) {
  .made-pin { grid-template-columns: 1fr; align-content: center; gap: 22px; }
  .made-copy .kf-head { margin-bottom: 14px; }
  .made-copy .kf-title { font-size: clamp(24px, 6vw, 34px); }
  .msteps li { display: none; border: 0; padding: 0 0 0 26px; }
  .msteps li.on { display: block; }
  .msteps li::before { top: 7px; }
  .hint { margin-top: 12px; }
}
@media (max-width: 860px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.big { grid-row: span 1; aspect-ratio: 16 / 9; }
  .nle-mid { grid-template-columns: 1fr; }
  .bin { display: none; }
  .sec { padding-top: 110px; }
}
@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr; }
  .tile.big { grid-column: auto; }
  .frame-head .spec { display: none; }
  .ed { padding: 10px 10px 8px; border-radius: 16px; }
  .ed-head .tc span { display: none; }
  .tl { height: 72px; margin: 10px 4px 0; }
  .nle-top > span:nth-child(2) { display: none; }
  .mon { padding: 12px 10px 8px; }
  .wl-go { flex-basis: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-title .w, .kf-head p, .kf-rail i, .kf-rail s { transition: none !important; }
  .mon-frame canvas.backdrop, .hint::before { animation: none; }
}

/* =============================================================================================================
   v2: more motion. Lights down for the middle of the page, headings drawn by a selection box, a dealt and
   tiltable wall, a tilted band of every loop, transitions on the frames, the page-as-timeline dock, confetti.
   ============================================================================================================= */

/* ---- lights down: the page goes dark for the band, the editor and the edit, then comes back up ---- */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #0b0b0c; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #5f5f67; }
@property --ink-3 { syntax: '<color>'; inherits: true; initial-value: #8b8b93; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #e8e8ec; }
html { transition: --bg 1.1s var(--ease), --ink 1.1s var(--ease), --ink-2 1.1s var(--ease), --ink-3 1.1s var(--ease), --line 1.1s var(--ease); }
html.dark { --bg: #07080b; --ink: #f3f3f6; --ink-2: #a2a2ac; --ink-3: #6c6c76; --line: #24252c; }
.nav { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); }
.ed, .nle { transition: box-shadow 1.1s var(--ease); }
html.dark .ed, html.dark .nle { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 160px -60px rgba(255, 61, 139, .38); }
html.dark .msteps li::before { border-color: #3b3c45; }

/* ---- headings: a selection box draws across, the letters flip up behind its edge, then it lets go ---- */
.kf-in { position: relative; display: inline-block; max-width: 100%; perspective: 600px; isolation: isolate; }
.kf-title .w { display: inline-block; white-space: nowrap; opacity: 1; filter: none; transform: none; transition: none; }
.kf-title .c { display: inline-block; opacity: 0; transform: translateY(.42em) rotateX(-80deg); filter: blur(8px); transform-origin: 50% 85%;
               transition: opacity .4s var(--ease), transform .75s cubic-bezier(.2, 1.35, .35, 1), filter .45s var(--ease);
               transition-delay: calc(.18s + var(--c) * 18ms); }
.kf-head.on .kf-title .c { opacity: 1; transform: none; filter: none; }
.kf-title .chip { opacity: 0; transform: translateY(.3em) scale(.9); transition: opacity .4s var(--ease), transform .8s cubic-bezier(.2, 1.4, .35, 1);
                  transition-delay: calc(.18s + var(--c) * 18ms); }
.kf-head.on .kf-title .chip { opacity: 1; transform: none; }
.chip-t { overflow: hidden; white-space: nowrap; max-width: 100%; }
.sel { position: absolute; inset: -.02em -.16em .02em; z-index: -1; pointer-events: none; border: 2px solid var(--pink); border-radius: 4px;
       background: rgba(255, 61, 139, .05); clip-path: inset(-12px calc(100% + 12px) -12px -12px); }
.sel b { position: absolute; width: 9px; height: 9px; background: var(--bg); border: 2px solid var(--pink); border-radius: 2px; }
.sel b:nth-child(1) { left: -6px; top: -6px; } .sel b:nth-child(2) { right: -6px; top: -6px; }
.sel b:nth-child(3) { left: -6px; bottom: -6px; } .sel b:nth-child(4) { right: -6px; bottom: -6px; }
.kf-head.on .sel { animation: selDraw calc(var(--n, 20) * 18ms + .3s) cubic-bezier(.45, 0, .25, 1) .12s both,
                                selOut .55s var(--ease) calc(var(--n, 20) * 18ms + 1.15s) forwards; }
@keyframes selDraw { from { clip-path: inset(-12px calc(100% + 12px) -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } }
@keyframes selOut { to { opacity: 0; clip-path: inset(-12px -12px -12px -12px); } }

/* ---- the wall: dealt from a stack when it arrives; tilts toward the cursor with a sheen ---- */
.wall.pre .tile { opacity: 0; }
.tile { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s cubic-bezier(.2, 1.25, .3, 1), box-shadow .35s; will-change: transform; }
.tile.hov { transition: transform .14s linear, box-shadow .35s; box-shadow: 0 1px 2px rgba(10, 20, 45, .1), 0 46px 80px -38px rgba(10, 20, 45, .7); }
.tile .gloss { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: screen;
               background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 42%); }
.tile.hov .gloss { opacity: 1; }

/* ---- the band: the lights go down over a tilted wall of every loop ---- */
.band { position: relative; height: 108vh; min-height: 660px; margin-top: 140px; overflow: hidden; background: #07080b; isolation: isolate; }
.band::before, .band::after { content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: 24%; pointer-events: none; }
.band::before { top: 0; background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent)); }
.band::after { bottom: 0; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
.band-plane { position: absolute; left: 50%; top: 50%; z-index: 0; display: grid; gap: 18px; width: 180%;
              transform: translate(-50%, calc(-50% + var(--py, 0px))) perspective(1700px) rotateX(27deg) rotateZ(-11deg); }
.band-row { position: relative; height: 196px; }
.band-row canvas { position: absolute; left: 0; top: 0; width: 348px; height: 196px; border-radius: 12px; background: #0b0f18;
                   box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 40px -22px rgba(0, 0, 0, .9); will-change: transform; }
.band-vids { position: absolute; left: 0; top: 0; width: 4px; height: 4px; overflow: hidden; opacity: .01; pointer-events: none; }
.band-vids video { width: 4px; height: 4px; }
.band-copy { position: relative; z-index: 3; height: 100%; display: grid; place-content: center; justify-items: center; padding: 0 20px; text-align: center; color: #fff; }
.band-copy::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                     background: radial-gradient(52% 46% at 50% 52%, rgba(7, 8, 11, .95), rgba(7, 8, 11, .72) 52%, rgba(7, 8, 11, 0) 84%); }
.band-title { margin: 0; font-size: clamp(46px, 6.8vw, 108px); line-height: 1; font-weight: 750; letter-spacing: -.05em; }
.band-copy p { margin: 22px 0 0; max-width: 44ch; color: rgba(255, 255, 255, .7); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; text-wrap: balance; }
.band-link { display: inline-flex; align-items: center; gap: 8px; height: 48px; margin-top: 28px; padding: 0 22px; border-radius: 999px; background: #fff; color: #0b0b0c;
             font-weight: 600; font-size: 15.5px; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.band-link:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255, 61, 139, .7); }
.band-link span { transition: transform .25s var(--ease); }
.band-link:hover span { transform: translateX(4px); }
.band-copy > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.band-copy.on > * { opacity: 1; transform: none; }
.band-copy.on > :nth-child(2) { transition-delay: .25s; }
.band-copy.on > :nth-child(3) { transition-delay: .4s; }
/* the count rolls up like an odometer */
/* Each drum is a window taller than the glyphs (1.3em, pulled back to one line by its margins), so no font's
   metrics can clip a digit; a cell is as tall as the window, so only one digit shows at rest. The block sits on the
   top of the line box, and the cells' line-height puts every digit on the headline's own baseline. */
.odo { display: inline-block; height: 1em; vertical-align: top; white-space: nowrap; color: var(--pink); font-variant-numeric: tabular-nums; }
.odo .d { display: inline-block; height: 1.3em; margin: -.15em 0; overflow: hidden; vertical-align: top; }
.odo .d:first-child:not(:last-child) { width: 0; opacity: 0; }   /* the tens drum grows in when the count reaches 10 */
.odo .strip { display: block; will-change: transform; }
.odo .d b { display: block; height: 1.3em; line-height: 1.3em; font-weight: inherit; }
/* the tiles behind the count switch on as it climbs */
.band-row canvas { opacity: .12; transition: opacity .45s var(--ease); }
.band-row canvas.on { opacity: 1; animation: pwr .8s var(--ease); }
@keyframes pwr { from { filter: brightness(2.6) saturate(1.5); } to { filter: none; } }

/* ---- transitions on the frames: the edit wipes on, your spot irises open ---- */
.nle { clip-path: inset(0 100% 0 0 round 18px); transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1), box-shadow 1.1s var(--ease); }
.nle.in { clip-path: inset(0 0 0 0 round 18px); }
.spot-frame { clip-path: circle(0% at 50% 50%); }
.spot.open .spot-frame { clip-path: circle(75% at 50% 50%); transition: clip-path 1.2s cubic-bezier(.6, 0, .2, 1) .15s; }

/* ---- the dock: the page is a timeline; scroll is the playhead, every section a keyframe ---- */
.dock { position: fixed; left: 50%; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 14px; width: min(620px, calc(100% - 32px)); height: 48px;
        padding: 0 16px; border-radius: 14px; background: rgba(14, 15, 19, .84); color: rgba(255, 255, 255, .55); font: 500 12px/1 var(--mono);
        backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 44px -18px rgba(0, 0, 0, .65); transform: translate(-50%, 170%); transition: transform .7s var(--ease); }
.dock.on { transform: translate(-50%, 0); }
.dock-f { flex: none; padding: 6px 8px; border-radius: 7px; background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.dock-tc { flex: none; font-variant-numeric: tabular-nums; }
.dock-tl { position: relative; flex: 1; height: 26px; margin: 0 6px; }
.dock-tl::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.dock-fill { position: absolute; left: 0; top: 50%; width: 0; height: 10px; margin-top: -5px; background: repeating-linear-gradient(90deg, rgba(255, 61, 139, .85) 0 1px, transparent 1px 4px); }
.dock-ph { position: absolute; top: 1px; bottom: 1px; left: 0; z-index: 2; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; pointer-events: none; }
.dock-k { position: absolute; top: 50%; z-index: 1; width: 22px; height: 26px; margin: -13px 0 0 -11px; padding: 0; border: 0; background: none; cursor: pointer; }
.dock-k i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 2px;
            background: #0e0f13; transform: rotate(45deg); transition: background .2s, border-color .2s, transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.dock-k.set i { background: var(--pink); border-color: var(--pink); }
.dock-k:hover i, .dock-k.now i { transform: rotate(45deg) scale(1.3); }
.dock-k::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 9px; border-radius: 7px; background: #fff; color: #0b0b0c;
                 font: 600 12px/1 'Geist', sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity .2s, transform .25s var(--ease); }
.dock-k:hover::after, .dock-k.say::after { opacity: 1; transform: translate(-50%, 0); }

/* ---- confetti: keyframe diamonds ---- */
.confetti { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 560px) {
  .dock { bottom: 10px; height: 44px; gap: 10px; padding: 0 12px; }
  .dock-tc { display: none; }
  .band { height: 92vh; min-height: 560px; }
  .band-row { height: 120px; }
  .band-row canvas { width: 214px; height: 120px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-title .c, .kf-title .chip, .tile, .nle, .spot-frame, .band-row canvas, .band-copy > * { transition: none !important; }
  .kf-head.on .sel { animation: none; }
}

/* ---- the headline arrives like the logo: sliding in with its in-betweens trailing behind ---- */
.ready .title .l1, .ready .title .l2 { animation: trail 1.15s cubic-bezier(.2, .8, .2, 1) both; }
.ready .title .l2 { animation-delay: .1s; }
@keyframes trail {
  from { transform: translateX(-.42em); text-shadow: -.11em 0 rgba(255, 61, 139, .5), -.22em 0 rgba(255, 61, 139, .3), -.33em 0 rgba(255, 61, 139, .14); }
  to { transform: none; text-shadow: 0 0 rgba(255, 61, 139, 0), 0 0 rgba(255, 61, 139, 0), 0 0 rgba(255, 61, 139, 0); }
}
@media (prefers-reduced-motion: reduce) { .ready .title .l1, .ready .title .l2 { animation: none; } }