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

Sentinel-X

Lab-grade environmental hazard detection for homeowners through five unified sensors

/ 5-in-1
/ Lab-Grade
/ EMF + Rad
/ Real-Time

$289.99

Experimental Grade

Ration Volume:

FIELD OPERATIONS DEBRIEF

Tactical Specifications

Stop guessing whether your living space is safe from invisible hazards. Traditional environmental inspection demands multiple expensive, disconnected meters. Sentinel-X solves this by integrating five laboratory-grade diagnostic sensors into one ruggedized handheld unit. Its high-contrast telemetry dashboard displays radiation, EMF, carbon monoxide, mold particulates, and infrasound in real time, giving you decisive data to protect your living space. Engineered with shockproof ABS and tactical traction grips for uncompromising field reliability. Pre-order Sentinel-X now to take command of your environment. Gain instant, uncompromising awareness of hidden environmental threats. Sentinel-X unifies five lab-grade detection instruments into one rugged handheld monitor, identifying ionizing radiation, electromagnetic fields, deadly carbon monoxide, airborne mold spores, and low-frequency infrasound before they impact your health. Protect your family, verify property safety, and make data-driven decisions with real-time multi-hazard telemetry.

Size 6.2" x 3.1" x 1.2"

Complete Hazard Awareness Screen radiation, EMF, carbon monoxide, airborne mold, and infrasound simultaneously with lab-grade precision.

Unified Live Telemetry View all critical environmental metrics at a glance on the high-contrast dashboard without switching modes.

Field-Tested Durability Built with high-impact ABS chassis and textured crimson rubber overmolding engineered for demanding inspections.

Components High-impact ABS plastic chassis with textured rubberized grip overmolding, custom multi-sensor PCB assembly integrating a Geiger-Müller tube, electrochemical carbon monoxide sensor, optical particulate mold chamber, tri-field magnetometer, and low-frequency infrasound microphone.

Directions for use Power on Sentinel-X using the industrial side toggle. Allow 15 seconds for automated sensor self-calibration. Hold the ergonomic grip upright at chest height while walking through target inspection zones. Monitor the high-contrast dashboard for simultaneous real-time radiation, EMF, CO, mold, and infrasound readings. Threshold alerts trigger immediate audible and visual alarms when hazards exceed safety limits.

68%

of homeowners fear invisible indoor contaminants

24/7

Field Verified

CALIBRATED PERFORMANCE THRESHOLDS

Operational Comparison

Standard Benchmark: Standard Field Meters

5-in-1 Unified Sensor Architecture

Bald & Bonkers Standard Yes (All-In-One)

Conventional Benchmark No (Requires 5 Devices)

Simultaneous Real-Time Dashboard

Bald & Bonkers Standard Yes

Conventional Benchmark No

Infrasound and Mold Detection

Bald & Bonkers Standard Included

Conventional Benchmark None

High-Impact Rugged Grip Chassis

Bald & Bonkers Standard Dual-Injected ABS

Conventional Benchmark Flimsy Plastic

TELEMETRY QUERIES

Operational Protocol FAQs

How does Sentinel-X detect five distinct hazards simultaneously? +

Sentinel-X integrates five independent diagnostic sensors onto a proprietary, interference-shielded PCB. The unit incorporates a precision Geiger-Müller tube for ionizing radiation, an electrochemical sensor for carbon monoxide, an optical particulate chamber calibrated for airborne mold spore signatures, a tri-field magnetometer for electromagnetic radiation, and a specialized acoustic…

How often does Sentinel-X require recalibration or maintenance? +

Each Sentinel-X unit undergoes rigorous individual factory calibration in certified environmental chambers before shipment. Under standard inspection routines, the internal sensors maintain laboratory accuracy for two full years without manual adjustment. The onboard firmware performs automated self-diagnostic baselines every time the device powers up, alerting you immediately if any sensing…

Why choose Sentinel-X over purchasing individual testing instruments? +

Acquiring separate professional-grade meters for radiation, EMF, carbon monoxide, mold particulates, and infrasound typically costs over twelve hundred dollars and requires managing multiple bulky devices in the field. Sentinel-X consolidates all five critical screening functions into a single ruggedized, shock-resistant enclosure at a fraction of the cost. Rather than juggling multiple…

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