/* store.css: the core under the stateful stylesheets. A module imports it: @import url(../../store.css); the board sits two folders above a library's module (libraries//). Store: the memory under the stateful stylesheets (nada.css, random.css). A cell holds a number as the size of a hidden box that takes no room (a module picks its px a step), read back through a view timeline 1,048,576px long: a fixed box, view-timeline-inset: -524288px calc(100% - 524288px); a box inside an element's own scrollport, inset 0px calc(100% - 1048576px), the box within its first 1,048,576px. Two reads, five of each, so one element can read up to five cells each way: - store-0 to store-4, one animation each, two numbers: the size is --store-f0 - --store-n0 px (f1 and n1 for store-1 ...), 0 for no box or a name not linked; exact in whole px to 345,664 in Chrome 155 (WebKit 26.4 to 500,000 and in half px). One animation a cell, so a list of names repeats right: animation-timeline: var(--in). - store-s0 to store-s4, two animations each (store-s0 linear both, store-s0-far linear both; animation-composition: replace, add) into one number: --store-s0 is twice the size, in half px, exact in Chrome and WebKit to 999,999. Hiding: animation: store-off collapses an element in place (no size, padding, margin or border, invisible; its --store-hide, hidden by default: collapse for table rows), keeping what is inside alive. A box that leaves the flow between two others (display: none, position: absolute) in a button or a flex box with text makes WebKit 26.4 rebuild its parent's boxes, and every cell in them stops reading. Clock: a clock in steps, 60 a second, kept from one frame to the next, so it neither sprints after a stall nor drifts off the screen's beat. The time: animation: clock-now 90s linear infinite gives --clock-now, steps on a dial of 5,400 (90 s). Two uses: the dial alone (a wave on --clock-now), or the kept clock below (random.css), which counts steps across slow frames but not whole 90 s rounds: a page that draws no frame for longer (a hidden tab) comes back off by whole rounds (from the arithmetic, not measured). The mark: a store cell in an overflow: hidden element, 250,000px in, holding the clock as its size (nothing else may size it): view-timeline: --A inline, --B block; view-timeline-inset: 0px calc(100% - 1048576px); width: calc((var(--clock-x) + 1) * 64px); height: calc((var(--clock-y) + 1) * 0.5px); Reading it next frame, with two of the store's one-number reads (say store-s0 and store-s0-far on --A, store-s1 and store-s1-far on --B): --clock-last: max(0, var(--store-s0) / 128 - 1); --clock-ticks: max(0, var(--store-s1) - 1) (max: no mark yet reads 0); The step, where they are read: --clock-since: calc(mod(var(--clock-now) - var(--clock-last) + 1, 5400) - 1); +1 -1: a tiny negative must not wrap --clock-go: max(0, sign(var(--clock-since) - 0.75)); 1 in a frame that steps --clock-due: max(var(--clock-go), round(down, var(--clock-since))); every whole step that passed --clock-rest: calc(0.1 * var(--clock-go) * (var(--clock-since) - var(--clock-due))); a tenth of the leftover --clock-x: mod(var(--clock-last) + var(--clock-due) + var(--clock-rest), 5400); --clock-y: mod(round(var(--clock-ticks)) + var(--clock-due), 1000000): steps of time passed, slow frames' too; with --clock-go for --clock-due, steps taken. */ @property --store-n0 { syntax: ''; inherits: false; initial-value: 0; } @property --store-f0 { syntax: ''; inherits: false; initial-value: 0; } @property --store-n1 { syntax: ''; inherits: false; initial-value: 0; } @property --store-f1 { syntax: ''; inherits: false; initial-value: 0; } @property --store-n2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-f2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-n3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-f3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-n4 { syntax: ''; inherits: false; initial-value: 0; } @property --store-f4 { syntax: ''; inherits: false; initial-value: 0; } @property --store-s0 { syntax: ''; inherits: false; initial-value: 0; } @property --store-s1 { syntax: ''; inherits: false; initial-value: 0; } @property --store-s2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-s3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-s4 { syntax: ''; inherits: false; initial-value: 0; } /* A cell's two edges along the timeline; their difference is its size. */ @keyframes store-0 { entry 0% { --store-n0: 1048576; shape-margin: 0px; } exit 0% { --store-n0: 0; } entry 100% { --store-f0: 1048576; } exit 100% { --store-f0: 0; shape-margin: 0.0001px; } } @keyframes store-1 { entry 0% { --store-n1: 1048576; shape-margin: 0px; } exit 0% { --store-n1: 0; } entry 100% { --store-f1: 1048576; } exit 100% { --store-f1: 0; shape-margin: 0.0001px; } } @keyframes store-2 { entry 0% { --store-n2: 1048576; shape-margin: 0px; } exit 0% { --store-n2: 0; } entry 100% { --store-f2: 1048576; } exit 100% { --store-f2: 0; shape-margin: 0.0001px; } } @keyframes store-3 { entry 0% { --store-n3: 1048576; shape-margin: 0px; } exit 0% { --store-n3: 0; } entry 100% { --store-f3: 1048576; } exit 100% { --store-f3: 0; shape-margin: 0.0001px; } } @keyframes store-4 { entry 0% { --store-n4: 1048576; shape-margin: 0px; } exit 0% { --store-n4: 0; } entry 100% { --store-f4: 1048576; } exit 100% { --store-f4: 0; shape-margin: 0.0001px; } } /* One number: the near edge over entry 0% to exit 0% and the far one over entry 100% to exit 100% add up to twice the size. */ @keyframes store-s0 { entry 0% { --store-s0: 0; shape-margin: 0px; } exit 0% { --store-s0: 2097152; shape-margin: 0.0001px; } } @keyframes store-s0-far { entry 100% { --store-s0: 0; shape-margin: 0px; } exit 100% { --store-s0: -2097152; shape-margin: 0.0001px; } } @keyframes store-s1 { entry 0% { --store-s1: 0; shape-margin: 0px; } exit 0% { --store-s1: 2097152; shape-margin: 0.0001px; } } @keyframes store-s1-far { entry 100% { --store-s1: 0; shape-margin: 0px; } exit 100% { --store-s1: -2097152; shape-margin: 0.0001px; } } @keyframes store-s2 { entry 0% { --store-s2: 0; shape-margin: 0px; } exit 0% { --store-s2: 2097152; shape-margin: 0.0001px; } } @keyframes store-s2-far { entry 100% { --store-s2: 0; shape-margin: 0px; } exit 100% { --store-s2: -2097152; shape-margin: 0.0001px; } } @keyframes store-s3 { entry 0% { --store-s3: 0; shape-margin: 0px; } exit 0% { --store-s3: 2097152; shape-margin: 0.0001px; } } @keyframes store-s3-far { entry 100% { --store-s3: 0; shape-margin: 0px; } exit 100% { --store-s3: -2097152; shape-margin: 0.0001px; } } @keyframes store-s4 { entry 0% { --store-s4: 0; shape-margin: 0px; } exit 0% { --store-s4: 2097152; shape-margin: 0.0001px; } } @keyframes store-s4-far { entry 100% { --store-s4: 0; shape-margin: 0px; } exit 100% { --store-s4: -2097152; shape-margin: 0.0001px; } } @keyframes store-off { from, to { visibility: var(--store-hide, hidden); font-size: 0; line-height: 0; min-width: 0; min-height: 0; max-width: 0; max-height: 0; overflow: hidden; padding: 0; margin: 0; border-width: 0; } } @property --clock-now { syntax: ''; inherits: false; initial-value: 0; } @property --clock-last { syntax: ''; inherits: false; initial-value: 0; } @property --clock-ticks { syntax: ''; inherits: false; initial-value: 0; } @property --clock-go { syntax: ''; inherits: true; initial-value: 0; } @property --clock-x { syntax: ''; inherits: true; initial-value: 0; } @property --clock-y { syntax: ''; inherits: true; initial-value: 0; } @keyframes clock-now { from { --clock-now: 0; } to { --clock-now: 5400; } } /* Press: page-wide transport from a pressed element to a pressed cell. --store-press-x carries the amount, --store-press-y the kind, --store-press-z a place or address. Each lane is a box's size: (number + 1) * 0.5px. The half-px read is 0 when absent, 1 for a published zero (0.5px), so absent and zero are distinct. if your own CSS sets timeline-scope on html, add these three names. */ :root { timeline-scope: --store-press-x, --store-press-y, --store-press-z; } /* the names a page lists for its named values (named.css, named mode), on body: a bad list (a missing comma, a word that is not a dashed ident) invalidates only this declaration, so named reads stop and presses go on */ body { timeline-scope: var(--store-names, --store-no-names); } /* Cell: one or two numbers kept from frame to frame on any element, with no wiring of your own:
.count { --store-next: calc(var(--store-value) + 1); } --store-value and --store-y are the numbers (whole, 0 to 999,999), for the element and what is inside it; --store-next and --store-next-y are the numbers to store for the next frame (rounded, clamped to 0..999,999; not set: that number holds). Both are read in the same frame, so each next sees both old numbers. It steps once a frame. --store-start and --store-start-y (0) are the numbers before the first ones stored are read back (registered, so a cell's start does not reach a cell inside it); --store-ready is 0 until then, 1 after, so "no cell yet" is not 0. Actions, for state that follows the page (a press, a hover): what the element sets while it holds acts once, in the frame it starts, and wins that frame over --store-next:
.cart { --store-max: 5; } .cart:has(.add:active) { --store-add: 1; } a press adds 1 (held a second: still 1) .cart:has(.remove:active) { --store-add: -1; } a press takes 1 away .cart output::after { content: counter(store); } the number, as text @container style(--store: 0) { .remove { opacity: 0.4; } } branch on it --store-add (signed) or --store-set (a number) is the action; --store-min and --store-max (0, 999,999) clamp every number stored. The cell sets counter-reset: store on itself (write your own counter-reset there and add store to it) and --store, the number again, for style() queries in it and its descendants. A cell's actions and limits do not reach a cell inside it. Put the cell on a wrapper, not on the button (a fixed box in a button with text makes WebKit rebuild the button). Measured (cart-cost.mjs, 1,000 idle carts): the :has() rule costs nothing beside none at all (Chrome 35.0 / 34.4 ms of style a frame, WebKit 139.7 / 139.8 ms a frame); gating it by :is(:active, :focus-within) saves nothing. Presses from the keyboard: Space on a button sets :active, Enter, a screen reader's click and element.click() set none. libraries/press/press.js (optional, beside this sheet) presses those by data-store-press, for two frames where :active would be; a press written .cart:has(.add:is(:active, [data-store-press])) takes them. A cell takes a press in the first frame it is seen (one-frame presses: 40 of 40 in Chrome and WebKit, 2026-10-21), so it asks the shim for no more (--store-press-frames: 2 here made the shim press again a tap seen one frame, which the cell had counted). The cell is the element's read animations and timeline-scope and its ::before, a fixed, hidden box: its width is the first number and its height the second (0.5px a unit), its left edge minus the tick of the frame that stored them (so both edges stay inside the read range at every tick), its top edge the press it stored. A fixed box's edges read through the page's scroller, so the element also reads the page's scroll offset (scroll(root), 0px to 1,048,576px: the offset in px), added into the near reads (one number each, no registration more: WebKit's signed cells read late with two more); a table, its own scroller, sets --store-scroller: nearest for the cells inside it. (Before, a scrolled page read its scroll as a stored press, and no cell rested: 120 restyles a second each in Chrome.) The element reads them back next frame (from/to keyframes over the near and far ranges, near and far added); the box holds the clock and the write. Another stateful part goes on another element. Cells nest four deep (each depth reads on timelines of its own names: WebKit 26.4 read a nested cell on the same names as 0). The tick (1,000 a second, round at 100,000, a time animation on the box alone, so importing the core starts nothing) is there because Chrome styles twice a frame and the second time reads the box the first wrote: a box whose stored tick is this frame's holds. When both rounded, clamped nexts equal the stored pair, the box keeps its size and tick, and its box's clock stops, so a holding cell restyles nothing a frame (Chrome, 1,000 cells counting: 102 ms of style a frame with the clock on the box, 114 on the element, 2026-10-18; 178 on 2026-10-20, after presses, limits, signed cells and named values: BOARD.md). The first box stores the starts; stepping begins once it is read. Reads are rounded: under page zoom the box is a fraction of a px off. --store-value, --store-y and --store-ready are not registered, so a transition: all (a reduced-motion reset) never animates them; the box takes no transition (WebKit would store it a frame late). Without timeline-scope the cell shows the clamped, rounded starts and ready 0, with no box or animation (Firefox's default). Patterns (cell-check.mjs runs each; a condition is a sign() or clamp(), since WebKit has no if()): a counter, one a frame: .c { --store-next: calc(var(--store-value) + 1); } a countdown that stops: .c { --store-start: 10; --store-next: max(0, var(--store-value) - 1); } a cycle of 4: .c { --store-next: mod(var(--store-value) + 1, 4); } a step every 6 frames: .c { --store-next-y: mod(var(--store-y) + 1, 6); --store-next: calc(var(--store-value) + max(0, sign(var(--store-y) - 4.5))); } ping-pong 0..5 and back (second number: going down): .c { --store-next-y: clamp(0, var(--store-y) + clamp(0, sign(var(--store-value) - 4.5), 1) - clamp(0, sign(0.5 - var(--store-value)), 1), 1); --store-next: calc(var(--store-value) + 1 - 2 * var(--store-next-y)); } ease up to 500, an eighth of the way a frame: .c { --store-next: calc(var(--store-value) + round(up, (500 - var(--store-value)) / 8)); } Fibonacci: .c { --store-start-y: 1; --store-next: var(--store-y); --store-next-y: min(999999, var(--store-value) + var(--store-y)); } Collatz from 27, counting its steps: .c { --store-start: 27; --c-done: clamp(0, sign(1.5 - var(--store-value)), 1); --store-next: calc(var(--c-done) * var(--store-value) + (1 - var(--c-done)) * (mod(var(--store-value), 2) * (3 * var(--store-value) + 1) + (1 - mod(var(--store-value), 2)) * var(--store-value) / 2)); --store-next-y: calc(var(--store-y) + 1 - var(--c-done)); } two numbers at once, Euclid's gcd: .c { --store-start: 1071; --store-start-y: 462; --store-next: calc(sign(var(--store-y)) * var(--store-y) + (1 - sign(var(--store-y))) * var(--store-value)); --store-next-y: calc(sign(var(--store-y)) * mod(var(--store-value), max(1, var(--store-y)))); } show it: .c b { counter-reset: v var(--store-value); } .c b::after { content: counter(v); } */ @property --store-start { syntax: ''; inherits: false; initial-value: 0; } @property --store-start-y { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-t { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-now { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-ok { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-v { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-v2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-go { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-w { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-h { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-l { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-at { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-was { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-s { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-down { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-fresh { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-id { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-lo { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-hi { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-n { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-n2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-d { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-p { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-p2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-o { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-hold { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-write { syntax: ''; inherits: false; initial-value: 0; } /* Without view timelines (release Firefox 158): presses only. The number is --store-cell-ff on the cell, held by one transition (the element's own properties and everything inside it see a transitioned value; style() does not, so there is no resting and no gate on it). Idle: target --store-start and a hold (delay 1e7 s, easing 0: the start value shows). --store-add a while pressed: target a 2^30, easing 2^-30, so x + (a 2^30 - x) 2^-30 = x + a in single precision. --store-set c: target c + 2^-30 (so it differs from an idle target), easing 1. A press acts once, however long held. Not here: --store-next (a cell can't read its own number to set its own target), --store-min / --store-max, the second number (it is its start). The cell's transition is store.css's (!important, against the reduced-motion reset). */ @supports not (timeline-scope: --a) { /* registered only here: registered for every engine, WebKit's signed cell-check case failed 2 runs of 2 (late reads), 0 of 2 without */ @property --store-cell-ff { syntax: ''; inherits: true; initial-value: 0; } @property --store-cell-ff-a { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-ff-s { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-ff-on { syntax: ''; inherits: false; initial-value: 0; } @property --store-cell-ff-e { syntax: ''; inherits: false; initial-value: 0; } [data-store] { --store-cell-ff-a: round(var(--store-add, 0)); --store-cell-ff-s: calc(1 - clamp(0, sign(var(--store-set, -1000000) + 999999.5), 1)); /* 1: no set */ --store-cell-ff-on: min(1, abs(var(--store-cell-ff-a)) + 1 - var(--store-cell-ff-s)); --store-cell-ff-e: calc(var(--store-cell-ff-on) * max(var(--store-cell-ff-s) * 9.313225746154785e-10, 1 - var(--store-cell-ff-s))); /* not s e + 1 - s: Firefox's calc is single precision, 1 + 2^-30 is 1 */ --store-cell-ff: calc((1 - var(--store-cell-ff-on)) * round(var(--store-start, 0)) + var(--store-cell-ff-on) * (var(--store-cell-ff-s) * var(--store-cell-ff-a) * 1073741824 + (1 - var(--store-cell-ff-s)) * (round(var(--store-set, 0)) + 9.313225746154785e-10))); transition-property: --store-cell-ff !important; transition-duration: calc(var(--store-cell-ff-on) * 1e7s) !important; transition-timing-function: linear(var(--store-cell-ff-e), var(--store-cell-ff-e)) !important; transition-delay: calc((1 - var(--store-cell-ff-on)) * 1e7s) !important; transition-behavior: normal !important; --store-cell-v: round(var(--store-cell-ff)); --store-cell-v2: round(var(--store-start-y, 0)); --store-value: var(--store-cell-v); --store-y: var(--store-cell-v2); --store-ready: 1; --store: var(--store-cell-v); counter-reset: store var(--store-value); } :where([data-store] *) { --store-add: initial; --store-set: initial; --store-press-id: initial; --store-min: initial; --store-max: initial; --store-signed: initial; } /* a cell's actions stay its own */ } /* a holding cell rests: its box reads the hold (--store-cell-idle, an inherited copy) and its clock waits in a 1e9 s delay: as free as removed, and paused is not (WebKit, 100 cells at rest: 10.6 ms a frame paused, 7.7 removed, 2026-10-21; a style query rule did the removing, and WebKit 26.4 answers none from a display: contents element's ::before, so a cell in a custom tag never rested there: nada's steppers in tags 13.4 ms a frame, 10.5 waiting). The left edge goes to tick 100,001, which no clock reaches (0 to 99,999), so the clock, back on a change, never meets the tick it stored (without it a follower woke every second time 2 frames late in WebKit) */ @supports (timeline-scope: --a) { @keyframes store-cell-s0 { from { --store-s0: 0; } to { --store-s0: 2097152; } } @keyframes store-cell-s0-far { from { --store-s0: 0; } to { --store-s0: -2097152; } } @keyframes store-cell-s1 { from { --store-s1: 0; } to { --store-s1: 2097152; } } @keyframes store-cell-s1-far { from { --store-s1: 0; } to { --store-s1: -2097152; } } @keyframes store-cell-near { from { --store-n0: 1048576; } to { --store-n0: 0; } } @keyframes store-cell-near-y { from { --store-n1: 1048576; } to { --store-n1: 0; } } @keyframes store-cell-scroll { from { --store-n0: 0; } to { --store-n0: 1048576; } } @keyframes store-cell-scroll-y { from { --store-n1: 0; } to { --store-n1: 1048576; } } @keyframes store-cell-clock { from { --store-cell-t: 0; } to { --store-cell-t: 100000; } } [data-store] { timeline-scope: --store-cell-x, --store-cell-y; animation: store-cell-s0 linear both, store-cell-s0-far linear both, store-cell-s1 linear both, store-cell-s1-far linear both, store-cell-near linear both, store-cell-near-y linear both, store-cell-scroll linear both, store-cell-scroll-y linear both; animation-composition: replace, add, replace, add, replace, replace, add, add; animation-timeline: --store-cell-x, --store-cell-x, --store-cell-y, --store-cell-y, --store-cell-x, --store-cell-y, scroll(var(--store-scroller, root) inline), scroll(var(--store-scroller, root) block); animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 0% exit 0%, 0px 1048576px, 0px 1048576px; animation-duration: auto !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; animation-play-state: running !important; /* against the reduced-motion reset */ --store-cell-ok: clamp(0, sign(var(--store-s0) - 0.5), 1); /* no box read yet: store-s0 is 0 */ --store-cell-o: calc(clamp(0, round(var(--store-signed, 0)), 1) * 500000); /* signed: stored as the number + 500,000 */ --store-cell-v: calc(var(--store-cell-ok) * clamp(0, round(var(--store-s0) - 1), 999999) + (1 - var(--store-cell-ok)) * clamp(0, round(var(--store-start)) + var(--store-cell-o), 999999)); --store-cell-v2: calc(var(--store-cell-ok) * clamp(0, round(var(--store-s1) - 1), 999999) + (1 - var(--store-cell-ok)) * clamp(0, round(var(--store-start-y)) + var(--store-cell-o), 999999)); --store-cell-at: round(524288 - var(--store-n0)); /* the stored tick (the box's left edge; the scroll added back into the read) */ --store-cell-was: clamp(0, round(524288 - var(--store-n1)), 499999); /* the press it stored (0: none): the box's top edge */ /* a press: --store-add or --store-set set (while :active, say) acts once, in the frame it starts; it wins that frame */ --store-cell-s: clamp(0, sign(var(--store-set, -1000000) + 999999.5), 1); /* 1: a set */ --store-cell-down: min(1, abs(sign(var(--store-add, 0))) + var(--store-cell-s)); /* which press: --store-press-id (1 to 499,999; 1 when unset), so a different press straight after another counts too */ --store-cell-id: calc(var(--store-cell-down) * clamp(1, round(var(--store-press-id, 1)), 499999)); --store-cell-fresh: calc(var(--store-cell-ok) * var(--store-cell-down) * min(1, abs(var(--store-cell-id) - var(--store-cell-was)))); /* a press not yet stored */ --store-cell-lo: clamp(0, round(var(--store-min, -500000)) + var(--store-cell-o), 999999); /* by default the whole range */ --store-cell-hi: max(var(--store-cell-lo), min(999999, round(var(--store-max, 999999)) + var(--store-cell-o))); --store-cell-n: clamp(var(--store-cell-lo), var(--store-cell-fresh) * (var(--store-cell-s) * (round(var(--store-set, 0)) + var(--store-cell-o)) + (1 - var(--store-cell-s)) * (var(--store-cell-v) + round(var(--store-add, 0)))) + (1 - var(--store-cell-fresh)) * (round(var(--store-next)) + var(--store-cell-o)), var(--store-cell-hi)); --store-cell-n2: clamp(0, round(var(--store-next-y)) + var(--store-cell-o), 999999); --store-cell-p: calc(var(--store-cell-v) - var(--store-cell-o)); --store-cell-p2: calc(var(--store-cell-v2) - var(--store-cell-o)); /* registered: style() sees a number */ --store-value: var(--store-cell-p); --store-y: var(--store-cell-p2); --store-ready: var(--store-cell-ok); --store: var(--store-cell-p); --store-cell-sv: var(--store-cell-v); --store-cell-sv2: var(--store-cell-v2); /* as stored, for the box */ --store-cell-last: var(--store-cell-at); --store-cell-next: var(--store-cell-n); --store-cell-next-2: var(--store-cell-n2); --store-cell-prev: var(--store-cell-was); --store-cell-press: var(--store-cell-id); --store-cell-idle: var(--store-cell-hold); /* the hold, for the box (an inherited copy) */ /* 1 while ready and nothing would change (both nexts and the press equal what is stored): the box's clock stops */ --store-cell-hold: calc(var(--store-cell-ok) * (1 - min(1, abs(var(--store-cell-n) - var(--store-cell-v)) + abs(var(--store-cell-n2) - var(--store-cell-v2)) + abs(var(--store-cell-id) - var(--store-cell-was))))); } :where([data-store]) { --store-next: var(--store-value); --store-next-y: var(--store-y); counter-reset: store var(--store-value); } :where([data-store] *) { --store-add: initial; --store-set: initial; --store-press-id: initial; --store-min: initial; --store-max: initial; --store-signed: initial; } /* a cell's actions stay its own */ /* the clock and the write live on the box, so a holding cell's element has nothing that changes a frame */ [data-store]::before { content: ''; position: fixed; visibility: hidden; pointer-events: none; animation: store-cell-clock 100s linear infinite !important; animation-timeline: auto !important; animation-delay: calc(var(--store-cell-idle, 0) * 1e9s) !important; animation-play-state: running !important; --store-cell-now: mod(round(down, var(--store-cell-t)), 100000); /* a step writes on the clock's tick; a press writes in the frame it starts, not waiting for a resting clock to wake (4-5 frames to the new number in Chrome, now 1-2): both style passes of that frame see the same old number and the same stored press, so they write the same. Its release waits for the tick, so a press again a frame after a short release (the shim's, after a Space tap) is the same press. A press landing in a frame's last millisecond (WebKit) is written at that frame's tick, and the next frame, at the same tick, writes nothing: a set shows two frames before the next step (6 of 6 at 16 ms, 0 in Chrome; an add adds once: checks/probes/set-tick.mjs) */ --store-cell-go: calc(var(--store-ready) * max(min(1, abs(var(--store-cell-now) - var(--store-cell-last))), sign(var(--store-cell-press)) * min(1, abs(var(--store-cell-press) - var(--store-cell-prev))))); /* 0: no read yet, or nothing to write this frame (a release waits for the tick) */ --store-cell-w: calc(var(--store-cell-go) * var(--store-cell-next) + (1 - var(--store-cell-go)) * var(--store-cell-sv)); --store-cell-h: calc(var(--store-cell-go) * var(--store-cell-next-2) + (1 - var(--store-cell-go)) * var(--store-cell-sv2)); --store-cell-d: calc(var(--store-cell-go) * var(--store-cell-press) + (1 - var(--store-cell-go)) * var(--store-cell-prev)); --store-cell-write: max(1 - var(--store-ready), min(1, abs(var(--store-cell-w) - var(--store-cell-sv)) + abs(var(--store-cell-h) - var(--store-cell-sv2)) + abs(var(--store-cell-d) - var(--store-cell-prev)))); --store-cell-l: calc(var(--store-cell-write) * var(--store-cell-now) + (1 - var(--store-cell-write)) * var(--store-cell-last)); /* Firefox only: the first box (no read yet) stores tick 100,001, which no clock reaches, so the first frame read steps on the same tick: Firefox 159 sometimes runs that frame with the clock still at 0 (its start time pending), and the cell held a frame (cell-check, nest: 1 frame of 120 in 4 of 6 runs, 2026-10-31). Not in Chrome, whose second style pass of the first frame reads that box and would step twice (cell-check, gcd: 4 of 6 runs). Also Firefox only: the box is visible and translated back into the viewport (it paints nothing: no content, no background), since Firefox 159 runs a hidden or out-of-view box's clock about 2 times a second while no script reads the page (hidden in view, or visible out of view: 2; visible in view: 60; translate leaves the reads as they are: facts/visibility/frame-cell-firefox-unread.mjs) */ @supports (-moz-appearance: none) { --store-cell-l: calc((1 - var(--store-ready)) * 100001 + var(--store-ready) * (var(--store-cell-write) * var(--store-cell-now) + (1 - var(--store-cell-write)) * var(--store-cell-last))); visibility: visible; translate: calc((var(--store-cell-l) * (1 - var(--store-cell-idle, 0)) + 100001 * var(--store-cell-idle, 0)) * 1px) calc(var(--store-cell-d) * 1px); } left: calc((var(--store-cell-l) * (1 - var(--store-cell-idle, 0)) + 100001 * var(--store-cell-idle, 0)) * -1px); top: calc(var(--store-cell-d) * -1px); width: calc((var(--store-cell-w) + 1) * 0.5px); height: calc((var(--store-cell-h) + 1) * 0.5px); padding: 0 !important; border: 0 !important; margin: 0 !important; box-sizing: content-box !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; transition: none !important; view-timeline: --store-cell-x x, --store-cell-y y; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px); } /* a holding cell rests (its box's clock waiting, above): a change to its next or a press wakes it, and the clock, off the stored tick, writes in that frame (a follower: 1 frame from its input in WebKit and Chrome) (Chrome, 100 idle cells: 0 recalcs a frame) */ [data-store] [data-store] { timeline-scope: --store-cell-x2, --store-cell-y2; animation-timeline: --store-cell-x2, --store-cell-x2, --store-cell-y2, --store-cell-y2, --store-cell-x2, --store-cell-y2, scroll(var(--store-scroller, root) inline), scroll(var(--store-scroller, root) block); } [data-store] [data-store]::before { view-timeline-name: --store-cell-x2, --store-cell-y2; } [data-store] [data-store] [data-store] { timeline-scope: --store-cell-x3, --store-cell-y3; animation-timeline: --store-cell-x3, --store-cell-x3, --store-cell-y3, --store-cell-y3, --store-cell-x3, --store-cell-y3, scroll(var(--store-scroller, root) inline), scroll(var(--store-scroller, root) block); } [data-store] [data-store] [data-store]::before { view-timeline-name: --store-cell-x3, --store-cell-y3; } [data-store] [data-store] [data-store] [data-store] { timeline-scope: --store-cell-x4, --store-cell-y4; animation-timeline: --store-cell-x4, --store-cell-x4, --store-cell-y4, --store-cell-y4, --store-cell-x4, --store-cell-y4, scroll(var(--store-scroller, root) inline), scroll(var(--store-scroller, root) block); } [data-store] [data-store] [data-store] [data-store]::before { view-timeline-name: --store-cell-x4, --store-cell-y4; } /* A cell inside a wrapper that is its fixed boxes' containing block (transform, translate, filter, backdrop-filter, perspective, contain: paint, will-change: transform: css-position-3 ยง2.1) reads its box off by the wrapper's offset: counting, it steps twice a frame in Chrome and Firefox, and a held press acts every style pass. A wrapper (or any ancestor) with the attribute data-store-contained gives each cell inside it a second box, its ::after, fixed at 0, 0 of the same containing block, and the cell reads its box from that one instead of from the page's scroll, so the offset and the scroll cancel (1px: a 0 px box reads wrong in Chrome). It takes the cell's ::after, so not on a named cell that publishes through it (give that one --store-name-scope: following). (Chrome, WebKit, Firefox: a wrapper at x 8, scrolled, moved down 50, a filter wrapper at x 23, a 3 px border on the cell: 60 steps a second and one press 1; without it 120 and 120 in Chrome and Firefox: facts/transform/frame-cell-contained.mjs). An attribute, so it holds under a strict CSP, where a style attribute applies nothing. Cells outside it cost what they did (Chrome, 100 counting: 15.9 ms a frame against main's 16.6 run first, 16.7 against 15.5 run second: the order, not the sheet, 5 runs each); cells in it cost less than the double step they replace (16.9 against 23.8) */ @keyframes store-cell-ref { from { --store-n0: -1048576; } to { --store-n0: 0; } } @keyframes store-cell-ref-y { from { --store-n1: -1048576; } to { --store-n1: 0; } } [data-store]:where([data-store-contained] *) { animation-name: store-cell-s0, store-cell-s0-far, store-cell-s1, store-cell-s1-far, store-cell-near, store-cell-near-y, store-cell-ref, store-cell-ref-y; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 0% exit 0%, entry 0% exit 0%, entry 0% exit 0%; --store-cell-at: round(0 - var(--store-n0)); --store-cell-was: clamp(0, round(0 - var(--store-n1)), 499999); } [data-store]:where([data-store-contained] *)::after { content: ''; position: fixed; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; padding: 0; border: 0; margin: 0; box-sizing: content-box; translate: none; transform: none; animation: none; transition: none; view-timeline-axis: x, y; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px); } [data-store]:where([data-store-contained] *) { timeline-scope: --store-cell-x, --store-cell-y, --store-cell-rx, --store-cell-ry; animation-timeline: --store-cell-x, --store-cell-x, --store-cell-y, --store-cell-y, --store-cell-x, --store-cell-y, --store-cell-rx, --store-cell-ry; } [data-store]:where([data-store-contained] *)::after { view-timeline-name: --store-cell-rx, --store-cell-ry; } [data-store] [data-store]:where([data-store-contained] *) { timeline-scope: --store-cell-x2, --store-cell-y2, --store-cell-rx2, --store-cell-ry2; animation-timeline: --store-cell-x2, --store-cell-x2, --store-cell-y2, --store-cell-y2, --store-cell-x2, --store-cell-y2, --store-cell-rx2, --store-cell-ry2; } [data-store] [data-store]:where([data-store-contained] *)::after { view-timeline-name: --store-cell-rx2, --store-cell-ry2; } [data-store] [data-store] [data-store]:where([data-store-contained] *) { timeline-scope: --store-cell-x3, --store-cell-y3, --store-cell-rx3, --store-cell-ry3; animation-timeline: --store-cell-x3, --store-cell-x3, --store-cell-y3, --store-cell-y3, --store-cell-x3, --store-cell-y3, --store-cell-rx3, --store-cell-ry3; } [data-store] [data-store] [data-store]:where([data-store-contained] *)::after { view-timeline-name: --store-cell-rx3, --store-cell-ry3; } [data-store] [data-store] [data-store] [data-store]:where([data-store-contained] *) { timeline-scope: --store-cell-x4, --store-cell-y4, --store-cell-rx4, --store-cell-ry4; animation-timeline: --store-cell-x4, --store-cell-x4, --store-cell-y4, --store-cell-y4, --store-cell-x4, --store-cell-y4, --store-cell-rx4, --store-cell-ry4; } [data-store] [data-store] [data-store] [data-store]:where([data-store-contained] *)::after { view-timeline-name: --store-cell-rx4, --store-cell-ry4; } } /* Held cell: a number kept by presses alone, with no box and no timeline, the same in every engine.
holds --store-start; a press (--store-add, --store-set or --store-times set, while :is(:active, [data-store-press]) say: libraries/press/press.js adds Enter and element.click()) acts once, however long held: x becomes k x + a (--store-times k, 1 by default; --store-add a), or c (--store-set c). A toggle is times -1, add 1; a digit typed onto a number is times 10, add d. The number is --store-hold-x on the cell, held by one transition and retargeted by each press from what it shows: x + (t - x) e, with e = 1 - k and t = a / (1 - k) (k = 1: e = 2^-30, t = a 2^30, exact in single precision; set: e = 1, t = c + 2^-30 so it always differs from an idle target). Read on the cell and inside it: --store-value, --store, counter(store); gate on the rounded number, @container style(--store-value: 2) (on the held number itself Chrome needs a range, it is a hair off, and WebKit has none). Two properties registered, neither inherited: with eight registered, every page in WebKit got slower and its signed cells read late in cell-check (3 full runs failed of 5; 0 of 3 without them). No --store-next: a cell cannot read its own number to set its own target. The cell's transition is store.css's (!important, against the reduced-motion reset). WebKit 26.4: a Playwright screenshot drops a held number to its start (resize, scroll, layout reads keep it). */ @property --store-hold-x { syntax: ''; inherits: false; initial-value: 0; } @property --store-hold-v { syntax: ''; inherits: false; initial-value: 0; } [data-store-hold] { --store-hold-k: var(--store-times, 1); --store-hold-a: var(--store-add, 0); --store-hold-u: sign(abs(var(--store-hold-k) - 1)); /* 1: times k is not 1 */ --store-hold-s: clamp(0, sign(var(--store-set, -1000000) + 999999.5), 1); /* 1: a set */ --store-hold-on: min(1, var(--store-hold-s) + abs(var(--store-hold-a)) + var(--store-hold-u)); /* sums of a term and a zero only: Firefox's calc is single precision, so 1 + 2^-30 - 1 would be 0 */ --store-hold-t: calc(var(--store-hold-s) * (var(--store-set, 0) + 9.313225746154785e-10) + (1 - var(--store-hold-s)) * ((1 - var(--store-hold-u)) * var(--store-hold-a) * 1073741824 + var(--store-hold-u) * var(--store-hold-a) / (1 - var(--store-hold-k) + 1 - var(--store-hold-u)))); /* idle, the target is the start plus 0.37 while the page is hovered, focused within or pressed (seen): a number no press leaves, so a release, under the pointer or the focus, never counts as reversing the press (a transition back to its own start is a reversal, its duration cut short: the next press then jumped to its target). Unseen it is the start itself, so the number is the exact start at load and the pointer or focus arriving starts the hold from it. No @starting-style: one such rule anywhere makes WebKit 26.4 cascade everything under an animated element twice a restyle (facts/at-starting-style/starting-style-cost.mjs), and a transition's target sees neither an animation nor another transition in Chrome and WebKit, only the page's own state. */ --store-hold-x: calc(var(--store-hold-on) * var(--store-hold-t) + (1 - var(--store-hold-on)) * (var(--store-start, 0) + 0.37 * var(--store-hold-seen, 0))); transition-property: --store-hold-x !important; transition-duration: calc(var(--store-hold-on) * 1e7s) !important; /* the easing e written out here, 2^-30 a literal: var() of a registered number brings its text, 6 decimals in WebKit (2^-30 is "0") */ transition-timing-function: linear(calc(var(--store-hold-on) * (var(--store-hold-s) + (1 - var(--store-hold-s)) * ((1 - var(--store-hold-u)) * 9.313225746154785e-10 + var(--store-hold-u) * (1 - var(--store-hold-k))))), calc(var(--store-hold-on) * (var(--store-hold-s) + (1 - var(--store-hold-s)) * ((1 - var(--store-hold-u)) * 9.313225746154785e-10 + var(--store-hold-u) * (1 - var(--store-hold-k)))))) !important; transition-delay: calc((1 - var(--store-hold-on)) * 1e7s) !important; transition-behavior: normal !important; --store-hold-v: round(var(--store-hold-x)); --store-value: var(--store-hold-v); --store: var(--store-hold-v); --store-ready: 1; counter-reset: store var(--store-hold-v); } :root:is(:hover, :focus-within, :active, [data-store-press]) [data-store-hold] { --store-hold-seen: 1; } /* a press may come from outside the cell */ :where([data-store-hold] *) { --store-add: initial; --store-set: initial; --store-times: initial; } /* a cell's actions stay its own */ /* Record cell: eight numbers kept together on one element, by presses alone, and read back as one piece. The held cell (held.css) keeps one number by a retargeted transition; a record keeps --store-r0 to --store-r7 the same way, eight transitions retargeted at once, so a page's whole state (a board, a cart, a form) steps in one frame, and a reader somewhere else sees the whole old state or the whole new one, never a mix.
the cell; its boxes' names Starts: --store-start-0 to -7 (0). A press: --store-go: 1 with --store-to-0 to -7, all eight, while it is 1 (:active, or a flag the page computes): each number becomes its target that frame; held, it changes nothing more, and the same targets again retarget nothing. Idle (go 0), the numbers hold: the target is then the start minus 0.25, a number no set reaches and the start once rounded (so at load the numbers are the starts, with no @starting-style: see held.css), behind a delay that never ends; a release onto it is a reversal only after a press from the starts, and a set reversed to is its own target. Numbers are whole, 0 to 345,664 (a box edge is exact to there in Chrome). Read on the cell and inside it: --store-r0 to -7 (registered, inherited). Published: the cell's ::before is a hidden fixed box at left r0, width r1 + 1, top r2, height r3 + 1, its ::after at r4, r5 + 1, r6, r7 + 1, on view timelines of the four names (x then y of each box). A reader:
an ancestor of the cell, or any element whose timeline-scope holds the names: it reads the eight edges with four animations and gives --store-r0 to -7 (the record as read, one or two frames late in WebKit, always of one frame) and --store-record-ready (1 once every box is read). A reader owns its animations and timeline-scope; the cell owns its transitions and its ::before and ::after. Chrome, WebKit and Firefox 159 (Firefox 158 holds the numbers and reads nothing back: no view timelines). lab/2048 is the first page on it: 948 of 948 moves against the original, zero idle, 2026-10-22. */ @property --store-record-h0 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h1 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h2 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h3 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h4 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h5 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h6 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-h7 { syntax: ''; inherits: true; initial-value: 0; } @property --store-record-on { syntax: ''; inherits: false; initial-value: 0; } @property --store-r0 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r1 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r2 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r3 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r4 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r5 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r6 { syntax: ''; inherits: true; initial-value: 0; } @property --store-r7 { syntax: ''; inherits: true; initial-value: 0; } /* the reads: each box's near and far edge on each axis, 524,288 + the edge's place */ @property --store-rn0 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rf0 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rn1 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rf1 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rn2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rf2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rn3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-rf3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-record-ready { syntax: ''; inherits: true; initial-value: 0; } @keyframes store-record-0 { entry 0% { --store-rn0: 1048576; shape-margin: 0px; } exit 0% { --store-rn0: 0; } entry 100% { --store-rf0: 1048576; } exit 100% { --store-rf0: 0; shape-margin: 0.0001px; } } @keyframes store-record-1 { entry 0% { --store-rn1: 1048576; shape-margin: 0px; } exit 0% { --store-rn1: 0; } entry 100% { --store-rf1: 1048576; } exit 100% { --store-rf1: 0; shape-margin: 0.0001px; } } @keyframes store-record-2 { entry 0% { --store-rn2: 1048576; shape-margin: 0px; } exit 0% { --store-rn2: 0; } entry 100% { --store-rf2: 1048576; } exit 100% { --store-rf2: 0; shape-margin: 0.0001px; } } @keyframes store-record-3 { entry 0% { --store-rn3: 1048576; shape-margin: 0px; } exit 0% { --store-rn3: 0; } entry 100% { --store-rf3: 1048576; } exit 100% { --store-rf3: 0; shape-margin: 0.0001px; } } /* the boxes: numbers as a place and a size on each axis, 0 at least (at load the starts less 0.25, shown rounded) */ /* the reader */ [data-store-record] { --store-record-on: clamp(0, var(--store-go, 0), 1); --store-record-h0: calc(var(--store-record-on) * var(--store-to-0, 0) + (1 - var(--store-record-on)) * (var(--store-start-0, 0) - 0.25)); --store-record-h1: calc(var(--store-record-on) * var(--store-to-1, 0) + (1 - var(--store-record-on)) * (var(--store-start-1, 0) - 0.25)); --store-record-h2: calc(var(--store-record-on) * var(--store-to-2, 0) + (1 - var(--store-record-on)) * (var(--store-start-2, 0) - 0.25)); --store-record-h3: calc(var(--store-record-on) * var(--store-to-3, 0) + (1 - var(--store-record-on)) * (var(--store-start-3, 0) - 0.25)); --store-record-h4: calc(var(--store-record-on) * var(--store-to-4, 0) + (1 - var(--store-record-on)) * (var(--store-start-4, 0) - 0.25)); --store-record-h5: calc(var(--store-record-on) * var(--store-to-5, 0) + (1 - var(--store-record-on)) * (var(--store-start-5, 0) - 0.25)); --store-record-h6: calc(var(--store-record-on) * var(--store-to-6, 0) + (1 - var(--store-record-on)) * (var(--store-start-6, 0) - 0.25)); --store-record-h7: calc(var(--store-record-on) * var(--store-to-7, 0) + (1 - var(--store-record-on)) * (var(--store-start-7, 0) - 0.25)); transition-property: --store-record-h0, --store-record-h1, --store-record-h2, --store-record-h3, --store-record-h4, --store-record-h5, --store-record-h6, --store-record-h7 !important; transition-duration: calc(var(--store-record-on) * 1e7s) !important; transition-delay: calc((1 - var(--store-record-on)) * 1e7s) !important; transition-timing-function: linear(calc(var(--store-record-on)), calc(var(--store-record-on))) !important; transition-behavior: normal !important; --store-r0: round(var(--store-record-h0)); --store-r1: round(var(--store-record-h1)); --store-r2: round(var(--store-record-h2)); --store-r3: round(var(--store-record-h3)); --store-r4: round(var(--store-record-h4)); --store-r5: round(var(--store-record-h5)); --store-r6: round(var(--store-record-h6)); --store-r7: round(var(--store-record-h7)); } :where([data-store-record] *) { --store-go: initial; --store-to-0: initial; --store-to-1: initial; --store-to-2: initial; --store-to-3: initial; --store-to-4: initial; --store-to-5: initial; --store-to-6: initial; --store-to-7: initial; } [data-store-record]::before, [data-store-record]::after { content: '' !important; display: block !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-sizing: content-box !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px) !important; view-timeline-axis: x, y !important; animation: none !important; } [data-store-record]::before { view-timeline-name: var(--store-record-box-1) !important; left: calc(max(0, var(--store-r0)) * 1px) !important; width: calc((max(0, var(--store-r1)) + 1) * 1px) !important; top: calc(max(0, var(--store-r2)) * 1px) !important; height: calc((max(0, var(--store-r3)) + 1) * 1px) !important; } [data-store-record]::after { view-timeline-name: var(--store-record-box-2) !important; left: calc(max(0, var(--store-r4)) * 1px) !important; width: calc((max(0, var(--store-r5)) + 1) * 1px) !important; top: calc(max(0, var(--store-r6)) * 1px) !important; height: calc((max(0, var(--store-r7)) + 1) * 1px) !important; } [data-store-record-read] { animation-name: store-record-0, store-record-1, store-record-2, store-record-3; animation-timeline: var(--store-record-of); animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-range: normal; transition-property: none; --store-record-ready: min(sign(var(--store-rn0)), sign(var(--store-rn1)), sign(var(--store-rn2)), sign(var(--store-rn3))); --store-r0: calc(var(--store-record-ready) * round(var(--store-rn0) - 524288)); --store-r1: calc(var(--store-record-ready) * round(var(--store-rf0) - var(--store-rn0) - 1)); --store-r2: calc(var(--store-record-ready) * round(var(--store-rn1) - 524288)); --store-r3: calc(var(--store-record-ready) * round(var(--store-rf1) - var(--store-rn1) - 1)); --store-r4: calc(var(--store-record-ready) * round(var(--store-rn2) - 524288)); --store-r5: calc(var(--store-record-ready) * round(var(--store-rf2) - var(--store-rn2) - 1)); --store-r6: calc(var(--store-record-ready) * round(var(--store-rn3) - 524288)); --store-r7: calc(var(--store-record-ready) * round(var(--store-rf3) - var(--store-rn3) - 1)); } /* Random: a random number for every element, drawn once, on each press or on the clock above. (Was random.css.) Markup:
. Each child of the world, and everything inside it, reads var(--random): a number from 0 to just under 1. --random-seed: a number gives the same numbers on every load, in every browser. --random-seed: press starts like --random-seed: 0, and every press on the world mixes the moment it began into the seed: one new draw a press, however long it is held. --random-every: when new numbers come. Unset, they are drawn once and kept, like random(), and cost nothing after; there is no clock (a --random-seed: press world keeps one timer on its ::after, for the moments). press: one draw a press. A number of steps (1 is every step, 60 a second; 2 is 30 a second) or a time (0.5s): drawn on the clock, for effects that flicker; each draw restyles every child. never: drawn once, and presses change nothing either. A child's numbers come from its place among its siblings, so putting an element before it changes them; --random-key: a whole number, 0 or more (up to a million), on a child gives it numbers of its own, wherever it stands; missing, negative or not a number, the child's place is its key. A press is :active seen in a frame: Space on a button inside the world counts, Enter does not (it sets no :active), and a tap shorter than a frame, the instant the pointer arrives, can fall between two frames; with libraries/press/press.js, those press by data-store-press too. --random-numbers: 2 or 3 gives each child --random-2 and --random-3 as well, decorrelated from --random (all three come from one state). Each costs about as much as --random, so they are off by default. The world clips its content. Its ::before and ::after and its animations belong to random.css: they are marked !important, so an author's decoration or animation on the world cannot change what they store. All arithmetic is on whole numbers under 208049, a prime. Chrome keeps a registered number to 6 digits, and within one calc() both engines are exact up to 2^53, so every product here stays under that (for up to a million children), and a cube fits in one pow(). */ /* The clock is clock.css's, kept in the world's ::before: --clock-now is the time in steps, --clock-last the step it last called; three quarters of a step later --clock-go turns 1. --clock-ticks counts the steps of time that passed, slow frames included, so draws keep to the clock on the wall; it starts over after a million (4.6 hours). The ::after keeps the presses: --random-v, the moments mixed in, and --random-c, twice the presses counted plus 1 while one is held. */ @property --random-v { syntax: ''; inherits: false; initial-value: 0; } @property --random-c { syntax: ''; inherits: false; initial-value: 0; } @property --random-v-next { syntax: ''; inherits: false; initial-value: 0; } @property --random-c-next { syntax: ''; inherits: false; initial-value: 0; } @property --random-x { syntax: ''; inherits: false; initial-value: 0; } /* The hash. The world turns seed, presses and draw into one state --random-s; each child adds an offset from its place among its siblings and cubes it into --random. A round is a cube plus a constant: x -> x^3 + c mod 208049 never maps two numbers to one, since 3 does not divide 208048, so every state is equally likely. */ @property --random-sd { syntax: ''; inherits: false; initial-value: 0; } @property --random-period { syntax: ''; inherits: false; initial-value: 1; } @property --random-period-n { syntax: ''; inherits: false; initial-value: 0; } @property --random-draw { syntax: ''; inherits: false; initial-value: 0; } @property --random-held { syntax: ''; inherits: false; initial-value: 0; } @property --random-clocked { syntax: ''; inherits: false; initial-value: 0; } @property --random-period-t { syntax: ''; inherits: false; initial-value: 0; } @property --random-w { syntax: ''; inherits: false; initial-value: 0; } @property --random-w2 { syntax: ''; inherits: false; initial-value: 0; } @property --random-s { syntax: ''; inherits: true; initial-value: 0; } @property --random-s2 { syntax: ''; inherits: true; initial-value: 0; } @property --random-s3 { syntax: ''; inherits: true; initial-value: 0; } @property --random-k { syntax: ''; inherits: false; initial-value: -1; } /* --random-key, -1 when missing or not a number */ @property --random-kk { syntax: ''; inherits: false; initial-value: 0; } /* the key used: it, or the place among siblings */ @property --random-h { syntax: ''; inherits: false; initial-value: 0; } @property --random { syntax: ''; inherits: true; initial-value: 0; } @property --random-2 { syntax: ''; inherits: true; initial-value: 0; } @property --random-3 { syntax: ''; inherits: true; initial-value: 0; } /* A world takes only its own settings, and a child only its own key: one set around them does not reach them. */ :where([data-random]) { --random-seed: initial; --random-every: initial; --random-numbers: initial; } :where([data-random] > *) { --random-key: initial; } [data-random] { position: relative; overflow: hidden; writing-mode: horizontal-tb; direction: ltr; timeline-scope: --random-time, --random-count, --random-mix, --random-press !important; animation: store-s0, store-s0-far, store-s1, store-s1-far, store-s2, store-s2-far !important; animation-timing-function: linear !important; animation-fill-mode: both !important; animation-timeline: --random-count, --random-count, --random-mix, --random-mix, --random-press, --random-press !important; animation-composition: replace, add !important; animation-range: normal !important; --clock-ticks: max(0, var(--store-s0) - 1) !important; --random-v: max(0, var(--store-s1) - 1) !important; --random-c: max(0, var(--store-s2) - 1) !important; /* no mark: 0 */ --random-sd: mod(round(var(--random-seed, 0)), 208049); /* --random-seed: press is not a number: 0 */ --random-period-n: var(--random-every); /* a number of steps; unset, a time or a word is not: 0 */ --random-period-t: calc(var(--random-every) / 1s * 60); /* a time, in steps; anything else is not: 0 */ --random-period: max(1, round(var(--random-period-n)), round(var(--random-period-t))); /* 0.1 or 5ms: every step */ --random-clocked: sign(max(0, var(--random-period-n), var(--random-period-t))); /* 1: --random-every is steps or a time, and the clock runs */ --random-draw: round(down, round(var(--clock-ticks)) / var(--random-period)); --random-held: mod(round(var(--random-c)), 2); /* 1 from a press's second frame until it is let go */ --random-w: mod(var(--random-sd) * 7919 + round(var(--random-v)) * 104729 + var(--random-draw) * 15485863 + round(down, round(var(--random-c)) / 2) * 2750159 + 1, 208049); /* the draws and presses past 208049 mixed in too, or they would start over there */ --random-w2: mod(pow(var(--random-w), 3) + 4111 + round(down, var(--random-draw) / 208049) * 9973 + round(down, round(var(--random-c)) / 416098) * 7741, 208049); --random-s: mod(pow(var(--random-w2), 3) + 7, 208049); --random-s2: mod(pow(var(--random-s), 3) + 12345, 208049); /* states for --random-2 and -3 */ --random-s3: mod(pow(var(--random-s2), 3) + 54321, 208049); } /* Under reduced motion, the common reset (transition-duration: 0.01ms !important on *) would make WebKit transition the numbers below, a frame late each; transitions are cut there anyway, so they go to 0 on what this module computes. */ @media (prefers-reduced-motion: reduce) { [data-random], [data-random] *, [data-random]::before, [data-random]::after { transition-duration: 0s !important; transition-delay: 0s !important; } } [data-random] > * { --random-k: var(--random-key, -1); --random-kk: calc(max(0, sign(var(--random-k) + 0.5)) * var(--random-k) + (1 - max(0, sign(var(--random-k) + 0.5))) * sibling-index()); --random: calc(mod(pow(mod(pow(var(--random-kk), 2) * 7919 + var(--random-s), 208049), 3), 208049) / 208049); } /* More numbers: --random's whole number plus another state, cubed. */ @container style(--random-numbers: 2) or style(--random-numbers: 3) { [data-random] > * { --random-h: mod(pow(mod(pow(var(--random-kk), 2) * 7919 + var(--random-s), 208049), 3), 208049); /* --random's whole number, kept */ --random: calc(var(--random-h) / 208049); --random-2: calc(mod(pow(mod(var(--random-h) + var(--random-s2), 208049), 3) + 777, 208049) / 208049); } } @container style(--random-numbers: 3) { [data-random] > * { --random-3: calc(mod(pow(mod(var(--random-h) + var(--random-s3), 208049), 3) + 999, 208049) / 208049); } } /* The marks. A view timeline with its far inset 1,048,576px away makes a virtual box that long inside the world's own scrollport. A mark is a store.css cell: it keeps a number as its width or height, read back next frame by the mark itself and by the world with store.css's one-number reads (one animation reads the near edge, a second adds minus the far edge). Scrolling the world moves both edges alike, so a link to an element inside it changes nothing. A number goes through one registered property only, the sum, so Chrome's 6 digits are enough. --clock-last is 64px a step, the others half a px each. Nothing else may size a mark: an author's border or padding on a ::after would add to the number it keeps, every frame. */ [data-random]::before, [data-random]::after { display: block !important; position: absolute !important; left: 250000px !important; top: 250000px !important; right: auto !important; bottom: auto !important; width: 0 !important; height: 0 !important; box-sizing: content-box !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; content: none !important; visibility: hidden !important; pointer-events: none !important; view-timeline-inset: 0px calc(100% - 1048576px) !important; animation: none !important; animation-timing-function: linear !important; animation-fill-mode: both !important; animation-range: normal !important; } @container style(--random-clocked: 1) { [data-random]::before { content: '' !important; view-timeline-name: --random-time, --random-count !important; view-timeline-axis: inline, block !important; animation-name: clock-now, store-s0, store-s0-far, store-s1, store-s1-far !important; animation-duration: 90s, auto, auto, auto, auto !important; animation-iteration-count: infinite, 1, 1, 1, 1 !important; animation-timeline: auto, --random-time, --random-time, --random-count, --random-count !important; animation-composition: replace, replace, add, replace, add !important; --clock-last: max(0, var(--store-s0) / 128 - 1); --clock-ticks: max(0, var(--store-s1) - 1); --clock-since: calc(mod(var(--clock-now) - var(--clock-last) + 1, 5400) - 1); /* +1 -1: a tiny negative must not wrap to the dial's end */ --clock-go: max(0, sign(var(--clock-since) - 0.75)); --clock-due: max(var(--clock-go), round(down, var(--clock-since))); /* every whole step that passed: no sprint after a stall */ --clock-rest: calc(0.1 * var(--clock-go) * (var(--clock-since) - var(--clock-due))); /* a tenth of the leftover: it settles into the screen's beat */ --clock-x: mod(var(--clock-last) + var(--clock-due) + var(--clock-rest), 5400); --clock-y: mod(round(var(--clock-ticks)) + var(--clock-due), 1000000); /* steps of time passed, a slow frame's too */ width: calc((var(--clock-x) + 1) * 64px) !important; height: calc((var(--clock-y) + 1) * 0.5px) !important; } } @container (style(--random-seed: press) and (not style(--random-every: never))) or style(--random-every: press) { [data-random]::after { content: '' !important; view-timeline-name: --random-mix, --random-press !important; view-timeline-axis: inline, block !important; animation-name: store-s0, store-s0-far, store-s1, store-s1-far !important; animation-duration: auto !important; animation-iteration-count: 1 !important; animation-timeline: --random-mix, --random-mix, --random-press, --random-press !important; animation-composition: replace, add !important; --random-v: max(0, var(--store-s0) - 1) !important; --random-c: max(0, var(--store-s1) - 1) !important; --random-v-next: round(var(--random-v)); --random-c-next: calc(2 * round(down, round(var(--random-c)) / 2)); /* released: the count stays */ width: calc((var(--random-v-next) + 1) * 0.5px) !important; height: calc((var(--random-c-next) + 1) * 0.5px) !important; } /* held: one more press on its first frame, the same count after. Space on a button marks only the button :active */ [data-random]:is(:active, :has(:active), [data-store-press])::after { --random-c-next: calc(2 * mod(round(down, round(var(--random-c)) / 2) + 1 - mod(round(var(--random-c)), 2), 499991) + 1); } } @container style(--random-seed: press) and (not style(--random-every: never)) { [data-random]::after { animation-name: store-s0, store-s0-far, store-s1, store-s1-far, clock-now !important; animation-duration: auto, auto, auto, auto, 90s !important; animation-iteration-count: 1, 1, 1, 1, infinite !important; animation-timeline: --random-mix, --random-mix, --random-press, --random-press, auto !important; animation-composition: replace, add, replace, add, replace !important; } } /* the moment a press began, to a hundredth of a step, mixed into the store: on its first frame only, so holding it changes nothing and the clock alone decides the other draws */ @container style(--random-seed: press) and (not style(--random-every: never)) and style(--random-held: 0) { [data-random]:is(:active, :has(:active), [data-store-press])::after { --random-x: mod(round(var(--random-v)) * 7919 + round(var(--clock-now) * 100) + 1, 208049); --random-v-next: mod(pow(var(--random-x), 3) + 101, 208049); } } @property --store-read-p { syntax: ''; inherits: false; initial-value: 0; } /* a named reader's number (registered: style() sees it) */ /* Named values. One cell publishes its committed first number under an author's dashed ident: .score { --store-name: --score; }
...
.show { --store-of: --score; } .show b::after { content: counter(store); } A reader owns its animations, timeline-scope and ::before; put another stateful part on another element. Its --store-value, --store-ready, --store and counter(store) describe the same number, also inherited by its children. No publisher (or no committed value yet): ready 0, value 0; a published zero: ready 1, value 0. Names are never registered. Use one publisher per name. A cell or reader does not inherit another one's name or choice of name. --store-name-scope: following publishes through the cell's own box instead of ::after, for readers after the cell only (CSS Toggles' wide scope): the cell's ::after stays free and WebKit reads it a frame sooner. @apply --store-read-3 ([data-store-read-3] in markup) reads up to three names on one element: --store-of, --store-of-2 and --store-of-3 give the reader's numbers as above plus --store-value-2 / --store-ready-2 and --store-value-3 / --store-ready-3 (first numbers). Each box measures a second name on its other axis: ::before's height is the second name's width, ::after's width the third's (anchor-size() by name, across axes). It is its own mixin because the four more animations and their numbers cost every reader that carries them (100 readers: WebKit 29 -> 26 frames a second, Chrome 35 -> 31). Latency: at most TWO rendered frames after the cell's --store-value commits; a read is that value or one of the preceding two frames' committed values, never --store-next. The publication box has no clock or provisional write. Scope measured in Chrome 155 / WebKit 26.4: a reader's timeline-scope cannot reach a remote publisher; fixing the publisher to the viewport does not change name scope. Root timeline-scope: all is rejected by Chrome and disables the nested cells in WebKit. An explicit root name list works but cannot enumerate arbitrary author names. Hence this fallback: one anchor-size copy per reader, whose LOCAL view timeline has the name in --store-of, unless the page lists its names (named mode, below: no anchor, and WebKit draws nothing at rest). names-check.mjs measures 100 idle readers against one publisher without readers (CDP). The named cell becomes a relative containing block and owns ::after. Its absolute anchor is laid out before the fixed copies even when the reader precedes the cell in DOM order. Keep the publisher on an in-flow wrapper; overriding its position with absolute/fixed, or introducing a fixed containing block/anchor-scope between these boxes, changes anchor reachability. This is the anchor fallback's limit, not a page-wide timeline promise. A reader of one name has ONE hidden box, its ::before: the value on its width (an x view timeline), the second number on its height (a y one), so its ::after is the author's (since 2026-10-21; --store-read-3 keeps both pseudos). The hidden boxes point left and up, outside the scrolling overflow. Nothing new ticks: only the cell's existing clock restyles when idle. The copy is 0.25px when absent (a zero-width view timeline is unreliable in Chrome), versus (committed value + 1) * 0.5px when present. Two edge animations add into ONE number before serialization (probe 2), then round into a registered number before exposing the unregistered --store for exact style() queries. --store-name-position is a presence switch: an unset name substitutes static; a dashed ident is invalid for its registered grammar and takes its initial relative. The author name itself remains unregistered. */ @property --store-name-position { syntax: 'static | relative'; inherits: false; initial-value: relative; } @property --store-read-raw { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-raw2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-p2 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-v { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-ok { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-raw3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-raw4 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-p3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-p4 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-ok3 { syntax: ''; inherits: false; initial-value: 0; } @property --store-read-ok4 { syntax: ''; inherits: false; initial-value: 0; } /* transition-property: none: a reader restyles every frame, and WebKit walks every registered property of the page for transition: all (the default, 0s included): 100 readers beside newt.css's 5,362 registrations ran 8.9 frames a second, 29 with this (found by the newt thread, 2026-10-21). Zero specificity: an author's own transition on a reader still wins. */ :where([data-store]) { --store-name: initial; --store-name-scope: initial; } :where([data-store-read]) { --store-of: initial; counter-reset: store var(--store-value); transition-property: none; } [data-store-read] { --store-value: 0; --store-y: 0; --store-ready: 0; --store: 0; } /* Named mode: the page lists the names its readers read, on the root: :root { --store-names: --score, --hp; } and a reader reads its publisher's own box by name (the root's timeline-scope takes the list, bus.css), with no anchor: the publication box goes fixed, its width the first number as before and its left edge the second (whole px: a half-pixel position snaps, so the second number read one off every other frame in Chrome), and carries a view timeline named by --store-name, its inset 1,048,576px so the left edge reaches 999,999; a reader animates on that name (both edges, as the copy was read, for the first number; the near edge and the page's inline scroll for the second, as a cell reads its tick) and keeps no hidden box. Why: WebKit 26.4 draws every frame, idle or not, while a pseudo-element that is anchor-sized is also a view timeline's subject (one publisher and one reader: 0.29 s of CPU over 5 s idle, 0.00 by name; tools/idle.mjs). A reader of a name not in the list reads nothing (ready 0). A publisher with --store-name-scope: following publishes its first number only: its own box (the cell's) carries the name. */ @property --store-read-n { syntax: ''; inherits: false; initial-value: 0; } /* the near edge, shifted so the read stays within 500,000 either way: Chrome hands a registered number to var() as text with 6 significant digits, so a read near 1,048,576 lost its last digit (a second number of 5 read 0 to 9) */ @keyframes store-read-left { from { --store-read-n: 1548576; shape-margin: 0px; } to { --store-read-n: -548576; shape-margin: 0.0001px; } } @keyframes store-read-near-n { from { --store-read-raw: 0; shape-margin: 0px; } to { --store-read-raw: 4194304; shape-margin: 0.0001px; } } /* the edges over a range twice as long */ @keyframes store-read-far-n { from { --store-read-raw: 0; shape-margin: 0px; } to { --store-read-raw: -4194304; shape-margin: 0.0001px; } } @keyframes store-read-near-3n { from { --store-read-raw3: 0; shape-margin: 0px; } to { --store-read-raw3: 4194304; shape-margin: 0.0001px; } } @keyframes store-read-far-3n { from { --store-read-raw3: 0; shape-margin: 0px; } to { --store-read-raw3: -4194304; shape-margin: 0.0001px; } } @keyframes store-read-near-4n { from { --store-read-raw4: 0; shape-margin: 0px; } to { --store-read-raw4: 4194304; shape-margin: 0.0001px; } } @keyframes store-read-far-4n { from { --store-read-raw4: 0; shape-margin: 0px; } to { --store-read-raw4: -4194304; shape-margin: 0.0001px; } } @keyframes store-read-sx { from { --store-read-n: 0; shape-margin: 0px; } to { --store-read-n: 1048576; shape-margin: 0.0001px; } } /* set on the publishing element (its parent answers the query, also for a custom tag); its ::after box takes them */ @supports (timeline-scope: --store-read) and (width: anchor-size(width, 0.25px)) { :where([data-store]) { --store-name-position: var(--store-name, static); position: var(--store-name-position); } @container style(--store-name) and (not style(--store-name-scope: following)) { [data-store]::after { content: '' !important; display: block !important; position: var(--store-pub-pos, absolute) !important; visibility: hidden !important; pointer-events: none !important; left: var(--store-pub-left, auto) !important; top: var(--store-pub-top, auto) !important; right: var(--store-pub-right, 100%) !important; bottom: var(--store-pub-bottom, 100%) !important; view-timeline-name: var(--store-pub-tl, none); view-timeline-axis: x; view-timeline-inset: -1048576px calc(100% - 1048576px); width: calc((var(--store-ready) * (var(--store-cell-sv) + 1) + (1 - var(--store-ready)) * 0.5) * 0.5px) !important; height: calc((var(--store-cell-sv2) + 1) * 0.5px) !important; anchor-name: var(--store-name); animation: none !important; transition: none !important; transform: none !important; writing-mode: horizontal-tb !important; direction: ltr !important; box-sizing: content-box !important; padding: 0 !important; border: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } } /* --store-name-scope: following: the cell's own box (::before) is the anchor, for readers after the cell in the page (a fixed anchor is reachable only from later boxes): its ::after stays the author's, and WebKit reads it a frame sooner (0 frames late, against 1 through the publish box; Chrome 0 either way). A reader before it reads nothing. */ @container style(--store-name-scope: following) { [data-store]::before { anchor-name: var(--store-name); } } @container style(--store-names) { :where([data-store]) { --store-pub-pos: fixed; --store-pub-left: calc((var(--store-cell-sv2) + 1) * -1px); --store-pub-right: auto; --store-pub-top: 0; --store-pub-bottom: auto; --store-pub-tl: var(--store-name); } } @container style(--store-names) and style(--store-name-scope: following) { [data-store]::before { view-timeline-name: --store-cell-x, --store-cell-y, var(--store-name); view-timeline-axis: x, y, x; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px), -1048576px calc(100% - 1048576px); } [data-store] [data-store]::before { view-timeline-name: --store-cell-x2, --store-cell-y2, var(--store-name); view-timeline-axis: x, y, x; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px), -1048576px calc(100% - 1048576px); } [data-store] [data-store] [data-store]::before { view-timeline-name: --store-cell-x3, --store-cell-y3, var(--store-name); view-timeline-axis: x, y, x; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px), -1048576px calc(100% - 1048576px); } [data-store] [data-store] [data-store] [data-store]::before { view-timeline-name: --store-cell-x4, --store-cell-y4, var(--store-name); view-timeline-axis: x, y, x; view-timeline-inset: -524288px calc(100% - 524288px), -524288px calc(100% - 524288px), -1048576px calc(100% - 1048576px); } } /* Every read's keyframes also step shape-margin by 0.0001px (it acts only on a float with shape-outside): Firefox 159 skips an out-of-view element's animation that changes nothing it would draw, and custom properties alone count as nothing, so a reader below the first screen read 0, or the value from the last script read; a real property with a layout effect keeps it running (outline-offset and tab-size did too, translate and scroll-margin did not: facts/at-keyframes/firefox-offscreen-custom.mjs, 2026-11-02). Also in reads.css and record.css. */ @keyframes store-read-near { from { --store-read-raw: 0; shape-margin: 0px; } to { --store-read-raw: 2097152; shape-margin: 0.0001px; } } @keyframes store-read-far { from { --store-read-raw: 0; shape-margin: 0px; } to { --store-read-raw: -2097152; shape-margin: 0.0001px; } } @keyframes store-read-near-2 { from { --store-read-raw2: 0; shape-margin: 0px; } to { --store-read-raw2: 2097152; shape-margin: 0.0001px; } } @keyframes store-read-far-2 { from { --store-read-raw2: 0; shape-margin: 0px; } to { --store-read-raw2: -2097152; shape-margin: 0.0001px; } } @keyframes store-read-near-3 { from { --store-read-raw3: 0; shape-margin: 0px; } to { --store-read-raw3: 2097152; shape-margin: 0.0001px; } } @keyframes store-read-far-3 { from { --store-read-raw3: 0; shape-margin: 0px; } to { --store-read-raw3: -2097152; shape-margin: 0.0001px; } } @keyframes store-read-near-4 { from { --store-read-raw4: 0; shape-margin: 0px; } to { --store-read-raw4: 2097152; shape-margin: 0.0001px; } } @keyframes store-read-far-4 { from { --store-read-raw4: 0; shape-margin: 0px; } to { --store-read-raw4: -2097152; shape-margin: 0.0001px; } } [data-store-read] { timeline-scope: --store-read-x, --store-read-y; animation: store-read-near linear both, store-read-far linear both, store-read-near-2 linear both, store-read-far-2 linear both; animation-timeline: --store-read-x, --store-read-x, --store-read-y, --store-read-y; animation-composition: replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%; animation-duration: auto !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; animation-play-state: running !important; --store-read-v: clamp(0, round(var(--store-read-raw) - 1), 999999); --store-read-ok: clamp(0, sign(var(--store-read-raw) - 0.75), 1); --store-read-p: calc(var(--store-read-v) - clamp(0, round(var(--store-signed, 0)), 1) * 500000); --store-read-p2: calc(var(--store-read-ok) * (clamp(0, round(var(--store-read-raw2) - 1), 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-value: var(--store-read-p); --store-y: var(--store-read-p2); --store-ready: var(--store-read-ok); --store: var(--store-read-p); } /* the three-name reader as markup (api.css's dense systems; CSS Toggles' readers of two or three toggles): its depth is counted among mixin readers, apart from [data-store-read]'s, so 4 x 3 = 12 reads nested */ [data-store-read-3] { :where(&) { --store-of: initial; counter-reset: store var(--store-value); transition-property: none; --store-of-2: initial; --store-of-3: initial; } --store-value: 0; --store-y: 0; --store-ready: 0; --store: 0; --store-value-2: 0; --store-ready-2: 0; --store-value-3: 0; --store-ready-3: 0; @supports (timeline-scope: --store-read) and (width: anchor-size(width, 0.25px)) { timeline-scope: --store-read-x, --store-read-y; animation: store-read-near linear both, store-read-far linear both, store-read-near-2 linear both, store-read-far-2 linear both; animation-timeline: --store-read-x, --store-read-x, --store-read-y, --store-read-y; animation-composition: replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%; animation-duration: auto !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; animation-play-state: running !important; --store-read-v: clamp(0, round(var(--store-read-raw) - 1), 999999); --store-read-ok: clamp(0, sign(var(--store-read-raw) - 0.75), 1); --store-read-p: calc(var(--store-read-v) - clamp(0, round(var(--store-signed, 0)), 1) * 500000); --store-read-p2: calc(var(--store-read-ok) * (clamp(0, round(var(--store-read-raw2) - 1), 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-value: var(--store-read-p); --store-y: var(--store-read-p2); --store-ready: var(--store-read-ok); --store: var(--store-read-p); animation: store-read-near linear both, store-read-far linear both, store-read-near-2 linear both, store-read-far-2 linear both, store-read-near-3 linear both, store-read-far-3 linear both, store-read-near-4 linear both, store-read-far-4 linear both; animation-composition: replace, add, replace, add, replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%; --store-read-ok3: clamp(0, sign(var(--store-read-raw3) - 0.75), 1); --store-read-p3: calc(var(--store-read-ok3) * (clamp(0, round(var(--store-read-raw3) - 1), 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-read-ok4: clamp(0, sign(var(--store-read-raw4) - 0.75), 1); --store-read-p4: calc(var(--store-read-ok4) * (clamp(0, round(var(--store-read-raw4) - 1), 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-value-2: var(--store-read-p3); --store-ready-2: var(--store-read-ok3); --store-value-3: var(--store-read-p4); --store-ready-3: var(--store-read-ok4); timeline-scope: --store-mixin-read-x, --store-mixin-read-y, --store-mixin-read-u, --store-mixin-read-w; animation-timeline: --store-mixin-read-x, --store-mixin-read-x, --store-mixin-read-y, --store-mixin-read-y, --store-mixin-read-u, --store-mixin-read-u, --store-mixin-read-w, --store-mixin-read-w; --store-mixin-read-depth: 1; @container style(--store-mixin-read-depth: 1) { timeline-scope: --store-mixin-read-x2, --store-mixin-read-y2, --store-mixin-read-u2, --store-mixin-read-w2; animation-timeline: --store-mixin-read-x2, --store-mixin-read-x2, --store-mixin-read-y2, --store-mixin-read-y2, --store-mixin-read-u2, --store-mixin-read-u2, --store-mixin-read-w2, --store-mixin-read-w2; --store-mixin-read-depth: 2; } @container style(--store-mixin-read-depth: 2) { timeline-scope: --store-mixin-read-x3, --store-mixin-read-y3, --store-mixin-read-u3, --store-mixin-read-w3; animation-timeline: --store-mixin-read-x3, --store-mixin-read-x3, --store-mixin-read-y3, --store-mixin-read-y3, --store-mixin-read-u3, --store-mixin-read-u3, --store-mixin-read-w3, --store-mixin-read-w3; --store-mixin-read-depth: 3; } @container style(--store-mixin-read-depth: 3) { timeline-scope: --store-mixin-read-x4, --store-mixin-read-y4, --store-mixin-read-u4, --store-mixin-read-w4; animation-timeline: --store-mixin-read-x4, --store-mixin-read-x4, --store-mixin-read-y4, --store-mixin-read-y4, --store-mixin-read-u4, --store-mixin-read-u4, --store-mixin-read-w4, --store-mixin-read-w4; --store-mixin-read-depth: 4; } &::before { content: var(--store-read-box, '') !important; display: block !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important; inset: auto !important; left: -500001px !important; top: 0 !important; position-anchor: var(--store-of, none); width: anchor-size(width, 0.25px) !important; height: 0.5px !important; view-timeline: none x; view-timeline-inset: -524288px calc(100% - 524288px); /* named below, only for a reader with a name */ animation: none !important; transition: none !important; transform: none !important; writing-mode: horizontal-tb !important; direction: ltr !important; box-sizing: content-box !important; padding: 0 !important; border: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; top: -500001px !important; height: anchor-size(var(--store-of-2, --store-none) width, 0.25px) !important; view-timeline-name: none; view-timeline-axis: x, y; } &::after { content: var(--store-read-box, '') !important; display: block !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important; inset: auto !important; top: -500001px !important; left: 0 !important; position-anchor: var(--store-of, none); height: anchor-size(height, 0.25px) !important; width: 0.5px !important; view-timeline: none y; view-timeline-inset: -524288px calc(100% - 524288px); animation: none !important; transition: none !important; transform: none !important; writing-mode: horizontal-tb !important; direction: ltr !important; box-sizing: content-box !important; padding: 0 !important; border: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; left: -500001px !important; width: anchor-size(var(--store-of-3, --store-none) width, 0.25px) !important; view-timeline-name: none; view-timeline-axis: y, x; } @container style(--store-of) { &::before { view-timeline-name: --store-mixin-read-x; } &::after { view-timeline-name: --store-mixin-read-y; } @container style(--store-mixin-read-depth: 2) { &::before { view-timeline-name: --store-mixin-read-x2; } &::after { view-timeline-name: --store-mixin-read-y2; } } @container style(--store-mixin-read-depth: 3) { &::before { view-timeline-name: --store-mixin-read-x3; } &::after { view-timeline-name: --store-mixin-read-y3; } } @container style(--store-mixin-read-depth: 4) { &::before { view-timeline-name: --store-mixin-read-x4; } &::after { view-timeline-name: --store-mixin-read-y4; } } } /* a later slot without the first: the first axis is left unnamed, or WebKit 26.4 sizes its box by the page's first anchor (anchor-size() with no position-anchor) and the first slot reads that cell instead of 0 */ @container style(--store-of-2) { &::before { view-timeline-name: none, --store-mixin-read-u; } @container style(--store-mixin-read-depth: 2) { &::before { view-timeline-name: none, --store-mixin-read-u2; } } @container style(--store-mixin-read-depth: 3) { &::before { view-timeline-name: none, --store-mixin-read-u3; } } @container style(--store-mixin-read-depth: 4) { &::before { view-timeline-name: none, --store-mixin-read-u4; } } } @container style(--store-of-3) { &::after { view-timeline-name: none, --store-mixin-read-w; } @container style(--store-mixin-read-depth: 2) { &::after { view-timeline-name: none, --store-mixin-read-w2; } } @container style(--store-mixin-read-depth: 3) { &::after { view-timeline-name: none, --store-mixin-read-w3; } } @container style(--store-mixin-read-depth: 4) { &::after { view-timeline-name: none, --store-mixin-read-w4; } } } @container style(--store-of) and style(--store-of-2) { &::before { view-timeline-name: --store-mixin-read-x, --store-mixin-read-u; } @container style(--store-mixin-read-depth: 2) { &::before { view-timeline-name: --store-mixin-read-x2, --store-mixin-read-u2; } } @container style(--store-mixin-read-depth: 3) { &::before { view-timeline-name: --store-mixin-read-x3, --store-mixin-read-u3; } } @container style(--store-mixin-read-depth: 4) { &::before { view-timeline-name: --store-mixin-read-x4, --store-mixin-read-u4; } } } @container style(--store-of) and style(--store-of-3) { &::after { view-timeline-name: --store-mixin-read-y, --store-mixin-read-w; } @container style(--store-mixin-read-depth: 2) { &::after { view-timeline-name: --store-mixin-read-y2, --store-mixin-read-w2; } } @container style(--store-mixin-read-depth: 3) { &::after { view-timeline-name: --store-mixin-read-y3, --store-mixin-read-w3; } } @container style(--store-mixin-read-depth: 4) { &::after { view-timeline-name: --store-mixin-read-y4, --store-mixin-read-w4; } } } @container style(--store-names) { animation-name: store-read-near-n, store-read-far-n, store-read-left, store-read-sx, store-read-near-3n, store-read-far-3n, store-read-near-4n, store-read-far-4n; animation-timeline: var(--store-of, --store-none), var(--store-of, --store-none), var(--store-of, --store-none), scroll(root inline); animation-composition: replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, 0px 1048576px; timeline-scope: none; --store-read-p2: calc(var(--store-read-ok) * (clamp(0, round(500000 - var(--store-read-n)) - 1, 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-read-box: none; animation-timeline: var(--store-of, --store-none), var(--store-of, --store-none), var(--store-of, --store-none), scroll(root inline), var(--store-of-2, --store-none), var(--store-of-2, --store-none), var(--store-of-3, --store-none), var(--store-of-3, --store-none); animation-composition: replace, add, replace, add, replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, 0px 1048576px, entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, entry 100% exit 100%; } } } [data-store-read]::before { content: var(--store-read-box, '') !important; display: block !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important; inset: auto !important; left: -500001px !important; top: -500001px !important; position-anchor: var(--store-of, none); width: anchor-size(width, 0.25px) !important; height: anchor-size(height, 0.25px) !important; view-timeline-name: none; view-timeline-axis: x, y; view-timeline-inset: -524288px calc(100% - 524288px); /* named below, only for a reader with a name */ animation: none !important; transition: none !important; transform: none !important; writing-mode: horizontal-tb !important; direction: ltr !important; box-sizing: content-box !important; padding: 0 !important; border: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } [data-store-read] [data-store-read] { timeline-scope: --store-read-x2, --store-read-y2; animation-timeline: --store-read-x2, --store-read-x2, --store-read-y2, --store-read-y2; } [data-store-read] [data-store-read] [data-store-read] { timeline-scope: --store-read-x3, --store-read-y3; animation-timeline: --store-read-x3, --store-read-x3, --store-read-y3, --store-read-y3; } [data-store-read] [data-store-read] [data-store-read] [data-store-read] { timeline-scope: --store-read-x4, --store-read-y4; animation-timeline: --store-read-x4, --store-read-x4, --store-read-y4, --store-read-y4; } /* a reader's probes have timelines only when it names a value, so a reader with no name reads ready 0 (WebKit gave an unanchored probe a width) */ @container style(--store-of) { [data-store-read]::before { view-timeline-name: --store-read-x, --store-read-y; } [data-store-read] [data-store-read]::before { view-timeline-name: --store-read-x2, --store-read-y2; } [data-store-read] [data-store-read] [data-store-read]::before { view-timeline-name: --store-read-x3, --store-read-y3; } [data-store-read] [data-store-read] [data-store-read] [data-store-read]::before { view-timeline-name: --store-read-x4, --store-read-y4; } } /* named mode for markup readers: :is() lifts them over the depth rules above (4 deep) */ @container style(--store-names) { :is([data-store-read], [data-store-read] [data-store-read] [data-store-read] [data-store-read]) { animation-name: store-read-near-n, store-read-far-n, store-read-left, store-read-sx; animation-timeline: var(--store-of, --store-none), var(--store-of, --store-none), var(--store-of, --store-none), scroll(root inline); animation-composition: replace, add, replace, add; animation-range: entry 0% exit 0%, entry 100% exit 100%, entry 0% exit 0%, 0px 1048576px; timeline-scope: none; --store-read-p2: calc(var(--store-read-ok) * (clamp(0, round(500000 - var(--store-read-n)) - 1, 999999) - clamp(0, round(var(--store-signed, 0)), 1) * 500000)); --store-read-box: none; } } } /* @supports (timeline-scope) and (anchor-size()): the named values above */ /* generated by make-digits.py: the typed-number font (input.css), a digit as wide as its place value */ @font-face { font-family: store-digits; src: url(data:font/woff;base64,d09GRgABAAAAAAZQAAwAAAAECdAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABHAAAABYAAAAWAEn//0dTVUIAAAE0AAABfgAABNpR8UlXT1MvMgAAArQAAAAwAAAAYFAzTsNjbWFwAAAC5AAAANUAAAH0/g//RmdseWYAAAO8AAAAHAAAACIBCgEUaGVhZAAAA9gAAAAkAAAANuIwFc5oaGVhAAAD/AAAAB0AAAAkACMAMGhtdHgAAAQcAAABHwACAG7AKQAAbG9jYQAABTwAAACYAAIAAH/3gABtYXhwAAAF1AAAABgAAAAgAAEABm5hbWUAAAXsAAAAVgAAAIoI+xi1cG9zdAAABkQAAAAMAAAAIAADAAAAAQAAAAwAAAAAAAAAAgABADf//gADAAB42qVTS04CQRSs7pnhJyIqKiIqIiL+UVsWLowxhpVxYTiARJfEuCAuXbj0BMaVZzIewzOINc00GcAJo6byOu9Vv3pd82kIAAlUcQp5Xr9oINVqtu+Qg00enQ7cfX8ubpqtNmLMJCOGODL4FGVxLV7Fh3y0a/Y9IuQFQyKNiobbe0YuwZCwONFhV1TrXU546yCiesIJrnCLNp7c86nr7wG7XN4ZYCOatfs4R3OWj7E1I3u1pWtTSV2Z6K7uc+XodwxJjCOFCXqcxBSm+SaCn9CvnMEs5pDFPKsF5LGIpZDKZRSwgiJWUcIayljn2wmn3MAmtrCNHexij997HweBSukpBZ5Z5eiuyHOqOEYdDX6JB+4cMhQ7FWHpVXGK8uD0MsW5yodoX6V4ihpAfIhRo52KF89phS4bdPiGd5EUl9qpjSMPsV5mkBxiDNKBOwaZkR0G2dCdBvlfKwwKf1YalP49wSDcv1n7AUHKiKfs3tMUI6vvKW9n58uffQMLQFWRAAB42mNgYRBgnMDAykAy8PP3c2VwYGD4/59B4v8PoIAEAwdcUgDIY2BQYGAAAOQuBpB42sWQVU5EAQADZ2Fxd3d3h8AXp+KKuCzuLou7y/DgENCk6WfbAULEBoZUwqFokCMME0c/HQw66pjjTjjplNPOOOucEeddcNEll11x1TXX3XDTLbfdcdc99z3w0COPPTHqqWeee+GlV15746133vvgo08+++Krb7774adfyo86Gfrz3gEjDASv++ilh266ghUdtNNGKy0000QjDdRTRy01VFNFJRWUU0YpJRRTRCEF5JNHLjlkk0UmGaSTFnBNIZkkEkkgPiAbDnjH/BIP8S/6BoT636wAAAB42mNgZAABDiBkZmBgBAIwj+H/D6g4AwAVoAIgeNpjYGRgYADiZs4bnfH8Nl8ZuBkcGLABDiAEkUwgDgCh5wP0eNpjYGRgYJD4/4OB4f9/BhDgYGBkQAUWAHDXBFAAAAB42u3NPy5EUQDF4ePvEBEEmYiCjkqpElEpZUqtxAKUSguYYpZgCQo70CgtQSk2MU7yLECp+L7kl7zcnPtuknzf/a2st4222bbaTttt+23cDtphBnvttF20Sbtvj23antvr7+49WZgli7fJ0nH7SpZfkpVuV6+S0dowG330yd4bPyRHPT/ZTs4+k/NuL5+S68mwu+k/3vo9nwcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4134Adk8e2AB42u3CAQ0AAAzDoFq4f7PPfBCoDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGAeDSIA73jaY2BkYPj/n4GFAUgDARMDGgAAN6UCB3jaY2BgYGEwY2BmYGThZGBkkGBggLKZGPiAPAibBchSg7LZGMQY7BiCGUoY8hmKGFIZFBhcGDIZ0oG4hKGYIQgoks5QypDDkAiUxaUKIY4kCgA3BRHBAAB42mNgZsALAAB9AAQ=) format('woff'); } /* Typed number: a whole number a visitor types, published as a named value any reader reads, with no script. The field is set in store.css's digit font (digits.css, make-digits.py), where a digit is as wide as its place value, so the field sized to its text (field-sizing: content) is as wide as its number; the span around it is the named value, (v + 1) * 0.5px wide like a cell's publish box, and 0.25px (no value, --store-ready 0) while the field is empty. Any other character is zero wide and skipped, so "12a3" reads 123, typed key by key too (QUIRKS.md Q2); a space too in Chrome ("1 2" reads 12), while WebKit shapes the words apart, each with its own offset ("1 2" reads 8, and U+200B and U+3000 split it too; a hyphen, a dash, "?" or a CJK character would, but word-break: keep-all takes those break opportunities away, QUIRKS.md Q3). Up to 6 digits (0 to 999,999). The span sits off screen, fixed (a number of 999,999 is 500,000px wide): a click on the label around it focuses the field, and what the page shows is a reader's (counter(store) in the ); the field's caret is off screen too, so show focus with the label's :focus-within. Readers after the span read it (a fixed anchor is reachable only from later boxes); one before it reads nothing. Measured, Chrome 155 and WebKit 26.4: typing, backspace, deleting the first digit and select-all-and-delete each read exactly within 120 ms, and letters typed among digits, deleted and put in the middle within 150 ms (checks/input-check.mjs, part 3); focusing it scrolls nothing. Not measured: IME composition, page zoom, iPad. Without the digit font (a reader who turned page fonts off, a browser that blocks downloaded fonts, or before it loads) the field would be measured in a fallback font ("42" read 27 in Firefox 159): its max-width is 0 then, so the span is 0.25px and a reader shows no value. The test is the field's own 1ch: the digit font's unshaped 0 is 60,001 units, 15,000.25px at 16px in all three engines, and a fallback's 0 about 8px (QUIRKS.md Q7). */ [data-store-input] { position: fixed !important; top: 0 !important; left: -500001px !important; display: block !important; width: max-content !important; min-width: 0.25px !important; height: auto !important; padding: 0 !important; border: 0 !important; margin: 0 !important; anchor-name: var(--store-name) !important; transform: none !important; zoom: 1 !important; & > input { font: 16px/1 store-digits !important; field-sizing: content !important; width: auto !important; min-width: 0 !important; max-width: clamp(0px, (1ch - 100px) * 1000, 1000000px) !important; padding: 0 !important; border: 0 !important; margin: 0 -1.75px 0 0 !important; letter-spacing: 0 !important; word-spacing: 0 !important; word-break: keep-all !important; font-kerning: none !important; font-feature-settings: normal !important; text-indent: 0 !important; text-transform: none !important; writing-mode: horizontal-tb !important; direction: ltr !important; box-sizing: content-box !important; } } /* named mode (named.css): the span carries its name's view timeline, its left edge at -1px so its second number reads 0, off screen above instead of to the left */ @container style(--store-names) { [data-store-input] { top: -1048576px !important; left: -1px !important; view-timeline: var(--store-name) x; view-timeline-inset: -1048576px calc(100% - 1048576px); } } /* Tables. Only marked direct children are entries, in DOM order:
A reader exposes --store-value, --store-ready, --store and counter(store), on itself and to its descendants. Indices are 1-based whole numbers; an absent entry or an invalid index reads value 0, ready 0. Values have the cell's range (rounded, clamped to 0..999999). A [data-store] entry publishes its committed --store-value instead of --store-item, and is absent until its cell is ready. Put a cell used as an index on a wrapper: .index { --store-start: 1; --store-next: calc(var(--store-value) + 1); --store-at: var(--store-value); } Latency measured by table-check.mjs: a requestAnimationFrame mutation is read one frame later in both engines; cell values/indices are read in the same frame in Chrome and one frame later in WebKit (Chrome's second style pass samples the cells' committed geometry). A size container exposes its width to descendants, not itself. Two view-timeline reads return the selected tracks to the reader, without a clock, storage or write-back. Two columns per entry carry its base-1000 digits, each as (digit + 1) * .5px. This keeps 100 maximum-valued entries within 100000px, instead of a 50000000px array (past the engines' layout limits). Subgrid edge padding sizes the two tracks; the empty ::after in the first track keeps the two contributions separate. A cell's ::before remains its own. Entries span sibling-count() + 1 rows, so all unmarked children fit in column 1; no rule selects them, and they cannot size the data columns. A missing grid line resolves to a table edge: either a zero-width span, or the whole table (at least 501px, larger than any digit). Neither is a valid digit. The table is its own scrollport: cell ticks and read probes then use local coordinates, even in nested tables. Its ::after reserves (1,1). The cells inside it read the table's scroll offset, not the page's (--store-scroller: nearest, frame.css). It is at least 1px tall: in WebKit 26.4 a table 0px tall (only empty children) gave the cells inside it no vertical read, so no second number, and a press read as 499,999 that never rested. The table owns its grid/layout containment, entries their subgrid/padding/::after, readers their animations and two fixed pseudo-elements. Fixed probes reach the nearest table through ordinary nested wrappers. As with the chip readers, an intervening fixed-position containing block (e.g. transform or contain:layout) intercepts them. The table's geometry is plumbing; put presentation on the reader's children. */ @property --store-table-item { syntax: ''; inherits: false; initial-value: 0; } @property --store-table-valid { syntax: ''; inherits: false; initial-value: 0; } @property --store-table-ready { syntax: ''; inherits: false; initial-value: 0; } @property --store-table-value { syntax: ''; inherits: false; initial-value: 0; } :where([data-store-at]) { --store-value: 0; --store-ready: 0; --store: 0; counter-reset: store 0; } @supports (grid-template-columns: subgrid) and (width: calc(sibling-count() * 1px)) and (timeline-scope: --store-table-low) { [data-store-table] { display: grid; contain: layout; overflow: hidden; writing-mode: horizontal-tb; direction: ltr; grid-template-columns: 100%; grid-template-rows: 0px; grid-auto-columns: max-content; grid-auto-rows: auto; grid-auto-flow: row; gap: 0; justify-content: start; align-content: start; width: auto; min-width: 501px; max-width: none; min-height: 1px; padding: 0 !important; border: 0 !important; --store-scroller: nearest; } [data-store-table]::after { content: ''; grid-area: 1 / 1; width: 0; height: 0; padding: 0; border: 0; margin: 0; } [data-store-table] > [data-store-item] { display: grid; grid-template-columns: subgrid; grid-column: span 2; grid-row: 1 / span calc(sibling-count() + 1); --store-table-item: clamp(0, round(var(--store-item, 0)), 999999); --store-table-present: 1; width: auto; min-width: 0; max-width: none; height: 0; min-height: 0; max-height: none; gap: 0; margin: 0 !important; border: 0 !important; box-sizing: content-box !important; transition: none !important; padding: 0 calc((round(down, var(--store-table-item) / 1000) + 1) * var(--store-table-present) * .5px) 0 calc((mod(var(--store-table-item), 1000) + 1) * var(--store-table-present) * .5px) !important; } [data-store-table] > [data-store-item][data-store] { --store-table-item: var(--store-value); --store-table-present: var(--store-ready); } [data-store-table] > [data-store-item]::after { content: ''; grid-column: 1; width: 0; height: 0; min-width: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } [data-store-table] [data-store-at] { display: block; timeline-scope: --store-table-low, --store-table-high; animation: store-cell-s0 linear both, store-cell-s0-far linear both, store-cell-s1 linear both, store-cell-s1-far linear both; animation-composition: replace, add; animation-timeline: --store-table-low, --store-table-low, --store-table-high, --store-table-high; animation-range: entry 0% exit 0%, entry 100% exit 100%; animation-duration: auto !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; animation-play-state: running !important; transition: none !important; --store-table-ready: calc(clamp(0, round(var(--store-s0)), 1) * clamp(0, 1001 - round(var(--store-s0)), 1) * clamp(0, round(var(--store-s1)), 1) * clamp(0, 1001 - round(var(--store-s1)), 1)); --store-table-value: calc(var(--store-table-ready) * (clamp(0, round(var(--store-s0)) - 1, 999) + 1000 * clamp(0, round(var(--store-s1)) - 1, 999))); --store-value: var(--store-table-value); --store-ready: var(--store-table-ready); --store: var(--store-table-value); counter-reset: store var(--store-value); } [data-store-table] [data-store-at]::before, [data-store-table] [data-store-at]::after { content: ''; position: fixed; inset: 0; grid-row: 1 / span 1; grid-column: calc(max(1, round(var(--store-at, 0))) * 2) / span 1; --store-table-valid: calc(clamp(0, sign(var(--store-at, 0)), 1) * (1 - abs(sign(var(--store-at, 0) - round(var(--store-at, 0)))))); width: auto; min-width: 0; max-width: calc(var(--store-table-valid) * 1000000px); height: 1px; min-height: 0; max-height: none; box-sizing: content-box !important; padding: 0 !important; border: 0 !important; margin: 0 !important; transition: none !important; visibility: hidden; pointer-events: none; view-timeline: --store-table-low x; view-timeline-inset: -524288px calc(100% - 524288px); } [data-store-table] [data-store-at]::after { grid-column: calc(max(1, round(var(--store-at, 0))) * 2 + 1) / span 1; view-timeline-name: --store-table-high; } }