@clicoh/orion-library 1.2.0-beta.2 → 1.2.0-beta.21

package/assets/css/expresivo.css

@@ -0,0 +1,1069 @@
+/*
+ * Orion expressive layer. Opt-in: the consumer imports this file after
+ * base.css and wraps its app in <ExpScope>.
+ *
+ * Every skin rule starts with :root:has(.exp-scope), so it applies only while
+ * an ExpScope is mounted, and also reaches content rendered in portals.
+ * Rules target core parts through [data-orion-part], never through the
+ * core's Tailwind classes, and stay unlayered so they win over utilities.
+ *
+ * The .exp-* classes belong to Exp* components, which only draw their full
+ * markup inside an ExpScope, so those rules need no scope prefix.
+ */
+
+.exp-scope {
+  display: contents;
+}
+
+/* Tokens ---------------------------------------------------------------- */
+
+:root:has(.exp-scope) {
+  --exp-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --exp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --exp-accent: var(--color-lavender);
+  --exp-accent-soft: var(--color-lavender-1);
+  --exp-spark: #8a5cf5;
+
+  --exp-field-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
+  --exp-field-bg-hover: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
+  --exp-field-line: var(--color-gray-5);
+  --exp-field-ink: var(--color-black);
+  --exp-field-label: var(--color-gray-1);
+  --exp-field-icon: #3a3550;
+  --exp-field-drop: rgba(34, 35, 41, 0.07);
+  --exp-field-glow: rgba(106, 93, 249, 0.22);
+  --exp-field-popover: var(--color-white);
+  --exp-field-gloss: rgba(255, 255, 255, 0.9);
+
+  --exp-key-edge: #4a3fd0;
+  --exp-key-drop: rgba(74, 63, 208, 0.28);
+  --exp-key-glow: rgba(200, 84, 228, 0.55);
+  --exp-key-white-face: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
+  --exp-key-white-face-hover: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
+  --exp-key-white-edge: var(--color-gray-4);
+  --exp-key-white-edge-hover: #c9c3fd;
+  --exp-key-disabled-face: var(--color-gray-4);
+  --exp-key-disabled-edge: var(--color-gray-3);
+
+  --exp-row-bg: var(--color-white);
+  --exp-row-bg-hover: var(--color-lavender-3);
+  --exp-row-edge: var(--color-gray-5);
+  --exp-row-edge-hover: #c9c3fd;
+
+  --exp-nav-glow: rgba(106, 93, 249, 0.22);
+
+  --exp-hero-dots: rgba(106, 93, 249, 0.14);
+  --exp-hero-bg: linear-gradient(135deg, #f8f7ff 0%, #ffffff 55%, #f8f7ff 100%);
+  --exp-hero-edge: #e1dffe;
+  --exp-hero-drop: 0 6px 20px rgba(106, 93, 249, 0.08);
+
+  --exp-card-drop: 0 4px 16px rgba(34, 35, 41, 0.05);
+  --exp-card-bg: var(--color-white);
+  --exp-card-edge: var(--color-gray-5);
+  --exp-card-band: linear-gradient(
+    90deg,
+    #f7882f 0%,
+    #b07fd0 28%,
+    var(--color-lavender) 55%,
+    var(--color-violet) 100%
+  );
+}
+
+:root.dark:has(.exp-scope) {
+  --exp-accent: var(--color-lavender-dark);
+  --exp-accent-soft: var(--color-lavender-dark-1);
+
+  --exp-field-bg: linear-gradient(180deg, #2e3036 0%, #27282e 100%);
+  --exp-field-bg-hover: linear-gradient(180deg, #33343c 0%, #2b2c33 100%);
+  --exp-field-line: #3a3b42;
+  --exp-field-ink: var(--color-white);
+  --exp-field-label: var(--color-gray-2);
+  --exp-field-icon: #c9c9cf;
+  --exp-field-drop: rgba(0, 0, 0, 0.45);
+  --exp-field-glow: rgba(137, 128, 255, 0.35);
+  --exp-field-popover: var(--color-black);
+  --exp-field-gloss: rgba(255, 255, 255, 0.06);
+
+  --exp-key-edge: #3a31a8;
+  --exp-key-drop: rgba(0, 0, 0, 0.55);
+  --exp-key-glow: rgba(200, 84, 228, 0.45);
+  --exp-key-white-face: linear-gradient(180deg, #f6f6f6 0%, #e9eaea 100%);
+  --exp-key-white-face-hover: linear-gradient(180deg, #ffffff 0%, #f0effe 100%);
+  --exp-key-white-edge: var(--color-gray-1);
+  --exp-key-white-edge-hover: var(--color-lavender);
+  --exp-key-disabled-face: var(--color-gray-dark-1);
+  --exp-key-disabled-edge: var(--color-gray-dark-2);
+
+  --exp-row-bg: var(--color-black);
+  --exp-row-bg-hover: #2a2747;
+  --exp-row-edge: var(--color-gray-1);
+  --exp-row-edge-hover: #4a3fd0;
+
+  --exp-nav-glow: rgba(137, 128, 255, 0.35);
+
+  --exp-hero-dots: rgba(137, 128, 255, 0.16);
+  --exp-hero-bg: #1b1c21;
+  --exp-hero-edge: #303a54;
+  --exp-hero-drop: none;
+
+  --exp-card-drop: none;
+  --exp-card-bg: var(--color-black);
+  --exp-card-edge: var(--color-gray-1);
+}
+
+/* Motion ---------------------------------------------------------------- */
+
+@keyframes exp-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes exp-swing {
+  0%,
+  100% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+}
+
+@keyframes exp-blink {
+  0%,
+  92%,
+  100% {
+    transform: scaleY(1);
+  }
+  96% {
+    transform: scaleY(0.1);
+  }
+}
+
+@keyframes exp-scan {
+  0%,
+  100% {
+    transform: translateX(-2px);
+  }
+  50% {
+    transform: translateX(2px);
+  }
+}
+
+@keyframes exp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes exp-enter {
+  0%,
+  100% {
+    transform: translateX(-2px);
+    opacity: 1;
+  }
+  50% {
+    transform: translateX(4px);
+    opacity: 0.55;
+  }
+}
+
+@keyframes exp-sweep {
+  0% {
+    transform: translateX(-120%) skewX(-20deg);
+  }
+  100% {
+    transform: translateX(420%) skewX(-20deg);
+  }
+}
+
+@keyframes exp-spark {
+  0% {
+    left: 0%;
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  62% {
+    left: 100%;
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes exp-hint-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  70%,
+  100% {
+    transform: scale(1.9);
+    opacity: 0;
+  }
+}
+
+.exp-float {
+  animation: exp-float 3.2s ease-in-out infinite;
+}
+
+.exp-hint-pulse {
+  animation: exp-hint-pulse 2.4s ease-out infinite;
+}
+
+.exp-hang {
+  transform-origin: top center;
+  animation: exp-swing 3.2s ease-in-out infinite;
+}
+
+/* Page hero (ExpPageHero): a band only on wide screens ------------------ */
+
+@media (min-width: 64rem) {
+  .exp-hero {
+    border: 1px solid var(--exp-hero-edge);
+    border-radius: 1rem;
+    background:
+      radial-gradient(var(--exp-hero-dots) 1px, transparent 1.4px) 0 0 / 14px
+        14px,
+      var(--exp-hero-bg);
+    box-shadow: var(--exp-hero-drop);
+  }
+}
+
+/* Glyphs (ExpLensIcon and the glyphs inside Exp buttons) ---------------- */
+
+.exp-lens-lid {
+  transform-origin: 14px 14px;
+  animation: exp-blink 4.5s ease-in-out infinite;
+}
+
+.exp-lens-pupil {
+  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.exp-rotor {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.exp-enter-arrow {
+  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.exp-arrow {
+  transition: transform 240ms var(--exp-ease-spring);
+}
+
+.exp-glyph--busy .exp-lens-lid,
+.exp-glyph--disabled .exp-lens-lid {
+  animation: none;
+}
+
+.exp-glyph--busy .exp-lens-pupil {
+  animation: exp-scan 1.1s ease-in-out infinite;
+}
+
+.exp-glyph--busy .exp-rotor {
+  animation: exp-spin 1s linear infinite;
+}
+
+.exp-glyph--busy .exp-enter-arrow {
+  animation: exp-enter 900ms ease-in-out infinite;
+}
+
+/* ExpKeyButton ---------------------------------------------------------- */
+
+.exp-key {
+  --exp-key-face: linear-gradient(
+    160deg,
+    #7466fb 0%,
+    #7a59f2 50%,
+    #9b4fe8 100%
+  );
+  --exp-key-face-hover: linear-gradient(
+    160deg,
+    #7b6bff 0%,
+    #8a5cf5 45%,
+    #b04fe6 100%
+  );
+  --exp-key-ink: var(--color-white);
+  --exp-key-gloss: rgba(255, 255, 255, 0.35);
+  --exp-key-shade: rgba(34, 25, 140, 0.18);
+  --exp-key-rim: transparent;
+  --exp-key-rim-hover: transparent;
+  --exp-key-edge-rest: var(--exp-key-edge);
+  --exp-key-edge-hover: var(--exp-key-edge);
+  --exp-key-rest-drop: var(--exp-key-drop);
+  --exp-key-hover-glow: var(--exp-key-glow);
+  --exp-key-hover-glow-2: rgba(106, 93, 249, 0.45);
+  --exp-key-text-shadow: 0 1px 1px rgba(34, 25, 140, 0.3);
+
+  --exp-key-bg: var(--exp-key-face);
+  --exp-key-rim-now: var(--exp-key-rim);
+  --exp-key-edge-now: var(--exp-key-edge-rest);
+  --exp-key-depth: 6px;
+  --exp-key-lift: 0px;
+  --exp-key-halo: 0 12px 16px var(--exp-key-rest-drop);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 52px;
+  margin-bottom: 10px;
+  padding: 0 24px 0 10px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--exp-key-bg);
+  color: var(--exp-key-ink);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow:
+    inset 0 1.5px 0 var(--exp-key-gloss),
+    inset 0 0 0 1px var(--exp-key-rim-now),
+    inset 0 -2px 0 var(--exp-key-shade),
+    0 var(--exp-key-depth) 0 var(--exp-key-edge-now),
+    var(--exp-key-halo);
+  transform: translateY(var(--exp-key-lift));
+  transition:
+    transform 240ms var(--exp-ease-spring),
+    box-shadow 240ms var(--exp-ease-spring);
+  outline-offset: 6px;
+}
+
+.exp-key:focus-visible {
+  outline: 2px solid var(--exp-accent);
+}
+
+.exp-key--block {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.exp-key[data-tone='white'] {
+  --exp-key-face: var(--exp-key-white-face);
+  --exp-key-face-hover: var(--exp-key-white-face-hover);
+  --exp-key-ink: var(--color-black);
+  --exp-key-gloss: rgba(255, 255, 255, 1);
+  --exp-key-shade: rgba(34, 25, 140, 0.04);
+  --exp-key-rim: var(--color-gray-5);
+  --exp-key-rim-hover: #c9c3fd;
+  --exp-key-edge-rest: var(--exp-key-white-edge);
+  --exp-key-edge-hover: var(--exp-key-white-edge-hover);
+  --exp-key-rest-drop: rgba(34, 35, 41, 0.12);
+  --exp-key-hover-glow: rgba(106, 93, 249, 0.35);
+  --exp-key-hover-glow-2: rgba(106, 93, 249, 0.2);
+  --exp-key-text-shadow: none;
+}
+
+.exp-key[data-tone='black'] {
+  --exp-key-face: linear-gradient(
+    160deg,
+    #33343c 0%,
+    #26272e 55%,
+    #1b1c21 100%
+  );
+  --exp-key-face-hover: linear-gradient(
+    160deg,
+    #3a3b44 0%,
+    #2a2b33 55%,
+    #222329 100%
+  );
+  --exp-key-edge-rest: #0e0e10;
+  --exp-key-edge-hover: #0e0e10;
+  --exp-key-hover-glow: rgba(106, 93, 249, 0.45);
+}
+
+.exp-key[data-state='idle']:is(:hover, :focus-visible) {
+  --exp-key-bg: var(--exp-key-face-hover);
+  --exp-key-rim-now: var(--exp-key-rim-hover);
+  --exp-key-edge-now: var(--exp-key-edge-hover);
+  --exp-key-depth: 9px;
+  --exp-key-lift: -3px;
+  --exp-key-halo: 0 19px 34px var(--exp-key-hover-glow),
+    0 11px 14px var(--exp-key-hover-glow-2);
+}
+
+.exp-key[data-state='idle']:active,
+.exp-key[data-state='busy'] {
+  --exp-key-bg: var(--exp-key-face);
+  --exp-key-depth: 2px;
+  --exp-key-lift: 4px;
+  --exp-key-halo: 0 8px 16px var(--exp-key-rest-drop);
+}
+
+.exp-key[data-state='busy'] {
+  cursor: progress;
+}
+
+.exp-key[data-state='disabled'] {
+  --exp-key-bg: var(--exp-key-disabled-face);
+  --exp-key-ink: var(--color-gray-2);
+  --exp-key-gloss: rgba(255, 255, 255, 0.5);
+  --exp-key-rim-now: transparent;
+  --exp-key-edge-now: var(--exp-key-disabled-edge);
+  --exp-key-depth: 2px;
+  --exp-key-halo: 0 0 0 transparent;
+  --exp-key-text-shadow: none;
+  cursor: not-allowed;
+}
+
+.exp-key[data-icon='none'] {
+  padding-left: 24px;
+}
+
+.exp-key[data-size='sm'] {
+  --exp-key-depth: 4px;
+  --exp-key-halo: 0 7px 8px var(--exp-key-rest-drop);
+  gap: 8px;
+  height: 36px;
+  min-height: 36px;
+  margin-bottom: 0;
+  padding: 0 16px 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.exp-key[data-size='sm'][data-icon='none'] {
+  padding: 0 20px;
+}
+
+.exp-key[data-size='sm'][data-state='idle']:is(:hover, :focus-visible) {
+  --exp-key-depth: 5px;
+  --exp-key-lift: -2px;
+  --exp-key-halo: 0 10px 17px var(--exp-key-hover-glow),
+    0 7px 7px var(--exp-key-hover-glow-2);
+}
+
+.exp-key[data-size='sm'][data-state='idle']:active,
+.exp-key[data-size='sm'][data-state='busy'] {
+  --exp-key-depth: 1px;
+  --exp-key-lift: 2px;
+  --exp-key-halo: 0 4px 8px var(--exp-key-rest-drop);
+}
+
+.exp-key[data-size='sm'][data-state='disabled'] {
+  --exp-key-depth: 1px;
+  --exp-key-halo: 0 0 0 transparent;
+}
+
+.exp-key-label {
+  position: relative;
+  text-shadow: var(--exp-key-text-shadow);
+}
+
+.exp-key .exp-arrow {
+  position: relative;
+  margin-left: 8px;
+}
+
+.exp-key[data-size='sm'] .exp-arrow {
+  margin-left: 2px;
+}
+
+.exp-key[data-state='busy'] .exp-arrow {
+  opacity: 0;
+}
+
+.exp-key-shine {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 28%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.35),
+    transparent
+  );
+  pointer-events: none;
+  animation: exp-sweep 1.4s ease-in-out infinite;
+}
+
+.exp-key[data-tone='white'] .exp-key-shine {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(106, 93, 249, 0.18),
+    transparent
+  );
+}
+
+/* ExpMedalBadge --------------------------------------------------------- */
+
+.exp-medal-octagon {
+  clip-path: polygon(
+    30% 0,
+    70% 0,
+    100% 30%,
+    100% 70%,
+    70% 100%,
+    30% 100%,
+    0 70%,
+    0 30%
+  );
+}
+
+.exp-medal-ribbon {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%);
+}
+
+/* ExpSearchField: the same relief as the field skin, with its action inside */
+
+.exp-search {
+  border: 1px solid var(--exp-field-line);
+  background: var(--exp-field-bg);
+  box-shadow:
+    0 4px 14px var(--exp-field-drop),
+    0 1px 2px rgba(34, 35, 41, 0.06),
+    inset 0 1px 0 var(--exp-field-gloss);
+  transition:
+    transform 260ms var(--exp-ease-spring),
+    box-shadow 260ms ease,
+    border-color 200ms ease,
+    background 200ms ease;
+}
+
+.exp-search[data-state='idle']:is(:hover, :focus-within) {
+  border-color: var(--exp-accent-soft);
+  background: var(--exp-field-bg-hover);
+  box-shadow:
+    0 10px 28px var(--exp-field-glow),
+    0 2px 6px rgba(106, 93, 249, 0.12),
+    inset 0 1px 0 var(--exp-field-gloss);
+}
+
+.exp-search[data-state='idle']:focus-within {
+  border-color: var(--exp-accent);
+}
+
+.exp-search[data-state][data-invalid] {
+  border-color: var(--color-error);
+}
+
+.exp-search[data-state='disabled'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.exp-search-input {
+  color: var(--exp-field-ink);
+}
+
+.exp-search-lens {
+  color: var(--exp-field-icon);
+  transition:
+    color 200ms ease,
+    transform 260ms var(--exp-ease-spring);
+}
+
+.exp-search[data-state='idle']:is(:hover, :focus-within) .exp-search-lens {
+  color: var(--exp-accent);
+}
+
+/* Skin: titles ---------------------------------------------------------- */
+
+:root:has(.exp-scope[data-exp-titles='playful']) [data-orion-part='heading'] {
+  font-family: var(--exp-title-font);
+}
+
+/* Skin: fields (Input, Select, Textarea, DatePicker) -------------------- */
+
+:root:has(.exp-scope) [data-orion-part='field-box'],
+:root:has(.exp-scope) textarea[data-orion-part='field-control'] {
+  border: 1px solid var(--exp-field-line);
+  background: var(--exp-field-bg);
+  box-shadow:
+    0 4px 14px var(--exp-field-drop),
+    0 1px 2px rgba(34, 35, 41, 0.06),
+    inset 0 1px 0 var(--exp-field-gloss);
+  transition:
+    transform 260ms var(--exp-ease-spring),
+    box-shadow 260ms ease,
+    border-color 200ms ease,
+    background 200ms ease;
+}
+
+:root:has(.exp-scope) [data-orion-part='field-box'] {
+  height: 44px;
+  border-radius: 9999px;
+}
+
+:root:has(.exp-scope) [data-orion-part='field-box'][data-grows] {
+  height: auto;
+  min-height: 44px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  border-radius: 22px;
+}
+
+:root:has(.exp-scope) textarea[data-orion-part='field-control'] {
+  border-radius: 20px;
+  padding: 12px 20px;
+}
+
+:root:has(.exp-scope)
+  :is(
+    [data-orion-part='field-box']:not(
+        :has([data-orion-part='field-control']:disabled)
+      ),
+    textarea[data-orion-part='field-control']:not(:disabled)
+  ):is(:hover, :focus-within) {
+  border-color: var(--exp-accent-soft);
+  background: var(--exp-field-bg-hover);
+  box-shadow:
+    0 10px 28px var(--exp-field-glow),
+    0 2px 6px rgba(106, 93, 249, 0.12),
+    inset 0 1px 0 var(--exp-field-gloss);
+}
+
+:root:has(.exp-scope)
+  :is(
+    [data-orion-part='field-box']:focus-within,
+    [data-orion-part='field-box']:has(> [aria-expanded='true']),
+    textarea[data-orion-part='field-control']:focus
+  ) {
+  border-color: var(--exp-accent);
+}
+
+:root:has(.exp-scope)
+  :is(
+    [data-orion-part='field-box']:has([aria-invalid='true']),
+    textarea[data-orion-part='field-control'][aria-invalid='true']
+  ) {
+  border-color: var(--color-error);
+}
+
+:root:has(.exp-scope)
+  :is(
+    [data-orion-part='field-box']:has(
+        [data-orion-part='field-control']:disabled
+      ),
+    textarea[data-orion-part='field-control']:disabled
+  ) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='field-box']:has(> [data-orion-part='field-label']) {
+  margin-top: 22px;
+}
+
+:root:has(.exp-scope) [data-orion-part='field-outline'] {
+  display: none;
+}
+
+:root:has(.exp-scope) [data-orion-part='field-label'] {
+  padding: 0 0 0 4px;
+  color: var(--exp-field-label);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='field-box']
+  > [data-orion-part='field-label'] {
+  top: -23px;
+  left: 0;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='field']:has([aria-invalid='true'])
+  [data-orion-part='field-label'] {
+  color: var(--color-error);
+}
+
+:root:has(.exp-scope) [data-orion-part='field-control'] {
+  background: transparent;
+  color: var(--exp-field-ink);
+}
+
+:root:has(.exp-scope) [data-orion-part='field-control']::placeholder {
+  color: var(--color-gray-2);
+}
+
+:root:has(.exp-scope) button[data-orion-part='field-control'][data-empty] {
+  color: var(--color-gray-2);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='field-box']
+  > [data-orion-part='field-icon'] {
+  top: 50%;
+  translate: 0 -50%;
+  color: var(--exp-field-icon);
+  transition: color 200ms ease;
+}
+
+:root:has(.exp-scope)
+  button[data-orion-part='field-control']
+  > [data-orion-part='field-icon'] {
+  color: var(--exp-field-icon);
+  transition:
+    color 200ms ease,
+    transform 260ms var(--exp-ease-spring);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='field-box']:not(
+    :has([data-orion-part='field-control']:disabled)
+  ):is(:hover, :focus-within, :has(> [aria-expanded='true']))
+  [data-orion-part='field-icon'] {
+  color: var(--exp-accent);
+}
+
+:root:has(.exp-scope) [data-orion-part='field-helper'] {
+  padding-left: 20px;
+}
+
+:root:has(.exp-scope)
+  :is([data-orion-part='datepicker-panel'], [data-orion-part='listbox-panel']) {
+  margin-top: 10px;
+  border-color: var(--exp-field-line);
+  border-radius: 20px;
+  background: var(--exp-field-popover);
+  box-shadow:
+    0 16px 40px var(--exp-field-glow),
+    0 2px 6px rgba(34, 35, 41, 0.06);
+}
+
+:root:has(.exp-scope) [data-orion-part='datepicker-panel'] {
+  padding: 16px;
+}
+
+:root:has(.exp-scope) [data-orion-part='datepicker-day'] {
+  font-size: 13px;
+}
+
+:root:has(.exp-scope) [data-orion-part='datepicker-day'][data-selected] {
+  background: linear-gradient(135deg, var(--color-lavender), var(--exp-spark));
+  box-shadow: 0 4px 12px rgba(106, 93, 249, 0.35);
+  color: var(--color-white);
+}
+
+/* Skin: top menu links -------------------------------------------------- */
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  ) {
+  --exp-nav-line: linear-gradient(
+    90deg,
+    transparent,
+    var(--exp-accent) 22%,
+    var(--exp-spark) 78%,
+    transparent
+  );
+  font-size: 15px;
+}
+
+:root:has(.exp-scope[data-exp-titles='playful'])
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  ) {
+  font-family: var(--exp-title-font);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  )::before {
+  background: var(--exp-nav-line);
+  opacity: 1;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 160ms ease-in;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  ):is(:hover, :focus-visible)::before {
+  transform: scaleX(1);
+  transition: transform 260ms var(--exp-ease-out);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  ):not([aria-current='page']):is(:hover, :focus-visible)::after {
+  content: '';
+  position: absolute;
+  bottom: -11px;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  margin-left: -2px;
+  border-radius: 9999px;
+  background: var(--exp-accent);
+  box-shadow: 0 0 4px 1px var(--exp-nav-glow);
+  pointer-events: none;
+  animation: exp-spark 420ms var(--exp-ease-out) forwards;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link'][aria-current='page']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  ) {
+  font-weight: 500;
+  background: radial-gradient(
+      60% 100% at 50% 100%,
+      var(--exp-nav-glow),
+      transparent 75%
+    )
+    center calc(100% + 10px) / 100% 14px no-repeat;
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='menu-list'][data-orientation='horizontal']
+  [data-orion-part='menu-link'][aria-current='page']:not(
+    [data-orion-part='menu-list'][data-orientation='vertical'] *
+  )::before {
+  transform: scaleX(1);
+}
+
+/* Skin: cards (Card) ---------------------------------------------------- */
+
+:root:has(.exp-scope) [data-orion-part='card'] {
+  border-radius: 16px;
+  box-shadow: var(--exp-card-drop);
+}
+
+:root:has(.exp-scope)
+  [data-orion-part='card']
+  [data-orion-part='heading']
+  > :is(a, button)::after {
+  border-radius: 16px;
+}
+
+/* `accent` trades the lavender border for a brand band along the top. */
+:root:has(.exp-scope) [data-orion-part='card'][data-modifier='accent'] {
+  border-color: var(--exp-card-edge);
+  background:
+    var(--exp-card-band) top / 100% 4px no-repeat,
+    var(--exp-card-bg);
+}
+
+/* Skin: framed tables (DataTable card) ---------------------------------- */
+
+/* A framed table reads as one card: the brand band along the top, like
+   `Card` `accent`, and core rows inside even with tables="cards". */
+:root:has(.exp-scope) [data-orion-part='data-table'][data-modifier='card'] {
+  overflow: hidden;
+  border-color: var(--exp-card-edge);
+  border-radius: 16px;
+  padding-top: 4px;
+  background:
+    var(--exp-card-band) top / 100% 4px no-repeat,
+    var(--exp-card-bg);
+  box-shadow: var(--exp-card-drop);
+}
+
+/* Skin: table rows as cards (ExpScope tables="cards") ------------------- */
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ) {
+  margin-top: -8px;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-head']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ) {
+  border: 0;
+  background: transparent;
+  color: var(--exp-field-label);
+  font-size: 13px;
+  line-height: 16px;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-head']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > th {
+  padding: 10px 16px 2px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'][data-exp-titles='playful'])
+  [data-orion-part='table-head']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > th {
+  font-family: var(--exp-title-font);
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ) {
+  border: 0;
+  background: transparent;
+  outline-offset: 2px;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td {
+  padding: 14px 16px;
+  border-top: 1px solid var(--exp-row-edge);
+  border-bottom: 1px solid var(--exp-row-edge);
+  background: var(--exp-row-bg);
+  vertical-align: middle;
+  transition:
+    transform 240ms var(--exp-ease-spring),
+    background 160ms ease,
+    border-color 160ms ease;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td:first-child {
+  border-left: 1px solid var(--exp-row-edge);
+  border-radius: 14px 0 0 14px;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  )
+  > td:last-child {
+  border-right: 1px solid var(--exp-row-edge);
+  border-radius: 0 14px 14px 0;
+}
+
+:root:has(.exp-scope[data-exp-tables='cards'])
+  [data-orion-part='table-row']:not(
+    [data-orion-part='data-table'][data-modifier='card'] *
+  ):is(:hover, :focus-visible, [data-selected])
+  > td {
+  border-color: var(--exp-row-edge-hover);
+  background: var(--exp-row-bg-hover);
+}
+
+/* Hover movement, only without reduced motion --------------------------- */
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(button, a):is(:hover, :focus-visible):not(:disabled)
+    .exp-lens:not(.exp-glyph--disabled)
+    .exp-lens-pupil {
+    transform: translateX(1.8px);
+  }
+
+  :is(button, a):is(:hover, :focus-visible):not(:disabled) .exp-rotor {
+    transform: rotate(var(--exp-rotor-turn, 180deg));
+  }
+
+  :is(button, a):is(:hover, :focus-visible):not(:disabled) .exp-enter-arrow,
+  :is(button, a):is(:hover, :focus-visible):not(:disabled) .exp-arrow {
+    transform: translateX(3px);
+  }
+
+  :root:has(.exp-scope)
+    :is(
+      [data-orion-part='field-box']:not(
+          :has([data-orion-part='field-control']:disabled)
+        ),
+      textarea[data-orion-part='field-control']:not(:disabled)
+    ):is(:hover, :focus-within) {
+    transform: translateY(-2px);
+  }
+
+  .exp-search[data-state='idle']:is(:hover, :focus-within) {
+    transform: translateY(-2px);
+  }
+
+  .exp-search[data-state='idle']:is(:hover, :focus-within) .exp-search-lens {
+    transform: rotate(-8deg) scale(1.06);
+  }
+
+  :root:has(.exp-scope)
+    button[data-orion-part='field-control']:not(:disabled):is(
+      :hover,
+      :focus-visible,
+      [aria-expanded='true']
+    )
+    > [data-orion-part='field-icon'] {
+    transform: rotate(-8deg) scale(1.06);
+  }
+
+  :root:has(.exp-scope[data-exp-tables='cards'])
+    [data-orion-part='table-row']:not(
+      [data-orion-part='data-table'][data-modifier='card'] *
+    ):is(:hover, :focus-visible, [data-selected])
+    > td {
+    transform: translateY(-2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .exp-float,
+  .exp-hang,
+  .exp-hint-pulse,
+  .exp-lens-lid,
+  .exp-glyph--busy .exp-lens-pupil,
+  .exp-glyph--busy .exp-rotor,
+  .exp-glyph--busy .exp-enter-arrow,
+  .exp-key-shine {
+    animation: none;
+  }
+
+  .exp-key {
+    transform: none;
+  }
+
+  .exp-key,
+  .exp-lens-pupil,
+  .exp-rotor,
+  .exp-enter-arrow,
+  .exp-arrow,
+  .exp-search,
+  .exp-search-lens,
+  :root:has(.exp-scope) [data-orion-part='field-box'],
+  :root:has(.exp-scope) textarea[data-orion-part='field-control'],
+  :root:has(.exp-scope) [data-orion-part='field-icon'],
+  :root:has(.exp-scope) [data-orion-part='table-row'] > td,
+  :root:has(.exp-scope) [data-orion-part='menu-link']::before {
+    transition: none;
+  }
+
+  :root:has(.exp-scope) [data-orion-part='menu-link']::after {
+    animation: none;
+  }
+}