; this keeps their original appearance. */
.tb-cell h3 {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--steel);
margin-bottom: 18px;
font-weight: 400;
}
/* ------------------------------------------------------------------
4. Headline amplifier typography.
The reference splits the h1 into per-character spans styled
`display: inline-block`. Inline-blocks suppress kerning, render word
spaces ambiguously, and are legal line-break points — so the headline
rendered "Althatma / kes things." at rest, with a break inside "makes".
`display: inline` restores native shaping: kerning applies, spaces are
real spaces, and breaks can only happen at them. `font-variation-settings`
(the amplifier's actual effect) works on inline boxes; only the 7% scale
pop is lost, since transforms don't apply to inline — an accepted trade.
Pairs with [patch:headline-split-on-intent] in design-motion.js.
------------------------------------------------------------------ */
.kch {
display: inline;
}
/* ------------------------------------------------------------------
6. Mobile hero — the formula tray buried the chips.
The reference absolute-positions the tray full-width at bottom: 76px on
small screens, directly over the chips row ("<5 MIN PER BATCH" was
completely hidden behind it). The hero already grows with its content, so
reserving real vertical space for the tray and dropping it into that
reserve keeps every element visible. The scroll cue would now sit inside
the tray's band (it only rendered between 560–760px anyway), and the tray
itself invites the same gesture — so it is retired on those widths.
------------------------------------------------------------------ */
@media (max-width: 760px) {
#hero {
padding-bottom: 250px;
}
#lensTray {
bottom: 18px;
}
.scroll-cue {
display: none;
}
}
/* ------------------------------------------------------------------
7. Ghost type contrast.
The press names and the footer CTA rest at rgba alpha .08/.05 — measured
1.17:1 and 1.09:1, effectively invisible without their outline stroke,
which contrast tooling cannot evaluate. Both are large text, so AA asks
3:1. Resting fills rise to computed-passing values (3.09:1+); the
pointer-proximity swell to full strength is unchanged, and the JS that
drives it per-frame is patched to the same floor ([patch:ghost-contrast]).
The outline stroke stays for crispness.
------------------------------------------------------------------ */
html.js .press.ghost .pname {
color: rgb(23 24 28 / 52%);
}
html.js .fc-link.ghost .fcg {
color: rgb(237 234 226 / 42%);
}
/* ------------------------------------------------------------------
8. Manufacturing-cell fallback poster.
The reference styles a `.no-webgl` state but never sets the class and
ships no fallback element — a failed WebGL context meant an empty stage
and a stranded "INITIALIZING CELL" label. main.ts now detects context
failure, and this poster (17 KB, captured from the real scene at its
settled loop pose) stands in behind the loop text. It appears ONLY under
.no-webgl: with WebGL running, the hero deliberately shows no robot until
the loop begins, and a permanent background would contradict that.
------------------------------------------------------------------ */
/* `cell-poster` is a deliberate substitution rather than a capability
failure: reduced-motion, Save-Data and low-memory visitors are shown the
same still of the machine instead of paying a ~1s main-thread stall to
render it at rest. It shares this fallback with the genuine no-WebGL case;
only the reason differs. See main.ts. */
:scope.cell-poster #heroRobot,
:scope.no-webgl #heroRobot {
background: url('/poster/robot-poster.webp') 62% 50% / cover no-repeat;
}
:scope.cell-poster .hr-load,
:scope.no-webgl .hr-load {
display: none;
}
/* ------------------------------------------------------------------
9. Press wall logos (staging only — see PROVENANCE.md).
When a logo replaces its wordmark, the row's typographic sizing no longer
applies: heights are set per logo in press-logos.ts, because the four have
different cap-height-to-box ratios and equal box heights read as unequal
type. The proximity fill that animates the wordmarks has nothing to grab on
an SVG, so the logo gets the equivalent treatment via opacity instead.
------------------------------------------------------------------ */
/* Visually hidden but exposed to assistive technology. The reference had no
such utility; the press swap needs one to keep the wordmark as the
accessible name once the logo replaces it visually. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* No opacity of its own: the design's proximity tick writes an rgba `color`
on .pname every frame, and the logo inherits it through `currentColor` —
so the fill-on-approach interaction carries over to the artwork intact. */
.pname-logo {
display: inline-flex;
align-items: center;
}
/* Resting state before the proximity tick has run (out of view, no pointer
yet, or reduced motion). Logo artwork has thinner strokes than the wordmark
type it replaces, so it needs a higher floor than the text does to read as
equally present — matched to the JS floor in [patch:ghost-contrast]. */
html.js .press.ghost .pname-logo {
color: rgb(23 24 28 / 74%);
}
.pname-logo svg {
height: var(--logo-h, 30px);
width: auto;
display: block;
}
@media (max-width: 760px) {
.pname-logo svg {
height: calc(var(--logo-h, 30px) * 0.8);
}
}
/* ============================================================================
§13 Footer CTA overflows the document below ~350px
============================================================================
`.fc-link` is `display: inline-flex` and `.fcg` is a flex item, so it
inherits `min-width: auto` and refuses to shrink below its content width —
`white-space` already computes to `normal`, but the text still cannot wrap.
Meanwhile `font-size: clamp(2.4rem, 7vw, 5.4rem)` stops responding below
~343px, where the 7vw term falls under the 2.4rem floor, so the type holds at
38.4px while the viewport keeps narrowing.
Measured at 320px: the CTA is 325px wide at x=20, taking the document to
345px against a 320px viewport — a 25px horizontal scroll. It overflows at
320px and 340px, and is clear from 360px up.
This is the same defect class as §1: a `nowrap`-style constraint widening the
whole document. It only surfaced now because the old partner CTA label is two
characters longer than the "Partner with BAO" it replaced, which means the
reference was one short word away from the same bug.
Releasing the flex minimum lets the label wrap to two lines when it must, and
changes nothing at any width where it already fits.
The container itself deliberately does NOT get `flex-wrap: wrap`: that let
the arrow break onto a third line on its own, stranded under the text. Only
`.fcg` wraps, so the arrow stays beside the label and `align-items: center`
keeps it centred against the two lines. */
.fc-link {
max-width: 100%;
}
.fcg {
min-width: 0;
}
/* ============================================================================
§14 Reveal elements should not hold compositor layers for the page's life
============================================================================
design.css sets `will-change: transform, opacity` on every `[data-reveal]`
element — 31 of them on the homepage. `will-change` is a promise the browser
keeps: each one is promoted to its own compositor layer immediately and holds
that memory until the declaration goes away, which here is never.
The property exists to be applied just before an animation and removed after,
and GSAP already does exactly that for the tweens it runs. A permanent
blanket declaration is the documented misuse, and on a page that also runs a
WebGL scene the memory is not free.
Not a design change: nothing about how the reveals look or move is affected. */
[data-reveal] {
will-change: auto;
}
/* Same misuse on the split headline: design.css declares `will-change:
font-variation-settings, transform` on every character span — one pinned
compositor layer per letter, ~40 on this headline, held for the page's
life. The variation-settings writes are style/layout work that a compositor
layer cannot help with anyway. */
.kch {
will-change: auto;
}
/* ============================================================================
§15 Loop phases must stay readable to assistive technology
============================================================================
The reference animates the four phase articles with GSAP's `autoAlpha`,
which is opacity plus `visibility`. `visibility: hidden` removes an element
from the accessibility tree, so a screen reader found at most one of the
four — and the four carry the product's central claims. They are animated
with plain `opacity` now (see [patch:phases-stay-in-the-tree]).
The phases are stacked in one grid cell, so a faded-out one would otherwise
intercept clicks and text selection meant for the visible one. `visibility`
used to do that job as a side effect; this does it deliberately, without
taking the content out of the tree. */
.loop-phase[data-phase-hidden] {
pointer-events: none;
}
/* ============================================================================
§16 Focus and control boundaries below the contrast minimum
============================================================================
Measured against the actual token values:
- The single `:focus-visible` outline is --amber (#E8A03C). On --ink that is
8.81:1, but on the porcelain sections (#F1EFEA) it is 1.92:1 against a 3:1
minimum for non-text — so on the platform pillars and the nav over light
sections, the focus ring was effectively invisible. WCAG 2.2 SC 1.4.11.
- Form inputs and radio chips draw their only boundary with --line-l
composited on ink: #323334, which is 1.53:1. The native radio is hidden,
so the chip border is the only thing marking an option as an option.
- Amber hover on light grounds is 1.92:1 as text (needs 4.5:1).
--amber-deep (#8A5D14) measures 5.00:1 on porcelain and is already in the
palette, so the light-ground states use it rather than introducing a colour.
The dark-ground states are untouched: they already pass comfortably. */
:focus-visible {
outline-color: var(--amber);
}
.light :focus-visible,
#nav.on-light :focus-visible {
outline-color: #8a5d14;
/* A second ring in the opposite tone keeps the indicator visible over the
mixed grounds inside a section (cards, images, the press wall). */
box-shadow: 0 0 0 4px rgb(255 255 255 / 72%);
}
.field input,
.field textarea {
border-bottom-color: rgb(237 234 226 / 42%);
}
/* The native radio is `position: absolute; opacity: 0`, so `.c` is the only
thing that marks an option as an option. */
.chiprow .c {
border-color: rgb(237 234 226 / 42%);
}
.light .nav-links a:not(.btn):hover,
#nav.on-light .nav-links a:not(.btn):hover {
color: #8a5d14;
}
.press-index li i.lit {
color: #8a5d14;
}
/* ------------------------------------------------------------------
The loop's closing line sat underneath the WebGL stage.
`#heroRobot` is `position: fixed; z-index: 0`. A positioned element paints
above in-flow content regardless of document order, so every unpositioned
block in the loop section rendered beneath the cell. The pinned columns were
already handled — `:where(:scope).js-pin .loop-left` and `.loop-right` both take
`z-index: 3` — but `.loop-outro`, which sits outside `.loop-grid`, was
missed: the cobot's arm crossed the sentence mid-word.
Same treatment as the left column: lift it over the stage, and carry a soft
ground so the line stays readable whatever the cell is doing behind it.
------------------------------------------------------------------ */
.loop-outro {
position: relative;
z-index: 3;
}
/* The ground bleeds vertically but never horizontally: an earlier version put
this on the
with a -64px horizontal inset, which at 320-412px pushed the
document wider than the viewport — the whole page then scrolled sideways and
the nav burger went off-screen with it. Nothing here may exceed the wrap's
content box. */
.loop-outro::before {
content: '';
position: absolute;
z-index: -1;
inset: -44px 0 auto;
height: 260px;
background: radial-gradient(
ellipse 42% 58% at 50% 42%,
rgb(12 13 16 / 92%) 0%,
rgb(12 13 16 / 80%) 45%,
rgb(12 13 16 / 0%) 78%
);
pointer-events: none;
}
/* The lens reading's fallback ground. design-motion.js adds `.shielded` only
when no placement around the lens clears both the tray and the copy column —
which happens when the lens is deep inside the headline, exactly where the
tray invites you to move it. White analysis text over white display type is
unreadable; this gives it something to sit on without moving it. */
#lensFinding.shielded {
padding: 9px 12px;
margin: -9px -12px;
border-radius: 10px;
background: rgb(12 13 16 / 82%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ------------------------------------------------------------------
The footer's utility row could not wrap, so a fifth item broke phones.
`.foot-bottom` wraps, but the `.fb-links` group inside it is an
`inline-flex` row with no wrapping of its own: the clock, the separators and
every link are locked onto one line. The design shipped four items, which
just fit. Adding "Investor portal" (2026-08-23) made five, and the group
measured 394px against a 320px viewport — 74px of horizontal overflow on the
whole document, which also pushes the nav burger off-screen.
Measured before/after at 320px: overflow 74px → 0px. The separators are
hidden once the row wraps, because a leading "·" on a new line reads as a
bullet rather than a divider.
------------------------------------------------------------------ */
.fb-links {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 8px;
}
@media (max-width: 560px) {
.foot-bottom {
justify-content: flex-start;
}
.fb-links {
justify-content: flex-start;
gap: 12px;
}
.fb-links i {
display: none;
}
}
/**
* Post-design feature work.
*
* Split out of fixes.css, whose header promises that every rule is a
* correction to a measured defect and that removing the file restores the
* design's intent. That promise had quietly stopped being true: roughly half
* the file had become new design — the loop section rebuilt as an instrument
* rail, a headline retuned for new copy, a scan instrument that does not exist
* in the design at all, a replaced preloader, and an added motion control.
*
* These are not removable: enhancements.ts relocates the scan card into the
* rail this file creates, and the motion control it styles is what satisfies
* WCAG 2.2.2. Keeping them under a header that invited deletion was the
* problem — a maintainer deciding what was safe to discard before a re-port
* had no way to tell a bug fix from a feature.
*
* Loaded after fixes.css, so ordering is unchanged from when both lived in one
* file.
*/
/* ------------------------------------------------------------------
Hero lens — guided, inclusive scan demo.
The lens remains attached to the headline, but the formula tray now makes
the signal-to-ingredient relationship explicit and provides the same scan
path to keyboard and touch visitors. The underlying design styles remain
in design.css; these are post-design controls and states.
------------------------------------------------------------------ */
#lensTray {
width: 292px;
/* The hero hides the native cursor because the lens is the pointer — but
the lens fades out over the tray (it is interface, not skin), which used
to leave visitors with no pointer at all over the card body. */
cursor: auto;
}
#lensTray .lens-recent {
min-height: 2.8em;
margin-bottom: 10px;
font-family: var(--mono);
font-size: 9px;
line-height: 1.4;
letter-spacing: 0.12em;
color: var(--amber);
}
#lensTray .chips:empty {
min-height: 0;
}
#lensTray .chip::before {
display: none;
}
#lensTray .lens-scan {
width: 100%;
margin-top: 12px;
border: 1px solid rgb(237 234 226 / 28%);
border-radius: 999px;
padding: 8px 12px;
background: rgb(237 234 226 / 5%);
color: var(--t-light);
font-family: var(--mono);
font-size: 9px;
line-height: 1.2;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition:
border-color 180ms ease,
background 180ms ease,
color 180ms ease;
}
#lensTray .lens-scan:hover,
#lensTray .lens-scan:focus-visible {
border-color: var(--amber);
background: rgb(232 160 60 / 10%);
color: var(--amber);
}
#lensTray .lens-scan:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
}
#lensTray .lens-scan:disabled {
cursor: default;
opacity: 0.58;
}
#lensTray .tf {
color: var(--steel-2);
pointer-events: auto;
}
#lensTray .tf.ready,
#lensTray .tf:hover,
#lensTray .tf:focus-visible {
color: var(--amber);
}
#lensTray .lens-note {
margin-top: 8px;
font-family: var(--mono);
font-size: 8px;
line-height: 1.4;
letter-spacing: 0.08em;
color: var(--steel);
}
/* ------------------------------------------------------------------
The single-column layout starts at 980px, but every tray accommodation
used to stop at 760px. In the 761–980px band three things collided at
once: the tray sat on the hero chips, the centre caption struck through
the tray's text, and two contradictory instructions were visible
together. All the accommodations now share the layout's own boundary.
------------------------------------------------------------------ */
@media (max-width: 980px) {
/* Reserves the bottom band the docked tray and the motion toggle occupy,
so neither sits on the chips row. */
#hero {
padding-bottom: 340px;
}
#lensTray {
right: 14px;
bottom: 64px;
left: auto;
width: min(340px, calc(100vw - 28px));
}
.scroll-cue {
display: none;
}
}
@media (max-width: 560px) {
#lensTray {
left: 14px;
width: auto;
}
}
/* ------------------------------------------------------------------
5. Loop section — instrument rail.
Two defects, one cause. The dial's frosted backdrop disc sits directly on
the robot, so the section that exists to show the machine reduced it to a
background texture; and the SCAN portrait was pinned at `top: nav + 26px`
where it collided with the vertically-centred phase text below ~1060px of
viewport height (measured 1440x900: caption bottom 391px vs headline top
376px — identical in the reference, which was evidently tuned on a taller
display).
Both are fixed by giving the right-hand column a job: it becomes an
instrument rail. The dial shrinks to a 200px corner gauge, top-aligned so
it never shifts, and the portrait docks beneath it — where it reads as the
machine's own readout instead of debris in a corner. The 3D cell keeps the
centre of the stage for the whole loop.
The card is relocated into the rail by enhancements.ts at every breakpoint;
it ships inside the fixed #heroRobot layer, which no stylesheet can position
relative to the pinned grid. `.loop-right #scanSymbol` is therefore the
structural signal that the move happened, independent of motion state.
------------------------------------------------------------------ */
@media (min-width: 981px) {
:scope {
--rail-w: 300px;
--rail-dial: 200px;
}
/* Anchor the rail to the content column, not the full-bleed stage, so it
tracks the copy's gutter on ultra-wide screens. */
:where(:scope).js-pin .loop-grid {
position: relative;
}
:where(:scope).js-pin .loop-right {
position: absolute;
top: 0;
right: 0;
left: auto;
width: var(--rail-w);
display: grid;
justify-items: center;
align-content: start;
gap: 34px;
margin: 0;
z-index: 3;
}
/* The phase narrative now owns the left side. The old floating HUD repeated
fragments of that story in 10px type and made the intentionally open lane
look unfinished; the phase instruments already carry the live values. */
#hud {
display: none;
}
:where(:scope).js-pin .loop-right > .dial {
grid-column: 1;
grid-row: 1;
}
/* SCAN and COMPUTE are two states of one instrument bay, not two cards.
Explicitly sharing the cell prevents the rail from growing when the
terminal is injected after the portrait. */
:where(:scope).js-pin .loop-right > #scanSymbol,
:where(:scope).js-pin .loop-right > #computeTerminal {
grid-column: 1;
grid-row: 2;
align-self: start;
}
:where(:scope).js-pin .dial {
width: var(--rail-dial);
}
/* The backdrop can be far smaller and softer now that the gauge is off the
machine — it only has to separate the readout from the page ground. */
:where(:scope).js-pin .dial::before {
inset: -6%;
background: radial-gradient(
circle,
rgb(12 13 16 / 72%) 0%,
rgb(12 13 16 / 52%) 58%,
rgb(12 13 16 / 0%) 74%
);
backdrop-filter: blur(8px);
}
:where(:scope).js-pin .dial-read {
gap: 5px;
}
:where(:scope).js-pin .dial-read .dr-n {
font-size: 0.58rem;
letter-spacing: 0.24em;
}
:where(:scope).js-pin .dial-read .dr-name {
font-size: 1.16rem;
}
:where(:scope).js-pin .dial-read .dr-sub {
font-size: 0.5rem;
}
:where(:scope).js-pin .dial .stn {
font-size: 9px;
}
/* Docked: flow under the gauge. Keyed off the relocation rather than the
pin state, so the stacked no-motion fallback renders sensibly too. */
.loop-right #scanSymbol {
position: static;
inset: auto;
width: 100%;
display: grid;
justify-items: center;
text-align: center;
}
.loop-right #scanSymbol .ss-portrait {
width: 176px;
}
.loop-right #scanSymbol .ss-kicker {
justify-content: center;
}
.loop-right #scanSymbol .ss-copy {
justify-items: center;
}
/* The giant phase heading beside it already says "SCAN". */
.loop-right #scanSymbol .ss-sub {
display: none;
}
/* ----------------------------------------------------------------
The left phase panel was present in the DOM but still inherited the
reference's `visibility:hidden`, even after the motion patch switched
from autoAlpha to opacity. That left only the tiny floating HUD visible.
The repaired panel is deliberately lean: one strong phase heading, one
sentence of context and an open three-value ledger. A dissolving backdrop
protects its contrast without turning it into another floating card.
---------------------------------------------------------------- */
:where(:scope).js-pin .loop-grid {
grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
}
:where(:scope).js-pin .loop-left {
width: min(440px, calc(100vw - var(--rail-w) - 2 * var(--gutter) - 80px));
min-height: min(68svh, 560px);
isolation: isolate;
z-index: 3;
}
:where(:scope).js-pin .loop-left::before {
position: absolute;
z-index: -1;
inset: -52px -44px -52px calc(-1 * var(--gutter));
background: linear-gradient(
90deg,
rgb(12 13 16 / 100%) 0%,
rgb(12 13 16 / 96%) 54%,
rgb(12 13 16 / 58%) 74%,
rgb(12 13 16 / 0%) 96%
);
content: '';
pointer-events: none;
}
:where(:scope).js-pin .loop-intro,
:where(:scope).js-pin .loop-phase {
width: 100%;
max-width: 420px;
}
/* Opacity remains motion-owned; visibility must stay available so a phase
cannot disappear permanently at the edge of a scrub window. */
:where(:scope).js-pin .loop-phase {
visibility: visible;
padding: 4px 0 5px 24px;
border-left: 1px solid rgb(237 234 226 / 19%);
}
:where(:scope).js-pin .loop-phase::before {
position: absolute;
top: 5px;
left: -2px;
width: 3px;
height: 54px;
background: var(--amber);
box-shadow: 0 0 18px rgb(232 160 60 / 28%);
content: '';
}
:where(:scope).js-pin .phase-idx {
gap: 14px;
margin-bottom: 13px;
}
:where(:scope).js-pin .phase-idx .n {
font-size: 0.75rem;
}
:where(:scope).js-pin .phase-idx .of {
font-size: 0.61rem;
}
:where(:scope).js-pin .loop-phase h3 {
font-size: clamp(3.35rem, 4.65vw, 4.6rem);
line-height: 0.9;
}
:where(:scope).js-pin .loop-phase .tagline {
margin: 16px 0 10px;
font-size: clamp(1.18rem, 1.45vw, 1.38rem);
line-height: 1.25;
}
:where(:scope).js-pin .loop-phase .body {
max-width: 41ch;
color: rgb(200 203 210 / 88%);
font-size: clamp(0.98rem, 1.02vw, 1.06rem);
line-height: 1.55;
}
:where(:scope).js-pin .phase-specs {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 22px;
overflow: visible;
border: 0;
border-top: 1px solid rgb(237 234 226 / 18%);
border-bottom: 1px solid rgb(237 234 226 / 12%);
border-radius: 0;
background: transparent;
}
:where(:scope).js-pin .phase-specs .kv {
gap: 5px;
min-width: 0;
padding: 12px 11px 13px 0;
background: transparent;
}
:where(:scope).js-pin .phase-specs .kv + .kv {
padding-left: 13px;
border-left: 1px solid rgb(237 234 226 / 12%);
}
:where(:scope).js-pin .phase-specs .k {
font-size: 0.59rem;
letter-spacing: 0.15em;
}
:where(:scope).js-pin .phase-specs .v {
overflow: hidden;
font-size: clamp(0.98rem, 1.12vw, 1.12rem);
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* A short desktop viewport has roughly 510px below navigation. Tighten only
the vertical rhythm; type stays readable and the content remains complete. */
@media (min-width: 981px) and (max-height: 720px) {
:where(:scope).js-pin .loop-left {
min-height: min(64svh, 460px);
}
:where(:scope).js-pin .loop-left::before {
inset-block: -34px;
}
:where(:scope).js-pin .loop-phase h3 {
font-size: clamp(3rem, 4.2vw, 4rem);
}
:where(:scope).js-pin .loop-phase .tagline {
margin: 12px 0 8px;
}
:where(:scope).js-pin .loop-phase .body {
font-size: 0.96rem;
line-height: 1.46;
}
:where(:scope).js-pin .phase-specs {
margin-top: 17px;
}
:where(:scope).js-pin .phase-specs .kv {
padding-block: 9px 10px;
}
}
/* The scan instrument remains in the rail below the desktop breakpoint too.
Tablet and phone use a stable two-instrument row: the dial keeps loop
context on the left while the full face scans on the right. Reserving both
cells even while the portrait is transparent prevents layout movement as
SCAN enters and exits. */
@media (max-width: 980px) {
.loop-grid {
grid-template-columns: minmax(0, 1fr);
}
.loop-left,
.loop-intro,
.loop-phase {
min-width: 0;
width: 100%;
max-width: 100%;
}
.loop-right {
width: min(520px, calc(100vw - 2 * var(--gutter)));
display: grid;
grid-template-columns: minmax(132px, 176px) minmax(124px, 152px);
justify-content: center;
justify-self: center;
align-items: center;
gap: clamp(12px, 4vw, 28px);
margin-bottom: 8px;
z-index: 3;
}
.loop-right .dial {
width: min(176px, 46vw);
grid-column: 1;
grid-row: 1;
}
.loop-right #scanSymbol,
.loop-right #computeTerminal {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.loop-right #scanSymbol {
position: static;
inset: auto;
width: min(152px, 39vw);
display: grid;
justify-items: center;
text-align: center;
}
.loop-right #scanSymbol .ss-portrait {
width: 100%;
}
.loop-right #scanSymbol .ss-kicker {
justify-content: center;
}
.loop-right #scanSymbol .ss-copy {
justify-items: center;
}
.loop-right #scanSymbol .ss-sub {
display: none;
}
}
@media (max-width: 560px) {
.loop-right {
width: calc(100vw - 2 * var(--gutter));
grid-template-columns: minmax(118px, 136px) minmax(116px, 132px);
gap: clamp(8px, 3vw, 14px);
}
.loop-right .dial {
width: min(136px, 42vw);
}
.loop-right #scanSymbol {
width: min(132px, 41vw);
}
.loop-right #scanSymbol .ss-title {
font-size: 7.5px;
letter-spacing: 0.12em;
}
}
@media (max-width: 360px) {
/* The phase heading already identifies SCAN; removing the repeated title at
the narrowest width keeps the two instruments centered without clipping. */
.loop-right #scanSymbol .ss-copy {
display: none;
}
.loop-intro .eyebrow {
white-space: normal;
}
}
/* ------------------------------------------------------------------
10. Headline retuning for the .ai copy.
Two headlines now follow the live baolaboratory.ai wording (client
decision, 2026-08-12). Both are far longer than the design's originals
and cannot inherit their type sizes:
hero "AI that makes things." 21 chars -> 53
loop "One loop. Four moves. …" 41 chars -> 46
The hero is the harder one. Measured natural wrapping: inside the design's
673px copy column the headline breaks as
"Industrializing / Personalized / Skincare with / Physical AI" at every
size down to 58px, splitting "Skincare with" across lines; it only resolves
to three clean lines at 54px — which is SMALLER than the section headings
(h-lg, 62px) and would invert the type hierarchy.
The lever is width, not size. The hero's right grid column is empty — the
design leaves it for a robot that renders on a separate full-viewport
canvas — so widening the copy column costs nothing visually. At a ~840px
measure the headline sets as "Industrializing / Personalized Skincare /
with Physical AI" at full hero scale, each line a coherent unit, with the
amber landing on the closing phrase.
------------------------------------------------------------------ */
@media (min-width: 981px) {
#hero .hero-grid {
grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
}
}
/*
* The measure does the work, and it is scale-invariant. Measured at six type
* sizes, "Personalized Skincare" occupies 17.3ch and "Industrializing
* Personalized" 21.0ch — the same ch window at every size, because both scale
* with the font. Any measure inside that window forces the intended break;
* 19ch sits in the middle with margin on both sides.
*/
#hero h1 {
max-width: 19ch;
font-size: clamp(1.75rem, 4.6vw, 4.1rem);
}
/* Below ~360px the viewport, not the measure, is the binding constraint:
280px of column cannot hold "Personalized Skincare" at the 28px floor, so
the floor itself comes down. Verified at 320px, the narrowest phone still
in meaningful use. */
@media (max-width: 360px) {
#hero h1 {
font-size: 1.4rem;
}
}
/* The loop heading gains only five characters but crosses a wrap boundary at
its 14ch measure; widening it keeps the original three-line set. */
.loop-intro h2 {
max-width: 17ch;
}
/* ------------------------------------------------------------------
11. Full-face SCAN instrument.
The source profile and its postage-stamp cheek ellipse have been replaced
by a centered frontal portrait and a complete facial-zone map. The imaging
plane travels forehead to chin; region contours and measurement points
resolve only after the plane reaches them, then a restrained lock confirms
capture before COMPUTE. Motion ownership lives in enhancements.ts rather
than the WebGL scene, so the scan survives a robot fallback.
`vector-effect: non-scaling-stroke` keeps the instrument crisp at the
desktop card's 176px and the phone card's 116–132px.
------------------------------------------------------------------ */
.ss-portrait {
overflow: hidden;
border: 1px solid rgb(232 160 60 / 16%);
background:
linear-gradient(rgb(232 160 60 / 4%) 1px, transparent 1px),
linear-gradient(90deg, rgb(232 160 60 / 4%) 1px, transparent 1px), var(--ink);
background-size: 12.5% 12.5%;
}
.ss-photo {
object-fit: contain;
object-position: 50% 50%;
mix-blend-mode: normal;
filter: saturate(0.76) brightness(0.94) contrast(1.08);
-webkit-mask-image: none;
mask-image: none;
}
.ss-graphic .ss-face-outline,
.ss-graphic .ss-axis,
.ss-graphic .ss-region path,
.ss-graphic .ss-measure path,
.ss-graphic .ss-scan-line,
.ss-graphic .ss-lock path {
vector-effect: non-scaling-stroke;
}
.ss-graphic .ss-face-outline {
fill: rgb(232 160 60 / 1.5%);
stroke: rgb(232 160 60 / 72%);
stroke-width: 1.1;
stroke-dasharray: 3.5 3;
}
.ss-graphic .ss-axis {
stroke: rgb(200 203 210 / 25%);
stroke-width: 0.8;
stroke-dasharray: 2 4;
}
.ss-graphic .ss-region {
opacity: 0;
transition: opacity 120ms linear;
}
.ss-graphic .ss-region path {
stroke: rgb(237 234 226 / 74%);
stroke-width: 0.95;
stroke-dasharray: 1;
stroke-dashoffset: var(--trace, 1);
}
.ss-graphic .ss-measure {
opacity: 0;
transition: opacity 100ms linear;
}
.ss-graphic .ss-measure circle {
fill: var(--amber-hi);
stroke: rgb(12 13 16 / 92%);
stroke-width: 0.65;
filter: drop-shadow(0 0 3px rgb(232 160 60 / 100%));
}
.ss-graphic .ss-measure path {
stroke: rgb(232 160 60 / 88%);
stroke-width: 1;
stroke-dasharray: 1;
stroke-dashoffset: var(--trace, 1);
}
.ss-graphic .ss-scan-band {
opacity: 0.92;
mix-blend-mode: screen;
}
.ss-graphic .ss-scan-line {
stroke: var(--amber-hi);
stroke-width: 2.4;
filter: drop-shadow(0 0 4px rgb(232 160 60 / 100%)) drop-shadow(0 0 11px rgb(232 160 60 / 72%));
}
.ss-graphic .ss-scan-head {
fill: var(--amber-hi);
filter: drop-shadow(0 0 4px rgb(244 184 95 / 100%));
}
.ss-graphic .ss-lock {
opacity: 0;
transition: opacity 120ms linear;
}
.ss-graphic .ss-lock path {
stroke: var(--amber-hi);
stroke-width: 1.25;
filter: drop-shadow(0 0 4px rgb(232 160 60 / 72%));
}
.ss-graphic .ss-lock text {
font-family: var(--mono);
font-size: 3.15px;
letter-spacing: 0.16em;
fill: var(--amber-hi);
}
.ss-graphic .ss-label {
font-size: 3.15px;
fill: rgb(232 160 60 / 92%);
letter-spacing: 0.07em;
transform: none;
}
#scanSymbol.is-locked .ss-portrait {
border-color: rgb(232 160 60 / 48%);
box-shadow: inset 0 0 24px rgb(232 160 60 / 7%);
}
/* ------------------------------------------------------------------
11b. COMPUTE terminal.
A short, deterministic formulation trace replaces the face instrument in
the rail during COMPUTE. The shell borrows macOS Terminal's recognisable
traffic lights, but the content is the product pipeline rather than visual
filler: profile normalisation, active-library ranking, the stability
guardrail, formula lock and robot handoff. enhancements.ts reveals it over
2.6 seconds, using the scan instrument's existing frame rather than adding
another permanent animation loop.
------------------------------------------------------------------ */
#computeTerminal {
display: none;
}
:where(:scope).js-pin #computeTerminal {
width: min(300px, calc(100vw - 2 * var(--gutter)));
display: block;
visibility: hidden;
overflow: hidden;
border: 1px solid rgb(237 234 226 / 18%);
border-radius: 9px;
background: rgb(8 9 12 / 94%);
box-shadow:
0 22px 56px rgb(0 0 0 / 34%),
inset 0 0 0 1px rgb(255 255 255 / 2%);
transform-origin: 50% 0;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
:where(:scope).js-pin #computeTerminal.is-open {
visibility: visible;
}
.ct-chrome {
min-height: 28px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 0 10px;
border-bottom: 1px solid rgb(237 234 226 / 11%);
background: linear-gradient(180deg, rgb(42 44 49 / 96%), rgb(27 29 34 / 96%));
color: rgb(200 203 210 / 70%);
font-family: var(--mono);
font-size: 0.48rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ct-lights {
display: flex;
gap: 5px;
}
.ct-lights i {
width: 7px;
height: 7px;
display: block;
border-radius: 50%;
background: #ff5f57;
box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 32%);
}
.ct-lights i:nth-child(2) {
background: #febc2e;
}
.ct-lights i:nth-child(3) {
background: #28c840;
}
.ct-title {
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.ct-state {
color: var(--amber-hi);
text-align: right;
white-space: nowrap;
}
.compute-terminal[data-compute-state='ready'] .ct-state {
color: #82d799;
}
.ct-body {
min-height: 181px;
display: grid;
align-content: start;
padding: 12px 13px 14px;
color: rgb(218 220 216 / 88%);
font-family: var(--mono);
font-size: clamp(0.5rem, 0.58vw, 0.58rem);
line-height: 1.55;
text-align: left;
}
.ct-line {
width: 100%;
min-height: 1.55em;
overflow: hidden;
opacity: 0;
white-space: nowrap;
}
.ct-command {
color: rgb(237 234 226 / 96%);
}
.ct-prompt,
.ct-section {
color: var(--amber-hi);
}
.ct-ok,
.ct-ready {
color: #82d799;
}
.ct-section {
margin-top: 3px;
letter-spacing: 0.12em;
}
.ct-cursor {
display: inline-block;
margin-left: 2px;
color: var(--amber-hi);
visibility: hidden;
}
.compute-terminal.is-open[data-compute-state='ready'] .ct-cursor {
visibility: visible;
animation: compute-cursor 720ms steps(1, end) infinite;
}
@keyframes compute-cursor {
50% {
opacity: 0;
}
}
@media (max-width: 980px) {
:where(:scope).js-pin #computeTerminal {
width: min(152px, 39vw);
border-radius: 7px;
}
.ct-chrome {
min-height: 23px;
gap: 6px;
padding: 0 7px;
font-size: 0.38rem;
}
.ct-lights {
gap: 3px;
}
.ct-lights i {
width: 5px;
height: 5px;
}
.ct-state {
display: none;
}
.ct-body {
min-height: 128px;
padding: 8px 7px 9px;
font-size: clamp(0.36rem, 1.65vw, 0.43rem);
line-height: 1.45;
}
.ct-line {
min-height: 1.45em;
}
.ct-section {
margin-top: 2px;
}
}
@media (max-width: 560px) {
/* Match the portrait's phone width exactly so both states remain centred in
the same 132px instrument cell instead of the terminal hanging 10px out. */
:where(:scope).js-pin #computeTerminal {
width: min(132px, 41vw);
}
}
@media (prefers-reduced-motion: reduce) {
#scanPlane {
opacity: 0;
}
}
/* ============================================================================
§12 Preloader — reticle replaced with the dosing cell
============================================================================
The reference boot mark is a ring with four radial ticks, which reads as a
gunsight rather than as anything BAO does. Replaced with a minimal line
rendering of the machine the whole page is about: an articulated arm doses
three sub-microlitre drops into a batch vessel, and the vessel keeps them.
The markup uses `.boot-rig` rather than `.glyph`, so design.css's
`#boot .glyph circle|path` draw/tick rules simply find no elements. Nothing
is overridden and nothing in design.css changes.
Timing is pinned to the boot contract in design-motion.js: the screen holds
for a minimum of 1050ms and then fades over 700ms. The sequence completes at
~960ms so the vessel is already full before the fade starts, and on a slow
load it holds full until the 2600ms cap. */
#boot .boot-rig {
width: 128px;
height: 108px;
overflow: visible;
}
#boot .br-rig {
fill: none;
stroke: rgb(237 234 226 / 66%);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
#boot .br-vessel {
fill: none;
stroke: rgb(237 234 226 / 32%);
stroke-width: 1.8;
stroke-linecap: round;
}
#boot .br-joint {
fill: var(--ink);
stroke: rgb(237 234 226 / 66%);
stroke-width: 2;
}
/* Clipped to the vessel interior so the fill meets the rounded base instead of
floating above it as a square block. */
#boot .br-liquid {
fill: var(--amber);
opacity: 0.92;
transform-box: fill-box;
transform-origin: 50% 100%;
animation: br-fill 1s steps(1) forwards;
}
/* Monotonic: every step is higher than the last, and `forwards` holds the
final level. The vessel never returns to empty. */
@keyframes br-fill {
0% {
transform: scaleY(0.05);
}
60% {
transform: scaleY(0.3);
}
78% {
transform: scaleY(0.58);
}
96% {
transform: scaleY(0.86);
}
100% {
transform: scaleY(0.86);
}
}
/* Pivots on the shoulder. An SVG element's transform-origin resolves against
its `transform-box`, not against viewBox user units, so a literal `88px 66px`
lands nowhere near the joint. The group is authored so its object bounding
box — lines and elbow only, stroke excluded — ends exactly at the shoulder
(x 40..88, y 26.6..66), which makes `100% 100%` that joint precisely. The
shoulder circle is deliberately kept outside the group: including it would
push the box past the pivot, and being centred on the pivot it cannot rotate
visibly anyway. */
#boot .br-arm {
transform-box: fill-box;
transform-origin: 100% 100%;
animation: br-settle 0.24s var(--ease) forwards;
}
@keyframes br-settle {
from {
transform: rotate(-9deg);
}
to {
transform: rotate(0deg);
}
}
/* The doses sit outside `.br-arm` so they fall vertically rather than
inheriting its rotation. Each carries its own --fall because the surface it
has to land on is higher than the one before it — a shared distance would
send the third drop straight through the liquid.
`transform-box: fill-box` is load-bearing, not decoration. Without it the
drop scales about the viewBox corner, so the flatten-on-impact keyframe
translates it up and to the right instead of squashing it in place — it
leaves the nozzle and lands on the elbow joint. */
#boot .br-drop {
fill: var(--amber);
opacity: 0;
filter: drop-shadow(0 0 4px rgb(232 160 60 / 90%));
transform-box: fill-box;
transform-origin: 50% 50%;
animation: br-dose 0.34s cubic-bezier(0.42, 0, 0.7, 0.45) forwards;
}
/* Keyed by explicit class, never :nth-of-type. These are elements
sharing a parent with the shoulder joint, so a positional selector counts
that joint too and silently shifts every dose by one slot — which leaves the
last drop with no --fall, an invalid transform, and no delay. */
#boot .br-drop-1 {
--fall: 23px;
animation-delay: 0.26s;
}
#boot .br-drop-2 {
--fall: 18px;
animation-delay: 0.44s;
}
#boot .br-drop-3 {
--fall: 13px;
animation-delay: 0.62s;
}
@keyframes br-dose {
0% {
transform: translateY(0) scale(0.25);
opacity: 0;
}
20% {
transform: translateY(0) scale(1);
opacity: 1;
}
72% {
transform: translateY(calc(var(--fall) * 0.8)) scale(1);
opacity: 1;
}
88% {
transform: translateY(calc(var(--fall) * 0.96)) scale(1.45, 0.5);
opacity: 0.75;
}
100% {
transform: translateY(var(--fall)) scale(1.8, 0.12);
opacity: 0;
}
}
/* 0.17s is not a taste call: the fill steps every 180ms, and a ring that
outlives its own step gets buried by the next dose's liquid, reading as a
blemish inside the vessel rather than a splash on its surface. */
#boot .br-ripple {
fill: none;
stroke: var(--amber-hi);
stroke-width: 1.3;
opacity: 0;
transform-box: fill-box;
transform-origin: 50% 50%;
animation: br-ripple 0.17s ease-out forwards;
}
#boot .br-ripple-1 {
animation-delay: 0.6s;
}
#boot .br-ripple-2 {
animation-delay: 0.78s;
}
#boot .br-ripple-3 {
animation-delay: 0.96s;
}
@keyframes br-ripple {
from {
opacity: 0.9;
transform: scaleX(0.25);
}
to {
opacity: 0;
transform: scaleX(1.4);
}
}
/* Reduced motion gets the end state directly: arm at rest, vessel already
full. (design-motion.js also drops the boot immediately in this mode, so
this mainly guards the frame before that runs.) */
@media (prefers-reduced-motion: reduce) {
#boot .br-arm,
#boot .br-drop,
#boot .br-liquid,
#boot .br-ripple {
animation: none;
}
#boot .br-liquid {
transform: scaleY(0.86);
}
#boot .br-drop,
#boot .br-ripple {
opacity: 0;
}
}
/* Failsafe: the boot screen must not be able to hide the site permanently.
---------------------------------------------------------------------------
`#boot` is opaque, fixed and full-viewport, and the only thing that removes
it is design-motion.js. The inline head script adds `.js` before first paint
— which is what makes the overlay visible — so if that module fails to load,
throws, or is blocked by a CSP or an extension, the overlay stays up and the
visitor sees a blank screen forever, with no CSS or