Büro (Bürocratik) teardown

2026-10-21 · URLs read: https://www.burocratik.com/ , https://www.burocratik.com/work , https://www.burocratik.com/studios , https://www.burocratik.com/recognition (HTML, inline CSS and every JS chunk they load, each fetched once with a desktop user agent; 11 headless capture runs on fsit2) · serves inspiration rows 6, 9 and 15 of design/inspiration/INSPIRATION.md.

Checked by a verifier on 2026-10-22: corrections are made in place and listed in VERIFY.md.

1. What the owner liked

• The bar and the sheet behind the plus (row 6). "I really like the menu at the bottom of the site on this web page, which can also be an input box for chatting with the site too … you could hit the plus to expand it as a standard menu, or you could type in it and ask things like, who's on the agenda today? What are the speakers? What's the venue? … the site could start with something like that perhaps in the center of the site and once you start engaging it or click around the site it'll just move to the bottom and everything will feel like more like an app you're flowing through"
• The reactive custom cursor (row 9). "I want a fully custom experience. I like the custom cursors when you hover over certain things. Reactive custom cursors, also custom scroll bars." · "or rather even invisible scroll bars and less scrolling."
• The newsletter in two sentences (row 15). "I really like their newsletter signup, which just looks like two sentences and I want to copy it exactly, or at least for now, I like that idea … It just says the text but the latter text, if you click it, lets you input your email."

2. The stack

3. Component playbooks

3.1 The persistent bar and the sheet behind the plus

What it is in pixels (computed values, sources/capture-meta/desktop-bar-states.json, phone-bar-menu.json, desktop-menu-open-close.json):

DOM (client-rendered, trimmed; full dump in sources/capture-meta/desktop-bar-states.json):

<nav class="_navbar no-select" data-motion-fallback>                      <!-- fixed, z 9, cursor:none, v-pointer:pointershift -->
  <div class="fixed top-0 left-0 w-full-vw h-full-vh" inert></div>        <!-- full-screen click catcher, live only while open -->
  <div class="click-catchers" aria-hidden="true"><div></div><div></div></div>
  <div class="bottom-click-catcher fixed bottom-0" aria-hidden="true"></div>
  <div class="persistent-bar">
    <div class="persistent-bar-main flex justify-space-between align-center w-full h-full">
      <div class="bot-container m-c w-full"><div class="_bot">
        <div class="icon relative flex m-c">
          <span data-name="burocratik" class="_icon active m-t"><svg …/></span>
          <span data-name="burocratik" aria-hidden="true" class="_icon aux m-t"><svg …/></span>
        </div>
        <div class="p-small whitespace-nowrap flex-grow-1"><div class="msg relative w-full m-c">
          <div class="active"><span class="m-t">We </span><span class="m-t">are </span><span class="m-t">Büro </span>… 10 slots</div>
          <div class="aux" aria-hidden="true"><span class="m-t">We </span>… 10 slots</div>
        </div></div>
      </div></div>
      <div class="active-page"><div class="_root-page-name p-small relative m-c -e0">
        <div class="background absolute inset-0 m-t"></div>
        <div class="label relative inline-block m-c whitespace-nowrap"><span class="m-t">Homepage</span>
          <span class="aux absolute left-0 top-0 m-t" aria-hidden="true" inert>Homepage</span></div>
      </div></div>
    </div>
    <button aria-label="Open/close menu" class="open-close-button">
      <div data-open="false" data-theme="light" class="_open-close-icon"></div>
      <span>Open/close menu</span>                                        <!-- invisible hit area the size of the whole bar -->
    </button>
  </div>
  <div class="menu" inert>
    <div class="navbar-background blurred-background"></div>
    <div class="menu-content-container"><div class="menu-content no-scrollbar" data-lenis-prevent>
      <div class="menu-header">glyph, "We are Büro" tagline, Let's talk pill</div>
      <ul class="menu-pages p-large"> rows: thumbnail + label, children (Branding, Naming, Book) </ul>
      <ul class="menu-socials p-tiny"> LinkedIn, Instagram, Facebook, Büro on X </ul>
    </div></div>
  </div>
</nav>

The .m-c / .m-t pair is the site-wide mask: .m-c{overflow:hidden; margin-bottom:-.16em; padding-bottom:.08em} around .m-t{display:inline-block; will-change:transform}. Every rolling text on the site is a .m-t moved by yPercent inside a .m-c.

How the message "rolls": it is a message stack, not a loop. The duplicated .active / .aux spans are two layers of the same ten word slots. The bar's line is the top of a stack kept by a $bot store (sources/bar-bot-message.js.txt):

• bot.set({icon, message}) pushes and returns a remover; removing restores whatever is underneath. At rest the stack holds only {icon: "burocratik", message: "We are Büro"}, so the line never changes on its own.
• Things register as v-bot:event with a type: hover (desktop only; pushes on mouseenter, pops on mouseleave), intersection (an IntersectionObserver with rootMargin: "-70% 0% -25% 0%", a thin band between 70 % and 75 % of the viewport height just above the bar; the message holds while the element crosses that band), custom, or a preset.
• Messages captured or read in source: "Open menu" with an up arrow (hover on the bar or the plus, bar-02, bar-03); "That's Bach, btw!" and "Not quite my tempo and note spacing!" (the manifesto, cursor-01-hand-over-card.png); "Oh yes, Büro does branding too. Click."; "Yes, '99 is right." (hover on a year); "A glimpse of our latest work, fresh and minty" (phone, phone-04-scrolled.png); "Move that mouse, shake it! Yeah!!" (/recognition); the footer preset picks one of "End of this page, onto the next?", "Discover more. Click onward!", "Don't stop now! Click for more!" with a lightning icon (nl-01-before.png). Leaving the window pushes one of "Please come back...", "We see you clicking away!", "We're waiting...", "Take your time", "Sure, click away, idc" with a matching face (bar-05-window-blur-message.png, triggered with a synthetic blur event); coming back after more than 10 s shows "Hey! Welcome back!" for 2 s.
• The roll (GSAP): the new text is written into .aux; the old icon drops out (yPercent: 101, 0.3 s power2.in) while the new one drops in from above (-101 → 0, 0.5 s power2.out, 0.2 s later); the old words leave upwards (yPercent: -101, 0.3 s power2.in, stagger 0.03 s in total) while the new words rise from below (101 → 0, 0.6 s power2.out, stagger 0.1 s in total, 0.23 s later); then .active takes the new text and .aux is cleared. A request that arrives mid-roll is queued and only the latest one is kept. Slow-motion evidence: bar-bot-roll-slowmo-strip.png (the glyph sinking, the words lifting).
• 44 named white icons (faces, hands, energy, trophy, arrow-up, play, volume, the Büro glyph) can take the icon slot.

The plus and the click area. The button's <span> is an invisible box calc(navbar-width + 16px) wide and the 18 px button's height plus 32 px (591.5 × 50 px at 1440), offset right -24 px and top -16 px, so it overhangs the 46 px bar by 8 px a side and 2 px top and bottom, and the bar's overflow: hidden clips it to the bar: the whole bar is the button. Hovering anywhere on it swaps the line to "Open menu" and shows the tilting-hand cursor; clicking anywhere opens the sheet. There is no proximity or "awake" state and the bar never shrinks on scroll (bar-04-scrolled.png). Open, the icon rotates 90° (0.35 s cubic-bezier(.645,.045,.355,1) after 0.05 s) while one bar slides out by its own width and fades to 0.5 (0.25 s), leaving a minus at the bottom right of the sheet (menu-01-open.png).

The chip shows the root page: Homepage, Studios, Recognition, Work (evals chip-studios, chip-recognition). It holds its label twice (.label .m-t and .aux) so it can roll like the message. After the sheet closes, its white background slides back in from the right (xPercent 101 → 0, 1 s expo.out) and the label rises (yPercent 101 → 0, 0.55 s power3.out, 0.225 s later).

Opening the sheet (GSAP timeline, sources/bar-menu-motion.js.txt; frames in menu-open-slowmo-sheet.png, captured at 4 % speed):

Note that the "blur" behind the sheet is the sheet's own backdrop-filter; the page itself is not blurred, it shrinks by one grid margin and dims to two thirds (menu-02-hover-work.png shows the black frame and rounded corners).

Closing (Escape, the minus, or a click outside): skin height back to 46 px (0.52 s power3.inOut), content yPercent → 100 (0.49 s power3.inOut) and opacity → 0 (0.3 s), page recede reversed (0.52 s power3.inOut); at 0.3 s the message and chip come back with their enter tweens (menu-close-realtime-sheet.png frame 00 shows the skin mid-collapse; menu-close-run2-sheet.png ends on "Open menu" because the pointer still rests on the bar).

Inside the sheet: hovering a page row widens its thumbnail from about 87 to 100 px at 1440 px (clamps of 77 to 90 and 90 to 102 px; 0.3 s cubic-bezier(.2,0,0,1)), nudges the label 8 px right (0.2 s cubic-bezier(.77,0,.175,1)) and slides a white left-to-right gradient at 2.5 % opacity across the row (menu-02-hover-work.png). Child links (Branding, Naming, Book) sit in a grid whose hovered column grows to 1 + n/7 fr while its label fades to 0.66 (menu-03-hover-child-branding.png). The current page is dimmed (filter: brightness(.5)) and not clickable. Social links nudge 0.5em on hover (0.175 s).

Load: the greeting becomes the bar. On a fresh load a black loader says "Hello", rolls it out, then "We are Büro" with the glyph (icons cycle every 260 ms while assets load). When the page is ready, the loader timeline (sources/page-flow.js.txt):

1. Lifts the whole bar up to the greeting's height (navbar y = -(bar message y - greeting y)), so the bar's message slot sits on the greeting line.
2. Slides the greeting sideways onto the bar's message slot (expo.inOut, about 0.7 s).
3. Drops the black curtain away (y: 101%, 0.95 s expo.inOut, from 0.15 s).
4. Glides bar and greeting down together to the bottom edge (both 0.65 s expo.out, from 0.55 s).

The bar's "We are Büro" is the greeting handed down. This is the owner's "start in the center, then move to the bottom", already built. The frames show the greeting before and the docked bar after (intro-home-slowmo-sheet.png, intro-recognition-realtime-sheet.png); the glide itself is read from source.

The bar becomes the video player. Pressing Play on a hero video morphs the bar into the player's control bar: the skin scales to the controls' width (0.363 s power4.inOut), the persistent bar fades, play, label, progress and timestamp roll in with the same enter tweens as the message (source only, sources/bar-menu-motion.js.txt neighbour code in f4b42a5.js; not captured).

Phone. Same skin, 46 px tall, full width minus 23.75 px gutters, 24 px above the bottom; no chip; no hover messages and no custom cursor ($screen.touch guards); the sheet's header drops the tagline under 743 px (phone-02-menu-open.png). A long intersection message is not truncated and runs under the plus (phone-bar-rest-vs-long-message.png).

Accessibility and reduced motion. aria-label="Open/close menu"; the closed sheet is inert; the .aux copies are aria-hidden; Escape closes. The message line is not a live region, so screen readers never hear the bar talk. There is no prefers-reduced-motion rule anywhere in the CSS or JS. :focus{outline:0} removes focus rings site-wide. Before JavaScript mounts, data-motion-fallback lets CSS show or hide the sheet by [inert] without animation.

Rebuild for ETS27 (library-agnostic): 1. One fixed element: skin layer (absolute, radius 20, dark at 85 % over backdrop-filter: blur(18px)), a row with mark, message slot, chip, plus. Size it from the layout grid, not a fixed pixel width. 2. A message store with say({icon, text}) → undo: a stack where the top wins. Wire it to hover (pointer devices only), to an IntersectionObserver band just above the bar, to visibilitychange or window blur, and to the end of the page. This is item 14's "the bar speaks for the canvas", already working at Büro. 3. Roll text with two stacked layers of word spans inside an overflow:hidden mask; animate translateY per word with a small stagger (old up and out in 0.3 s, new up and in over 0.6 s). GSAP, Motion (motion.dev) animate with stagger, or the Web Animations API all do it; SplitType or GSAP SplitText can make the spans. 4. The sheet is the same skin growing in height from the bar (animate height or, cheaper, clip-path: inset() or scaleY with counter-scaled content), content sliding up 100 % → 0, labels rising with a stagger, dividers drawing with scaleX from the left. Use the Material 3 emphasized curve for the grow. 5. Recede the stage instead of blurring it: scale by twice the margin over the width, opacity 0.67, rounded corners, inert, scrolling stopped. 6. For the ask field: keep the plus and the field as separate hit areas. Büro's whole-bar button would swallow clicks meant for an input. 7. Add what Büro lacks: aria-live="polite" on the message slot (throttled), visible focus, and a reduced-motion path that swaps text without movement.

Gotchas. The backdrop-filter over playing video is expensive: in our headless capture a frame took about 0.5 to 0.7 s (median) with the sheet closed and 1.8 to 4.2 s with it open. The whole-bar hit area (see 6). Message length on phones. Hover-only messages mean touch users only ever see section and footer messages.

3.2 The newsletter in two sentences

What it is in pixels (sources/capture-meta/desktop-newsletter.json, phone-newsletter.json):

• Desktop: form._newsletter at x 965, in the footer's right-hand columns. Line 1, the <p>: 414.6 × 21.1 px, "Psst Psst. Wanna get Spammm?", black. Line 2 is the <input type="email"> itself: 220 × 21.1 px (one sixth of the grid width minus the gap), placeholder="Give me your e-mail.".
• Type: both lines Graphik 400 at 17.575 px (.p-small, clamp(16px, 15.415px + 0.15vw, 18px)), line-height 1.2 (21.09 px), letter-spacing -0.04em (-0.703 px).
• The grey is not a grey: ::placeholder{color: var(--color) /* #000 */; opacity: .5}, black at half opacity on white.
• The input is unstyled into text: border: none; padding: 0; outline: 0; box-shadow: none; resize: none; background-color: var(--background-color) /* #fff */, caret black, autocomplete="email", no label.
• Phone: a 252 px column at x 86.75; under 1023 px the input row turns into a column, so Send sits under the address (phone-nl-02-typed.png).

DOM after typing (sources/capture-meta/desktop-newsletter.json, formAfter, with the data-hidden="true" flags that the button and the consent carry before typing put back in):

<form class="_newsletter">
  <div class="submit-container relative">
    <p class="p-small">Psst Psst. Wanna get Spammm?</p>
    <div class="input-container">                                   <!-- flex row, gap = grid gap; column under 1023 px -->
      <fieldset name="email" class="_newsletter-email-field">
        <input type="email" autocomplete="email" class="p-small" placeholder="Give me your e-mail.">
      </fieldset>
      <button data-hitarea class="_newsletter-button relative p-small" data-hidden="true">  <!-- attribute removed once typed -->
        <span class="_underline"><div data-underline-line class="motion"></div><div data-underline-line class="-clone m-t"></div>
          <div data-underline-slot><span>Send</span></div></span>
      </button>
    </div>
    <fieldset name="privacy-check" class="_form-checkbox-field newsletter" data-hidden="true">  <!-- absolute, bottom -35px -->
      <label><input type="checkbox" class="hide-input"><div class="tick"></div>
        <div class="p-tiny"><p>By submitting, you agree to our <a href="/privacy-policy">Privacy Policy</a>.</p></div></label>
    </fieldset>
  </div>
</form>

Behaviour (nl-states-crops.png, then nl-01, nl-02, nl-03):

• Before: two lines and nothing else.
• Focus: nothing changes; no ring, no underline, only the caret.
• One character typed: showAdditionalElements turns true. "Send" with its 0.066em underline appears to the right with no transition, and the consent line (13 px, round tick) fades in under the form (0.2 s cubic-bezier(.215,.61,.355,1)). Deleting everything hides them again.
• Hovering Send replays the underline in source: the line leaves to the right (0.6 s power3.in), a clone draws in from the left (0.8 s power3.out, 0.5 s later). Our 10-frame burst did not show it (nl-send-hover-strip.png).
• Errors turn the placeholder and tick red (#dc3429, placeholder opacity 1).
• Submit, read in source and never triggered: preventDefault(); if valid, the form goes inert, its fields drop to 0.3 opacity and Send to 0.4 while its underline loops; the values are written to console.log; after 2 s the form resets and the two lines become "I already have you mail" / "Gotchaaa" for 4 s, then return. The component makes no network request and never calls its action prop, so in this build the form looks like a joke or a stub. The strings are hard-coded, not from Sanity.
• The form is not inside the menu sheet. The sheet holds header, pages and socials only (the navbar template and menu-01-open.png); this corrects components-to-copy.md and bar-stage-drawers.md.

Accessibility. No <label> and no aria-label; the placeholder is the only name and disappears on typing. There is no focus style, because :focus{outline:0} is global. Only the consent checkbox has a :focus-visible ring (3 px at 30 % black).

Rebuild for ETS27: plain HTML, almost no JS.

<form class="nl"><p>Line one, in ink.</p>
  <input type="email" name="email" autocomplete="email" placeholder="Line two, the grey one." aria-label="Email address" required>
  <button>Send</button><label class="consent"><input type="checkbox" required> … privacy policy</label></form>

.nl p, .nl input { font: inherit; letter-spacing: inherit; color: inherit; }
.nl input { border: 0; padding: 0; background: transparent; outline: 0; width: 100%; caret-color: currentColor; }
.nl input::placeholder { color: currentColor; opacity: .5; }
.nl input:placeholder-shown ~ button, .nl input:placeholder-shown ~ .consent { opacity: 0; pointer-events: none; }
.nl input:focus-visible { text-decoration: underline 1px; text-underline-offset: .2em; } /* the focus cue Büro lacks */

The :placeholder-shown sibling rule does Büro's show-on-type with zero JS. Post to Zpryme's list (Büro's stub posts nothing), write the two lines in the mind's voice, and with the marker look (item 8) let the caret appear in the grey line.

Gotchas. Keep line 2 one line long at every width (Büro's is 220 px, so a long address scrolls inside it). Keep the reveal from shifting layout: Büro positions the consent absolutely at -35 px. Autofill paints a background: set input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; }.

3.3 The custom cursor

What it is. One div._pointer (sources/pointer-cursor.js.txt, DOM in sources/capture-meta/desktop-bar-states.json, pointerDom):

• A 48 × 48 px box, position: fixed, left/top: -24px (centred on the pointer), pointer-events: none, z-index: 9999, display: none unless (hover: hover) and (pointer: fine).
• It holds every state at once as inline SVGs (data-cursor="pointer" | "pointershift" | "grab" | "eyes" | "tornado" | "viewcase"). Each is transform: scale(0); opacity: 0 until the parent's data-cursor names it, then scale(1); opacity: 1.
• The hand is a white glove: fill white, a 2.5 px black stroke, and the same stroke again at 20 % opacity, drawn at top 20 %, left 10 % of the box so the fingertip sits on the hot spot.
• Each state has a -default and an -active drawing; body:active swaps them instantly, which gives the pressed hand (cursor-04-pressed-on-bar.png).

Mechanism (all from source, states confirmed by the evals cursor-over-hero: eyes, cursor-over-bar: pointershift, cursor-over-card: pointershift, cursor-off-card: none):

• $mouse listens to mousemove (passive) and throttles it to one update per animation frame. Each frame writes transform: translate3d(x, y, 0) straight onto ._pointer: no lerp and no trailing; the cursor is exactly where the mouse is.
• A cursor stack, built like the bar's message stack: v-pointer:<name> on an element pushes that state on mouseenter, pops it on mouseleave and forwards clicks. The top of the stack becomes data-cursor on ._pointer.
• Every element that opts in also sets cursor: none, so the system cursor disappears exactly where the drawn one appears. Elsewhere the body keeps cursor: auto and the drawn cursor is none (hidden).
• pointershift (bar, accolade cards) and grab (sliders) tilt with the motion: rotateX = 4·dy, rotateY = 4·dx, rotateZ = 5·dx, where dx and dy are the pointer's movement since the previous frame, clamped to ±5 px, over 0.25 s power2.out (moving right leans the hand clockwise: rotate(10.7deg) rotateY(8.6deg) read mid-tween, shots/verify/stack/verify-02-hand-moving-right.png). They settle back to 0 over 0.5 s power4.out once the mouse has been still for 100 ms.
• eyes (the homepage hero video): the pupils shift against the motion, like inertia (x = -dx/2 clamped to ±2 px, y = -dy clamped to -12 to 3 px, quickTo 0.25 s; moving right read x -1.13, moving down y -5.45), and recentre after 100 ms. The eyes blink (scaleY .1 and back, 0.1 s each way) 1 to 4 s after the last mouse move, the timer restarting on every move; one wait in ten is instead anything from 0 to 12.5 s (the code multiplies 250 × random × 50 ms). They also blink on click.
• tornado: a MotionPath spin on click (0.4 s power2.out). viewcase: a white "View case" label pill that trails the pointer by 0.2 s; hand and label scale in, the label 0.15 s later.

Where it shows. The ranking cards are on the homepage, not on /studios or /recognition: four 78 × 116.5 px image links, 10 px apart, in ._manifesto .accolades under "Our Accolades" (cursor-01-hand-over-card.png). They and the bar use the tilting hand. Award names on /recognition (._award), event buttons and some footer links use the plain hand; the hero video uses the eyes (bar-01-rest-eyes-over-hero.png, menu-04-closed.png); sliders use grab. The probe counts 437 elements with cursor: none on the homepage and no url() cursors: it is all DOM, no CSS cursor images. Crops of the three looks: cursor-hand-eyes-pressed-crops.png.

Phone. Never shown (media query and $screen.touch guards).

Accessibility and reduced motion. Decorative and pointer-only; keyboard users are unaffected. No reduced-motion handling for the tilt or the blinking.

Rebuild for ETS27: 1. Draw the states in the site's hand (marker), each as an inline SVG inside one fixed, pointer-events:none element, with the hot spot planned in the drawing. 2. Mark targets with data-cursor="hand", data-cursor="eyes" and so on, and set cursor:none on exactly those selectors. Delegate pointerover / pointerout from the document to keep a stack. 3. Move the element per frame with translate3d from the last pointermove, and react through small transforms (tilt from velocity, pupils, blink). 4. Gate everything on (hover:hover) and (pointer:fine) and prefers-reduced-motion.

GSAP quickTo or Motion's animate handle the tilt and settle. Plain CSS handles state switching ([data-cursor=hand] > .hand { scale: 1 }).

Gotchas. cursor:none and the drawn cursor must cover exactly the same elements, or the visitor gets two cursors or none. Native controls (selects, iframes, text fields) keep the system cursor. Screenshots and tests only show the drawn cursor after a real mouse move. The tilt reads well because it is small: at most 20° around X and Y and 25° in the plane.

4. Flow and transitions

How the captures were made: real-time bursts under fsit2's software renderer ran at 0.1 to 4.2 s per frame (medians 0.3 to 2.7 s per run), so most animations finished between two frames (menu-open-realtime-sheet.png is all end states). For the slow-motion runs, the steps file asked webpack's module registry for GSAP and set gsap.globalTimeline.timeScale() to 0.04, 0.06 or 0.1. Frame times in those runs are stretched by 1 / timeScale. CSS transitions (the plus icon) and timers (the loader's icon cycle) are not slowed.

Source also defines a "fancy" leave for desktop (old page scale: 0, rotate: -20, y: +20 % over 1.25 s power3.in). Our frames show the old page unchanged while the new one covers it, so this is listed under "Not confirmed".

5. Shots

6. Sources

• Pages: https://www.burocratik.com/ , https://www.burocratik.com/work , https://www.burocratik.com/studios , https://www.burocratik.com/recognition (HTML, response headers, inline <style data-vue-ssr-id>).
• Scripts read once: /signature.js, /_nuxt/static/1791840994/state.js, the twelve shared chunks (4a88b9a, 34b7000, e6fc914, f4b42a5, 79fb4b5, 8c9bb95, 1cdf22a, da0c22a, 3399d13, ac11b49, c49cf9b, c3d5f5e) and the route chunks the four pages pull in (among them 89d5fef for three.js, 89089df for /work, a8e64f2 and 6af09bb for /recognition).
• Excerpts quoted here: sources/bar-bot-message.js.txt, sources/bar-menu-motion.js.txt, sources/pointer-cursor.js.txt, sources/newsletter.js.txt, sources/page-flow.js.txt, sources/navbar-and-newsletter.css.txt, sources/signature.js.txt.
• Capture evidence: sources/capture-meta/*.json (steps with outcomes, computed CSS, DOM excerpts, probes) and the steps files in steps/.
• Studio notes read first: design/inspiration/INSPIRATION.md (rows 6, 9, 15), design/inspiration/bar-stage-drawers.md, design/inspiration/components-to-copy.md, design/inspiration/burocratik/*.png, design/inspiration/teardowns/_examples/*.json.

7. Not confirmed

• Old page during a page change. Source defines a "fancy" leave on desktop (scale to 0, rotate -20°, 1.25 s power3.in). The 6 % speed frames show the old page unchanged while the new page covers it. Would establish: a burst with the old page scrolled away from the top, or a slow-motion run that keeps the old page visible longer (navigate with the menu closed, through a footer link).
• Send underline hover. The replay is in source but did not show in ten frames. Would establish: a slow-motion burst of the Send hover with GSAP slowed, with the focus moved away first.
• Newsletter submit. Never submitted, by rule. Source shows no network call (console only, then the "Gotchaaa" swap). Would establish: a submit with network logging on a throwaway address, only with the owner's say-so.
• Nuxt release. The exact Nuxt 2.x release is not printed. Vue 2.7.16 suggests Nuxt 2.17. Would establish: a nuxt version string in a chunk, or the build manifest.
• The bar turning into video controls. Read in source only. Would establish: a capture that clicks Play on the hero video.
• Reduced motion. No rule was found, but the absence was not tested with prefers-reduced-motion: reduce emulation. Would establish: a run with that media feature emulated.
• Scrollbars in a real browser. The page scrollbar is native; captures hide scrollbars by flag. Would establish: one non-headless look, or a capture without --hide-scrollbars.

Verification

Büro (Bürocratik) teardown: verification

2026-10-22 (UTC; the evening of 2026-10-21 local) · verifier pass over README.md and component.json in this folder · aim: refute the claims, not restate them.

Result. 117 claims checked: 81 held, 22 were wrong or imprecise and are corrected in place, and 14 stay unconfirmed. The three playbooks stand: the bar is a message stack with a sheet that grows out of it, the newsletter is a paragraph plus an email input dressed as text, and the cursor is one DOM element holding a stack of drawn states. The errors were in the details around them: GSAP SplitText (not on the site), where three.js runs (/studios too), the selection colour, the recede variable, the click area's height, the signs of the cursor tilt and of the pupils, the blink timing and the capture frame rates.

How it was checked

• Folder evidence. README.md, component.json, the 11 steps files, the 11 capture records in sources/capture-meta/ (steps with outcomes, evals, computed CSS, DOM dumps, probes, burst timestamps) and the seven excerpts in sources/. Timeline sums, grid arithmetic and the clamp values at 1440 px were recomputed; burst frame gaps were recomputed from msAfterStart in every capture record.
• Screenshots looked at with the Read tool: bar-01-rest-eyes-over-hero, bar-02-pointer-on-bar (and a 3x crop of its bar), bar-04-scrolled, bar-05-window-blur-message, menu-01-open, menu-02-hover-work, cursor-01-hand-over-card, cursor-04-pressed-on-bar, cursor-hand-eyes-pressed-crops, 4x crops of the resting hand (cursor-01) and the pressed hand (cursor-04), intro-home-slowmo-sheet, intro-recognition-realtime-sheet, menu-open-slowmo-sheet, menu-open-realtime-sheet, menu-close-realtime-sheet, bar-bot-roll-slowmo-strip, nav-to-recognition-slowmo-sheet, nav-to-recognition-slowmo-frames-01-04, nl-01-before, nl-states-crops, phone-02-menu-open, phone-bar-rest-vs-long-message, and the verifier's verify-02-hand-moving-right (full frame and a 4x crop) and a 4x crop of verify-01-eyes-moving-down. nl-01-before.png and nl-02-focus.png were compared by checksum (identical).
• Three fresh captures on fsit2 through design/tools/capture-remote.sh, headless, no CAPTCHA or wall, 0 step errors and 0 page errors in each:
• steps/verify-stack.json → shots/verify/stack/ (meta.json, verify-01-eyes-moving-down.png, verify-02-hand-moving-right.png; 15.5 s). One load of /. Evals: runtime versions ($nuxt.$root.constructor.version, $nuxt.$router.constructor.version, __core-js_shared__, lenisVersion, __THREE__), head tags, HTML comments, resource entries, getComputedStyle(p, '::selection'), a walk of all 1,339 CSS rules in the 41 style sheets for ::selection, scrollbar, reduced-motion, view-transition, url() cursor and :focus rules; then a grep of the source of all 724 webpack modules on the page, read from the page's own registry (a chunk pushed into window.webpackJsonp hands back __webpack_require__.m), so no chunk was fetched a second time. Then GSAP's global timeline at 0.2 speed, the pointer moved right and down over the hero and over the bar, and the pupils' and the hand's transforms read mid-tween; computed CSS of the plus button and its hit span; the probe.
• steps/verify-pages.json → shots/verify/pages/meta.json (15.9 s). One load each of /recognition and /work: __THREE__, three.js among the modules, workers among the resource entries, .webglContainer, canvases with backing-store and CSS sizes, the bar's message.
• steps/verify-extra.json → shots/verify/extra/meta.json (14.5 s). One load of /: the modules carrying "3.12.2" and those naming SplitText, the $mouse wrapper (module 35), the $audio plugin, the Rive and Pizzicato modules; then one load of /studios with the same page eval as above.
• One HTML read: GET https://www.burocratik.com/ with the capture tool's desktop User-Agent (headers and HTML into a scratch folder, deleted afterwards; selected headers kept in shots/verify/home-response-headers.txt). Checked: the banner comment, the head tags, og:image, the Umami and gtag tags, /signature.js, /_nuxt/image/ paths, the CSP.
• Cross-references: the owner's quotes against rows 6, 9 and 15 of design/inspiration/INSPIRATION.md; the newsletter location against bar-stage-drawers.md and components-to-copy.md.

What held

Stack (23). 1. Nuxt 2 full static: window.__NUXT__, per-route state.js and payload.js and a manifest.js under /_nuxt/static/1791840994/ on all four pages; every data-n-head value in the served HTML is "ssr". 2. The build id 1791840994 is 2026-10-12 21:36:34 UTC. 3. Vue 2.7.16 at runtime. 4. vue-router 3.6.5 at runtime. 5. core-js 3.38.0 at runtime (__core-js_shared__.versions, mode global). 6. webpack 4 JSONP runtime: window.webpackJsonp takes a pushed chunk and runs it with __webpack_require__. 7. The twelve shared chunks named in section 6 are exactly the homepage's preloaded and body scripts, besides state.js, payload.js, manifest.js and /signature.js; /work loads 89089df, /recognition a8e64f2 and 6af09bb. 8. Sanity: og:image on cdn.sanity.io/images/zksivtxz/production/…, CSP frame-ancestors 'self' http://localhost:3333 burocratik.sanity.studio, the ?preview plugin in the quoted source (its token already redacted), 35 /_nuxt/image/ paths in the homepage HTML. 9. Vercel: server: Vercel, x-vercel-cache: HIT, x-vercel-id: pdx1::…, age: 613648 (about 46 minutes after the agent's 610885), last-modified: Thu, 15 Oct 2026 01:18:06 GMT. 10. GSAP 3.12.2 at runtime from webpack module 0, not a global; ScrollTrigger and MotionPathPlugin registered (gsap.core.globals()), CustomEase in module 134. 11. The m3.* eases are created with the quoted curves; the m3.emphasized path in the README matches the source to three decimals. 12. Lenis 1.0.42 (window.lenisVersion); the scroller's defaults object is empty (var O={}), so duration: 1 and wheelMultiplier: 1.1 are the only options; lenis lenis-smooth on html, lenis-stopped with the sheet open. 13. The page scrollbar is native; --sbw is measured in source; the only scrollbar CSS is the .no-scrollbar set. 14. three.js r171 on /work and /recognition (window.__THREE__ "171", 89d5fef.js loaded), Words.worker and .webglContainer on /work, the /recognition canvas at 2880 × 1800; none on the homepage (__THREE__ unset, no WebGLRenderer in its 724 modules), 6 videos and 2D canvases only. 15. Rive @rive-app/canvas 2.21.6: its package.json is inlined in module 175. 16. The small textured-quad WebGL program (uniform vec4 mat; uniform vec2 translate) is in that same module 175, so it belongs to the Rive runtime. This was in "Not confirmed" and is now moved into the stack table. 17. Pizzicato in module 113 (UMD export Pizzicato and Pz, AudioContext); $audio enables on the first click and toggles on key codes 17 and 65 (Ctrl+A); ./audio/image-spawn.mp3 loops while the pointer moves, desktop only. 18. Fonts: "Commercial Gräphik Web" upright and italic variable files (…-VF_wght-Web…woff2), the only faces in the probe. 19. Umami (cloud.umami.is/script.js with a data-website-id) and GA4 G-52YF8HGWG2. 20. signature.js: 427 bytes, badges white on #0020f4 then on #242424, plain text outside Chrome and Firefox. 21. The ASCII banner is the first node of the HTML and carries "♥ MADE BY BÜRO: BUROCRATIK.COM" and "YEAR: 2024"; Ctrl+G (key codes 17 and 71) toggles ._grid-preview, built from new Array(24) columns. 22. No View Transitions: 0 view-transition rules, 0 modules with startViewTransition. 23. No reduced-motion handling and no live region: 0 prefers-reduced-motion rules among 1,339, none in the HTML, 0 modules containing reduced-motion or aria-live; :focus { outline: 0px; } is a global rule.

Bar and sheet (25). 1. Desktop geometry: 575.47 × 46 at x 432.25, y 823.61, bottom: 30.405px. 2. Phone geometry: 342.5 × 46 at x 23.75, bottom: 24px. 3. The width rule (10, 12, 18 and 22 of 24 columns) and the bottom clamp are in the quoted CSS; at 1440 px the clamp gives 21.621 + 8.784 = 30.405 px, exactly the computed bottom. 4. Skin: radius 20 px, the 85 % black gradient over 40 % white, backdrop-filter: blur(18px) (computed); the probe finds one backdrop-filter element. 5. Inside: padding 16 and gap 14 (CSS); ._bot starts at x 448.25, the 24 px glyph at 450.25 (2 px padding), the message at 482.25 (8 px gap); 17.575 px, line-height 1.2, -0.04em. 6. Chip: 105.25 × 28.78, white, radius 12; 111.45 px for Recognition and 77.30 px for Studios; 0 × 0 on the phone. 7. Plus: 18 × 18, computed transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.05s, the :before bar sliding out at 0.5 opacity; the minus is visible in menu-02-hover-work.png. 8. Sheet: 575.47 × 770.5 from y 99.1; phone 342.5 × 675.19 from y 144.8. 9. DOM: matches the template in sources/bar-menu-motion.js.txt and the persistentBarDom dump (ten word slots per layer, the label twice in the chip). 10. Message stack: the base {icon: "burocratik", message: "We are Büro"}, set pushes and returns a remover, and the base cannot be removed. 11. Event types: hover returns early on touch screens, intersection defaults to rootMargin "-70% 0% -25% 0%", custom, and the footer preset; v-bot:event is used 8 times in the homepage's modules. 12. Messages: "We are Büro", "Open menu", "That’s Bach, btw!", "Take your time" and "Don't stop now! Click for more!" read by evals; "A glimpse of our latest work, fresh and minty" on the phone; "Not quite my tempo", "Oh yes, Büro does branding too" (an intersection message) and "Yes, '99 is right" (a hover message with the exploding-head icon) are in the modules; the window-blur set and the 10 s and 2 s welcome-back are in source. 13. Roll timings: the quoted leave and enter configs, plus delay:.2 on the incoming icon and delay:.23 on the incoming words in the Bot module, so the 930 ms total holds. 14. Icons: the list has 45 entries including none, so 44 named icons. 15. Click area width and offsets: calc(navbar-width + 16px) = 591.47 px, right -24 px, top -16 px (computed); any click on the bar opens the sheet. 16. No awake state and no shrink on scroll (bar-04-scrolled.png). 17. Chip return after closing: background xPercent 101 → 0 over 1 s expo.out, label yPercent 101 → 0 over 0.55 s power3 after 0.225 s. 18. Open timeline: every row of the table against the quoted source. 19. Recede: computed matrix(0.9755, …) and opacity 0.667 on .page-content, data-blurred, inert, lenis-stopped, Escape on the key stack. 20. Close timeline (0.52 s skin, 0.49 s content, 0.3 s opacity, recede back over 0.52 s, message and chip at 0.3 s); frame 00 of menu-close-realtime-sheet.png shows the skin mid-collapse. 21. Inside the sheet: thumbnail 87.4 → 99.7 px at 1440 from the clamps over 0.3 s, label 8 px over 0.2 s, row gradient at 0.025 opacity, child label at 0.66, the current page at brightness(0.5) (probe) and not clickable, socials 0.5em over 0.175 s. 22. Load handoff: the four steps and timings in source, icons cycling every 260 ms; the frames show the greeting and then the docked bar on /recognition. 23. Video-control morph: a navbar-morph label with 0.363 s power4.inOut in source. 24. Phone: tagline hidden under 743 px (CSS and phone-02-menu-open.png), no chip, the long message running under the plus (phone-bar-rest-vs-long-message.png). 25. Accessibility: aria-label, the inert sheet, aria-hidden copies, Escape, no live region, the data-motion-fallback rules.

Newsletter (13). 1. Geometry: form at x 965.3; line 1 414.6 × 21.09; input 220.1 × 21.09. 2. Type: 17.575 px, line-height 21.09 px, letter-spacing -0.703 px, Commercial Gräphik Web 400 (computed). 3. Placeholder black at opacity 0.5 (computed). 4. Input: no border, padding 0, outline none, white background, black caret, autocomplete="email", no label and no aria-label. 5. Phone: a 252 px column at x 86.75, Send under the address (y 668.5 against 645.3). 6. The DOM block matches formAfter apart from the data-hidden flags (see correction 19). 7. Focus changes nothing: nl-01-before.png and nl-02-focus.png are byte-identical, and the focused input reads outline-style: none. 8. Typing: Send goes from opacity 0 to 1 with no transition, the consent line fades over 0.2 s cubic-bezier(0.215, 0.61, 0.355, 1), sits at bottom: -35px in 13 px text; the underline is 1.156 px at 17.575 px, so 0.066em. 9. Send hover underline timings (source). 10. Error colour #dc3429 with the placeholder at opacity 1 (CSS). 11. Submit stub: preventDefault, two console.log calls, 2 s, then "I already have you mail" / "Gotchaaa" for 4 s, no request, action never called, strings hard-coded. 12. Not in the sheet: the navbar template has no form; bar-stage-drawers.md (line 8) and components-to-copy.md do place it there, so the README's correction of them stands. 13. The consent checkbox's :focus-visible ring, 3 px at 30 % black (CSS).

Cursor (12). 1. Box: 48 × 48, fixed, top and left -24 px, pointer-events: none, z-index: 9999 (computed), shown only under (hover: hover) and (pointer: fine). 2. Six states as inline SVGs switched by data-cursor with scale(0) and opacity: 0. 3. The hand: white fill, a black 2.5 px stroke and the same stroke at stroke-opacity="0.2" (DOM); the SVG sits at 9.59 and 4.80 px, so 20 % and 10 % (computed). 4. Pressed: body:active swaps to the -active drawing with no transition; the crop of cursor-04-pressed-on-bar.png shows the bent finger next to the straight one of cursor-01. 5. Position: a passive mousemove coalesced to one call per frame by module 35's h (cancelAnimationFrame, then requestAnimationFrame), written straight into translate3d; the computed transform equals the mouse position (560, 846). 6. Stack: v-pointer pushes on mouseenter, pops on mouseleave, forwards clicks, and is skipped on touch screens. 7. cursor: none on 435 to 437 homepage elements across three probes; no url() cursor rule. 8. Tilt magnitudes and timing: factors 4, 4 and 5, clamp ±5 px, 0.25 s power2, settle over 0.5 s power4 after 100 ms (signs corrected below). 9. Eyes: ranges ±2 px and -12 to 3 px, quickTo 0.25 s, recentre after 100 ms, blink scaleY .1 for 0.1 s each way and on click. 10. Tornado (motion path, 0.4 s power2.out) and viewcase (label 0.2 s, inner 0.15 s later) in source. 11. Cards: four links of 77.97 × 116.47 at x 965, 1053, 1141 and 1229 (10 px apart) in ._manifesto .accolades on the homepage, under "Our Accolades". 12. States read by evals: eyes over the hero, pointershift over the bar and the card, none off the card; cursor-01-hand-over-card.png shows the hand on the second card with "That’s Bach, btw!" on the bar.

Flow, shots and references (8). 1. Slow motion: the evals return "gsap 3.12.2 timeScale 0.1", "0.04" and "0.06"; the second slow-down of the menu run returned "no-require", so menu-close-run2 did run at normal speed. 2. intro-home-slowmo-sheet.png shows "Hello", then the glyph and "We are Büro", and ends before the curtain; intro-recognition-realtime-sheet.png shows the greeting, then the page with its heading revealing and the bar. 3. menu-open-slowmo-sheet.png shows the skin growing, the content arriving and the labels rising row by row; menu-open-realtime-sheet.png is 14 fully open frames over the reel. 4. Page to page: the 6 % frames show the new page sliding up over an unchanged old page, the chip going blank and then "Recognition", the heading revealing line by line and "Move that mouse…" reaching the bar in the last frames; the quoted source gives y from the viewport height to 0 over 0.9 s power3.inOut after 0.1 s, the black body and the clip-path pin. 5. Counters: v-motion with yPercent: 115, expo, stagger 0.05 s, duration 0.9 + 0.05 i. 6. The photo trail with its sound is desktop only; bar-04-scrolled.png shows the trail at "18 fkn Years". 7. Captions that match their pictures: bar-01, bar-04, bar-05, menu-02, cursor-01, cursor-04, cursor-hand-eyes-pressed-crops, nl-01, nl-02, nl-states-crops, bar-bot-roll-slowmo-strip (glyph sinking, words lifting), phone-02-menu-open, phone-bar-rest-vs-long-message, the five contact sheets listed above. 8. The owner's quotes in section 1 match rows 6, 9 and 15 of INSPIRATION.md word for word.

Corrections, verifier, 2026-10-22

Each is corrected in place in README.md and, where the statement also appeared there, in component.json.

1. GSAP SplitText. Said: GSAP 3.12.2 "with ScrollTrigger, CustomEase, SplitText and MotionPathPlugin" (component.json listed "SplitText"). The only modules carrying "3.12.2" are the GSAP core (module 3), ScrollTrigger with Observer (46), CustomEase (134) and MotionPathPlugin (397); none has SplitText's charsClass or linesClass, and all six modules that name SplitText import it as a Vue component from module 41. Now: no GSAP SplitText; the splitting is the site's own SplitText component.
2. Number of Material 3 eases. Said "ten". There are nine create("m3…") calls in the loaded modules and in the quoted source (emphasized, standard and legacy, each plain, accelerate and decelerate).
3. Where three.js runs. Said "on /work and /recognition only". /studios also loads 89d5fef.js, sets window.__THREE__ to "171", loads a Lines.worker web worker and has a 1440 × 946 canvas in a .webglContainer. /recognition loads a Points.worker for its dot field (on /work and /recognition the canvas gives the probe no context, and transferControlToOffscreen is among the modules on all three pages, so the drawing is most likely done offscreen in the worker), and its 2880 × 1800 canvas is a backing store at twice the 1440 × 900 CSS size on a display of device pixel ratio 1 (the site doubles it; the capture did not). component.json three_d updated.
4. "Audio waveforms". Said the homepage's canvas.wave elements are audio waveforms. They sit inside .line-divider elements (on /studios too) and nothing read ties them to audio. Now: wave line dividers.
5. data-n-head on every head tag. 25 of the 45 head tags in the served HTML carry data-n-head="ssr"; the 15 preload links, the title, the style block and three scripts carry none.
6. Scrollbar rules. The README quoted the WebKit rule as a bare ::-webkit-scrollbar{width:0;height:0}, which would hide every scrollbar in Chrome and Safari. It is .no-scrollbar::-webkit-scrollbar{width:0;height:0}, with a transparent thumb and track. The conclusion (native page scrollbar) held. Added: sliders draw a 2 px DOM track (._slider > [data-slider-scrollbar], black thumb, cursor: grab), which is not a scrollbar style.
7. Selection colour. Said "::selection is blue #105df1". There are two global ::selection rules, blue #105df1 and then black; the later one wins, and the computed ::selection background of a paragraph is rgb(0, 0, 0). Selected text is white on black.
8. $audio on blur. Said it "disables on window blur". It also comes back on the next focus (addEventListener("focus", enable, {once: true})) if it was on.
9. --blr-s. Said "--blr-s = 2 × margin / width (0.9755 at 1440 px)". --blr-s is 0.0245 at 1440 px (the agent's own pageState eval: blrS: "0.0245"); 0.9755 is the resulting scale.
10. The black around the receded page. Said "a black body and 20 px rounded corners". body stays transparent while the sheet is open (bodyBg: rgba(0, 0, 0, 0)); the black is the ._page background and its blur-mask bars, and the 20 px rounded corners are the top two (border-top-left-radius, border-top-right-radius).
11. The click area's height. Said "the bar's height plus 32 px". The span's height: calc(100% + 32px) is relative to the 18 px button, so 50 px; the span measures 591.47 × 50 at x 424.25, y 821.61, overhanging the 46 px bar by 8 px a side and about 2 px top and bottom, and the bar's overflow: hidden clips it. "The whole bar is the button" holds.
12. A quoted message. The /recognition message is "Move that mouse, shake it! Yeah!!" (two exclamation marks, read from the bar on /recognition), not "Yeah!".
13. Tilt signs. Said rotateX = -4·dy, rotateY = -4·dx, rotateZ = -5·dx. The $mouse watcher passes (current, previous) and the handler clamps previous minus current, so with dx and dy the movement since the previous frame the formulas are rotateX = 4·dy, rotateY = 4·dx, rotateZ = 5·dx. Measured at 0.2 speed: moving right gave rotate(10.737deg) rotateY(8.5895deg), moving down rotateX(6.0289deg); verify-02-hand-moving-right.png shows the hand leaning clockwise. component.json updated.
14. Tilt maximum. Said "about 20° at most". The clamp allows 20° around X and Y and 25° in the plane.
15. Pupils. Said "the pupils follow the motion". They shift against it, like inertia: x = -dx/2 clamped to ±2 px, y = -dy clamped to -12 to 3 px. Measured: moving right gave x -1.129, moving down y -5.452. component.json updated.
16. Blinking. Said "at random every 1 to 4 s, sometimes sooner". The blink timer restarts on every mouse move, so the eyes blink 1 to 4 s after the pointer stops and then keep that rhythm; one wait in ten is instead 250 × Math.random() × 50 ms, anything from 0 to 12.5 s. component.json timings updated.
17. Capture frame rates. Said real-time bursts "ran at 0.6 to 5 s per frame" and, in the bar's gotchas, "0.6 s with the bar closed and 2 to 5 s with the sheet open". Recomputed from the burst timestamps: 0.12 to 4.24 s per frame across the real-time bursts (medians 0.29 to 2.67 s per run); about 0.5 to 0.7 s median with the sheet closed and 1.8 to 4.2 s with it open.
18. bar-02-pointer-on-bar.png caption. Said the message is "mid-roll to 'Open menu'". The 3x crop shows the up arrow and "Open me" at rest on the baseline, with the hand covering "nu": the roll had finished.
19. menu-01-open.png caption. Lists the minus, which sits under the hand cursor in that frame; the caption now says so.
20. Newsletter DOM heading. The block is headed "DOM after typing" but shows data-hidden="true" on the button and the consent fieldset, flags that exist only before typing (formAfter has neither). The heading now says the flags were put back in.
21. Newsletter loading state. Said "the form goes inert at 0.3 opacity". The form goes inert and disabled; its fieldsets drop to 0.3 opacity and the Send button, through data-loading, to 0.4 while its underline loops. component.json state updated.
22. Time before the load handoff (component.json, load transition). Said "about 1.8 s before the handoff". The greeting timeline is 1.8 s including its 0.2 s delay, then a 0.3 s setTimeout, then the handoff timeline's own 0.2 s delay: about 2.3 s before the handoff moves, longer while assets load.

Also changed: the "small WebGL program in the vendor chunk" item left "Not confirmed" in both files and is now a fact in the stack table (held item 16). A line under the README's title points here.

Not confirmed

1. Nuxt release. No Nuxt version string in the HTML or the modules; Vue 2.7.16 suggests Nuxt 2.17.
2. vue-meta 2.4.0. One homepage module carries "2.4.0"; it was not tied to vue-meta here.
3. Size of 89d5fef.js (594 KB): not re-measured.
4. Old page during a page change (the desktop "fancy" leave): unchanged from the README.
5. Send underline hover replay: unchanged; note that the pointer state over Send is none.
6. Newsletter submit: never submitted, as the rules require.
7. The bar as video controls beyond the 0.363 s power4.inOut morph found in source.
8. Reduced motion under emulation. The absence is now confirmed in the CSS, the HTML and all 724 homepage modules; behaviour under emulated prefers-reduced-motion: reduce was not run.
9. The page scrollbar in a real browser: all captures run with --hide-scrollbars.
10. Mid-roll requests queue and only the latest is kept: the transition.request code was not read.
11. Child links growing to 1 + n/7 fr: not in the quoted CSS; set by script that was not read.
12. The .m-c and .m-t mask values (margin-bottom: -.16em, padding-bottom: .08em, will-change: transform): not re-checked.
13. Plain hand on ._award, event buttons and footer links, and grab on sliders: not re-checked.
14. Rive assets playing on mouseenter: not checked.

Seen in passing, not added to the playbook: Ctrl+Shift+D toggles a window.debug console log; on /work the bar says "WebGL, baby! No flying magic carpets here."

Tidiness

• No tmp/ folder is left: the verifier's scratch (eval scripts, the HTML and its headers) was deleted at the end of this pass.
• No fonts, images or videos copied from the site: the folder holds screenshots and contact sheets (PNG), burst frames converted from captures (JPG), JSON, Markdown and text excerpts. The largest file is shots/menu-04-closed.png at 1.59 MB; nothing is over 2 MB. Every file in sources/ is under 50 KB (the largest is 26 KB), as are the verifier's meta.json files (the largest is 36 KB).
• One naming defect, left as found: all 146 burst frames under shots/bursts/ carry a literal * in their names (for example bot-roll-slowmo-*-0.jpg), an unexpanded pattern from the conversion step. Finder shows them fine, but shell globs and scripts will trip on them; a rename to <burst>-00.jpg is suggested.