@cosxai/ui 0.1.0

package/src/styles/chrome-frutiger.css

@@ -0,0 +1,364 @@
+/* Frutiger Aero / Glossy Revival chrome — Aero / Vista / iOS 6 /
+   Vision Pro Liquid Glass. Glossy buttons with a two-layer gradient
+   (aqua base + white gloss top half), glass cards with backdrop-
+   filter, soft blue-tinted shadows, outer glow on hover, deep navy
+   ink. Sparkle particles + shimmer sweeps are opt-in via classnames
+   so the chrome only "performs" when you want it to.
+
+   Implementation note: the sky-gradient canvas is applied via the
+   tokens.css `--ck-bg-canvas`. The kit's base layer already does
+   `body { background: var(--ck-bg-canvas); }` so the gradient
+   value carries through. */
+
+/* Body — humanist sans, deep navy, slightly tighter letter-spacing
+   on hero text. */
+html[data-ck-chrome="frutiger"] body {
+  font-family: "Avenir Next", "Calibre", "SF Pro Rounded", var(--ck-font-sans);
+  background-attachment: fixed;
+  letter-spacing: -0.005em;
+}
+
+html[data-ck-chrome="frutiger"] h1,
+html[data-ck-chrome="frutiger"] .ck-h1 {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.05;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
+    0 2px 4px rgba(0, 100, 200, 0.18);
+}
+html[data-ck-chrome="frutiger"] h2,
+html[data-ck-chrome="frutiger"] .ck-h2 {
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+html[data-ck-chrome="frutiger"] h3,
+html[data-ck-chrome="frutiger"] .ck-h3 {
+  font-weight: 600;
+}
+
+/* Dark mode: drop the white text-shadow (would look like a bug
+   against the navy canvas). */
+html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h1,
+html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h2,
+html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h3 {
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+}
+
+/* ---------- Buttons — the signature glossy candy element ---------- */
+html[data-ck-chrome="frutiger"] .ck-btn,
+html[data-ck-chrome="frutiger"] .ck-actionbar-btn {
+  border-radius: 12px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.2),
+    0 2px 8px rgba(0, 100, 200, 0.18);
+  transition:
+    box-shadow 200ms ease,
+    transform 200ms ease,
+    background 200ms ease;
+}
+
+html[data-ck-chrome="frutiger"] .ck-btn--primary,
+html[data-ck-chrome="frutiger"] .ck-actionbar-btn--primary {
+  background:
+    var(--ck-frutiger-gloss),
+    var(--ck-frutiger-btn);
+  color: #FFFFFF;
+  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.45);
+  border-color: rgba(2, 88, 155, 0.7);
+}
+html[data-ck-chrome="frutiger"] .ck-btn--primary:hover:not(:disabled),
+html[data-ck-chrome="frutiger"] .ck-actionbar-btn--primary:hover:not(:disabled) {
+  background:
+    var(--ck-frutiger-gloss),
+    var(--ck-frutiger-btn-hover);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.75),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.2),
+    var(--ck-frutiger-glow);
+}
+
+html[data-ck-chrome="frutiger"] .ck-btn--secondary {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.55) 100%);
+  color: var(--ck-text-primary);
+  border-color: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(8px);
+}
+html[data-ck-chrome="frutiger"] .ck-btn--secondary:hover:not(:disabled) {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.18),
+    var(--ck-frutiger-glow-soft);
+}
+
+html[data-ck-chrome="frutiger"] .ck-btn--ghost {
+  background: rgba(255, 255, 255, 0.0);
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="frutiger"] .ck-btn--ghost:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.35);
+  border-color: rgba(255, 255, 255, 0.45);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    0 1px 4px rgba(0, 100, 200, 0.14);
+}
+
+html[data-ck-chrome="frutiger"] .ck-btn:active:not(:disabled),
+html[data-ck-chrome="frutiger"] .ck-actionbar-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+/* ---------- Inputs — inset glass, glow on focus ---------- */
+html[data-ck-chrome="frutiger"] .ck-input,
+html[data-ck-chrome="frutiger"] .ck-textarea {
+  background:
+    linear-gradient(180deg, rgba(0, 50, 120, 0.06) 0%, rgba(255, 255, 255, 0.6) 18%);
+  border: 1px solid rgba(0, 60, 140, 0.18);
+  border-radius: 12px;
+  box-shadow:
+    inset 0 2px 4px rgba(0, 50, 120, 0.12),
+    0 1px 0 rgba(255, 255, 255, 0.85);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="frutiger"] .ck-input::placeholder,
+html[data-ck-chrome="frutiger"] .ck-textarea::placeholder {
+  color: rgba(56, 80, 122, 0.55);
+}
+html[data-ck-chrome="frutiger"] .ck-input:focus-visible,
+html[data-ck-chrome="frutiger"] .ck-textarea:focus-visible {
+  outline: none;
+  border-color: var(--ck-accent) !important;
+  box-shadow:
+    inset 0 2px 4px rgba(0, 50, 120, 0.12),
+    var(--ck-frutiger-glow-soft) !important;
+}
+
+/* ---------- Cards — glass plate with top highlight + bottom shadow line */
+html[data-ck-chrome="frutiger"] .ck-card {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 18px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.85),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
+    var(--ck-shadow-2);
+  position: relative;
+}
+html[data-ck-chrome="frutiger"] .ck-card__head {
+  background: transparent;
+  border-bottom: 1px solid rgba(0, 50, 120, 0.1);
+  padding: 14px 20px;
+}
+html[data-ck-chrome="frutiger"] .ck-card__foot {
+  background: transparent;
+  border-top: 1px solid rgba(0, 50, 120, 0.08);
+  padding: 12px 20px;
+}
+
+/* ---------- Tags — glossy pills ---------- */
+html[data-ck-chrome="frutiger"] [data-ck-tag] {
+  border-radius: 999px !important;
+  padding: 3px 10px !important;
+  font-weight: 600 !important;
+  font-size: 11px !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.12),
+    0 1px 3px rgba(0, 100, 200, 0.14) !important;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 100%) !important;
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="accent"] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
+    linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%) !important;
+  color: #FFFFFF !important;
+  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.4);
+  border-color: rgba(2, 119, 189, 0.7) !important;
+}
+html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="success"] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
+    linear-gradient(180deg, #DCFF66 0%, #C6FF00 100%) !important;
+  color: #2A3A00 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border-color: rgba(120, 160, 0, 0.5) !important;
+}
+html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="warning"] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
+    linear-gradient(180deg, #FFCA28 0%, #FF9800 100%) !important;
+  color: #4A2400 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+  border-color: rgba(180, 100, 0, 0.5) !important;
+}
+html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="critical"] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
+    linear-gradient(180deg, #FF7B7B 0%, #D32F2F 100%) !important;
+  color: #FFFFFF !important;
+  text-shadow: 0 1px 0 rgba(140, 20, 20, 0.6);
+  border-color: rgba(150, 30, 30, 0.7) !important;
+}
+
+/* ---------- Layout chrome ---------- */
+html[data-ck-chrome="frutiger"] [data-ck-leftnav] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 100%) !important;
+  backdrop-filter: blur(28px) saturate(150%);
+  -webkit-backdrop-filter: blur(28px) saturate(150%);
+  border-right: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: inset -1px 0 0 rgba(0, 50, 120, 0.1),
+    4px 0 24px rgba(0, 100, 200, 0.12);
+}
+
+html[data-ck-chrome="frutiger"] [data-ck-topbar] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%) !important;
+  backdrop-filter: blur(28px) saturate(150%);
+  -webkit-backdrop-filter: blur(28px) saturate(150%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.85),
+    0 2px 12px rgba(0, 100, 200, 0.1);
+}
+
+/* NavItem — glassy pill, accent on active */
+html[data-ck-chrome="frutiger"] [data-ck-navitem] {
+  background: transparent !important;
+  border-radius: 10px !important;
+  font-weight: 500 !important;
+  color: var(--ck-text-secondary) !important;
+  transition: background 200ms ease, box-shadow 200ms ease;
+}
+html[data-ck-chrome="frutiger"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.35) 100%) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 1px 4px rgba(0, 100, 200, 0.12) !important;
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="frutiger"] [data-ck-navitem][data-active="true"] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
+    linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%) !important;
+  color: #FFFFFF !important;
+  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.4) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.18),
+    0 2px 8px rgba(0, 100, 200, 0.28) !important;
+  font-weight: 600 !important;
+}
+
+/* Search trigger */
+html[data-ck-chrome="frutiger"] [data-ck-search-trigger] {
+  background:
+    linear-gradient(180deg, rgba(0, 50, 120, 0.06) 0%, rgba(255, 255, 255, 0.65) 18%) !important;
+  border: 1px solid rgba(0, 60, 140, 0.18) !important;
+  border-radius: 12px !important;
+  box-shadow:
+    inset 0 2px 4px rgba(0, 50, 120, 0.1),
+    0 1px 0 rgba(255, 255, 255, 0.85) !important;
+  color: var(--ck-text-secondary) !important;
+}
+
+/* Action bar */
+html[data-ck-chrome="frutiger"] [data-ck-actionbar] {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%) !important;
+  backdrop-filter: blur(28px) saturate(150%);
+  -webkit-backdrop-filter: blur(28px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 999px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
+    var(--ck-shadow-3);
+}
+
+/* Modal — frosted plate */
+html[data-ck-chrome="frutiger"] [role="dialog"] > div:first-child {
+  background: rgba(135, 206, 235, 0.35);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+}
+html[data-ck-chrome="frutiger"] [role="dialog"] > div > div {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.65) 100%) !important;
+  backdrop-filter: blur(28px) saturate(160%);
+  -webkit-backdrop-filter: blur(28px) saturate(160%);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 22px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
+    var(--ck-shadow-3);
+}
+
+/* Code / pre blocks — semi-transparent glass too */
+html[data-ck-chrome="frutiger"] pre,
+html[data-ck-chrome="frutiger"] code {
+  background: rgba(255, 255, 255, 0.55) !important;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  color: var(--ck-text-primary);
+}
+
+/* ---------- Shimmer sweep — opt-in via .ck-frutiger-shimmer.
+   Diagonal white gradient sweeps across the element every few
+   seconds. Apply to "shiny" elements: progress fills, loading
+   pills, the hero CTA. */
+@keyframes ck-frutiger-shimmer {
+  0% { transform: translateX(-150%) skewX(-20deg); }
+  60%, 100% { transform: translateX(250%) skewX(-20deg); }
+}
+.ck-frutiger-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.ck-frutiger-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(110deg,
+    transparent 0%,
+    transparent 35%,
+    rgba(255, 255, 255, 0.55) 50%,
+    transparent 65%,
+    transparent 100%);
+  animation: ck-frutiger-shimmer 3.4s ease-in-out infinite;
+}
+
+/* Slow pulse for the "aero glow" — opt-in via .ck-frutiger-glow */
+@keyframes ck-frutiger-glow-pulse {
+  0%, 100% { box-shadow: 0 0 16px rgba(79, 195, 247, 0.35); }
+  50%      { box-shadow: 0 0 28px rgba(79, 195, 247, 0.65); }
+}
+.ck-frutiger-glow {
+  animation: ck-frutiger-glow-pulse 4.2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck-frutiger-shimmer::after,
+  .ck-frutiger-glow {
+    animation: none;
+  }
+}

package/src/styles/chrome-neobrutalism.css

@@ -0,0 +1,315 @@
+/* Neobrutalism chrome — component overrides.
+   Token overrides live in tokens.css (palette + typography +
+   shadow primitives). This file ships the signature interactions:
+   2 px black borders everywhere, 4 px offset hard shadows on
+   interactive elements, and the hover-translate effect that
+   pushes elements toward their shadow.
+   Loads alongside index.css; takes effect only when
+   html[data-ck-chrome="neobrutalism"] is set on the root. */
+
+html[data-ck-chrome="neobrutalism"] body {
+  font-weight: 500;
+  font-feature-settings: "kern", "ss01";
+}
+
+/* ===== Buttons ============================================== */
+
+/* Standard neobrut button — thick border, hard offset shadow.
+   On hover the element translates toward its shadow and the
+   shadow shrinks; on active it fully merges with the shadow.
+   This "physical push" reads as the signature interaction. */
+html[data-ck-chrome="neobrutalism"] .ck-btn,
+html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn {
+  border: 2px solid var(--neobrut-ink);
+  border-radius: 5px;
+  box-shadow: 4px 4px 0 0 var(--neobrut-ink);
+  font-family: var(--ck-font-sans);
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: 0;
+  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
+}
+html[data-ck-chrome="neobrutalism"] .ck-btn:hover:not(:disabled),
+html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn:hover:not(:disabled) {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 0 var(--neobrut-ink);
+}
+html[data-ck-chrome="neobrutalism"] .ck-btn:active:not(:disabled),
+html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn:active:not(:disabled) {
+  transform: translate(4px, 4px);
+  box-shadow: 0 0 0 0 var(--neobrut-ink);
+}
+
+html[data-ck-chrome="neobrutalism"] .ck-btn--primary {
+  background: var(--ck-accent);
+  color: #000;
+}
+html[data-ck-chrome="neobrutalism"] .ck-btn--primary:hover:not(:disabled) {
+  background: var(--ck-accent);
+}
+html[data-ck-chrome="neobrutalism"] .ck-btn--secondary,
+html[data-ck-chrome="neobrutalism"] .ck-btn--ghost {
+  background: var(--ck-bg-surface);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="neobrutalism"] .ck-btn--secondary:hover:not(:disabled),
+html[data-ck-chrome="neobrutalism"] .ck-btn--ghost:hover:not(:disabled) {
+  background: var(--ck-bg-surface);
+}
+
+/* ===== Cards ================================================ */
+
+html[data-ck-chrome="neobrutalism"] .ck-card {
+  background: var(--ck-bg-surface);
+  border: 2px solid var(--neobrut-ink);
+  border-radius: 5px;
+  box-shadow: 4px 4px 0 0 var(--neobrut-ink);
+}
+/* No internal dividers + no footer tint — the reference card is
+   one cohesive chunky surface. Header eyebrow / body / footer
+   buttons all sit on the same near-black plane; chunky buttons
+   inside the footer provide their own visual separation via
+   border + shadow. */
+html[data-ck-chrome="neobrutalism"] .ck-card__head {
+  border-bottom: none;
+  padding: 24px 24px 0;
+}
+html[data-ck-chrome="neobrutalism"] .ck-card__body {
+  padding: 16px 24px;
+}
+html[data-ck-chrome="neobrutalism"] .ck-card__foot {
+  border-top: none;
+  background: transparent;
+  padding: 0 24px 24px;
+}
+
+/* ===== Inputs / Textareas =================================== */
+
+html[data-ck-chrome="neobrutalism"] .ck-input,
+html[data-ck-chrome="neobrutalism"] .ck-textarea {
+  border: 2px solid var(--neobrut-ink);
+  border-radius: 5px;
+  font-family: var(--ck-font-sans);
+  font-weight: 500;
+  background: #FFFFFF;
+  color: #000000;
+  transition: box-shadow 120ms ease;
+}
+html[data-ck-theme="dark"][data-ck-chrome="neobrutalism"] .ck-input,
+html[data-ck-theme="dark"][data-ck-chrome="neobrutalism"] .ck-textarea {
+  background: var(--ck-bg-surface);
+  color: var(--ck-text-primary);
+}
+html[data-ck-chrome="neobrutalism"] .ck-input:focus-visible,
+html[data-ck-chrome="neobrutalism"] .ck-textarea:focus-visible {
+  outline: none;
+  border-color: var(--neobrut-ink) !important;
+  box-shadow: 4px 4px 0 0 var(--neobrut-ink);
+}
+
+/* ===== Typography =========================================== */
+
+html[data-ck-chrome="neobrutalism"] h1,
+html[data-ck-chrome="neobrutalism"] .ck-h1 {
+  font-family: var(--ck-font-display);
+  font-weight: 900;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+html[data-ck-chrome="neobrutalism"] h2,
+html[data-ck-chrome="neobrutalism"] .ck-h2 {
+  font-family: var(--ck-font-display);
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  line-height: 1.05;
+}
+html[data-ck-chrome="neobrutalism"] h3,
+html[data-ck-chrome="neobrutalism"] .ck-h3 {
+  font-weight: 700;
+  letter-spacing: -0.005em;
+}
+
+/* Eyebrow / tag — neobrut versions are filled pills, not the
+   tracked uppercase the editorial chrome uses. */
+html[data-ck-chrome="neobrutalism"] .ck-tag {
+  letter-spacing: 0.02em;
+  font-weight: 700;
+}
+
+/* ===== Action bar =========================================== */
+
+html[data-ck-chrome="neobrutalism"] [data-ck-actionbar] {
+  border: 2px solid var(--neobrut-ink);
+  border-radius: 5px;
+  box-shadow: 4px 4px 0 0 var(--neobrut-ink);
+  background: var(--ck-bg-surface);
+}
+
+/* ===== Layout chrome ======================================== */
+
+/* Sidebar + topbar both pin to --ck-bg-surface so the chrome
+   layer is visually unified (light: paper white; dark: dark
+   gray near-black). The canvas behind the main content stays
+   the distinctive hue — cream in light, navy in dark — and the
+   chrome reads as a separate band around it.
+   Topbar gets !important too because <Topbar> sets bg via
+   inline style and we want this override to win across chromes. */
+html[data-ck-chrome="neobrutalism"] [data-ck-leftnav],
+html[data-ck-chrome="neobrutalism"] [data-ck-topbar] {
+  background: var(--ck-bg-surface) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-leftnav] {
+  border-right: 2px solid var(--neobrut-ink);
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-topbar] {
+  border-bottom: 2px solid var(--neobrut-ink);
+}
+
+/* ===== NavItem ============================================== */
+
+/* Active state — accent fill, 2 px black border, hard black
+   offset shadow, black text. The reference site reserves the
+   chunky treatment for the active item; inactive rows are flat
+   text on the sidebar surface so the active one truly stands
+   out. Earlier I made every row chunky and it read noisy. */
+html[data-ck-chrome="neobrutalism"] [data-ck-navitem][data-active="true"] {
+  background: var(--ck-accent) !important;
+  color: #000 !important;
+  border: 2px solid var(--neobrut-ink) !important;
+  box-shadow: 3px 3px 0 0 var(--neobrut-ink) !important;
+  border-radius: 5px !important;
+  font-weight: 700 !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-navitem]:not([data-active="true"]) {
+  background: transparent !important;
+  border: 2px solid transparent !important;
+  font-weight: 600 !important;
+  color: var(--ck-text-primary) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-canvas) !important;
+}
+
+/* ===== Search trigger ====================================== */
+
+html[data-ck-chrome="neobrutalism"] [data-ck-search-trigger] {
+  background: var(--ck-bg-surface) !important;
+  border: 2px solid var(--neobrut-ink) !important;
+  border-radius: 5px !important;
+  box-shadow: 3px 3px 0 0 var(--neobrut-ink) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-search-trigger]:hover {
+  transform: translate(1.5px, 1.5px);
+  box-shadow: 1.5px 1.5px 0 0 var(--neobrut-ink) !important;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+/* ===== Tags ================================================= */
+
+/* Every tag becomes a chunky filled pill with 2 px border + a
+   small hard shadow. Both filled and bare variants get the same
+   physical treatment — neobrutalism doesn't do "bare label".
+   Tone-specific colours come from the inline style on the
+   component; we just add the structural overrides. */
+html[data-ck-chrome="neobrutalism"] [data-ck-tag] {
+  padding: 3px 8px !important;
+  border: 2px solid var(--neobrut-ink) !important;
+  border-radius: 4px !important;
+  box-shadow: 2px 2px 0 0 var(--neobrut-ink) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.04em !important;
+  /* Text on the saturated-tone fill is pure black in both modes —
+     same as main-foreground in the reference. */
+  color: #000 !important;
+}
+
+/* Bare tags (no `filled` prop) — set background from tone via
+   data-tone selector so the chunky pill still pops. */
+html[data-ck-chrome="neobrutalism"] [data-ck-tag]:not([data-filled="true"])[data-tone="accent"] {
+  background: var(--ck-accent) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-tag]:not([data-filled="true"])[data-tone="success"] {
+  background: var(--ck-success) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-tag]:not([data-filled="true"])[data-tone="warning"] {
+  background: var(--ck-warning) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-tag]:not([data-filled="true"])[data-tone="critical"] {
+  background: var(--ck-critical) !important;
+}
+html[data-ck-chrome="neobrutalism"] [data-ck-tag]:not([data-filled="true"])[data-tone="neutral"] {
+  background: var(--ck-bg-surface) !important;
+}
+
+/* ===== Modal backdrop ======================================= */
+
+html[data-ck-chrome="neobrutalism"] [role="dialog"] > div:first-child {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: none;
+}
+/* Modals get a bigger 8 px shadow per brief — heavier than
+   ambient cards because they demand attention. */
+html[data-ck-chrome="neobrutalism"] [role="dialog"] > div > div {
+  border: 2px solid var(--neobrut-ink);
+  border-radius: 8px;
+  box-shadow: 8px 8px 0 0 var(--neobrut-ink);
+}
+
+/* ===== ChromeCard (docs theming page) =======================
+   Any button with aria-pressed (the chrome-picker cards on
+   /theming) — both active and inactive get the chunky 2 px
+   border + offset shadow. Active also gets the accent fill +
+   black-text override. */
+html[data-ck-chrome="neobrutalism"] button[aria-pressed] {
+  border: 2px solid var(--neobrut-ink) !important;
+  border-radius: 6px !important;
+  box-shadow: 4px 4px 0 0 var(--neobrut-ink) !important;
+  transition: transform 120ms ease, box-shadow 120ms ease,
+    background 120ms ease !important;
+}
+html[data-ck-chrome="neobrutalism"] button[aria-pressed]:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 0 var(--neobrut-ink) !important;
+}
+html[data-ck-chrome="neobrutalism"] button[aria-pressed="true"] {
+  background: var(--ck-accent) !important;
+  color: #000 !important;
+}
+html[data-ck-chrome="neobrutalism"] button[aria-pressed="true"] * {
+  color: #000 !important;
+}
+
+/* ===== Marquee animation ==================================== */
+
+@keyframes ck-neobrut-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* ===== Toggle / Checkbox visual touch ======================== */
+
+html[data-ck-chrome="neobrutalism"] [role="checkbox"],
+html[data-ck-chrome="neobrutalism"] [role="switch"] {
+  border-width: 2px !important;
+  border-color: var(--neobrut-ink) !important;
+  border-radius: 4px;
+}
+html[data-ck-chrome="neobrutalism"] [role="switch"] {
+  border-radius: 999px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-ck-chrome="neobrutalism"] .ck-btn,
+  html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn {
+    transition: none;
+  }
+  html[data-ck-chrome="neobrutalism"] .ck-btn:hover:not(:disabled),
+  html[data-ck-chrome="neobrutalism"] .ck-actionbar-btn:hover:not(:disabled) {
+    transform: none;
+    box-shadow: 4px 4px 0 0 var(--neobrut-ink);
+  }
+}