/* ═══════════════════════════════════════════════════════════════════════════ THE HOMEPAGE IS THE MODEL. THIS FILE IS ITS STYLESHEET, VERBATIM. Generated by tools/sync-site-css.py — do not edit by hand, and do not hand-pick rules out of it. Page-specific styling belongs in that page's own stylesheet, loaded AFTER this one. ═══════════════════════════════════════════════════════════════════════════ */ :root { --gold-h: 84; --gold-c: 0.105; --gold-l: 0.80; --gold: oklch(var(--gold-l) var(--gold-c) var(--gold-h)); --gold-bright: oklch(calc(var(--gold-l) + 0.07) calc(var(--gold-c) - 0.005) calc(var(--gold-h) + 3)); --gold-deep: oklch(calc(var(--gold-l) - 0.13) var(--gold-c) calc(var(--gold-h) - 6)); --gold-soft: oklch(var(--gold-l) var(--gold-c) var(--gold-h) / 0.14); --gold-faint: oklch(var(--gold-l) var(--gold-c) var(--gold-h) / 0.07); --amber: oklch(0.74 0.15 50); --amber-soft: oklch(0.74 0.15 50 / 0.30); --amber-faint: oklch(0.74 0.15 50 / 0.13); --base-h: 80; --base-c: 0.008; --bg: oklch(0.155 var(--base-c) var(--base-h)); --bg-chrome: oklch(0.125 var(--base-c) var(--base-h)); --panel: oklch(0.185 var(--base-c) var(--base-h)); --surface: oklch(0.205 var(--base-c) var(--base-h)); --surface-hi:oklch(0.235 var(--base-c) var(--base-h)); --text: oklch(0.945 0.005 var(--base-h)); --text-soft: oklch(0.78 0.006 var(--base-h)); --text-mut: oklch(0.62 0.007 var(--base-h)); --text-dim: oklch(0.50 0.007 var(--base-h)); --line: oklch(1 0 0 / 0.08); --line-hi: oklch(1 0 0 / 0.14); --eyebrow: #a98c5f; --radius: 11px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* A canvas, image or svg that outgrows its column is the usual cause of the sideways spill above. */ img, svg, canvas, video { max-width: 100%; } html { scroll-behavior: smooth; } /* ⚠️ Both html AND body. Safari on iOS expands the LAYOUT VIEWPORT to whatever the widest thing on the page is, and `overflow-x` on body alone does not stop it - the page then opens zoomed out and pinch-scrollable instead of fitting the screen. `clip` rather than `hidden` so this never becomes a scroll container and breaks position: sticky on the nav. */ html { overflow-x: clip; max-width: 100%; } body { font-family: "Geist", system-ui, "Segoe UI", sans-serif; background: radial-gradient(120% 90% at 50% -10%, oklch(0.20 0.012 80) 0%, transparent 55%), oklch(0.09 0.006 80); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; } a { color: inherit; text-decoration: none; } section { padding: 140px 0; } .mono { font-family: "Geist Mono", ui-monospace, Consolas, monospace; } .eyebrow { font-family: "Geist Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--eyebrow); display: inline-block; margin-bottom: 18px; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; } .sec-title { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 18px; letter-spacing: -0.02em; } .sec-title .accent { color: var(--gold-bright); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .sec-title .accent { background: linear-gradient(100deg, #c8841f 0%, #e8c24a 40%, #f6e6b2 55%, #e8c24a 70%, #c8841f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .sec-intro { font-size: 17px; color: var(--text-soft); max-width: 560px; } kbd { font-family: "Geist Mono", monospace; font-size: 12px; padding: 3px 7px; border-radius: 6px; background: oklch(0.13 0.008 80); border: 1px solid oklch(1 0 0 / 0.10); box-shadow: inset 0 -2px 0 oklch(0 0 0 / 0.35); color: var(--gold); line-height: 1; display: inline-block; } .keys { display: inline-flex; align-items: center; gap: 5px; } .keys .plus { color: var(--text-dim); font-size: 11px; } /* buttons */ .btn-gold { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.15 0.02 84); font-weight: 600; font-size: 15px; font-family: inherit; border: 1px solid var(--gold-deep); border-radius: var(--radius); cursor: pointer; box-shadow: 0 0 18px -4px var(--gold-soft), 0 1px 0 oklch(1 0 0 / 0.25) inset; transition: filter .15s var(--ease), transform .12s var(--ease); } .btn-gold:hover { filter: brightness(1.06); } .btn-gold:active { animation: pop 0.14s var(--ease); } @keyframes pop { 0%{transform:scale(0.96);} 100%{transform:scale(1);} } .btn-gold svg { width: 18px; height: 18px; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 15px; padding: 0 6px; height: 46px; transition: color .14s; } .btn-ghost:hover { color: var(--gold-bright); } :focus-visible { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold-faint); } /* logo */ .logo { display: block; filter: drop-shadow(0 0 5px var(--gold-soft)); } /* NAV */ nav { position: sticky; top: 0; z-index: 100; background: var(--bg-chrome); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; gap: 28px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; } .brand .logo { width: 28px; height: 28px; } .foot-brand .logo { width: 24px; height: 24px; } .brand b { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; } .nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav-check, .nav-burger { display: none; } .nav-links a { font-size: 14px; color: var(--text-mut); transition: color .14s; } /* ⚠️ `.nav-links a` (0,1,1) outranks `.btn-gold` (0,1,0), so without this the download button inherits the muted link colour and its label goes grey on gold. Restate the button colour at matching specificity. */ .nav-links a.nav-dl { color: oklch(0.15 0.02 84); font-weight: 600; } .nav-links a:hover { color: var(--text); } /* The header download stays out of the way while the hero's own button is on screen — two identical gold CTAs stacked is noise — and slides in once it scrolls away. ⚠️ Fail-safe direction: it is VISIBLE by default and only hidden when JS confirms the hero CTA is in view, so a browser without IntersectionObserver never ends up with no download button at all. */ .nav-dl { margin-left: 2px; height: 38px; padding: 0 16px; font-size: 14px; transition: opacity .22s var(--ease), transform .22s var(--ease); } nav.is-top .nav-dl { opacity: 0; transform: translateY(-6px); pointer-events: none; } /* Mobile menu. CSS-only on purpose: a checkbox and a sibling selector, no JavaScript, so the identical header markup works on every page including the ones generated by a Netlify function. Hidden entirely on desktop. */ /* HERO — split: copy left, the 3D emblem as the hero object right */ .hero { padding-top: 84px; padding-bottom: 90px; position: relative; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 75%); } .hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 44px; } .hero-copy { text-align: left; } .hero h1 { font-size: clamp(38px, 4.6vw, 62px); max-width: 18ch; margin: 20px 0 0; } .hero h1 .accent { color: var(--gold-bright); } .hero-sub { font-size: clamp(16px, 1.9vw, 19px); color: var(--text-soft); max-width: 44ch; margin: 22px 0 0; } .hero-cta { display: flex; gap: 14px; justify-content: flex-start; align-items: center; margin-top: 34px; flex-wrap: wrap; } .hero-fine { margin-top: 16px; font-size: 13px; color: var(--text-mut); } .hero-visual { margin-top: 64px; } /* spinning brand mark (drag to spin) */ .prism-stage { position: relative; height: min(50vw, 530px); cursor: grab; touch-action: pan-y; } .prism-stage.dragging { cursor: grabbing; } .prism-stage canvas { position: absolute; inset: 0; display: block; } .prism-halo { position: absolute; inset: -6% -10%; pointer-events: none; background: radial-gradient(46% 52% at 50% 50%, oklch(0.80 0.105 84 / 0.11), transparent 72%); } .prism-hint { opacity: 0; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 10px; } .hero-copy { text-align: center; order: 1; } .hero h1 { margin-left: auto; margin-right: auto; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } /* A full-width 240px stage is very wide and very short, so the prism gets fitted by height and ends up small and floating in a letterbox. Squarer gives it room; the camera aspect already follows the stage. */ .prism-stage { height: min(78vw, 330px); order: 0; max-width: 100%; } .prism-halo { inset: -6% 0; } /* ⚠️ The demo panels are composed at roughly 1100px wide with their contents absolutely positioned in pixels, so they cannot reflow - at phone width they overflow their frames. Scale the whole composition instead of re-laying it out, the same approach the app uses for the capture-folder card. `zoom` rather than `transform: scale()` on purpose: zoom also shrinks the space the element occupies, so the section height follows and no wrapper is needed. Viewport units do not survive zoom, but these panels are all px. */ .ad, .editor-body, .rec-film, .cf-desk { zoom: 0.72; } } /* app mockup — editor */ .mock { border-radius: 13px; overflow: hidden; border: 1px solid var(--line-hi); background: var(--bg-chrome); box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.75), 0 0 0 1px oklch(0 0 0 / 0.4); } .mock-tb { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-chrome); border-bottom: 1px solid var(--line); } .mock-tb .dot { width: 11px; height: 11px; border-radius: 50%; } .mock-tb .logo { width: 17px; height: 17px; margin-left: 4px; } .mock-tb .tb-title { font-size: 12.5px; color: var(--text-soft); } .mock-tb .tb-doc { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--text-mut); background: oklch(0.13 0.008 80); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; } .mock-tb .win-btns { margin-left: auto; display: flex; gap: 8px; color: var(--text-dim); } .mock-tb .win-btns span { width: 13px; height: 13px; display: inline-block; } .editor-body { display: flex; height: 430px; } .tool-rail { width: 54px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; } .tr-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--text-mut); } .tr-ic svg { width: 19px; height: 19px; } .tr-ic.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.18 0.03 84); box-shadow: 0 3px 10px -3px var(--gold-soft); } .tr-div { width: 24px; height: 1px; background: var(--line); margin: 4px 0; } .editor-canvas { flex: 1; position: relative; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 40%, oklch(0.155 0.008 80) 0%, transparent 70%), oklch(0.11 0.006 80); } .editor-canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px); background-size: 22px 22px; } .shot-card { position: relative; width: 88%; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px var(--gold-faint), 0 24px 50px -22px oklch(0 0 0 / 0.8); } .shot-card img, .shot-card .fake-shot { display: block; width: 100%; } .fake-shot { aspect-ratio: 16/10; background: #eef1f5; position: relative; overflow: hidden; } .fs-top { height: 15%; background: #e3e7ef; display: flex; align-items: center; gap: 5px; padding: 0 12px; } .fs-top i { width: 8px; height: 8px; border-radius: 50%; background: #c3c9d6; } .fs-main { display: flex; height: 85%; } .fs-side { width: 22%; background: #20283a; } .fs-side .b { height: 8px; margin: 12px 10px; border-radius: 4px; background: #37415c; } .fs-side .b.gold { background: var(--gold); width: 55%; } .fs-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .fs-body .row { height: 12px; border-radius: 5px; background: #d7dce6; } .fs-body .row.s { width: 60%; } .fs-chart { margin-top: auto; height: 42%; border-radius: 8px; background: #fff; border: 1px solid #e2e6ef; } .anno-arrow { position: absolute; z-index: 3; } .anno-arrow svg { width: 100%; height: 100%; overflow: visible; } .editor-foot { height: 46px; background: var(--bg-chrome); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; } .sw { width: 20px; height: 20px; border-radius: 6px; border: 1px solid oklch(1 0 0 / 0.2); } .sw.on { box-shadow: 0 0 0 2px var(--bg-chrome), 0 0 0 3.5px var(--gold); } .foot-seg { margin-left: auto; display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px; } .foot-seg span { font-size: 11px; padding: 4px 9px; border-radius: 5px; color: var(--text-mut); } .foot-seg span.on { background: var(--gold); color: oklch(0.2 0.03 84); font-weight: 600; } /* generic section grid */ .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .card:hover { background: var(--surface-hi); border-color: var(--line-hi); transform: translateY(-3px); } .card .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--gold-faint); border: 1px solid var(--gold-soft); display: grid; place-items: center; color: var(--gold-bright); margin-bottom: 16px; } .card .ic svg { width: 20px; height: 20px; } .card h3 { font-size: 17px; margin-bottom: 6px; } .card p { font-size: 14px; color: var(--text-mut); margin-bottom: 14px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split.rev .copy { order: 2; } .feat-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; } .feat-list li { display: flex; gap: 13px; font-size: 15px; color: var(--text-soft); } .feat-list .tick { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--gold-faint); border: 1px solid var(--gold-soft); display: grid; place-items: center; color: var(--gold-bright); margin-top: 1px; } .feat-list .tick svg { width: 13px; height: 13px; } .feat-list b { color: var(--text); font-weight: 600; } /* recording bar mockup */ .recbar { display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 10px 0 16px; background: linear-gradient(180deg, oklch(0.20 0.008 80), oklch(0.16 0.008 80)); border: 1px solid var(--line-hi); border-radius: 15px; box-shadow: 0 22px 50px -16px oklch(0 0 0 / 0.7), 0 1px 0 oklch(1 0 0 / 0.06) inset; } .rec-dot { position: relative; width: 12px; height: 12px; } .rec-dot i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ff6a64, #e5403b); box-shadow: 0 0 8px oklch(0.62 0.2 25 / 0.8); } .rec-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid oklch(0.62 0.2 25 / 0.6); animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0%{transform:scale(0.7);opacity:.9;} 100%{transform:scale(2.2);opacity:0;} } .rec-time { font-family: "Geist Mono", monospace; font-size: 17px; letter-spacing: 0.5px; } .rec-wave { display: flex; align-items: center; gap: 2px; height: 24px; } .rec-wave i { width: 3px; border-radius: 2px; background: var(--gold); opacity: 0.8; } .rec-div { width: 1px; height: 28px; background: var(--line); } .rec-btn { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--text-soft); background: none; border: 1px solid transparent; } .rec-btn svg { width: 17px; height: 17px; } .rec-stop { width: auto; padding: 0 15px; gap: 7px; height: 40px; display: inline-flex; align-items: center; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: oklch(0.18 0.03 84); background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); } .rec-stop svg { width: 15px; height: 15px; } .rec-stage { display: grid; place-items: center; padding: 34px 0; background: radial-gradient(60% 70% at 50% 45%, oklch(0.18 0.01 80) 0%, transparent 70%); border-radius: var(--radius); border: 1px solid var(--line); } /* 470px was sized to hold the question-intro text that used to play over this panel. With the narration gone the scene floats in ~200px of dead space, so the stage is trimmed to what it actually contains. The clip card still flies in from below, so it keeps a little headroom. */ /* sized by its content now: the desktop is 16/9.4, and a fixed min-height left the Windows taskbar clipped off the bottom. */ .rec-film { position: relative; overflow: hidden; padding: 26px 0 22px; } .rec-film .demo-say { width: 100%; } .rs-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 1; } .rs-app { position: relative; width: 320px; border-radius: 10px; overflow: hidden; background: #eef1f5; box-shadow: 0 18px 44px -16px oklch(0 0 0 / 0.6); } .rs-tb { height: 30px; background: #e3e7ef; color: #5b6474; font-size: 12px; font-weight: 600; display: flex; align-items: center; padding: 0 13px; } .rs-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-size: 12.5px; color: #3d4350; font-weight: 550; border-bottom: 1px solid #e6eaf1; position: relative; } .rs-val { color: #8a93a3; font-size: 12px; } .rs-tog { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #cfd6e2; flex: none; } .rs-tog i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px oklch(0 0 0 / 0.25); } .rs-ring { position: absolute; right: 15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 2px solid var(--gold-bright); opacity: 0; transform: scale(0); pointer-events: none; } /* Anchored to the SCENE, not to the window — it has to be on screen before the window it opens exists. */ .rs-kbd { position: absolute; z-index: 6; left: 50%; top: 50px; bottom: auto; /* ⚠️ opacity 1: the KEYCAPS animate themselves. The container kept an opacity:0 left over from the animation it used to have, which made the whole chip invisible however well its children behaved. */ transform: translateX(-50%); opacity: 1; } .rs-cur { position: absolute; left: 0; top: 0; width: 17px; height: 17px; z-index: 2; pointer-events: none; transform: translate(46px, 118px); filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.4)); } .rs-cur svg { width: 100%; height: 100%; display: block; } .rs-count { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .rs-count .cd { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: 0; font-family: "Geist Mono", monospace; font-size: 56px; font-weight: 700; color: var(--gold-bright); text-shadow: 0 0 26px oklch(0.8 0.105 84 / 0.4); } .rs-clip { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, 420px); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; white-space: nowrap; background: oklch(0.16 0.01 80); border: 1px solid var(--gold-soft); pointer-events: none; box-shadow: 0 18px 44px -14px oklch(0 0 0 / 0.7); font-size: 13.5px; font-weight: 600; color: var(--text); } .rs-clip .rc-play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.15 0.02 84); font-size: 10px; } .rs-clip .rc-len { color: var(--text-mut); font-family: "Geist Mono", monospace; font-size: 11.5px; } .rs-reply { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, -18px) scale(0.9); opacity: 0; background: #143524; border: 1px solid #1f5c3a; color: #9fe8bd; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 14px 14px 14px 4px; white-space: nowrap; pointer-events: none; } /* video timeline mockup */ .vtl { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-hi); background: var(--panel); } .vtl-film { position: relative; overflow: hidden; padding: 28px 32px 72px; border-radius: 16px; border: 1px solid var(--line-hi); background-image: radial-gradient(70% 60% at 50% 34%, oklch(0.8 0.105 84 / 0.08), transparent), radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: cover, 20px 20px; background-color: oklch(0.10 0.006 80); box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.7); } .vseg { position: absolute; top: 6px; bottom: 6px; overflow: hidden; display: flex; } .vseg .vfr { flex: 1; border-right: 1px solid oklch(0 0 0 / 0.35); background-color: #e7eaf0; background-repeat: no-repeat; background-image: linear-gradient(#d7dde7, #d7dde7), linear-gradient(#b6bfce, #b6bfce), linear-gradient(#c7cfdb, #c7cfdb), linear-gradient(#b6bfce, #b6bfce); background-size: 100% 6px, 55% 4px, 70% 4px, 35% 4px; background-position: 0 0, 5px 13px, 5px 21px, 5px 29px; } .vseg.s1 .vfr:last-child { background-size: 100% 6px, 70% 4px, 45% 4px, 60% 4px; } .vseg.s2 .vfr:first-child { background-image: linear-gradient(#d7dde7, #d7dde7), linear-gradient(#c7cfdb, #c7cfdb), linear-gradient(#b6bfce, #b6bfce), linear-gradient(#b6bfce, #b6bfce); background-size: 100% 6px, 40% 18px, 45% 4px, 45% 4px; background-position: 0 0, 5px 12px, 95% 13px, 95% 21px; } .vseg.s2 .vfr:last-child { background-image: linear-gradient(#d7dde7, #d7dde7), linear-gradient(#c7cfdb, #c7cfdb), linear-gradient(#b6bfce, #b6bfce), linear-gradient(#b6bfce, #b6bfce); background-size: 100% 6px, 40% 18px, 50% 4px, 34% 4px; background-position: 0 0, 95% 12px, 5px 13px, 5px 21px; } .vseg.s3 .vfr:first-child { background-image: linear-gradient(#d7dde7, #d7dde7), linear-gradient(#b6bfce, #b6bfce), linear-gradient(#b6bfce, #b6bfce), linear-gradient(#d9a441, #d9a441); background-size: 100% 6px, 60% 4px, 42% 4px, 24% 5px; background-position: 0 0, 5px 12px, 5px 20px, 5px 30px; } .vseg.s3 .vfr:last-child { background-size: 100% 6px, 78% 4px, 30% 4px, 46% 4px; } .vseg.s1 { left: 1%; width: 32.33%; border-radius: 5px 0 0 5px; } .vseg.s2 { left: 33.23%; width: 32.53%; border-radius: 0; } .vseg.s3 { left: 65.61%; width: 32.39%; border-radius: 0 5px 5px 0; } .aseg { position: absolute; top: 0; bottom: 0; overflow: hidden; display: flex; align-items: center; gap: 1px; padding: 0 1px; background: linear-gradient(180deg, oklch(0.30 0.06 205), oklch(0.23 0.05 215)); } .aseg.a1 { left: 1%; width: 32.33%; border-radius: 5px 0 0 5px; } .aseg.a2 { left: 33.23%; width: 32.53%; border-radius: 0; } .aseg.a3 { left: 65.61%; width: 32.39%; border-radius: 0 5px 5px 0; } .vx-cut { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold-bright); box-shadow: 0 0 8px oklch(0.8 0.105 84 / 0.7); z-index: 5; transform: scaleY(0); transform-origin: top; } .vx-cut.c1 { left: 33.333%; } .vx-cut.c2 { left: 65.66%; } .vx-cut.c3 { left: 33.33%; } .vx-flash { position: absolute; inset: 0; z-index: 5; background: oklch(0.8 0.105 84 / 0.3); opacity: 0; pointer-events: none; } .vx-out { position: absolute; left: 50%; top: 44%; z-index: 3; transform: translate(-50%, 300px); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; white-space: nowrap; background: oklch(0.16 0.01 80); border: 1px solid var(--gold-soft); pointer-events: none; box-shadow: 0 18px 44px -14px oklch(0 0 0 / 0.7); font-size: 13.5px; font-weight: 600; color: var(--text); } .vx-out .rc-play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.15 0.02 84); font-size: 10px; } .vx-out .vx-len { color: var(--text-mut); font-family: "Geist Mono", monospace; font-size: 11.5px; } .vg { position: absolute; top: 232px; transform: translateX(-50%) translateY(6px); opacity: 0; font-size: 12.5px; font-weight: 600; color: var(--text); z-index: 3; pointer-events: none; background: oklch(0.16 0.01 80); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 7px 12px; white-space: nowrap; box-shadow: 0 10px 26px -10px oklch(0 0 0 / 0.6); } .vg::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: oklch(0.16 0.01 80); border-left: 1px solid var(--gold-soft); border-top: 1px solid var(--gold-soft); } .vg.g1, .vg.g2 { left: calc(116px + (100% - 148px) * 0.495); } .vg.g3 { left: calc(116px + (100% - 148px) * 0.334); } .vtl-bar { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); } .vtl-play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.18 0.03 84); } .vtl-play svg { width: 14px; height: 14px; } .vtl-time { font-family: "Geist Mono", monospace; font-size: 13px; color: var(--gold-bright); } .vtl-time .tot { color: var(--text-mut); } .vtl-body { display: flex; } .vtl-labels { width: 84px; flex: none; border-right: 1px solid var(--line); } .vtl-labels .ll { height: 54px; display: flex; align-items: center; gap: 7px; padding: 0 11px; font-size: 11px; color: var(--text-soft); border-bottom: 1px solid var(--line); } .vtl-labels .ll:last-child { height: 40px; border-bottom: none; } .vtl-labels svg { width: 13px; height: 13px; color: var(--text-mut); } .vtl-lanes { flex: 1; position: relative; } .vlane { border-bottom: 1px solid var(--line); position: relative; } .vlane.film { height: 54px; display: flex; } .vlane.film .fr { flex: 1; border-right: 1px solid oklch(0 0 0 / 0.4); background-size: cover; } .vlane.audio { height: 54px; } .vlane.tools { height: 40px; border-bottom: none; } .aud-clip { position: absolute; inset: 6px 0; } .aud-clip i { width: 2px; border-radius: 1px; background: oklch(0.85 0.1 200); opacity: 0.75; } .tool-clip { position: absolute; top: 8px; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 6px; font-size: 11px; color: #fff; } .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: oklch(0.98 0.04 96); box-shadow: 0 0 6px oklch(0.98 0.06 96 / 0.7); z-index: 4; } .playhead::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 11px; height: 8px; border-radius: 0 0 3px 3px; background: oklch(0.98 0.04 96); } /* --- Part B: live animations --- */ /* recording waveform */ .rec-wave.live i { animation: waveBar 0.95s ease-in-out infinite; transform-origin: center; } .rec-wave.live i:nth-child(1){animation-delay:0s}.rec-wave.live i:nth-child(2){animation-delay:.12s}.rec-wave.live i:nth-child(3){animation-delay:.28s}.rec-wave.live i:nth-child(4){animation-delay:.42s}.rec-wave.live i:nth-child(5){animation-delay:.18s}.rec-wave.live i:nth-child(6){animation-delay:.5s}.rec-wave.live i:nth-child(7){animation-delay:.34s}.rec-wave.live i:nth-child(8){animation-delay:.08s}.rec-wave.live i:nth-child(9){animation-delay:.46s} @keyframes waveBar { 0%,100%{transform:scaleY(0.4);opacity:0.55} 50%{transform:scaleY(1.15);opacity:0.95} } /* keystroke chips */ .keystrokes { display:flex; justify-content:center; gap:8px; margin-top:20px; min-height:34px; } .keystrokes kbd { opacity:0; transform:scale(0.9); } .keystrokes kbd.show { animation: kcPop 0.24s cubic-bezier(0.34,1.56,0.64,1) forwards; } .keystrokes kbd.hide { animation: kcOut 0.3s var(--ease) forwards; } @keyframes kcPop { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} } @keyframes kcOut { from{opacity:1} to{opacity:0} } /* prism spectrum shimmer */ .spectrum-crisp line { animation: rayShimmer 5s ease-in-out infinite; } .spectrum-crisp line:nth-child(1){animation-delay:0s}.spectrum-crisp line:nth-child(2){animation-delay:.12s}.spectrum-crisp line:nth-child(3){animation-delay:.24s}.spectrum-crisp line:nth-child(4){animation-delay:.36s}.spectrum-crisp line:nth-child(5){animation-delay:.48s}.spectrum-crisp line:nth-child(6){animation-delay:.6s}.spectrum-crisp line:nth-child(7){animation-delay:.72s}.spectrum-crisp line:nth-child(8){animation-delay:.84s} @keyframes rayShimmer { 0%,100%{opacity:0.75} 50%{opacity:1} } /* capture-card crosshair hover */ .cap-cross { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .15s; overflow:hidden; border-radius:inherit; } .cap-cross .cx-v, .cap-cross .cx-h { position:absolute; background:var(--gold); opacity:0.25; } .cap-cross .cx-v { top:0; bottom:0; width:1px; } .cap-cross .cx-h { left:0; right:0; height:1px; } @media (hover:hover) and (pointer:fine) { #capture .card:hover .cap-cross { opacity:1; } #capture .card:hover { cursor:crosshair; } } /* little things */ .mini { display: flex; gap: 13px; align-items: flex-start; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: background .18s, border-color .18s; } .mini:hover { background: var(--surface-hi); border-color: var(--line-hi); } .mini .ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--gold-faint); border: 1px solid var(--gold-soft); display: grid; place-items: center; color: var(--gold-bright); } .mini .ic svg { width: 17px; height: 17px; } .mini h3 { font-size: 15px; margin-bottom: 3px; } .mini p { font-size: 13px; color: var(--text-mut); line-height: 1.5; } /* privacy band */ .privacy { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .privacy .wrap { text-align: center; } .privacy .lock { width: 46px; height: 46px; border-radius: 12px; background: var(--gold-faint); border: 1px solid var(--gold-soft); display: inline-grid; place-items: center; color: var(--gold-bright); margin-bottom: 22px; } .privacy .lock svg { width: 24px; height: 24px; } .privacy h2 { font-size: clamp(24px, 3vw, 34px); max-width: 20ch; margin: 0 auto; } .privacy p { color: var(--text-soft); max-width: 52ch; margin: 16px auto 0; font-size: 16px; } /* FAQ */ .faq { max-width: 780px; margin: 0 auto; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: inherit; font-size: 18px; font-weight: 500; padding: 24px 40px 24px 0; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; } .faq-q .badge { font-family: "Geist Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-bright); background: var(--gold-faint); border: 1px solid var(--gold-soft); padding: 2px 7px; border-radius: 999px; } .faq-q .chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); transition: transform .25s var(--ease); color: var(--text-mut); } .faq-item.open .chev { transform: translateY(-50%) rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .faq-a p { padding: 0 0 24px; color: var(--text-soft); font-size: 15px; max-width: 62ch; } /* final CTA */ .final { text-align: center; } .final .logo { width: 78px; height: 78px; margin: 0 auto 26px; } .final h2 { font-size: clamp(32px, 4.5vw, 52px); } .final .sub { margin-top: 22px; } .final .fine { margin-top: 16px; font-size: 13px; color: var(--text-mut); } /* footer */ footer { background: var(--bg-chrome); border-top: 1px solid var(--line); padding: 40px 0; } .foot-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .foot-in .logo { width: 26px; height: 26px; } .foot-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; } .foot-copy { font-size: 13px; color: var(--text-mut); } .foot-links { margin-left: auto; display: flex; gap: 22px; } .foot-links a { font-size: 13px; color: var(--text-mut); } .foot-links a:hover { color: var(--text); } /* reveal */ .pre { opacity: 0; transform: translateY(12px); } .reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); } /* keycap pop — caps spring in after their card reveals */ .keys kbd { transition: opacity .2s var(--ease), transform .2s cubic-bezier(0.34,1.56,0.64,1); } .reveal.pre .keys kbd { opacity: 0; transform: scale(0.9); } /* nav hairline/shadow only after a little scroll */ nav { transition: box-shadow .2s var(--ease), border-color .2s var(--ease); } nav.scrolled { box-shadow: 0 6px 24px -12px oklch(0 0 0 / 0.7); border-bottom-color: var(--line-hi); } /* STEP BADGES — the app's numbered Step tool, popping in on scroll */ section { position: relative; } /* HERO — ambient cursor-warmed dot grid */ .hero > .wrap { position: relative; z-index: 1; } .hero-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); z-index: 0; background-image: radial-gradient(oklch(0.80 0.105 84 / 0.20) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(220px circle at var(--mx, -500px) var(--my, -500px), #000, transparent); mask-image: radial-gradient(220px circle at var(--mx, -500px) var(--my, -500px), #000, transparent); } /* HERO headline — engineered entrance + cursor lens. Words rise out of invisible masks with a tight stagger; afterwards each letter's weight swells subtly near the cursor (variable font) with a faint warm glow — a lens moving across printed type. */ .hero h1 .hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.13em; margin-bottom: -0.13em; } .hero h1 .hwi { display: inline-block; transform: translateY(118%); animation: wordRise 0.62s var(--ease) var(--d, 0.2s) forwards; } @keyframes wordRise { to { transform: translateY(0); } } .hero h1 .hc { display: inline-block; font-variation-settings: "wght" 600; } /* "clarity." — living refraction: gradient light inside the letters, drifts slowly, tilts toward the cursor (JS sets --refract) */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero h1 .accent { background: linear-gradient(var(--refract, 100deg), #c8841f 0%, #e8c24a 32%, #fdf3cf 50%, #e8c24a 68%, #c8841f 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: refractDrift 14s ease-in-out infinite; } } @keyframes refractDrift { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* hero eyebrow — badge pill with a softly pulsing gold dot */ .hero .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: oklch(1 0 0 / 0.025); } .hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: eyePulse 2.6s var(--ease) infinite; } @keyframes eyePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* CTA — one light streak across the face on hover */ .btn-gold { position: relative; overflow: hidden; } .btn-gold::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, oklch(1 0 0 / 0.35) 50%, transparent 62%); transform: translateX(-130%); } .btn-gold:hover::after { animation: ctaSheen 0.65s var(--ease); } @keyframes ctaSheen { to { transform: translateX(130%); } } @media (prefers-reduced-motion: reduce) { .hero h1 .hwi { animation: none; transform: none; } .hero h1 .accent { animation: none; } .hero .eyebrow::before { animation: none; } .btn-gold:hover::after { animation: none; } } /* ===== hero ad — "the impossible screenshot", a 19s silent commercial. THE REDDIT PAIN: you cannot screenshot a whole page on Windows — people send it in six crooked pieces. Snipping Tool categorically can't. SCENE 1 the pain: teammate asks for the FULL page; 3 crooked fragments ("1 of 6…") already sent; the apology gets typed, then deleted. SCENE 2 the REALIZATION (gold caption): "wait — clarus does whole pages" → Ctrl+Shift+E → "Scrolling capture…" pill → THE PAGE SCROLLS ITSELF, progress fills, scrollbar thumb crawls down. SCENE 3 the reveal: flash → ONE image UNROLLS, taller than the browser, its size stamp TICKING up to 1240 × 4820. SCENE 4 the comeback: they type "nvm — got the whole thing in one." and send it WITH the tall thumbnail. SCENE 5 the payoff: dots… "wait — that's ONE image?" …"no way." Loop. All CSS keyframes on one 19s timeline; viewport-gated via .play. Reduced motion shows the finished tableau. ===== */ .ad { position: relative; height: 500px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-hi); background-image: radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: 20px 20px; background-color: oklch(0.10 0.006 80); box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.7); } .ad-keys { position: absolute; top: 20px; left: 22%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 6; } .ad-keys .ak { font-size: 13.5px; padding: 6px 11px; border-radius: 7px; } .ad-keys .ap { color: var(--text-dim); font-size: 12px; } /* the browser with a page much taller than its viewport */ .ad-browser { position: absolute; left: 5%; top: 15%; width: 36%; height: 70%; z-index: 2; border-radius: 9px; overflow: hidden; background: #eef1f5; box-shadow: 0 14px 36px -12px oklch(0 0 0 / 0.55); } .ab-top { height: 26px; background: #e3e7ef; display: flex; align-items: center; gap: 5px; padding: 0 11px; } .ab-top i { width: 8px; height: 8px; border-radius: 50%; background: #c6cdd8; } .ab-url { margin-left: 7px; background: #f5f7fa; border-radius: 5px; font-family: "Geist Mono", monospace; font-size: 8.5px; color: #8a93a3; padding: 3px 10px; } .ab-view { position: absolute; inset: 26px 0 0 0; overflow: hidden; } .ab-page { position: absolute; left: 0; right: 8px; top: 0; padding: 12px 14px; } .pg-nav { height: 12px; border-radius: 4px; background: #dde2ea; } .pg-hero { margin-top: 10px; border-radius: 7px; background: #e9edf3; padding: 12px; display: flex; flex-direction: column; gap: 7px; } .ph-t { height: 10px; width: 62%; border-radius: 5px; background: #c3cbd7; } .ph-s { height: 7px; width: 44%; border-radius: 4px; background: #d5dbe5; } .ph-btn { height: 14px; width: 32%; border-radius: 5px; background: #d9a441; margin-top: 3px; } .pg-row { height: 8px; border-radius: 4px; background: #dde2ea; margin-top: 10px; } .pg-row.w70 { width: 70%; } .pg-row.w55 { width: 55%; } .pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .pg-grid i { height: 34px; border-radius: 6px; background: #dbe3ee; } .pg-table { margin-top: 12px; border: 1px solid #e2e7ee; border-radius: 6px; overflow: hidden; } .pg-table i { display: block; height: 13px; background: #fff; border-bottom: 1px solid #eef1f6; } .pg-table i:nth-child(odd) { background: #f7f9fc; } .pg-foot { height: 26px; border-radius: 6px; background: #d3dae4; margin-top: 12px; } .ab-scroll { position: absolute; top: 28px; right: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: #dfe3ea; } .ab-thumb { position: absolute; top: 0; left: 0; right: 0; height: 26%; border-radius: 2px; background: #aab3c2; } .ab-pill { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 600; color: oklch(0.15 0.02 84); background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); border-radius: 999px; padding: 5px 12px 5px 10px; box-shadow: 0 6px 18px -6px oklch(0 0 0 / 0.6); opacity: 0; } .abp-dot { width: 7px; height: 7px; border-radius: 50%; background: #b3261e; } .abp-bar { position: absolute; left: 10px; right: 12px; bottom: 2.5px; height: 2px; border-radius: 1px; background: oklch(0.15 0.02 84 / 0.35); transform-origin: left; transform: scaleX(0); } /* scene captions — the film's narration (and the realization beat) */ .ad-cap { position: absolute; left: 3%; width: 48%; bottom: 2.4%; height: 20px; z-index: 5; text-align: center; } .ad-cap .cp { position: absolute; left: 0; right: 0; font-family: "Geist Mono", monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--text-soft); opacity: 0; } .ad-cap .cr { color: var(--gold-bright); font-weight: 600; } .ad-flash { position: absolute; inset: 0; background: oklch(0.97 0.03 95); opacity: 0; z-index: 7; pointer-events: none; } /* the result: ONE image taller than the browser itself */ .ad-fly { position: absolute; left: 33%; top: 6%; width: 21%; height: 88%; z-index: 4; } .ad-result { position: relative; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(135deg, #F0C948, #C8841F); padding: 9px; box-shadow: 0 22px 54px -16px oklch(0 0 0 / 0.75); } .res-page { height: calc(100% - 20px); border-radius: 6px; background: #eef1f5; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; justify-content: space-between; } .res-page span { display: block; border-radius: 3px; } .r-nav { height: 6px; background: #dde2ea; } .r-hero { height: 34px; background: #e9edf3; } .r-l { height: 5px; background: #dde2ea; } .r-l.s { width: 62%; } .r-grid { height: 30px; background: #dbe3ee; } .r-table { height: 36px; background: #f7f9fc; border: 1px solid #e2e7ee; } .r-foot { height: 14px; background: #d3dae4; } .res-size { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; } .res-size .rs { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 700; font-style: normal; color: oklch(0.15 0.02 84); opacity: 0; white-space: nowrap; } /* chat panel */ .ad-chat { position: absolute; right: 4.5%; top: 6%; bottom: 6%; width: 36%; z-index: 3; display: flex; flex-direction: column; gap: 9px; background: oklch(0.145 0.008 80); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px 12px; } .ac-head { font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-mut); padding-bottom: 10px; border-bottom: 1px solid var(--line); } .ac-ask { display: flex; gap: 8px; align-items: center; } .ac-ask i { width: 16px; height: 16px; border-radius: 50%; background: #6a5c8f; flex: none; } .ac-ask span { font-size: 13px; color: var(--text-soft); background: oklch(0.19 0.01 80); border-radius: 999px; padding: 5px 11px; } .ac-frags { position: relative; height: 46px; margin-left: 24px; flex: none; } .ac-frags b { position: absolute; width: 42px; height: 26px; border-radius: 4px; background: #e6eaf0; border: 1px solid #c9d0db; box-shadow: 0 3px 8px rgba(0,0,0,0.35); } .ac-frags .f1 { left: 0; top: 3px; transform: rotate(-5deg); } .ac-frags .f2 { left: 32px; top: 10px; transform: rotate(3deg); } .ac-frags .f3 { left: 66px; top: 1px; transform: rotate(-2deg); } .ac-frags span { position: absolute; left: 120px; top: 14px; font-family: "Geist Mono", monospace; font-size: 12px; color: var(--text-soft); } .ac-sent { background: oklch(0.19 0.01 80); border: 1px solid var(--line); border-radius: 10px; padding: 7px; width: 60%; flex: none; } .acs-msg { display: block; font-size: 12.5px; color: var(--text-soft); padding: 2px 4px 8px; } .acs-frame { border-radius: 7px; background: linear-gradient(135deg, #F0C948, #C8841F); padding: 7px; } .acs-mini { background: #eef1f5; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .acs-mini span { display: block; height: 4px; border-radius: 2px; background: #c9d0db; } .acs-mini .w8 { width: 80%; } .acs-mini .w6 { width: 60%; } .acs-mini .w5 { width: 50%; } .ac-dots { display: flex; gap: 4px; padding: 6px 11px; flex: none; width: fit-content; background: oklch(0.19 0.01 80); border-radius: 999px; } .ac-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mut); animation: adDot 1s ease-in-out infinite; } .ac-dots i:nth-child(2) { animation-delay: 0.15s; } .ac-dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes adDot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .ac-reply { display: flex; gap: 8px; align-items: center; flex: none; } .ac-reply i { width: 16px; height: 16px; border-radius: 50%; flex: none; background: #6a5c8f; } .ac-reply.r2 .c3i { background: #8f6a3f; } .ac-reply span { font-size: 13px; font-weight: 550; color: #9fe8b8; background: oklch(0.6 0.12 155 / 0.10); border: 1px solid oklch(0.6 0.1 155 / 0.3); padding: 5px 10px; border-radius: 999px; } .ac-space { flex: 1; } .ac-draft { height: 34px; border: 1px solid var(--line); border-radius: 8px; flex: none; background: oklch(0.12 0.006 80); display: flex; align-items: center; padding: 0 11px; overflow: hidden; } .acd-text, .acd-text2 { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; width: 0; } /* ---- the 19s timeline ---- */ .ad .acd-text { animation: adDraft 19s linear infinite; animation-play-state: paused; } .ad .acd-text2 { animation: adDraft2 19s linear infinite; animation-play-state: paused; } .ad .ak { animation: adKey1 19s var(--ease) infinite; animation-play-state: paused; } .ad .ak.k2 { animation-name: adKey2; } .ad .ak.k3 { animation-name: adKey3; } .ad .ad-keys { animation: adKeys 19s linear infinite; animation-play-state: paused; } .ad .ab-pill { animation: adPill 19s var(--ease) infinite; animation-play-state: paused; } .ad .abp-bar { animation: adBar 19s linear infinite; animation-play-state: paused; } .ad .ab-page { animation: adScrollPage 19s ease-in-out infinite; animation-play-state: paused; } .ad .ab-thumb { animation: adThumb 19s ease-in-out infinite; animation-play-state: paused; } .ad .ad-flash { animation: adFlash 19s linear infinite; animation-play-state: paused; } .ad .ad-fly { animation: adFly 19s var(--ease) infinite; animation-play-state: paused; } .ad .ad-result { animation: adResult 19s var(--ease) infinite; animation-play-state: paused; } .ad .ad-browser { animation: adBrowser 19s var(--ease) infinite; animation-play-state: paused; } .ad .ac-sent { animation: adSent 19s var(--ease) infinite; animation-play-state: paused; } .ad .ac-dots { animation: adDots 19s linear infinite; animation-play-state: paused; } .ad .ac-reply { animation: adReply 19s var(--ease) infinite; animation-play-state: paused; } .ad .ac-reply.r2 { animation-name: adReply2; } .ad .ad-cap .c1 { animation: adCap1 19s var(--ease) infinite; animation-play-state: paused; } .ad .ad-cap .cr { animation: adCapR 19s var(--ease) infinite; animation-play-state: paused; } .ad .ad-cap .c2 { animation: adCap2 19s var(--ease) infinite; animation-play-state: paused; } .ad .ad-cap .c3 { animation: adCap3 19s var(--ease) infinite; animation-play-state: paused; } .ad .rs.s1 { animation: adRs1 19s linear infinite; animation-play-state: paused; } .ad .rs.s2 { animation: adRs2 19s linear infinite; animation-play-state: paused; } .ad .rs.s3 { animation: adRs3 19s linear infinite; animation-play-state: paused; } .ad .rs.s4 { animation: adRs4 19s linear infinite; animation-play-state: paused; } .ad.play .acd-text, .ad.play .acd-text2, .ad.play .ak, .ad.play .ad-keys, .ad.play .ab-pill, .ad.play .abp-bar, .ad.play .ab-page, .ad.play .ab-thumb, .ad.play .ad-flash, .ad.play .ad-fly, .ad.play .ad-result, .ad.play .ad-browser, .ad.play .ac-sent, .ad.play .ac-dots, .ad.play .ac-reply, .ad.play .ad-cap .c1, .ad.play .ad-cap .cr, .ad.play .ad-cap .c2, .ad.play .ad-cap .c3, .ad.play .rs.s1, .ad.play .rs.s2, .ad.play .rs.s3, .ad.play .rs.s4 { animation-play-state: running; } /* scene 1 — the apology: type it, LET IT SIT, delete it */ @keyframes adDraft { 0% { width: 0; animation-timing-function: steps(30, end); } 7% { width: 30ch; } 12.5% { width: 30ch; animation-timing-function: steps(10, end); } 15% { width: 0; } 100% { width: 0; } } @keyframes adCap1 { 0%, 2% { opacity: 0; } 4% { opacity: 1; } 13% { opacity: 1; } 15.5%, 100% { opacity: 0; } } /* scene 2 — the realization holds long enough to be READ, then the hotkey */ @keyframes adCapR { 0%, 16% { opacity: 0; } 17.5% { opacity: 1; } 25% { opacity: 1; } 27%, 100% { opacity: 0; } } @keyframes adKey1 { 0%, 21% { transform: none; box-shadow: none; } 22.5% { transform: scale(0.9); box-shadow: 0 0 14px var(--gold-soft); } 24% { transform: none; } 100% { transform: none; } } @keyframes adKey2 { 0%, 22% { transform: none; } 23.5% { transform: scale(0.9); box-shadow: 0 0 14px var(--gold-soft); } 25% { transform: none; } 100% { transform: none; } } @keyframes adKey3 { 0%, 23% { transform: none; } 24.5% { transform: scale(0.9); box-shadow: 0 0 14px var(--gold-soft); } 26% { transform: none; } 100% { transform: none; } } @keyframes adKeys { 0% { opacity: 0.95; } 29% { opacity: 0.95; } 33% { opacity: 0.2; } 95% { opacity: 0.2; } 99%, 100% { opacity: 0.95; } } @keyframes adPill { 0%, 26.5% { opacity: 0; transform: translateX(-50%) translateY(-6px); } 28.5% { opacity: 1; transform: translateX(-50%); } 46% { opacity: 1; } 48.5%, 100% { opacity: 0; } } @keyframes adBar { 0%, 28.5% { transform: scaleX(0); } 46% { transform: scaleX(1); } 48.5%, 100% { transform: scaleX(0); } } @keyframes adScrollPage { 0%, 28.5% { transform: translateY(0); } 46% { transform: translateY(-56%); } 49%, 100% { transform: translateY(0); } } @keyframes adThumb { 0%, 28.5% { transform: translateY(0); } 46% { transform: translateY(280%); } 49%, 100% { transform: translateY(0); } } @keyframes adFlash { 0%, 46.5% { opacity: 0; } 47.5% { opacity: 0.15; } 49%, 100% { opacity: 0; } } @keyframes adCap2 { 0%, 28.5% { opacity: 0; } 30.5% { opacity: 1; } 45% { opacity: 1; } 47.5%, 100% { opacity: 0; } } /* scene 3 — the impossible screenshot unrolls, counter ticking */ @keyframes adBrowser { 0%, 48% { opacity: 1; } 52% { opacity: 0.45; } 94% { opacity: 0.45; } 99%, 100% { opacity: 1; } } @keyframes adResult { 0%, 48% { opacity: 0; clip-path: inset(0 0 100% 0 round 12px); } 50% { opacity: 1; } 58% { opacity: 1; clip-path: inset(0 0 0 0 round 12px); } 100% { opacity: 1; clip-path: inset(0 0 0 0 round 12px); } } @keyframes adRs1 { 0%, 49.5% { opacity: 0; } 50.5% { opacity: 1; } 53% { opacity: 1; } 54%, 100% { opacity: 0; } } @keyframes adRs2 { 0%, 54% { opacity: 0; } 55% { opacity: 1; } 56.5% { opacity: 1; } 57.5%, 100% { opacity: 0; } } @keyframes adRs3 { 0%, 57.5% { opacity: 0; } 58.5% { opacity: 1; } 59.5% { opacity: 1; } 60.5%, 100% { opacity: 0; } } @keyframes adRs4 { 0%, 60.5% { opacity: 0; } 62% { opacity: 1; } 94% { opacity: 1; } 98.5%, 100% { opacity: 0; } } @keyframes adCap3 { 0%, 50% { opacity: 0; } 52.5% { opacity: 1; } 93% { opacity: 1; } 97%, 100% { opacity: 0; } } /* scene 4 — the comeback: type it (and let it sit), send with the shot */ @keyframes adDraft2 { 0%, 60% { width: 0; animation-timing-function: steps(33, end); } 67.5% { width: 33ch; } 70.5% { width: 33ch; animation-timing-function: steps(4, end); } 71.5% { width: 0; } 100% { width: 0; } } @keyframes adFly { 0%, 71.5% { transform: none; opacity: 1; } 74.5% { transform: translate(90%, 4%) scale(0.6); opacity: 1; } 77.5% { transform: translate(180%, 8%) scale(0.32); opacity: 1; } 79%, 100% { transform: translate(180%, 8%) scale(0.32); opacity: 0; } } @keyframes adSent { 0%, 76.5% { opacity: 0; transform: translateY(8px) scale(0.92); } 79.5% { opacity: 1; transform: scale(1.04); } 81% { transform: none; } 95.5% { opacity: 1; } 99.5%, 100% { opacity: 0; } } /* scene 5 — the payoff, with room to read both replies */ @keyframes adDots { 0%, 81% { opacity: 0; } 82.5% { opacity: 1; } 86.5% { opacity: 1; } 88%, 100% { opacity: 0; } } @keyframes adReply { 0%, 88.5% { opacity: 0; transform: translateY(7px) scale(0.94); } 90.5% { opacity: 1; transform: scale(1.03); } 92% { transform: none; } 96.5% { opacity: 1; } 99.9%, 100% { opacity: 0; } } @keyframes adReply2 { 0%, 91.5% { opacity: 0; transform: translateY(7px) scale(0.94); } 93.5% { opacity: 1; transform: scale(1.03); } 95% { transform: none; } 97.5% { opacity: 1; } 99.9%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ad .acd-text, .ad .acd-text2, .ad .ak, .ad .ad-keys, .ad .ab-pill, .ad .abp-bar, .ad .ab-page, .ad .ab-thumb, .ad .ad-flash, .ad .ad-fly, .ad .ad-result, .ad .ad-browser, .ad .ac-sent, .ad .ac-dots, .ad .ac-reply, .ad .ac-dots i, .ad .ad-cap .cp, .ad .rs { animation: none; } .ad .ac-dots { opacity: 0; } .ad .ab-pill { opacity: 0; } .ad .ad-result { clip-path: none; } .ad .ad-cap .c3, .ad .rs.s4 { opacity: 1; } } @media (max-width: 860px) { .ad { height: 380px; } .ad-chat { opacity: 0; } .ad-browser { left: 8%; width: 50%; } .ad-fly { left: 62%; width: 30%; } .ad-keys { left: 50%; } } /* ===== REDACT panel, rebuilt 2026-07-31 to match the OCR panel's structure (recognisable furniture, abstract content, two beats, seamless loop) AND to depict the real tool: you DRAG a box, then that region pixelates. */ .rd2-doc { position: relative; border-radius: 9px; overflow: hidden; background: #f3f5f9; border: 1px solid #ccd3e0; box-shadow: 0 20px 44px -22px oklch(0 0 0 / 0.6); } .rd2-tb { height: 34px; display: flex; align-items: center; padding: 0 12px 0 14px; background: #e9ecf3; border-bottom: 1px solid #d8dee9; } .rd2-tb span { font-size: 12px; font-weight: 600; color: #39404f; font-family: "Geist Mono", monospace; } .rd2-tb i { margin-left: auto; font-style: normal; font-size: 15px; color: #7b8394; line-height: 1; } .rd2-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 13px; } .rd2-row { display: flex; align-items: center; gap: 14px; } .rd2-row em { flex: none; width: 74px; font-style: normal; font-size: 11.5px; color: #6b7383; } .rd2-v { display: block; height: 9px; border-radius: 4px; background: #c4ccda; filter: blur(0.4px); } /* ⚠️ GEOMETRY IS MEASURED, NOT EYEBALLED. The four value bars sit at (l,t,w,h) = 111,58,231,9 | 111,89,305,9 | 111,120,157,9 | 111,152,124,9 inside a 458px document. An earlier box (105,52,322,74) ended at y=126 while the Salary bar runs to y=129 — three pixels of the secret leaking out from under the redaction, which is the one thing this panel must never show. 101,48,326,92 clears every covered bar by ~10px on all sides — 5px read as cramped against the right edge and the bottom. Dotted gold marquee only — no corner handles, by request. */ .rd2-box { position: absolute; left: 101px; top: 48px; width: 0; height: 0; opacity: 0; border: 1.5px dashed var(--gold); border-radius: 2px; } /* Pixelate is the default redaction tool, and the app re-bakes it live while you draw — so the mosaic grows WITH the box rather than appearing after. ⚠️ A REAL pixelation, not a CSS pattern. Two gradient attempts came out as gingham ("it looks like a pajama") for a structural reason: repeating gradients are periodic, so any combination of them tiles into fabric. Real pixelation is irregular because it averages real content. So this IS one: text rendered, downsampled to 45x12, scaled back nearest-neighbour. ⚠️ And each pixelated line is CLIPPED TO THE WIDTH OF THE BAR IT COVERS (231 / 305 / 157 px), so the redacted text is the same length as the text that was there. Inventing longer or shorter lines would be the picture claiming something the document never said. ⚠️ background-size is FIXED, never a percentage: the box grows from zero, so a percentage would squash the blocks then stretch them. Fixed means the drag REVEALS the mosaic, which is what redacting actually looks like. */ .rd2-px { position: absolute; left: 101px; top: 48px; width: 0; height: 0; opacity: 0; border-radius: 2px; overflow: hidden; background-color: #f3f5f9; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAowAAAC4CAYAAABpR71EAAAACXBIWXMAAAABAAAAAQBPJcTWAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABGdBTUEAALGPC/xhBQAAB+BJREFUeJzt2NlyFPcZxuGeTdLMSKNlkJAAScgyjpJKCju2T51cQXy/HCS5gRSpQGLKNkkZHITALNpGy2wpLsBfqr9ogzzPKfXWf+iZbv2qK/uHJ+MCAAB+Rv3n/gEAAAQjAAD/lTeMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAMD5BOOg30/t9g4OU7uF+bniquv1eqlds9lK7SrFOLV79fp1ateZzX0HjXqtuOqOj49Tu5OT3K5aa1zod354mPttzs91Sm+OTnLPholG7nE0GI5Su5npdmr3Icv+TobDYWrX6cykdnv7+7nzZnLnZWWvS6129Z+Z/P/xhhEAgJBgBAAgJBgBAAgJRgAAQoIRAICQYAQAICQYAQAICUYAAEKCEQCAkGAEACAkGAEACAlGAABCghEAgPMJxu8fP07tHn7zKLWrjkalN8OikjqrUs3t9t4cpHbXlxdTu82PN1K7P//xT6ndbHcpteu0p0pvDg6PUmc1arnvbmPz49TuL/f/ltpdX1xI7fonx6ldrZ671Xv7u6U3x6NG6qxf/+pOavfDD09Su3o99zkbExOp3bVu7jvf2X6a2h2dlN+sra2mztrZ/jG1K5LfQW9/L7Vr1HL3wfLqemrXaeb+f3c//TS1g/PkDSMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAAOcTjFtbWxe64+xsffKJy3lGPrv7G9fykn35+W+LD9vnxdX3PnxG4H/hDSMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAwPkE478ef5/a3X/4TWq3vHit/KhSTZ01HA1Tuzev3qZ2S8tLqd3K9dzu3r17qd3Gna3UrjXZKL2pVnPf3WBwmtrNdOZTuwcPHqR2i0uLqd1o0E/ter1eateemii9OTytpM66vbaS2j17/jK16851UrtqvZE7b2Eutdt9+yq1O+gNSm86nZnUWTvbz1K7uYXcfff8We68bjfxd6QoitmFbmpX9I9Ts92D8vfruMjddxvrN1K77/75JLVrTeSyo9vNPTP/8e23qd3iYu7v69rN8s+xB39/mDrrs7t3U7uVldyz1htGAABCghEAgJBgBAAgJBgBAAgJRgAAQoIRAICQYAQAICQYAQAICUYAAEKCEQCAkGAEACAkGAEACAlGAADOJxivr9xI7b6anU/t+v3T0pvRaJw6q97IXZaT1fKf8Z1Wq5natafbqd3XX/8htesPR6lda2qi9GZv/zB11tTkZGo3PTOd2i0vL6V29Wo1tRsOB6ldrVZL7fr9fvnNIPc76S7kng1rq7dSu6KS+w6q1UruuOR57eTzoVYr/xxrTJS/V99Zvbmc2o2K3LXc3Lid2o2TfxOa7dyzthgPU7P9g17pTT15j09M5P7e3dn8KLWbmso9o1vN3H3Qme2kdpVq7npOJa7nl198kTqrmbyWWd4wAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgBwPsHYarUudMfZaU5NXfnLOT+/ULwP2n7Pl67VahYftPm5y/4EXLBOZ/bKX/P35Rk9PT192R/hg+ENIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACcTzDu7+2mdj9uv0jtbiwvFRdlNB6ndvu7uWsy372W2tWqldTu0aNHqd2NW2upXbs5WXpzetpPnVWtVVO7fn+Q2r18sZPaNdvTqd1okLsuh0fHqd3ytfnSm7cHJ6mzuvOd1O6gd5Q8r/z/7Z12u5XaVau53ybAVeANIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAAAhwQgAQEgwAgAQEowAAIQEIwAA5xOMr9+8Te1+evkitfv30yelN6NxJXVWrV5N7Q4PTlK72dl2arexcTu129nJfQc/vdlL7aYmGqU3p/1+6qxqMU7t1tdz1/Lp9svUbm76MLUbjoapXb2Wuxfu//Vp6c24Npk6azS8mdptbz9P7R6nVkXx+999lVwCvL+8YQQAICQYAQAICUYAAEKCEQCAkGAEACAkGAEACAlGAABCghEAgJBgBAAgJBgBAAgJRgAAQoIRAICQYAQA4HyCcX19/UJ3nJ211Vsu5xnZ3NxwLS/ZL7d+cdkfAeCD5w0jAAAhwQgAQEgwAgAQEowAAIQEIwAAIcEIAEBIMAIAEBKMAACEBCMAACHBCABASDACABASjAAAhAQjAABF5D+tHw3MhypWjgAAAABJRU5ErkJggg=="); background-size: 326px 92px; background-position: 0 0; background-repeat: no-repeat; } .rd2-cur { position: absolute; left: 98px; top: 46px; width: 17px; height: 17px; opacity: 0; z-index: 5; filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.4)); } .rd2-cur svg { width: 100%; height: 100%; display: block; } /* 6s. ⚠️ Timing is set PER SEGMENT, not by the global --ease. --ease is cubic-bezier(0.22, 0.61, 0.36, 1) — a hard ease-OUT that sprints then crawls over a long tail. Across a two-second drag the last third barely moves, which reads as the cursor hesitating or pulling back at the end. The drag now uses a symmetric ease-in-out (accelerate, travel, settle — how a hand actually moves), and every other segment is linear so the fade dissolves instead of snapping. */ .loop-gate .rd2-box { animation: rd2Box 6s linear infinite; animation-play-state: paused; } .loop-gate .rd2-px { animation: rd2Px 6s linear infinite; animation-play-state: paused; } .loop-gate .rd2-cur { animation: rd2Cur 6s linear infinite; animation-play-state: paused; } .loop-gate.play .rd2-box, .loop-gate.play .rd2-px, .loop-gate.play .rd2-cur { animation-play-state: running; } /* ⚠️ ONE TIMELINE: identical percentages AND identical per-segment easing on all three, so the cursor sits on the box's moving corner for every frame. Its travel (326,92) is exactly the box's final size. */ @keyframes rd2Cur { 0%, 8% { opacity: 0; transform: translate(0, 0); animation-timing-function: linear; } 10% { opacity: 1; transform: translate(0, 0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 44% { opacity: 1; transform: translate(326px, 92px); animation-timing-function: linear; } 76% { opacity: 1; transform: translate(326px, 92px); animation-timing-function: linear; } 92%, 100% { opacity: 0; transform: translate(326px, 92px); } } @keyframes rd2Box { 0%, 8% { opacity: 0; width: 0; height: 0; animation-timing-function: linear; } 10% { opacity: 1; width: 0; height: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 44% { opacity: 1; width: 326px; height: 92px; animation-timing-function: linear; } 76% { opacity: 1; width: 326px; height: 92px; animation-timing-function: linear; } 92%, 100% { opacity: 0; width: 326px; height: 92px; } } @keyframes rd2Px { 0%, 8% { opacity: 0; width: 0; height: 0; animation-timing-function: linear; } 10% { opacity: 1; width: 0; height: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 44% { opacity: 1; width: 326px; height: 92px; animation-timing-function: linear; } 76% { opacity: 1; width: 326px; height: 92px; animation-timing-function: linear; } 92%, 100% { opacity: 0; width: 326px; height: 92px; } } @media (prefers-reduced-motion: reduce) { .loop-gate .rd2-box, .loop-gate .rd2-px, .loop-gate .rd2-cur { animation: none; } .rd2-px, .rd2-box { opacity: 1; width: 326px; height: 92px; } } /* ===== RECORDING panel — a plain preview of a screen recording. ⚠️ WHAT EVERY EARLIER VERSION GOT WRONG: it animated a fake WORKFLOW - a settings filter, a drag between two apps - and asked the viewer to follow a story told in grey rectangles. That is unreadable ("a bunch of bullshit on my screen") because abstract content cannot carry a message. The RECORDING is the subject now; the document on screen is backdrop that never needs to be decoded. ⚠️ The bar is rebuilt from RecordingIndicator.tsx and has the four controls that were missing - pen, MIC/MUTE, restart, discard - in the real order. ⚠️ Nothing here is interactive. pointer-events: none on the whole panel, so a fake button can never behave like a real one. */ .rk-desk { position: relative; width: min(880px, 100%); aspect-ratio: 16 / 9.6; margin: 0 auto; border-radius: 12px; overflow: hidden; pointer-events: none; box-shadow: 0 34px 70px -34px oklch(0 0 0 / 0.8), inset 0 0 0 1px oklch(1 0 0 / 0.08); } .rk-desk *, .rk-desk *::before, .rk-desk *::after { pointer-events: none; } .rk-wall { position: absolute; inset: 0; background: linear-gradient(150deg, #1e2740 0%, #26304c 45%, #322c4c 100%); } .rk-task { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; z-index: 5; display: flex; align-items: center; padding: 0 12px; background: oklch(0.2 0.012 265 / 0.88); backdrop-filter: blur(14px); border-top: 1px solid oklch(1 0 0 / 0.08); } .rk-mid { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; } .rk-start { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 17px; } .rk-start i { width: 7px; height: 7px; border-radius: 1.5px; background: #63a0ff; } .rk-app { width: 19px; height: 19px; border-radius: 5px; background: oklch(1 0 0 / 0.2); } .rk-app.on { background: #63a0ff; box-shadow: 0 4px 0 -2px #63a0ff; } .rk-tray-box { margin-left: auto; display: flex; align-items: center; gap: 8px; } .rk-tray { width: 11px; height: 11px; border-radius: 2px; background: oklch(1 0 0 / 0.35); } .rk-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: 9.5px; color: oklch(0.94 0.01 265); } .rk-clock em { font-style: normal; font-size: 8.5px; opacity: 0.72; } /* backdrop window — an ordinary document, not a puzzle */ .rk-win { position: absolute; left: 12%; top: 17%; width: 60%; z-index: 2; border-radius: 9px; overflow: hidden; background: #fbfcfe; box-shadow: 0 26px 50px -20px oklch(0 0 0 / 0.62), 0 0 0 1px oklch(0 0 0 / 0.07); } .rk-tb { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 3px 0 12px; background: #eef1f6; border-bottom: 1px solid #dde2ea; } .rk-tb span { font-size: 11.5px; font-weight: 600; color: #2f3540; } .rk-wbtn { width: 24px; height: 21px; border-radius: 3px; position: relative; } .rk-wbtn:nth-of-type(1) { margin-left: auto; } .rk-wbtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.3px; background: #4a5160; transform: translate(-50%, -50%); } .rk-wbtn:nth-of-type(2)::after { height: 6px; width: 6px; border: 1.3px solid #4a5160; background: none; } .rk-wx::after { transform: translate(-50%, -50%) rotate(45deg); } .rk-doc { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; } .rk-h { height: 11px; width: 44%; border-radius: 3px; background: #9aa4b6; } .rk-l { height: 6px; border-radius: 3px; background: #d9dfe9; } .rk-chart { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin: 6px 0 4px; } .rk-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #8fa3d6, #6c7fb5); } /* click highlight — the feature the copy promises */ .rk-click { position: absolute; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--gold); opacity: 0; transform: translate(-50%, -50%) scale(0.2); left: 35.91%; top: 19.89%; } .rk-cur { position: absolute; z-index: 12; width: 17px; height: 17px; left: 44%; top: 58%; filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.5)); } .rk-cur svg { width: 100%; height: 100%; display: block; } /* ── the recording bar: THE APP'S OWN STYLESHEET ──────────────────── ⚠️ Copied from src/components/recording/RecordingBar.css and scoped under .rk-desk, rather than reproduced by eye. He cannot screenshot the bar to check it - the window is excluded from capture so it never lands inside his own recordings - so the demo takes the source instead. Hover/active rules are dropped: nothing in this panel is interactive. Markup is RecordingIndicator.tsx's: grip, dot+timer, waveform, | pen, mic, | pause, restart, discard, Stop. */ .rk-desk .rec-root { --gold-h: 84; --gold-c: 0.105; --gold-l: 0.80; --gold: oklch(var(--gold-l) var(--gold-c) var(--gold-h)); --gold-bright: oklch(calc(var(--gold-l) + 0.07) calc(var(--gold-c) - 0.005) calc(var(--gold-h) + 3)); --gold-deep: oklch(calc(var(--gold-l) - 0.13) var(--gold-c) calc(var(--gold-h) - 6)); --gold-soft: oklch(var(--gold-l) var(--gold-c) var(--gold-h) / 0.14); --gold-faint: oklch(var(--gold-l) var(--gold-c) var(--gold-h) / 0.07); --base-h: 80; --base-c: 0.008; --surface: oklch(0.205 var(--base-c) var(--base-h)); --text: oklch(0.945 0.005 var(--base-h)); --text-soft: oklch(0.78 0.006 var(--base-h)); --text-mut: oklch(0.62 0.007 var(--base-h)); --text-dim: oklch(0.50 0.007 var(--base-h)); --line: oklch(0.99 0 0 / 0.07); --hairline: oklch(0.99 0 0 / 0.10); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Geist", "Inter", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; user-select: none; } .rk-desk .recbar { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 8px 0 6px; background: linear-gradient(180deg, oklch(0.20 var(--base-c) var(--base-h)), oklch(0.16 var(--base-c) var(--base-h))); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.5), 0 22px 50px -16px oklch(0 0 0 / 0.7), 0 0 0 1px oklch(0.8 0.1 84 / 0.06) inset, 0 1px 0 oklch(1 0 0 / 0.06) inset; animation: bar-pop 0.34s cubic-bezier(0.34, 1.4, 0.5, 1); box-sizing: border-box; } .rk-desk from { opacity: 0; transform: translateY(14px) scale(0.96); } .rk-desk .recbar.flash { animation: bar-flash 0.3s ease; } .rk-desk 0%, .rk-desk 100% { box-shadow: 0 0 0 1px oklch(0 0 0 / 0.5), 0 22px 50px -16px oklch(0 0 0 / 0.7); } .rk-desk 45% { box-shadow: 0 0 0 2px var(--gold), 0 0 30px -4px var(--gold-soft), 0 22px 50px -16px oklch(0 0 0 / 0.7); } .rk-desk .grip { width: 22px; height: 40px; display: grid; place-items: center; border: none; background: none; color: var(--text-dim); cursor: grab; border-radius: 8px; } .rk-desk .grip svg { width: 18px; height: 18px; pointer-events: none; } .rk-desk .status { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 2px; } .rk-desk .rec-dot { position: relative; width: 14px; height: 14px; display: grid; place-items: center; } .rk-desk .rd-core { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ff6a64, #e5403b); box-shadow: 0 0 8px oklch(0.62 0.2 25 / 0.8); z-index: 2; } .rk-desk .rd-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid oklch(0.62 0.2 25 / 0.7); animation: rd-pulse 1.6s ease-out infinite; } .rk-desk 0% { transform: scale(0.7); opacity: 0.9; } .rk-desk 100% { transform: scale(2.1); opacity: 0; } .rk-desk .paused .rd-core { background: oklch(0.7 0.01 80); box-shadow: none; } .rk-desk .paused .rd-ring { animation: none; opacity: 0; } .rk-desk .timer { font-family: "Geist Mono", ui-monospace, monospace; font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: 0.5px; min-width: 78px; } .rk-desk .timer-cs { font-size: 12px; color: var(--text-mut); } .rk-desk .paused-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: oklch(0.8 0.1 84); background: var(--gold-faint); border: 1px solid var(--gold-soft); padding: 2px 6px; border-radius: 5px; } .rk-desk .wave { display: flex; align-items: center; gap: 2.5px; height: 30px; padding: 0 6px; } .rk-desk .wbar { width: 2.6px; height: 26px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); transform: scaleY(0.1); transform-origin: center; will-change: transform; } .rk-desk .wave.muted .wbar { background: oklch(0.4 0.01 80); } .rk-desk .wave.idle .wbar { background: oklch(0.5 0.04 84); } .rk-desk .rb-div { width: 1px; height: 28px; background: var(--line); flex: none; } .rk-desk .seg { display: flex; align-items: center; gap: 4px; } .rk-desk .rb-icon { width: 38px; height: 40px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; background: none; border: 1px solid transparent; color: var(--text-soft); transition: background .14s, color .14s, border-color .14s, transform .1s; } .rk-desk .rb-icon svg { width: 18px; height: 18px; } .rk-desk .rb-icon.on { background: var(--gold-faint); color: var(--gold-bright); border-color: var(--gold-soft); } .rk-desk .rb-icon.muted { background: oklch(0.6 0.18 25 / 0.16); color: oklch(0.82 0.13 25); border-color: oklch(0.6 0.18 25 / 0.42); } .rk-desk .rb-icon.danger.confirm { background: oklch(0.6 0.18 25 / 0.18); color: oklch(0.84 0.14 25); border-color: oklch(0.6 0.18 25 / 0.55); animation: confirm-pulse 0.7s ease-in-out infinite; } .rk-desk 0%, .rk-desk 100% { box-shadow: 0 0 0 0 oklch(0.6 0.18 25 / 0.4); } .rk-desk 50% { box-shadow: 0 0 0 4px oklch(0.6 0.18 25 / 0); } .rk-desk .rb-btn { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px; border-radius: 9px; cursor: pointer; background: oklch(0.255 var(--base-c) var(--base-h)); border: 1px solid var(--hairline); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 500; transition: background .14s, border-color .14s, transform .1s; } .rk-desk .rb-btn svg { width: 17px; height: 17px; color: var(--text-soft); } .rk-desk .rb-btn.ghost { background: none; border-color: var(--line); } .rk-desk .rb-stop { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 13px; margin-left: 2px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: oklch(0.18 0.03 var(--gold-h)); background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); border: 1px solid var(--gold-deep); box-shadow: 0 5px 16px -6px var(--gold-soft), 0 1px 0 oklch(1 0 0 / 0.25) inset; transition: filter .14s, transform .1s; } .rk-desk .rb-stop svg { width: 16px; height: 16px; } .rk-desk .rb-stop.text-only { padding: 0 18px; justify-content: center; } .rk-desk .recbar.countdown { padding: 0 14px 0 10px; gap: 14px; } .rk-desk .cd-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; background: var(--gold-faint); border: 1.5px solid var(--gold-soft); } .rk-desk .cd-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: cd-pulse 0.8s ease-out infinite; } .rk-desk 0% { transform: scale(0.85); opacity: 0.8; } .rk-desk 100% { transform: scale(1.4); opacity: 0; } .rk-desk .cd-num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 20px; font-weight: 600; color: var(--gold-bright); animation: cd-num 0.4s var(--ease); } .rk-desk from { transform: scale(1.5); } .rk-desk .cd-text { display: flex; flex-direction: column; gap: 1px; } .rk-desk .cd-title { font-size: 13.5px; font-weight: 600; color: var(--text); } .rk-desk .cd-sub { font-size: 11.5px; color: var(--text-mut); } .rk-desk .recbar.proc { padding: 0 16px 0 14px; gap: 13px; min-width: 320px; } .rk-desk .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--gold-bright); animation: spin 0.7s linear infinite; flex: none; } .rk-desk to { transform: rotate(360deg); } .rk-desk .proc-text { flex: 1; display: flex; flex-direction: column; gap: 6px; } .rk-desk .proc-title { font-size: 12.5px; color: var(--text-soft); } .rk-desk .proc-track { height: 5px; border-radius: 3px; background: oklch(0.3 var(--base-c) var(--base-h)); overflow: hidden; } .rk-desk .proc-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width 0.12s linear; } .rk-desk .proc-indef { width: 40%; animation: proc-slide 1.1s ease-in-out infinite; } .rk-desk 0% { margin-left: -40%; } .rk-desk 100% { margin-left: 100%; } .rk-desk .proc-pct { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--gold-bright); min-width: 34px; text-align: right; } .rk-desk .recbar.saved, .rk-desk .recbar.discarded { padding: 0 8px 0 14px; gap: 12px; } .rk-desk .saved-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, oklch(0.78 0.14 150), oklch(0.6 0.13 150)); color: oklch(0.15 0.03 150); transform: scale(1); opacity: 1; animation: saved-pop 0.34s cubic-bezier(0.34, 1.5, 0.5, 1); } .rk-desk from { transform: scale(0.4); opacity: 0; } .rk-desk .saved-badge svg { width: 17px; height: 17px; } .rk-desk .saved-text { display: flex; flex-direction: column; gap: 1px; margin-right: 4px; } .rk-desk .saved-title { font-size: 13.5px; font-weight: 600; color: var(--text); } .rk-desk .saved-sub { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--text-mut); } .rk-desk .disc-text { font-size: 13.5px; color: var(--text-soft); padding-right: 4px; } .rk-pill { position: absolute; left: 50%; top: 18px; z-index: 9; transform: translateX(-50%); } /* ⚠️ scale on the BAR, not on .rk-pill: the position keyframes rewrite .rk-pill's transform and would drop the scale every time they ran. */ /* two tabs: he opens the second one and scrolls THAT, not the page he was on */ .rk-tb { gap: 3px; } .rk-t2 { background: #e4e8f0; border-color: #dbe1ea; color: #6a7488; } .rk-u2, .rk-p2 { opacity: 0; } .rk-desk.t2 .rk-t1 { background: #e4e8f0; border-bottom-color: #dbe1ea; color: #6a7488; } .rk-desk.t2 .rk-t2 { background: #fff; border-bottom-color: #fff; color: #46506a; } .loop-gate .rk-t2 { animation: rkTabOn 9s linear infinite; animation-play-state: paused; } .loop-gate .rk-t1 { animation: rkTabOff 9s linear infinite; animation-play-state: paused; } .loop-gate .rk-u1 { animation: rkPage1 9s linear infinite; animation-play-state: paused; } /* both, in ONE declaration - see note above */ .loop-gate .rk-p1 { animation: rkPage1 9s linear infinite, rkScroll 9s linear infinite; animation-play-state: paused; } .loop-gate .rk-u2 { animation: rkPage2 9s linear infinite; animation-play-state: paused; } .loop-gate .rk-p2 { animation: rkPage2 9s linear infinite, rkScroll 9s linear infinite; animation-play-state: paused; } .loop-gate.play .rk-t2, .loop-gate.play .rk-t1, .loop-gate.play .rk-u1, .loop-gate.play .rk-p1, .loop-gate.play .rk-u2, .loop-gate.play .rk-p2 { animation-play-state: running; } /* browser chrome */ .rk-tab { font-size: 10.5px; color: #46506a; background: #fff; border: 1px solid #dbe1ea; border-bottom-color: #fff; border-radius: 6px 6px 0 0; padding: 5px 12px; margin-bottom: -1px; } .rk-url { display: flex; align-items: center; gap: 7px; margin: 7px 10px 0; padding: 5px 10px; border-radius: 999px; background: #eef1f6; border: 1px solid #e0e5ee; } .rk-lock { width: 8px; height: 8px; border-radius: 2px; border: 1.4px solid #8b94a6; } .rk-url em { font-style: normal; font-size: 10px; color: #6a7285; } .rk-view { position: relative; height: 186px; overflow: hidden; margin: 8px 0 0; } .rk-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 4px 16px 14px; } .rk-h { height: 11px; width: 44%; border-radius: 3px; background: #97a1b4; flex: none; } .rk-h2 { height: 9px; width: 33%; border-radius: 3px; background: #9fa9bc; flex: none; margin-top: 6px; } .rk-l { height: 6px; border-radius: 3px; background: #dde2ea; flex: none; } .rk-chart { display: flex; align-items: flex-end; gap: 8px; height: 58px; margin: 5px 0 3px; flex: none; } .rk-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #8fa3d6, #6c7fb5); } /* ⚠️ `zoom`, not `transform: scale`. Scaling rasterises an already-laid-out bar, which is what made the text soft and the Stop/Pause buttons look subtly wrong - their borders and radii were being resampled. zoom re-lays the bar out at the smaller size, so every glyph and edge stays crisp and the buttons keep their true proportions. */ .rk-pill .recbar { zoom: 0.62; } /* ⚠️ the app's bars are ; the old rule animated ".rk-wave i", which matches nothing here, so the waveform sat flat. */ /* ⚠️ The app drives the waveform with transform: scaleY() - the analyser sets it per frame - and .wbar ships at scaleY(0.1). Animating `height` therefore did nothing visible: the bars stayed squashed to a tenth. Animate scaleY, like the real thing. */ .loop-gate .rk-desk .wbar { animation: rkWave 0.85s ease-in-out infinite; animation-play-state: paused; } .loop-gate.play .rk-desk .wbar { animation-play-state: running; } .rk-desk .wbar:nth-child(2n) { animation-delay: -0.22s; } .rk-desk .wbar:nth-child(3n) { animation-delay: -0.45s; } .rk-desk .wbar:nth-child(5n) { animation-delay: -0.63s; } .rk-keys { position: absolute; left: 50%; bottom: 112px; z-index: 9; transform: translateX(-50%); display: flex; gap: 5px; } .rk-keys b { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 5px; background: oklch(0.16 0.006 80 / 0.94); border: 1px solid oklch(1 0 0 / 0.18); border-bottom-width: 2px; color: var(--gold-bright); font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; opacity: 0; } /* the file you are left with — the app's real 220x140 card, REC chip centred */ .rk-card { position: absolute; left: 16px; bottom: 50px; z-index: 10; width: 150px; aspect-ratio: 220 / 140; border-radius: 9px; overflow: hidden; background: oklch(0.15 0.008 80); border: 1px solid oklch(1 0 0 / 0.12); box-shadow: 0 18px 36px -14px oklch(0 0 0 / 0.85); opacity: 0; transform: translateX(-26px) scale(0.96); } .rk-shot { position: absolute; inset: 0; background: linear-gradient(140deg, #5b6486, #2b3148); } .rk-rec { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: oklch(0 0 0 / 0.6); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; } /* ── beats (8s): it is a recording, that is the whole idea ───────── 0.0-1.0 recording: red border, timer running, waveform live 1.4-2.2 the cursor clicks something -> the click glows 3.0-3.9 Ctrl Shift R shows on screen 4.8 Stop 5.2-6.8 the capture card lands bottom-left 6.8-8.0 hold, fade, loop */ .loop-gate .rk-dot i { animation: rkPulse 1.6s ease-in-out infinite; animation-play-state: paused; } .loop-gate.play .rk-page { animation-play-state: running; } .loop-gate .rk-cur { animation: rkCur 9s linear infinite; animation-play-state: paused; } .loop-gate .rk-click { animation: rkClick 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .rk-keys b { animation: rkCap 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .rk-pill { animation: rkBarMove 9s linear infinite, rkPill 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .rk-card { animation: rkCard 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .rk-dot i, .loop-gate.play .rk-wave i, .loop-gate.play .rk-cur, .loop-gate.play .rk-click, .loop-gate.play .rk-keys b, .loop-gate.play .rk-pill, .loop-gate.play .rk-card { animation-play-state: running; } .rk-wave i:nth-child(2n) { animation-delay: -0.25s; } .rk-wave i:nth-child(3n) { animation-delay: -0.5s; } .rk-wave i:nth-child(5n) { animation-delay: -0.7s; } .rk-keys b:nth-child(1) { animation-delay: 0s; } .rk-keys b:nth-child(2) { animation-delay: 0.11s; } .rk-keys b:nth-child(3) { animation-delay: 0.22s; } @keyframes rkPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0; transform: scale(1.5); } } @keyframes rkWave { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(0.92); } } /* ⚠️ The bar is DRAGGED by its grip, which is a real thing you do when it sits over what you are demonstrating. Cursor and bar share identical percentages and easing so the pointer stays on the grip for the whole drag; the cursor's end point is its measured start (grip centre 167,445) plus exactly the distance the bar travels (left 50%->62% = 105.6px, bottom 54->88px = -34px). Measured, never guessed - the same rule as every other target here. */ /* WARNING: CONSTANT SPEED. Every cursor move gets time = distance / 300 px/s, and the whole animation is LINEAR - no acceleration anywhere. Giving each move an equal slice of the timeline is what made the long hop race and the short drag crawl. Segment distances: 517, 118, 188 px. Every position is measured from the built layout. */ /* WARNING: SMOOTH, and evenly paced. Time is proportional to distance at 520 px/s so no move is faster than another - but each move eases gently in and out rather than running pure linear, which starts and stops dead and reads as a machine. The scroll is continuous, not stepped. Positions are measured. */ @keyframes rkCur { 0%, 3.33% { left: 79.20%; top: 60.32%; animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 14.60% { left: 28.75%; top: 6.53%; } 16.15% { left: 28.75%; top: 6.53%; transform: scale(0.85); animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 18.67% { left: 41.75%; top: 11.84%; transform: scale(0.85); } 20.45% { left: 41.75%; top: 11.84%; transform: scale(1); animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 21.90% { left: 35.57%; top: 19.60%; transform: scale(1); } 22.79% { left: 35.57%; top: 19.60%; transform: scale(0.85); } 24.79% { left: 35.57%; top: 19.60%; transform: scale(1); animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 28.60% { left: 47.39%; top: 47.06%; transform: scale(1); } 100% { left: 47.39%; top: 47.06%; transform: scale(1); } } @keyframes rkBarMove { 0%, 16.15% { left: 50%; top: 18px; animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 18.67%, 100% { left: 63%; top: 46px; } } @keyframes rkScroll { 0%, 31.05% { transform: translateY(0); animation-timing-function: cubic-bezier(0.42, 0, 0.35, 1); } 56.60%, 100% { transform: translateY(-76px); } } @keyframes rkClick { 0%, 22.57% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 23.68% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.5); } 28.79%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } } @keyframes rkTabOn { 0%, 23.01% { background: #e4e8f0; border-bottom-color: #dbe1ea; color: #6a7488; } 23.12%, 100% { background: #fff; border-bottom-color: #fff; color: #46506a; } } @keyframes rkTabOff { 0%, 23.01% { background: #fff; border-bottom-color: #fff; color: #46506a; } 23.12%, 100% { background: #e4e8f0; border-bottom-color: #dbe1ea; color: #6a7488; } } @keyframes rkPage1 { 0%, 23.01% { opacity: 1; } 23.12%, 100% { opacity: 0; } } @keyframes rkPage2 { 0%, 23.01% { opacity: 0; } 23.12%, 100% { opacity: 1; } } @keyframes rkPill { 0%, 64.94% { opacity: 1; transform: translateX(-50%) translateY(0); } 68.27%, 100% { opacity: 0; transform: translateY(-12px); } } @keyframes rkCard { 0%, 68.27% { opacity: 0; transform: translateX(-26px) scale(0.96); } 84.94% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateX(-26px) scale(0.96); } } @keyframes rkCap { 0%, 36% { opacity: 0; transform: translateY(4px) scale(0.92); } 39% { opacity: 1; transform: none; } 47% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-3px) scale(0.95); } } @keyframes rkBorder { 0%, 59% { opacity: 1; } 64%, 100% { opacity: 0; } } /* ===== OCR panel, rebuilt 2026-07-31 on the CleanShot X structure. THE RULE THIS ENCODES: the panel must not try to be readable, and must not narrate. The old one did both — a fake video call with a 9px docker command, plus a .demo-say strip repeating the headline that already sits beside it — and it read as noise ("nothing to make me care about it"). CleanShot's own text-recognition demo uses grey placeholder bars and NO caption; the copy in the left column does all the talking. Two beats, then back to frame one. */ .oc2-shot { position: relative; border-radius: 9px; overflow: hidden; background: #f3f5f9; border: 1px solid #ccd3e0; box-shadow: 0 20px 44px -22px oklch(0 0 0 / 0.6); } /* Windows-style dialog chrome — REAL words here on purpose. */ .oc2-dtb { height: 34px; display: flex; align-items: center; padding: 0 10px 0 14px; background: #e9ecf3; border-bottom: 1px solid #d8dee9; } .oc2-dtb span { font-size: 12px; font-weight: 600; color: #39404f; } .oc2-dtb i { margin-left: auto; font-style: normal; font-size: 15px; color: #7b8394; line-height: 1; } .oc2-dbody { display: flex; gap: 16px; padding: 20px 22px 18px; } .oc2-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e8452f; color: #fff; font-weight: 800; font-size: 20px; line-height: 1; font-family: "Geist", system-ui, sans-serif; } .oc2-dtext { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 3px; } /* Soft grey bars = "a picture of words". Nothing to read, by design. */ .oc2-bar { display: block; height: 8px; border-radius: 4px; background: #c4ccda; filter: blur(0.4px); } .oc2-bar.hd { height: 10px; background: #9aa4b6; } .oc2-bar.code { height: 9px; border-radius: 3px; background: #b3bccd; } .oc2-dfoot { display: flex; justify-content: flex-end; gap: 9px; padding: 0 18px 18px; } .oc2-dfoot i { font-style: normal; font-size: 11.5px; padding: 5px 15px; border-radius: 5px; border: 1px solid #ccd3e0; color: #4b5364; background: #fff; } .oc2-dfoot i.pri { background: #2f6fd0; border-color: #2f6fd0; color: #fff; } .oc2-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 42%, oklch(0.8 0.105 84 / 0.5) 50%, transparent 58%); } /* ⚠️ Offset down-right, NOT centred. Centred, the card covered the screenshot almost completely and the before/after vanished — you saw a card, not a transformation. CleanShot stacks Notes over Safari for exactly this reason: the original has to stay visible for the change to read. */ .oc2-card { position: absolute; left: 30%; right: 1%; top: 53%; z-index: 3; pointer-events: none; opacity: 0; transform: translateY(-42%) scale(0.94); border-radius: 12px; overflow: hidden; border: 1px solid oklch(0.99 0 0 / 0.10); background: oklch(0.155 0.008 80); box-shadow: 0 30px 60px -26px oklch(0 0 0 / 0.85); } .oc2-ch { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; background: oklch(0.125 0.008 80); border-bottom: 1px solid oklch(0.99 0 0 / 0.07); font-size: 12px; font-weight: 600; color: var(--text); } .oc2-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--gold); } .oc2-x { margin-left: auto; color: var(--text-dim); font-size: 15px; line-height: 1; } .oc2-cb { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; } /* Crisp, bright, unblurred — the same seven lines, now real text. */ .oc2-ln { height: 8px; border-radius: 4px; background: oklch(0.86 0.006 80); opacity: 0; transform: translateX(-6px); } .oc2-cf { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 11px; background: oklch(0.125 0.008 80); border-top: 1px solid oklch(0.99 0 0 / 0.07); } .oc2-cf i { font-style: normal; font-size: 11px; color: var(--text-dim); font-family: "Geist Mono", monospace; } .oc2-cf em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: oklch(0.2 0.03 84); background: var(--gold); border-radius: 7px; padding: 5px 11px; } /* One 9s loop. Beat 1 rests, the sweep takes the shot, the card lands, lines fill, then everything returns to EXACTLY frame one so the loop is seamless. */ .loop-gate .oc2-shot { animation: oc2Shot 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .oc2-sweep { animation: oc2Sweep 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .oc2-card { animation: oc2Card 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .oc2-ln { animation: oc2Line 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .oc2-shot, .loop-gate.play .oc2-sweep, .loop-gate.play .oc2-card, .loop-gate.play .oc2-ln { animation-play-state: running; } .oc2-ln:nth-of-type(1) { animation-delay: 0.00s; } .oc2-ln:nth-of-type(2) { animation-delay: 0.06s; } .oc2-ln:nth-of-type(3) { animation-delay: 0.12s; } .oc2-ln:nth-of-type(4) { animation-delay: 0.18s; } @keyframes oc2Shot { 0%, 26% { transform: none; filter: none; } 38%, 78% { transform: scale(0.975); filter: brightness(0.82) saturate(0.9); } 92%, 100% { transform: none; filter: none; } } @keyframes oc2Sweep { 0%, 26% { opacity: 0; transform: translateX(-60%); } 30% { opacity: 1; } 36% { opacity: 0; transform: translateX(60%); } 100% { opacity: 0; transform: translateX(60%); } } @keyframes oc2Card { 0%, 34% { opacity: 0; transform: translateY(-34%) scale(0.94); } 44%, 76% { opacity: 1; transform: translateY(-50%) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-56%) scale(0.97); } } @keyframes oc2Line { 0%, 42% { opacity: 0; transform: translateX(-6px); } 52%, 76% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } } @media (prefers-reduced-motion: reduce) { .loop-gate .oc2-shot, .loop-gate .oc2-sweep, .loop-gate .oc2-card, .loop-gate .oc2-ln { animation: none; } .oc2-card { opacity: 1; transform: translateY(-50%); } .oc2-ln { opacity: 1; transform: none; } } /* ===== OCR + REDACT mini-demos — each proves exactly one pain is dead. OCR = the transformation: an unselectable dialog becomes REAL TEXT that types itself onto a clipboard card. Loops gated via .loop-gate/.play. */ .demo-hook { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; pointer-events: none; } .dh-kick { font-family: "Geist Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--gold-bright); border: 1px solid var(--gold-soft); background: var(--gold-faint); border-radius: 999px; padding: 4px 11px; } .dh-q { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; color: var(--text); } .dh-q b, .dh-q em.g { font-weight: 700; font-style: normal; color: var(--gold-bright); } .dh-q .w { display: inline-block; overflow: hidden; vertical-align: bottom; } .dh-q .w em { display: inline-block; font-style: normal; will-change: transform; } .dh-dim { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: oklch(0.065 0.004 80); } .dh-glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(46% 38% at 50% 46%, oklch(0.8 0.105 84 / 0.16), transparent 70%); } .ocr-demo, .red-demo { position: relative; overflow: hidden; padding: 28px 32px 24px; border-radius: 16px; border: 1px solid var(--line-hi); background-image: radial-gradient(70% 60% at 50% 34%, oklch(0.8 0.105 84 / 0.08), transparent), radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: cover, 20px 20px; background-color: oklch(0.10 0.006 80); box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.7); } .od-win, .rd-win { border-radius: 10px; overflow: hidden; background: #eef1f5; box-shadow: 0 18px 44px -16px oklch(0 0 0 / 0.6); max-width: 540px; } .od-tb, .rd-tb { height: 36px; background: #e3e7ef; color: #5b6474; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 0 15px; } .od-win.call { background: #171b24; } .od-tb.dark { background: #10131b; color: #b8c0cf; border-bottom: 1px solid #232a38; } .cw-rec { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: recPulse 1.6s ease-in-out infinite; } .cw-live { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.1em; color: #ff8f93; border: 1px solid oklch(0.55 0.19 25 / 0.4); border-radius: 5px; padding: 2px 7px; } @keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .cw-share { position: relative; padding: 22px 20px 24px; } .cw-bar { display: flex; gap: 10px; justify-content: center; align-items: center; padding: 9px 0 11px; border-top: 1px solid #232a38; } .cw-bar i { width: 28px; height: 28px; border-radius: 50%; background: #1c2230; border: 1px solid #2a3242; } .cw-bar i.red { width: 46px; border-radius: 999px; background: #3a1518; border-color: #5c2126; } .cw-code { font-family: "Geist Mono", monospace; font-size: 13px; line-height: 1.8; color: #d7dde8; } .cw-code span { display: block; white-space: pre; } .cw-code b { color: var(--gold-bright); font-weight: 600; } .cw-cam { position: absolute; right: 14px; bottom: 10px; display: flex; align-items: center; gap: 7px; font-size: 11px; color: #b8c0cf; background: #10131b; border: 1px solid #232a38; border-radius: 999px; padding: 5px 11px 5px 6px; } .cw-cam i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8f7bb8, #5d4a85); } .od-tb i { color: #c88a1f; font-style: normal; } .od-body { padding: 18px 18px 16px; position: relative; } .od-msg { font-size: 14px; line-height: 1.65; color: #3d4350; max-width: 46ch; } .od-btn2 { position: absolute; right: 16px; top: 104px; z-index: 2; font-size: 12px; font-weight: 600; color: oklch(0.15 0.02 84); background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); border-radius: 7px; padding: 6px 13px; opacity: 0; box-shadow: 0 6px 16px -6px oklch(0 0 0 / 0.6); } .cw-flash { position: absolute; inset: 0; background: oklch(0.97 0.03 95); opacity: 0; pointer-events: none; } .od-marq { position: absolute; left: 12px; right: 12px; top: 14px; height: 86px; transform-origin: top left; border: 2px dashed var(--gold-bright); border-radius: 7px; background: oklch(0.8 0.105 84 / 0.10); opacity: 0; transform: scale(0.9); pointer-events: none; } .od-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .od-btns span { font-size: 12.5px; color: #4a5160; border: 1px solid #d5dbe5; padding: 6px 15px; border-radius: 6px; background: #f7f9fc; } .od-btns .pri { background: #e8ecf3; } .od-lift { position: absolute; left: 52px; top: 86px; z-index: 3; pointer-events: none; opacity: 0; } .od-lift .lf-l { display: block; white-space: pre; position: relative; font-family: "Geist Mono", monospace; font-size: 13px; line-height: 1.8; color: #e8edf6; } .od-lift .lf-l b { color: var(--gold-bright); font-weight: 600; } .lf-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; background: var(--gold-bright); vertical-align: -2px; animation: ocCaret 1s steps(1) infinite; } .lf-frame { position: absolute; inset: -46px -18px -42px -18px; z-index: -1; border: 1px solid var(--gold-soft); border-radius: 10px; background: oklch(0.16 0.01 80); box-shadow: 0 20px 50px -14px oklch(0 0 0 / 0.8); opacity: 0; } .lf-head { position: absolute; top: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--text-mut); border-bottom: 1px solid var(--line); font-weight: 400; font-style: normal; } .lf-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .lf-foot { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: #7ee2a0; font-style: normal; } .demo-say { position: relative; height: 40px; margin-top: 16px; overflow: hidden; } .dh-b .ln, .dh-c .ln { opacity: 1; } .dh-q.dh-solo { font-size: clamp(32px, 3.6vw, 48px); } .say { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--text); } .say b { color: var(--gold-bright); font-weight: 700; margin-right: 0.3em; } .rd-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 13px; } .rd-row { display: flex; align-items: center; gap: 14px; } .rl { width: 92px; flex: none; font-size: 12px; color: #8a93a3; } .rv { position: relative; font-size: 13.5px; color: #3d4350; font-weight: 550; } .px { position: absolute; inset: -3px -7px; border-radius: 3px; transform: scaleX(0); transform-origin: left; opacity: 0.97; background: repeating-conic-gradient(#b9c2d1 0% 25%, #8f99a9 0% 50%); background-size: 8px 8px; } .rd-sent { position: absolute; left: 50%; top: 40%; z-index: 3; transform: translate(-50%, -50%) scale(0); display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; white-space: nowrap; background: oklch(0.16 0.01 80); border: 1px solid oklch(0.75 0.14 155 / 0.35); font-size: 14.5px; font-weight: 600; color: var(--text); pointer-events: none; box-shadow: 0 18px 44px -14px oklch(0 0 0 / 0.7); } .rd-sent b { color: #7ee2a0; } .ocr-demo .demo-hook.dh-a { animation: dhOcrA 25s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .demo-hook.dh-b { animation: dhOcrB 25s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .demo-hook.dh-c { animation: dhOcrC 25s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .dh-glow { animation: dhGlow 25s linear infinite; animation-play-state: paused; } .ocr-demo .dh-dim { animation: dhDim 25s linear infinite; animation-play-state: paused; } .ocr-demo .dh-solo { animation: dhSoloTrack 25s linear infinite; animation-play-state: paused; } .ocr-demo .dh-kick { animation: dhKick 25s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .dh-a .w em { animation: dhWordA 25s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-play-state: paused; } .ocr-demo .dh-b .ln { animation: dhLnB 25s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-play-state: paused; } .dh-b .ln:nth-child(2) { animation-delay: 0.09s; } .dh-b .ln:nth-child(3) { animation-delay: 0.18s; } .dh-q .w:nth-of-type(2) em { animation-delay: 0.055s; } .dh-q .w:nth-of-type(3) em { animation-delay: 0.11s; } .dh-q .w:nth-of-type(4) em { animation-delay: 0.165s; } .dh-q .w:nth-of-type(5) em { animation-delay: 0.22s; } .dh-q .w:nth-of-type(6) em { animation-delay: 0.275s; } .dh-q .w:nth-of-type(7) em { animation-delay: 0.33s; } .dh-q .w:nth-of-type(8) em { animation-delay: 0.385s; } .dh-q .w:nth-of-type(9) em { animation-delay: 0.44s; } .dh-q .w:nth-of-type(10) em { animation-delay: 0.495s; } .dh-q .w:nth-of-type(11) em { animation-delay: 0.55s; } .dh-q .w:nth-of-type(12) em { animation-delay: 0.605s; } .ocr-demo .say.s1 { animation: oSay1 9s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .say.s2 { animation: oSay2 9s var(--ease) infinite; animation-play-state: paused; } .ocr-demo .say.s3 { animation: oSay3 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .od-win.call { animation: odWin 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .od-marq { animation: odMarq 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .od-lift { animation: odLift 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .lf-l { animation: lfLine 9s cubic-bezier(0.22, 1, 0.36, 1) infinite, lfGlow 9s linear infinite; animation-play-state: paused; } .od-lift .lf-l:nth-of-type(2) { animation-delay: 0.07s, 0s; } .od-lift .lf-l:nth-of-type(3) { animation-delay: 0.14s, 0s; } .loop-gate .lf-frame { animation: lfFrame 9s var(--ease) infinite; animation-play-state: paused; } .red-demo .demo-hook.dh-a { animation: dhOcrA 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .demo-hook.dh-b { animation: dhOcrB 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .demo-hook.dh-c { animation: dhOcrC 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .dh-glow { animation: dhGlow 22s linear infinite; animation-play-state: paused; } .red-demo .dh-dim { animation: dhDim 22s linear infinite; animation-play-state: paused; } .red-demo .dh-solo { animation: dhSoloTrack 22s linear infinite; animation-play-state: paused; } .red-demo .dh-kick { animation: dhKick 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .dh-a .w em { animation: dhWordA 22s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-play-state: paused; } .red-demo .dh-b .ln { animation: dhLnB 22s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-play-state: paused; } .red-demo .say.s1 { animation: rSay1 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .say.s2 { animation: rSay2 22s var(--ease) infinite; animation-play-state: paused; } .red-demo .say.s3 { animation: rSay3 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate .rd-win { animation: rdWin 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate .rd-sent { animation: rdSent 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate .px.p1 { animation: rdP1 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate .px.p2 { animation: rdP2 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate .px.p3 { animation: rdP3 22s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .od-marq, .loop-gate.play .od-lift, .loop-gate.play .lf-l, .loop-gate.play .lf-frame, .loop-gate.play .rd-sent, .loop-gate.play .px.p1, .loop-gate.play .px.p2, .loop-gate.play .px.p3 { animation-play-state: running; } .loop-gate.play .demo-hook, .loop-gate.play .od-win.call, .loop-gate.play .say, .loop-gate.play .rd-win, .loop-gate.play .dh-glow, .loop-gate.play .dh-kick, .loop-gate.play .w em, .loop-gate.play .dh-b .ln, .loop-gate.play .dh-dim, .loop-gate.play .dh-solo { animation-play-state: running; } @keyframes dhOcrA { 0% { transform: translateX(0) scale(1); } 10.1% { transform: translateX(0) scale(1.1); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25); } 12.2%, 100% { transform: translateX(-114%) scale(1.1) rotate(-2deg); } } @keyframes dhKick { 0% { clip-path: inset(0 50% 0 50% round 999px); letter-spacing: 0.34em; } 1.4%, 100% { clip-path: inset(0 0 0 0 round 999px); letter-spacing: 0.13em; } } @keyframes dhWordA { 0% { transform: translateY(120%) rotate(6deg); } 1.4% { transform: none; } 100% { transform: none; } } @keyframes dhLnB { 0%, 11.8% { transform: translateX(56px); } 14.2% { transform: translateX(0); } 100% { transform: translateX(0); } } @keyframes dhGlow { 0% { opacity: 0; } 1.8% { opacity: 1; } 6.2% { opacity: 0.35; } 10.1% { opacity: 0.35; } 12.2% { opacity: 0; } 13.9% { opacity: 0.9; } 17.6% { opacity: 0.3; } 22% { opacity: 0.3; } 28% { opacity: 0; } 34% { opacity: 1; } 41% { opacity: 0.45; } 41.4%, 100% { opacity: 0; } } @keyframes dhOcrB { 0%, 11.8% { transform: translateX(114%) scale(1); clip-path: inset(-10% -10% -10% -10%); } 13.7% { transform: translateX(0) scale(1); clip-path: inset(-10% -10% -10% -10%); } 22% { transform: translateX(0) scale(1.09); clip-path: inset(-10% -10% -10% -10%); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.3); } 24%, 100% { transform: translateX(0) scale(1.09); clip-path: inset(-10% -10% -10% 104%); } } @keyframes dhOcrC { 0%, 26.4% { opacity: 0; transform: scale(0.96) translateY(6px); filter: blur(8px); } 33.6% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } 41% { opacity: 1; transform: scale(1.06) translateY(0); filter: blur(0); } 41.3%, 100% { opacity: 0; transform: scale(1.06) translateY(0); filter: blur(0); } } @keyframes dhSoloTrack { 0%, 26.4% { letter-spacing: -0.01em; } 41%, 100% { letter-spacing: 0.05em; } } @keyframes dhDim { 0%, 21% { opacity: 0; } 24.5% { opacity: 1; } 41% { opacity: 1; } 41.4%, 100% { opacity: 0; } } @keyframes odWin { 0% { opacity: 0; transform: scale(1); filter: brightness(1); } 3% { opacity: 1; transform: scale(1); filter: brightness(1); } 46% { transform: scale(1); filter: brightness(1); } 54% { transform: scale(0.975); filter: brightness(0.8); } 95% { opacity: 1; transform: scale(0.975); filter: brightness(0.8); } 100% { opacity: 0; transform: scale(0.975); filter: brightness(0.8); } } @keyframes oSay1 { 0%, 3% { transform: translateY(135%); } 5.5% { transform: translateY(0); } 28% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 30.5%, 100% { transform: translateY(-135%); } } @keyframes oSay2 { 0%, 31.5% { transform: translateY(-135%); } 34% { transform: translateY(0); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 52.5%, 100% { transform: translateY(135%); } } @keyframes oSay3 { 0%, 78% { transform: translateX(108%); } 81%, 100% { transform: translateX(0); } } @keyframes odMarq { 0%, 30% { opacity: 1; transform: scale(0, 0); } 31.5% { transform: scale(0.22, 0.3); } 42% { transform: scale(1, 1); } 47% { opacity: 1; transform: scale(1, 1); } 50%, 100% { opacity: 0; transform: scale(1, 1); } } @keyframes odLift { 0%, 46% { opacity: 0; transform: translateY(0) scale(1); } 47% { opacity: 1; transform: translateY(0) scale(1); } 57% { opacity: 1; transform: translateY(-27px) scale(1.05); } 59.5% { opacity: 1; transform: translateY(-24px) scale(1.05); } 95% { opacity: 1; transform: translateY(-24px) scale(1.05); } 100% { opacity: 0; transform: translateY(-24px) scale(1.05); } } @keyframes lfLine { 0%, 47% { transform: translateY(9px); } 57% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes lfGlow { 0%, 46.5% { text-shadow: 0 0 0 oklch(0.8 0.105 84 / 0); } 52% { text-shadow: 0 0 16px oklch(0.8 0.105 84 / 0.55); } 62% { text-shadow: 0 0 7px oklch(0.8 0.105 84 / 0.22); } 100% { text-shadow: 0 0 7px oklch(0.8 0.105 84 / 0.22); } } @keyframes lfFrame { 0%, 58% { opacity: 0; transform: scale(1.05); } 62% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } @keyframes ocCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes rdSent { 0%, 81.5% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 83% { transform: translate(-50%, -50%) scale(1.07); } 84% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes rdWin { 0%, 41.3% { opacity: 0; transform: translateY(0) scale(1) rotate(0deg); } 41.6% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } 78% { opacity: 1; transform: translateY(0) scale(1.03) rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); } 81.5%, 100% { opacity: 1; transform: translateY(-135%) scale(1.03) rotate(-3deg); } } @keyframes rSay1 { 0%, 43% { transform: translateY(135%); } 45% { transform: translateY(0); } 57% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 58.5%, 100% { transform: translateY(-135%); } } @keyframes rSay2 { 0%, 60% { transform: translateY(-135%); } 62% { transform: translateY(0); } 74% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 76%, 100% { transform: translateY(135%); } } @keyframes rSay3 { 0%, 84% { transform: translateX(108%); } 86%, 100% { transform: translateX(0); } } @keyframes rdP1 { 0%, 45% { transform: scaleX(0); } 49% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes rdP2 { 0%, 52% { transform: scaleX(0); } 56% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes rdP3 { 0%, 59% { transform: scaleX(0); } 63% { transform: scaleX(1); } 100% { transform: scaleX(1); } } .rec-film .dh-solo { animation: dhSoloTrack 7s linear infinite; animation-play-state: paused; } .rec-film .rec-stop { animation: rsStop 7s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .demo-hook, .loop-gate.play .dh-glow, .loop-gate.play .dh-dim, .loop-gate.play .dh-solo, .loop-gate.play .dh-kick, .loop-gate.play .w em, .loop-gate.play .dh-b .ln, .loop-gate.play .say { animation-play-state: running; } @keyframes rsC3 { 0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 42.6% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 44.4% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); } 44.7%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } @keyframes rsC2 { 0%, 44.7% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 45.3% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 47.1% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); } 47.4%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } @keyframes rsC1 { 0%, 47.4% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 48% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 49.8% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); } 50.1%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } @keyframes kSay1 { 0%, 43% { transform: translateY(135%); } 45% { transform: translateY(0); } 51% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 52.5%, 100% { transform: translateY(-135%); } } @keyframes kSay2 { 0%, 58% { transform: translateY(-135%); } 60% { transform: translateY(0); } 70.5% { transform: translateY(0); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); } 72%, 100% { transform: translateY(135%); } } @keyframes kSay3 { 0%, 88.5% { transform: translateX(108%); } 90.5%, 100% { transform: translateX(0); } } .vtl-film .vtl-play { animation: vgPlay 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .tool-clip:nth-child(1) { animation: vgT 14s linear infinite; animation-play-state: paused; } .vtl-film .tool-clip:nth-child(2) { animation: vgA 14s linear infinite, arOut 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .tool-clip:nth-child(3) { animation: vgB 14s linear infinite, blRipple 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vseg.s1, .vtl-film .aseg.a1 { animation: vsegS1 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vseg.s2, .vtl-film .aseg.a2 { animation: vsegOut 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vseg.s3, .vtl-film .aseg.a3 { animation: vsegS3 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vx-cut.c3 { animation: vxWeld 14s linear infinite; animation-play-state: paused; } .vtl-film .vg.g1 { animation: vgG1 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vg.g2 { animation: vgG2 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vg.g3 { animation: vgG3 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vtl { animation: vtlIn 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .playhead { animation: vxPh 14s linear infinite; animation-play-state: paused; } .vtl-film .vx-cut.c1 { animation: vxCut 14s var(--ease) infinite; animation-play-state: paused; } .vtl-film .vx-cut.c2 { animation: vxCut 14s var(--ease) infinite; animation-delay: 0.22s; animation-play-state: paused; } .vtl-film .vx-flash { animation: vxFlash 14s linear infinite; animation-play-state: paused; } .vtl-film .vx-out { animation: vxOut 14s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .vtl, .loop-gate.play .playhead, .loop-gate.play .vx-cut, .loop-gate.play .vseg, .loop-gate.play .aseg, .loop-gate.play .vx-flash, .loop-gate.play .vx-out, .loop-gate.play .vtl-play, .loop-gate.play .tool-clip, .loop-gate.play .vg, .loop-gate.play .demo-hook, .loop-gate.play .dh-glow, .loop-gate.play .dh-dim, .loop-gate.play .dh-solo, .loop-gate.play .dh-kick, .loop-gate.play .w em, .loop-gate.play .dh-b .ln, .loop-gate.play .say { animation-play-state: running; } @keyframes vtlIn { 0% { transform: scale(1); filter: brightness(1); } 76% { transform: scale(1); filter: brightness(1); } 78% { transform: scale(0.985); filter: brightness(0.55); } 100% { transform: scale(0.985); filter: brightness(0.55); } } @keyframes vgPlay { 0% { transform: scale(1); } 0.7% { transform: scale(0.88); } 1.6% { transform: scale(1); } 52.5% { transform: scale(1); } 53.2% { transform: scale(0.88); } 54.1% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes vgT { 0%, 3.5% { filter: brightness(1); } 5.5% { filter: brightness(1.6); } 8% { filter: brightness(1); } 57% { filter: brightness(1); } 59% { filter: brightness(1.6); } 62% { filter: brightness(1); } 100% { filter: brightness(1); } } @keyframes vgB { 0%, 22.5% { filter: brightness(1); } 24.5% { filter: brightness(1.6); } 27.5% { filter: brightness(1); } 67% { filter: brightness(1); } 69% { filter: brightness(1.6); } 71.5% { filter: brightness(1); } 100% { filter: brightness(1); } } @keyframes vxPh { 0% { left: 3%; } 28% { left: 94%; } 49.9% { left: 94%; } 50.1% { left: 3%; } 54% { left: 3%; } 74% { left: 65%; } 100% { left: 65%; } } @keyframes vsegS1 { 0%, 29.5% { border-radius: 5px 0 0 5px; } 31% { border-radius: 5px; } 48.5% { border-radius: 5px; } 50.5%, 100% { border-radius: 5px 0 0 5px; } } @keyframes vxWeld { 0%, 49.8% { opacity: 0; transform: scaleY(1); } 50.8% { opacity: 1; transform: scaleY(1); } 52.5%, 100% { opacity: 0; transform: scaleY(1); } } @keyframes vgG1 { 0%, 9.5% { opacity: 0; transform: translateX(-50%) translateY(6px); } 11% { opacity: 1; transform: translateX(-50%) translateY(0); } 28.5% { opacity: 1; transform: translateX(-50%) translateY(0); } 30%, 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); } } @keyframes vgG2 { 0%, 30.5% { opacity: 0; transform: translateX(-50%) translateY(6px); } 32% { opacity: 1; transform: translateX(-50%) translateY(0); } 40.5% { opacity: 1; transform: translateX(-50%) translateY(0); } 42%, 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); } } @keyframes vgG3 { 0%, 42.5% { opacity: 0; transform: translateX(-50%) translateY(6px); } 44% { opacity: 1; transform: translateX(-50%) translateY(0); } 52.5% { opacity: 1; transform: translateX(-50%) translateY(0); } 54%, 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); } } @keyframes vsegOut { 0%, 29.5% { border-radius: 0; transform: translateY(0) scale(1, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 31% { border-radius: 5px; transform: translateY(0) scale(0.96, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 33.5% { border-radius: 5px; transform: translateY(0) scale(0.96, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 35.5% { border-radius: 5px; transform: translateY(0) scale(0.96, 1); opacity: 1; filter: grayscale(0.9) brightness(0.55); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0.9); } 37.8% { border-radius: 5px; transform: translateY(0) scale(0.96, 1); opacity: 1; filter: grayscale(0.9) brightness(0.55); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0.9); } 40.5%, 100% { border-radius: 5px; transform: translateY(30px) scale(0.88); opacity: 0; filter: grayscale(0.9) brightness(0.4); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0); } } @keyframes vsegS3 { 0%, 29.5% { left: 65.61%; border-radius: 0 5px 5px 0; } 31% { left: 66.36%; border-radius: 5px; } 41% { left: 66.36%; border-radius: 5px; } 45% { left: 33.63%; border-radius: 5px; } 48.5% { left: 33.63%; border-radius: 5px; } 50.5% { left: 33.33%; border-radius: 0 5px 5px 0; } 100% { left: 33.33%; border-radius: 0 5px 5px 0; } } @keyframes arOut { 0%, 29.5% { transform: translateY(0) scale(1, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 31% { transform: translateY(0) scale(0.96, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 34.5% { transform: translateY(0) scale(0.96, 1); opacity: 1; filter: none; box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0); } 35.5% { transform: translateY(0) scale(0.96, 1); opacity: 1; filter: grayscale(0.9) brightness(0.55); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0.9); } 37.8% { transform: translateY(0) scale(0.96, 1); opacity: 1; filter: grayscale(0.9) brightness(0.55); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0.9); } 40.5%, 100% { transform: translateY(26px) scale(0.88); opacity: 0; filter: grayscale(0.9) brightness(0.4); box-shadow: 0 0 0 2px oklch(0.62 0.2 25 / 0); } } @keyframes blRipple { 0%, 29.5% { left: 65.66%; } 31% { left: 66.36%; } 41% { left: 66.36%; } 45% { left: 33.63%; } 48.5% { left: 33.63%; } 50.5% { left: 33.33%; } 100% { left: 33.33%; } } @keyframes vgA { 0%, 12.5% { filter: brightness(1); } 14.5% { filter: brightness(1.6); } 17.5% { filter: brightness(1); } 100% { filter: brightness(1); } } @keyframes vxCut { 0%, 30% { transform: scaleY(0); opacity: 1; } 31.2% { transform: scaleY(1); opacity: 1; } 37% { transform: scaleY(1); opacity: 1; } 38.5%, 100% { opacity: 0; transform: scaleY(1); } } @keyframes vxFlash { 0%, 38.5% { opacity: 0; } 40% { opacity: 1; } 42%, 100% { opacity: 0; } } @keyframes vxOut { 0%, 78% { transform: translate(-50%, 300px); } 81% { transform: translate(-50%, -50%); } 100% { transform: translate(-50%, -50%); } } .ed-film { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-hi); background: oklch(0.13 0.008 80); box-shadow: 0 24px 60px -24px oklch(0 0 0 / 0.7); } .ed-body { display: flex; align-items: stretch; } .ed-rail { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: oklch(0.145 0.009 80); border-right: 1px solid var(--line); } .ed-div { height: 1px; background: var(--line); margin: 3px 3px; } .etab { position: relative; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: none; background: transparent; color: var(--text-soft); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .etab svg { width: 15px; height: 15px; } .etab:hover { background: oklch(1 0 0 / 0.06); color: var(--text); } .etab.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.18 0.03 84); } .ed-wtb { height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 13px; background: oklch(0.15 0.01 80); border-bottom: 1px solid var(--line); } .ed-logo { width: 15px; height: 15px; } .ed-wt { font-size: 12px; font-weight: 600; color: var(--text-soft); } .ed-wdoc { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--text-mut); background: oklch(0.12 0.008 80); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; } /* ⚠️ deliberately NOT position:relative. The cursor is absolutely placed from coordinates measured in .ed-film space; a positioned .ed-canvas becomes the containing block and every one of them comes up short by the rail's width and the titlebar's height. The frames caught that, reading the CSS did not. */ .ed-canvas { flex: 1; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px); background-size: 18px 18px; } /* ── ANNOTATE: a TOOL TOUR, one tool at a time ────────────────────── He asked for exactly this shape: "it should be one by one, it auto does the animation for one and then it moves on to the next, and the user can choose which to watch again". The previous build ran three acts as one continuous film, and stringing nine moves and eight dwells together is what made it read as jerky and robotic - every stop between moves is a machine stopping. So each tool now gets its own short demo on the SAME capture, and each demo is exactly TWO movements: reach for the start, then one drag. One stop. Restarting is free and needs no JS: a mark is display:none until its tool is current, and an element that is not displayed has no running animation, so showing it starts from zero. The cursor restarts the same way - its animation-NAME changes with data-t. The driver only sets one attribute. Every rail button has a demo, so none of them is inert. Coordinates are MEASURED from the built layout by scratchpad/tour2.py. */ .an-frame { position: relative; width: 88%; } /* the capture's own content. These live INSIDE the generated block on purpose: the generator replaces the whole annotate region, and leaving them outside is how a splice once wiped the layout and left the capture a pile of ghost text. */ .app-tb { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 11px; background: #e3e7ef; } .adot { width: 9px; height: 9px; border-radius: 50%; } .adot.r { background: #ff5f57; } .adot.y { background: #febc2e; } .adot.g { background: #28c840; } .app-title { margin-left: 6px; font-size: 11px; font-weight: 600; color: #5b6474; } .an-shot > .app-tb { border-radius: 7px 7px 0 0; } .an-body { padding: 11px 15px 12px; } .an-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 10.5px; color: #2a2f3a; } .an-row label { flex: none; width: 58px; font-size: 9.5px; font-weight: 600; color: #6b7484; } .an-bad { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #c0392b; } .an-bad i { width: 6px; height: 6px; border-radius: 50%; background: #e74c3c; } .an-log { margin-top: 10px; padding-top: 9px; border-top: 1px solid #dde2ea; font-family: "Geist Mono", ui-monospace, monospace; font-size: 9px; color: #4b5261; } .an-ll { display: flex; gap: 9px; padding: 2.5px 0; white-space: nowrap; } .an-ll i { font-style: normal; color: #a4adbb; } .an-tgt { font-style: normal; position: relative; } .an-shot { position: relative; width: 100%; aspect-ratio: 2.08; border-radius: 7px; overflow: hidden; background: #eef1f5; z-index: 1; box-shadow: 0 18px 44px -18px oklch(0 0 0 / 0.6); transition: transform 0.5s cubic-bezier(0.33, 0, 0.2, 1); } /* ⚠️ z-index AUTO, deliberately. With a z-index here this layer becomes a stacking context and nothing inside it can ever paint behind the capture's own text - which is what made the text highlight a flat bar ON TOP of the words instead of a fill behind them. Positioned children still paint above in-flow content, so every other mark is unaffected. */ .an-marks { position: absolute; inset: 0; pointer-events: none; } .mk { display: none; position: absolute; } svg.mk { inset: 0; width: 100%; height: 100%; overflow: visible; } .mkp { fill: none; stroke: #D4A64A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 1px 1.4px oklch(0 0 0 / 0.28)); } .mkh { fill: #D4A64A; stroke: #D4A64A; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 1px 1.4px oklch(0 0 0 / 0.28)); } .mk-rect, .mk-ell { border: 2.6px solid #D4A64A; border-radius: 3px; } .mk-ell { border-radius: 50%; } .mk-hil .mkp { stroke: #D4A64A; opacity: 0.42; stroke-width: 13; filter: none; } .mk-thl { border-radius: 2.5px; width: var(--w); height: var(--h); z-index: -1; background: color-mix(in srgb, #D4A64A 46%, transparent); transform-origin: left center; transform: scaleX(0); } .mk-txt { display: none; align-items: center; height: 17px; overflow: hidden; white-space: nowrap; } .mk-txt b { font-weight: inherit; } .mk-txt em { font-style: normal; font-size: 11px; font-weight: 700; color: #D4A64A; } .mk-txt i { width: 1.5px; height: 12px; margin-left: 1px; background: #D4A64A; } .mk-stp { display: none; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #f2cd82, #D4A64A 52%, #b07f28); box-shadow: 0 0 0 2px #14110b, 0 0 9px 2px oklch(0.78 0.14 85 / 0.32), 0 2px 6px oklch(0 0 0 / 0.55); color: #2a2208; font-size: 11px; font-weight: 800; line-height: 1; font-family: Geist, system-ui, sans-serif; } .mk-pix { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAJCAYAAADZ9rdLAAABKElEQVR4AbyPPUvDYBDH/2bMkI9gumn1C0i1oRYyioMoioODLgo6iksHu1RBdJCKQkEUS8WXwZcPUKgEF5UiiW9LXSJ1EBPIEFpoc0/pQfemx3P3P+7u+XEn/TleIyyXEKL1Dl56MGDbP+KWavVXqGm9CfV9H0/PLyiXX+F5HizrHY7jYmp6XvQpFIslEnbefEzTkc0ewTRbsI/PL8zOLWB4KArDeMTu3j6igwPIbO1gcWkF6xspyLIMRVHEXKXyzdB2wvD0Zgq1eh26nsTE5AzIzgsnJDg4zOE/2JJgfZKEWGwkqDeCK224rguai0TUoNb5GJ4c13B9mRfdu5sLaPFRkVM4O81hO5OmFIX8MdZWl3F/ewVV7ec/1Ewk4iTsDOdKF5NQ4U0AAAD//wfI7VIAAAAGSURBVAMA9QSzCMHgUG4AAAAASUVORK5CYII=') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; border-radius: 2px; } .mk-blr { backdrop-filter: blur(3.5px); border-radius: 2px; } .mk-spt { border-radius: 3px; box-shadow: 0 0 0 9999px oklch(0.15 0.01 80 / 0.62); } .mk-bg { position: absolute; inset: -19px; border-radius: 15px; opacity: 0; background: linear-gradient(135deg, oklch(0.42 0.13 300), oklch(0.55 0.15 320) 45%, oklch(0.76 0.13 85)); box-shadow: 0 26px 60px -26px oklch(0 0 0 / 0.7); } .an[data-t="bg"] .an-shot { transform: scale(0.9); } .mk-sel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .mk-sel .mkp { stroke-dashoffset: 0; } .mk-sel .mkh { opacity: 1; } .mk-sel { inset: 0; width: 100%; height: 100%; } .mk-sel i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--gold-bright); border: 1.5px solid oklch(0.18 0.03 84); opacity: 0; } .an-cur { position: absolute; z-index: 12; width: 17px; height: 17px; opacity: 0; filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.5)); } .an-cur svg { width: 100%; height: 100%; display: block; } .an-shot, .an-shot *, .an-cur { pointer-events: none; } .etab { cursor: pointer; } .etab.on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 2px; height: 2px; border-radius: 2px; background: oklch(0.18 0.03 84 / 0.5); transform-origin: left; animation: tabProg 3.4s linear forwards; } @keyframes tabProg { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mkOn { 0%, 28.0% { opacity: 0; } 28.6%, 100% { opacity: 1; } } @keyframes mkGrow { 0%, 28.0% { width: 0; height: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0%, 100% { width: var(--w); height: var(--h); } } @keyframes mkDraw { 0%, 28.0% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0%, 100% { stroke-dashoffset: 0; } } @keyframes mkDrawLin { 0%, 28.0% { stroke-dashoffset: 100; } 56.0%, 100% { stroke-dashoffset: 0; } } @keyframes mkHead { 0%, 54.0% { opacity: 0; } 60.0%, 100% { opacity: 1; } } @keyframes mkThl { 0%, 28.0% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { transform: scaleX(0.769); } 63.0%, 100% { transform: scaleX(1); } } @keyframes mkType { 0%, 30.0% { width: 0; } 34.0% { width: 9.3px; } 38.0% { width: 15.9px; } 42.0% { width: 22.0px; } 46.0% { width: 24.6px; } 50.0% { width: 31.7px; } 54.0% { width: 39.3px; } 58.0% { width: 45.6px; } 62.0%, 100% { width: 51.7px; } } @keyframes mkCaret { 0%, 30.0% { left: 0; } 34.0% { left: 9.3px; } 38.0% { left: 15.9px; } 42.0% { left: 22.0px; } 46.0% { left: 24.6px; } 50.0% { left: 31.7px; } 54.0% { left: 39.3px; } 58.0% { left: 45.6px; } 62.0%, 100% { left: 51.7px; } } @keyframes mkPop { 0%, 28.0% { transform: scale(0); } 37.0% { transform: scale(1.14); } 43.0%, 100% { transform: scale(1); } } @keyframes mkFade { 0%, 24.0% { opacity: 0; } 56.0%, 100% { opacity: 1; } } @keyframes selHand { 0%, 20.0% { opacity: 0; } 26.0%, 100% { opacity: 1; } } .mk-rect { left: 77.0px; top: 80.6px; --w: 56.4px; --h: 24.8px; } .mk-ell { left: 77.0px; top: 80.6px; --w: 56.4px; --h: 24.8px; } .mk-line { left: 78.0px; top: 57.8px; --w: 61.2px; --h: 22.8px; } .mk-pen { left: 64.2px; top: 141.3px; --w: 124.8px; --h: 18.4px; } .mk-hil { left: 64.2px; top: 141.3px; --w: 124.8px; --h: 18.4px; } .mk-thl { left: 64.7px; top: 141.8px; --w: 123.8px; --h: 17.4px; } .mk-txt { left: 141.4px; top: 83.6px; --w: 78.0px; height: 17.0px; } .mk-pix { left: 78.0px; top: 34.0px; --w: 57.4px; --h: 22.8px; } .mk-blr { left: 78.0px; top: 34.0px; --w: 57.4px; --h: 22.8px; } .mk-spt { left: 11.0px; top: 109.4px; --w: 396.0px; --h: 72.2px; } .mk-stp { width: 17px; height: 17px; } .mk-stp.s1 { left: 58.5px; top: 36.9px; } @keyframes stpPop1 { 0%, 28.0% { transform: scale(0); } 31.5% { transform: scale(1.14); } 34.5%, 100% { transform: scale(1); } } .an[data-t="stp"] .mk-stp.s1 { display: grid; animation: stpPop1 3.4s cubic-bezier(0.4, 0, 0.25, 1) both; } .mk-stp.s2 { left: 58.5px; top: 60.7px; } @keyframes stpPop2 { 0%, 37.3% { transform: scale(0); } 40.8% { transform: scale(1.14); } 43.8%, 100% { transform: scale(1); } } .an[data-t="stp"] .mk-stp.s2 { display: grid; animation: stpPop2 3.4s cubic-bezier(0.4, 0, 0.25, 1) both; } .mk-stp.s3 { left: 58.5px; top: 84.5px; } @keyframes stpPop3 { 0%, 46.7% { transform: scale(0); } 50.2% { transform: scale(1.14); } 53.2%, 100% { transform: scale(1); } } .an[data-t="stp"] .mk-stp.s3 { display: grid; animation: stpPop3 3.4s cubic-bezier(0.4, 0, 0.25, 1) both; } .mk-car { top: 86.1px; margin-left: 141.4px; width: 1.5px; height: 12px; background: #D4A64A; } .an[data-t="txt"] .mk-car { display: block; animation: mkCaret 3.4s step-end both, mkOn 3.4s linear both; } .mk-sel .h1 { left: 239.4px; top: 72.6px; } .mk-sel .h2 { left: 135.4px; top: 93.0px; } .an[data-t="sel"] .mk-sel { display: block; animation: selMove 3.4s cubic-bezier(0.4, 0, 0.25, 1) both; } .an[data-t="rect"] .mk-rect { display: block; animation: mkGrow 3.4s linear both, mkOn 3.4s linear both; } .an[data-t="ell"] .mk-ell { display: block; animation: mkGrow 3.4s linear both, mkOn 3.4s linear both; } .an[data-t="line"] .mk-line { display: block; } .an[data-t="arw"] .mk-arw { display: block; } .an[data-t="carw"] .mk-carw { display: block; } .an[data-t="pen"] .mk-pen { display: block; } .an[data-t="hil"] .mk-hil { display: block; } .an[data-t="thl"] .mk-thl { display: block; animation: mkThl 3.4s linear both; } .an[data-t="txt"] .mk-txt { display: flex; animation: mkType 3.4s step-end both; } .an[data-t="pix"] .mk-pix { display: block; animation: mkGrow 3.4s linear both, mkOn 3.4s linear both; } .an[data-t="blr"] .mk-blr { display: block; animation: mkGrow 3.4s linear both, mkOn 3.4s linear both; } .an[data-t="spt"] .mk-spt { display: block; animation: mkGrow 3.4s linear both, mkOn 3.4s linear both; } .an[data-t="bg"] .mk-bg { display: block; animation: mkFade 3.4s cubic-bezier(0.33, 0, 0.2, 1) both; } .an[data-t="line"] .mk-line .mkp { animation: mkDraw 3.4s linear both; } .an[data-t="arw"] .mk-arw .mkp { animation: mkDraw 3.4s linear both; } .an[data-t="pen"] .mk-pen .mkp { animation: mkDraw 3.4s linear both; } .an[data-t="hil"] .mk-hil .mkp { animation: mkDraw 3.4s linear both; } .an[data-t="carw"] .mk-carw .mkp { animation: mkDrawLin 3.4s linear both; } .an[data-t="arw"] .mk-arw .mkh { animation: mkHead 3.4s linear both; } .an[data-t="carw"] .mk-carw .mkh { animation: mkHead 3.4s linear both; } .an[data-t="sel"] .mk-sel i { animation: selHand 3.4s linear both; } @keyframes selMove { 0%, 28.0% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0%, 100% { transform: translate(44px, 28px); } } @keyframes curSel { 0%, 7.0% { left: 61.00%; top: 56.28%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 61.00%; top: 56.28%; opacity: 1; transform: scale(1); } 24.0% { left: 49.93%; top: 49.17%; opacity: 1; transform: scale(1); } 28.0% { left: 49.93%; top: 49.17%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 58.33%; top: 54.41%; opacity: 1; transform: scale(0.85); } 61.0% { left: 58.33%; top: 54.41%; opacity: 1; transform: scale(1); } 62.5% { left: 58.33%; top: 54.41%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 73.0%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="sel"] .an-cur { animation: curSel 3.4s linear both; } @keyframes curRect { 0%, 7.0% { left: 39.79%; top: 56.29%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 39.79%; top: 56.29%; opacity: 1; transform: scale(1); } 24.0% { left: 28.72%; top: 49.18%; opacity: 1; transform: scale(1); } 28.0% { left: 28.72%; top: 49.18%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 39.48%; top: 53.82%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.48%; top: 53.82%; opacity: 1; transform: scale(1); } 62.5% { left: 39.48%; top: 53.82%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="rect"] .an-cur { animation: curRect 3.4s linear both; } @keyframes curEll { 0%, 7.0% { left: 39.79%; top: 56.29%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 39.79%; top: 56.29%; opacity: 1; transform: scale(1); } 24.0% { left: 28.72%; top: 49.18%; opacity: 1; transform: scale(1); } 28.0% { left: 28.72%; top: 49.18%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 39.48%; top: 53.82%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.48%; top: 53.82%; opacity: 1; transform: scale(1); } 62.5% { left: 39.48%; top: 53.82%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="ell"] .an-cur { animation: curEll 3.4s linear both; } @keyframes curLine { 0%, 7.0% { left: 39.98%; top: 54.16%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 39.98%; top: 54.16%; opacity: 1; transform: scale(1); } 24.0% { left: 28.91%; top: 47.04%; opacity: 1; transform: scale(1); } 28.0% { left: 28.91%; top: 47.04%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 40.59%; top: 47.04%; opacity: 1; transform: scale(0.85); } 61.0% { left: 40.59%; top: 47.04%; opacity: 1; transform: scale(1); } 62.5% { left: 40.59%; top: 47.04%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="line"] .an-cur { animation: curLine 3.4s linear both; } @keyframes curArw { 0%, 7.0% { left: 70.78%; top: 54.79%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 70.78%; top: 54.79%; opacity: 1; transform: scale(1); } 24.0% { left: 59.71%; top: 47.68%; opacity: 1; transform: scale(1); } 28.0% { left: 59.71%; top: 47.68%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 39.87%; top: 51.50%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.87%; top: 51.50%; opacity: 1; transform: scale(1); } 62.5% { left: 39.87%; top: 51.50%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="arw"] .an-cur { animation: curArw 3.4s linear both; } @keyframes curCarw { 0%, 7.0% { left: 68.49%; top: 49.81%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 68.49%; top: 49.81%; opacity: 1; transform: scale(1); } 24.0% { left: 57.42%; top: 42.70%; opacity: 1; transform: scale(1); } 28.0% { left: 57.42%; top: 42.70%; opacity: 1; transform: scale(0.85); animation-timing-function: linear; } 31.5% { left: 54.80%; top: 42.87%; opacity: 1; transform: scale(0.85); animation-timing-function: linear; } 35.0% { left: 52.25%; top: 43.25%; opacity: 1; transform: scale(0.85); } 38.5% { left: 49.74%; top: 43.88%; opacity: 1; transform: scale(0.85); } 42.0% { left: 47.36%; top: 44.79%; opacity: 1; transform: scale(0.85); } 45.5% { left: 45.10%; top: 46.02%; opacity: 1; transform: scale(0.85); } 49.0% { left: 43.07%; top: 47.57%; opacity: 1; transform: scale(0.85); } 52.5% { left: 41.32%; top: 49.41%; opacity: 1; transform: scale(0.85); } 56.0% { left: 39.87%; top: 51.50%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.87%; top: 51.50%; opacity: 1; transform: scale(1); } 62.5% { left: 39.87%; top: 51.50%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="carw"] .an-cur { animation: curCarw 3.4s linear both; } @keyframes curPen { 0%, 7.0% { left: 37.73%; top: 71.29%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 37.73%; top: 71.29%; opacity: 1; transform: scale(1); } 24.0% { left: 26.66%; top: 64.18%; opacity: 1; transform: scale(1); } 28.0% { left: 26.66%; top: 64.18%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 48.42%; top: 63.80%; opacity: 1; transform: scale(0.85); } 61.0% { left: 48.42%; top: 63.80%; opacity: 1; transform: scale(1); } 62.5% { left: 48.42%; top: 63.80%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 74.2%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="pen"] .an-cur { animation: curPen 3.4s linear both; } @keyframes curHil { 0%, 7.0% { left: 37.92%; top: 69.38%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 37.92%; top: 69.38%; opacity: 1; transform: scale(1); } 24.0% { left: 26.85%; top: 62.27%; opacity: 1; transform: scale(1); } 28.0% { left: 26.85%; top: 62.27%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 49.52%; top: 62.27%; opacity: 1; transform: scale(0.85); } 61.0% { left: 49.52%; top: 62.27%; opacity: 1; transform: scale(1); } 62.5% { left: 49.52%; top: 62.27%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 74.1%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="hil"] .an-cur { animation: curHil 3.4s linear both; } @keyframes curThl { 0%, 7.0% { left: 38.11%; top: 69.38%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 38.11%; top: 69.38%; opacity: 1; transform: scale(1); } 24.0% { left: 27.04%; top: 62.27%; opacity: 1; transform: scale(1); } 28.0% { left: 27.04%; top: 62.27%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 44.54%; top: 62.27%; opacity: 1; transform: scale(0.85); } 61.0% { left: 44.54%; top: 62.27%; opacity: 1; transform: scale(1); } 62.5% { left: 44.54%; top: 62.27%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 75.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="thl"] .an-cur { animation: curThl 3.4s linear both; } @keyframes curTxt { 0%, 7.0% { left: 53.23%; top: 58.45%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 53.23%; top: 58.45%; opacity: 1; transform: scale(1); } 24.0% { left: 42.16%; top: 51.33%; opacity: 1; transform: scale(1); } 28.0% { left: 42.16%; top: 51.33%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 42.16%; top: 51.33%; opacity: 1; transform: scale(0.85); } 61.0% { left: 42.16%; top: 51.33%; opacity: 1; transform: scale(1); } 62.5% { left: 42.16%; top: 51.33%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="txt"] .an-cur { animation: curTxt 3.4s linear both; } @keyframes curStp { 0%, 7.0% { left: 37.88%; top: 49.70%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 37.88%; top: 49.70%; opacity: 1; transform: scale(1); } 24.0% { left: 26.81%; top: 42.58%; opacity: 1; transform: scale(1); } 28.0% { left: 26.81%; top: 42.58%; opacity: 1; transform: scale(0.85); animation-timing-function: linear; } 42.0% { left: 26.81%; top: 47.04%; opacity: 1; transform: scale(0.85); animation-timing-function: linear; } 56.0% { left: 26.81%; top: 51.50%; opacity: 1; transform: scale(0.85); } 61.0% { left: 26.81%; top: 51.50%; opacity: 1; transform: scale(1); } 62.5% { left: 26.81%; top: 51.50%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="stp"] .an-cur { animation: curStp 3.4s linear both; } @keyframes curPix { 0%, 7.0% { left: 39.98%; top: 47.57%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 39.98%; top: 47.57%; opacity: 1; transform: scale(1); } 24.0% { left: 28.91%; top: 40.45%; opacity: 1; transform: scale(1); } 28.0% { left: 28.91%; top: 40.45%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 39.87%; top: 44.72%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.87%; top: 44.72%; opacity: 1; transform: scale(1); } 62.5% { left: 39.87%; top: 44.72%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="pix"] .an-cur { animation: curPix 3.4s linear both; } @keyframes curBlr { 0%, 7.0% { left: 39.98%; top: 47.57%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 39.98%; top: 47.57%; opacity: 1; transform: scale(1); } 24.0% { left: 28.91%; top: 40.45%; opacity: 1; transform: scale(1); } 28.0% { left: 28.91%; top: 40.45%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 39.87%; top: 44.72%; opacity: 1; transform: scale(0.85); } 61.0% { left: 39.87%; top: 44.72%; opacity: 1; transform: scale(1); } 62.5% { left: 39.87%; top: 44.72%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 77.5%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="blr"] .an-cur { animation: curBlr 3.4s linear both; } @keyframes curSpt { 0%, 7.0% { left: 27.19%; top: 61.69%; opacity: 0; transform: scale(1); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 9.0% { left: 27.19%; top: 61.69%; opacity: 1; transform: scale(1); } 24.0% { left: 16.13%; top: 54.57%; opacity: 1; transform: scale(1); } 28.0% { left: 16.13%; top: 54.57%; opacity: 1; transform: scale(0.85); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } 56.0% { left: 91.70%; top: 68.09%; opacity: 1; transform: scale(0.85); } 61.0% { left: 91.70%; top: 68.09%; opacity: 1; transform: scale(1); } 62.5% { left: 91.70%; top: 68.09%; opacity: 1; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } 65.6%, 100% { left: 85.82%; top: 76.59%; opacity: 1; } } .an[data-t="spt"] .an-cur { animation: curSpt 3.4s linear both; } .an[data-t="bg"] .an-cur { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { .an-cur { display: none; } .mk, .mkp, .mkh, .etab.on::after { animation: none !important; } .mk-rect, .mk-ell, .mk-pix, .mk-blr, .mk-spt { width: var(--w); height: var(--h); } .mkp { stroke-dashoffset: 0; } .mkh, .mk-bg { opacity: 1; } .mk-thl { transform: scaleX(1); } .mk-txt { width: var(--w); } .mk-stp { transform: scale(1); } .mk-sel i { opacity: 1; } } /* ANNOTATE-GENERATED-END */ .cap-modes { margin-top: 26px; border-top: 1px solid var(--line); } .cm { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); } .cm b { display: block; font-size: 14px; font-weight: 650; color: var(--text); } .cm i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-mut); margin-top: 2px; } .cm .keys { flex: none; } .cap-note { margin-top: 16px; font-size: 12.5px; color: var(--text-mut); } .cap-film { position: relative; overflow: hidden; border-radius: 16px; padding: 14px; border: 1px solid var(--line-hi); background-image: radial-gradient(70% 60% at 50% 34%, oklch(0.8 0.105 84 / 0.07), transparent), radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: cover, 20px 20px; background-color: oklch(0.10 0.006 80); box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.7); } .cf-desk { position: relative; max-width: 520px; height: 408px; margin: 0 auto; } .cf-mail { position: absolute; left: 258px; top: 26px; width: 232px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px -18px oklch(0 0 0 / 0.65); padding-bottom: 42px; } .cf-mtb { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #2b3a55; color: #fff; font-size: 9.5px; font-weight: 600; } .cf-mwc { display: flex; gap: 8px; color: oklch(1 0 0 / 0.65); font-size: 8px; } .cf-mwc i { font-style: normal; } .cf-mrow { display: flex; gap: 7px; padding: 5px 12px; border-bottom: 1px solid #e2e7ef; font-size: 9.5px; color: #2a2f3a; } .cf-mrow label { flex: none; width: 38px; color: #8a93a3; font-weight: 600; } .cf-mline { margin: 0; padding: 2px 12px; font-size: 9.5px; line-height: 1.5; color: #3d4350; } .cf-mline:first-of-type { padding-top: 8px; } .cf-att { position: absolute; left: 12px; bottom: 11px; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #d5dbe5; border-radius: 6px; padding: 3px 8px; font-family: "Geist Mono", monospace; font-size: 8.5px; color: #3d4350; transform: scale(0); transform-origin: left center; } .cf-att::before { content: ""; width: 8px; height: 10px; border-radius: 2px; background: #d9a441; flex: none; } .cf-send { position: absolute; right: 12px; bottom: 9px; font-size: 9.5px; font-weight: 700; color: #fff; background: #3e8ef7; border-radius: 6px; padding: 3px 12px; } .cf-err { position: absolute; left: 36px; top: 96px; width: 206px; height: 112px; border-radius: 8px; overflow: hidden; background: #f2f4f8; box-shadow: 0 18px 44px -18px oklch(0 0 0 / 0.65); } .cf-ebody { display: flex; gap: 9px; padding: 12px 13px 0; } .cf-eic { width: 20px; height: 20px; border-radius: 50%; background: #fbe3e3; color: #c53030; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; } .cf-ebody b { display: block; font-size: 11px; color: #2a2f3a; } .cf-ebody i { display: block; font-style: normal; font-size: 9.5px; color: #6b7484; margin-top: 1px; } .cf-retry { position: absolute; right: 12px; bottom: 10px; font-size: 9.5px; font-weight: 700; color: #fff; background: #3e8ef7; border-radius: 6px; padding: 3px 10px; } .cf-marq { position: absolute; left: 28px; top: 88px; width: 222px; height: 128px; z-index: 4; border: 2px dashed var(--gold); border-radius: 5px; background: oklch(0.8 0.105 84 / 0.08); opacity: 0; clip-path: inset(0 100% 100% 0); } .cf-flash { position: absolute; left: 28px; top: 88px; width: 222px; height: 128px; z-index: 4; border-radius: 6px; background: #fff; opacity: 0; } .cf-card { position: absolute; left: 22px; bottom: 20px; width: 176px; height: 116px; border-radius: 10px; overflow: hidden; background: #eef1f5; border: 1px solid var(--line-hi); z-index: 5; box-shadow: 0 14px 34px -12px oklch(0 0 0 / 0.6); opacity: 0; transform: translate(0, 46px) scale(0.92); } .cf-thumb { position: absolute; inset: 0; } .cft-tb { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #e0e5ee; display: flex; align-items: center; gap: 3px; padding: 0 6px; } .cft-tb i { width: 4px; height: 4px; border-radius: 50%; } .cft-tb i:nth-child(1) { background: #ff5f57; } .cft-tb i:nth-child(2) { background: #febc2e; } .cft-tb i:nth-child(3) { background: #28c840; } .cft-ic { position: absolute; left: 12px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: #fbe3e3; color: #c53030; font-size: 10px; font-weight: 800; display: grid; place-items: center; } .cft-b1, .cft-b2 { position: absolute; left: 38px; border-radius: 3px; background: #c9d1de; } .cft-b1 { top: 32px; width: 86px; height: 6px; } .cft-b2 { top: 44px; width: 58px; height: 5px; } .cft-go { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 13px; border-radius: 4px; background: #3e8ef7; } .cf-acts { position: absolute; inset: 0; opacity: 0; } .cf-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.1 0.006 80 / 0.45), transparent 30%, transparent 55%, oklch(0.08 0.006 80 / 0.6)); } .cfc { position: absolute; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: oklch(0.12 0.006 80 / 0.76); border: 1px solid oklch(1 0 0 / 0.12); color: var(--text-soft); } .cfc svg { width: 10px; height: 10px; } .cfc.tl { top: 6px; left: 6px; } .cfc.tr { top: 6px; right: 6px; } .cfc.bl { bottom: 6px; left: 6px; } .cfc.br { bottom: 6px; right: 6px; } .cf-do { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .cf-do b { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 58px; height: 20px; padding: 0 9px; border-radius: 6px; font-size: 9px; font-weight: 600; } .cf-do svg { width: 9px; height: 9px; } .cf-copy { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: oklch(0.18 0.02 84); } .cf-save { background: oklch(0.16 0.006 80 / 0.88); border: 1px solid oklch(1 0 0 / 0.12); color: var(--text); } .cf-cur { position: absolute; left: 0; top: 0; width: 17px; height: 17px; z-index: 20; pointer-events: none; opacity: 0; transform: translate(430px, 330px); filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.5)); } /* ⚠️ the pointer needs a DARK edge or it disappears over the light card it is dragging - it is a 13px light-grey arrow, and z-index was never the problem. ::before is the same shape a shade larger, in dark, which reads as an outline on the dark desk AND on the pale capture. */ .cf-cur svg { width: 100%; height: 100%; display: block; } .cf-g1 { left: 296px; top: 340px; } .cf-g2 { left: 300px; top: 238px; } .cap-film .cf-marq { animation: cfMarq 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-flash { animation: cfFlash 6.5s linear infinite; animation-play-state: paused; } .cap-film .cf-card { animation: cfCard 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-acts { animation: cfActs 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-cur { animation: cfCur 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-att { animation: cfAtt 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-send { animation: cfSend 6.5s linear infinite; animation-play-state: paused; } .cap-film .cf-g1 { animation: cfG1 6.5s var(--ease) infinite; animation-play-state: paused; } .cap-film .cf-g2 { animation: cfG2 6.5s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .cf-marq, .loop-gate.play .cf-flash, .loop-gate.play .cf-card, .loop-gate.play .cf-acts, .loop-gate.play .cf-cur, .loop-gate.play .cf-att, .loop-gate.play .cf-send, .loop-gate.play .cf-g1, .loop-gate.play .cf-g2 { animation-play-state: running; } @keyframes cfMarq { 0%, 6.14% { opacity: 0; clip-path: inset(0 100% 100% 0); } 7.68% { opacity: 1; } 13.82% { opacity: 1; clip-path: inset(0 0 0 0); } 14.74% { opacity: 1; } 15.97%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } } @keyframes cfFlash { 0%, 14.44% { opacity: 0; } 15.21% { opacity: 0.85; } 17.2%, 100% { opacity: 0; } } @keyframes cfCard { 0%, 16.13% { transform: translate(0, 46px) scale(0.92); opacity: 0; } 20.73% { transform: translate(0, -6px) scale(1.02); opacity: 1; } 23.02% { transform: translate(0, 0) scale(1); } 39.79% { transform: translate(0, 0) scale(1); } 41.23% { transform: translate(0, -4px) scale(1.05); animation-timing-function: linear; } 50.77% { transform: translate(278px, -205px) scale(0.32); opacity: 1; } 53.07%, 100% { transform: translate(278px, -205px) scale(0.22); opacity: 0; } } @keyframes cfActs { 0%, 30.72% { opacity: 0; } 35.38%, 100% { opacity: 1; } } @keyframes cfCur { 0%, 23.02% { transform: translate(430px, 330px) scale(1); opacity: 0; } 26.92% { opacity: 1; } 34.62% { transform: translate(92px, 326px) scale(1); opacity: 1; } 38.43% { transform: translate(92px, 326px) scale(1); } 41.18% { transform: translate(92px, 326px) scale(0.82); } 41.23% { transform: translate(92px, 322px) scale(0.82); animation-timing-function: linear; } 50.77% { transform: translate(370px, 121px) scale(0.82); } 53.85% { transform: translate(370px, 121px) scale(1); } 59.23% { transform: translate(370px, 121px) scale(1); opacity: 1; } 63.08%, 100% { transform: translate(410px, 100px) scale(1); opacity: 0; } } @keyframes cfAtt { 0%, 52.31% { transform: scale(0); } 56.15% { transform: scale(1.07); } 59.23%, 100% { transform: scale(1); } } @keyframes cfSend { 0%, 60.19% { filter: brightness(1); } 63.08% { filter: brightness(1.4); } 70.77%, 100% { filter: brightness(1); } } @keyframes cfG1 { 0%, 19.2% { opacity: 0; transform: translateX(-50%) translateY(6px); } 23.02% { opacity: 1; transform: translateX(-50%); } 38.43% { opacity: 1; transform: translateX(-50%); } 41.23%, 100% { opacity: 0; transform: translateX(-50%); } } @keyframes cfG2 { 0%, 42.37% { opacity: 0; transform: translateX(-50%) translateY(6px); } 45.91% { opacity: 1; transform: translateX(-50%); } 59.23% { opacity: 1; transform: translateX(-50%); } 62.12%, 100% { opacity: 0; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .loop-gate .od-marq, .loop-gate .od-lift, .loop-gate .lf-l, .loop-gate .lf-frame, .loop-gate .lf-caret, .loop-gate .px { animation: none; } .od-marq { opacity: 1; transform: none; } .od-lift { opacity: 1; transform: translateY(-24px) scale(1.05); } .lf-frame { opacity: 1; transform: none; } .loop-gate .demo-hook, .loop-gate .od-win.call, .loop-gate .say, .loop-gate .rd-win { animation: none; } .demo-hook { opacity: 0; } .say { opacity: 0; } .say.s3 { opacity: 1; } .loop-gate .dh-glow, .loop-gate .dh-kick, .loop-gate .w em, .loop-gate .dh-b .ln, .loop-gate .dh-dim, .loop-gate .dh-solo, .loop-gate .rd-sent { animation: none; } .loop-gate .vtl, .loop-gate .playhead, .loop-gate .vx-cut, .loop-gate .vx-flash, .loop-gate .vseg, .loop-gate .aseg, .loop-gate .vx-out, .loop-gate .vtl-play, .loop-gate .tool-clip, .loop-gate .vg { animation: none; } .loop-gate .a1-line, .loop-gate .a1-head, .loop-gate .a2-box, .loop-gate .a3-pill, .loop-gate .a4-b, .loop-gate .a5-hl, .loop-gate .a6-px, .loop-gate .bz-grad, .loop-gate .sc7, .loop-gate .a3-caret { animation: none; } .loop-gate .a8-el, .loop-gate .a9-ln, .loop-gate .a10-cv, .loop-gate .a10-hd, .loop-gate .a11-pen, .loop-gate .a12-h1, .loop-gate .a12-h2, .loop-gate .a14-bl, .loop-gate .a15-sp { animation: none; } .etab.on::after { animation: none; transform: scaleX(1); } .a1-line { stroke-dashoffset: 0; opacity: 1; } .a1-head { opacity: 1; } .a2-box { transform: scale(1); } .a3-pill { transform: translateX(-50%) scale(1); } .a4-b { transform: scale(1); } .a5-hl { stroke-dashoffset: 0; opacity: 1; } .a6-px { transform: scaleX(1); } .sel-7 .bz-grad { opacity: 1; transform: scale(1); } .sel-7 .sc7 { transform: scale(0.9); border-radius: 12px; } .a8-el, .a10-cv, .a11-pen { stroke-dashoffset: 0; opacity: 1; } .a10-hd { opacity: 1; } .a9-ln { transform: scaleX(1) rotate(-1.6deg); } .a12-h1, .a12-h2 { transform: scaleX(1); } .a14-bl { transform: scaleX(1); } .a15-sp { opacity: 1; } .loop-gate .cf-marq, .loop-gate .cf-flash, .loop-gate .cf-card, .loop-gate .cf-acts, .loop-gate .cf-cur, .loop-gate .cf-att, .loop-gate .cf-send, .loop-gate .cf-g1, .loop-gate .cf-g2 { animation: none; } .cf-card { opacity: 1; transform: none; } .cf-acts { opacity: 1; } .cf-att { transform: scale(1); } .cf-g1 { opacity: 1; transform: translateX(-50%); } .rs-row.hot .rs-tog { background: var(--gold); } .rs-row.hot .rs-tog i { transform: translateX(14px); } .dh-glow, .dh-dim { opacity: 0; } .px { transform: scaleX(1); } } @media (max-width: 860px) { section { padding: 84px 0; } /* ⚠️ Six items do NOT fit on a phone — the brand collided with the first link, "Sign in" wrapped, and the Download button was pushed off-screen entirely. The links collapse behind a burger; the BUTTON does not, because it is the primary action on a download page and must be reachable at every width. The checkbox is visually hidden but still FOCUSABLE — display:none would take it out of the tab order, which is the usual flaw in a CSS-only menu. */ .nav-check { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .nav-check:focus-visible ~ .nav-burger { border-color: var(--gold); color: var(--gold); } .nav-burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 38px; height: 38px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-soft); transition: border-color .14s var(--ease); } .nav-burger svg { width: 18px; height: 18px; } .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; background: var(--bg-chrome); border-bottom: 1px solid var(--line); padding: 4px 28px 14px; box-shadow: 0 18px 30px -22px oklch(0 0 0 / 0.9); } .nav-check:checked ~ .nav-links { display: flex; } .nav-links a { padding: 13px 2px; font-size: 15px; border-top: 1px solid var(--line); } /* ⚠️ .nav-in's 28px gap applies between EVERY child, so brand + burger + button on a 390px screen overflowed and clipped the button off the right edge. Tighten the gap and the button on phones. */ .nav-in { gap: 10px; } .nav-burger { margin-left: auto; } .nav-dl { margin-left: 0; height: 34px; padding: 0 12px; font-size: 13px; } .split, .split.rev { grid-template-columns: 1fr; gap: 34px; } .split.rev .copy { order: 0; } .g2, .g3 { grid-template-columns: 1fr; } .editor-body { height: 340px; } .hero-visual .editor-body { height: 300px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .pre { opacity: 1 !important; transform: none !important; } } /* ⚠️ LAST in the sheet on purpose. A narrower media query does NOT automatically beat a wider one - equal specificity, so source order decides. Placed before the 860px block, every phone would get the 860px scale instead of this one. */ @media (max-width: 520px) { .ad, .editor-body, .rec-film, .cf-desk { zoom: 0.52; } } /* ── Ambient dot grid for the non-home pages ───────────────────────────────── The homepage has this inside .hero (.hero::before + .hero-glow). These two rules are the page-level equivalent so every other page carries the same background. Identical values: same 22px grid, same oklch(1 0 0 / 0.04) dots, same gold glow, same 220px cursor mask. Unused on the homepage itself - it keeps its hero version - so adding them here changes nothing about how this page looks. They live in this stylesheet because site.css is generated from it, which is how every page gets them. */ .page-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(90% 70% at 50% 22%, #000 0%, transparent 78%); mask-image: radial-gradient(90% 70% at 50% 22%, #000 0%, transparent 78%); } .page-ambient i { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .4s var(--ease); background-image: radial-gradient(oklch(0.80 0.105 84 / 0.20) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(220px circle at var(--mx, -500px) var(--my, -500px), #000, transparent); mask-image: radial-gradient(220px circle at var(--mx, -500px) var(--my, -500px), #000, transparent); } /* Content sits above the layer. */ nav, main, article, footer, .doc, .page, .signin { position: relative; z-index: 1; } /* ── OCR demo rework: the failed-selection opener and the selection proof ──── The chat intro is gone; the setup is now a cursor trying to drag-select the shared code and getting nothing, which is how everyone discovers something is an image. After the lift, a real selection sweeps the extracted lines — the demo opens with selection failing and closes with it working. #3E7BFA is the selection blue the demos already use for light-UI chrome. */ .ocx-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; opacity: 0; pointer-events: none; } .ocx-cur svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.5)); } .loop-gate .ocx-cur { animation: oxCur 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .ocx-cur { animation-play-state: running; } .od-lift .lf-l { position: relative; z-index: 0; } .od-lift .lf-l::after { content: ""; position: absolute; inset: 0 -3px; z-index: -1; border-radius: 3px; background: #3E7BFA4D; transform: scaleX(0); transform-origin: left center; } .loop-gate .od-lift .lf-l:nth-of-type(1)::after { animation: oxSel1 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .od-lift .lf-l:nth-of-type(2)::after { animation: oxSel2 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate .od-lift .lf-l:nth-of-type(3)::after { animation: oxSel3 9s var(--ease) infinite; animation-play-state: paused; } .loop-gate.play .od-lift .lf-l::after { animation-play-state: running; } @keyframes oxCur { 0%, 4% { opacity: 0; transform: translate(300px, 115px) scale(1); } 8% { opacity: 1; transform: translate(28px, 40px) scale(1); } 9.5% { opacity: 1; transform: translate(28px, 40px) scale(0.9); } 20% { opacity: 1; transform: translate(215px, 45px) scale(0.9); } 21.5% { transform: translate(211px, 45px) scale(0.9); } 23% { transform: translate(219px, 45px) scale(0.9); } 24.5% { transform: translate(214px, 45px) scale(0.9); } 26% { opacity: 1; transform: translate(214px, 45px) scale(1); } 31% { opacity: 0; transform: translate(245px, 95px) scale(1); } 100% { opacity: 0; transform: translate(245px, 95px) scale(1); } } @keyframes oxSel1 { 0%, 66% { transform: scaleX(0); } 72% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes oxSel2 { 0%, 69% { transform: scaleX(0); } 75% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes oxSel3 { 0%, 72% { transform: scaleX(0); } 78% { transform: scaleX(1); } 100% { transform: scaleX(1); } }