@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/dist/css/components/scratch-card.css

@@ -0,0 +1,75 @@
+/* components/scratch-card/scratch-card.css */
+/* scratch-card — a Melonmind card (20 px radius) whose content hides under a metallic cover; a small glass
+   "Revelar" pill sits on top for the keyboard. */
+.mk-scratch-card,
+mk-scratch-card {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+  isolation: isolate;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-content] {
+  position: relative;
+  min-height: 9rem;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover] canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover][data-mk-scratch-fallback] {
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, #c9ccd2, #eef0f3 45%, #d7dadf 55%, #a9adb5);
+  color: rgb(40 42 48 / 0.75);
+  font-weight: 600;
+  cursor: default;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover][hidden] {
+  display: none;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal] {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 2;
+  min-height: 2.25rem;
+  padding: 0 0.9rem;
+  border: 0;
+  border-radius: 64px;
+  background: rgb(20 21 24 / 0.72);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.14),
+    inset -1px -1px 1px rgb(255 255 255 / 0.05);
+  backdrop-filter: blur(12px);
+  color: #fff;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal][hidden] {
+  display: none;
+}

package/dist/css/components/skeleton.css

@@ -0,0 +1,108 @@
+/* components/skeleton/skeleton.css */
+/* skeleton — soft bones on the surface tone; pulse (opacity) or shimmer (a passing sheen). */
+.mk-skeleton,
+mk-skeleton {
+  --mk-skeleton-bone: var(--mk-surface-3);
+  --mk-skeleton-sheen: color-mix(in srgb, var(--mk-surface-1) 80%, transparent);
+  --mk-skeleton-radius: var(--mk-radius-md, 16px);
+  /* Melonmind animation-loading-2: a sheen crossing in 1 s. */
+  --mk-skeleton-duration: 1s;
+  display: block;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-skeleton-placeholder] {
+  display: grid;
+  gap: 0.625rem;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-skeleton-placeholder][hidden],
+:is(.mk-skeleton, mk-skeleton) [data-mk-skeleton-content][hidden] {
+  display: none !important;
+}
+
+/* Before the engine runs (server render), the React state decides what shows. */
+:is(.mk-skeleton, mk-skeleton):not([data-mk-ready])[data-mk-ssr-loading] > [data-mk-skeleton-content],
+:is(.mk-skeleton, mk-skeleton):not([data-mk-ready]):not([data-mk-ssr-loading]) > [data-mk-skeleton-placeholder] {
+  display: none;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-bone] {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  height: 0.875rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-skeleton-bone);
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-bone='short'] {
+  width: 62%;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-bone='circle'] {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-bone='block'] {
+  height: auto;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--mk-skeleton-radius);
+}
+
+/* Avatar: circle beside two lines. */
+:is(.mk-skeleton, mk-skeleton) [data-mk-shape='avatar'] {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 1rem;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-shape='avatar'] [data-mk-bone='circle'] {
+  grid-row: span 2;
+}
+
+:is(.mk-skeleton, mk-skeleton) [data-mk-shape='card'] {
+  padding: 0.5rem 0.5rem 1rem;
+  border-radius: var(--mk-radius-lg, 24px);
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+:is(.mk-skeleton, mk-skeleton)[data-mk-animation='pulse'][aria-busy='true'] [data-mk-bone] {
+  animation: mk-skeleton-pulse var(--mk-skeleton-duration) ease-in-out infinite;
+}
+
+:is(.mk-skeleton, mk-skeleton)[data-mk-animation='shimmer'][aria-busy='true'] [data-mk-bone]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--mk-skeleton-sheen), transparent);
+  transform: translateX(-100%);
+  animation: mk-skeleton-shimmer var(--mk-skeleton-duration) linear infinite;
+}
+
+
+@keyframes mk-skeleton-pulse {
+  50% { opacity: 0.45; }
+}
+
+@keyframes mk-skeleton-shimmer {
+  to { transform: translateX(100%); }
+}
+
+@keyframes mk-skeleton-reveal {
+  from { opacity: 0; transform: translateY(4px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-skeleton, mk-skeleton) [data-mk-bone],
+  :is(.mk-skeleton, mk-skeleton) [data-mk-bone]::after,
+  :is(.mk-skeleton, mk-skeleton) [data-mk-skeleton-content] {
+    animation: none !important;
+  }
+
+  :is(.mk-skeleton, mk-skeleton) [data-mk-bone]::after {
+    display: none;
+  }
+}

package/dist/css/components/slot-picker.css

@@ -0,0 +1,126 @@
+/* components/slot-picker/slot-picker.css */
+/* slot-picker — Melon Mind's appointment picker on the --mk-* tokens; parts are .mk-slot-picker__*. */
+.mk-slot-picker,
+mk-slot-picker {
+  --mk-slot-picker-radius: var(--mk-radius-md);
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: var(--mk-radius-xl);
+  background: var(--mk-surface);
+  color: var(--mk-text);
+}
+.mk-slot-picker__calendar { padding: var(--mk-space-5); }
+.mk-slot-picker__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-3);
+  min-height: 100%;
+  padding: var(--mk-space-5);
+  background: var(--mk-surface-2);
+}
+.mk-slot-picker__month { display: flex; align-items: center; gap: var(--mk-space-2); margin-bottom: var(--mk-space-3); }
+.mk-slot-picker__title { margin: 0 auto 0 0; font-size: 1.35rem; font-weight: 400; }
+.mk-slot-picker__nav {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-surface-2);
+  color: var(--mk-text);
+  font: inherit;
+  cursor: pointer;
+  transition: transform 0.3s var(--mk-ease-nav-move), opacity 0.2s;
+}
+.mk-slot-picker__nav:active { transform: scale(0.9); }
+.mk-slot-picker__nav:disabled { opacity: 0.35; cursor: default; }
+[data-mk-slot-days],
+[data-mk-slot-times] { position: relative; }
+.mk-slot-picker__days { display: flex; flex-direction: column; gap: 6px; }
+.mk-slot-picker__weekdays,
+.mk-slot-picker__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
+.mk-slot-picker__weekdays span {
+  padding: 6px 0;
+  border-radius: var(--mk-radius-sm);
+  background: color-mix(in srgb, var(--mk-surface-2) 70%, transparent);
+  text-align: center;
+  font-size: 0.9rem;
+}
+.mk-slot-picker__week > [role='gridcell'] { display: grid; }
+.mk-slot-picker__day {
+  aspect-ratio: 1.15;
+  border: 0;
+  border-radius: var(--mk-slot-picker-radius);
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.25s, color 0.25s, border-radius 0.3s var(--mk-ease-nav-radius), transform 0.3s var(--mk-ease-nav-radius);
+}
+.mk-slot-picker__day:hover:not(:disabled) { background: var(--mk-surface-5); border-radius: var(--mk-radius-full); }
+.mk-slot-picker__day:active:not(:disabled) { transform: scale(0.92); }
+.mk-slot-picker__day:disabled { opacity: 0.35; cursor: default; }
+.mk-slot-picker__day[aria-current='date'] { box-shadow: inset 0 0 0 1.5px var(--mk-outline); }
+[aria-selected='true'] > .mk-slot-picker__day,
+[aria-selected='true'] > .mk-slot-picker__day:hover:not(:disabled) { background: var(--mk-accent); color: var(--mk-on-accent); }
+:is(.mk-slot-picker__day, .mk-slot-picker__time, .mk-slot-picker__nav):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
+
+.mk-slot-picker__heading {
+  margin: 0;
+  padding: 8px;
+  border-radius: var(--mk-radius-md);
+  background: var(--mk-surface);
+  font-weight: 600;
+}
+.mk-slot-picker__heading:not([data-mk-shown]) { display: none; }
+.mk-slot-picker__heading[data-mk-shown] { animation: mk-slot-heading-in 0.5s cubic-bezier(0.38, 0.49, 0, 1.4); }
+@keyframes mk-slot-heading-in {
+  0% { max-height: 0; min-height: 0; padding-block: 0; opacity: 0; }
+  100% { max-height: 56px; min-height: 40px; opacity: 1; }
+}
+.mk-slot-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 8px; align-content: start; }
+.mk-slot-picker__leaving { position: absolute; left: 0; right: 0; pointer-events: none; }
+.mk-slot-picker__note { grid-column: 1 / -1; margin: 2rem 0; color: var(--mk-muted); text-align: center; }
+.mk-slot-picker__time {
+  position: relative;
+  isolation: isolate;
+  height: 44px;
+  border: 0;
+  border-radius: var(--mk-radius-sm);
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, transform 0.3s var(--mk-ease-nav-move);
+}
+.mk-slot-picker__time:hover { transform: translateY(-2px); }
+.mk-slot-picker__time[aria-checked='true'] { color: var(--mk-on-accent); }
+.mk-slot-picker__time[aria-checked='true']::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-accent);
+  animation: mk-slot-highlight 0.7s cubic-bezier(0.38, 0.49, 0, 1.1);
+}
+@keyframes mk-slot-highlight {
+  0% { transform: scale(0.8); opacity: 0; filter: blur(16px); box-shadow: 0 0 0 1px var(--mk-surface-2); }
+  100% { transform: scale(1); opacity: 1; filter: blur(0); }
+}
+.mk-slot-picker__actions { margin-top: auto; display: flex; justify-content: flex-end; }
+
+@media (max-width: 680px) {
+  .mk-slot-picker,
+  mk-slot-picker { grid-template-columns: 1fr; }
+  .mk-slot-picker__calendar,
+  .mk-slot-picker__panel { padding: var(--mk-space-4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-slot-picker *,
+  mk-slot-picker * { transition: none !important; animation: none !important; }
+}

package/dist/css/components/split-view.css

@@ -0,0 +1,19 @@
+/* components/split-view/split-view.css */
+/* split-view — two areas on a 20 px panel (surface-1, outline-soft border) with resizable-panel's separator between
+   them (its hairline, grip, bubble and the buttons that shut a side). Give it a height; each area scrolls on its own. */
+.mk-split-view,
+mk-split-view {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  min-width: 0;
+  min-height: 12rem;
+  overflow: hidden;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+}
+
+:is(.mk-split-view, mk-split-view)[data-mk-orientation='vertical'] {
+  flex-direction: column;
+}

package/dist/css/components/star-rating.css

@@ -0,0 +1,80 @@
+/* components/star-rating/star-rating.css */
+/* star-rating — stars outlined in the surface tone, filled with the star colour; a label beside them.
+   Hover previews; the focus ring sits on the star of the focused radio. */
+.mk-star-rating,
+mk-star-rating {
+  --mk-star-size: 2rem;
+  --mk-star-color: #f5b301;
+  --mk-star-empty: var(--mk-surface-4);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-stars] {
+  display: inline-flex;
+  gap: 0.15rem;
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-star] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: calc(var(--mk-star-size) + 0.5rem);
+  height: calc(var(--mk-star-size) + 0.5rem);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+:is(.mk-star-rating, mk-star-rating) [role='img'] [data-mk-star] {
+  width: var(--mk-star-size);
+  height: var(--mk-star-size);
+  cursor: default;
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-star] svg {
+  width: var(--mk-star-size);
+  height: var(--mk-star-size);
+  overflow: visible;
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-part='empty'] {
+  fill: var(--mk-star-empty);
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-part='full'] {
+  fill: var(--mk-star-color);
+  clip-path: inset(0 calc(100% - var(--mk-star-fill, 0%)) 0 0);
+  transition: clip-path 0.15s ease;
+}
+
+/* While previewing, lit stars are a step lighter. */
+:is(.mk-star-rating, mk-star-rating)[data-mk-preview] [data-mk-part='full'] {
+  fill: color-mix(in srgb, var(--mk-star-color) 75%, white);
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-star]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 1px;
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-star]:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:is(.mk-star-rating, mk-star-rating) [data-mk-star-label] {
+  min-width: 5.5rem;
+  color: var(--mk-muted);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-star-rating, mk-star-rating) [data-mk-part='full'] {
+    transition: none;
+  }
+}

package/dist/css/components/stat-card.css

@@ -0,0 +1,164 @@
+/* components/stat-card/stat-card.css */
+/* stat-card — a 20 px card on surface-1: a muted label, a 2rem tabular figure, a pill badge with the change (green
+   when it moves the good way, red when not, neutral when flat), the comparison line, a 2 px sparkline over a soft
+   area with an end dot, and an optional goal bar. --mk-stat-good / --mk-stat-bad recolour the badge. */
+.mk-stat-card,
+mk-stat-card {
+  --mk-stat-good: #1f9d5b;
+  --mk-stat-bad: var(--mk-error, #c62828);
+  --mk-stat-line: var(--mk-accent);
+  display: grid;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 1.1rem 1.2rem 1.2rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+}
+
+[data-mk-stat-label] {
+  overflow: hidden;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-stat-row] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.6rem;
+  min-width: 0;
+}
+
+[data-mk-stat-value] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+[data-mk-stat-delta] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  height: 1.5rem;
+  padding: 0 0.5rem 0 0.4rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--mk-muted) 14%, transparent);
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+:is(.mk-stat-card, mk-stat-card)[data-mk-good='good'] [data-mk-stat-delta] {
+  background: color-mix(in srgb, var(--mk-stat-good) 16%, transparent);
+  color: var(--mk-stat-good);
+}
+
+:is(.mk-stat-card, mk-stat-card)[data-mk-good='bad'] [data-mk-stat-delta] {
+  background: color-mix(in srgb, var(--mk-stat-bad) 14%, transparent);
+  color: var(--mk-stat-bad);
+}
+
+[data-mk-stat-arrow] {
+  display: inline-grid;
+  transition: rotate 0.35s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-stat-card, mk-stat-card)[data-mk-trend='down'] [data-mk-stat-arrow] {
+  rotate: 180deg;
+}
+
+:is(.mk-stat-card, mk-stat-card)[data-mk-trend='flat'] [data-mk-stat-arrow] {
+  rotate: 90deg;
+}
+
+[data-mk-stat-comparison] {
+  margin: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-stat-spark] {
+  position: relative;
+  height: 2.5rem;
+  margin-top: 0.25rem;
+  color: var(--mk-stat-line);
+}
+
+[data-mk-stat-spark] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+[data-mk-stat-line] {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-mk-stat-area] {
+  fill: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+[data-mk-stat-dot] {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  margin: -4px 0 0 -4px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 2.5px var(--mk-surface-1);
+}
+
+[data-mk-stat-target] {
+  display: grid;
+  gap: 0.35rem;
+}
+
+[data-mk-stat-target-bar] {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-stat-target-fill] {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mk-stat-line);
+  transform-origin: 0 50%;
+}
+
+[data-mk-stat-target-text] {
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+:is(.mk-stat-card, mk-stat-card) [hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-stat-delta],
+  [data-mk-stat-arrow] {
+    transition: none;
+  }
+}

package/dist/css/components/studio-dock.css

@@ -0,0 +1,35 @@
+/* components/studio-dock/studio-dock.css */
+.mk-studio-dock { position: relative; isolation: isolate; width: min(343px, 100%); color: var(--mk-text); font: inherit; }
+.mk-studio-dock--fixed { position: fixed; z-index: 70; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; width: min(343px, calc(100vw - 32px)); }
+.mk-studio-dock__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px; border-radius: 18px; background: var(--mk-surface-2); }
+.mk-studio-dock__brand, .mk-studio-dock__toggle { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border: 0; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; font: inherit; }
+.mk-studio-dock__label { flex: 1; font-size: .9rem; }
+.mk-studio-dock__toggle { cursor: pointer; }
+.mk-studio-dock__toggle span { transition: transform .4s; }
+.mk-studio-dock[data-mk-studio-open] .mk-studio-dock__toggle span { transform: rotate(45deg); }
+.mk-studio-dock__panel { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: var(--mk-studio-dock-offset, 76px); max-height: min(660px, 75dvh, var(--mk-studio-dock-space, 660px)); overflow: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 18px; background: var(--mk-surface-2); box-shadow: 0 16px 60px #0002; }
+/* Not enough room above the bar: the engine opens the sheet below it. */
+.mk-studio-dock[data-mk-studio-below] .mk-studio-dock__panel { inset-block: var(--mk-studio-dock-offset, 76px) auto; }
+.mk-studio-dock [hidden] { display: none !important; }
+.mk-studio-dock__grid, .mk-studio-dock__page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.mk-studio-dock__tile { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
+.mk-studio-dock__tile small { color: var(--mk-muted); }
+.mk-studio-dock__tile:is(:hover, :focus-visible) { transform: scale(.94); }
+.mk-studio-dock__reel { display: flex; justify-content: space-between; align-items: end; min-height: 154px; margin-block: 12px; padding: 16px; border-radius: 10px; background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__reel button { border: 1px solid currentColor; border-radius: 50%; padding: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__slide-track { position: relative; display: flex; align-items: center; height: 64px; padding: 4px; margin-block: 12px; border-radius: 48px; background: var(--mk-surface-3, var(--mk-surface)); }
+.mk-studio-dock__slide-track > span { position: absolute; inset-inline: 60px 12px; text-align: center; font-size: .75rem; pointer-events: none; }
+.mk-studio-dock [data-mk-studio-slide] { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font-size: 20px; cursor: pointer; touch-action: pan-y; transform: translateX(var(--mk-studio-drag, 0px)); }
+.mk-studio-dock__clock { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 4px; text-align: center; border: 10px solid var(--mk-surface); border-radius: 50%; background: var(--mk-surface-2); }
+.mk-studio-dock__clock::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--mk-outline-soft); border-radius: 50%; }
+.mk-studio-dock__clock small { color: var(--mk-muted); }
+.mk-studio-dock__pages { margin-block-start: 12px; }
+.mk-studio-dock__pagination { display: flex; justify-content: center; gap: 8px; margin-block-start: 12px; }
+.mk-studio-dock__pagination button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__pagination [aria-current] { background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__view { display: grid; gap: 16px; padding: 12px 0; }
+.mk-studio-dock__view input, .mk-studio-dock__view textarea { width: 100%; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 8px; background: var(--mk-surface); color: inherit; font: inherit; }
+.mk-studio-dock__view label { display: grid; gap: 6px; }
+.mk-studio-dock__view video { width: 100%; border-radius: 10px; }
+.mk-studio-dock :is(button,a,input,textarea):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) { .mk-studio-dock *, .mk-studio-dock *::after { transition: none !important; animation: none !important; } }