{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"theme","type":"registry:style","title":"Detent theme","description":"The tokens every Detent component is drawn with, in light and dark, as one stylesheet beside the components.","author":"Detent","files":[{"path":"components/detent/detent.css","type":"registry:file","target":"components/detent/detent.css","content":"/*\n * Detent's theme: the tokens every Detent component is drawn with (surfaces, inks, lines, the\n * accent, the type scale, radii, elevation) and the few classes and keyframes they use, in\n * light and dark. Dark follows either a .dark class or data-theme=\"dark\" on an ancestor.\n *\n * It follows your shadcn theme: surfaces, inks, lines, the accent, danger and cards read your\n * --background, --foreground, --muted-foreground, --border, --primary, --destructive and --dt-card,\n * with Detent's own values as the fallback. Change yours and Detent changes with it.\n * Detent's accent and card are named dt-accent and dt-card, so they never touch your own.\n * Imported once from your global stylesheet, after Tailwind.\n */\n@theme inline {\n  --color-bg: var(--bg);\n  --color-surface: var(--surface);\n  --color-surface-2: var(--surface-2);\n  --color-line: var(--line);\n  --color-line-strong: var(--line-strong);\n  --color-ink: var(--ink);\n  --color-ink-2: var(--ink-2);\n  --color-ink-3: var(--ink-3);\n  --color-danger: var(--danger);\n  --color-ok: var(--ok);\n  --color-warn: var(--warn);\n  --color-warn-ink: var(--warn-ink);\n  --color-surface-3: var(--surface-3);\n  --color-plate: var(--plate);\n  --color-quiet: var(--quiet);\n  --color-ai-1: var(--ai-ink-1);\n  --color-ai-2: var(--ai-ink-2);\n  --color-ai-3: var(--ai-ink-3);\n  --color-ai-4: var(--ai-ink-4);\n  --color-agents: var(--agents);\n  --color-data: var(--data);\n  --color-inputs: var(--inputs);\n  --color-feedback: var(--feedback);\n  --color-essentials: var(--essentials);\n  --color-marketing: var(--marketing);\n  --color-dt-accent: var(--dt-accent);\n  --color-dt-card: var(--dt-card);\n\n  --shadow-border: var(--elev-border);\n  --shadow-raised: var(--elev-raised);\n  --shadow-float: var(--elev-float);\n  --shadow-modal: var(--elev-modal);\n  --shadow-field: var(--elev-field);\n  --shadow-field-error: var(--elev-field-error);\n\n}\n\n@theme static {\n  --ease-detent: cubic-bezier(0.2, 0.9, 0.25, 1);\n}\n\n@theme {\n  --radius-chip: 6px;\n  --radius-control: 10px;\n  --radius-row: 14px;\n  --radius-menu: 14px;\n  --radius-card: 22px;\n  --radius-panel: 28px;\n\n  --text-caption: 12px;\n  --text-caption--line-height: 16px;\n  --text-caption--letter-spacing: 0em;\n  --text-footnote: 13px;\n  --text-footnote--line-height: 18px;\n  --text-callout: 14px;\n  --text-callout--line-height: 20px;\n  --text-callout--letter-spacing: -0.003em;\n  --text-body: 15px;\n  --text-body--line-height: 23px;\n  --text-body--letter-spacing: -0.01em;\n  --text-lead: 17px;\n  --text-lead--line-height: 27px;\n  --text-lead--letter-spacing: -0.015em;\n  --text-headline: 15px;\n  --text-headline--line-height: 20px;\n  --text-headline--letter-spacing: -0.01em;\n  --text-headline--font-weight: 500;\n  --text-title: 20px;\n  --text-title--line-height: 26px;\n  --text-title--letter-spacing: -0.022em;\n  --text-title--font-weight: 500;\n  --text-large: 28px;\n  --text-large--line-height: 32px;\n  --text-large--letter-spacing: -0.032em;\n  --text-large--font-weight: 400;\n  --text-display: 40px;\n  --text-display--line-height: 44px;\n  --text-display--letter-spacing: -0.04em;\n  --text-display--font-weight: 400;\n\n  --text-label-12: 12px;\n  --text-label-12--line-height: 16px;\n  --text-label-13: 13px;\n  --text-label-13--line-height: 18px;\n  --text-label-14: 14px;\n  --text-label-14--line-height: 20px;\n  --text-copy-13: 13px;\n  --text-copy-13--line-height: 20px;\n  --text-copy-14: 14px;\n  --text-copy-14--line-height: 22px;\n  --text-heading-16: 16px;\n  --text-heading-16--line-height: 22px;\n  --text-heading-16--letter-spacing: -0.012em;\n  --text-heading-16--font-weight: 600;\n  --text-heading-20: 20px;\n  --text-heading-20--line-height: 26px;\n  --text-heading-20--letter-spacing: -0.02em;\n  --text-heading-20--font-weight: 600;\n  --text-heading-24: 24px;\n  --text-heading-24--line-height: 30px;\n  --text-heading-24--letter-spacing: -0.025em;\n  --text-heading-24--font-weight: 600;\n  --text-heading-32: 32px;\n  --text-heading-32--line-height: 38px;\n  --text-heading-32--letter-spacing: -0.03em;\n  --text-heading-32--font-weight: 600;\n}\n\n:root,\n[data-theme=\"light\"] {\n  color-scheme: light;\n  --bg: var(--background, #ffffff);\n  --surface: var(--background, #ffffff);\n  --surface-2: var(--muted, #f4f4f5);\n  --line: var(--border, rgb(0 0 0 / 0.07));\n  --line-strong: var(--input, rgb(0 0 0 / 0.12));\n  --ink: var(--foreground, #18181b);\n  --ink-2: color-mix(in oklch, var(--foreground, #52525b) 42%, var(--muted-foreground, #52525b));\n  --ink-3: var(--muted-foreground, #6e6e76);\n  --ai-1: #3ec6ff;\n  --ai-2: #6a7bff;\n  --ai-3: #c46bff;\n  --ai-4: #ff7a9c;\n  --ai-5: #ffc86b;\n  --ai-ink-1: #0a72bf;\n  --ai-ink-2: #4f5bea;\n  --ai-ink-3: #9b45d8;\n  --ai-ink-4: #c43563;\n  --ai-halo: 0.32;\n  --quiet: color-mix(in oklch, var(--muted-foreground, #8e8e93) 72%, var(--background, transparent));\n  --agents: #5b4fe0;\n  --data: #135fc8;\n  --inputs: #127541;\n  --feedback: #a8530b;\n  --essentials: #0e6f73;\n  --marketing: #b4236e;\n  --danger: var(--destructive, #e5484d);\n  --ok: #30a46c;\n  --warn: #f5a524;\n  --warn-ink: #b26a00;\n  --surface-3: var(--accent, #ebebed);\n  --plate: #ffffff;\n  --dt-accent: var(--primary, #3d6dff);\n  --dt-accent-ink: color-mix(in oklch, var(--primary, #2f5be6) 86%, var(--foreground, #2f5be6));\n  --focus: color-mix(in oklch, var(--dt-accent) 70%, transparent);\n  --trace: rgb(0 0 0 / 0.22);\n  --pulse: var(--dt-accent);\n  --elev-border: 0 0 0 1px rgb(0 0 0 / 0.08);\n  --elev-raised: 0 0 0 1px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 6px -2px rgb(0 0 0 / 0.05);\n  --elev-raised-hover: 0 0 0 1px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.07);\n  --elev-float: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 12px -6px rgb(0 0 0 / 0.08), 0 20px 36px -14px rgb(0 0 0 / 0.16), 0 0 0 1px var(--bg);\n  --elev-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 24px -8px rgb(0 0 0 / 0.1), 0 32px 64px -16px rgb(0 0 0 / 0.24), 0 0 0 1px var(--bg);\n  --elev-field: 0 0 0 1px var(--line-strong), 0 0 0 4px color-mix(in oklch, var(--dt-accent) 16%, transparent);\n  --elev-field-error: 0 0 0 1px color-mix(in oklch, var(--danger) 70%, transparent), 0 0 0 4px color-mix(in oklch, var(--danger) 14%, transparent);\n  --folder-back: #d8d5ce;\n  --folder-front: #eae8e3;\n  --folder-ink: #8b8880;\n  --sheet: var(--popover, #ffffff);\n  --sheet-line: #e9e7e2;\n}\n\n:is(.dark, [data-theme=\"dark\"]) {\n  color-scheme: dark;\n  --bg: var(--background, #1a1a1d);\n  --surface: var(--background, #232327);\n  --surface-2: var(--muted, #27272c);\n  --surface-3: var(--accent, #303036);\n  --plate: #37373d;\n  --line: var(--border, rgb(255 255 255 / 0.09));\n  --line-strong: var(--input, rgb(255 255 255 / 0.13));\n  --ink: var(--foreground, #f5f5f7);\n  --ink-2: color-mix(in oklch, var(--foreground, #a1a1a6) 42%, var(--muted-foreground, #a1a1a6));\n  --ink-3: var(--muted-foreground, #909096);\n  --quiet: color-mix(in oklch, var(--muted-foreground, #7c7c82) 72%, var(--background, transparent));\n  --ai-1: #3ec6ff;\n  --ai-2: #6a7bff;\n  --ai-3: #c46bff;\n  --ai-4: #ff7a9c;\n  --ai-5: #ffc86b;\n  --ai-ink-1: #6cc8ff;\n  --ai-ink-2: #9aa3ff;\n  --ai-ink-3: #d29bff;\n  --ai-ink-4: #ff8fb1;\n  --ai-halo: 0.5;\n  --agents: #a49bff;\n  --data: #6ea8ff;\n  --inputs: #4fcf8a;\n  --feedback: #ffad5c;\n  --essentials: #4fd2d2;\n  --marketing: #ff7ab8;\n  --danger: var(--destructive, #ff6166);\n  --ok: #45d483;\n  --warn: #f5a524;\n  --warn-ink: #f7b955;\n  --dt-accent: var(--primary, #5b8cff);\n  --dt-accent-ink: color-mix(in oklch, var(--primary, #84a8ff) 86%, var(--foreground, #84a8ff));\n  --focus: color-mix(in oklch, var(--dt-accent) 80%, transparent);\n  --trace: rgb(255 255 255 / 0.4);\n  --pulse: #ffffff;\n  --elev-border: 0 0 0 1px rgb(255 255 255 / 0.145), 0 0 0 1px var(--bg);\n  --elev-raised: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(255 255 255 / 0.145), 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px var(--bg);\n  --elev-raised-hover: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.22), 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px var(--bg);\n  --elev-float: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.145), 0 8px 24px -8px rgb(0 0 0 / 0.8), 0 0 0 1px var(--bg);\n  --elev-modal: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.145), 0 16px 40px -12px rgb(0 0 0 / 0.9), 0 0 0 1px var(--bg);\n  --elev-field: 0 0 0 1px rgb(255 255 255 / 0.32), 0 0 0 4px color-mix(in oklch, var(--dt-accent) 22%, transparent);\n  --elev-field-error: 0 0 0 1px color-mix(in oklch, var(--danger) 70%, transparent), 0 0 0 4px color-mix(in oklch, var(--danger) 18%, transparent);\n  --folder-back: #1f1f22;\n  --folder-front: #2a2a2e;\n  --folder-ink: #a1a1a6;\n  --sheet: var(--popover, #ececec);\n  --sheet-line: #d6d6d6;\n}\n\n:root,\n[data-theme=\"light\"] {\n  --ground: #eeede9;\n  --leaf: #fdfdfc;\n  --nav: var(--leaf);\n  --paper: #f6f5f2;\n  --mount: #f1f0ed;\n  --bezel: #ffffff;\n  --well: #ffffff;\n  --well-tint: 0%;\n  --well-glow: linear-gradient(transparent, transparent);\n  --shell: #eeede9;\n  --shell-hover: rgb(0 0 0 / 0.04);\n  --shell-on: rgb(0 0 0 / 0.065);\n  --panel: #ffffff;\n  --panel-edge: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);\n  --leaf-edge: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(0 0 0 / 0.03);\n  --dt-card-edge: 0 0 0 1px rgb(21 22 26 / 0.05), 0 1px 2px rgb(21 22 26 / 0.04);\n  --dt-card-lift: 0 0 0 1px rgb(21 22 26 / 0.07), 0 30px 60px -30px rgb(30 30 60 / 0.28);\n}\n:is(.dark, [data-theme=\"dark\"]) {\n    --ground: #141416;\n  --leaf: #1a1a1d;\n  --nav: #2e2e31;\n  --paper: #1a1a1d;\n  --mount: #26262a;\n  --bezel: #2a2a2f;\n  --well: #1a1a1d;\n  --well-tint: 0%;\n  --well-glow: linear-gradient(transparent, transparent);\n  --shell: #141416;\n  --shell-hover: rgb(255 255 255 / 0.05);\n  --shell-on: rgb(255 255 255 / 0.08);\n  --panel: #1a1a1e;\n  --panel-edge: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px rgb(255 255 255 / 0.09);\n  --leaf-edge: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(255 255 255 / 0.08);\n  --dt-card-edge: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px rgb(255 255 255 / 0.1);\n  --dt-card-lift: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.16), 0 30px 60px -30px rgb(0 0 0 / 0.9);\n}\n\n.pro-app {\n  --spacing: 0.225rem;\n  --radius-chip: 5px;\n  --radius-control: 7px;\n  --radius-row: 9px;\n  --radius-menu: 10px;\n  --radius-card: 12px;\n  --radius-panel: 16px;\n  --text-caption: 11.5px;\n  --text-caption--line-height: 15px;\n  --text-footnote: 12px;\n  --text-footnote--line-height: 17px;\n  --text-callout: 13px;\n  --text-callout--line-height: 18px;\n  --text-body: 14px;\n  --text-body--line-height: 21px;\n  --text-headline: 13.5px;\n  --text-headline--line-height: 18px;\n  --text-title: 16px;\n  --text-title--line-height: 21px;\n  --text-large: 22px;\n  --text-large--line-height: 27px;\n  --text-display: 30px;\n  --text-display--line-height: 34px;\n\n  --surface: light-dark(#fdfdfc, #0d0d0d);\n  --surface-2: light-dark(#f2f1ee, #161616);\n  --surface-3: light-dark(#e7e5e1, #232323);\n  --dt-card: light-dark(#f6f5f2, #000000);\n  --plate: light-dark(#ffffff, #262626);\n  --line: light-dark(rgb(40 32 16 / 0.075), rgb(255 255 255 / 0.09));\n  --line-strong: light-dark(rgb(40 32 16 / 0.13), rgb(255 255 255 / 0.145));\n  --ink: light-dark(#1c1b19, #ededed);\n  --ink-2: light-dark(#54514c, #a1a1a1);\n  --ink-3: light-dark(#6f6b65, #8f8f8f);\n  --elev-border: 0 0 0 1px light-dark(rgb(40 32 16 / 0.09), rgb(255 255 255 / 0.145));\n  --elev-raised: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.04)), 0 0 0 1px light-dark(rgb(40 32 16 / 0.09), rgb(255 255 255 / 0.12)), 0 1px 1px light-dark(rgb(40 32 16 / 0.05), rgb(0 0 0 / 0.5));\n  --elev-float: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.05)), 0 0 0 1px light-dark(rgb(40 32 16 / 0.09), rgb(255 255 255 / 0.13)), 0 1px 2px light-dark(rgb(40 32 16 / 0.05), rgb(0 0 0 / 0.5)), 0 6px 14px -6px light-dark(rgb(40 32 16 / 0.1), rgb(0 0 0 / 0.75));\n  --elev-field: 0 0 0 1px var(--line-strong), 0 1px 1px light-dark(rgb(40 32 16 / 0.04), rgb(0 0 0 / 0.3));\n  font-size: 13px;\n  background: var(--app-root, var(--surface));\n  color: var(--ink);\n}\n.pro-app svg[stroke-width=\"2\"] {\n  stroke-width: 1.65px;\n}\n.pro-app {\n  --dt-accent: light-dark(#3a5bf6, #7090ff);\n  --dt-accent-ink: light-dark(#2846d8, #a8b8ff);\n  --focus: color-mix(in oklch, var(--dt-accent) 60%, transparent);\n}\n.pro-app ::selection {\n  background: color-mix(in oklch, var(--dt-accent) 22%, transparent);\n}\n.pro-app {\n  --ai-1: color-mix(in oklch, var(--dt-accent) 52%, white);\n  --ai-2: var(--dt-accent);\n  --ai-3: color-mix(in oklch, var(--dt-accent) 78%, white);\n  --ai-4: color-mix(in oklch, var(--dt-accent) 34%, white);\n  --ai-5: color-mix(in oklch, var(--dt-accent) 16%, white);\n  --ai-ink-1: var(--dt-accent-ink);\n  --ai-ink-2: var(--dt-accent);\n  --ai-ink-3: color-mix(in oklch, var(--dt-accent) 66%, white);\n  --ai-ink-4: var(--dt-accent-ink);\n  --ai-halo: 0.2;\n}\n:is(.dark, [data-theme=\"dark\"]) .pro-app,\n.pro-app:is(.dark, [data-theme=\"dark\"]) {\n  --ai-halo: 0.34;\n}\n:is(.dark, [data-theme=\"dark\"]) [data-theme=\"light\"] .pro-app {\n  --ai-halo: 0.2;\n}\n.lit {\n  box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.04)), inset 0 -1px 0 light-dark(rgb(40 32 16 / 0.04), transparent);\n}\n.pro-app [data-row] {\n  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1);\n}\n.pro-app [data-row]:active {\n  transform: scale(0.985);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pro-app [data-row]:active { transform: none; }\n}\n\n@media (pointer: coarse) {\n  input:not([type='checkbox'], [type='radio'], [type='range'], .pro-app *, [data-fit] *, [data-demo] *),\n  select:not(.pro-app *, [data-fit] *, [data-demo] *),\n  textarea:not(.pro-app *, [data-fit] *, [data-demo] *) {\n    font-size: 16px !important;\n  }\n}\n\n@media (pointer: coarse) {\n  .pro-app :where(button, [role='button'], [role='switch'], [role='tab'], [role='radio'], [role='menuitem'], [role='option'], summary, a.ring-focus):not(.absolute, .fixed, .sticky, [data-hit='off']) {\n    position: relative;\n  }\n  .pro-app :where(button, [role='button'], [role='switch'], [role='tab'], [role='radio'], [role='menuitem'], [role='option'], summary, a.ring-focus):not([data-hit='off'])::after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: max(100%, 36px);\n    height: max(100%, 36px);\n    transform: translate(-50%, -50%);\n  }\n  .pro-app :is([class*='text-[10px]'], [class*='text-[10.5px]']) {\n    font-size: 11px;\n  }\n}\n\n.tnum {\n  font-variant-numeric: tabular-nums;\n}\n\n@utility ring-focus {\n  outline: none;\n  &:focus-visible {\n    outline: 2px solid var(--focus);\n    outline-offset: 2px;\n  }\n}\n.chip {\n  background: var(--chip-bg, light-dark(color-mix(in oklch, var(--chip) var(--chip-wash, 12%), transparent), color-mix(in oklch, var(--chip) 16%, transparent)));\n  box-shadow: inset 0 0 0 1px light-dark(transparent, var(--chip-edge, color-mix(in oklch, var(--chip) 38%, transparent)));\n}\n.chip-plain {\n  --chip-bg: var(--surface-2);\n  --chip-edge: var(--line-strong);\n}\n\n@keyframes sheen {\n  from { background-position: 150% 0; }\n  to { background-position: -50% 0; }\n}\n.sheen {\n  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);\n  background-size: 250% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation: sheen 1.6s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheen { animation: none; color: var(--ink-3); }\n}\n\n.rows > * + * { position: relative; }\n.rows > * + *::before { content: ''; position: absolute; top: 0; right: 0; left: var(--rule-inset, 60px); height: 1px; background: var(--line); pointer-events: none; }\n\n@keyframes word-in {\n  from {\n    opacity: 0;\n    filter: blur(4px);\n  }\n}\n.word-in {\n  animation: word-in 600ms cubic-bezier(0.2, 0.9, 0.25, 1) both;\n}\n\n:root,\n[data-theme=\"light\"] {\n  --dt-card: var(--card, #f7f7f8);\n  --dt-card-light: rgb(255 255 255 / 0.85);\n}\n:is(.dark, [data-theme=\"dark\"]) {\n  --dt-card: var(--card, #000000);\n  --dt-card-light: rgb(255 255 255 / 0.04);\n}\n\n.sink {\n  transition: box-shadow 120ms ease-out;\n}\n.sink:active {\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.22), inset 0 0 0 1px rgb(0 0 0 / 0.06) !important;\n}\n:is(.dark, [data-theme=\"dark\"]) .sink:active {\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.07) !important;\n}\n\n.glass {\n  background: color-mix(in oklch, var(--surface) 80%, transparent) !important;\n  -webkit-backdrop-filter: blur(24px) saturate(1.7);\n  backdrop-filter: blur(24px) saturate(1.7);\n}\n:is(.dark, [data-theme=\"dark\"]) .glass {\n  background: var(--surface) !important;\n  -webkit-backdrop-filter: none;\n  backdrop-filter: none;\n}\n\n@property --ai-turn {\n  syntax: '<angle>';\n  inherits: false;\n  initial-value: 0deg;\n}\n@keyframes ai-turn {\n  to { --ai-turn: 360deg; }\n}\n@keyframes ai-breathe {\n  50% { opacity: calc(var(--ai-halo) * 0.65); }\n}\n.ai-ring {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  padding: 1.5px;\n  background:\n    conic-gradient(from var(--ai-turn), transparent 0deg 170deg, var(--ai-1) 220deg, var(--ai-2) 265deg, var(--ai-3) 305deg, var(--ai-4) 340deg, transparent 360deg),\n    conic-gradient(from calc(0deg - var(--ai-turn)), color-mix(in oklch, var(--ai-1) 40%, transparent), color-mix(in oklch, var(--ai-3) 40%, transparent), color-mix(in oklch, var(--ai-5) 40%, transparent), color-mix(in oklch, var(--ai-1) 40%, transparent));\n  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);\n  animation: ai-turn 2.8s linear infinite;\n}\n.ai-halo {\n  position: absolute;\n  inset: 2px;\n  pointer-events: none;\n  background: conic-gradient(from 200deg, var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-4), var(--ai-5), var(--ai-1));\n  filter: blur(22px);\n  opacity: var(--ai-halo);\n  will-change: opacity;\n  animation: ai-breathe 3.2s ease-in-out infinite;\n}\n@keyframes ai-flow {\n  to { background-position: -200% 0; }\n}\n.ai-text {\n  background: linear-gradient(90deg, var(--ai-ink-1), var(--ai-ink-2), var(--ai-ink-3), var(--ai-ink-4), var(--ai-ink-1)) 0 0 / 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation: ai-flow 2.6s linear infinite;\n}\n@keyframes ai-warm {\n  from { color: var(--ai-word, var(--ai-ink-2)); }\n}\n.ai-warm {\n  animation: ai-warm 1100ms cubic-bezier(0.4, 0, 0.6, 1) both;\n}\n.word-in.ai-warm {\n  animation: word-in 600ms cubic-bezier(0.2, 0.9, 0.25, 1) both, ai-warm 1100ms cubic-bezier(0.4, 0, 0.6, 1) both;\n}\n.ai-ring.ai-quiet {\n  background: conic-gradient(from var(--ai-turn), transparent 0deg 190deg, color-mix(in oklch, var(--ink) 34%, transparent) 300deg, transparent 360deg);\n}\n.ai-text.ai-quiet {\n  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%) 0 0 / 250% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  animation: sheen 1.8s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ai-ring, .ai-halo, .ai-text { animation: none; }\n  .ai-text.ai-quiet { animation: none; color: var(--ink-3); }\n  .ai-warm, .word-in.ai-warm { animation: none; }\n}\n\n@keyframes bloom {\n  from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bloom) 55%, transparent), 0 0 0 0 color-mix(in oklch, var(--bloom) 30%, transparent); }\n  to { box-shadow: 0 0 0 var(--bloom-spread) color-mix(in oklch, var(--bloom) 0%, transparent), 0 0 calc(var(--bloom-spread) * 2) calc(var(--bloom-spread) / 2) color-mix(in oklch, var(--bloom) 0%, transparent); }\n}\n.bloom {\n  animation: bloom 720ms cubic-bezier(0.2, 0.9, 0.25, 1) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bloom { animation: none; }\n}\n.glint { transform: translateX(-12px); }\n@keyframes glint {\n  0% { transform: translateX(-12px); }\n  26%, 100% { transform: translateX(36px); }\n}\n\n:root,\n[data-theme=\"light\"] {\n  --overlays: #5a6400;\n}\n:is(.dark, [data-theme=\"dark\"]) {\n  --overlays: #c6d45a;\n}\n@theme inline {\n  --color-overlays: var(--overlays);\n}\n\n@keyframes sheen {\n  from { background-position: 150% 0; }\n  to { background-position: -50% 0; }\n}\n"}],"css":{"@import \"../components/detent/detent.css\"":{}},"docs":"Detent respects reduced motion when your app is wrapped once in <MotionConfig reducedMotion=\"user\"> from motion/react, in your root layout."}