.css`, and that
file was fetched and read — it needs no product to be published, so the one
part of the overlay that could be checked in advance was. Three things in it
matter, and the third is a trap:
1. It styles `a.gumroad-button` — one type + one class. Our selector adds a
second class and outranks it outright. `!important` is therefore belt and
braces rather than the mechanism, kept because the file is versioned by
content hash and can be reissued at any time without warning.
2. It ships `:hover` and `:active` rules, which are one pseudo-class *more*
specific than our base rule and so would win against it. That is why the
two rules below exist: without them the button slides up-left by a quarter
rem on hover, grows a hard offset shadow, and turns Gumroad pink.
3. ⚠ It sets custom properties on `.gumroad-button` itself, among them
`--accent: 255 144 232`. Anything here reading `var(--accent)` would
resolve it against *that* — a bare `255 144 232` is not a colour, so the
gradient and border would not merely go pink, they would fail to parse and
drop out entirely, leaving a transparent button. Hence `--btn-accent`,
copied off `.btn-row` above, which Gumroad's rules never touch. **Do not
"simplify" these back to `var(--accent)`.**
Every property Gumroad's rules set is answered below. If it ever reissues
that stylesheet with a property not named here, that property gets through —
the fix is to add it, not to drop the overlay.
-------------------------------------------------------------------------- */
/* 2026-08-17: gumroad.js doesn't only inject the overlay stylesheet above --
gumroad-bundle.js (which it loads) also mutates each `.gumroad-button`
anchor, appending a `.logo-full` child (a CSS-masked "gumroad" wordmark,
~7em wide) once it has run. Until that happens the button is just our own
plain "GET IT ON" text at its base width; the wordmark landing a beat later
pops the button wider mid-page-load, which read as cheap. Buttons start
`visibility: hidden` (NOT display:none/opacity, which wouldn't reserve the
box) and the inline script at the foot of index.html adds `.gr-ready` the
moment it sees `.logo-full` land (with a fallback timeout for a blocked or
slow gumroad.js) -- so the button always appears already at final size. */
a.btn.gumroad-button { visibility: hidden; }
a.btn.gumroad-button.gr-ready { visibility: visible; }
a.btn.gumroad-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: normal !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 9px 16px !important;
height: auto !important;
width: auto !important;
min-width: 0 !important;
border-radius: var(--radius) !important;
border: 1px solid color-mix(in srgb, var(--btn-accent) 55%, black) !important;
border-bottom-color: color-mix(in srgb, var(--btn-accent) 30%, black) !important;
color: #fff !important;
background-color: transparent !important;
background-image: linear-gradient(180deg,
color-mix(in srgb, var(--btn-accent) 88%, white) 0%,
var(--btn-accent) 46%,
color-mix(in srgb, var(--btn-accent) 82%, black) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 1px 3px rgba(0,0,0,0.26) !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.32) !important;
transform: none !important;
transition: none !important;
}
/* Point 2 above. These mirror `.btn:hover` / `.btn:active` exactly, so a buy
button and an ordinary button still feel identical under the cursor. */
a.btn.gumroad-button:hover {
color: #fff !important;
filter: brightness(1.06) !important;
transform: none !important;
background-color: transparent !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 1px 3px rgba(0,0,0,0.26) !important;
}
a.btn.gumroad-button:active {
transform: none !important;
filter: brightness(0.96) !important;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.34) !important;
}
.btn-ghost {
/* Same warm-cream moulded cap as `.site-nav a` (the header's own buttons),
not the flatter --face-hi/--control-bg wash this used to be -- 2026-08-17,
part of unifying every "Details"-style button on panels/apps with the
header's button family. */
background: linear-gradient(180deg, hsl(48,12%,98%) 0%, hsl(48,8%,90%) 45%, hsl(48,6%,75%) 100%);
color: var(--text-primary);
border: 1px solid hsl(48,5%,40%);
border-bottom-color: hsl(48,6%,28%);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(0,0,0,0.16),
0 1px 0 rgba(255,255,255,0.5), 0 1px 0 hsl(48,5%,60%), 0 2px 3px rgba(0,0,0,0.18);
}
.btn-ghost:hover { color: var(--text-primary); filter: brightness(1.05); }
.btn-ghost:active {
transform: translateY(1px);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.1);
}
.price { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* A product that is not for sale yet. It gets the panel furniture like
everything else — the point is that it reads as a considered part of the
range rather than a broken buy button. */
.notice { max-width: var(--measure); margin-top: 6px; }
.status {
display: inline-flex; align-items: center; gap: 7px;
font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--text-secondary);
border: 1px dashed var(--control-border); border-radius: var(--radius);
padding: 8px 14px;
background: color-mix(in srgb, var(--face-hi) 55%, transparent);
text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.status::before {
/* Rectangular pilot lamp, matching .panel-head::before -- see that rule for
why round became rectangular. */
content: ""; width: 5px; height: 8px; border-radius: 1.5px;
background: var(--accent); opacity: .55;
}
/* ================================================================= SUITE
The four icons in a row, at the size they read at in a Dock — which is the
argument for the bundle made visually rather than in prose. */
.suite .panel-body { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.bundles { display: grid; gap: 20px; }
/* Column flow rather than a fixed 2-wide grid: the Creative Bundle carries two
icons and the Toolbox three, and a 2-column grid put the third on its own
second row looking like an afterthought. */
.suite-icons { display: grid; grid-auto-flow: column; gap: 10px; }
.suite-icons img { width: 74px; height: 74px; border-radius: 15px; display: block; }
@media (max-width: 720px) {
.suite .panel-body { grid-template-columns: 1fr; gap: 18px; }
.suite-icons img { width: 60px; height: 60px; border-radius: 12px; }
}
/* ================================================== SCREENSHOTS, CUT OUT
These used to sit in a dark inset recess, borrowed from Spectrl's analyser
window and MutationStation's piano roll — both of which are genuinely a dark
screen sunk into a cream plate. That reads correctly for a piece of UI inside
an app and wrong for a picture of a whole app: it wrapped a black rectangle
around a cream window, so the pages read as a stack of dark cards laid on the
plate rather than as windows lying on it. The user's call, and it is the right
one — the screenshots now sit directly on the faceplate with nothing behind
them.
.screen is kept as a class name rather than renamed across 23 call sites in
index.html and apps/, because it still marks the same thing (this is imagery,
frame it), and .screen.empty below still is a screen.
THE SHADOW IS `filter`, NOT `box-shadow`, and that is the whole trick. macOS
rounds a window's corners but a screenshot flattens whatever was behind them
into the file, so these captures arrived with black or grey corner nubs;
make-cutouts.py masks them to transparency (read its docstring before
recapturing anything). A box-shadow would then trace the image's bounding
BOX, printing a hard square shadow behind those now-transparent corners and
undoing the cutout. drop-shadow() traces the alpha channel, so the shadow
follows the real rounded silhouette. Two of them, tight-and-dark over
wide-and-soft, is the usual contact-plus-ambient pair; a single shadow either
floats or smudges.
No border-radius here on purpose: the curve lives in the PNG's alpha now. A
CSS radius on top would cut a second, differently-sized arc across the first. */
.screen { display: block; }
.screen img {
width: 100%;
display: block;
filter:
drop-shadow(0 1px 2px rgba(46, 46, 42, 0.30))
drop-shadow(0 14px 28px rgba(46, 46, 42, 0.22));
}
/* The hero composite is the one image that must NOT get the filter: make-hero.py
composites its own shadow under each window as it stacks them (SHADOW_BLUR,
SHADOW_OFFSET, SHADOW_ALPHA in that file), because the shadows there have to
fall BETWEEN the stacked windows, which no single CSS shadow on the finished
PNG can do. Adding this one on top gives every window in the stack two. */
.hero-shot .screen img { filter: none; }
/* mutationstation.png is the one capture in assets/shots without an alpha
channel (sips -g hasAlpha: no, vs. yes on every other app's window shot) --
it was captured as a flat rectangle instead of a transparent macOS window,
so it shows square corners where every other product page's hero shot has
the window's real rounded corners baked into the PNG itself (this file has
no border-radius of its own; the roundedness everywhere else is the image
content, not CSS). Recapturing it is a MutationStation-repo/build-lane job,
not a site-repo one, so this is a CSS patch, not the real fix: clip this one
image to an approximate macOS window radius. border-radius is a property of
the RENDERED box, not the source file's native pixel grid -- it does not
care that this PNG is 3456px wide. Both this image and chordinator.png are
capped by `.hero-shot .screen img { max-height: 620px }` and land at almost
the same *displayed* width (~1063px, since both captures are close to the
same aspect ratio), so the number that matters is chordinator's real alpha
corner (~15px, measured pixel-by-pixel down its left edge) scaled by that
1063/2000 display shrink -- ~8px. (First pass scaled 15px UP by this image's
*native* 3456px width instead of down by the *displayed* size, landing on
26px -- visibly too round next to the other three genuinely-alpha hero
shots. Do not repeat that mistake: always scale from displayed px, never
native.) Remove this rule (and the class in apps/mutationstation.html) once
mutationstation.png is recaptured with alpha like the others. */
.win-round { border-radius: 8px; }
/* ---- Zoomed feature crops -------------------------------------------------
The per-feature shots on the product pages are crops cut out of the
full-window captures already in assets/shots, not fresh captures. Two
reasons, and the second is the one that matters: the originals are
2000-3456px wide, so a single panel comes out at native resolution with room
to spare; and relaunching the apps to shoot a panel walks straight into the
verification traps in the workspace CLAUDE.md (an Electron single-instance
lock hands the relaunch back to the old process, and an occluded window
renders differently).
Their aspect ratios are deliberately not normalised — a 1920x157 keybed
strip sits next to a 322x645 knob column, because cropping a panel to a
common ratio would mean cutting off half of it. So HEIGHT is what is capped
here, not width, and each crop is centred in its recess. Capping width
instead is the obvious move and it is wrong: it blows the tall panels up to
the full measure, where a 322px-wide column becomes a soft 1000px smear. */
.zoom { margin: 22px 0 0; }
/* These crops are interiors — slices from the middle of a window — so unlike the
full-window shots they have square corners and no transparency, and they are
left that way (make-cutouts.py explains why rounding them would invent a curve
the app does not have). The drop-shadow inherited from .screen img is what
separates them from the plate now that the recess is gone. */
.zoom .screen img { width: auto; max-width: 100%; max-height: 620px; margin: 0 auto; display: block; }
/* Deliberately NOT .legend. The engraved-label style above is for two or three
words silkscreened onto hardware; a caption here is a sentence explaining what
the crop is showing, and a sentence set in 10px uppercase with 0.14em tracking
is unreadable — it was tried and it shouted. Sentence case, secondary colour,
sized just under body copy so it reads as an aside. */
.zoom figcaption {
display: block;
margin: 10px 2px 0;
max-width: 66ch;
font-size: 13.5px;
line-height: 1.6;
color: var(--text-secondary);
}
/* ---- Portrait crops: .zoom-pair and .media-split ---------------------------
Four of the crops on these pages are portrait — Chordinator's library rail,
MidiMirror's Remote Script / Modes panel, MutationStation's open algorithm
list and its Acid Character column. Inside a plain figure.zoom each was
centred at its natural width, which on a 1240px .wrap means a ~270px picture
with two ~450px stripes of empty faceplate either side. That was the worst
dead space left on the site, and the user called it out on three separate
pages in a row, which is what these two layouts answer.
Two of them, because there are two different situations:
.zoom-pair stands two figures side by side, each left-aligned in its own
track with its caption under its own image. Used where there genuinely is a
second thing worth showing next to the tall one — Chordinator's history strip
beside the library, MutationStation's shaping column beside Acid Character,
the Pitch Mutation panel beside the list of what its Algorithm menu holds.
.media-split runs the prose down the left and stands the figure in a track on
the right, for the tall crop that has no partner: the text explaining it is
then the thing filling the other half, which is better than inventing a
screenshot to fill it. The prose drops to one column inside the split — it is
already narrow there, and two 30em tracks squeezed into half a page read as a
newspaper clipping.
Deliberately NOT reusing the .two-col grid for either. two-col is 1fr 1fr and
these both need the picture track sized to the picture: a portrait crop given
half of 1176px either scales up past its pixel width and goes soft, or sits
centred in its own half and reproduces the same dead space one level down.
They collapse at 900px rather than the site's usual 720 breakpoint, because a
430px track is already too narrow for a screenshot with legible labels in it;
these want to stack well before the rest of the page does. */
.zoom-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 34px;
align-items: start;
margin: 22px 0 0;
}
.media-split {
display: grid;
grid-template-columns: 1fr auto;
gap: 34px;
align-items: start;
margin: 22px 0 0;
}
.zoom-pair > .zoom, .media-split > .zoom { margin: 0; }
.media-split > .zoom { max-width: 400px; }
.media-split .prose.story { columns: 1; }
/* `margin: 0 auto` on the image is precisely what centres it in the full-width
case, so it is the thing being undone here — the whole point of both layouts
is that the picture starts at its track's left edge. The height cap comes
down too: 620px was set for a figure with the full page to itself. */
.zoom-pair .screen img,
.media-split .screen img { margin: 0; max-height: 540px; }
/* 66ch does not fit in half a page, and a caption wrapping at some width other
than its own track's looks like a mistake rather than a measure. */
.zoom-pair figcaption, .media-split figcaption { max-width: none; }
@media (max-width: 900px) {
.zoom-pair, .media-split { grid-template-columns: 1fr; }
.media-split > .zoom { max-width: 100%; }
}
/* ---- No .render rule here, and that is on purpose --------------------------
There used to be one, for Blender renders of the apps as physical objects.
Three separate attempts at that idea were made and all three were rejected by
the user: a CSS/PIL chassis, extruded screenshots ("it just looks like ai
slop"), and finally a fully modelled metal nameplate for the wordmark, which
was geometrically correct and rejected on taste anyway.
The conclusion, which is a design decision and not a gap: this site is FLAT.
Depth is drawn the way the apps draw it, with the engraved/embossed text
treatments above and the .screen.empty recess, never with a photograph of an
object that does not exist. Do not reintroduce a render class or the assets
that went with it. */
/* Placeholder for a product that has no screenshot yet. Deliberately looks
like an unlit screen, not a broken image — which is why this one keeps the
dark inset the photographs gave up: there is no window to cut out here, and a
bare line of text on the plate would read as missing copy rather than as a
panel waiting to be filled. This is now the last user of --screen-bg and its
siblings; keep those variables when the arranger shot lands and this rule
goes, since they are the apps' own screen colours. */
.screen.empty {
display: grid; place-items: center;
min-height: 220px; text-align: center; padding: 30px;
background: var(--screen-bg);
border: 1px solid var(--screen-edge);
border-radius: var(--radius);
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.6),
inset 0 0 0 1px rgba(255,255,255,0.04),
0 1px 0 rgba(255,255,255,0.5);
color: var(--screen-text);
}
.screen.empty .legend { color: var(--screen-dim); text-shadow: none; }
/* ========================================================== PRODUCT PAGES */
.product-hero { padding-block: 48px 28px; }
/* The screenshot section right after the hero was stacking its own top
padding on top of the hero's bottom padding (28px + 40px desktop, 22px +
28px mobile) with nothing visible in between -- the buy button that lives
at the bottom of the hero is `visibility: hidden` until Gumroad's script
tags it `.gr-ready` (see the GUMROAD OVERLAY GUARD comment below), so that
gap read as one big blank strip of dead space before the first screenshot.
Zeroing the section's top padding here leaves the hero's own bottom
padding as the only space between them -- flagged by the user 2026-08-17
on the Chordinator app page, mobile Safari. */
.product-hero + .section { padding-top: 0; }
.product-hero .row { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.product-hero .icon { width: 88px; height: 88px; border-radius: 17px; flex: none; }
/* line-height and --engrave-line must stay equal: the cut gradient tiles once
per --engrave-line, so if they drift apart the sweep stops lining up with the
glyphs and the name goes flat. See the .engraved block. */
.product-hero h1 { margin: 0 0 4px; font-size: 34px; line-height: 1.15; --engrave-line: 1.15em; letter-spacing: -0.015em; color: var(--text-heading); }
/* Product-page h1s carried the base .engraved recipe (background-clip: text
gradient, --font-plate) -- the homepage nameplate's treatment. At the
nameplate's ~60px that gradient reads as a milled cut; at a bold 34px in
Century Gothic/Futura's round strokes it reads as a puffy 3D emblem
instead, nothing like the actual engraving in the corner of every app's own
window (small, mono, uppercase, a hard 1px light-lip/dark-lip pair -- see
.panel-head::before's comment, which already ported that exact recipe once
for the site's section-header band). User flagged the mismatch 2026-08-16
and asked for these titles to read as the SAME engraving as the app
window's, not a family resemblance -- so this overrides .engraved's
gradient-clip approach with .panel-head's hard-shadow lip technique,
scaled up, rather than retuning the gradient version. Do not merge this
back into the base .engraved rule; the homepage nameplate keeps its own
look on purpose (root CLAUDE.md: comments carry the why, and the why here
is these are two different surfaces that happened to share a class name). */
.product-hero h1.engraved {
/* Font stays var(--font-plate), inherited from the base .engraved rule below
-- NOT switched to monospace. First pass here swapped in the app corner
wordmark's literal font (ui-monospace) to chase its exact recipe, which
made this page's h1 the one title on the site set in a different
typeface than the homepage card name and the app's own top row (both
--font-plate). The user called that out as looking "different and bad"
2026-08-16 -- copy the app wordmark's SHADOW recipe, not its font. Do not
reintroduce a font-family override on this rule. */
text-transform: uppercase;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: currentColor;
/* Fill lightened 2026-08-16 to match .product h3 a's card-name recipe --
the user pointed at the homepage card title (light, near the plate) and
this page's h1 (darker, --ui-bg at 66% black) side by side and asked for
the SAME fill, not just the same lip-shadow technique. Same ~87%-toward-
white mix as the card name; the two now differ only in what surface
they're read against (--ui-bg here vs --control-bg on the card), not in
how dark the cut runs. */
color: color-mix(in srgb, var(--ui-bg) 87%, black);
text-shadow:
0 1px 0 hsla(0,0%,100%,0.88),
0 -1px 0 hsla(28,12%,14%,0.42);
}
.product-hero .tagline { margin: 0; color: var(--text-secondary); font-size: 16px; }
.product-hero .lede { font-size: 17px; max-width: var(--measure); margin: 0 0 24px; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.features li { padding-left: 18px; position: relative; max-width: var(--measure); }
/* the step-dot from the company mark, doing the work of a bullet */
.features li::before {
content: ""; position: absolute; left: 0; top: 0.62em;
width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.features strong { color: var(--text-heading); }
.back { display: inline-block; margin-bottom: 22px; font-size: 13px; text-decoration: none; }
.back:hover { text-decoration: underline; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
/* ---- The closing panel group ----------------------------------------------
Every app page ends with the same four-ish reference panels — Why standalone,
Requirements, Setting it up, and whichever integration note the app has. Until
2026-08-13 these were a .two-col with one panel on the left and the other
three stacked inside a wrapper on the right, which is exactly what it
looked like: a tall ladder of boxes running off the bottom of the page while
the left half sat empty below the first one.
Multi-column rather than grid, and that is the whole reason this is not
`grid-template-columns: repeat(3, 1fr)`. The panels have wildly different
heights (Requirements is four paragraphs, Why standalone is one), so a grid
gives you a short row, a tall row, and a final row holding one panel beside
two-thirds of nothing — the same dead space in a new arrangement.
2026-08-19: `columns: 3 320px` itself turned out to be the wrong tool for
"balance total height across the tracks." CSS column-balancing only ever
estimates one candidate column height and then fills columns in SOURCE
ORDER, breaking to the next column the moment a block would overflow that
estimate -- it never moves a block once placed. That works while the blocks
are all a similar size, but MutationStation grew a fifth panel
("Particular integration with Live", ~500px, break-inside:avoid so it can't
be split) and the estimate that lets it fit without overflowing anywhere
left the *next* column mostly empty -- the exact dead-space bug this
section was written to avoid, just relocated. Chordinator has the same
imbalance, smaller and less visible only because its tall panel is first.
Flex-wrap + a JS masonry pass (panel-grid.js) replaces the column-balance
guess with an actual greedy shortest-column placement, which cannot strand
a whole column behind one oversized block -- worst case it's off by one
panel's height, not a whole column. Flex-wrap alone (i.e. with JS disabled)
is the fallback: panels wrap into even rows instead of true masonry, uneven
row bottoms but never a stranded empty column. Track width and dropping to
two tracks, then one, as the viewport narrows falls out of flex-wrap's own
basis/grow math, so there is still no separate mobile rule for it. */
.panel-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; align-items: flex-start; }
.panel-grid > .panel { flex: 1 1 320px; min-width: 0; margin: 0; }
/* panel-grid.js reparents the flat .panel children above into these once it
has measured them -- one per masonry column, laid out as its own vertical
flex stack so the 24px rhythm matches the un-enhanced fallback exactly. */
.panel-grid-col { display: flex; flex-direction: column; gap: 24px; flex: 1 1 320px; min-width: 0; }
/* The long "What it does" / "What else is in it" list that opens the closing
section is deliberately NOT one of the .panel-grid children. It runs to eight
or nine items, which is taller than a third of the group on its own, so the
balancer had nowhere to put it but a column of its own — leaving the third
track empty and reproducing the dead space this was meant to remove. It gets
the full width above the grid instead, with the list flowed into its own
columns. Items do not break, because a bullet split across a column boundary
loses its dot. */
.features.cols { display: block; columns: 3 290px; column-gap: 34px; }
.features.cols li { break-inside: avoid; max-width: none; margin: 0 0 14px; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 14px; }
/* A full-width panel telling one story (Controlled randomness, The drop).
These used to be a single --measure column centred in the panel, on the
argument that the leftover width then read as margin. It did not; it read as
a stripe of text with a lot of faceplate either side, and it got worse when
.wrap went to 1240px. Left-aligned multi-column instead: the text starts at
the panel's own left edge like every other block on the page, the line length
still lands near --measure because the track width is what sets it, and the
full width of the panel is actually used. Deliberately no `break-inside` on
the paragraphs — the short stories (one or two paragraphs) need to split
mid-paragraph to fill both tracks, which is the case that was worst before. */
.prose.story { max-width: none; margin-left: 0; margin-right: 0; columns: 2 30em; column-gap: 46px; }
.prose h3 { font-size: 15px; margin: 22px 0 8px; color: var(--text-heading); }
.prose code {
font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
background: color-mix(in srgb, var(--face-hi) 80%, transparent);
border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 5px;
}
/* ================================================================ FOOTER */
.site-footer {
margin-top: 56px;
border-top: 1px solid var(--hairline);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
padding: 28px 0 44px;
color: var(--text-secondary); font-size: 13px;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.site-footer .spacer { margin-left: auto; }
/* =============================================================== MOBILE */
/* ---- Phones ---------------------------------------------------------------
This used to be four declarations, on the assumption that a one-column layout
degrades gracefully on its own. Mostly it does; these are the places where it
does not, each one checked at 390px:
- the header is a sticky 58px bar carrying a wordmark and five nav items,
which collide long before 390px. The nav wraps under the brand and the
bar stops being a fixed height rather than squeezing the type further;
- background-attachment: fixed forces iOS Safari to repaint the whole
gradient on every scroll frame, which is the single most expensive thing
on this page on a phone and buys nothing once the viewport is narrower
than the panel it is meant to unify. Scroll it with the page instead;
- the bundle icon rows and the buy buttons are laid out for a mouse. Both
get full-width targets rather than 13px type in a 9px-tall pill. */
@media (max-width: 720px) {
.product .panel-body { grid-template-columns: 64px 1fr; gap: 16px; }
.product .icon { width: 64px; height: 64px; border-radius: 13px; }
.two-col { grid-template-columns: 1fr; }
.hero { padding-block: 48px 36px; }
/* padding-left only -- a `padding: 0 20px` shorthand here was clobbering
the 46px padding-right the 900px breakpoint above reserves for the fixed
page-fader, since this block (max-width:720px) also matches every phone
width and comes later in the cascade. That let body copy run under the
fader on real phones even though the reservation looked correct on paper. */
.wrap { padding-left: 20px; }
.site-header .wrap { padding-right: 20px; }
.section { padding-block: 28px; }
.site-header .wrap {
height: auto; min-height: 50px;
flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px;
}
/* Was 3 rows on a phone: brand, then site-nav wrapping ITSELF into two
lines (select+Bundles / Licence+About+Support) because the select's
140px min-width left no room for the four links on one line below the
brand. Moving .hero-lcd out of .site-nav in the markup (it's a sibling
of .site-nav now, not a child) lets it sit on the brand's row instead --
.brand's own width plus the select's ~140-150px comfortably fits a
phone-width row -- leaving .site-nav's four short links, which do fit
on one line, as the second and last row. */
.hero-lcd { margin-left: 0; gap: 4px; }
/* The four links' own width (padding + LED + gap, all sized for desktop)
ran ~380px against ~353px of usable row width at 393px viewports, so
`flex-wrap: wrap` here was still firing -- nav split into its own two
lines, undoing the two-row goal above. Tightened padding/gap/font enough
to clear a 360px-wide phone on one line; flex-wrap stays as a safety net
for anything narrower rather than the primary layout mechanism. */
/* Measured directly (a same-origin iframe pinned to 375px, not the
browser-tool's resize_window -- that reports a stubborn 478px in this
environment regardless of the width requested, which is why an earlier
"fixed" pass didn't survive a real 390px phone). At font-size:12px /
padding:6px 8px / gap:8px, the four links summed to ~341px against
~331px of row width -- Support alone cleared onto its own third row.
Cut padding and gap further and dropped to 11px; re-measured in the
same harness at 371px effective width with all four links landing on
one row (top offset identical across all four). */
.site-nav { margin-left: auto; width: 100%; justify-content: flex-end; gap: 4px; font-size: 11px; flex-wrap: wrap; }
.site-nav a { padding: 5px 6px; gap: 4px; }
.wordmark { font-size: 14px; }
/* The 2026-08-17 desktop bump (24px wordmark / 34px logo) read oversized
once the header wraps to two rows on a phone-width viewport -- it and
the LCD select were eating close to a third of the screen height before
any page content showed. Scaled both back down for this breakpoint only;
desktop keeps the bigger mark. */
.brand svg, .brand img { height: 19px; }
.brand { gap: 6px; }
/* Brand + select still measured as fitting one row against a wider test
viewport than a real phone actually renders at -- against a genuine
~390px-wide device the two wrapped onto separate lines (3 rows total,
not the intended 2). The select already ellipsis-truncates long app
names (text-overflow: ellipsis, set unconditionally above), so shrinking
its min-width here costs nothing but a few characters of the closed
label -- it buys the margin that made brand+select unreliable.
A second, separate bug (the generic `.wrap` padding-right:46px reserved
for the page-fader was also landing on `.site-header .wrap`, which
doesn't need it -- see the 900px/720px breakpoints above) was actually
the main cause of that failure, and is fixed at the source now. These
sizes are shrunk a further notch on top of that fix, not instead of it,
as real margin against font-metric differences between browsers rather
than a break-even fit. */
.hero-lcd-select { font-size: 10px; min-width: 88px; max-width: 130px; padding-right: 14px; }
.btn { padding: 8px 12px; font-size: 13px; }
.btn-row .btn { flex: 1 1 100%; justify-content: center; }
.btn-row .price, .btn-row .status { flex: 1 1 100%; }
/* The product-page title row overflowed by 3px on a 371px viewport, and only
on MutationStation: "MutationStation" is one unbreakable 15-character word,
so at a fixed 34px it sets a min-content width the flex row cannot shrink
below, and an 88px icon plus a 22px gap ahead of it spent the rest of the
measure. Both ends give a little here. The h1 is a clamp rather than a flat
smaller size so the other four pages, whose names fit, keep their weight —
and it is not `overflow-wrap: break-word`, which would fix the number by
hyphenating the product's name in half. If a longer name ever ships, lower
the vw term, do not let it break. */
.product-hero { padding-block: 32px 22px; }
.product-hero .row { gap: 16px; }
.product-hero .icon { width: 64px; height: 64px; border-radius: 13px; }
/* Re-tuned after the .wrap padding-right fix above: reserving the fader's
46px (vs. the flat 20px this was originally measured against) leaves
only ~225px for the h1 itself once the 64px icon and 16px gap are taken
out of a 305px row -- the old 7.2vw put "MutationStation" at ~274px
scrollWidth, well past that, and the fader fix re-exposed the overlap
rather than causing a new one. Lowered until it clears in the same
375px-iframe harness. */
.product-hero h1 { font-size: clamp(20px, 6vw, 34px); }
}
/* The faceplate is a physical object with one lighting direction; there is no
dark-mode version of a milled aluminium panel. The design commits to the
light look deliberately, so colours are painted explicitly above and no
prefers-color-scheme block overrides them. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ==================================================================
WARMTH PASS — 2026-08-16
==================================================================
The faceplate above is deliberately monochrome: one milled panel, one
lighting direction, the per-product accent rationed down to a 7px pilot lamp
and the buy button. Correct as an *object*, but as a *page* it read as one
endless grey sheet — the user's word was "sterile". This block adds colour
and rhythm back WITHOUT touching any of the tuned recipes above.
It is intentionally one appended, self-contained block for two reasons:
1. Revert is `delete from this banner to EOF` — nothing above changes, so
the milled look is recoverable byte-for-byte (git tag
`pre-restyle-2026-08-16` is the belt to this braces).
2. Everything here is ADDITIVE — new pseudo-elements, new :hover states,
new properties the base rules never set (transition, a left spine, a
band, a glow). It never re-declares a *value* the tuned rules or the
responsive @media blocks above already own (padding, the engraving
shadows, the palette tokens), so cascade order can't clobber them.
The governing rule of the pass: BANDS ARE TONAL, ACCENTS ARE PER-CARD.
Section rhythm is done with faint lightness shifts only (no colour cast over
the whole page); the per-product colour is what carries the palette, and it
only ever appears on that product's own furniture.
------------------------------------------------------------------ */
/* --- 1. Let each product's accent breathe --------------------------------
(a) An accent spine down the left edge of every panel. Done as ::after, not
a fat `border-left`, so the 1px control-border stays symmetric and the
spine can carry its own rounded corners matching --radius. Now the four
cards read as four colours at a glance instead of four identical greys,
and the single content panels (licence green, why-standalone blue, about
amber) pick up their accent too — the page has a palette.
(b) The icon tile gets a faint ring + drop-glow in the same accent, so the
artwork sits in its colour instead of floating on grey-on-grey. Pure
box-shadow — the PNG itself is untouched. */
.panel { position: relative; transition: transform 140ms ease, box-shadow 140ms ease; }
.panel::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent);
border-radius: var(--radius) 0 0 var(--radius);
/* a hair of its own glow so the spine reads as lit, like the pilot lamp */
box-shadow: 0 0 6px -1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.product .icon, .suite-icons img {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* --- 2. Alternate section backgrounds (tonal bands) — REMOVED 2026-08-19 ---
There used to be a faint full-bleed darken behind #bundles and
#why-standalone, so products / bundles / licence / why / about read as
deliberate bands rather than one sheet:
#bundles, #why-standalone {
box-shadow: 0 0 0 100vmax rgba(31, 26, 21, 0.030);
clip-path: inset(0 -100vmax);
}
THIS IS THE "RECTANGULAR ARTIFACTS IN THE BACKGROUND" BUG, and it was
misdiagnosed twice before being found. Read this before adding any
full-bleed section wash back.
The user reported, repeatedly, four faint rectangles in the lower half of
the page — two on the left edge, two on the right. Both earlier attempts
assumed a GPU compositing-tile seam and rewrote `body::before` accordingly
(first `background-attachment: fixed` -> a fixed pseudo-element, then a live
1px repeating-linear-gradient -> a rasterised 1x2 SVG tile; both of those
comments are still up at the body rule, and both changes were harmless but
beside the point). Neither touched the actual cause, so the artifacts
survived both.
The cause is this rule, and the mechanism is not a rendering bug at all —
the wash renders exactly as designed. It is full-bleed and continuous across
the whole viewport width. The problem is what is drawn ON TOP of it: each of
these two sections holds a .panel that covers the middle of the band with an
opaque cream plate. So the only places the 3%-black wash is ever visible are
the empty left and right margins beside that panel — two disconnected
slivers per section, with hard vertical edges where the panel starts and
hard horizontal edges where the section box ends. Two sections carrying the
rule x two visible margins each = the four rectangles, in the lower half of
the page, exactly as reported.
Note the trap: this is invisible at narrow viewports, because the panel
spans the full width and leaves no margin for the wash to show in. It only
appears once the viewport is wide enough for the section to hit its
max-width and gutters to open up — which is why it reads as intermittent and
is easy to "confirm fixed" on the wrong window size. Reproduce it at ~1900px
of layout width, not at 1000px.
If a tonal band is wanted again, it has to be a treatment that reads as a
band across the FULL width, not one that is only visible where nothing
covers it: put the wash on a wrapper that sits behind the panel as well
(so the eye sees one continuous stripe), or drop the panel's opaque plate
over that section. Do not restore the rule above as-is. */
/* Step-grid texture (repeating-linear-gradient ticks behind the alternating
bands) was tried 2026-08-16 and dropped the same day at the user's request
("weird lines going through the white" -- doesn't look good). Do not
reintroduce it; the tonal wash above is the whole treatment for these
bands now. */
/* --- 5. Micro-life: hover lift + accent glow, header underline -----------
Small motions that stop the page reading as a static spec sheet.
- Buyable cards (products, bundle suites) lift a touch and gain an
accent-tinted shadow on hover. The single content panels do NOT lift —
you don't hover a licence block on your way to anything.
- The buy button already brightens on hover (rule above); we ADD an accent
halo, additively, so the moulded cap glows in its own colour.
- A short accent tick under each section legend — the root accent (brand
red) since a section header carries no per-card colour — so the eyebrow
labels feel struck rather than typed. */
.product:hover, .suite:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6),
0 10px 24px -10px color-mix(in srgb, var(--accent) 45%, transparent),
0 4px 10px rgba(0,0,0,0.12);
}
.btn { transition: filter 120ms ease, box-shadow 140ms ease; }
.btn:hover {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.section > .legend { position: relative; padding-bottom: 8px; }
.section > .legend::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 34px; height: 2px;
background: var(--accent);
box-shadow: 0 0 5px -1px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Honour reduced-motion for everything this pass added. */
@media (prefers-reduced-motion: reduce) {
.panel, .btn { transition: none; }
.product:hover, .suite:hover { transform: none; }
}
/* ==================================================================
PHOSCYON PASS — 2026-08-19
==================================================================
Six changes signed off from the mockup at
claude.ai/code/artifact/6433d25c-6d78-471b-a35c-ee83527cfe2b, after a
round asking what would make the page read less sterile. Same appended-
block discipline as the WARMTH PASS above and for the same reasons:
revert is "delete from this banner to EOF", and everything here either
adds a rule or re-declares one whole property on an existing selector at
equal specificity, so nothing above needs editing to be overridden.
The exception, deliberately, is the :root cream pass — that one had to be
edited in place, because tokens are read by ~40 rules and shadowing them
from down here would leave two competing palettes in one file.
⚠ ONE HISTORY NOTE, so this does not read as an unlearned lesson: the
graphite panel head below was already tried on 2026-08-16 and rejected
the same day ("still not very nice" across eight panels). It is back at
the user's explicit request after seeing it in the mockup, and the thing
that changed in between is context, not taste — the band now carries two
screws through it and a lit pilot lamp, the plate under it is warmer, and
the page has an accent spine and a dark video screen elsewhere, so a dark
strip reads as one member of a family rather than the only dark thing on
a pale page. If it is rejected a third time, the silver recipe is intact
above; deleting this one rule restores it.
------------------------------------------------------------------ */
/* --- 1. The panel head goes graphite ------------------------------------
Straight to --darkplate-*, i.e. Chordinator's actual .seq-col plate, not
one of the intermediate greys — the user picked the reference sample off
the mockup over pewter/graphite/gunmetal. Layer structure is untouched
(scanline + diagonal sheen + overhead bloom over a 3-stop vertical
gradient); only the base gradient and the lighting weights change, since
sheen tuned for a light plate blows out on a dark one. */
/* 2026-08-19 -- "more of the SHINE of Chordinator's sequencer panel".
The colour was already right (the user said so); what was missing was
specular behaviour, and the fix is not "raise every white to taste". Four
distinct things separate a shiny anodised strip from a dark gradient, and
the old recipe only had weak versions of two of them:
1. A HARD top edge. Real anodised metal catches a bright, nearly 1px line
where the top face turns over -- not a soft ramp. The inset highlight
goes 0.10 -> 0.22 and a second, dimmer 2px line sits under it so the
turn-over has depth instead of being a single stroke.
2. A TIGHT overhead bloom. The old radial was 120% x 60% at 0.13, so broad
and so faint it just lifted the whole band a little. Narrowed to
90% x 46% and taken to 0.20: a smaller, brighter pool reads as a light
SOURCE reflected in the surface; a wide faint one reads as grey paint.
3. A DOUBLE diagonal sweep. The single 112deg band is the giveaway --
brushed metal under a room light shows a bright leading edge and a
weaker trailing one. The first sweep goes 0.10 -> 0.19 with a hard
shoulder (34% to 38% instead of 34% to 43%), and the second 0.07 ->
0.13, which is what actually reads as "the same sheen as the app".
4. A FLOOR bounce. New, and the cheapest of the four: a wide, very faint
(0.05) radial at the bottom edge standing in for light bouncing off the
cream plate below into the underside of the strip. Without it the band
goes dead flat toward the bottom and the whole thing reads as a
rectangle rather than a surface.
The scanline stays where it was. Raising it alongside the highlights was
tried and it is what tips the band from "shiny" into "textured plastic" --
the scanline is machining marks, and machining marks do not get brighter
when the light does. The base 3-stop gradient and every colour token are
untouched, so the colour the user approved is exactly as it was; only the
lighting on top of it changed. */
.panel > .panel-head {
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px),
linear-gradient(112deg, rgba(255,255,255,0) 24%, rgba(255,255,255,0.19) 34%, rgba(255,255,255,0.05) 38%, rgba(255,255,255,0) 52%, rgba(255,255,255,0.13) 68%, rgba(255,255,255,0) 78%),
radial-gradient(90% 46% at 50% -6%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 62%),
radial-gradient(140% 40% at 50% 108%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, var(--darkplate-hi) 0%, var(--darkplate) 30%, var(--darkplate-lo) 100%);
border-bottom: 1px solid var(--darkplate-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 2px 0 rgba(255,255,255,0.07),
inset 0 -1px 0 rgba(0,0,0,0.45);
/* The engraving INVERTS on a dark plate. Cut into pale metal, the far
(upper) wall of the groove is in shadow and the near (lower) one catches
light — which is the recipe above. Cut into near-black, the letters are
the only thing the overhead light can reach, so the fill goes lighter
than the plate and the lips swap: dark above, faint light below. Getting
this backwards is what makes engraved text on a dark panel look like
ordinary grey type with a drop shadow. */
color: hsl(48, 7%, 74%);
text-shadow:
0 -1px 0 rgba(0,0,0,0.80),
0 1px 0 hsla(44,20%,100%,0.10);
}
/* --- 2. Screws, dark variant for the top pair ---------------------------
Same two-circle dimple as the cream pair (see .panel::before above), lit
for near-black metal: the highlight drops from 0.60 to 0.30 and the body
from 58% to 34% lightness, because a dimple keeps its cream lighting on a
graphite band and stops being a hole — it becomes a bright dot stuck on
the plate. The bottom pair is untouched; it is still on cream. */
.panel::before {
background:
radial-gradient(circle 2.6px at left 8px top 8px,
rgba(255,255,255,0.30) 0%, hsl(48,3%,34%) 46%, hsl(48,4%,13%) 97%, transparent 100%),
radial-gradient(circle 3.1px at left 8px top 8.9px, rgba(255,255,255,0.20) 99%, transparent 100%),
radial-gradient(circle 2.6px at right 8px top 8px,
rgba(255,255,255,0.30) 0%, hsl(48,3%,34%) 46%, hsl(48,4%,13%) 97%, transparent 100%),
radial-gradient(circle 3.1px at right 8px top 8.9px, rgba(255,255,255,0.20) 99%, transparent 100%);
}
/* --- 3. Things that are actually lit ------------------------------------
The pilot lamp already existed but glowed 6px onto a silver band that was
nearly as bright as the lamp, so there was nothing for the bloom to land
on. On graphite it can finally read: a two-stage halo (tight bright core,
wide soft falloff) plus a hairline of the accent bled onto the plate
around it, which is what a real LED does to the metal it is set into. */
.panel > .panel-head::before {
box-shadow:
0 0 0 1px rgba(0,0,0,0.45) inset,
0 0 5px 0 color-mix(in srgb, var(--accent) 85%, transparent),
0 0 13px 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
/* The section eyebrow tick gets the same treatment — a struck mark with a
little light on it rather than a flat 2px rule. */
.section > .legend::after {
box-shadow:
0 0 5px -1px color-mix(in srgb, var(--accent) 70%, transparent),
0 0 12px 0 color-mix(in srgb, var(--accent) 30%, transparent);
}
/* --- 4. Warm shadow ink -------------------------------------------------
The single cheapest change in this pass. Photographed metal casts a
shadow that picks up the warmth of the surface it lands on; a neutral
rgba(0,0,0,…) shadow under a cream plate is the clearest tell that the
panel was drawn in CSS rather than lit. hsl-equivalent rgb(22,22,20) is
this page's black (it was rgb(28,22,14) until the de-orange pass -- see
the :root comment; a red-skewed shadow under every edge is a colour cast
arriving by a second route). Geometry is identical to the rules above — only the
ink changes — so nothing reflows. */
.panel {
box-shadow:
0 1px 0 rgba(255,255,255,0.62),
0 2px 5px rgba(22,22,20,0.16),
0 10px 28px -18px rgba(22,22,20,0.45);
}
.product:hover, .suite:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.62),
0 10px 24px -10px color-mix(in srgb, var(--accent) 45%, transparent),
0 4px 10px rgba(22,22,20,0.16);
}
/* --- 5. Control hierarchy -----------------------------------------------
In the apps you never hunt for the important button: "Send to Live" is
saturated and raised, undo/redo sit recessed and grey. On the site the buy
button and the Details button weighed about the same, so this pushes them
apart from both ends rather than just enlarging one.
⚠ The buy button cannot be enlarged here. It carries `.gumroad-button`,
whose overlay guard above pins padding/font-size with !important for
reasons documented at length at that rule — changing size would mean
changing both copies and re-checking them against a stylesheet Gumroad can
reissue at any time. So the primary gains WEIGHT (a stronger halo and a
deeper contact shadow) and the secondary LOSES it, which reads the same
and touches nothing the guard owns. */
.btn:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
0 3px 6px rgba(22,22,20,0.22),
0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Cut into the plate instead of sitting proud of it. The bevel inverts:
the old cap had a bright top lip and a dark bottom one; a recess has the
shadow at the top (light blocked by the near rim) and the catch at the
bottom. Ink drops to --text-secondary so it reads as the quieter of the
two before you have parsed either label. */
.btn-ghost {
background: linear-gradient(180deg, hsl(48,8%,84%) 0%, hsl(48,11%,90%) 60%, hsl(48,13%,93%) 100%);
color: var(--text-secondary);
border-color: hsl(48,6%,52%);
border-bottom-color: hsl(48,7%,62%);
box-shadow:
inset 0 2px 3px rgba(22,22,20,0.22),
inset 0 -1px 0 rgba(255,255,255,0.70),
0 1px 0 rgba(255,255,255,0.55);
}
.btn-ghost:hover {
color: var(--text-primary);
box-shadow:
inset 0 2px 3px rgba(22,22,20,0.18),
inset 0 -1px 0 rgba(255,255,255,0.80),
0 1px 0 rgba(255,255,255,0.60);
}
.btn-ghost:active {
box-shadow: inset 0 3px 6px rgba(22,22,20,0.34);
transform: translateY(1px);
}
/* --- 6. The demo reel ---------------------------------------------------
THREE DEPTH LEVELS, which is the whole point of the section: the page is
the chassis, .panel is a plate bolted to it, and .video-stage is a screen
let INTO that plate. The site had the first two and stopped; every dark
area on it was a band, never a recess. A screen is what an instrument
panel does with the one region that is not metal, and it is the strongest
available cue that the plate around it is solid.
Shipped with no footage on purpose. The demos are being recorded; the
furniture goes in now so dropping a file in later is a src attribute and
nothing else. The transport is therefore rendered inert (aria-disabled +
.is-idle) rather than omitted — a section that looks operable and does
nothing is worse than one that says what it is waiting for. See the HTML
comment on the section for exactly what to change when the files land. */
.video-panel .panel-body { padding: 16px 16px 18px; }
.video-stage {
position: relative;
/* Capped and centred rather than filling the panel. At the 936px content
width a full-bleed 16:9 screen is ~526px tall — taller than any other
element on the page and, while there is no footage in it, a very large
empty black rectangle. 720px keeps it clearly the biggest thing in its
own section without owning the whole scroll. */
max-width: 720px; margin: 0 auto;
aspect-ratio: 16 / 9;
display: grid; place-items: center;
overflow: hidden;
border-radius: 4px;
background: linear-gradient(180deg, var(--screen-edge), var(--screen-bg) 42%);
/* The recess, in one shadow: a deep inner drop from the near rim, a
hairline of true black at the cut edge, and a single bright line on the
plate just below the opening — the lip catching the overhead light. */
box-shadow:
inset 0 3px 8px rgba(0,0,0,0.78),
inset 0 0 0 1px rgba(0,0,0,0.62),
0 1px 0 rgba(255,255,255,0.55);
}
/* Scanline + vignette so an empty screen reads as powered rather than as a
hole in the page. Same scanline vocabulary as every other surface here. */
.video-stage::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.020) 0px, rgba(255,255,255,0.020) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
}
.video-stage-inner {
position: relative; z-index: 2;
display: grid; gap: 14px; justify-items: center; text-align: center;
padding: 12px;
}
/* The big centred play control: a milled ring, dark like the screen it sits
in, going accent-coloured only under the cursor. */
.video-play {
width: 74px; height: 74px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 24px; line-height: 1; padding-left: 5px;
color: hsl(38, 30%, 84%);
border: 1px solid hsl(48, 4%, 34%);
background: radial-gradient(120% 120% at 50% 0%, hsl(48,4%,30%) 0%, hsl(48,4%,17%) 60%, hsl(48,4%,12%) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 -2px 5px rgba(0,0,0,0.55),
0 5px 16px rgba(0,0,0,0.5);
cursor: pointer;
transition: transform 130ms ease, box-shadow 140ms ease, color 130ms ease, border-color 130ms ease;
}
.video-play:hover {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 60%, black);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
inset 0 -2px 5px rgba(0,0,0,0.55),
0 6px 20px rgba(0,0,0,0.55),
0 0 24px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.video-play:active { transform: translateY(1px) scale(0.985); }
.video-caption {
font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: hsl(48, 5%, 52%);
}
/* Transport strip. ◀◀ / ▶▶ rather than undo/redo: undo and redo are editor
verbs and mean nothing on a page, where the only thing there is to step
through is the reel itself. Same moulded cap as .btn-ghost's family. */
.video-bar { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; max-width: 720px; flex-wrap: wrap; }
.video-transport { display: inline-flex; align-items: center; gap: 6px; }
.video-transport button {
width: 40px; height: 32px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
font: inherit; font-size: 12px;
border-radius: var(--radius);
border: 1px solid hsl(48,5%,40%);
border-bottom-color: hsl(48,6%,28%);
color: var(--text-primary);
background: linear-gradient(180deg, hsl(45,30%,98%) 0%, hsl(48,11%,90%) 45%, hsl(48,8%,75%) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(22,22,20,0.16), 0 1px 2px rgba(22,22,20,0.14);
cursor: pointer;
}
.video-transport button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(22,22,20,0.34); }
/* The play cap carries the LED, exactly as Chordinator's #seq-play::after
does — unlit at rest, accent with a halo while running. */
.video-transport .video-play-cap { position: relative; width: 46px; }
.video-transport .video-play-cap::after {
content: ""; position: absolute; top: 4px; right: 4px;
width: 4px; height: 4px; border-radius: 50%;
background: hsl(48, 4%, 58%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
/* The LCD readout, same bezel family as the header's app picker. */
.video-read {
flex: 1 1 220px; min-width: 0;
display: flex; align-items: center; gap: 10px;
padding: 7px 12px; border-radius: 4px;
font-size: 11px;
background: linear-gradient(180deg, var(--screen-edge), var(--screen-bg) 40%);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.55);
font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}
.video-read .video-read-label { color: hsl(48,5%,48%); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; flex: none; }
.video-read .video-read-value {
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: hsl(38, 45%, 68%);
text-shadow: 0 0 7px hsl(30 70% 45% / 0.5);
letter-spacing: 0.06em;
}
/* Idle state — no footage yet. Everything stays visible at reduced contrast
so the section reads as "not loaded" rather than "broken", and the
controls are genuinely inert, not just styled that way (see the HTML). */
.video-panel.is-idle .video-transport button,
.video-panel.is-idle .video-play { cursor: default; opacity: 0.55; }
.video-panel.is-idle .video-transport button:active,
.video-panel.is-idle .video-play:active { transform: none; }
.video-panel.is-idle .video-play:hover {
color: hsl(38, 30%, 84%);
border-color: hsl(48, 4%, 34%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 -2px 5px rgba(0,0,0,0.55),
0 5px 16px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: reduce) {
.video-play { transition: none; }
.video-play:active, .video-transport button:active, .btn-ghost:active { transform: none; }
}
/* ---------------------------------------------------------------------------
§7 SCREENSHOT MICRO-INTERACTIONS — 2026-08-19, ADDED AND REVERTED THE SAME
DAY. NO RULES BELOW; THIS BANNER IS THE WHOLE SECTION.
What was here: `.screen:not(.empty) img` lifted 3px on hover with its
`drop-shadow()` deepening and spreading to match, and settled flat with a
tight shadow on `:active`. It was deliberately the smallest possible
interaction — no scale, no tilt, no overlay — on the reasoning that a
screenshot is a picture of a real window and anything that transforms it
reads as a web flourish stuck onto a photograph.
Why it went: the user's verdict on the live page was that the motion is
"messy and buggy", and asked for every image on the site to be static under
the cursor. Two things the original reasoning got wrong, worth keeping so
this is not re-derived:
- Restraint did not help. The problem was never the SIZE of the movement,
it was that these images sit inside panels that already have their own
hover treatment, so a cursor crossing a card set two different things
moving at two different speeds. That reads as a glitch no matter how
small the second one is.
- `drop-shadow()` on a large PNG with alpha is re-rasterised per frame.
On the long product pages, where several shots are near the viewport at
once, the transition can visibly stutter — which is exactly what "buggy"
describes, and it is a cost the lift never earned back.
So: screenshots are static. If a future pass wants feedback on them, put it
on the CONTAINER (a cursor change, or the panel it already lives in), not on
the image, and do not reach for animated `drop-shadow()` on these PNGs.
The base `.screen img` drop-shadow (the resting shadow, in the .screen rules
further up this file) is untouched — that is the images' normal appearance,
not an interaction.
--------------------------------------------------------------------------- */