on the landing page); the sheet repeats it */
#nav > .bb-navlinks + :is(a, div) { display:none !important; } /* !important: the landing wrapper sets display inline */
}
.bb-bars { position:relative; width:16px; height:10px; }
.bb-bars span {
position:absolute; left:0; width:16px; height:1.5px; border-radius:2px; background:currentColor;
transition:translate .24s cubic-bezier(.2,.7,.2,1), rotate .24s cubic-bezier(.2,.7,.2,1);
}
.bb-bars span:first-child { top:1px; }
.bb-bars span:last-child { top:7.5px; }
#nav:has(.bb-sheet:popover-open) .bb-bars span:first-child { translate:0 3.25px; rotate:45deg; }
#nav:has(.bb-sheet:popover-open) .bb-bars span:last-child { translate:0 -3.25px; rotate:-45deg; }
.bb-blabel { display:grid; overflow:hidden; height:13px; line-height:13px; }
.bb-blabel span { grid-area:1/1; transition:translate .2s cubic-bezier(.2,.7,.2,1), opacity .2s cubic-bezier(.2,.7,.2,1); }
.bb-blabel span:last-child { translate:0 120%; opacity:0; }
#nav:has(.bb-sheet:popover-open) .bb-blabel span:first-child { translate:0 -120%; opacity:0; }
#nav:has(.bb-sheet:popover-open) .bb-blabel span:last-child { translate:0 0; opacity:1; }
.bb-sheet {
position:fixed; inset:var(--bb-navb, 64px) 0 auto 0; width:auto; height:auto; margin:0;
max-height:calc(100dvh - var(--bb-navb, 64px)); overflow:auto; overscroll-behavior:contain;
padding:8px 20px 24px; border:0; border-bottom:1px solid rgba(255,255,255,0.1); border-radius:0 0 24px 24px;
background:#0C0D0F; color:#E9EAEC; font-family:'Space Grotesk',sans-serif;
clip-path:inset(0 0 100% 0 round 0 0 24px 24px);
transition:clip-path .2s cubic-bezier(.2,.7,.2,1), display .2s allow-discrete, overlay .2s allow-discrete;
}
.bb-sheet:popover-open { clip-path:inset(0 0 0 0 round 0 0 24px 24px); transition-duration:.32s; }
@starting-style { .bb-sheet:popover-open { clip-path:inset(0 0 100% 0 round 0 0 24px 24px); } }
.bb-sheet::backdrop {
background:linear-gradient(transparent var(--bb-navb, 64px), rgba(6,7,8,0.6) var(--bb-navb, 64px));
opacity:0; transition:opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
}
.bb-sheet:popover-open::backdrop { opacity:1; transition-duration:.26s; }
@starting-style { .bb-sheet:popover-open::backdrop { opacity:0; } }
html:has(.bb-sheet:popover-open) { overflow:hidden; }
.bb-sheet-links { display:flex; flex-direction:column; }
#nav .bb-sheet-links a {
display:flex; align-items:center; justify-content:space-between; padding:14px 2px;
border-bottom:1px solid rgba(255,255,255,0.07); color:#fff;
font-size:21px; font-weight:500; line-height:1.1; letter-spacing:-0.01em;
}
.bb-sheet-links a span { font:13px/1 'Space Mono',monospace; color:#8A8E96; }
.bb-sheet-links a[aria-current] span { color:#34F5C5; }
#nav .bb-sheet-cta {
display:block; margin-top:18px; padding:15px; border-radius:12px; text-align:center;
background:#34F5C5; color:#0C0D0F; font:700 13px/1 'Space Mono',monospace;
}
.bb-sheet-mail { margin:14px 0 0; text-align:center; font:11.5px/1.5 'Space Mono',monospace; color:#8A8E96; }
#nav .bb-sheet-mail a { color:#E9EAEC; }
.bb-sheet-mail span { display:block; margin-top:2px; }
@keyframes bbsheetin { from { opacity:0; translate:0 10px; } }
#nav .bb-sheet-links a, #nav .bb-sheet-cta, .bb-sheet-mail { transition:opacity .12s cubic-bezier(.2,.7,.2,1), transform .16s cubic-bezier(.2,.7,.2,1); }
.bb-sheet:not(:popover-open) :is(.bb-sheet-links a, .bb-sheet-cta, .bb-sheet-mail) { opacity:0; }
.bb-sheet:popover-open .bb-sheet-links a {
animation:bbsheetin .3s cubic-bezier(.2,.7,.2,1) backwards;
animation-delay:calc(70ms + var(--i, 0) * 30ms);
animation-delay:calc(70ms + (sibling-index() - 1) * 30ms);
}
.bb-sheet:popover-open .bb-sheet-cta { animation:bbsheetin .3s cubic-bezier(.2,.7,.2,1) 250ms backwards; }
.bb-sheet:popover-open .bb-sheet-mail { animation:bbsheetin .3s cubic-bezier(.2,.7,.2,1) 280ms backwards; }
/* page-to-page transitions -------------------------------------------------------
Cross-document view transitions (Chrome, Safari; Firefox loads pages as
before). The nav is its own group, so it stays perfectly still; the current
pill (.is-cur) slides to its new place; the rest of the page leaves in 120 ms
and arrives over 260 ms. site.js adds html.bb-vt around the capture so the
pill's own fill is what gets captured (the gliding fill is hidden then). */
@view-transition { navigation: auto; }
#nav { view-transition-name:bb-nav; }
.bb-navlinks > .bb-pill.is-cur { view-transition-name:bb-cur; }
html.bb-vt .bb-navfill { visibility:hidden; }
html.bb-vt .bb-navlinks > .bb-pill.is-cur { color:#0C0D0F; background:#E9EAEC; border-color:#E9EAEC; }
/* no transition here: the capture happens in the same frame the class lands */
html.bb-vt #nav .bb-navlinks > .bb-pill { transition:none; } /* #nav: outranks the press-feedback "#nav a" rule */
@keyframes bbvtout { to { opacity:0; transform:translateY(-6px); } }
@keyframes bbvtin { from { opacity:0; transform:translateY(14px); } }
::view-transition { background:#0C0D0F; }
::view-transition-old(root) { animation:bbvtout .12s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-new(root) { animation:bbvtin .26s cubic-bezier(.2,.7,.2,1) 70ms both; }
::view-transition-group(bb-cur) { animation-duration:.3s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
/* scroll reveals ----------------------------------------------------------------
Each [data-reveal] block rises once, at its own speed, when it comes into
view, instead of being scrubbed by the scroll position (which left blocks
half-faded if you stopped mid-way). site.js adds html.bb-reveal, marks what
is already on screen as .bb-seen (so nothing visible ever blinks out), and
sets .is-in as the rest arrive. It is an animation, not a transition, so it
never fights the cards' own hover transitions. Cards in a row follow each
other 60 ms apart (the design's data-reveal-delay values). Without JS, or
with reduced motion, everything is simply visible. */
@keyframes bbrise { from { opacity:0; translate:0 28px; } }
html.bb-reveal [data-reveal]:not(.bb-seen) {
animation:bbrise .52s cubic-bezier(.2,.7,.2,1) var(--rd, 0ms) backwards;
animation-play-state:paused;
}
html.bb-reveal [data-reveal].is-in { animation-play-state:running; }
[data-reveal-delay="1"], [data-reveal-delay="120"], [data-reveal-delay="140"] { --rd:60ms; }
[data-reveal-delay="2"], [data-reveal-delay="240"] { --rd:120ms; }
[data-reveal-delay="3"] { --rd:180ms; }
/* interface guidelines --------------------------------------------------------
Cross-page fixes from the Vercel Web Interface Guidelines pass (2026-09). */
html { color-scheme:dark; }
body { -webkit-tap-highlight-color:transparent; }
a, button, label, input, textarea, select { touch-action:manipulation; }
section[id], [id="main"] { scroll-margin-top:84px; }
.bb-skip {
position:absolute; left:16px; top:-100px; z-index:100; padding:10px 14px; border-radius:999px;
font-family:'Space Mono',monospace; font-size:13px; font-weight:700; color:#0C0D0F; background:#34F5C5;
}
.bb-skip:focus-visible { top:12px; outline-offset:4px; }
/* The nav logo links home on every page. The mark is 22px tall; the link is at
least 24px so it meets the WCAG 2.5.8 minimum target size. */
#nav > a:first-child { min-height:24px; }
.bb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* iOS Safari zooms the page into any field under 16px on focus; the form
fields are designed at 15px, so bump them on phones only. */
@media (max-width: 620px) {
input:not([type=radio]):not([type=checkbox]), textarea, select { font-size:16px !important; }
}
/* press feedback: every pressable scales down while held. 160ms strong
ease-out — fast enough to read as a response, not an animation. */
.bb-navlinks > .bb-pill, .bb-cta, .bb-chip span, #nav a, button, .hv-press {
transition-property:color, border-color, background-color, box-shadow, transform;
transition-duration:.25s, .25s, .25s, .35s, .16s;
transition-timing-function:ease, ease, ease, ease, cubic-bezier(.2,.7,.2,1);
}
.bb-navlinks > .bb-pill:active, .bb-cta:active, .bb-chip:active span, #nav a:active, button:active { transform:scale(.97); }
/* card spotlight: a 1px gradient border that follows the pointer (site.js sets
--mx/--my on the hovered card). Pointer-gated: touch fires false hovers. */
@media (hover: hover) and (pointer: fine) {
.bb-spot { position:relative; }
.bb-spot::before {
content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(52,245,197,.75), rgba(52,245,197,0) 70%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0; transition:opacity .3s ease;
}
.bb-spot:hover::before { opacity:1; }
}
/* arrival: a card reached through a link to its id (the Services menu, the
footer) traces its border in mint once, so the eye lands on it. site.js adds
.bb-arrive once the scroll has settled. 700 ms trace, fades after 1.6 s. */
@property --bb-sweep { syntax:'
'; inherits:false; initial-value:0deg; }
.bb-spot[id] { position:relative; scroll-margin-top:120px; }
.bb-arrive::after {
content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
background:conic-gradient(from -90deg, #34F5C5 var(--bb-sweep), transparent 0);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
animation:bbsweep .7s cubic-bezier(.2,.7,.2,1) forwards, bbsweepout .6s ease 1.6s forwards;
}
@keyframes bbsweep { from { --bb-sweep:0deg; } to { --bb-sweep:360deg; } }
@keyframes bbsweepout { from { --bb-sweep:360deg; opacity:1; } to { --bb-sweep:360deg; opacity:0; } }
/* hero: headline words, CTA pills, terminal, spotlight -------------------------
Shared by every page that has a hero. Landing/About terminals type a command
(--n = its length in characters, set inline, data-typed on the terminal);
Nightcopy's is a log, so it only prints lines (--t0 start, --step cadence). */
@keyframes bbword { from { opacity:0; transform:translateY(14px); filter:blur(8px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
/* inline-block so transform applies. The padding/negative-margin pair gives
each word a box that contains its ascenders and descenders without moving
anything: WebKit rasterises a filtered element to its box and drops glyph
overflow, which cut the p/y/g descenders off until the blur finished. */
[data-enter-word] { display:inline-block; padding:.14em .08em .24em; margin:-.14em -.08em -.24em; animation:bbword .56s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(180ms + var(--i, 0) * 55ms); }
.bb-cta {
display:inline-flex; align-items:center; gap:14px; min-height:52px;
padding:6px 26px 6px 6px; border-radius:999px;
font-family:'Space Mono',monospace; font-size:14px; font-weight:700; line-height:1;
color:#0C0D0F; background:#34F5C5;
}
.bb-cta-ico {
display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
background:#0C0D0F; color:#34F5C5; font-size:17px;
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.bb-cta-ghost { padding:6px 26px; font-weight:400; color:#E9EAEC; background:transparent; border:1px solid rgba(255,255,255,0.16); }
@media (hover: hover) and (pointer: fine) {
.bb-cta:hover .bb-cta-ico { transform:translateX(3px); }
}
@keyframes bbtype { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes bbcaret { from { transform:translateX(0); } to { transform:translateX(calc(var(--n) * 1ch)); } }
@keyframes bbhide { to { opacity:0; } }
@keyframes bbprint { from { opacity:0; } to { opacity:1; } }
.bb-term { --n:16; --t0:1.05s; --step:70ms; }
.bb-term[data-typed] { --t0:calc(1.05s + var(--n) * 45ms + 130ms); }
.bb-term-wrap { position:relative; display:inline-block; }
.bb-term-cmd { display:inline-block; animation:bbtype calc(var(--n) * 45ms) steps(var(--n), end) 1.05s backwards; }
.bb-term-caret {
position:absolute; left:0; top:50%; width:8px; height:16px; margin-top:-8px; background:#34F5C5;
animation:bbcaret calc(var(--n) * 45ms) steps(var(--n), end) 1.05s backwards, bbhide .1s linear calc(1.05s + var(--n) * 45ms + 80ms) forwards;
}
.bb-term-line { animation:bbprint .18s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--t0) + var(--i, 0) * var(--step)); }
#bb-spot {
position:absolute; left:0; top:0; width:720px; height:720px; margin:-360px 0 0 -360px; border-radius:50%;
background:radial-gradient(circle at center, rgba(52,245,197,0.16), rgba(52,245,197,0) 62%);
opacity:0; pointer-events:none; will-change:transform; z-index:1;
transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
#bb-spot.is-on { opacity:1; }
@media (hover: hover) and (pointer: fine) {
.bb-marqpad:hover > div { animation-play-state:paused; }
}
/* contact form -----------------------------------------------------------------
A topic chip floods with mint from where it was tapped (site.js sets --fx/--fy;
keyboard selection floods from the centre), 240 ms. The submit button holds
three stacked labels that slide past each other (180 ms): the idle label,
"Sending" with a blinking block cursor, and "Message sent" with a check that
draws itself (280 ms). A failed send shakes the button once (300 ms) and
shows the real error; a sent message's confirmation types out. */
.bb-chip span { position:relative; overflow:hidden; isolation:isolate; }
.bb-chip span::before {
content:''; position:absolute; inset:0; z-index:-1; background:rgba(52,245,197,0.12);
clip-path:circle(0 at var(--fx, 50%) var(--fy, 50%)); opacity:0;
transition:clip-path .24s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
}
.bb-chip input:checked + span { background:#141518; }
.bb-chip input:checked + span::before { clip-path:circle(150% at var(--fx, 50%) var(--fy, 50%)); opacity:1; }
[data-submit].bb-send { display:grid; place-items:center; overflow:hidden; }
.bb-send > .bb-bl {
grid-area:1/1; display:inline-flex; align-items:center; gap:10px;
opacity:0; translate:0 10px; transition:opacity .18s cubic-bezier(.2,.7,.2,1), translate .18s cubic-bezier(.2,.7,.2,1);
}
.bb-send > .bb-bl.is-on { opacity:1; translate:0 0; }
.bb-send > .bb-bl.is-was { opacity:0; translate:0 -10px; }
.bb-send > .bb-bl.is-snap { transition:none; }
.bb-blk { display:inline-block; width:8px; height:15px; background:currentColor; animation:bbblink .8s steps(1) infinite; }
.bb-send svg { width:18px; height:18px; }
.bb-send svg path { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22; stroke-dashoffset:22; }
#contact-form.is-sent .bb-send svg path { stroke-dashoffset:0; transition:stroke-dashoffset .28s cubic-bezier(.2,.7,.2,1) .12s; }
@keyframes bbpop { from { scale:.96; } }
@keyframes bbshake { 0%, 100% { translate:0; } 20% { translate:-5px; } 40% { translate:5px; } 60% { translate:-3px; } 80% { translate:3px; } }
#contact-form.is-sending [data-submit] { background:#1FD0A6 !important; cursor:progress; }
#contact-form.is-sent [data-submit] { background:#0FB48C !important; color:#fff !important; animation:bbpop .42s cubic-bezier(.2,.7,.2,1); }
#contact-form.is-error [data-submit] { animation:bbshake .3s cubic-bezier(.2,.7,.2,1); }
#contact-form.is-error [data-status] { color:#FF8A80 !important; }
#contact-form.is-sent [data-status] { color:#34F5C5 !important; }
#contact-form input:user-invalid, #contact-form textarea:user-invalid { border-color:#FF8A80 !important; }
/* reduced motion ------------------------------------------------------------
Each page's own reduced-motion block cuts every animation and transition to
0.01ms, which covers the menus, the sheet, the glide and the form. What is
left: scroll-driven animations ignore animation-duration (their progress
is the scroll position), so the parallax blobs are turned off outright; the
staggered one-shots are removed rather than shortened, or elements would
blink in one by one; and view transitions are skipped. The scroll reveals,
the label decode and the typed confirmation are never started (site.js). */
@media (prefers-reduced-motion: reduce) {
[data-parallax] { animation:none !important; transform:none !important; }
[data-enter], [data-enter-word], .bb-navlinks > .bb-pill, .bb-navfill,
.bb-term-cmd, .bb-term-caret, .bb-term-line,
.bb-menu-item, .bb-menu-foot, .bb-sheet-links a, .bb-sheet-cta, .bb-sheet-mail { animation:none !important; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}
/* ==========================================================================
2026-09-24 redesign ("Signal Stack"): the contour-field hero, the services
stack, the live demos inside it, and the Nightcopy pipe. Approved from the
concepts in concepts/ (01 + 03 + 06's pipe). site.js drives all of it; every
piece degrades to a still, complete page without JS or with reduced motion.
========================================================================== */
/* contour field ---------------------------------------------------------------
A WebGL2 canvas behind a hero (canvas[data-field]). Topographic lines drift,
swell under the pointer or a finger, ring out from a tap, and lean with the
phone when motion access was granted. data-calm="x,y" is the quiet spot
(0-1, from the bottom-left) kept dim behind the copy. Without WebGL the
canvas stays hidden and the hero's radial glow stands in. */
.bb-field { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.bb-field:not(.is-on) { display:none; }
.bb-fhero { position:relative; overflow:hidden; isolation:isolate; min-height:calc(100svh - 72px); display:grid; place-items:center; text-align:center;
background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(52,245,197,0.12), transparent 70%); }
.bb-fhero-in { position:relative; z-index:2; max-width:1100px; padding:64px 24px 120px; }
.bb-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 15px 8px 11px; border-radius:999px; background:rgba(12,13,15,0.6);
box-shadow:inset 0 0 0 1px rgba(52,245,197,0.28); font:400 12px/1 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#34F5C5;
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bb-pulse { position:relative; width:7px; height:7px; border-radius:50%; background:#34F5C5; }
.bb-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:#34F5C5; animation:bbping 2s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes bbping { 70%, 100% { transform:scale(3.2); opacity:0; } }
.bb-fhero-h1 { margin:26px 0 0; font-weight:700; font-size:clamp(42px,7.4vw,108px); line-height:.96; letter-spacing:-.045em; color:#fff; text-wrap:balance; }
.bb-sheen { background:linear-gradient(100deg,#fff 0%,#fff 30%,#34F5C5 50%,#7FD7FF 62%,#fff 80%) 0 0/250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:bbsheen 7s ease-in-out infinite; }
@keyframes bbsheen { 0%, 15% { background-position:100% 0; } 60%, 100% { background-position:0 0; } }
.bb-fhero-lede { margin:26px auto 0; max-width:620px; font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:#9498A0; text-wrap:pretty; }
.bb-fhero-ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px; }
.bb-cue { position:absolute; left:50%; bottom:26px; z-index:2; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
font:400 10px/1 'Space Mono',monospace; letter-spacing:.24em; text-transform:uppercase; color:#5C6068; pointer-events:none; }
.bb-cue span { width:1px; height:40px; background:linear-gradient(#34F5C5,transparent); transform-origin:top; animation:bbcue 2.2s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes bbcue { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }
@media (max-width: 620px) {
.bb-fhero { min-height:calc(100svh - 64px); }
.bb-fhero-in { padding:40px 20px 110px; }
.bb-fhero-h1 { margin-top:22px; font-size:12.4vw; }
.bb-fhero-ctas { flex-direction:column; align-items:stretch; max-width:340px; margin-left:auto; margin-right:auto; }
.bb-fhero-ctas .bb-cta { justify-content:center; }
}
/* the stack -------------------------------------------------------------------
Services, told as a server stack you scroll through. Without JS (or with
reduced motion) it is a plain column: the intro, then six equal cards, each
with its demo. site.js adds .is-live: the section grows tall, its inner box
pins, a lid lifts off a B&B block, six identical slabs part, and each slides
out in turn (equal scroll for every service; payments first by order only)
while its copy and live demo show alongside. */
.bb-stack { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.07); }
.bb-stack-sticky { position:relative; max-width:1240px; margin:0 auto; padding:104px 40px; }
.bb-stage, .bb-stack-floor, .bb-rail, .bb-cue-inline { display:none; }
.bb-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.bb-step { position:relative; }
.bb-step-intro { grid-column:1 / -1; max-width:640px; margin-bottom:28px; }
.bb-step-outro { display:none; }
.bb-steps > .bb-step:not(.bb-step-intro):not(.bb-step-outro) {
padding:24px; border-radius:16px; background:linear-gradient(#16171B,#111216); border:1px solid rgba(255,255,255,0.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px -28px rgba(0,0,0,0.95);
}
.bb-kicker { font:400 12px/1 'Space Mono',monospace; letter-spacing:.16em; color:#34F5C5; text-transform:uppercase; }
.bb-step h2 { margin:14px 0 0; font-weight:700; font-size:clamp(32px,3.8vw,56px); line-height:1.02; letter-spacing:-.035em; color:#fff; text-wrap:balance; }
.bb-step h3 { margin:12px 0 0; font-weight:700; font-size:clamp(22px,2.4vw,30px); line-height:1.05; letter-spacing:-.03em; color:#fff; }
.bb-step p { margin:14px 0 0; max-width:480px; font-size:16px; line-height:1.6; color:#9498A0; text-wrap:pretty; }
.bb-step-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
@media (max-width: 900px) { .bb-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .bb-stack-sticky { padding:80px 28px; } }
@media (max-width: 620px) { .bb-steps { grid-template-columns:1fr; } .bb-stack-sticky { padding:64px 20px; } }
.bb-stack.is-live { height:760vh; }
.bb-stack.is-live .bb-stack-sticky { position:sticky; top:0; height:100svh; max-width:none; padding:0; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; }
.bb-stack.is-live .bb-stack-sticky::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 55% at 30% 58%, rgba(52,245,197,0.10), transparent 70%); pointer-events:none; }
.bb-stack.is-live .bb-stack-floor { display:block; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:56px 56px;
-webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 60%,#000,transparent 75%); mask-image:radial-gradient(ellipse 60% 60% at 30% 60%,#000,transparent 75%); }
.bb-stack.is-live .bb-stage { display:grid; place-items:center; position:relative; height:100%; perspective:2600px; perspective-origin:50% 40%; }
.bb-stack.is-live .bb-steps { display:block; position:relative; height:100%; padding-right:clamp(16px,5vw,80px); }
.bb-stack.is-live .bb-steps > .bb-step {
display:block; position:absolute; left:0; right:clamp(40px,6vw,96px); top:50%; translate:0 -50%; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
opacity:0; filter:blur(8px); transform:translateY(26px); pointer-events:none;
transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), filter .55s cubic-bezier(.2,.7,.2,1);
}
.bb-stack.is-live .bb-steps > .bb-step.is-on { opacity:1; filter:none; transform:none; pointer-events:auto; }
.bb-stack.is-live .bb-steps > .bb-step.is-up { transform:translateY(-26px); }
.bb-stack.is-live .bb-step h3 { font-size:clamp(28px,3vw,44px); }
.bb-stack.is-live .bb-cue-inline { display:inline-flex; align-items:center; gap:10px; margin-top:32px; font:400 12px/1 'Space Mono',monospace; letter-spacing:.14em; color:#5C6068; text-transform:uppercase; }
.bb-cue-inline span { width:18px; height:28px; border-radius:10px; box-shadow:inset 0 0 0 1.5px #5C6068; position:relative; }
.bb-cue-inline span::after { content:''; position:absolute; left:50%; top:6px; width:2px; height:6px; margin-left:-1px; border-radius:1px; background:#34F5C5; animation:bbwheel 1.6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes bbwheel { 60% { transform:translateY(8px); opacity:0; } 100% { opacity:0; } }
.bb-stack-anchor { position:absolute; left:0; width:1px; height:1px; pointer-events:none; }
.bb-stack-anchor[id] { scroll-margin-top:0; }
.bb-iso { --w:min(320px,28vw); position:relative; width:var(--w); height:var(--w); transform-style:preserve-3d; transform:rotateX(57deg) rotateZ(-40deg); margin-top:12vh; }
.bb-iso-glow { position:absolute; inset:-30%; transform:translateZ(-30px); background:radial-gradient(closest-side, rgba(52,245,197,.22), transparent); filter:blur(10px); }
.bb-slab { --t:24px; position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.bb-face { position:absolute; opacity:var(--o,1); }
.bb-top { inset:0; transform:translateZ(var(--t)); border-radius:5px; background:linear-gradient(135deg,#1A1C21,#121317 60%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11); overflow:hidden; filter:brightness(var(--b,1)); transition:box-shadow .5s, background .5s; }
.bb-top::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px); background-size:16px 16px; opacity:.7; }
.bb-top .g { position:absolute; left:22px; top:18px; font:700 44px/1 'Space Mono',monospace; color:#3A3E45; transition:color .5s, text-shadow .5s; }
.bb-top .no { position:absolute; right:18px; top:20px; font:400 13px/1 'Space Mono',monospace; color:#5C6068; }
.bb-top .nm { position:absolute; left:22px; bottom:18px; right:18px; font:700 15px/1.2 'Space Mono',monospace; color:#8A8E96; letter-spacing:.02em; text-transform:uppercase; transition:color .5s; }
.bb-top .tr { position:absolute; right:18px; bottom:18px; width:40%; height:34%; border-right:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); border-radius:0 0 8px 0; }
.bb-top .tr::after { content:''; position:absolute; right:-4px; bottom:-4px; width:7px; height:7px; border-radius:50%; background:#2A2D33; transition:background .5s, box-shadow .5s; }
.bb-fr { left:0; top:100%; width:100%; height:var(--t); transform-origin:top; transform:rotateX(90deg); background:linear-gradient(90deg,#15171B,#0E0F12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); filter:brightness(var(--b,1)); }
.bb-lf { top:0; right:100%; width:var(--t); height:100%; transform-origin:right; transform:rotateY(90deg); background:linear-gradient(180deg,#101114,#0A0B0D); box-shadow:inset -1px 0 0 rgba(255,255,255,.1); filter:brightness(var(--b,1)); }
.bb-fr i { position:absolute; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:#2A2D33; transition:background .4s, box-shadow .4s; }
.bb-slab.is-on .bb-top { background:linear-gradient(135deg,#17312A,#101816 70%); box-shadow:inset 0 0 0 1px rgba(52,245,197,.75), 0 0 60px 6px rgba(52,245,197,.28); }
.bb-slab.is-on .g { color:#34F5C5; text-shadow:0 0 22px rgba(52,245,197,.7); }
.bb-slab.is-on .nm { color:#fff; }
.bb-slab.is-on .tr::after { background:#34F5C5; box-shadow:0 0 10px #34F5C5; }
.bb-slab.is-on .bb-fr { box-shadow:inset 0 1px 0 rgba(52,245,197,.8); }
.bb-slab.is-on .bb-fr i { background:#34F5C5; box-shadow:0 0 8px #34F5C5; }
.bb-lid .bb-top { background:linear-gradient(135deg,#1B1E22,#111215); display:grid; place-items:center; }
.bb-lid .mk { font:700 64px/1 'Space Mono',monospace; color:#fff; letter-spacing:-.02em; }
.bb-lid .mk b { color:#34F5C5; text-shadow:0 0 30px rgba(52,245,197,.7); }
.bb-lid .sub { position:absolute; left:0; right:0; bottom:22px; text-align:center; font:400 11px/1 'Space Mono',monospace; letter-spacing:.3em; color:#5C6068; }
.bb-stack.is-live .bb-rail { display:flex; flex-direction:column; gap:6px; position:absolute; right:clamp(8px,1.6vw,24px); top:50%; translate:0 -50%; z-index:3; }
.bb-rail button { all:unset; cursor:pointer; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:22px; font:400 10.5px/1 'Space Mono',monospace; color:#5C6068; }
.bb-rail button span { opacity:0; transform:translateX(6px); transition:opacity .25s, transform .25s; white-space:nowrap; }
.bb-rail button:hover span, .bb-rail button:focus-visible span { opacity:1; transform:none; }
.bb-rail button i { width:14px; height:2px; background:#2C2F35; border-radius:1px; transition:width .3s cubic-bezier(.2,.7,.2,1), background .3s; }
.bb-rail button.is-on { color:#fff; } .bb-rail button.is-on i { width:26px; background:#34F5C5; }
.bb-rail button:focus-visible { outline:2px solid #34F5C5; outline-offset:4px; }
@media (max-width: 900px) {
.bb-stack.is-live .bb-stack-sticky { grid-template-columns:1fr; grid-template-rows:45% 55%; }
.bb-stack.is-live .bb-iso { --w:min(172px,44vw); margin-top:max(96px,13svh); }
.bb-stack.is-live .bb-top .g { font-size:30px; left:16px; top:14px; }
.bb-stack.is-live .bb-top .nm { font-size:12px; left:16px; bottom:14px; }
.bb-stack.is-live .bb-lid .mk { font-size:44px; }
.bb-stack.is-live .bb-steps { padding:0; }
.bb-stack.is-live .bb-steps > .bb-step { top:0; translate:none; left:20px; right:20px; }
.bb-stack.is-live .bb-step h2 { font-size:clamp(28px,8vw,40px); }
.bb-stack.is-live .bb-step h3 { font-size:clamp(26px,7.4vw,34px); margin-top:10px; }
.bb-stack.is-live .bb-step p { font-size:15px; margin-top:10px; line-height:1.5; }
.bb-stack.is-live .bb-rail { flex-direction:row; top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); right:auto; left:50%; translate:-50% 0; gap:4px; }
.bb-stack.is-live .bb-rail button span { display:none; }
.bb-stack.is-live .bb-rail button { min-height:32px; min-width:26px; justify-content:center; }
.bb-stack.is-live .bb-rail button.is-on i { width:22px; }
}
/* live demos (one per service; the same size and treatment for all six) ----- */
.bb-viz { position:relative; margin-top:20px; height:200px; max-width:480px; border-radius:14px; overflow:hidden; background:#0B0C0E;
background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:14px 14px; background-position:center;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -30px #000; }
.bb-viz::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(52,245,197,.2); pointer-events:none; }
.bb-stack.is-live .bb-viz { height:clamp(170px,26vh,230px); }
@media (max-width: 900px) { .bb-stack.is-live .bb-viz { height:clamp(118px,20svh,160px); margin-top:14px; } }
.bb-viz .feed { position:absolute; inset:14px 14px 0; display:flex; flex-direction:column; gap:8px; -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent); }
.bb-viz .tx { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; background:#121317; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); font:400 12px/1 'Space Mono',monospace; color:#9498A0; flex:none; }
.bb-viz .tx .ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none; background:rgba(52,245,197,.08); color:#34F5C5; box-shadow:inset 0 0 0 1px rgba(52,245,197,.25); }
.bb-viz .tx .ic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bb-viz .tx .who { color:#E9EAEC; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-viz .tx .st { color:#34F5C5; font-size:11px; padding:4px 8px; border-radius:999px; background:rgba(52,245,197,.08); }
.bb-viz .tx.is-new { animation:bbtxin .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bbtxin { from { opacity:0; transform:translateY(-14px) scale(.97); filter:blur(4px); } }
.bb-viz .tx.is-gone { animation:bbtxout .4s ease both; }
@keyframes bbtxout { to { opacity:0; transform:translateY(10px); } }
.bb-viz .frame { position:absolute; left:50%; top:50%; translate:-50% -50%; width:86%; height:78%; border-radius:10px; background:#111216; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px -20px #000; overflow:hidden; animation:bbsquish 7s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes bbsquish { 0%, 30% { width:86%; } 45%, 78% { width:36%; } 93%, 100% { width:86%; } }
.bb-viz .frame .bar { height:22px; display:flex; align-items:center; gap:4px; padding:0 8px; border-bottom:1px solid rgba(255,255,255,.06); }
.bb-viz .frame .bar i { width:6px; height:6px; border-radius:50%; background:#34383E; flex:none; }
.bb-viz .frame .bar b { margin-left:6px; flex:1; height:10px; border-radius:4px; background:#1B1D22; }
.bb-viz .page { container-type:inline-size; padding:10px; display:flex; flex-wrap:wrap; gap:6px; }
.bb-viz .page .nb { flex:1 1 100%; height:8px; border-radius:3px; background:#23262C; }
.bb-viz .page .hb { flex:1 1 100%; height:38px; border-radius:6px; background:linear-gradient(120deg,rgba(52,245,197,.35),rgba(127,215,255,.18)); }
.bb-viz .page .cb { flex:1 1 28%; height:30px; border-radius:6px; background:#1B1D22; }
.bb-viz .page .lab { flex:1 1 100%; font:400 9px/1 'Space Mono',monospace; color:#34F5C5; letter-spacing:.12em; text-transform:uppercase; }
.bb-viz .page .lab::after { content:'desktop'; }
@container (max-width: 170px) { .bb-viz .page .cb { flex-basis:100%; height:12px; } .bb-viz .page .hb { height:44px; } .bb-viz .page .lab::after { content:'phone'; } }
.bb-viz .board { position:absolute; inset:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bb-viz .col { border-radius:10px; background:#101115; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); padding:28px 7px 7px; display:flex; flex-direction:column; gap:6px; position:relative; }
.bb-viz .col::before { content:attr(data-t); position:absolute; top:10px; left:9px; font:400 9.5px/1 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#5C6068; }
.bb-viz .kc { height:28px; flex:none; border-radius:6px; background:#191B20; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); position:relative; }
.bb-viz .kc::before, .bb-viz .kc::after, .bb-viz .mover::before, .bb-viz .mover::after { content:''; position:absolute; left:8px; height:4px; border-radius:2px; background:#2A2D33; }
.bb-viz .kc::before, .bb-viz .mover::before { top:8px; width:55%; }
.bb-viz .kc::after, .bb-viz .mover::after { top:16px; width:35%; }
.bb-viz .mover { position:absolute; top:42px; left:7px; width:calc((100% - 16px) / 3 - 14px); height:28px; border-radius:6px; z-index:2; background:linear-gradient(#173029,#11221E); box-shadow:inset 0 0 0 1px rgba(52,245,197,.5), 0 8px 24px -6px rgba(52,245,197,.35); animation:bbmove 6s cubic-bezier(.2,.7,.2,1) infinite; }
.bb-viz .mover::before { background:#34F5C5; opacity:.8; }
.bb-viz .mover::after { background:#34F5C5; opacity:.4; }
@keyframes bbmove { 0%, 18% { transform:translateX(0); } 30%, 52% { transform:translateX(calc(100% + 22px)); } 64%, 88% { transform:translateX(calc(200% + 44px)); opacity:1; } 96% { transform:translateX(calc(200% + 44px)); opacity:0; } 100% { transform:translateX(0); opacity:0; } }
.bb-viz .rack { position:absolute; inset:14px 14px auto; display:flex; flex-direction:column; gap:6px; }
.bb-viz .unit { height:28px; border-radius:7px; background:#121317; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); display:flex; align-items:center; gap:6px; padding:0 10px; font:400 10.5px/1 'Space Mono',monospace; color:#9498A0; }
.bb-viz .led { width:6px; height:6px; border-radius:50%; background:#34F5C5; box-shadow:0 0 8px #34F5C5; animation:bbled var(--r,1.3s) steps(2) infinite; }
.bb-viz .led.b { background:#7FD7FF; box-shadow:0 0 8px #7FD7FF; }
@keyframes bbled { 50% { opacity:.25; } }
.bb-viz .unit .grow { flex:1; }
.bb-viz .unit .ok { color:#34F5C5; }
.bb-viz .vents { width:40px; height:12px; background:repeating-linear-gradient(90deg,#24272D 0 2px,transparent 2px 5px); }
.bb-viz .spark { position:absolute; left:14px; right:14px; bottom:10px; height:40px; }
.bb-viz .done { position:absolute; inset:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.bb-viz .ptop { display:flex; justify-content:space-between; font:400 11px/1 'Space Mono',monospace; color:#9498A0; }
.bb-viz .prog { height:9px; border-radius:999px; background:#16181C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); overflow:hidden; }
.bb-viz .prog i { display:block; height:100%; width:var(--p,62%); border-radius:inherit; background:#F5B544; transition:width 1.1s cubic-bezier(.2,.7,.2,1), background .5s; }
.bb-viz .done[data-s="go"] .prog i, .bb-viz .done[data-s="live"] .prog i { background:linear-gradient(90deg,#0FB48C,#34F5C5); box-shadow:0 0 16px rgba(52,245,197,.5); }
.bb-viz .tasks { list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; }
.bb-viz .tasks li { display:flex; align-items:center; gap:9px; font-size:13px; color:#9498A0; transition:color .4s; }
.bb-viz .tasks .bx { width:15px; height:15px; flex:none; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); display:grid; place-items:center; transition:background .3s, box-shadow .3s; }
.bb-viz .tasks .bx svg { width:10px; height:10px; stroke:#0C0D0F; stroke-width:3; fill:none; stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset .35s .1s cubic-bezier(.2,.7,.2,1); }
.bb-viz .tasks li.ok { color:#E9EAEC; }
.bb-viz .tasks li.ok .bx { background:#34F5C5; box-shadow:none; }
.bb-viz .tasks li.ok .bx svg { stroke-dashoffset:0; }
.bb-viz .stamp { align-self:flex-start; font:700 11px/1 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:999px; color:#F5B544; background:rgba(245,181,68,.1); transition:color .4s, background .4s; }
.bb-viz .done[data-s="live"] .stamp { color:#34F5C5; background:rgba(52,245,197,.1); }
@media (max-width: 420px) { .bb-viz .tasks li { font-size:12px; } }
.bb-viz .brand { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.bb-viz .brand svg { width:62%; max-width:230px; height:auto; overflow:visible; }
.bb-viz .brand text { font:700 92px 'Space Grotesk',sans-serif; letter-spacing:-4px; }
.bb-viz .brand .stroke { fill:transparent; stroke:#34F5C5; stroke-width:1.2; stroke-dasharray:420; stroke-dashoffset:420; animation:bbdraw 6s cubic-bezier(.2,.7,.2,1) infinite; }
.bb-viz .brand .fill { opacity:0; animation:bbfill 6s ease infinite; }
@keyframes bbdraw { 0% { stroke-dashoffset:420; } 45%, 100% { stroke-dashoffset:0; } }
@keyframes bbfill { 0%, 40% { opacity:0; } 55%, 88% { opacity:1; } 100% { opacity:0; } }
.bb-viz .sw { display:flex; gap:6px; }
.bb-viz .sw i { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.bb-viz .files { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.bb-viz .files span { font:400 10px/1 'Space Mono',monospace; letter-spacing:.08em; color:#9498A0; padding:5px 8px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
/* demos only move while on screen (site.js toggles .is-paused) */
.bb-viz.is-paused, .bb-viz.is-paused * { animation-play-state:paused !important; }
/* the pipe: server -> storage, packets flowing, a pulse as each one lands -----
Three packets per link, a third of a cycle apart (--dur); the destination
flashes on the same beat. Nightcopy on the landing page and in its own hero. */
.bb-node { display:inline-flex; align-items:center; gap:9px; padding:13px 15px; border-radius:10px; background:#15161A; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); font:400 13px/1 'Space Mono',monospace; color:#E9EAEC; white-space:nowrap; }
.bb-node svg { width:16px; height:16px; stroke:#34F5C5; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.bb-pipe { position:relative; height:2px; min-width:48px; background:repeating-linear-gradient(90deg,rgba(52,245,197,.35) 0 6px,transparent 6px 10px); }
.bb-pipe i { position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:#34F5C5; box-shadow:0 0 10px #34F5C5; opacity:0;
animation:bbpacket var(--dur,2.4s) linear infinite; animation-delay:calc(var(--dur,2.4s) / 3 * var(--n,0)); }
@keyframes bbpacket { 0% { left:0; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { left:calc(100% - 10px); opacity:0; } }
.bb-pipe-dest { position:relative; }
.bb-pipe-dest::after { content:''; position:absolute; inset:0; border-radius:10px; box-shadow:0 0 0 1px rgba(52,245,197,.9), 0 0 24px 2px rgba(52,245,197,.45); opacity:0; animation:bbland .8s ease-out 2.2s infinite; }
@keyframes bbland { 0% { opacity:1; } 70%, 100% { opacity:0; } }
.bb-pipecard { position:relative; padding:clamp(24px,3.2vw,38px); border-radius:18px; background:#0E0F12; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -40px #000, 0 0 70px -30px rgba(52,245,197,.25); }
.bb-pipe-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(10px,2vw,22px); }
.bb-shield { position:absolute; left:50%; top:-15px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:#0E0F12; box-shadow:inset 0 0 0 1px rgba(52,245,197,.35); font:400 10.5px/1 'Space Mono',monospace; color:#34F5C5; letter-spacing:.06em; white-space:nowrap; }
.bb-shield svg { width:12px; height:12px; stroke:#34F5C5; fill:none; stroke-width:2; }
.bb-pipe-cap { margin-top:20px; text-align:center; font:400 11.5px/1.5 'Space Mono',monospace; color:#5C6068; }
.bb-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.bb-tags span { font:400 12px/1 'Space Mono',monospace; color:#C9CCD1; padding:9px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.bb-more { display:inline-flex; align-items:center; gap:8px; margin-top:28px; font:700 13px/1 'Space Mono',monospace; color:#34F5C5; }
.bb-more span { transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.bb-more:hover span { transform:translateX(4px); }
.bb-ncsplit { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center; }
@media (max-width: 900px) { .bb-ncsplit { grid-template-columns:1fr; } }
@media (max-width: 420px) { .bb-node { padding:11px; font-size:12px; gap:7px; } .bb-node svg { width:14px; height:14px; } .bb-pipe-row { gap:8px; } }
/* iPhone ----------------------------------------------------------------------
Installed to the home screen, the status bar is translucent: the nav gets a
solid band under it (a border, because #nav's padding is scroll-animated).
The sheet and footer clear the home indicator; landscape keeps off the notch. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#nav { border-top:env(safe-area-inset-top, 0px) solid rgba(10,11,13,0.96); }
.bb-sheet { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.bb-footbar { padding-bottom:calc(36px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 900px) and (orientation: landscape) {
#nav { padding-left:max(28px, env(safe-area-inset-left)) !important; padding-right:max(28px, env(safe-area-inset-right)) !important; }
}
@media (prefers-reduced-motion: reduce) {
.bb-sheen, .bb-pulse::after, .bb-cue span, .bb-cue-inline span::after, .bb-pipe-dest::after, .bb-viz * { animation:none !important; }
.bb-pipe i { animation:none !important; opacity:1; left:45%; }
.bb-pipe i + i { display:none; }
}
/* the pipe inside the Nightcopy hero terminal */
.bb-pipe-mini { margin:2px 0 18px; padding-bottom:18px; border-bottom:1px dashed rgba(255,255,255,0.08); }
.bb-pipe-mini .bb-node { padding:9px 11px; font-size:12px; line-height:1; }
.bb-pipe-mini .bb-pipe i { width:8px; height:8px; top:-3px; }
@media (max-width: 420px) { .bb-pipe-mini .bb-node svg { display:none; } }
/* phones: the pipe runs top to bottom, server above storage */
.bb-ncsplit > * { min-width:0; }
@keyframes bbpacketv { 0% { top:0; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:calc(100% - 10px); opacity:0; } }
@media (max-width: 560px) {
.bb-pipecard .bb-pipe-row { grid-template-columns:1fr; justify-items:center; gap:0; }
.bb-pipecard .bb-pipe { width:2px; min-width:0; height:88px; margin:10px 0; background:repeating-linear-gradient(180deg,rgba(52,245,197,.35) 0 6px,transparent 6px 10px); }
.bb-pipecard .bb-pipe i { left:-4px; top:0; animation-name:bbpacketv; }
.bb-pipecard .bb-node { font-size:13.5px; padding:14px 18px; }
.bb-pipecard { padding-top:34px; }
}