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

OMNI-LOG Proximity Suite

Empirical anomaly tracking for paranormal researchers through multi-sensor coincidence rejection.

/ Zero False
/ 4-Hr Scrub
/ IP67 Armor
/ Dual-Core

$249.99

Experimental Grade

Ration Volume:

FIELD OPERATIONS DEBRIEF

Tactical Specifications

Capture indisputable field telemetry with the Omni-Log Proximity Suite. Standard anomaly sensors fail when triggered by footsteps, radio chatter, and battery sag. Omni-Log replaces guesswork with an intelligent multi-sensor coincidence engine that cross-references proximity spikes with RF and 3-axis vibration feeds to actively reject false alarms. Review real-time readings on the dark OLED rolling graph, or scrub up to four hours of logged historical baseline data directly on the device. Back your paranormal investigations with verifiable, lab-grade empirical proof. Reserve your Omni-Log Proximity Suite today. Eliminates time wasted on mechanical vibrations and radio interference by mathematically cross-referencing antenna triggers against secondary sensors. Investigators gain continuous baseline clarity with an onboard 4-hour historical rolling log, ensuring anomalous shifts are never missed during unmonitored sweeps. Rugged sealed construction guarantees dependable empirical performance across demanding field environments.

Size 6.5" x 3.5" x 1.5"

Coincidence Logic Multi-sensor cross-referencing isolates real environmental anomalies by actively filtering structural vibrations and stray radio spikes.

Historical Scrubbing Examine up to four hours of continuous baseline fluctuations directly on the integrated high-contrast OLED display.

Mission-Grade Armor Built within an IP67 waterproof polycarbonate chassis protected by overmolded tactical silicone bumpers for extreme field durability.

Materials Polycarbonate-ABS reinforced shell with overmolded silicone bumpers, internal RF shielding, precision capacitive front-end, 3-axis accelerometer, wideband RF detector, ambient thermal sensor, high-contrast OLED display, and IP67 silicone gasket seals.

Setup Extend the telescoping antenna and power on via the sealed tactical switch. Allow 15 seconds for automated multi-sensor baseline auto-calibration. Place on a stable surface or carry during sweeps. Use the knurled rotary dial to scrub backwards through historical timeline events and inspect correlated sensor channels.

82%

of field investigators cite false alarms from mechanical vibration or radio interference as their biggest challenge during baseline monitoring.

24/7

Field Verified

CALIBRATED PERFORMANCE THRESHOLDS

Operational Comparison

Standard Benchmark: Standard REM Pods

Vibration Debunking

Bald & Bonkers Standard Automated

Conventional Benchmark None

RF Blast Filtering

Bald & Bonkers Standard Included

Conventional Benchmark None

Historical Event Scrubbing

Bald & Bonkers Standard 4-Hour Rolling

Conventional Benchmark No Logging

Enclosure Rating

Bald & Bonkers Standard IP67 Ruggedized

Conventional Benchmark Unsealed Plastic

TELEMETRY QUERIES

Operational Protocol FAQs

How does the multi-sensor rejection algorithm debunk false triggers? +

The Omni-Log Proximity Suite utilizes a hardware coincidence-detection engine that correlates antenna disturbances with onboard secondary sensors in real time. If a capacitive shift coincides with a micro-vibration from heavy footsteps detected by the 3-axis accelerometer, or an RF frequency burst from a walkie-talkie, the device tags the event as debunked rather than alarming. This…

How do investigators scrub through historical timeline data on site? +

The integrated knurled rotary dial permits instantaneous manual scrubbing through up to 4 hours of baseline telemetry directly on the OLED panel. Investigators can pause the rolling real-time feed to inspect specific time-stamped events across capacitive, temperature, and RF data tracks. Debunked triggers appear distinctly marked in amber, while unexplained baseline anomalies highlight in vivid…

What makes Omni-Log superior to conventional handheld REM pods? +

Traditional proximity pods operate as crude single-point alert systems that lack historical logging and trigger indiscriminately from ambient interference. The Omni-Log Proximity Suite pairs empirical multi-channel telemetry with rugged IP67 shockproof armor and internal RF shielding. Instead of ephemeral beeps that vanish the second you look away, Omni-Log logs verified scientific baselines…

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