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

Spektral Portal SpiritBOX DEvice

Precision ghost box audio filtering for serious paranormal investigators

/ DSP Sweep
/ Analog Rev
/ Dual Power
/ Bluetooth

$129.99

Experimental Grade

Ration Volume:

FIELD OPERATIONS DEBRIEF

Tactical Specifications

Tear through RF static and tune directly into anomalous audio phenomena. Built for serious paranormal researchers, the Bald and Bonkers Portal replaces flimsy novelty spirit boxes with custom DSP sweeping, integrated analog noise reduction, and studio-grade reverb control. Its electroplated copper faceplate and dual AC/DC power options guarantee uninterrupted overnight field monitoring. Uncover hidden frequencies with absolute acoustic precision—secure your Bald and Bonkers Portal pre-order today. Isolate anomalous vocal frequencies with surgical clarity. The dedicated dual-filter sweep system suppresses harsh radio noise while adding rich analog reverb, empowering researchers to capture and analyze electronic voice phenomena in real time during overnight investigations.

Size 9.5" x 5.8" x 3.2"

Acoustic Precision Custom DSP sweep architecture paired with analog noise dampening isolates anomalous voices from radio chatter.

Continuous Field Power Dual AC and USB-C power circuits eliminate dead-battery disruptions during extended overnight vigils.

Occult Ergonomics Laser-etched copper faceplate and knurled metal potentiometers deliver tactile, zero-slip operational control in total darkness.

Materials High-impact ABS polymer chassis, electroplated brushed copper front panel, cold-rolled steel acoustic mesh grille, custom multi-layer audio DSP PCB, industrial knurled potentiometers, and internal Class-D amplifier module.

Setup Connect the unit to AC wall power or recharge via USB-C. Power on the device, tune the knurled Sweep dial to set radio scanning cadence, and balance noise reduction and reverb knobs to establish optimal acoustic clarity. Connect aux or Bluetooth to monitor external audio.

74%

of active paranormal researchers report that direct onboard audio recording and adjustable sweep filters significantly streamline EVP documentation during investigations.

24/7

Field Verified

CALIBRATED PERFORMANCE THRESHOLDS

Operational Comparison

Standard Benchmark: Standard Spirit Boxes

Audio Filtering

Bald & Bonkers Standard Analog Reverb & Noise Reduction

Conventional Benchmark Unfiltered Raw Static

Power Architecture

Bald & Bonkers Standard Dual AC Wall & USB-C

Conventional Benchmark Disposable 9V Batteries

Chassis Build

Bald & Bonkers Standard Electroplated Copper & ABS

Conventional Benchmark Flimsy Toy Plastic

Connectivity

Bald & Bonkers Standard Bluetooth & 3.5mm Aux

Conventional Benchmark Basic Headphone Out

TELEMETRY QUERIES

Operational Protocol FAQs

How does the custom DSP frequency sweep function? +

The Bald and Bonkers Portal utilizes an automated DSP sweep engine that cycles across both AM and FM bands at user-defined rates. Rather than producing harsh, jarring bursts of white noise, our custom audio board filters the signal through dedicated noise reduction and analog reverb circuits. This creates a balanced, continuous acoustic bed optimized for isolating potential electronic voice…

Can the portal run continuously during overnight investigations? +

Yes, the device is engineered with versatile dual-power circuitry. You can operate the Bald and Bonkers Portal untethered using its internal rechargeable battery via heavy-duty USB-C, or plug directly into a standard AC wall outlet for continuous multi-hour sessions. This ensures zero risk of power loss during critical vigil hours or ritual investigations.

How does Bald and Bonkers Portal differ from standard ghost boxes? +

Traditional spirit boxes rely on cheap modified consumer radios that lack output filtration, resulting in harsh, deafening static. The Bald and Bonkers Portal is a precision acoustic instrument featuring dedicated physical potentiometers for both active noise dampening and lush reverb. Paired with auxiliary output, Bluetooth input, and electroplated copper shielding, it delivers professional…

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