@birdycom/omniaui-blocks 0.11.0 → 0.11.2

package/dist/blocks.css

@@ -718,13 +718,25 @@
 
 @media (min-width: 62rem) { .oc-block-authsplit-brand { display: flex; } }
 
+/* Photo variant: add .oc-block-authsplit-brand--photo and set --oc-authsplit-photo: url(…) on the panel.
+   A dark layer over the photo keeps the logo and quote readable (white text in both themes). */
+.oc-block-authsplit-brand--photo {
+  color: var(--color-white-100);
+  background:
+    linear-gradient(to top, oklch(from var(--color-black-100) l c h / 0.8), oklch(from var(--color-black-100) l c h / 0.15) 55%, oklch(from var(--color-black-100) l c h / 0.5)),
+    var(--oc-authsplit-photo, none) center / cover no-repeat,
+    var(--oc-primary);
+}
+.oc-block-authsplit-brand--photo .oc-block-authsplit-quote { border-inline-start-color: oklch(from var(--color-white-100) l c h / 0.6); }
+
 .oc-block-authsplit-logo { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
 
 .oc-block-authsplit-quote { margin: 0; max-inline-size: 28rem; padding-inline-start: 1.25rem; border-inline-start: 2px solid oklch(from var(--oc-primary-foreground) l c h / 0.55); }
 
-.oc-block-authsplit-quote p { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.55; font-weight: 500; }
+/* color: inherit, so a site-wide p { color } does not turn the quote dark on the panel. */
+.oc-block-authsplit-quote p { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.55; font-weight: 500; color: inherit; }
 
-.oc-block-authsplit-quote footer { font-size: 0.875rem; opacity: 0.75; }
+.oc-block-authsplit-quote footer { font-size: 0.875rem; opacity: 0.75; color: inherit; }
 
 .oc-block-authsplit-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
 
@@ -871,6 +883,9 @@
 
 .oc-block-authcard-fields { display: flex; flex-direction: column; gap: 1rem; }
 
+/* A one-time-code field sits centered under the centered heading: label, cells and hint. */
+.oc-block-authcard-fields .oc-field:has(> .oc-otp) { align-items: center; text-align: center; }
+
 .oc-block-authcard-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
 
 .oc-block-authcard-foot { margin: 0; font-size: 0.875rem; text-align: center; color: var(--oc-muted-foreground); }
@@ -904,12 +919,6 @@
 
 .oc-block-authduo-grid { display: grid; min-block-size: 34rem; }
 
-@container oc-authduo (min-width: 42rem) {
-  .oc-block-authduo-grid { grid-template-columns: 1fr 1fr; }
-  .oc-block-authduo-panel { display: flex; }
-  .oc-block-authduo--reverse .oc-block-authduo-panel { order: 2; }
-}
-
 .oc-block-authduo-panel {
   position: relative;
   display: none;
@@ -936,6 +945,24 @@
 
 .oc-block-authduo-panel--muted { color: var(--oc-foreground); background: var(--oc-muted); }
 
+/* Photo panel: add .oc-block-authduo-panel--photo and set --oc-authduo-photo: url(…) on the panel.
+   A dark layer over the photo keeps the logo and quote readable (white text in both themes). */
+.oc-block-authduo-panel--photo {
+  color: var(--color-white-100);
+  background:
+    linear-gradient(to top, oklch(from var(--color-black-100) l c h / 0.8), oklch(from var(--color-black-100) l c h / 0.15) 55%, oklch(from var(--color-black-100) l c h / 0.5)),
+    var(--oc-authduo-photo, none) center / cover no-repeat,
+    var(--oc-primary);
+}
+
+/* After the base rule: the panel is hidden on narrow containers and shown from 42rem
+   (before the base rule, display: none always won and the panel never showed). */
+@container oc-authduo (min-width: 42rem) {
+  .oc-block-authduo-grid { grid-template-columns: 1fr 1fr; }
+  .oc-block-authduo-panel { display: flex; }
+  .oc-block-authduo--reverse .oc-block-authduo-panel { order: 2; }
+}
+
 .oc-block-authduo-panel > * { position: relative; }
 
 .oc-block-authduo-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: inherit; text-decoration: none; }
@@ -944,9 +971,10 @@
 
 .oc-block-authduo-quote { margin: 0; max-inline-size: 26rem; }
 
-.oc-block-authduo-quote p { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.55; font-weight: 500; }
+/* color: inherit, so a site-wide p { color } does not override the panel's text color. */
+.oc-block-authduo-quote p { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.55; font-weight: 500; color: inherit; }
 
-.oc-block-authduo-quote footer { font-size: 0.8125rem; opacity: 0.8; }
+.oc-block-authduo-quote footer { font-size: 0.8125rem; opacity: 0.8; color: inherit; }
 
 .oc-block-authduo-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
 
@@ -1086,346 +1114,346 @@
 .oc-block-dash-table { inline-size: 100%; }
 
 /* parts/site-about-timeline.css */
-/* File: packages/blocks/src/parts/site-about-timeline.css
-   Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
-   About block: a picture next to the story of the company, ending in the timeline component. */
-
-.oc-block-about {
-  container-type: inline-size;
-  max-inline-size: var(--oc-block-max-width, 1200px);
-  margin-inline: auto;
-  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
-}
-
-.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
-@container (min-width: 52rem) {
-  .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
-  /* Reverse: picture on the right. */
-  .oc-block-about--reverse .oc-block-about-media { order: 2; }
-}
-
-/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
-.oc-block-about-media {
-  position: relative;
-  margin: 0;
-  aspect-ratio: 4 / 3;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-lg, 1.25rem);
-  background:
-    radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
-    linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
-  overflow: hidden;
-}
-.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
-
-/* Floating badge on the picture ("Since 2012"). */
-.oc-block-about-badge {
-  position: absolute;
-  inset: auto auto 1rem 1rem;
-  display: grid;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-md, 0.75rem);
-  background: color-mix(in oklch, var(--oc-background) 85%, transparent);
-  backdrop-filter: blur(10px);
-  color: var(--oc-muted-foreground);
-  font-size: 0.85rem;
-}
-.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
-
-.oc-block-about-title {
-  margin: 0 0 1rem;
-  font-size: clamp(1.75rem, 4vw, 2.6rem);
-  font-weight: 700;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-  text-wrap: balance;
-}
-.oc-block-about-copy > p:not([class]) {
-  margin: 0 0 1rem;
-  color: var(--oc-muted-foreground);
-  line-height: 1.65;
-}
-.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
+/* File: packages/blocks/src/parts/site-about-timeline.css
+   Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
+   About block: a picture next to the story of the company, ending in the timeline component. */
+
+.oc-block-about {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
+@container (min-width: 52rem) {
+  .oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  /* Reverse: picture on the right. */
+  .oc-block-about--reverse .oc-block-about-media { order: 2; }
+}
+
+/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
+.oc-block-about-media {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 4 / 3;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background:
+    radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
+    linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
+  overflow: hidden;
+}
+.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+/* Floating badge on the picture ("Since 2012"). */
+.oc-block-about-badge {
+  position: absolute;
+  inset: auto auto 1rem 1rem;
+  display: grid;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: color-mix(in oklch, var(--oc-background) 85%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
+
+.oc-block-about-title {
+  margin: 0 0 1rem;
+  font-size: clamp(1.75rem, 4vw, 2.6rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-about-copy > p:not([class]) {
+  margin: 0 0 1rem;
+  color: var(--oc-muted-foreground);
+  line-height: 1.65;
+}
+.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
 
 /* parts/site-contact-grid.css */
-/* File: packages/blocks/src/parts/site-contact-grid.css
-   Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
-   Contact grid block: contact info cards (e-mail, phone, address, hours). */
-
-.oc-block-contact {
-  max-inline-size: var(--oc-block-max-width, 1200px);
-  margin-inline: auto;
-  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
-}
-
-.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
-.oc-block-contact-heading {
-  margin: 0 0 0.75rem;
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
-
-.oc-block-contact-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
-  gap: 1.25rem;
-}
-
-.oc-block-contact-card {
-  display: grid;
-  align-content: start;
-  gap: 0.35rem;
-  padding: 1.5rem;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-lg, 1.25rem);
-  background: var(--oc-surface);
-  font-style: normal; /* the address card is an <address> */
-}
-.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
-.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
-
-/* A line of info. As a link it turns to the foreground color on hover. */
-.oc-block-contact-line {
-  margin: 0;
-  color: var(--oc-muted-foreground);
-  font-size: 0.95rem;
-  line-height: 1.55;
-  text-decoration: none;
-  overflow-wrap: anywhere;
-}
-a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
-a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
-
-/* Plain: no card frames, a thin accent line on top of each item. */
-.oc-block-contact--plain .oc-block-contact-card {
-  padding: 1.25rem 0 0;
-  border: 0;
-  border-block-start: 2px solid var(--oc-border-strong);
-  border-radius: 0;
-  background: none;
-}
+/* File: packages/blocks/src/parts/site-contact-grid.css
+   Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
+   Contact grid block: contact info cards (e-mail, phone, address, hours). */
+
+.oc-block-contact {
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
+.oc-block-contact-heading {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
+
+.oc-block-contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1.25rem;
+}
+
+.oc-block-contact-card {
+  display: grid;
+  align-content: start;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  font-style: normal; /* the address card is an <address> */
+}
+.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
+.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
+
+/* A line of info. As a link it turns to the foreground color on hover. */
+.oc-block-contact-line {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
+a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
+
+/* Plain: no card frames, a thin accent line on top of each item. */
+.oc-block-contact--plain .oc-block-contact-card {
+  padding: 1.25rem 0 0;
+  border: 0;
+  border-block-start: 2px solid var(--oc-border-strong);
+  border-radius: 0;
+  background: none;
+}
 
 /* parts/site-faq.css */
-/* File: packages/blocks/src/parts/site-faq.css
-   Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
-   FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
-
-.oc-block-faq {
-  container-type: inline-size;
-  max-inline-size: var(--oc-block-max-width, 1200px);
-  margin-inline: auto;
-  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
-}
-
-.oc-block-faq-inner {
-  display: grid;
-  gap: 2rem;
-  max-inline-size: 48rem;
-  margin-inline: auto;
-}
-
-.oc-block-faq-head { text-align: center; }
-.oc-block-faq-title {
-  margin: 0 0 0.75rem;
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  text-wrap: balance;
-}
-.oc-block-faq-lead {
-  margin: 0;
-  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
-  font-size: 1.05rem;
-  line-height: 1.6;
-}
-
-/* The accordion fills the column (the component default is 46rem wide). */
-.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
-
-.oc-block-faq-more {
-  margin: 0;
-  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
-  text-align: center;
-}
-
-/* Split: head on the left, questions on the right (from 48rem container width). */
-@container (min-width: 48rem) {
-  .oc-block-faq--split .oc-block-faq-inner {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
-    align-items: start;
-    max-inline-size: none;
-  }
-  .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
-  .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
-}
+/* File: packages/blocks/src/parts/site-faq.css
+   Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
+   FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
+
+.oc-block-faq {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+  padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
+}
+
+.oc-block-faq-inner {
+  display: grid;
+  gap: 2rem;
+  max-inline-size: 48rem;
+  margin-inline: auto;
+}
+
+.oc-block-faq-head { text-align: center; }
+.oc-block-faq-title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.oc-block-faq-lead {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  font-size: 1.05rem;
+  line-height: 1.6;
+}
+
+/* The accordion fills the column (the component default is 46rem wide). */
+.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
+
+.oc-block-faq-more {
+  margin: 0;
+  color: var(--oc-block-text-soft, var(--oc-muted-foreground));
+  text-align: center;
+}
+
+/* Split: head on the left, questions on the right (from 48rem container width). */
+@container (min-width: 48rem) {
+  .oc-block-faq--split .oc-block-faq-inner {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    align-items: start;
+    max-inline-size: none;
+  }
+  .oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
+  .oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
+}
 
 /* parts/site-hero-orbit.css */
-/* File: packages/blocks/src/parts/site-hero-orbit.css
-   Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
-   Hero orbit block: hero-code layout where product marks orbit around the code window.
-   Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
-
-/* Square stage; container units (cqi) give the ring radius. */
-.oc-block-orbit-visual {
-  position: relative;
-  container-type: inline-size;
-  display: grid;
-  place-items: center;
-  inline-size: 100%;
-  max-inline-size: 32rem;
-  aspect-ratio: 1;
-  margin-inline: auto;
-}
-
-/* The ring: a dashed circle that slowly turns and carries the marks. */
-.oc-block-orbit-ring {
-  position: absolute;
-  inset: 6%;
-  border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
-  border-radius: 50%;
-  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
-}
-/* Second, inner ring for depth (no marks). */
-.oc-block-orbit-ring::before {
-  content: "";
-  position: absolute;
-  inset: 18%;
-  border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
-  border-radius: 50%;
-}
-
-/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
-.oc-block-orbit-mark {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  translate: -50% -50%;
-  transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
-}
-/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
-.oc-block-orbit-mark > * {
-  display: grid;
-  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
-}
-
-/* Center: the code window (or any visual) above the ring. */
-.oc-block-orbit-center {
-  position: relative;
-  z-index: 1;
-  inline-size: min(100%, 72cqi);
-}
-.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
-
-@keyframes oc-orbit-spin { to { rotate: 360deg; } }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-block-orbit-ring,
-  .oc-block-orbit-mark > * { animation: none; }
-}
+/* File: packages/blocks/src/parts/site-hero-orbit.css
+   Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
+   Hero orbit block: hero-code layout where product marks orbit around the code window.
+   Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
+
+/* Square stage; container units (cqi) give the ring radius. */
+.oc-block-orbit-visual {
+  position: relative;
+  container-type: inline-size;
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* The ring: a dashed circle that slowly turns and carries the marks. */
+.oc-block-orbit-ring {
+  position: absolute;
+  inset: 6%;
+  border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
+  border-radius: 50%;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
+}
+/* Second, inner ring for depth (no marks). */
+.oc-block-orbit-ring::before {
+  content: "";
+  position: absolute;
+  inset: 18%;
+  border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
+  border-radius: 50%;
+}
+
+/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
+.oc-block-orbit-mark {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  translate: -50% -50%;
+  transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
+}
+/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
+.oc-block-orbit-mark > * {
+  display: grid;
+  animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
+}
+
+/* Center: the code window (or any visual) above the ring. */
+.oc-block-orbit-center {
+  position: relative;
+  z-index: 1;
+  inline-size: min(100%, 72cqi);
+}
+.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
+
+@keyframes oc-orbit-spin { to { rotate: 360deg; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-block-orbit-ring,
+  .oc-block-orbit-mark > * { animation: none; }
+}
 
 /* parts/site-portfolio-grid.css */
-/* File: packages/blocks/src/parts/site-portfolio-grid.css
-   Map: section -> head (title left, "all projects" link right) -> card grid -> two-column variant
-   Portfolio grid block: a heading and a grid of project-card components. */
-
-.oc-block-portfolio-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 1rem 2rem;
-  margin-block-end: 2rem;
-}
-.oc-block-portfolio-head .oc-display { margin-block-end: 0; }
-.oc-block-portfolio-lead { margin: 0.75rem 0 0; color: var(--oc-muted-foreground); max-inline-size: 36rem; }
-
-.oc-block-portfolio-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min, 18rem)), 1fr));
-  gap: 1.5rem;
-}
-
-/* Two columns: bigger cards (fewer, more important projects). */
-.oc-block-portfolio--two { --oc-portfolio-min: 26rem; }
+/* File: packages/blocks/src/parts/site-portfolio-grid.css
+   Map: section -> head (title left, "all projects" link right) -> card grid -> two-column variant
+   Portfolio grid block: a heading and a grid of project-card components. */
+
+.oc-block-portfolio-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  margin-block-end: 2rem;
+}
+.oc-block-portfolio-head .oc-display { margin-block-end: 0; }
+.oc-block-portfolio-lead { margin: 0.75rem 0 0; color: var(--oc-muted-foreground); max-inline-size: 36rem; }
+
+.oc-block-portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min, 18rem)), 1fr));
+  gap: 1.5rem;
+}
+
+/* Two columns: bigger cards (fewer, more important projects). */
+.oc-block-portfolio--two { --oc-portfolio-min: 26rem; }
 
 /* parts/site-profile-header.css */
-/* File: packages/blocks/src/parts/site-profile-header.css
-   Map: section -> banner -> bar (overhanging avatar, info, actions) -> tab bar -> compact variant
-   Profile header block: banner, an avatar that overlaps the banner edge, name + meta, actions and link tabs.
-   Banner image: style="--oc-profile-banner: url(...)" (default: an accent gradient). */
-
-.oc-block-profile {
-  container-type: inline-size;
-  max-inline-size: var(--oc-block-max-width, 1200px);
-  margin-inline: auto;
-}
-
-.oc-block-profile-banner {
-  aspect-ratio: 6 / 1;
-  min-block-size: 7rem;
-  border-radius: var(--oc-block-radius, 16px);
-  background:
-    var(--oc-profile-banner, radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)),
-    linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));
-  background-size: cover;
-  background-position: center;
-}
-
-.oc-block-profile-bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 1rem 1.25rem;
-  padding-inline: clamp(1rem, 3vw, 1.5rem);
-}
-
-/* The avatar component, made bigger and pulled up over the banner edge. */
-.oc-block-profile-avatar.oc-avatar {
-  width: 6.5rem;
-  height: 6.5rem;
-  margin-block-start: -3.25rem;
-  border: 4px solid var(--oc-background);
-  font-size: 2rem;
-}
-
-.oc-block-profile-info { flex: 1 1 16rem; min-inline-size: 0; padding-block-start: 0.75rem; }
-.oc-block-profile-name { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
-.oc-block-profile-meta { margin: 0.2rem 0 0; color: var(--oc-muted-foreground); font-size: 0.9rem; }
-.oc-block-profile-bio { margin: 0.5rem 0 0; color: var(--oc-muted-foreground); font-size: 0.95rem; max-inline-size: 44rem; }
-.oc-block-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-
-/* Tab bar: links; the current one gets aria-current="page". Scrolls sideways on small screens. */
-.oc-block-profile-tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin-block-start: 1.25rem;
-  padding-inline: clamp(1rem, 3vw, 1.5rem);
-  border-block-end: 1px solid var(--oc-border);
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.oc-block-profile-tab {
-  padding: 0.75rem 1rem;
-  border-block-end: 2px solid transparent;
-  color: var(--oc-muted-foreground);
-  font-size: 0.92rem;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color var(--oc-transition-fast, 150ms), border-color var(--oc-transition-fast, 150ms);
-}
-.oc-block-profile-tab:hover { color: var(--oc-foreground); }
-.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
-.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-
-/* Compact: low banner and a smaller avatar. */
-.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
-.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar { width: 4.5rem; height: 4.5rem; margin-block-start: -2.25rem; font-size: 1.4rem; }
-
-/* Narrow: the actions go below the info, full width. */
-@container (max-width: 34rem) {
-  .oc-block-profile-actions { flex-basis: 100%; }
-}
+/* File: packages/blocks/src/parts/site-profile-header.css
+   Map: section -> banner -> bar (overhanging avatar, info, actions) -> tab bar -> compact variant
+   Profile header block: banner, an avatar that overlaps the banner edge, name + meta, actions and link tabs.
+   Banner image: style="--oc-profile-banner: url(...)" (default: an accent gradient). */
+
+.oc-block-profile {
+  container-type: inline-size;
+  max-inline-size: var(--oc-block-max-width, 1200px);
+  margin-inline: auto;
+}
+
+.oc-block-profile-banner {
+  aspect-ratio: 6 / 1;
+  min-block-size: 7rem;
+  border-radius: var(--oc-block-radius, 16px);
+  background:
+    var(--oc-profile-banner, radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)),
+    linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));
+  background-size: cover;
+  background-position: center;
+}
+
+.oc-block-profile-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+}
+
+/* The avatar component, made bigger and pulled up over the banner edge. */
+.oc-block-profile-avatar.oc-avatar {
+  width: 6.5rem;
+  height: 6.5rem;
+  margin-block-start: -3.25rem;
+  border: 4px solid var(--oc-background);
+  font-size: 2rem;
+}
+
+.oc-block-profile-info { flex: 1 1 16rem; min-inline-size: 0; padding-block-start: 0.75rem; }
+.oc-block-profile-name { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
+.oc-block-profile-meta { margin: 0.2rem 0 0; color: var(--oc-muted-foreground); font-size: 0.9rem; }
+.oc-block-profile-bio { margin: 0.5rem 0 0; color: var(--oc-muted-foreground); font-size: 0.95rem; max-inline-size: 44rem; }
+.oc-block-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+
+/* Tab bar: links; the current one gets aria-current="page". Scrolls sideways on small screens. */
+.oc-block-profile-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 1.25rem;
+  padding-inline: clamp(1rem, 3vw, 1.5rem);
+  border-block-end: 1px solid var(--oc-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.oc-block-profile-tab {
+  padding: 0.75rem 1rem;
+  border-block-end: 2px solid transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 0.92rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color var(--oc-transition-fast, 150ms), border-color var(--oc-transition-fast, 150ms);
+}
+.oc-block-profile-tab:hover { color: var(--oc-foreground); }
+.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
+.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Compact: low banner and a smaller avatar. */
+.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
+.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar { width: 4.5rem; height: 4.5rem; margin-block-start: -2.25rem; font-size: 1.4rem; }
+
+/* Narrow: the actions go below the info, full width. */
+@container (max-width: 34rem) {
+  .oc-block-profile-actions { flex-basis: 100%; }
+}