{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"styles","type":"registry:style","title":"Caliper UI tokens and base styles","description":"Colour, radius, motion and density tokens, the Tailwind adapter and a small base stylesheet. Every part needs them; import them once in your global CSS. Each part brings its own stylesheet.","files":[{"path":"styles/tokens.css","type":"registry:file","target":"styles/caliper/tokens.css","content":"/* Caliper UI: semantic roles, shared by copied components and the playground.\n   Theme and density also resolve on any element with data-theme / data-density,\n   so a preview region can switch independently of the page. */\n:root,\n[data-theme=\"light\"] {\n  color-scheme: light;\n  --chart-1: #4263eb;\n  --chart-2: #dd6f23;\n  --chart-3: #17996b;\n  --chart-4: #8a4fdb;\n  --chart-5: #b58307;\n  --chart-6: #d6456f;\n  --background: #ffffff;\n  --foreground: #18181b;\n  --surface: #f7f7f8;\n  --elevated: #ffffff;\n  --elevated-glass: rgb(255 255 255 / 97%);\n  --edge-light: rgb(255 255 255 / 80%);\n  --edge-glow: rgb(20 20 28 / 8%);\n  --blur-overlay: 20px;\n  --muted: #f0f0f2;\n  --muted-foreground: #5d5d66;\n  --border: #e4e4e8;\n  --border-strong: #8a8a94;\n  --accent: #18181b;\n  --accent-foreground: #ffffff;\n  --brand: #bb4400;\n  --brand-foreground: #ffffff;\n  --brand-subtle: #fff1e5;\n  --river: #006aa0;\n  --river-subtle: #e6f4fe;\n  --ring: #bb4400;\n  --success: #0b7643;\n  --success-subtle: #e3f8e9;\n  --warning: #845a0f;\n  --warning-subtle: #fff2d6;\n  --destructive: #c2272d;\n  --destructive-foreground: #ffffff;\n  --destructive-subtle: #ffeceb;\n  --danger: #c2272d;\n  --danger-foreground: #ffffff;\n  --overlay: rgb(12 12 18 / 30%);\n  --shadow-overlay: 0 12px 40px rgb(20 20 28 / 14%);\n  --shadow-feedback: 0 4px 12px rgb(20 20 28 / 8%);\n  --shadow-control:\n    0 1px 2px rgb(20 20 28 / 8%), inset 0 1px 0 rgb(255 255 255 / 12%);\n  --radius-control: 8px;\n  --radius-surface: 10px;\n  --radius-overlay: 16px;\n  --duration-instant: 0ms;\n  --duration-fast: 120ms;\n  --duration-normal: 180ms;\n  --duration-deliberate: 280ms;\n  --duration-travel: 400ms;\n  --duration-showcase: 600ms;\n  --delay-stagger: 60ms;\n  --duration-loading: 1000ms;\n  --duration-skeleton: 1600ms;\n  --duration-marquee: 24000ms;\n  --motion-enter-distance: 4px;\n  --motion-showcase-distance: 16px;\n  --motion-press-scale: 0.98;\n  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);\n  --ease-settle: cubic-bezier(0.22, 1.2, 0.36, 1);\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-showcase: cubic-bezier(0.16, 1, 0.3, 1);\n  --ease-linear: linear;\n  --control-height: 36px;\n  --nav-height: 36px;\n  --row-padding: 16px;\n  /* Material: raised to press, recessed to fill, frosted to float. */\n  --raised: #ffffff;\n  --raised-hover: #f8f8fa;\n  --raised-press: #f1f1f4;\n  --sunken: #f3f3f5;\n  /* A selected row or item: ink mixed into the ground, darker than the hover fill in both themes. */\n  --selected: color-mix(in srgb, var(--foreground) 14%, var(--background));\n  --accent-hover: #2c2c32;\n  --accent-press: #0b0b0e;\n  --danger-fill: #c2272d;\n  --danger-fill-hover: #ad1f25;\n  --danger-fill-press: #9a1a20;\n  --danger-fill-foreground: #ffffff;\n  --shadow-raised:\n    0 0 0 1px #d7d7dd, inset 0 1px 0 rgb(255 255 255 / 95%),\n    0 1px 1px rgb(20 20 28 / 5%), 0 2px 4px -1px rgb(20 20 28 / 8%);\n  --shadow-raised-press: 0 0 0 1px #d7d7dd, inset 0 1px 2px rgb(20 20 28 / 14%);\n  --shadow-accent:\n    0 0 0 1px #08080a, inset 0 1px 0 rgb(255 255 255 / 16%),\n    0 1px 1px rgb(18 18 22 / 18%), 0 3px 6px -2px rgb(18 18 22 / 32%);\n  --shadow-accent-press: 0 0 0 1px #08080a, inset 0 1px 3px rgb(0 0 0 / 55%);\n  --shadow-danger:\n    0 0 0 1px #8f1a1f, inset 0 1px 0 rgb(255 255 255 / 20%),\n    0 1px 1px rgb(18 18 22 / 18%), 0 3px 6px -2px rgb(18 18 22 / 28%);\n  --shadow-danger-press: 0 0 0 1px #8f1a1f, inset 0 1px 3px rgb(0 0 0 / 45%);\n  --shadow-plate:\n    0 0 0 1px rgb(20 20 28 / 10%), 0 1px 2px rgb(20 20 28 / 8%),\n    0 2px 6px -2px rgb(20 20 28 / 10%), inset 0 1px 0 #ffffff;\n  --shadow-sunken: inset 0 0 0 1px var(--border), inset 0 1px 2px rgb(20 20 28 / 6%);\n  /* Recessed to fill: fields sit slightly below the paper. */\n  --field: #ffffff;\n  --shadow-field: inset 0 0 0 1px var(--border-strong), inset 0 1px 2px rgb(20 20 28 / 6%);\n  --shadow-field-hover: inset 0 0 0 1px #5d5d66, inset 0 1px 2px rgb(20 20 28 / 6%);\n  --ring-halo: rgb(184 67 0 / 16%);\n  --shadow-field-focus: 0 0 0 1px var(--ring), inset 0 0 0 1px var(--ring), 0 0 0 4px var(--ring-halo);\n  --shadow-field-invalid: 0 0 0 1px var(--danger), inset 0 0 0 1px var(--danger);\n  --shadow-field-quiet: inset 0 0 0 1px var(--border);\n  --radius-mark: 5px;\n  --radius-button: 10px;\n  --radius-touch: 12px;\n  --motion-press-travel: 1px;\n}\n\n:root[data-theme=\"dark\"],\n[data-theme=\"dark\"] {\n  color-scheme: dark;\n  --chart-1: #8da2ff;\n  --chart-2: #ffa05c;\n  --chart-3: #4ad6a1;\n  --chart-4: #c394ff;\n  --chart-5: #f2c94c;\n  --chart-6: #ff7ba3;\n  --background: #0e0e10;\n  --foreground: #f3f3f5;\n  --surface: #161619;\n  --elevated: #202024;\n  --elevated-glass: rgb(32 32 36 / 97%);\n  --edge-light: rgb(255 255 255 / 16%);\n  --edge-glow: rgb(255 255 255 / 8%);\n  --muted: #27272b;\n  --muted-foreground: #ababb4;\n  --border: #303036;\n  --border-strong: #71717b;\n  --accent: #f3f3f5;\n  --accent-foreground: #0e0e10;\n  --brand: #f38c48;\n  --brand-foreground: #211209;\n  --brand-subtle: #371c0c;\n  --river: #6dbbe8;\n  --river-subtle: #0e2433;\n  --ring: #f38c48;\n  --success: #63d18f;\n  --success-subtle: #102719;\n  --warning: #e8be62;\n  --warning-subtle: #322405;\n  --destructive: #fe8a88;\n  --destructive-foreground: #261214;\n  --destructive-subtle: #3f1919;\n  --danger: #fe8a88;\n  --danger-foreground: #261214;\n  --overlay: rgb(0 0 0 / 55%);\n  --shadow-overlay: 0 12px 40px rgb(0 0 0 / 40%);\n  --shadow-feedback: 0 4px 12px rgb(0 0 0 / 24%);\n  --shadow-control:\n    0 1px 2px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 8%);\n  --raised: #1d1d21;\n  --raised-hover: #242428;\n  --raised-press: #18181b;\n  --sunken: #09090b;\n  --selected: color-mix(in srgb, var(--foreground) 14%, var(--background));\n  --accent-hover: #ffffff;\n  --accent-press: #d9d9df;\n  --danger-fill: #cf3439;\n  --danger-fill-hover: #db3e43;\n  --danger-fill-press: #b92c31;\n  --danger-fill-foreground: #ffffff;\n  --shadow-raised:\n    0 0 0 1px #35353b, inset 0 1px 0 rgb(255 255 255 / 7%),\n    0 1px 2px rgb(0 0 0 / 50%), 0 3px 6px -2px rgb(0 0 0 / 40%);\n  --shadow-raised-press: 0 0 0 1px #35353b, inset 0 1px 3px rgb(0 0 0 / 60%);\n  --shadow-accent:\n    0 0 0 1px #ffffff, inset 0 -1px 0 rgb(20 20 28 / 12%),\n    0 1px 2px rgb(0 0 0 / 60%), 0 4px 10px -3px rgb(0 0 0 / 50%);\n  --shadow-accent-press: 0 0 0 1px #ffffff, inset 0 1px 3px rgb(20 20 28 / 35%);\n  --shadow-danger:\n    0 0 0 1px #e8565b, inset 0 1px 0 rgb(255 255 255 / 16%),\n    0 1px 2px rgb(0 0 0 / 60%);\n  --shadow-danger-press: 0 0 0 1px #e8565b, inset 0 1px 3px rgb(0 0 0 / 45%);\n  --shadow-plate:\n    0 0 0 1px rgb(255 255 255 / 10%), 0 1px 2px rgb(0 0 0 / 60%),\n    inset 0 1px 0 rgb(255 255 255 / 8%);\n  --shadow-sunken: inset 0 0 0 1px var(--border), inset 0 1px 2px rgb(0 0 0 / 45%);\n  --field: #0b0b0d;\n  --shadow-field: inset 0 0 0 1px var(--border-strong), inset 0 1px 2px rgb(0 0 0 / 50%);\n  --shadow-field-hover: inset 0 0 0 1px #8b8b95, inset 0 1px 2px rgb(0 0 0 / 50%);\n  --ring-halo: rgb(243 140 72 / 22%);\n  --shadow-field-focus: 0 0 0 1px var(--ring), inset 0 0 0 1px var(--ring), 0 0 0 4px var(--ring-halo);\n  --shadow-field-invalid: 0 0 0 1px var(--danger), inset 0 0 0 1px var(--danger);\n  --shadow-field-quiet: inset 0 0 0 1px var(--border);\n}\n\n:root[data-density=\"compact\"],\n[data-density=\"compact\"] {\n  --control-height: 32px;\n  --nav-height: 32px;\n  --row-padding: 12px;\n}\n\n/* Touch targets stay generous even when a desktop prefers compact density. */\n@media (pointer: coarse), (max-width: 767px) {\n  :root,\n  :root[data-density=\"compact\"],\n  [data-density=\"compact\"] {\n    --control-height: 44px;\n    --nav-height: 44px;\n    --radius-button: var(--radius-touch);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --duration-fast: var(--duration-instant);\n    --duration-normal: var(--duration-instant);\n    --duration-deliberate: var(--duration-instant);\n    --duration-travel: var(--duration-instant);\n    --duration-showcase: var(--duration-instant);\n    --delay-stagger: var(--duration-instant);\n    --duration-loading: var(--duration-instant);\n    --duration-skeleton: var(--duration-instant);\n    --motion-enter-distance: 0px;\n    --motion-showcase-distance: 0px;\n    --motion-press-scale: 1;\n    --motion-press-travel: 0px;\n  }\n}\n"},{"path":"styles/tailwind.css","type":"registry:file","target":"styles/caliper/tailwind.css","content":"/* Import after Tailwind and Caliper UI tokens. Values stay in tokens.css. */\n@custom-variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *));\n\n@theme inline {\n  --default-transition-duration: var(--duration-fast);\n  --default-transition-timing-function: var(--ease-out);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-surface: var(--surface);\n  --color-elevated: var(--elevated);\n  --color-muted: var(--muted);\n  --color-raised: var(--raised);\n  --color-raised-hover: var(--raised-hover);\n  --color-sunken: var(--sunken);\n  --color-field: var(--field);\n  --color-accent-hover: var(--accent-hover);\n  --color-danger-fill: var(--danger-fill);\n  --color-danger-fill-foreground: var(--danger-fill-foreground);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-border: var(--border);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-ring: var(--ring);\n  --color-border-strong: var(--border-strong);\n  --color-brand: var(--brand);\n  --color-brand-foreground: var(--brand-foreground);\n  --color-brand-subtle: var(--brand-subtle);\n  --color-river: var(--river);\n  --color-river-subtle: var(--river-subtle);\n  --color-success: var(--success);\n  --color-success-subtle: var(--success-subtle);\n  --color-warning: var(--warning);\n  --color-warning-subtle: var(--warning-subtle);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-destructive-subtle: var(--destructive-subtle);\n  --color-danger: var(--danger);\n  --color-danger-foreground: var(--danger-foreground);\n  --radius-control: var(--radius-control);\n  --radius-surface: var(--radius-surface);\n  --radius-overlay: var(--radius-overlay);\n  --radius-mark: var(--radius-mark);\n  --radius-button: var(--radius-button);\n  --radius-touch: var(--radius-touch);\n  --shadow-overlay: var(--shadow-overlay);\n  --shadow-feedback: var(--shadow-feedback);\n  --shadow-raised: var(--shadow-raised);\n  --shadow-plate: var(--shadow-plate);\n  --shadow-sunken: var(--shadow-sunken);\n  --shadow-field: var(--shadow-field);\n}\n"},{"path":"styles/base.css","type":"registry:file","target":"styles/caliper/base.css","content":"/* Caliper UI base styles: the few rules no single part owns, and shared animations. Import once, after the tokens. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* A size container ignores its content when sizing, so in a centring flex\n     or grid parent it would collapse to nothing. It fills its slot instead;\n     width and max-width utilities still win. */\n  .\\@container,\n  [class*=\"@container/\"] {\n    inline-size: 100%;\n    min-inline-size: 0;\n  }\n\n  /* A grid without declared columns would get an auto track that grows to its\n     widest unbreakable row (a chip row, a badge, a nowrap title) and push past\n     a phone screen. Its single track can shrink instead; grid-cols utilities\n     and component rules later in this file still set real columns. */\n  .grid { grid-template-columns: minmax(0, 1fr); }\n\n  .lucide {\n    stroke-width: 1.75;\n  }\n}\n\nhtml[data-theme-reveal]::view-transition-old(root),\n  html[data-theme-reveal]::view-transition-new(root) {\n  mix-blend-mode: normal;\n  animation: none;\n}\n\nhtml[data-theme-reveal=\"circle\"]::view-transition-new(root) {\n  animation: caliper-theme-circle var(--duration-showcase) var(--ease-showcase) both;\n}\n\nhtml[data-theme-reveal=\"seam\"]::view-transition-new(root) {\n  animation: caliper-theme-seam var(--duration-showcase) var(--ease-showcase) both;\n}\n\nhtml[data-theme-reveal=\"wipe\"]::view-transition-new(root) {\n  animation: caliper-theme-wipe var(--duration-showcase) var(--ease-showcase) both;\n}\n@layer components {\n  [data-variant=\"lines\"] { display: grid; width: 100%; max-width: 20rem; }\n  [data-slot=\"page-frame\"] { border: 1px solid var(--border); border-radius: 0.875rem; background: var(--background); padding: 1.5rem; overflow: hidden; min-width: 0; }\n  [data-slot=\"template-frame\"] { border: 1px solid var(--border); border-radius: 0.875rem; background: var(--background); overflow: hidden; min-width: 0; }\n  [data-slot=\"template-bar\"] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 0.75rem; color: var(--muted-foreground); }\n  [data-slot=\"template-bar\"] i { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--border); }\n  [data-slot=\"template-body\"] { max-height: 34rem; overflow: auto; }\n\n  /* ── Backdrops ────────────────────────────────────── */\n  [data-slot=\"block-grid-lines\"] {\n    position: absolute; inset: 0; z-index: 0; pointer-events: none;\n    background-image:\n      linear-gradient(var(--k-line) 1px, transparent 1px),\n      linear-gradient(90deg, var(--k-line) 1px, transparent 1px);\n    background-size: 48px 48px;\n    background-position: center top;\n    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 100%);\n  }\n\n  [data-chart-measuring], [data-chart-measuring] * { transition: none !important; }\n  li[data-state=\"next\"] { color: var(--muted-foreground); }\n\n  /* Depth set start (2026-10-16) */\n  /* Depth set (2026-10-16). Perspective belongs to a part's own stage, never to the page or an app shell. */\n  [data-depth-set] {\n    --depth-near: 800px;\n    --depth-mid: 1000px;\n    --depth-far: 1400px;\n    --depth-step: 24px;\n    --depth-tilt-max: 8deg;\n    position: relative;\n    min-width: 0;\n    container-type: inline-size;\n  }\n}\n\n@keyframes caliper-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes caliper-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes caliper-dialog-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--motion-enter-distance))\n      scale(var(--motion-press-scale));\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes caliper-feedback-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--motion-enter-distance));\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes caliper-feedback-symbol-enter {\n  from {\n    opacity: 0;\n    scale: var(--motion-press-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n\n@keyframes caliper-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes caliper-skeleton-pulse {\n  0%,\n  100% {\n    opacity: 0.45;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n@keyframes caliper-digit-in {\n  from {\n    transform: translateY(-70%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes caliper-calendar-next {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@keyframes caliper-calendar-prev {\n  from {\n    opacity: 0;\n    transform: translateX(-16px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@keyframes caliper-day-select {\n  from {\n    transform: scale(0.86);\n  }\n  to {\n    transform: none;\n  }\n}\n\n@keyframes caliper-reject {\n  0%,\n  100% {\n    transform: none;\n  }\n  35% {\n    transform: translateX(-4px);\n  }\n  70% {\n    transform: translateX(4px);\n  }\n}\n\n@keyframes caliper-menu-enter {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@keyframes caliper-theme-circle {\n  from {\n    clip-path: circle(0 at var(--theme-origin-x) var(--theme-origin-y));\n  }\n  to {\n    clip-path: circle(var(--theme-radius) at var(--theme-origin-x) var(--theme-origin-y));\n  }\n}\n\n@keyframes caliper-theme-seam {\n  from {\n    clip-path: inset(0 50% 0 50%);\n  }\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n@keyframes caliper-theme-wipe {\n  from {\n    clip-path: inset(100% 0 0 0);\n  }\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n@layer components {\n  @keyframes caliper-tab-swap {\n    from {\n      opacity: 0;\n      transform: translateX(\n        calc(var(--tab-direction, 1) * var(--motion-enter-distance))\n      );\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  @keyframes caliper-chart-draw {\n    from {\n      stroke-dasharray: 1;\n      stroke-dashoffset: 1;\n    }\n    to {\n      stroke-dasharray: 1;\n      stroke-dashoffset: 0;\n    }\n  }\n  @keyframes caliper-ring-fill {\n    from {\n      stroke-dasharray: 0 100;\n    }\n  }\n  @keyframes caliper-heat-in {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes caliper-status-in {\n    from {\n      opacity: 0;\n      transform: scaleY(0.4);\n    }\n  }\n  @keyframes caliper-calendar-next {\n    from {\n      opacity: 0;\n      translate: 14px 0;\n    }\n  }\n  @keyframes caliper-calendar-prev {\n    from {\n      opacity: 0;\n      translate: -14px 0;\n    }\n  }\n  @keyframes caliper-skeleton-pulse {\n    50% {\n      opacity: 0.45;\n    }\n  }\n  @keyframes caliper-chip-in {\n    from {\n      opacity: 0;\n      scale: 0.92;\n    }\n  }\n  @keyframes caliper-thread-in {\n    from {\n      opacity: 0;\n      translate: 0 6px;\n    }\n  }\n  @keyframes caliper-pulse-soft {\n    50% {\n      opacity: 0.5;\n    }\n  }\n  @keyframes caliper-scrim-in {\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes rec-pulse { 50% { opacity: 0.25; } }\n  @keyframes vt-pulse { 50% { opacity: 0.45; } }\n  @keyframes think-in { from { opacity: 0; transform: translateY(4px); } }\n  @keyframes caliper-faq-open { from { opacity: 0; translate: 0 -6px; } }\n  @keyframes caliper-unsaved-in { from { opacity: 0; transform: translateY(12px); } }\n  @keyframes caliper-mc-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }\n  @keyframes caliper-mc-grow { from { transform: scale(0); } }\n  @keyframes caliper-mc-rise { from { transform: scaleY(0); } }\n  @keyframes caliper-mc-fill-x { from { transform: scaleX(0); } }\n  @keyframes caliper-mc-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }\n  @keyframes caliper-mc-fade { from { opacity: 0; } }\n  @keyframes caliper-live-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }\n  @keyframes caliper-live-blink { to { opacity: 0.3; } }\n  @keyframes caliper-block-arrive { from { opacity: 0; transform: translateY(calc(var(--motion-showcase-distance) / 2)); } }\n  @keyframes caliper-live-good { from { background-color: color-mix(in srgb, var(--success) 30%, transparent); } }\n  @keyframes caliper-live-bad { from { background-color: color-mix(in srgb, var(--destructive) 28%, transparent); } }\n  @keyframes crm-bar-in { from { transform: scaleX(0); } }\n}\n@keyframes caliper-pop-in { from { opacity: 0; scale: 0.6; } }\n@keyframes caliper-arrive-left { from { opacity: 0; translate: -24px 0; } }\n@keyframes caliper-arrive-right { from { opacity: 0; translate: 24px 0; } }\n@keyframes caliper-panel-forward { from { opacity: 0; translate: 32px 0; } }\n@keyframes caliper-panel-grow { from { opacity: 0; scale: 0.92; } }\n@layer components {\n  @keyframes caliper-panel-in { from { opacity: 0; translate: 8px 0; } }\n  @keyframes caliper-status-in { from { opacity: 0; translate: 0 3px; } }\n  @keyframes caliper-status-in { from { opacity: 0; translate: 0 4px; } }\n  @keyframes caliper-pill-open { from { opacity: 0; transform: translateY(6px) scale(0.97); } }\n}\n"}],"docs":"Import once in app/globals.css, after Tailwind (paths are relative to that file):\n@import \"../styles/caliper/tokens.css\";\n@import \"../styles/caliper/tailwind.css\";\n@import \"../styles/caliper/base.css\";\nEach part imports its own stylesheet."}