Segoe UI", Roboto, sans-serif; color: #111; line-height: 1.5; } .dough-freestyle * { min-width: 0; } /* Cart hidden state is runtime state, not design. The browser's UA rule loses to authored display values, * and cart markup naturally gives its panel, badge, empty state and images a display. Important is * deliberate: author CSS must never reinterpret application state. Kept cart-scoped so the authoring * audit still catches unrelated elements whose own display rule defeats their authored hidden state. */ .dough-freestyle [data-dough-cart][hidden], .dough-freestyle [data-dough-cart-count][hidden], .dough-freestyle [data-dough-cart-empty][hidden], .dough-freestyle [data-dough-cart-field="image"][hidden] { display: none !important; } /* Browser-default reset, at ZERO specificity (:where) so any authored rule beats it without !important. * * Not cosmetic housekeeping - it is what decides how badly a page fails when the author sheet does not cover an * element. Measured 2026-08-20 at a 390px viewport, rendering a real generated page with its author CSS removed * (the restyle-collapse failure mode, see restyle-site.ts): WITHOUT this block the page renders 1024px wide and * scrolls sideways on every phone; WITH it, 393px and 390px on the two fixtures tried. Unstyled at its * intrinsic width is the whole 1024, which is also the owner's live report "on mobile the width is buggy, i see * the image going out of the phone" - so max-width here prevents a class that reaches healthy pages too, any * time an author forgets one image. * * On HEALTHY pages it is a no-op by measurement: across the 23 corpus pages every anchor and button is already * covered by the author sheet (or, for platform-injected markup, by the attribution rule below), and rendering * a full page with and without the block moved its height by 21px on one fixture and 0px on the other. * * Deliberately NOT reset, because each would change healthy pages rather than only broken ones: heading and * paragraph margins (a page relying on default spacing collapses into a wall of text), and list-style (prose * lists lose bullets the author intended). Those belong to the design, not to the platform. */ :where(.dough-freestyle a) { color: inherit; text-decoration: none; } :where(.dough-freestyle button, .dough-freestyle input, .dough-freestyle select, .dough-freestyle textarea) { font: inherit; color: inherit; } /* Cross-browser: Safari gives controls a 2px margin Chromium does not, so the same stepper sits differently per * engine. Checkbox and radio keep theirs, it is the gap to their label. Measured 2026-09-25 over 1084 corpus page * renders at 390px: controls moved on 5 pages vs 3 on an unchanged re-render, so a Chromium no-op. Two resets * were measured and rejected: letter-spacing inherit moved controls on 166 pages (buttons picking up a spaced * parent's tracking), and background or border on generic inputs would turn an unstyled email field invisible. */ :where(.dough-freestyle button, .dough-freestyle input:not([type=checkbox], [type=radio]), .dough-freestyle select, .dough-freestyle textarea) { margin: 0; } /* The quantity field is a platform contract with one known role, a counter between adjust-quantity buttons, so * unlike a generic input it can be fully unstyled: an author who styles the stepper but not the field otherwise * ships a white UA box with an inset border and spin arrows inside it. The runtime clamps 1-100 and the buttons * step it, so the native arrows are redundant. Zero specificity, so a designed field still wins: same corpus, 48 of * 528 quantity fields changed, every one a UA white box, and every authored border survived. */ :where(.dough-freestyle input[data-dough-quantity]) { appearance: textfield; -moz-appearance: textfield; background: transparent; border: 0; padding: 0; width: 3.5em; text-align: center; } :where(.dough-freestyle input[data-dough-quantity])::-webkit-inner-spin-button, :where(.dough-freestyle input[data-dough-quantity])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } :where(.dough-freestyle img, .dough-freestyle svg, .dough-freestyle video) { max-width: 100%; } /* Intrinsic HTML height attributes must scale with responsive width. Authored crops/heights still win. */ :where(.dough-freestyle img) { height: auto; } .dough-freestyle { --dough-primary: #111111; --dough-secondary: #444444; --dough-fg: #111111; --dough-bg: #ffffff; --dough-muted: rgba(0,0,0,.6); --dough-border: rgba(0,0,0,.12); --dough-radius: 16px; --dough-space: 1rem; } /* Typographic craft the corpus never authors, so the platform guarantees it. Measured over 514 stored sites: * text-wrap 0/514, font-variant-numeric 0/514, ::selection 0/514, :focus-visible 4/514. Base sheet rather than * doctrine because a stylesheet rule needs no model cooperation and reaches every stored page retroactively, * where a prompt only nudges future generations. Zero specificity (:where) except where noted, so authored CSS * always wins. */ /* Headings only (h1-h3): balance evens out ragged two-to-four-line display lines. Never on paragraphs, where * balancing long-form text changes the measure the author designed. */ :where(.dough-freestyle h1, .dough-freestyle h2, .dough-freestyle h3) { text-wrap: balance; overflow-wrap: anywhere; } /* Running text: pretty only re-breaks the last lines to avoid a one-word orphan, so it keeps the authored measure * that balance would change. Not on controls, nav or labels, which the wrapped-label probe wants on one line. */ :where(.dough-freestyle p, .dough-freestyle li, .dough-freestyle dd, .dough-freestyle blockquote, .dough-freestyle figcaption) { text-wrap: pretty; } /* Tabular figures where digits align in columns: live price/number slots, stat blocks, spec tables. Only affects * digit glyphs, so a text-valued slot (productName) passes through untouched. NOT applied to all text: tabular * spacing in prose is a downgrade of a proportional face. */ :where(.dough-freestyle [data-dough-var], .dough-freestyle [data-dough-product-field="price"], .dough-freestyle .dough-stat__num, .dough-freestyle .dough-table th, .dough-freestyle .dough-table td) { font-variant-numeric: tabular-nums lining-nums; } /* Keyboard focus ring. Deliberately NOT zero specificity: the elements stay inside :where() but .dough-freestyle * and :focus-visible still count (0-2-0), so the ring survives the generic outline-none resets authored sheets * carry on *:focus (0-1-0) and button:focus (0-1-1), which would kill a :where()-wrapped ring outright. An * authored intentional .btn:focus-visible style ties at 0-2-0 and wins as the later sheet. currentColor rather * than a brand token: the local text color contrasts with the local background by construction, a token cannot * promise that. (No braces in this comment: topLevelRuleSelector slices at the first brace it sees.) */ .dough-freestyle :where(a, button, input, select, textarea, summary, [data-dough-action], [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Selection tint: a FIXED high-contrast pair, not the brand token. An authored --dough-primary can be a light * pastel and CSS cannot derive a readable text color from it, so brand-tinted selection cannot be guaranteed * legible on 514 unknown palettes; near-black behind white text reads on any of them. Zero specificity, so an * authored ::selection wins. */ :where(.dough-freestyle) ::selection { background: #111111; color: #ffffff; } .dough-freestyle .dough-card { border: 1px solid var(--dough-border); border-radius: var(--dough-radius); padding: calc(var(--dough-space) * 1.5); background: var(--dough-bg); } .dough-freestyle .dough-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dough-space); } .dough-freestyle .dough-badge { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--dough-primary); color: #fff; } .dough-freestyle .dough-pill { display: inline-flex; align-items: center; padding: .3em .9em; border-radius: 999px; border: 1px solid var(--dough-border); font-size: .85rem; } .dough-freestyle .dough-faq { border-bottom: 1px solid var(--dough-border); padding: var(--dough-space) 0; } .dough-freestyle .dough-faq__q { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1em; } .dough-freestyle .dough-faq__q::-webkit-details-marker { display: none; } .dough-freestyle .dough-faq__q::after { content: ''; flex: none; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.12em); } .dough-freestyle .dough-faq[open] .dough-faq__q::after { transform: rotate(-135deg) translateY(-.12em); } .dough-freestyle .dough-faq[open] .dough-faq__q { margin-bottom: .6em; } @media (prefers-reduced-motion: no-preference) { .dough-freestyle .dough-faq__q::after { transition: transform .25s ease; } } .dough-freestyle .dough-hero { display: grid; gap: calc(var(--dough-space) * 1.5); align-items: center; padding: calc(var(--dough-space) * 3) 0; } @media (min-width: 768px) { .dough-freestyle .dough-hero { grid-template-columns: 1fr 1fr; } } .dough-freestyle .dough-hero__media img { width: 100%; height: auto; border-radius: var(--dough-radius); display: block; } /* Gallery helpers are defaults, like the viewer below. Higher specificity overrode an authored column * with a two-track grid and forced cover cropping on a contain image (Lime Lark, DEV 2026-09-08). */ :where(.dough-freestyle .dough-gallery) { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--dough-space); } :where(.dough-freestyle .dough-gallery__item img) { width: 100%; height: 100%; object-fit: cover; border-radius: var(--dough-radius); display: block; } /* Product image viewer (data-dough-gallery). Every rule is wrapped in :where() so the whole block has * ZERO specificity and any authored selector beats it — the lesson from the variant-option ring, which * stacked a near-black outline on top of every well-styled site and could only be killed with * !important. The active-thumbnail rule survives that treatment (unlike the variant ring, which was * dropped entirely) because a strip with no current-photo indication is not merely unstyled, it is * unusable: the shopper cannot tell which image they are looking at. */ /* pan-y keeps vertical scrolling native while horizontal drags reach the swipe handler; pinch-zoom * keeps NATIVE page pinch working on the image (bare pan-y removed it, so a failed lightbox chunk * load left the shopper with no zoom at all). */ :where(.dough-freestyle [data-dough-gallery-main]) { display: block; width: 100%; height: auto; cursor: zoom-in; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; } /* align-items: center rather than the flex default of stretch. Reported twice by the owner as a recurring thumbnail * defect ("when the thumbnail are wide we should vertically center"), and the cause is the default: authors give the * rail flex:1 thumbs, one image resolves taller than its siblings, stretch grows every button to match, and each * button clips its image from the TOP because overflow: hidden crops from the start edge. Centring makes the rail * size to its content instead, so a wide thumb shows the middle of its picture. Still :where(), so an author who * genuinely wants stretched thumbs can say so. */ /* A rail with more thumbs than a phone is wide scrolls sideways, and a painted scrollbar under it is the worst-looking * part of the gallery (owner report 2026-09-23: "the carousel is horrible on mobile"). Browsers that draw classic * scrollbars (desktop, the builder preview, a narrow window) painted one under every overflowing rail. The rail * stays scrollable by touch, wheel and keyboard; the cut-off last thumb is what says there is more. Snap keeps a * swipe from stopping half-way through a thumb. */ :where(.dough-freestyle [data-dough-gallery-thumbs]) { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } :where(.dough-freestyle [data-dough-gallery-thumbs])::-webkit-scrollbar { display: none; } :where(.dough-freestyle [data-dough-gallery-thumb]) { scroll-snap-align: start; flex: none; width: 4rem; height: 4rem; padding: 0; overflow: hidden; border: 1px solid var(--dough-border); border-radius: calc(var(--dough-radius) / 2); background: none; cursor: pointer; } :where(.dough-freestyle [data-dough-gallery-thumb] img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } :where(.dough-freestyle [data-dough-gallery-thumb][data-dough-active]) { border-color: var(--dough-primary); } /* The photo list of a strip-less carousel is DATA, not layout. the hidden attribute alone is a UA default that an author * rule on the container itself would beat, and the failure mode is the worst one available: a column of * full-size duplicate photographs under the viewer. So this one rule is deliberately NOT :where() and carries * !important, the same treatment the non-ready scrolly wrapper gets. */ .dough-freestyle [data-dough-gallery-photos] { display: none !important; } /* Photo-set entries are data even when their list wrapper is missing its marker. */ .dough-freestyle [data-dough-gallery-photo]:not([data-dough-gallery-main], [data-dough-gallery-thumb], [data-dough-gallery-thumb] *) { display: none !important; } /* Dots and arrows get a minimum usable default for the same reason the active-thumbnail rule does: a dot row * with no current-photo indication is not merely unstyled, it is unusable, and a 10px dot is not a tap target. * Zero specificity, so any authored look wins outright. */ :where(.dough-freestyle [data-dough-gallery-dots]) { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; } :where(.dough-freestyle [data-dough-gallery-dot]) { width: .5rem; height: .5rem; padding: 0; border: 1px solid var(--dough-primary); border-radius: 999px; background: none; cursor: pointer; } :where(.dough-freestyle [data-dough-gallery-dot][data-dough-active]) { background: var(--dough-primary); } :where(.dough-freestyle [data-dough-gallery-prev]), :where(.dough-freestyle [data-dough-gallery-next]) { cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; } .dough-freestyle .dough-stat { text-align: center; } .dough-freestyle .dough-stat__num { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1; color: var(--dough-primary); } .dough-freestyle .dough-table { width: 100%; border-collapse: collapse; } .dough-freestyle .dough-table th, .dough-freestyle .dough-table td { padding: .75em 1em; border-bottom: 1px solid var(--dough-border); text-align: left; } /* A safety net, not a layout: no min-width on the table, which forced every wrapped table to scroll on a phone. */ .dough-freestyle .dough-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } [data-dough-action], [data-dough-click] { cursor: pointer; } /* No platform default for the selected state of plan/variant options: the page's own CSS owns it. * A baseline outline in --dough-primary stacked a second (usually near-black) ring on top of the * authored highlight on every well-styled site, and authors could only kill it with !important. * Sites that forget the attribute are caught at authoring time by collectCapabilityStyleWarnings. * Rating stars are the exception below: they need chrome stripped to read as glyphs at all. */ /* Rating-star default: strip button chrome and show empty vs. filled via color, so an unstyled star * rating still renders as a usable control. Low specificity so any authored star rule wins. */ .dough-freestyle [data-dough-action="select-rating"] { border: 0; background: none; padding: 0 .05em; line-height: 1; color: var(--dough-border); } .dough-freestyle [data-dough-action="select-rating"][data-dough-selected="true"] { color: var(--dough-primary); } /* Reviews "load more": the runtime injects one when the author didn't write it, so it needs to be * legible unstyled. Low specificity and no color of its own beyond the theme border, so an authored * button keeps its own look. Block display + auto margins center it under the list either way. */ .dough-freestyle [data-dough-reviews-more] { display: block; margin: var(--dough-space) auto 0; padding: .6em 1.4em; border: 1px solid var(--dough-border); border-radius: var(--dough-radius); background: none; color: inherit; font: inherit; } .dough-freestyle [data-dough-reviews-more][hidden] { display: none; } /* Catalogue browsing (catalog-browse.ts): paged/filtered cards and the controls the runtime toggles. */ .dough-freestyle [data-dough-product-id][hidden], .dough-freestyle [data-dough-catalog-clear][hidden], .dough-freestyle [data-dough-catalog-clear]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-no-results][hidden], .dough-freestyle [data-dough-catalog-no-results]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-more][hidden], .dough-freestyle [data-dough-catalog-more]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-all][hidden], .dough-freestyle [data-dough-catalog-all]:not([data-dough-catalog-ready]) { display: none !important; } .dough-freestyle [data-dough-catalog-search]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-sort]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-count]:not([data-dough-catalog-ready]) { visibility: hidden; } .dough-freestyle [data-dough-catalog-sentinel] { height: 1px; margin-top: -1px; pointer-events: none; } :where(.dough-freestyle select[data-dough-catalog-sort], .dough-freestyle button[data-dough-catalog-sort]) { font: inherit; font-size: .875rem; line-height: 1.4; color: inherit; min-height: 2.75rem; max-width: 100%; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .5rem; background-color: transparent; cursor: pointer; } :where(.dough-freestyle select[data-dough-catalog-sort]) { width: auto; } :where(.dough-freestyle [data-dough-catalog-sort]:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; } :where(.dough-freestyle button[data-dough-catalog-sort]:hover, .dough-freestyle button[data-dough-catalog-sort][aria-pressed="true"]) { background-color: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; } :where(.dough-freestyle [data-dough-catalog-sort]:disabled) { opacity: .5; cursor: not-allowed; } @supports (appearance: base-select) { :where(.dough-freestyle select[data-dough-catalog-sort]), :where(.dough-freestyle select[data-dough-catalog-sort])::picker(select) { appearance: base-select; } :where(.dough-freestyle select[data-dough-catalog-sort]) { gap: 1rem; align-items: center; } :where(.dough-freestyle select[data-dough-catalog-sort])::picker(select) { font: inherit; color: var(--dough-fg, CanvasText); background: var(--dough-bg, Canvas); padding: .375rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .625rem; box-shadow: 0 .5rem 1.5rem #0002; margin-block: .375rem; } :where(.dough-freestyle select[data-dough-catalog-sort] option) { padding: .625rem .75rem; border-radius: .25rem; } :where(.dough-freestyle select[data-dough-catalog-sort] option:hover, .dough-freestyle select[data-dough-catalog-sort] option:checked) { background: color-mix(in srgb, currentColor 10%, transparent); } } /* Review card the runtime authors when a data-dough-reviews container has no template card (an edit emptied it, * or the author never wrote one). Same bar as the load-more fallback: legible unstyled, theme border, no colour * of its own. Kept plain on purpose so the audit's "no template card" warning stays worth fixing. */ .dough-freestyle [data-dough-review-fallback] { display: grid; gap: .35em; padding: 1em 1.2em; margin: 0 0 var(--dough-space); border: 1px solid var(--dough-border); border-radius: var(--dough-radius); font: inherit; color: inherit; } .dough-freestyle [data-dough-review-fallback] > p { margin: 0; } .dough-freestyle [data-dough-review-fallback] > time { font-size: .85em; opacity: .7; } /* Email-capture popup: platform-default overlay so a popup is a usable, dismissable, mobile-friendly * modal even before the author styles it. Applied only when shown (:not([hidden]) — the runtime toggles * the hidden attribute, and this keeps the hidden state working) and at low specificity, so both the * hidden attribute and any authored popup CSS still win. */ .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--dough-space); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) > * { position: relative; width: 100%; max-width: 26rem; max-height: 90vh; overflow: auto; background: var(--dough-bg); color: var(--dough-fg); border-radius: var(--dough-radius); padding: calc(var(--dough-space) * 1.5); } /* Mobile: full-screen takeover, ENFORCED. Geometry uses !important on purpose: authored cards carry * inline styles (max-width, border-radius, border) that would otherwise beat any stylesheet rule and * leave a floating card. The platform mandates the full-bleed frame; the author keeps the look * (colors, typography, padding). */ @media (max-width: 640px) { .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) { padding: 0 !important; } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) > * { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column; justify-content: center; } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) [data-dough-popup-close] { top: max(.75rem, env(safe-area-inset-top)); right: .75rem; z-index: 1; } } /* Platform footer attribution (authored or write-gate-injected): quiet by default, and it must LOSE to * every authored rule. Hence :where() (zero specificity): a plain .dough-freestyle [data-dough-attribution] * selector is 0-2-0 and beat the site's own .footer-attribution a at 0-1-1, forcing near-black text onto * a dark footer (the attribution was present but invisible). And color: inherit rather than a fixed token, * so the line adapts to whatever the footer around it uses instead of assuming a light background. */ /* Platform legal row (terms + privacy, write-gate-injected). Same reasoning as the attribution below it: quiet, * inheriting the footer's own colour, and at ZERO specificity so any authored footer rule wins. Without this the * links rendered as unstyled anchors below the copyright line, which is exactly how they were reported. */ :where(.dough-freestyle .dough-legal-row) { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: var(--dough-space) 0 0; font-size: .75rem; letter-spacing: .02em; color: inherit; opacity: .7; } :where(.dough-freestyle .dough-legal-link) { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } :where(.dough-freestyle [data-dough-attribution]) { display: block; padding: var(--dough-space) 0; text-align: center; font-size: .75rem; letter-spacing: .02em; color: inherit; opacity: .75; text-decoration: none; } /* Close affordance (authored or runtime-injected): a 44px tap target in the card's top-right corner. */ .dough-freestyle [data-dough-popup-close] { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--dough-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; } /* Scroll reveal (data-dough-reveal). FAIL-OPEN by construction: the hide-at-rest rules only apply * once the runtime stamps [data-dough-motion] on the wrapper — which it never does without JS, with * reduced motion on, or in the screenshot-review capture — so crawlers, no-JS visitors and the * visual reviewer always see the complete resting page. Sibling of the CLAUDE.md rule that an * animation may never be what makes content visible. */ @media (prefers-reduced-motion: no-preference) { .dough-freestyle[data-dough-motion] [data-dough-reveal] { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .dough-freestyle[data-dough-motion] [data-dough-reveal]:not([data-dough-revealed]) { opacity: 0; } .dough-freestyle[data-dough-motion] [data-dough-reveal="fade-up"]:not([data-dough-revealed]) { transform: translateY(24px); } .dough-freestyle[data-dough-motion] [data-dough-reveal="scale-in"]:not([data-dough-revealed]) { transform: scale(.94); } .dough-freestyle[data-dough-motion] [data-dough-reveal="slide-left"]:not([data-dough-revealed]) { transform: translateX(-32px); } .dough-freestyle[data-dough-motion] [data-dough-reveal="slide-right"]:not([data-dough-revealed]) { transform: translateX(32px); } } /* Scrollytelling. Same fail-open gate: without [data-dough-scrolly-ready] (runtime-set) the wrapper * is a normal section and the steps read stacked in document flow. When the runtime drives it, the * stage pins for the wrapper's height and the steps stack in one grid cell, crossfading on * data-dough-active. Steps must be DIRECT children of the stage (grid-area needs grid items). */ /* The author's OWN height on the wrapper, neutralized whenever the runtime is not driving it. This is the one * place fail-open cannot be left to the author: the docs ask for a scroll-through wrapper, models write a tall * value themselves (measured 2026-08-21: a 200vh and a 220vh authored min-height on two of three builds), and an * ungated one is multiple viewports of empty void with no JS, under reduced motion, and in the review capture, * which is exactly how BOTH of those builds were graded 3/10 and discarded, taking the whole run with them. * important is used because the author's class selector outranks this one and the point is that it cannot be * overridden; scoped to the not-ready state so it never touches the driven one. Same principle as the contrast * auto-fix: a model loop must not be paid to satisfy a check code can satisfy itself. */ /* Progress starts at 0 for every wrapper, always, JS or no JS. Author CSS reads this variable in calc(), and a * calc() over an UNSET variable is an invalid declaration that the browser drops, so without this default a * progress-driven rule renders as no rule at all: transforms, offsets and opacities silently vanish and the section * looks broken. Declared here rather than hoped for from the runtime, which is the same fail-open reasoning as the * reveal resting state. */ .dough-freestyle [data-dough-scrolly] { --dough-scrolly-progress: 0; } .dough-freestyle [data-dough-scrolly]:not([data-dough-scrolly-ready]) { min-height: 0 !important; height: auto !important; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] { min-height: 220vh; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-stage] { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: grid; align-content: center; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-step] { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s ease, transform .45s ease; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-step][data-dough-active] { opacity: 1; transform: none; pointer-events: auto; } /* Ticker band (data-dough-ticker). Two states, and the RESTING one carries as much weight as the driven * one: the harness renders its review screenshot as a plain document with no runtime (document.ts), so a * resting row that stopped at its own content width would show the reviewer exactly the half-empty band * this capability exists to remove. At rest the row therefore spans the band and spreads its items; * that is also what a crawler and a reduced-motion reader get, and it reads as a deliberate row of * phrases rather than a stalled animation. * * Only when the runtime has repeated the items past the band width and measured the cycle stride * (--dough-ticker-shift) does the row become a max-content track and travel. Animating that MEASURED * distance rather than a percentage is what makes the wrap seamless at any width, and the repeats are * what stop a short band travelling through blank track. Both were the reported bug when the model * hand-authored this (2026-08-25). */ .dough-freestyle [data-dough-ticker] { overflow: hidden; } .dough-freestyle [data-dough-ticker] [data-dough-ticker-track] { display: flex; flex-wrap: nowrap; min-width: 100%; overflow: visible !important; } :where(.dough-freestyle [data-dough-ticker] [data-dough-ticker-track]) { align-items: center; gap: 2rem; justify-content: space-between; } .dough-freestyle [data-dough-ticker] [data-dough-ticker-track] > * { flex: 0 0 auto !important; } .dough-freestyle [data-dough-ticker][data-dough-ticker-ready] [data-dough-ticker-track] { width: max-content; min-width: 0; justify-content: flex-start; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .dough-freestyle [data-dough-ticker][data-dough-ticker-ready] [data-dough-ticker-track] { animation: dough-ticker-travel var(--dough-ticker-duration, 30s) linear infinite; } } @keyframes dough-ticker-travel { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--dough-ticker-shift, 0px))); } } /* Pointer tilt: the runtime writes the transform per frame; the transition smooths entry/reset. */ .dough-freestyle [data-dough-tilt] { will-change: transform; transform-style: preserve-3d; transition: transform .12s ease-out; } /* Ambient canvas layer: injected as the section's first child, painted behind its content * (isolation creates the stacking context that keeps z-index:-1 inside the section). */ .dough-freestyle [data-dough-effect] { position: relative; isolation: isolate; } .dough-freestyle .dough-effect-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } /* Runtime-owned product viewer. Dialog top-layer placement escapes generated stacking contexts. */ .dough-freestyle .dough-lightbox { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; z-index: 1200; background: #fff; color: #171717; font: 14px/1.4 system-ui, sans-serif; overscroll-behavior: contain; overflow: hidden; } .dough-freestyle .dough-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .dough-freestyle .dough-lightbox::backdrop { background: #fff; } .dough-freestyle .dough-lightbox [hidden] { display: none !important; } .dough-freestyle .dough-lightbox button { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: #171717; font: inherit; line-height: 1; cursor: pointer; box-shadow: none; transform: none; touch-action: manipulation; } .dough-freestyle .dough-lightbox button:hover { background: #f5f5f5; } .dough-freestyle .dough-lightbox button:focus-visible { outline: 2px solid #171717; outline-offset: 3px; } .dough-freestyle .dough-lightbox button:disabled { opacity: .35; cursor: default; } .dough-freestyle .dough-lightbox__header { display: flex; align-items: center; gap: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__count { margin-right: auto; color: #626262; font-size: 12px; font-variant-numeric: tabular-nums; } .dough-freestyle .dough-lightbox .dough-lightbox__close { font-size: 22px; font-weight: 300; } .dough-freestyle .dough-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; } .dough-freestyle .dough-lightbox__stage[data-zoomed="true"] { cursor: grab; } .dough-freestyle .dough-lightbox__stage[data-zoomed="true"]:active { cursor: grabbing; } .dough-freestyle .dough-lightbox .dough-lightbox__image { display: block; flex: none; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; } .dough-freestyle .dough-lightbox .dough-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; background: rgba(255,255,255,.88); font-size: 28px; font-weight: 300; z-index: 1; } .dough-freestyle .dough-lightbox__nav--prev { left: max(12px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__nav--next { right: max(12px, env(safe-area-inset-right)); } .dough-freestyle .dough-lightbox__status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 56px; background: #fff; color: #626262; text-align: center; cursor: default; } .dough-freestyle .dough-lightbox .dough-lightbox__retry { text-decoration: underline; text-underline-offset: 4px; } .dough-freestyle .dough-lightbox__footer { min-width: 0; padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__caption { margin: 0 auto 8px; max-width: 65ch; max-height: 3em; overflow: auto; color: #626262; text-align: center; font: 12px/1.5 system-ui, sans-serif; } .dough-freestyle .dough-lightbox__thumbs { display: flex; gap: 8px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .dough-freestyle .dough-lightbox .dough-lightbox__thumb { width: 48px; height: 52px; min-width: 48px; padding: 0 0 6px; overflow: hidden; border-bottom: 1px solid transparent; } .dough-freestyle .dough-lightbox .dough-lightbox__thumb[aria-pressed="true"] { border-bottom-color: #171717; } .dough-freestyle .dough-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; } /* Gesture help stays available to assistive technology without a permanent instructional row. */ .dough-freestyle .dough-lightbox__hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 767px), (hover: none) and (pointer: coarse) { .dough-freestyle .dough-lightbox .dough-lightbox__nav { display: none; } } @media (max-height: 500px) { .dough-freestyle .dough-lightbox__caption, .dough-freestyle .dough-lightbox__hint { display: none; } .dough-freestyle .dough-lightbox__footer { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); } .dough-freestyle .dough-lightbox .dough-lightbox__thumb { width: 44px; height: 44px; min-width: 44px; } } /* Platform variant picker (product-commerce.ts insertFallbackGroups): rendered only for an axis the layout gave no * picker. currentColor and inherit so it takes the section's own text color and type rather than a brand token * the design may never have declared. A colour axis draws as swatches with its caption kept for screen readers. */ .dough-freestyle .dough-variant-fallback { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; } .dough-freestyle .dough-variant-fallback__label { font-size: .85rem; font-weight: 600; } .dough-freestyle .dough-variant-fallback__options { display: flex; flex-wrap: wrap; gap: .5rem; } .dough-freestyle .dough-variant-fallback__option { min-width: 44px; min-height: 44px; padding: .5em 1em; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: .7; } .dough-freestyle .dough-variant-fallback__option[data-dough-selected="true"] { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; } .dough-freestyle .dough-variant-fallback__option[aria-disabled="true"] { opacity: .35; cursor: not-allowed; } .dough-freestyle .dough-variant-fallback[data-dough-axis-kind="color"] .dough-variant-fallback__option { width: 44px; padding: 0; background: var(--dough-option-color, transparent); } .dough-freestyle .dough-variant-fallback[data-dough-axis-kind="color"] .dough-variant-fallback__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

SPECIMEN CLASSIFICATION: FIELD DEPLOYED

Velo VM-1 EMF Meter

Instant visual electromagnetic field tracking for investigators with modern USB-C charging

/ USB-C Fast
/ Light Arc
/ SingleAxis
/ Matte Grip

$59.99

Experimental Grade

Ration Volume:

FIELD OPERATIONS DEBRIEF

Tactical Specifications

Detect electromagnetic spikes with surgical clarity. Traditional meters leave you guessing in the dark and fumbling with dead 9V batteries. The VELO VM-1 redefines field tracking with a dynamic multi-color LED arc and backlit digital readout, transforming subtle fluctuations into immediate visual signals. Encased in an ergonomic matte obsidian shell with dependable USB-C charging, it delivers uninterrupted precision across home audits and midnight investigations. Take control of your environment and pre-order your VM-1 today. Provides immediate peripheral visualization of field strength spikes in total darkness, guarantees all-night battery reliability without disposable 9V cells, and delivers pinpoint directional accuracy for environmental sweeps.

Size 4.5" x 2.4" x 1.1"

Instant Visual Alerts A sweeping multi-color LED arc alerts your peripheral vision to spikes even in pitch-black testing conditions.

USB-C Rechargeable Built-in lithium battery powers through eighteen hours of continuous detection with fast modern charging.

Directional Accuracy Single-axis induction coil isolates exact electromagnetic sources without fuzzy omnidirectional averaging.

Materials Impact-resistant matte ABS resin housing, silicone USB-C port cover, precision copper induction coil sensor, monochrome backlit LCD screen, and multi-segment LED diffuser.

Directions for use Power on using the tactile bottom toggle. Sweep the sensor slowly across testing zones to identify field gradients. Monitor numerical milligauss readings on the LCD screen alongside the dynamic LED arc. Recharge via standard USB-C port when depleted.

64%

of investigators struggle with dead batteries

24/7

Field Verified

CALIBRATED PERFORMANCE THRESHOLDS

Operational Comparison

Standard Benchmark: Standard 9V EMF Meters

Power System

Bald & Bonkers Standard Fast USB-C Rechargeable

Conventional Benchmark Disposable 9V Batteries

Visual Indication

Bald & Bonkers Standard Dynamic Multi-Color LED Arc

Conventional Benchmark Dim Static LEDs

Dark Visibility

Bald & Bonkers Standard Backlit High-Contrast LCD

Conventional Benchmark Unlit Analog Needle

Enclosure Finish

Bald & Bonkers Standard Tactile Matte Obsidian Shell

Conventional Benchmark Slick Cheap Plastic

TELEMETRY QUERIES

Operational Protocol FAQs

How does the VM-1 detect and display electromagnetic fields? +

The VM-1 features a precision-wound single-axis induction coil calibrated to measure low-frequency electromagnetic fluctuations with high sensitivity. Incoming field strength is processed instantly and translated into two clear readouts: an exact digital milligauss measurement on the high-contrast backlit LCD, and an intuitive curved LED light arc. The arc shifts dynamically from emerald green…

How long does the rechargeable battery last on a single charge? +

The integrated lithium-ion battery provides up to 18 hours of continuous field detection on a single full charge, easily outlasting extended nocturnal investigations or multiple home environmental audits. When power runs low, simply connect the included braided cable to any USB-C port or portable battery pack for a rapid recharge in under 90 minutes. You will never need to buy, carry, or discard…

Why choose a single-axis meter over traditional multi-axis units? +

Single-axis meters offer unmatched directional precision when pinpointing the exact physical source of electromagnetic radiation or anomalous localized spikes. By rotating the VM-1 slowly through physical space, investigators and inspectors can trace flux gradients directly to individual wiring runs, appliances, or localized anomalies rather than receiving an ambiguous omnidirectional average…

Research Advisory Notice

Built for Living Without Second Thoughts

Every formulation and piece of field hardware is deployed under strict experimental research standards. Tested against the unexpected for high-octane individuals.

Back to Operational Hub