@wenathlan/cobaia 0.0.0-stage → 2.0.155

package/Sol/sol.css

@@ -0,0 +1,1944 @@
+@import "tailwindcss";
+
+/* ==========================================================================
+   COBAIA THEME SOL — the single stylesheet of the cobaia content site (the
+   monetization canvas), wearing the TRYLLE RULER with the WINDOWS hands on
+   the controls: the press bounce (scale .7, 100ms), the dtPopIntro mount
+   pop on the nav pins, the 3px ladder indicator, the focus underline on the
+   Windows accent, the Win11 scrollbar, the skeleton shimmer by opacity.
+   cobaia is a CONTENT site: no onboarding, no entry gate — the home renders
+   directly and every page is public; the intro (/intro) is the one bare
+   presentation page outside the window chrome (the family law: every app
+   carries one). Sections: foundation · tokens · light face · base · chrome ·
+   page · components · ad slot · 404 · brand mark · responsive · keyframes ·
+   intro · guards (reduced-motion hard-stop last).
+   doctrine: the trylle canvas #0a0a0b flat (deep #060607) · the 8-step
+   trylle surface ladder #171717→#484848 · ink #fafafa · hairlines ink
+   5%/10% · the ONE Sol accent is the WHITE SUN (pure #ffffff on the dark
+   ladder — the name is Sol but the sun is white, never the amber it once
+   was; the light face carries the graphite contrast pole of the same
+   semantic token) · focus, CTA and every interactive accent answer it ·
+   body 13px weight 450 · Inter Variable everywhere, Geist Mono
+   on labels and numbers · H1 clamp(2.25rem,5vw,3.75rem) tracking -0.02em ·
+   radii .625rem law (inner controls 4) · micro 150ms cubic-bezier(0.22,1,
+   0.36,1) · popintro 800ms · press scale(.7) on the icon button · linear
+   shadows (1px ring + doubling layers) · card hover = one rung up + one
+   shadow rung up · grid entrances stagger 60ms · targets ≥44px · grain
+   feTurbulence .86 / 2 octaves / 6% / soft-light / 140px · no pills · no
+   all-properties transitions · no glow · no scale-from-zero except the
+   windows pin law · scrollbar invisible until hover · selection
+   rgb(76 194 255/38%) · reduced-motion hard stop last. The @theme block
+   mirrors the canonical :root tokens for the Tailwind utility layer.
+   ========================================================================== */
+
+/* the light-theme variant: the theme flips on the html[data-theme] class,
+   not on the OS preference — components use light: utilities */
+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
+
+/* ==========================================================================
+   0. TOKEN FOUNDATION — the one source of truth (the trylle @theme)
+   ========================================================================== */
+@theme {
+  /* ---- type: the trylle ruler ---- */
+  --font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", "Selawik", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", "Geist Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* ---- the trylle canvas and the 8-step surface ladder ---- */
+  --color-canvas: #0a0a0b;
+  --color-deep: #060607;
+  --color-s0: #171717;
+  --color-s1: #1e1e1e;
+  --color-s2: #252525;
+  --color-s3: #2c2c2c;
+  --color-s4: #333333;
+  --color-s5: #3a3a3a;
+  --color-s6: #414141;
+  --color-s7: #484848;
+
+  /* ---- the ink ladder and the hairlines ---- */
+  --color-ink: #fafafa;
+  --color-ink-2: #c3c3c3;
+  --color-ink-3: #999999;
+  --color-hairline: color-mix(in oklab, #fafafa 5%, transparent);
+  --color-hairline-strong: color-mix(in oklab, #fafafa 10%, transparent);
+
+  /* ---- the signal: THE WHITE SUN — one Sol, one light; the name is Sol
+     but the sun is WHITE, never the yellow of the retired identities ---- */
+  --color-signal: #ffffff;
+  --color-signal-strong: #ffffff;
+  --color-signal-2: #c9cdd6;
+  --color-signal-3: #8b909b;
+  --color-signal-ink: #14161a;
+
+  /* ---- the WINDOWS accent: focus, CTA and the interactive voices ---- */
+  --color-win: #4cc2ff;
+  --color-win-ink: #0a0a0a;
+
+  /* ---- focus rides the WINDOWS accent (the family law) ---- */
+  --color-focus: var(--color-win);
+
+  /* ---- radius law: 4/6/8/10(base)/12/16/24 — inner ≤ outer ---- */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+
+  /* ---- motion curves: the micro ruler and the windows press exit ---- */
+  --ease-micro: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.7, 0, 1, 0.5);
+
+  /* ---- animation tokens mapped to the keyframes this file owns ---- */
+  --animate-popintro: dtPopIntro 800ms ease-in-out backwards;
+  --animate-skel: cbSkel 1.8s ease-in-out infinite;
+}
+
+/* ---------- 1. TOKENS — the trylle ruler with the windows hands ------ */
+:root {
+  /* the doctrine tokens as plain literals — the zero-build static face
+     renders these without the tailwind plugin; the @theme above mirrors
+     them for the utility layer */
+  --color-canvas: #0a0a0b;
+  --color-deep: #060607;
+  --color-s0: #171717;
+  --color-s1: #1e1e1e;
+  --color-s2: #252525;
+  --color-s3: #2c2c2c;
+  --color-s4: #333333;
+  --color-s5: #3a3a3a;
+  --color-s6: #414141;
+  --color-s7: #484848;
+  --color-ink: #fafafa;
+  --color-ink-2: #c3c3c3;
+  --color-ink-3: #999999;
+  --color-hairline: color-mix(in oklab, #fafafa 5%, transparent);
+  --color-hairline-strong: color-mix(in oklab, #fafafa 10%, transparent);
+  --color-signal: #ffffff;
+  --color-signal-strong: #ffffff;
+  --color-signal-2: #c9cdd6;
+  --color-signal-3: #8b909b;
+  --color-signal-ink: #14161a;
+  --color-win: #4cc2ff;
+  --color-win-ink: #0a0a0a;
+  --color-focus: var(--color-win);
+
+  /* the canvas + the 8 surface rungs (elevation by color, never by border) */
+  --sol-canvas: var(--color-canvas);
+  --sol-canvas-deep: var(--color-deep);
+  --sol-surface-1: var(--color-s0);
+  --sol-surface-2: var(--color-s1);
+  --sol-surface-3: var(--color-s2);
+  --sol-surface-4: var(--color-s3);
+  --sol-surface-5: var(--color-s4);
+  --sol-surface-6: var(--color-s5);
+  --sol-surface-7: var(--color-s6);
+  --sol-surface-8: var(--color-s7); /* the hover pole */
+
+  /* ink — primary / muted / faint */
+  --sol-ink: var(--color-ink);
+  --sol-muted: var(--color-ink-2);
+  --sol-faint: var(--color-ink-3);
+
+  /* hairlines (5% / 10% ink, re-mixed on the light face) */
+  --sol-hairline: var(--color-hairline);
+  --sol-hairline-strong: var(--color-hairline-strong);
+
+  /* the linear shadows: the 1px ring first, then the doubling layers —
+     one rung deeper per elevation, level 3+ gains the inset highlight */
+  --sol-shadow-1: 0 0 0 1px var(--sol-hairline), 0 1px 1px -0.5px rgb(0 0 0 / 30%);
+  --sol-shadow-2: 0 0 0 1px var(--sol-hairline), 0 1px 1px -0.5px rgb(0 0 0 / 28%), 0 2px 4px -1px rgb(0 0 0 / 26%);
+  --sol-shadow-3:
+    0 0 0 1px var(--sol-hairline), 0 1px 1px -0.5px rgb(0 0 0 / 26%),
+    0 2px 4px -1px rgb(0 0 0 / 24%), 0 4px 8px -2px rgb(0 0 0 / 20%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+  --sol-shadow-4: var(--sol-shadow-3), 0 8px 16px -4px rgb(0 0 0 / 18%);
+  --sol-shadow-5: var(--sol-shadow-4), 0 16px 32px -8px rgb(0 0 0 / 16%);
+  --sol-shadow-6: var(--sol-shadow-5), 0 32px 64px -16px rgb(0 0 0 / 14%);
+  --sol-shadow-7: var(--sol-shadow-6);
+
+  /* typography — the trylle triad: Inter Variable rides every surface,
+     Geist Mono Variable rides micro-labels and every number */
+  --sol-sans:
+    "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", "Selawik", ui-sans-serif, system-ui, sans-serif;
+  --sol-mono: "Geist Mono Variable", "Geist Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --sol-track-display: -0.02em;
+  --sol-track-label: 0.14em;
+  --sol-text-h1: clamp(2.25rem, 5vw, 3.75rem);
+  --sol-text-h2: clamp(1.65rem, 3vw, 2rem);
+  --sol-text-h3: clamp(1.3rem, 2vw, 1.5rem);
+
+  /* radius — the trylle law (base .625rem = --radius-lg) beside the
+     windows control blend: the inner controls wear 4 (the 10), inner ≤ outer */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --sol-radius: var(--radius-lg);
+  --sol-radius-sm: var(--radius-md);
+  --sol-radius-lg: var(--radius-xl);
+  --sol-radius-xl: var(--radius-2xl);
+  --sol-radius-2xl: 16px;
+  --sol-radius-3xl: 24px;
+  --win-radius-ctl: var(--radius-xs);
+
+  /* motion — micro 150ms on the trylle out curve · press 100ms on the
+     windows exit curve (the hands stay; the windows/panels duration goes:
+     a content site opens no windows) */
+  --sol-micro: 150ms;
+  --ease-micro: cubic-bezier(0.22, 1, 0.36, 1);
+  --sol-ease-out: var(--ease-micro);
+  --win-ease-exit: cubic-bezier(0.7, 0, 1, 0.5);
+  --ease-silk: cubic-bezier(0.2, 0.8, 0.2, 1);
+  /* the win shell doctrine tokens (the token union law — the master's
+     numbers): taskbar 48px over the saturate(3) blur(20px) acrylic bed,
+     tint rgb(32 32 32 / 75%) dark / rgb(243 243 243 / 85%) light; the side
+     panel curve cubic-bezier(0.62,0,0.32,1), the start curve
+     cubic-bezier(0.79,0.14,0.15,0.86), the window curve
+     cubic-bezier(0.85,0.14,0.14,0.85) carried as the literal (the union
+     name the family speaks); the close red rgb(232 17 35) as the literal
+     (the site carries no --color-close seat of its own) */
+  --win-taskbar-h: 48px;
+  --win-taskbar-tint: rgb(32 32 32 / 75%);
+  --win-taskbar-filter: saturate(3) blur(20px);
+  --win-ease-panel: cubic-bezier(0.62, 0, 0.32, 1);
+  --win-ease-start: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --win-ease-window: cubic-bezier(0.85, 0.14, 0.14, 0.85);
+  --win-close: rgb(232 17 35);
+
+  /* the interactive accent: the WHITE SUN (the one Sol) governs the focus,
+     the CTA and every interactive voice of the site; the windows accent
+     stays the system voice of the chrome hands */
+  --sol-accent: var(--color-signal);
+  --sol-accent-deep: var(--color-signal-2);
+  --sol-accent-ink: var(--color-signal-ink);
+  --win-accent: var(--color-win);
+  --win-accent-ink: var(--color-win-ink);
+  --sol-focus: var(--color-win);
+
+  /* washes, the bar acrylic and the scrollbar thumb (never the native blue) */
+  --wash: rgb(255 255 255 / 10%);
+  --wash-soft: rgb(255 255 255 / 5%);
+  --bar-acrylic: rgb(10 10 11 / 75%);
+  --bar-hairline: rgb(0 0 0 / 55%);
+  --scroll: rgb(255 255 255 / 45%);
+  --scroll-hover: rgb(255 255 255 / 55%);
+
+  /* the windows grain: one data-uri turbulence, tile 140×140, drawn at
+     6% over the bar acrylic (soft-light) — zero image files; beside it
+     the doctrine mica wall (the token union law: the master's radial bed
+     carries the site canvas now) */
+  --win-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
+  --mica: #202020 radial-gradient(#1a1f35 25%, #202020 100%) no-repeat fixed;
+
+  /* the content measure, the z bands and the shell geometry */
+  --cb-maxw: 1060px;
+
+  /* z bands: atmosphere 0 · content 10 · float 20 · bar 50 · menu 60 ·
+     overlay 100 · dock 150 · modal 200 · toast 300 · tooltip 400 */
+  --z-atmosphere: 0;
+  --z-content: 10;
+  --z-float: 20;
+  --z-bar: 50;
+  --z-menu: 60;
+  --z-overlay: 100;
+  --z-dock: 150;
+  --z-modal: 200;
+  --z-toast: 300;
+  --z-tooltip: 400;
+
+  /* shell geometry: the positioning variables the resize and the re dock
+     write, so the browser relayouts without a re render of the interface */
+  --shell-sidebar: 264px;
+  --shell-sidebar-min: 208px;
+  --shell-topbar: 52px;
+  --shell-gutter: 12px;
+  --shell-handle: 4px;
+  --shell-radius: 8px;
+
+  /* status tones: the outcome voices of the eight state family (the ok and
+     err fills of the success and danger buttons, the semantic accents) */
+  --color-ok: #7fd1a8;
+  --color-warn: #e2c26a;
+  --color-err: #f08a7a;
+  --ok: var(--color-ok);
+  --warn: var(--color-warn);
+  --err: var(--color-err);
+
+  color-scheme: dark;
+  font-size: 16px;
+}
+
+/* the light face: the trylle daylight ladder — the tokens are ready for
+   the toggle even though cobaia ships dark-first today */
+[data-theme="light"] {
+  --color-canvas: #f4f4f5;
+  --color-deep: #ececed;
+  --color-s0: #f4f4f5;
+  --color-s1: #fafafa;
+  --color-s2: #fcfcfc;
+  --color-s3: #fefefe;
+  --color-s4: #ffffff;
+  --color-s5: #f1f1f2;
+  --color-s6: #e5e5e7;
+  --color-s7: #d6d6d9;
+  --color-ink: #1a1a1a;
+  --color-ink-2: #3c3c3c;
+  --color-ink-3: #555555;
+  --color-hairline: color-mix(in oklab, #1a1a1a 8%, transparent);
+  --color-hairline-strong: color-mix(in oklab, #1a1a1a 16%, transparent);
+  --color-signal: #3f434b;
+  --color-signal-strong: #18181b;
+  --color-signal-2: #52565e;
+  --color-signal-3: #8b909b;
+  --color-signal-ink: #fefefe;
+  --color-win: #0067c0;
+  --color-win-ink: #fefefe;
+  --sol-accent: var(--color-signal);
+  --sol-accent-deep: var(--color-signal-2);
+  --sol-accent-ink: var(--color-signal-ink);
+  --wash: rgb(0 0 0 / 8%);
+  --wash-soft: rgb(0 0 0 / 4%);
+  --bar-acrylic: rgb(244 244 245 / 85%);
+  --bar-hairline: rgb(0 0 0 / 10%);
+  --scroll: rgb(0 0 0 / 35%);
+  --scroll-hover: rgb(0 0 0 / 45%);
+  --color-ok: #1e7f4f;
+  --color-warn: #9a6b00;
+  --color-err: #c23b2c;
+  --mica: #f3f3f3 radial-gradient(#eff4f9 75%, #f3f3f3 100%) no-repeat fixed;
+  /* the taskbar tint flips with the face (the token union law: the master's
+     light bed) */
+  --win-taskbar-tint: rgb(243 243 243 / 85%);
+  color-scheme: light;
+}
+
+/* ---------- 1b. SHORT NAMES — the aliases the family law sections compose
+   (they track the :root tokens above, so the light flip follows) ---------- */
+:root {
+  --ink: var(--color-ink);
+  --s1: var(--color-s1);
+}
+
+/* ---------- 2. BASE — the trylle body on the windows controls ---------- */
+* {
+  box-sizing: border-box;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--mica);
+  color: var(--sol-ink);
+  font-family: var(--sol-sans);
+  font-size: 13px;
+  font-weight: 450;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+main {
+  display: block;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  color: var(--sol-ink);
+}
+h1,
+h2,
+h3 {
+  margin: 0 0 0.5em;
+  font-weight: 600;
+  letter-spacing: var(--sol-track-display);
+  line-height: 1.1;
+  color: var(--sol-ink);
+}
+h1 {
+  font-size: var(--sol-text-h1);
+}
+h2 {
+  font-size: var(--sol-text-h2);
+}
+h3 {
+  font-size: var(--sol-text-h3);
+}
+p {
+  margin: 0 0 1em;
+  color: var(--sol-muted);
+}
+strong {
+  color: var(--sol-ink);
+}
+::selection {
+  background: color-mix(in srgb, var(--win-accent) 38%, transparent);
+  color: var(--sol-ink);
+}
+:focus-visible {
+  outline: 2px solid var(--sol-focus);
+  outline-offset: 2px;
+  border-radius: var(--win-radius-ctl);
+}
+kbd,
+code {
+  font-family: var(--sol-mono);
+  font-size: 0.85em;
+  background: var(--sol-surface-2);
+  border: 1px solid var(--sol-hairline);
+  border-radius: 6px;
+  padding: 1px 6px;
+  font-variant-numeric: tabular-nums;
+}
+[hidden] {
+  display: none !important;
+}
+
+/* the win11 scrollbar: invisible until the surface is hovered — lane 10px,
+   thumb 4px, 6px under the pointer (the border trims the paint) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+*:hover,
+*:focus-within {
+  scrollbar-color: var(--scroll) transparent;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  background-clip: padding-box;
+}
+*:hover::-webkit-scrollbar-thumb,
+*:focus-within::-webkit-scrollbar-thumb {
+  background-color: var(--scroll);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scroll-hover);
+  border-width: 2px;
+}
+
+/* ---------- 3. CHROME — the acrylic bar, the nav pins, the footer ---------- */
+.cb-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+/* the skip link: hidden until keyboard focus; chrome answers the windows accent */
+.cb-skip {
+  position: absolute;
+  top: -48px;
+  left: 16px;
+  z-index: var(--z-bar);
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 10px 14px;
+  border-radius: var(--win-radius-ctl);
+  background: var(--win-accent);
+  color: var(--win-accent-ink);
+  font: 600 13px / 1 var(--sol-sans);
+  transition: top var(--sol-micro) var(--sol-ease-out);
+}
+.cb-skip:focus-visible {
+  top: 12px;
+}
+
+/* the top bar: the taskbar acrylic — saturate(3) blur(20px), one black
+   hairline under, flat (zero gradient, zero diffuse shadow) */
+.cb-top {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-bar);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: 6px clamp(16px, 4vw, 32px);
+  width: 100%;
+  border-bottom: 1px solid var(--bar-hairline);
+  background-color: var(--bar-acrylic);
+  background-image: var(--win-noise);
+  background-blend-mode: soft-light;
+  -webkit-backdrop-filter: saturate(3) blur(20px);
+  backdrop-filter: saturate(3) blur(20px);
+}
+
+/* the brand: the mark rides the pin grammar — a 44px wash box (the touch
+   floor), r4, the press bounce lands on the mark itself */
+.cb-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  margin: 0 3px;
+  padding: 4px 10px 4px 4px;
+  border-radius: var(--win-radius-ctl);
+  font-size: 0.95rem;
+  letter-spacing: var(--sol-track-display);
+  transition:
+    background-color 200ms ease,
+    color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-brand:hover {
+  background: var(--wash);
+  color: var(--sol-ink);
+}
+.cb-brand strong {
+  color: var(--sol-ink);
+  font-weight: 600;
+}
+.cb-brand:active .cbMarkSvg {
+  transform: scale(0.7);
+  transition-duration: 100ms;
+  transition-timing-function: ease-in-out;
+}
+.cb-brandtag {
+  color: var(--sol-faint);
+  font: 500 10.5px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+}
+
+/* the section links: the windows pins of the bar — r4 wash boxes with the
+   press bounce, the mount pop and the 3px ladder indicator underneath
+   (0 closed → 6px gray open → 12px windows-accent active); the touch
+   floor rules the pin height */
+.cb-nav {
+  display: flex;
+  gap: clamp(6px, 2vw, 16px);
+}
+.cb-navlink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  margin: 0 3px;
+  padding: 6px 10px;
+  border-radius: var(--win-radius-ctl);
+  color: var(--sol-muted);
+  font: 600 13.5px / 1.4 var(--sol-sans);
+  letter-spacing: 0.01em;
+  transition:
+    background-color 200ms ease,
+    color var(--sol-micro) var(--sol-ease-out),
+    transform 100ms ease-in-out;
+}
+.cb-navlink:hover {
+  background: var(--wash);
+  color: var(--sol-ink);
+  text-decoration: none;
+}
+.cb-navlink:active {
+  transform: scale(0.7);
+}
+.cb-navlink:focus-visible {
+  outline: none;
+  box-shadow: inset 0 -2px 0 var(--sol-focus);
+}
+.cb-navlink::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  width: 12px;
+  height: 3px;
+  border-radius: var(--win-radius-ctl);
+  background: var(--sol-accent);
+  transform: translateX(-50%) scaleX(0);
+  transition:
+    transform 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+}
+.cb-navlink:hover::after {
+  background: #858585;
+  transform: translateX(-50%) scaleX(0.5);
+}
+.cb-navlink[aria-current="page"] {
+  color: var(--sol-ink);
+}
+.cb-navlink[aria-current="page"]::after {
+  background: var(--sol-accent);
+  transform: translateX(-50%) scaleX(1);
+}
+
+.cb-main {
+  flex: 1;
+  width: 100%;
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: 0 clamp(16px, 4vw, 32px);
+}
+
+/* the footer: hairline top, three columns, the family row with the accents */
+.cb-foot {
+  margin-top: clamp(48px, 8vw, 88px);
+  border-top: 1px solid var(--sol-hairline);
+  background: var(--sol-canvas-deep);
+}
+.cb-footgrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 1.2fr);
+  gap: clamp(24px, 4vw, 48px);
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 32px) 20px;
+}
+.cb-footcol {
+  min-width: 0;
+}
+.cb-footabout .cb-foottext {
+  max-width: 42ch;
+}
+.cb-foothead {
+  margin: 0 0 12px;
+  color: var(--sol-faint);
+  font: 600 10.5px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+}
+.cb-foottext {
+  margin: 0;
+  max-width: 42ch;
+  color: var(--sol-muted);
+  font-size: 0.85rem;
+}
+.cb-footlink {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  color: var(--sol-muted);
+  font: 500 13px / 1.5 var(--sol-sans);
+  transition: color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-famgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  gap: 6px 14px;
+}
+.cb-famlink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  color: var(--sol-muted);
+  font: 500 12.5px / 1.5 var(--sol-mono);
+  transition: color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-famlink:hover {
+  color: var(--sol-ink);
+}
+.cb-famdot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--cb-dot, var(--sol-accent));
+}
+.cb-colophon {
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: 14px clamp(16px, 4vw, 32px) 22px;
+  border-top: 1px solid var(--sol-hairline);
+  color: var(--sol-faint);
+  font: 400 11px / 1.6 var(--sol-mono);
+}
+
+/* ---------- 3b. FULLSCREEN LAW — the family fullscreen contract (pull
+   ninety one and ninety eight): the direct url owns the whole viewport —
+   the window chrome exists only inside the os power clip and the os draws
+   that window itself, so the site renders full-bleed with its own voice
+   (the sticky section bar, the page surface, the worked footer); inside
+   the power clip the routed page rides the host window bare. The floating
+   frame, the title bar, the captions and the resize handles the old
+   window carried are retired by this law — the brand mark moved to the
+   section bar pin (cb-brand) and the close door lives on as the /intro
+   route (the relaunch metaphor). ---------- */
+.shell--standalone {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100dvh;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  background-color: var(--sol-canvas);
+}
+
+/* the embedded contract: inside the os power clip the app rides the SAME
+   site surface as the direct url (the window-era law: one design) — the
+   seat fills the window body (the iframe viewport is the 100dvh there)
+   with the sticky section bar, the page surface and the worked footer
+   intact; the window chrome belongs to the os frame drawn around it */
+.shell--embedded {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100dvh;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  background-color: var(--sol-canvas);
+}
+
+/* ---------- 4. PAGE SCAFFOLDING — hero, sections, entrance ---------- */
+.cb-page {
+  padding-bottom: 8px;
+}
+.cb-hero {
+  padding: clamp(48px, 9vw, 110px) 0 clamp(20px, 4vw, 36px);
+}
+.cb-eyebrow {
+  margin: 0 0 16px;
+  color: var(--sol-faint);
+  font: 600 11px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+}
+.cb-title {
+  margin: 0 0 18px;
+  max-width: 22ch;
+}
+.cb-lede {
+  margin: 0;
+  max-width: 58ch;
+  font-size: 1.125rem;
+  color: var(--sol-muted);
+}
+.cb-section {
+  padding: clamp(28px, 5vw, 52px) 0 0;
+}
+.cb-secthead {
+  max-width: 620px;
+  margin-bottom: 24px;
+}
+.cb-secttitle {
+  margin: 0 0 8px;
+  font-size: var(--sol-text-h2);
+}
+.cb-sectlede {
+  margin: 0;
+  color: var(--sol-muted);
+}
+.cb-in {
+  animation: cbRise 640ms var(--sol-ease-out) backwards;
+  animation-delay: calc(var(--cb-d, 0) * 60ms);
+}
+
+/* ---------- 5. COMPONENTS ---------- */
+
+/* buttons: the trylle tone stack over the windows 4px control — the inset
+   top highlight, the inset pool, the 1px ring and the two drop levels;
+   hover raises the alphas, the press dips on the exit curve, the focus
+   underline rides the windows accent, no lift on the wash */
+.cb-btnrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 26px;
+}
+.cb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: var(--win-radius-ctl);
+  background: var(--sol-accent);
+  color: var(--sol-accent-ink);
+  font: 600 14px / 1 var(--sol-sans);
+  cursor: pointer;
+  /* the resting physics: the top highlight of the fluent key and the
+     small drop shadow, both suppressed while pressed */
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 16%),
+    0 1px 2px rgb(0 0 0 / 14%);
+  transition:
+    background-color var(--sol-micro) var(--sol-ease-out),
+    box-shadow var(--sol-micro) var(--sol-ease-out),
+    color var(--sol-micro) var(--sol-ease-out),
+    transform 100ms var(--win-ease-exit);
+}
+.cb-btn:hover {
+  background: color-mix(in oklab, var(--sol-accent) 90%, #ffffff);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 16%),
+    0 1px 2px rgb(0 0 0 / 14%);
+  text-decoration: none;
+}
+.cb-btn:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 16%),
+    inset 0 -2px 0 var(--sol-focus),
+    0 1px 2px rgb(0 0 0 / 14%);
+}
+.cb-btn:active {
+  transform: scale(0.97);
+  box-shadow: inset 0 1px 0 0 rgb(0 0 0 / 8%);
+}
+.cb-btn:disabled,
+.cb-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: var(--sol-shadow-1);
+}
+/* the outcome voices of the eight state family: the same key, the ok and
+   err tones riding the declared variables */
+.cb-btn.success {
+  background: var(--ok);
+  color: #0a0a0a;
+}
+.cb-btn.success:hover {
+  background: color-mix(in srgb, var(--ok) 90%, #fefefe);
+}
+.cb-btn.danger {
+  background: var(--err);
+  color: #0a0a0a;
+}
+.cb-btn.danger:hover {
+  background: color-mix(in srgb, var(--err) 90%, #fefefe);
+}
+/* the loading voice: aria-busy hides the label and spins the honest wheel
+   in place — the layout holds, the action never pretends to be done */
+.cb-btn[aria-busy="true"] {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+.cb-btn[aria-busy="true"]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 15px;
+  height: 15px;
+  margin: -7.5px 0 0 -7.5px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--sol-accent) 35%, transparent);
+  border-top-color: var(--sol-accent);
+  animation: solSpin 700ms linear infinite;
+}
+.cb-btn--ghost {
+  background: var(--wash-soft);
+  color: var(--sol-ink);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 10%),
+    0 0 0 1px var(--sol-hairline-strong),
+    0 1px 2px rgb(0 0 0 / 14%);
+}
+.cb-btn--ghost:hover {
+  background: var(--wash);
+  border-color: transparent;
+  color: var(--sol-ink);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 14%),
+    0 0 0 1px color-mix(in oklab, var(--sol-ink) 16%, transparent),
+    0 1px 2px rgb(0 0 0 / 16%);
+}
+.cb-btn--ghost:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 10%),
+    inset 0 -2px 0 var(--sol-focus),
+    0 0 0 1px var(--sol-hairline-strong),
+    0 1px 2px rgb(0 0 0 / 14%);
+}
+.cb-btn--ghost:active {
+  transform: scale(0.97);
+  box-shadow:
+    inset 0 1px 0 0 rgb(0 0 0 / 8%),
+    0 0 0 1px var(--sol-hairline-strong);
+}
+
+/* the text link voice — the focus underline answers the windows accent */
+.cb-link {
+  color: var(--sol-ink);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--sol-hairline-strong);
+  transition:
+    color var(--sol-micro) var(--sol-ease-out),
+    text-decoration-color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-link:hover {
+  color: var(--sol-accent);
+  text-decoration-color: color-mix(in oklab, var(--sol-accent) 55%, transparent);
+}
+.cb-link:focus-visible,
+.cb-footlink:focus-visible,
+.cb-famlink:focus-visible,
+.cb-postlink:focus-visible {
+  outline: none;
+  color: var(--sol-ink);
+  text-decoration: underline;
+  text-decoration-color: var(--sol-focus);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+/* the honest note: mono, quiet, a hairline left edge */
+.cb-note {
+  margin: 10px 0 0;
+  padding: 8px 12px;
+  border-left: 2px solid var(--sol-hairline-strong);
+  color: var(--sol-faint);
+  font: 400 11.5px / 1.6 var(--sol-mono);
+}
+.cb-note.is-live {
+  border-left-color: color-mix(in oklab, var(--sol-accent) 55%, transparent);
+  color: var(--sol-muted);
+}
+
+/* the empty state: hairline + muted, honest — nothing fakes content; the
+   skeleton shimmer breathes on opacity only (never a transform) */
+.cb-empty {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 10px 18px;
+  border: 1px solid var(--sol-hairline);
+  border-radius: var(--sol-radius-sm);
+  color: var(--sol-faint);
+  font: 400 11.5px / 1.5 var(--sol-mono);
+  letter-spacing: 0.04em;
+}
+.cb-skel {
+  animation: cbSkel 1.8s ease-in-out infinite;
+}
+
+/* cards: surface well, ring shadow, one hover raise — one rung up on the
+   surface ladder and one rung deeper on the shadow ladder */
+.cb-grid {
+  display: grid;
+  gap: 16px;
+}
+.cb-grid--2 {
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+}
+.cb-grid--3 {
+  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+}
+.cb-card {
+  padding: 22px;
+  border-radius: var(--sol-radius-lg);
+  background: var(--sol-surface-1);
+  box-shadow: var(--sol-shadow-1);
+  transition:
+    background-color var(--sol-micro) var(--sol-ease-out),
+    box-shadow var(--sol-micro) var(--sol-ease-out),
+    transform var(--sol-micro) var(--sol-ease-out);
+}
+.cb-card:hover {
+  background: var(--sol-surface-2);
+  box-shadow: var(--sol-shadow-4);
+  transform: translateY(-2px);
+}
+.cb-cardtitle {
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+}
+.cb-cardtext {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--sol-muted);
+}
+.cb-cardmeta {
+  margin: 12px 0 0;
+  color: var(--sol-faint);
+  font: 500 11px / 1.5 var(--sol-mono);
+  letter-spacing: 0.06em;
+}
+
+/* the pricing table: three honest plans, the studio plan leads raised */
+.cb-plans {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+  gap: 16px;
+  align-items: stretch;
+}
+.cb-plan {
+  display: flex;
+  flex-direction: column;
+  padding: 26px 24px 22px;
+  border-radius: var(--sol-radius-lg);
+  background: var(--sol-surface-1);
+  box-shadow: var(--sol-shadow-2);
+}
+.cb-plan--lead {
+  background: var(--sol-surface-2);
+  box-shadow:
+    var(--sol-shadow-3),
+    inset 0 2px 0 var(--sol-accent);
+}
+.cb-planname {
+  margin: 0 0 4px;
+  font: 600 12px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+  color: var(--sol-faint);
+}
+.cb-plan--lead .cb-planname {
+  color: var(--sol-accent);
+}
+.cb-planprice {
+  margin: 0;
+  font-size: 2.2rem;
+  font-weight: 600;
+  letter-spacing: var(--sol-track-display);
+  color: var(--sol-ink);
+  font-variant-numeric: tabular-nums;
+}
+.cb-planper {
+  margin: 0 0 10px;
+  color: var(--sol-faint);
+  font: 500 12px / 1.5 var(--sol-mono);
+}
+.cb-planblurb {
+  margin: 0 0 14px;
+  font-size: 0.9rem;
+  color: var(--sol-muted);
+}
+.cb-planfeats {
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  flex: 1;
+}
+.cb-planfeat {
+  padding: 9px 0;
+  border-top: 1px solid var(--sol-hairline);
+  font-size: 0.86rem;
+  color: var(--sol-muted);
+}
+
+/* the app directory: cards with the one accent dot each */
+.cb-appgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
+  gap: 14px;
+}
+.cb-appcard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 18px 18px 16px;
+  border-radius: var(--sol-radius-lg);
+  background: var(--sol-surface-1);
+  box-shadow: var(--sol-shadow-1);
+  transition:
+    background-color var(--sol-micro) var(--sol-ease-out),
+    box-shadow var(--sol-micro) var(--sol-ease-out),
+    transform var(--sol-micro) var(--sol-ease-out);
+}
+.cb-appcard:hover {
+  background: var(--sol-surface-2);
+  box-shadow: var(--sol-shadow-4);
+  transform: translateY(-2px);
+}
+.cb-appcard:active {
+  transform: translateY(0) scale(0.99);
+  transition-duration: 100ms;
+  transition-timing-function: ease-in-out;
+}
+.cb-apphead {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 4px;
+}
+.cb-appdot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--cb-dot, var(--sol-accent));
+}
+.cb-appname {
+  margin: 0;
+  color: var(--sol-ink);
+  font: 600 14.5px / 1.4 var(--sol-mono);
+  letter-spacing: -0.01em;
+}
+.cb-approle {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--sol-muted);
+}
+.cb-appopen {
+  margin: 10px 0 0;
+  color: var(--sol-faint);
+  font: 500 10.5px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+  transition: color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-appcard:hover .cb-appopen {
+  color: var(--sol-accent);
+}
+
+/* the support channels: one honest card per way to help */
+.cb-channeltext {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+  color: var(--sol-muted);
+}
+
+/* the blog index and the article bodies */
+.cb-postlist {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.cb-postrow {
+  padding: 16px 2px;
+  border-top: 1px solid var(--sol-hairline);
+  transition: background-color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-postrow:hover {
+  background: var(--wash-soft);
+}
+.cb-postdate {
+  margin: 0 0 2px;
+  color: var(--sol-faint);
+  font: 500 11px / 1.5 var(--sol-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.06em;
+}
+.cb-postlink {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  color: var(--sol-ink);
+  font-weight: 600;
+  font-size: 1.05rem;
+  letter-spacing: var(--sol-track-display);
+}
+.cb-postlink:hover {
+  color: var(--sol-accent);
+}
+.cb-postexcerpt {
+  margin: 6px 0 0;
+  max-width: 64ch;
+  font-size: 0.9rem;
+  color: var(--sol-muted);
+}
+.cb-article {
+  margin-top: clamp(30px, 5vw, 48px);
+  padding-top: clamp(18px, 3vw, 28px);
+  border-top: 1px solid var(--sol-hairline-strong);
+}
+.cb-article .cb-secttitle {
+  max-width: 30ch;
+}
+
+/* the display voice of a post title: the trylle display clamp and the
+   -0.02em track — the article opens like the site hero does */
+.cb-posttitle {
+  margin: 0 0 10px;
+  max-width: 30ch;
+  font-size: var(--sol-text-h1);
+  letter-spacing: var(--sol-track-display);
+  line-height: 1.08;
+  color: var(--sol-ink);
+}
+.cb-articlebody {
+  max-width: 65ch;
+}
+.cb-articlebody p {
+  font-size: 0.95rem;
+  line-height: 1.7;
+}
+
+/* ---------- 6. THE AD SLOT — reserved, labeled, honest ----------
+   fixed aspect ratio, the visible "advertisement" label, and while no
+   network id is configured the empty state breathes on the opacity-only
+   skeleton shimmer — no script ever ships in this repository */
+.cb-ads {
+  margin-top: clamp(32px, 5vw, 56px);
+  border-top: 1px solid var(--sol-hairline);
+  padding-top: 14px;
+}
+.cb-adslabel {
+  display: block;
+  margin-bottom: 10px;
+  color: var(--sol-faint);
+  font: 600 10px / 1.4 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-transform: uppercase;
+}
+.cb-adsbox {
+  display: grid;
+  place-items: center;
+  aspect-ratio: var(--cb-ads-ratio, 728 / 90);
+  border: 1px dashed var(--sol-hairline-strong);
+  border-radius: var(--sol-radius);
+  background: var(--sol-surface-1);
+  max-width: 100%;
+}
+.cb-adsnote {
+  color: var(--sol-faint);
+  font: 400 11.5px / 1.5 var(--sol-mono);
+  letter-spacing: 0.04em;
+}
+
+/* ---------- 7. THE 404 ---------- */
+.cb-missing {
+  min-height: 42vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* ---------- 8. THE BRAND MARK MOTION — transform only, guarded ---------- */
+.cbMark {
+  display: inline-block;
+  flex: none;
+  line-height: 0;
+}
+.cbMarkSvg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  shape-rendering: geometricPrecision;
+  transition: transform 260ms var(--sol-ease-out);
+  will-change: transform;
+}
+.cbMark:hover .cbMarkSvg {
+  transform: perspective(340px) rotateX(4deg) rotateY(-5deg) scale(1.02);
+}
+@media (hover: none), (pointer: coarse) {
+  .cbMark:hover .cbMarkSvg {
+    transform: none;
+  }
+}
+
+/* ---------- 9. RESPONSIVE — one design, only the ratio changes ---------- */
+@media (max-width: 760px) {
+  .cb-brandtag {
+    display: none;
+  }
+  .cb-top {
+    flex-wrap: wrap;
+  }
+  .cb-footgrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ---------- 10. KEYFRAMES — the entrances and the windows pop ---------- */
+@keyframes cbRise {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+}
+/* the skeleton shimmer: opacity only — the reserved wells breathe while
+   the real content is not configured yet */
+@keyframes cbSkel {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+/* the honest wheel of the aria-busy loading voice */
+@keyframes solSpin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+/* dtPopIntro — the pin entrance of the windows recipe: 0 → 1.125 (40%) →
+   0.725 (70%) → 1 (the bounce); the bar entries pop on mount, staggered */
+@media (prefers-reduced-motion: no-preference) {
+  .cb-brand {
+    animation: dtPopIntro 800ms ease-in-out backwards;
+  }
+  .cb-navlink {
+    animation: dtPopIntro 800ms ease-in-out backwards;
+  }
+  .cb-navlink:nth-child(2) {
+    animation-delay: 60ms;
+  }
+  .cb-navlink:nth-child(3) {
+    animation-delay: 120ms;
+  }
+  .cb-navlink:nth-child(4) {
+    animation-delay: 180ms;
+  }
+}
+@keyframes dtPopIntro {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.125);
+  }
+  70% {
+    transform: scale(0.725);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ---------- 10b. INTRO — the bare presentation page (/intro) ---------- */
+/* the family grammar's last seat: every app carries an intro; the cobaia
+   one mounts BARE — no window chrome — riding the site voice. The akash
+   splash plays the family recipe (the mark spring on the overshoot curve
+   cubic-bezier(.34,1.56,.64,1), the leave cubic-bezier(0.76,0,0.24,1) at
+   0.8s), the landing rides the cb-in stagger under the second, the layers
+   ride the surface-ladder bands (canvas → s0 → deep), the door panes ride
+   the silk law (layered shadows, the inset highlight, the silk curve).
+   Reduced motion stills the splash and the entrances; reduced transparency
+   lands the bar on the solid floor. */
+
+/* the bare page: the canvas floor, no frame, no window padding */
+.cb-intro {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+  background: var(--sol-canvas);
+}
+
+/* the measure of the bare page: the site measure without the window gutters */
+.cb-introwrap {
+  width: 100%;
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: 0 clamp(16px, 4vw, 32px);
+  box-sizing: border-box;
+}
+
+/* the intro bar: the same acrylic voice as the site bar, unframed */
+.cb-introbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-bar);
+  border-bottom: 1px solid var(--bar-hairline);
+  background-color: var(--bar-acrylic);
+  background-image: var(--win-noise);
+  background-blend-mode: soft-light;
+  -webkit-backdrop-filter: saturate(3) blur(20px);
+  backdrop-filter: saturate(3) blur(20px);
+}
+.cb-introbar__in {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  max-width: var(--cb-maxw);
+  margin: 0 auto;
+  padding: 10px clamp(16px, 4vw, 32px);
+}
+.cb-introbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+.cb-introbar__word {
+  color: var(--sol-ink);
+  font: 600 13px / 1 var(--sol-sans);
+  letter-spacing: var(--sol-track-display);
+}
+.cb-introbar__spacer {
+  flex: 1;
+}
+.cb-introbar__nav {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.cb-introdoor {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 12px;
+  border-radius: var(--win-radius-ctl);
+  color: var(--sol-muted);
+  font: 600 13px / 1 var(--sol-sans);
+  transition:
+    background-color var(--sol-micro) var(--sol-ease-out),
+    color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-introdoor:hover {
+  background: var(--wash);
+  color: var(--sol-ink);
+  text-decoration: none;
+}
+.cb-introdoor:active {
+  background: var(--wash-soft);
+}
+.cb-introdoor:focus-visible {
+  outline: none;
+  box-shadow: inset 0 -2px 0 var(--sol-focus);
+}
+
+/* the hero band: the canvas floor, the mark opens the stagger */
+.cb-introhero {
+  padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px);
+}
+.cb-introhero__mark {
+  display: inline-grid;
+  place-items: center;
+  margin-bottom: 26px;
+}
+
+/* the ladder bands: the layers step the surface ladder — canvas (hero) →
+   the s0 rung (plans) → the deep floor (doors); hairlines close each band */
+.cb-introband {
+  border-top: 1px solid var(--sol-hairline);
+  padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
+}
+.cb-introband--s1 {
+  background: var(--sol-surface-1);
+}
+.cb-introband--deep {
+  background: var(--sol-canvas-deep);
+  border-bottom: 1px solid var(--sol-hairline);
+}
+
+/* the door panes: the silk law — the inset highlight, the layered drop
+   shadows, the silk curve on the transitions, one hover raise */
+.cb-introdoorgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+  gap: 16px;
+  margin-top: 24px;
+}
+.cb-intropane {
+  display: flex;
+  flex-direction: column;
+  padding: 22px;
+  border: 1px solid var(--sol-hairline-strong);
+  border-radius: var(--sol-radius-lg);
+  background: var(--sol-surface-2);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 5%),
+    0 1px 2px rgb(0 0 0 / 28%),
+    0 10px 28px -18px rgb(0 0 0 / 55%);
+  transition:
+    background-color 140ms var(--ease-silk),
+    box-shadow 140ms var(--ease-silk),
+    transform 140ms var(--ease-silk);
+}
+.cb-intropane:hover {
+  background: var(--sol-surface-3);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 6%),
+    0 2px 4px rgb(0 0 0 / 28%),
+    0 16px 36px -18px rgb(0 0 0 / 50%);
+  transform: translateY(-2px);
+}
+.cb-intropane__text {
+  margin: 6px 0 16px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--sol-muted);
+}
+.cb-intropane__door {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  align-self: flex-start;
+  min-height: 44px;
+  margin-top: auto;
+  padding: 0 16px;
+  border-radius: var(--win-radius-ctl);
+  background: var(--wash-soft);
+  color: var(--sol-ink);
+  font: 600 14px / 1 var(--sol-sans);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 10%),
+    0 0 0 1px var(--sol-hairline-strong),
+    0 1px 2px rgb(0 0 0 / 14%);
+  transition:
+    background-color 140ms var(--ease-silk),
+    color 140ms var(--ease-silk),
+    box-shadow 140ms var(--ease-silk);
+}
+.cb-intropane__door:hover {
+  background: var(--wash);
+  color: var(--sol-ink);
+  text-decoration: none;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 14%),
+    0 0 0 1px color-mix(in oklab, var(--sol-ink) 16%, transparent),
+    0 2px 4px rgb(0 0 0 / 16%);
+}
+.cb-intropane__door:active {
+  transform: scale(0.97);
+  box-shadow:
+    inset 0 1px 0 rgb(0 0 0 / 8%),
+    0 0 0 1px var(--sol-hairline-strong);
+}
+.cb-intropane__door:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 10%),
+    inset 0 -2px 0 var(--sol-focus),
+    0 0 0 1px var(--sol-hairline-strong);
+}
+.cb-intropane__glyph {
+  flex: none;
+  color: var(--sol-accent);
+  transition: transform 140ms var(--ease-silk);
+}
+.cb-intropane__door:hover .cb-intropane__glyph {
+  transform: translateX(2px);
+}
+
+/* the plans door line: the one text link under the table */
+.cb-introdoorline {
+  margin: 22px 0 0;
+}
+
+/* the footer strip: hairline top, the door rows and the legal line */
+.cb-introfoot {
+  margin-top: auto;
+  border-top: 1px solid var(--sol-hairline);
+  background: var(--sol-canvas-deep);
+}
+.cb-introfoot__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 18px;
+}
+.cb-introfoot__door {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  color: var(--sol-muted);
+  font: 600 13px / 1 var(--sol-sans);
+  transition: color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-introfoot__door:hover {
+  color: var(--sol-ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--sol-hairline-strong);
+}
+.cb-introfoot__fam {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--sol-muted);
+  font: 500 12.5px / 1 var(--sol-mono);
+  transition: color var(--sol-micro) var(--sol-ease-out);
+}
+.cb-introfoot__fam:hover {
+  color: var(--sol-ink);
+}
+.cb-introfoot__dot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--cb-dot, var(--sol-accent));
+}
+.cb-introfoot__legal {
+  margin: 18px 0 0;
+  padding: 14px 0 22px;
+  border-top: 1px solid var(--sol-hairline);
+  color: var(--sol-faint);
+  font: 400 11px / 1.6 var(--sol-mono);
+  letter-spacing: 0.02em;
+}
+.cb-introfoot .cb-eyebrow {
+  margin: 8px 0;
+}
+.cb-introfoot .cb-introwrap {
+  padding-top: 26px;
+}
+
+/* the splash: the akash floor — the deep canvas + the grain, the mark
+   springing on the overshoot curve, the name rising with the same spring,
+   the role fading late; the leave slides the whole overlay up in 0.8s on
+   the leave curve and reveals the landing beneath. No loading dots. */
+.cb-splash {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: grid;
+  place-items: center;
+  background: var(--sol-canvas-deep);
+  cursor: pointer;
+}
+.cb-splash::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--win-noise);
+  mix-blend-mode: soft-light;
+  pointer-events: none;
+}
+.cb-splash__stage {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 18px;
+  padding: 0 24px;
+  text-align: center;
+}
+.cb-splash__mark {
+  display: grid;
+  place-items: center;
+  animation: cbSplashSpring 600ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+}
+.cb-splash__name {
+  margin: 0;
+  color: var(--sol-ink);
+  font: 800 clamp(2rem, 5vw, 3rem) / 1.05 var(--sol-sans);
+  letter-spacing: var(--sol-track-display);
+  animation: cbSplashRise 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 140ms backwards;
+}
+.cb-splash__role {
+  margin: 0;
+  color: var(--sol-muted);
+  font: 400 12px / 1.6 var(--sol-sans);
+  letter-spacing: var(--sol-track-label);
+  text-transform: lowercase;
+  animation: cbSplashFade 300ms var(--sol-ease-out) 400ms backwards;
+}
+.cb-splash__skip {
+  position: absolute;
+  bottom: 22px;
+  left: 0;
+  right: 0;
+  color: var(--sol-faint);
+  font: 500 11px / 1 var(--sol-mono);
+  letter-spacing: var(--sol-track-label);
+  text-align: center;
+  text-transform: lowercase;
+  animation: cbSplashFade 300ms var(--sol-ease-out) 600ms backwards;
+}
+.cb-splash[data-leaving="true"] {
+  animation: cbSplashLeave 800ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
+}
+
+@keyframes cbSplashSpring {
+  from {
+    opacity: 0;
+    transform: scale(0.72);
+  }
+}
+@keyframes cbSplashRise {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+@keyframes cbSplashFade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes cbSplashLeave {
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+/* the intro's own stops: reduced motion stills the splash and the entrances
+   (the splash never mounts under the preference — the belt here is the
+   second one), reduced transparency lands the bar on the solid floor */
+@media (prefers-reduced-motion: reduce) {
+  .cb-splash,
+  .cb-splash__mark,
+  .cb-splash__name,
+  .cb-splash__role,
+  .cb-splash__skip {
+    animation: none !important;
+  }
+  .cb-intropane,
+  .cb-intropane__door,
+  .cb-introdoor,
+  .cb-introfoot__door,
+  .cb-introfoot__fam,
+  .cb-intropane__glyph {
+    transition: none !important;
+  }
+  .cb-intropane:hover,
+  .cb-intropane__door:active,
+  .cb-intropane__door:hover .cb-intropane__glyph {
+    transform: none;
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .cb-introbar {
+    background-color: #0a0a0b;
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .cb-splash::after {
+    display: none;
+  }
+}
+
+/* ---------- 11. GUARDS — the house stops (reduced motion WINS, last) ---------- */
+@media (prefers-reduced-transparency: reduce) {
+  /* the solid floors: the bar acrylic lands on a rung, the blur dies */
+  .cb-top {
+    background-color: #0a0a0b;
+    background-image: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cb-in,
+  .cb-brand,
+  .cb-navlink,
+  .cb-skel {
+    animation: none !important;
+  }
+  .cb-skip,
+  .cb-brand,
+  .cb-navlink,
+  .cb-btn,
+  .cb-card,
+  .cb-appcard,
+  .cb-appopen,
+  .cb-postrow,
+  .cb-footlink,
+  .cb-famlink,
+  .cb-link,
+  .cbMarkSvg {
+    transition: none !important;
+  }
+  .cb-navlink:active,
+  .cb-brand:active .cbMarkSvg,
+  .cb-btn:active,
+  .cb-appcard:active {
+    transform: none;
+  }
+  .cbMark:hover .cbMarkSvg {
+    transform: none;
+  }
+  html {
+    scroll-behavior: auto;
+  }
+}
+/* the hard stop: every animation and transition dies — this block is LAST
+   so it wins every earlier duration in the file */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ==========================================================================
+   the family motion law: the duty cycled loops, the reduced motion and the
+   pause hook. the loops ride the stepped keyframes so the compositor draws
+   a handful of frames per cycle instead of repainting every vsync, the
+   offscreen surfaces pause through the anim paused attribute, and the
+   reduced motion preference zeroes every custom animation.
+   ========================================================================== */
+
+@keyframes skeletonStep {
+  0% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.45;
+  }
+}
+
+@keyframes pulseStep {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.06);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pingStep {
+  0% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0;
+    transform: scale(2.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(2.2);
+  }
+}
+
+.anim-skeleton {
+  animation: skeletonStep 2.4s steps(8, end) infinite;
+}
+.anim-pulse {
+  animation: pulseStep 2s steps(8, end) infinite;
+}
+.anim-ping {
+  animation: pingStep 2s steps(8, end) infinite;
+}
+
+[data-anim-paused] .anim-skeleton,
+[data-anim-paused] .anim-pulse,
+[data-anim-paused] .anim-ping,
+[data-anim-paused] [class*="anim-"] {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .anim-skeleton,
+  .anim-pulse,
+  .anim-ping,
+  [class*="anim-"] {
+    animation: none;
+  }
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ==========================================================================
+   the silk surface law: the panels, the buttons and the inputs of the
+   family ride the layered shadows with the inset highlight, the silk curve
+   for the transitions, and the guards of the reduced transparency, so the
+   app chrome renders exactly like the design showcase of the os app.
+   ========================================================================== */
+
+.panel-silk {
+  border: 1px solid rgb(255 255 255 / 8%);
+  background: color-mix(in srgb, var(--s1) 86%, transparent);
+  border-radius: var(--shell-radius);
+  padding: 14px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 5%),
+    0 1px 2px rgb(0 0 0 / 28%),
+    0 10px 28px -18px rgb(0 0 0 / 55%);
+  backdrop-filter: blur(14px) saturate(120%);
+  -webkit-backdrop-filter: blur(14px) saturate(120%);
+}
+
+.silk-btn {
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 10px;
+  min-height: 44px;
+  padding: 0 14px;
+  color: var(--ink);
+  background: rgb(255 255 255 / 5%);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 6%),
+    0 1px 2px rgb(0 0 0 / 30%);
+  transition:
+    transform 140ms var(--ease-silk),
+    box-shadow 140ms var(--ease-silk),
+    opacity 140ms var(--ease-silk),
+    background-color 140ms var(--ease-silk),
+    border-color 140ms var(--ease-silk);
+}
+
+.silk-btn:hover {
+  background: rgb(255 255 255 / 9%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 6%),
+    0 2px 4px rgb(0 0 0 / 28%),
+    0 8px 20px -10px rgb(0 0 0 / 48%);
+}
+
+.silk-btn:active {
+  transform: translateY(1px);
+}
+
+.silk-btn:focus-visible,
+.silk-input:focus-visible,
+.silk-area:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.silk-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
+}
+
+.silk-input,
+.silk-area {
+  width: 100%;
+  color: var(--ink);
+  background: rgb(0 0 0 / 26%);
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: 10px;
+  padding: 11px 12px;
+  font: inherit;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
+  transition:
+    border-color 140ms var(--ease-silk),
+    background-color 140ms var(--ease-silk);
+}
+
+.silk-area {
+  resize: vertical;
+}
+
+.silk-input:hover,
+.silk-area:hover {
+  border-color: rgb(255 255 255 / 18%);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .panel-silk {
+    background: var(--s1);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}