@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,1949 @@
+@import "@fontsource-variable/inter/opsz.css";
+@layer properties, theme, base, shortcuts, default;
+/* layer: properties */
+@layer properties{
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-border-opacity:100%;--un-border-top-opacity:100%;--un-ease:initial;--un-fill-opacity:100%;--un-leading:initial;--un-line-opacity:100%;--un-ring-offset-opacity:100%;--un-ring-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-stroke-opacity:100%;--un-text-opacity:100%;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;}}
+@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-leading{syntax:"*";inherits:false;}
+@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}
+@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-border-top-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-line-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-inset-ring-color{syntax:"*";inherits:false;}
+@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
+@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
+@property --un-inset-shadow-color{syntax:"*";inherits:false;}
+@property --un-ring-color{syntax:"*";inherits:false;}
+@property --un-ring-inset{syntax:"*";inherits:false;}
+@property --un-ring-offset-color{syntax:"*";inherits:false;}
+@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
+@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}
+@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
+@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
+@property --un-shadow-color{syntax:"*";inherits:false;}
+@property --un-translate-x{syntax:"*";inherits:false;initial-value:0;}
+@property --un-translate-y{syntax:"*";inherits:false;initial-value:0;}
+@property --un-translate-z{syntax:"*";inherits:false;initial-value:0;}
+@property --un-scale-x{syntax:"*";inherits:false;initial-value:1;}
+@property --un-scale-y{syntax:"*";inherits:false;initial-value:1;}
+@property --un-scale-z{syntax:"*";inherits:false;initial-value:1;}
+@property --un-ease{syntax:"*";inherits:false;}
+@property --un-fill-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-stroke-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
+@property --un-backdrop-blur{syntax:"*";inherits:false;}
+@property --un-backdrop-brightness{syntax:"*";inherits:false;}
+@property --un-backdrop-contrast{syntax:"*";inherits:false;}
+@property --un-backdrop-grayscale{syntax:"*";inherits:false;}
+@property --un-backdrop-hue-rotate{syntax:"*";inherits:false;}
+@property --un-backdrop-invert{syntax:"*";inherits:false;}
+@property --un-backdrop-opacity{syntax:"*";inherits:false;}
+@property --un-backdrop-saturate{syntax:"*";inherits:false;}
+@property --un-backdrop-sepia{syntax:"*";inherits:false;}
+@property --un-blur{syntax:"*";inherits:false;}
+@property --un-brightness{syntax:"*";inherits:false;}
+@property --un-contrast{syntax:"*";inherits:false;}
+@property --un-drop-shadow{syntax:"*";inherits:false;}
+@property --un-grayscale{syntax:"*";inherits:false;}
+@property --un-hue-rotate{syntax:"*";inherits:false;}
+@property --un-invert{syntax:"*";inherits:false;}
+@property --un-saturate{syntax:"*";inherits:false;}
+@property --un-sepia{syntax:"*";inherits:false;}
+@property --un-numeric-figure{syntax:"*";inherits:false;}
+@property --un-numeric-fraction{syntax:"*";inherits:false;}
+@property --un-numeric-spacing{syntax:"*";inherits:false;}
+@property --un-ordinal{syntax:"*";inherits:false;}
+@property --un-slashed-zero{syntax:"*";inherits:false;}
+}
+/* layer: theme */
+@layer theme{
+:root, :host { --radius-DEFAULT: 0.25rem; --spacing: 0.25rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --radius-none: 0; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --leading-tight: 1.25; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --leading-relaxed: 1.625; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --radius-md: 0.375rem; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
+}
+/* layer: base */
+@layer base{
+ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring:where(:not(iframe)) { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
+}
+/* layer: shortcuts */
+@layer shortcuts{
+.container{width:100%;}
+@media (min-width: 40rem){
+.container{max-width:40rem;}
+}
+@media (min-width: 48rem){
+.container{max-width:48rem;}
+}
+@media (min-width: 64rem){
+.container{max-width:64rem;}
+}
+@media (min-width: 80rem){
+.container{max-width:80rem;}
+}
+@media (min-width: 96rem){
+.container{max-width:96rem;}
+}
+}
+/* layer: default */
+@layer default{
+.data-\[placeholder\]\:text-muted-foreground[data-placeholder],
+.text-muted-foreground{color:color-mix(in srgb, var(--muted-foreground) var(--un-text-opacity), transparent);}
+.group\/row.is-active .group-\[\.is-active\]\/row\:text-foreground,
+.text-foreground,
+.group\/field:focus-within .group-focus-within\/field\:text-foreground,
+.group\/search:focus-within .group-focus-within\/search\:text-foreground,
+.group:hover .group-hover\:text-foreground,
+.group\/field:hover .group-hover\/field\:text-foreground,
+.group\/search:hover .group-hover\/search\:text-foreground{color:color-mix(in srgb, var(--foreground) var(--un-text-opacity), transparent);}
+.text-background{color:color-mix(in srgb, var(--background) var(--un-text-opacity), transparent);}
+.text-background\/80{color:color-mix(in srgb, var(--background) 80%, transparent);}
+.text-destructive{color:color-mix(in srgb, var(--destructive) var(--un-text-opacity), transparent);}
+.text-foreground\/85{color:color-mix(in srgb, var(--foreground) 85%, transparent);}
+.text-muted-foreground\/50{color:color-mix(in srgb, var(--muted-foreground) 50%, transparent);}
+.text-muted-foreground\/70{color:color-mix(in srgb, var(--muted-foreground) 70%, transparent);}
+.text-status-action{color:color-mix(in srgb, var(--status-action) var(--un-text-opacity), transparent);}
+.text-status-error{color:color-mix(in srgb, var(--status-error) var(--un-text-opacity), transparent);}
+.text-status-info{color:color-mix(in srgb, var(--status-info) var(--un-text-opacity), transparent);}
+.text-status-loading{color:color-mix(in srgb, var(--status-loading) var(--un-text-opacity), transparent);}
+.text-status-success{color:color-mix(in srgb, var(--status-success) var(--un-text-opacity), transparent);}
+.text-status-warning{color:color-mix(in srgb, var(--status-warning) var(--un-text-opacity), transparent);}
+.text-syntax-class{color:color-mix(in srgb, var(--syntax-class) var(--un-text-opacity), transparent);}
+.text-syntax-comment{color:color-mix(in srgb, var(--syntax-comment) var(--un-text-opacity), transparent);}
+.text-syntax-entity{color:color-mix(in srgb, var(--syntax-entity) var(--un-text-opacity), transparent);}
+.text-syntax-identifier{color:color-mix(in srgb, var(--syntax-identifier) var(--un-text-opacity), transparent);}
+.text-syntax-jsx{color:color-mix(in srgb, var(--syntax-jsx) var(--un-text-opacity), transparent);}
+.text-syntax-keyword{color:color-mix(in srgb, var(--syntax-keyword) var(--un-text-opacity), transparent);}
+.text-syntax-property{color:color-mix(in srgb, var(--syntax-property) var(--un-text-opacity), transparent);}
+.text-syntax-sign{color:color-mix(in srgb, var(--syntax-sign) var(--un-text-opacity), transparent);}
+.text-syntax-string{color:color-mix(in srgb, var(--syntax-string) var(--un-text-opacity), transparent);}
+.text-transparent{color:transparent;}
+.hover\:text-foreground:hover{color:color-mix(in srgb, var(--foreground) var(--un-text-opacity), transparent);}
+.hover\:text-muted-foreground:hover{color:color-mix(in srgb, var(--muted-foreground) var(--un-text-opacity), transparent);}
+.placeholder\:text-muted-foreground::placeholder{color:color-mix(in srgb, var(--muted-foreground) var(--un-text-opacity), transparent);}
+.leading-4\.5{--un-leading:calc(var(--spacing) * 4.5);line-height:calc(var(--spacing) * 4.5);}
+.leading-5{--un-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5);}
+.leading-6{--un-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6);}
+.leading-none{--un-leading:var(--leading-none);line-height:var(--leading-none);}
+.leading-normal{--un-leading:var(--leading-normal);line-height:var(--leading-normal);}
+.leading-relaxed{--un-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);}
+.leading-snug{--un-leading:var(--leading-snug);line-height:var(--leading-snug);}
+.leading-tight{--un-leading:var(--leading-tight);line-height:var(--leading-tight);}
+.tracking-wide{--un-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);}
+.font-\[inherit\]{font-family:inherit;}
+.font-mono{font-family:var(--font-mono);}
+.font-sans{font-family:var(--font-sans);}
+.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
+.m-0{margin:calc(var(--spacing) * 0);}
+.m\[1\]{margin:1;}
+.-mx-1{margin-inline:calc(var(--spacing) * -1);}
+.-mx-2{margin-inline:calc(var(--spacing) * -2);}
+.-my-1{margin-block:calc(var(--spacing) * -1);}
+.mx{margin-inline:calc(var(--spacing) * 4);}
+.mx-1{margin-inline:calc(var(--spacing) * 1);}
+.mx-2{margin-inline:calc(var(--spacing) * 2);}
+.mx-auto{margin-inline:auto;}
+.my-1{margin-block:calc(var(--spacing) * 1);}
+.my-auto{margin-block:auto;}
+.-mb-\[0\.25em\]{margin-bottom:-0.25em;}
+.-ml-0\.5{margin-left:calc(var(--spacing) * -0.5);}
+.-ml-1{margin-left:calc(var(--spacing) * -1);}
+.-mr-0\.5{margin-right:calc(var(--spacing) * -0.5);}
+.-mt-\[0\.25em\]{margin-top:-0.25em;}
+.-mt-1{margin-top:calc(var(--spacing) * -1);}
+.\[\&\>\*\]\:mb-0>*{margin-bottom:calc(var(--spacing) * 0);}
+.\[\&\>\*\+\*\]\:-mt-px>*+*{margin-top:-1px;}
+.mb-0\.5{margin-bottom:calc(var(--spacing) * 0.5);}
+.mb-2{margin-bottom:calc(var(--spacing) * 2);}
+.mb-4{margin-bottom:calc(var(--spacing) * 4);}
+.me{margin-inline-end:calc(var(--spacing) * 4);}
+.ml-\[15px\]{margin-left:15px;}
+.ml-1{margin-left:calc(var(--spacing) * 1);}
+.ml-auto{margin-left:auto;}
+.mr-1{margin-right:calc(var(--spacing) * 1);}
+.mt-0\.5{margin-top:calc(var(--spacing) * 0.5);}
+.mt-2{margin-top:calc(var(--spacing) * 2);}
+.mt-3{margin-top:calc(var(--spacing) * 3);}
+.mt-6{margin-top:calc(var(--spacing) * 6);}
+.mt-auto{margin-top:auto;}
+.data-\[empty\]\:p-0[data-empty],
+.p-0{padding:calc(var(--spacing) * 0);}
+.p-0\.5{padding:calc(var(--spacing) * 0.5);}
+.p-1{padding:calc(var(--spacing) * 1);}
+.p-2{padding:calc(var(--spacing) * 2);}
+.p-3{padding:calc(var(--spacing) * 3);}
+.p-4{padding:calc(var(--spacing) * 4);}
+.p-6{padding:calc(var(--spacing) * 6);}
+.\!px-0{padding-inline:calc(var(--spacing) * 0) !important;}
+.\[\&\:not\(\:empty\)\]\:py-6:not(:empty),
+.py-6{padding-block:calc(var(--spacing) * 6);}
+.px,
+.px-4{padding-inline:calc(var(--spacing) * 4);}
+.px-0\.5{padding-inline:calc(var(--spacing) * 0.5);}
+.px-1,
+.px1{padding-inline:calc(var(--spacing) * 1);}
+.px-1\.5{padding-inline:calc(var(--spacing) * 1.5);}
+.px-2{padding-inline:calc(var(--spacing) * 2);}
+.px-2\.5{padding-inline:calc(var(--spacing) * 2.5);}
+.px-3{padding-inline:calc(var(--spacing) * 3);}
+.px0{padding-inline:calc(var(--spacing) * 0);}
+.py-\[5px\]{padding-block:5px;}
+.py-1{padding-block:calc(var(--spacing) * 1);}
+.py-1\.5{padding-block:calc(var(--spacing) * 1.5);}
+.py-2{padding-block:calc(var(--spacing) * 2);}
+.py-2\.5{padding-block:calc(var(--spacing) * 2.5);}
+.py-3{padding-block:calc(var(--spacing) * 3);}
+.py-3\.5{padding-block:calc(var(--spacing) * 3.5);}
+.\[\&_\[data-slot\=card-header\]\]\:pr-10 [data-slot=card-header],
+.\[\&\:focus-within_\[data-slot\=card-header\]\]\:pr-10:focus-within [data-slot=card-header],
+.\[\&\:hover_\[data-slot\=card-header\]\]\:pr-10:hover [data-slot=card-header]{padding-right:calc(var(--spacing) * 10);}
+.\[\&_\[role\=menuitem\]\]\:pl-2 [role=menuitem],
+.\[\&_\[role\=menuitemradio\]\]\:pl-2 [role=menuitemradio],
+.pl-2{padding-left:calc(var(--spacing) * 2);}
+.\[\&_\[role\=menuitem\]\]\:pr-1\.5 [role=menuitem],
+.\[\&_\[role\=menuitemradio\]\]\:pr-1\.5 [role=menuitemradio],
+.pr-1\.5{padding-right:calc(var(--spacing) * 1.5);}
+.group\/menu-item:has([data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])) .group-has-\[\[data-sidebar\=menu-action\]\:is\(\[data-state\=open\]\,\[data-popup-open\]\,\[aria-expanded\=true\]\)\]\/menu-item\:pr-\[var\(--row-gutter-hover\)\],
+.group\/menu-sub-item:has([data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])) .group-has-\[\[data-sidebar\=menu-action\]\:is\(\[data-state\=open\]\,\[data-popup-open\]\,\[aria-expanded\=true\]\)\]\/menu-sub-item\:pr-\[var\(--row-gutter-hover\)\],
+.group\/menu-item:focus-within .group-focus-within\/menu-item\:pr-\[var\(--row-gutter-hover\)\],
+.group\/menu-sub-item:focus-within .group-focus-within\/menu-sub-item\:pr-\[var\(--row-gutter-hover\)\],
+.group\/menu-item:hover .group-hover\/menu-item\:pr-\[var\(--row-gutter-hover\)\],
+.group\/menu-sub-item:hover .group-hover\/menu-sub-item\:pr-\[var\(--row-gutter-hover\)\]{padding-right:var(--row-gutter-hover);}
+.pb-\[0\.25em\]{padding-bottom:0.25em;}
+.pb-1{padding-bottom:calc(var(--spacing) * 1);}
+.pb-2{padding-bottom:calc(var(--spacing) * 2);}
+.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5);}
+.pb-3{padding-bottom:calc(var(--spacing) * 3);}
+.pb-4{padding-bottom:calc(var(--spacing) * 4);}
+.pb-6{padding-bottom:calc(var(--spacing) * 6);}
+.pl-\[7px\]{padding-left:7px;}
+.pl-0{padding-left:calc(var(--spacing) * 0);}
+.pl-1{padding-left:calc(var(--spacing) * 1);}
+.pl-1\.5{padding-left:calc(var(--spacing) * 1.5);}
+.pl-2\.5{padding-left:calc(var(--spacing) * 2.5);}
+.pl-3{padding-left:calc(var(--spacing) * 3);}
+.pl-4{padding-left:calc(var(--spacing) * 4);}
+.pl-8{padding-left:calc(var(--spacing) * 8);}
+.pr-\[var\(--group-actions-pad\)\]{padding-right:var(--group-actions-pad);}
+.pr-\[var\(--row-gutter\)\]{padding-right:var(--row-gutter);}
+.pr-0\.5{padding-right:calc(var(--spacing) * 0.5);}
+.pr-12{padding-right:calc(var(--spacing) * 12);}
+.pr-2{padding-right:calc(var(--spacing) * 2);}
+.pr-2\.5{padding-right:calc(var(--spacing) * 2.5);}
+.pr-3{padding-right:calc(var(--spacing) * 3);}
+.pr-4{padding-right:calc(var(--spacing) * 4);}
+.pt-\[0\.25em\]{padding-top:0.25em;}
+.pt-1{padding-top:calc(var(--spacing) * 1);}
+.pt-1\.5{padding-top:calc(var(--spacing) * 1.5);}
+.pt-2{padding-top:calc(var(--spacing) * 2);}
+.pt-2\.5{padding-top:calc(var(--spacing) * 2.5);}
+.pt-3{padding-top:calc(var(--spacing) * 3);}
+.pt-4{padding-top:calc(var(--spacing) * 4);}
+.pt-6{padding-top:calc(var(--spacing) * 6);}
+.text-center{text-align:center;}
+.text-left{text-align:left;}
+.text-right{text-align:right;}
+.align-middle{vertical-align:middle;}
+.appearance-none{-webkit-appearance:none;appearance:none;}
+.outline-offset-2{outline-offset:2px;}
+.outline{outline-style:var(--un-outline-style);outline-width:1px;}
+.outline-none{--un-outline-style:none;outline-style:none;}
+.focus\:outline-none:focus{--un-outline-style:none;outline-style:none;}
+.b,
+.border{border-width:1px;}
+.\[\&\>\*\]\:border-b>*,
+.border-b{border-bottom-width:1px;}
+.\[\&\>\*\+\*\]\:border-s>*+*,
+.border-s{border-inline-start-width:1px;}
+.border-e{border-inline-end-width:1px;}
+.border-l{border-left-width:1px;}
+.border-r{border-right-width:1px;}
+.border-t{border-top-width:1px;}
+.\[\&\>\*\]\:border-border>*,
+.border-border{border-color:color-mix(in srgb, var(--border) var(--un-border-opacity), transparent);}
+.border-\[1\.5px\]{border-width:1.5px;}
+.border-0{border-width:0px;}
+.border-2{border-width:2px;}
+.border-accent\/40{border-color:color-mix(in srgb, var(--accent) 40%, transparent);}
+.border-background\/30{border-color:color-mix(in srgb, var(--background) 30%, transparent);}
+.border-border\/60{border-color:color-mix(in srgb, var(--border) 60%, transparent);}
+.border-control{border-color:color-mix(in srgb, var(--control-border) var(--un-border-opacity), transparent);}
+.border-destructive\/50{border-color:color-mix(in srgb, var(--destructive) 50%, transparent);}
+.border-focus-ring{border-color:color-mix(in srgb, var(--focus-ring) var(--un-border-opacity), transparent);}
+.border-foreground\/60{border-color:color-mix(in srgb, var(--foreground) 60%, transparent);}
+.border-muted-foreground\/50{border-color:color-mix(in srgb, var(--muted-foreground) 50%, transparent);}
+.border-picker-ring{border-color:color-mix(in srgb, var(--picker-ring) var(--un-border-opacity), transparent);}
+.border-thumb{border-color:color-mix(in srgb, var(--thumb) var(--un-border-opacity), transparent);}
+.border-transparent{border-color:transparent;}
+.hover\:border-destructive\/50:hover{border-color:color-mix(in srgb, var(--destructive) 50%, transparent);}
+.border-t-muted-foreground{border-top-color:color-mix(in srgb, var(--muted-foreground) var(--un-border-top-opacity), transparent);--un-border-top-opacity:var(--un-border-opacity);}
+.data-\[active\]\:rounded-3xl[data-active],
+.rounded-3xl{border-radius:var(--radius-3xl);}
+.data-\[active\]\:rounded-xl[data-active],
+.rounded-xl{border-radius:var(--radius-xl);}
+.rounded{border-radius:var(--radius-DEFAULT);}
+.rounded-\[10px\]{border-radius:10px;}
+.rounded-\[20px\]{border-radius:20px;}
+.rounded-\[22px\]{border-radius:22px;}
+.rounded-\[inherit\]{border-radius:inherit;}
+.rounded-2xl{border-radius:var(--radius-2xl);}
+.rounded-full{border-radius:calc(infinity * 1px);}
+.rounded-lg{border-radius:var(--radius-lg);}
+.rounded-md{border-radius:var(--radius-md);}
+.rounded-none{border-radius:var(--radius-none);}
+.rounded-sm{border-radius:var(--radius-sm);}
+.rounded-xs{border-radius:var(--radius-xs);}
+.after\:rounded-full::after{border-radius:calc(infinity * 1px);}
+.rounded-b-lg{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);}
+.rounded-e-lg{border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg);}
+.rounded-s-lg{border-end-start-radius:var(--radius-lg);border-start-start-radius:var(--radius-lg);}
+.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);}
+.border-none{--un-border-style:none;border-style:none;}
+.border-solid{--un-border-style:solid;border-style:solid;}
+.bg-\[var\(--btn-bg\)\]{background-color:color-mix(in oklab, var(--btn-bg) var(--un-bg-opacity), transparent);}
+.bg-accent{background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent);}
+.bg-accent-hover{background-color:color-mix(in srgb, var(--accent-hover) var(--un-bg-opacity), transparent);}
+.bg-accent\/20{background-color:color-mix(in srgb, var(--accent) 20%, transparent);}
+.bg-accent\/40,
+.dark .dark\:bg-accent\/40{background-color:color-mix(in srgb, var(--accent) 40%, transparent);}
+.bg-active,
+.group:active .group-active\:bg-active{background-color:color-mix(in srgb, var(--active) var(--un-bg-opacity), transparent);}
+.bg-background{background-color:color-mix(in srgb, var(--background) var(--un-bg-opacity), transparent);}
+.bg-border{background-color:color-mix(in srgb, var(--border) var(--un-bg-opacity), transparent);}
+.bg-border\/60{background-color:color-mix(in srgb, var(--border) 60%, transparent);}
+.bg-brand{background-color:color-mix(in srgb, var(--brand) var(--un-bg-opacity), transparent);}
+.bg-brand-hover{background-color:color-mix(in srgb, var(--brand-hover) var(--un-bg-opacity), transparent);}
+.bg-card\/70{background-color:color-mix(in srgb, var(--card) 70%, transparent);}
+.bg-current{background-color:currentColor;}
+.bg-foreground{background-color:color-mix(in srgb, var(--foreground) var(--un-bg-opacity), transparent);}
+.bg-foreground\/60{background-color:color-mix(in srgb, var(--foreground) 60%, transparent);}
+.bg-hover,
+.group:hover .group-hover\:bg-hover{background-color:color-mix(in srgb, var(--hover) var(--un-bg-opacity), transparent);}
+.bg-muted{background-color:color-mix(in srgb, var(--muted) var(--un-bg-opacity), transparent);}
+.bg-muted-foreground{background-color:color-mix(in srgb, var(--muted-foreground) var(--un-bg-opacity), transparent);}
+.bg-muted-foreground\/50{background-color:color-mix(in srgb, var(--muted-foreground) 50%, transparent);}
+.bg-overlay\/16{background-color:color-mix(in srgb, rgb(var(--overlay)) 16%, transparent);}
+.bg-overlay\/8{background-color:color-mix(in srgb, rgb(var(--overlay)) 8%, transparent);}
+.bg-scrim{background-color:color-mix(in srgb, var(--scrim) var(--un-bg-opacity), transparent);}
+.bg-selected\/50{background-color:color-mix(in srgb, var(--selected) 50%, transparent);}
+.bg-status-action\/16{background-color:color-mix(in srgb, var(--status-action) 16%, transparent);}
+.bg-status-error{background-color:color-mix(in srgb, var(--status-error) var(--un-bg-opacity), transparent);}
+.bg-status-error\/16{background-color:color-mix(in srgb, var(--status-error) 16%, transparent);}
+.bg-status-info\/16{background-color:color-mix(in srgb, var(--status-info) 16%, transparent);}
+.bg-status-loading\/16{background-color:color-mix(in srgb, var(--status-loading) 16%, transparent);}
+.bg-status-success{background-color:color-mix(in srgb, var(--status-success) var(--un-bg-opacity), transparent);}
+.bg-status-success\/16{background-color:color-mix(in srgb, var(--status-success) 16%, transparent);}
+.bg-status-warning\/16{background-color:color-mix(in srgb, var(--status-warning) 16%, transparent);}
+.bg-surface-1{background-color:color-mix(in srgb, var(--surface-1) var(--un-bg-opacity), transparent);}
+.bg-surface-2{background-color:color-mix(in srgb, var(--surface-2) var(--un-bg-opacity), transparent);}
+.bg-surface-3{background-color:color-mix(in srgb, var(--surface-3) var(--un-bg-opacity), transparent);}
+.bg-surface-4{background-color:color-mix(in srgb, var(--surface-4) var(--un-bg-opacity), transparent);}
+.bg-surface-5{background-color:color-mix(in srgb, var(--surface-5) var(--un-bg-opacity), transparent);}
+.bg-surface-6{background-color:color-mix(in srgb, var(--surface-6) var(--un-bg-opacity), transparent);}
+.bg-surface-7{background-color:color-mix(in srgb, var(--surface-7) var(--un-bg-opacity), transparent);}
+.bg-surface-8{background-color:color-mix(in srgb, var(--surface-8) var(--un-bg-opacity), transparent);}
+.bg-thumb{background-color:color-mix(in srgb, var(--thumb) var(--un-bg-opacity), transparent);}
+.bg-transparent{background-color:transparent;}
+.dark .dark\:bg-accent\/12{background-color:color-mix(in srgb, var(--accent) 12%, transparent);}
+.data-\[active\]\:bg-muted\/50[data-active],
+.group\/search:hover .group-hover\/search\:bg-muted\/50{background-color:color-mix(in srgb, var(--muted) 50%, transparent);}
+.data-\[invalid\]\:data-\[active\]\:bg-destructive-light\/60[data-active][data-invalid]{background-color:color-mix(in srgb, var(--destructive-light) 60%, transparent);}
+.focus-within\:\!bg-card:focus-within{background-color:color-mix(in srgb, var(--card) var(--un-bg-opacity), transparent) !important;}
+.data-\[invalid\]\:hover\:bg-destructive-light\/60:hover[data-invalid]{background-color:color-mix(in srgb, var(--destructive-light) 60%, transparent);}
+.group:hover .group-hover\:bg-brand\/20{background-color:color-mix(in srgb, var(--brand) 20%, transparent);}
+.group\/scrollbar:hover .group-hover\/scrollbar\:bg-overlay\/12{background-color:color-mix(in srgb, rgb(var(--overlay)) 12%, transparent);}
+.hover\:after\:bg-foreground\/25:hover::after{background-color:color-mix(in srgb, var(--foreground) 25%, transparent);}
+.hover\:bg-accent\/80:hover{background-color:color-mix(in srgb, var(--accent) 80%, transparent);}
+.hover\:bg-active:hover{background-color:color-mix(in srgb, var(--active) var(--un-bg-opacity), transparent);}
+.hover\:bg-card:hover{background-color:color-mix(in srgb, var(--card) var(--un-bg-opacity), transparent);}
+.hover\:bg-foreground\/90:hover{background-color:color-mix(in srgb, var(--foreground) 90%, transparent);}
+.hover\:bg-hover:hover{background-color:color-mix(in srgb, var(--hover) var(--un-bg-opacity), transparent);}
+.hover\:bg-muted\/50:hover{background-color:color-mix(in srgb, var(--muted) 50%, transparent);}
+.active\:\!bg-overlay\/16:active{background-color:color-mix(in srgb, rgb(var(--overlay)) 16%, transparent) !important;}
+.active\:bg-accent:active{background-color:color-mix(in srgb, var(--accent) var(--un-bg-opacity), transparent);}
+.active\:bg-active:active{background-color:color-mix(in srgb, var(--active) var(--un-bg-opacity), transparent);}
+.active\:bg-foreground\/80:active{background-color:color-mix(in srgb, var(--foreground) 80%, transparent);}
+.enabled\:hover\:bg-hover:hover:enabled{background-color:color-mix(in srgb, var(--hover) var(--un-bg-opacity), transparent);}
+.before\:bg-active::before{background-color:color-mix(in srgb, var(--active) var(--un-bg-opacity), transparent);}
+.after\:bg-current::after{background-color:currentColor;}
+.after\:bg-foreground\/25::after{background-color:color-mix(in srgb, var(--foreground) 25%, transparent);}
+.after\:bg-transparent::after{background-color:transparent;}
+.aria-expanded\:opacity-100[aria-expanded="true"],
+.data-\[hovering\]\:opacity-100[data-hovering],
+.data-\[scrolling\]\:opacity-100[data-scrolling],
+.data-\[state\=open\]\:opacity-100[data-state=open],
+.group\/group-header:has([data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])) .group-has-\[\[data-sidebar\=group-action\]\:is\(\[data-state\=open\]\,\[data-popup-open\]\,\[aria-expanded\=true\]\)\]\/group-header\:opacity-100,
+.has-\[\[data-popup-open\]\]\:opacity-100:has([data-popup-open]),
+.has-\[\[data-state\=open\]\]\:opacity-100:has([data-state=open]),
+.opacity-100,
+.group\/card:focus-within .group-focus-within\/card\:opacity-100,
+.group\/group-header:focus-within .group-focus-within\/group-header\:opacity-100,
+.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100,
+.group\/menu-sub-item:focus-within .group-focus-within\/menu-sub-item\:opacity-100,
+.group\/parent-row:focus-within .group-focus-within\/parent-row\:opacity-100,
+.group\/search:focus-within .group-focus-within\/search\:opacity-100,
+.group\/card:hover .group-hover\/card\:opacity-100,
+.group\/group-header:hover .group-hover\/group-header\:opacity-100,
+.group\/menu-item:hover .group-hover\/menu-item\:opacity-100,
+.group\/menu-sub-item:hover .group-hover\/menu-sub-item\:opacity-100,
+.group\/parent-row:hover .group-hover\/parent-row\:opacity-100,
+.group\/qrow:hover .group-hover\/qrow\:opacity-100,
+.group\/search:hover .group-hover\/search\:opacity-100,
+.group\/tile:hover .group-hover\/tile\:opacity-100,
+.peer\/menu-button:hover~.peer-hover\/menu-button\:opacity-100,
+.peer\/menu-button:focus-visible~.peer-focus-visible\/menu-button\:opacity-100{opacity:100%;}
+.dark .dark\:opacity-12{opacity:12%;}
+.data-\[disabled\]\:opacity-50[data-disabled],
+.opacity-50{opacity:50%;}
+.opacity-0{opacity:0%;}
+.opacity-16{opacity:16%;}
+.opacity-20{opacity:20%;}
+.opacity-30{opacity:30%;}
+.opacity-55{opacity:55%;}
+.focus-within\:opacity-100:focus-within{opacity:100%;}
+.hover\:opacity-100:hover{opacity:100%;}
+.focus-visible\:opacity-100:focus-visible{opacity:100%;}
+.disabled\:opacity-50:disabled{opacity:50%;}
+.\@container{container-type:inline-size;}
+.underline{text-decoration-line:underline;}
+.hover\:underline:hover{text-decoration-line:underline;}
+.decoration-border{text-decoration-color:color-mix(in srgb, var(--border) var(--un-line-opacity), transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--border) var(--un-line-opacity), transparent);}
+.hover\:decoration-foreground:hover{text-decoration-color:color-mix(in srgb, var(--foreground) var(--un-line-opacity), transparent);-webkit-text-decoration-color:color-mix(in srgb, var(--foreground) var(--un-line-opacity), transparent);}
+.underline-offset-4{text-underline-offset:4px;}
+.flex{display:flex;}
+.inline-flex{display:inline-flex;}
+.flex-1{flex:1 1 0%;}
+.flex-auto{flex:1 1 auto;}
+.\[\&_svg\]\:shrink-0 svg,
+.flex-shrink-0,
+.shrink-0{flex-shrink:0;}
+.flex-row{flex-direction:row;}
+.flex-col{flex-direction:column;}
+.flex-col-reverse{flex-direction:column-reverse;}
+.flex-wrap{flex-wrap:wrap;}
+.\[\&_\[role\=menuitem\]\]\:gap-2 [role=menuitem],
+.\[\&_\[role\=menuitemradio\]\]\:gap-2 [role=menuitemradio],
+.gap-2{gap:calc(var(--spacing) * 2);}
+.gap-\[inherit\]{gap:inherit;}
+.gap-0{gap:calc(var(--spacing) * 0);}
+.gap-0\.5{gap:calc(var(--spacing) * 0.5);}
+.gap-1{gap:calc(var(--spacing) * 1);}
+.gap-1\.5{gap:calc(var(--spacing) * 1.5);}
+.gap-2\.5{gap:calc(var(--spacing) * 2.5);}
+.gap-3{gap:calc(var(--spacing) * 3);}
+.gap-4{gap:calc(var(--spacing) * 4);}
+.gap-x-2{column-gap:calc(var(--spacing) * 2);}
+.gap-y-1{row-gap:calc(var(--spacing) * 1);}
+.grid{display:grid;}
+.inline-grid{display:inline-grid;}
+.row-span-2{grid-row:span 2/span 2;}
+.col-start-1{grid-column-start:1;}
+.col-start-2{grid-column-start:2;}
+.row-start-1{grid-row-start:1;}
+.auto-rows-min{grid-auto-rows:min-content;}
+.grid-cols-\[minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr);}
+.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
+.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
+.grid-rows-subgrid{grid-template-rows:subgrid;}
+.\[\&_svg\]\:size-\[var\(--icon-size\)\] svg{width:var(--icon-size);height:var(--icon-size);}
+.size-\[5px\]{width:5px;height:5px;}
+.size-0{width:calc(var(--spacing) * 0);height:calc(var(--spacing) * 0);}
+.size-1{width:calc(var(--spacing) * 1);height:calc(var(--spacing) * 1);}
+.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);}
+.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2);}
+.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5);}
+.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);}
+.size-40{width:calc(var(--spacing) * 40);height:calc(var(--spacing) * 40);}
+.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);}
+.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);}
+.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7);}
+.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);}
+.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9);}
+.size-full{width:100%;height:100%;}
+.after\:size-1::after{width:calc(var(--spacing) * 1);height:calc(var(--spacing) * 1);}
+.\!h-\[15px\]{height:15px !important;}
+.\!h-\[19px\]{height:19px !important;}
+.\!h-auto{height:auto !important;}
+.\!w-\[15px\]{width:15px !important;}
+.\!w-\[19px\]{width:19px !important;}
+.\[\&_button\.w-7\]\:w-6 button.w-7,
+.group\/group-header:has([data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])) .group-has-\[\[data-sidebar\=group-action\]\:is\(\[data-state\=open\]\,\[data-popup-open\]\,\[aria-expanded\=true\]\)\]\/group-header\:w-6,
+.w-6,
+.group\/group-header:focus-within .group-focus-within\/group-header\:w-6,
+.group\/group-header:hover .group-hover\/group-header\:w-6{width:calc(var(--spacing) * 6);}
+.\[\&_button\]\:h-6 button,
+.h-6{height:calc(var(--spacing) * 6);}
+.\[\&_svg\]\:h-3\.5 svg,
+.h-3\.5{height:calc(var(--spacing) * 3.5);}
+.\[\&_svg\]\:h-4 svg,
+.h-4{height:calc(var(--spacing) * 4);}
+.\[\&_svg\]\:w-3\.5 svg,
+.w-3\.5{width:calc(var(--spacing) * 3.5);}
+.\[\&_svg\]\:w-4 svg,
+.w-4{width:calc(var(--spacing) * 4);}
+.\[\&\>div\[style\]\]\:\!min-w-0>div[style],
+.\[\&\>div\]\:\!min-w-0>div{min-width:calc(var(--spacing) * 0) !important;}
+.h-\[14px\]{height:14px;}
+.h-\[16px\]{height:16px;}
+.h-\[18px\]{height:18px;}
+.h-\[7px\]{height:7px;}
+.h-\[8px\]{height:8px;}
+.h-\[min\(30rem\,65dvh\)\]{height:min(30rem,65dvh);}
+.h-\[var\(--scroll-area-thumb-height\)\]{height:var(--scroll-area-thumb-height);}
+.h-0{height:calc(var(--spacing) * 0);}
+.h-1{height:calc(var(--spacing) * 1);}
+.h-12,
+.h12{height:calc(var(--spacing) * 12);}
+.h-2\.5{height:calc(var(--spacing) * 2.5);}
+.h-3{height:calc(var(--spacing) * 3);}
+.h-5{height:calc(var(--spacing) * 5);}
+.h-56{height:calc(var(--spacing) * 56);}
+.h-7{height:calc(var(--spacing) * 7);}
+.h-8{height:calc(var(--spacing) * 8);}
+.h-80{height:calc(var(--spacing) * 80);}
+.h-9{height:calc(var(--spacing) * 9);}
+.h-full{height:100%;}
+.h-px{height:1px;}
+.h11{height:calc(var(--spacing) * 11);}
+.h2{height:calc(var(--spacing) * 2);}
+.h23{height:calc(var(--spacing) * 23);}
+.max-h-\[calc\(100dvh-4rem\)\]{max-height:calc(100dvh - 4rem);}
+.max-h-\[inherit\]{max-height:inherit;}
+.max-h-\[min\(300px\,var\(--available-height\)\)\]{max-height:min(300px,var(--available-height));}
+.max-h-\[min\(480px\,var\(--available-height\)\)\]{max-height:min(480px,var(--available-height));}
+.max-h-80{max-height:calc(var(--spacing) * 80);}
+.max-w-\[360px\]{max-width:360px;}
+.max-w-\[36rem\]{max-width:36rem;}
+.max-w-\[400px\]{max-width:400px;}
+.max-w-\[480px\]{max-width:480px;}
+.max-w-\[540px\]{max-width:540px;}
+.max-w-\[800px\]{max-width:800px;}
+.max-w-\[880px\]{max-width:880px;}
+.max-w-\[calc\(100\%_\+_8px\)\]{max-width:calc(100% + 8px);}
+.max-w-\[calc\(100vw-1rem\)\]{max-width:calc(100vw - 1rem);}
+.max-w-\[min\(92vw\,20rem\)\]{max-width:min(92vw,20rem);}
+.max-w-full{max-width:100%;}
+.min-h-\[60px\]{min-height:60px;}
+.min-h-0{min-height:calc(var(--spacing) * 0);}
+.min-h-20{min-height:calc(var(--spacing) * 20);}
+.min-h-40{min-height:calc(var(--spacing) * 40);}
+.min-h-7{min-height:calc(var(--spacing) * 7);}
+.min-h-9{min-height:calc(var(--spacing) * 9);}
+.min-w-\[128px\]{min-width:128px;}
+.min-w-\[160px\]{min-width:160px;}
+.min-w-\[240px\]{min-width:240px;}
+.min-w-\[var\(--anchor-width\)\]{min-width:var(--anchor-width);}
+.min-w-0{min-width:calc(var(--spacing) * 0);}
+.min-w-4{min-width:calc(var(--spacing) * 4);}
+.min-w-5{min-width:calc(var(--spacing) * 5);}
+.min-w-6{min-width:calc(var(--spacing) * 6);}
+.min-w-full{min-width:100%;}
+.w-\[14px\]{width:14px;}
+.w-\[16px\]{width:16px;}
+.w-\[23px\]{width:23px;}
+.w-\[240px\]{width:240px;}
+.w-\[26px\]{width:26px;}
+.w-\[5ch\]{width:5ch;}
+.w-\[7px\]{width:7px;}
+.w-\[8px\]{width:8px;}
+.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem);}
+.w-\[calc\(var\(--anchor-width\)_\+_10px\)\]{width:calc(var(--anchor-width) + 10px);}
+.w-\[max\(var\(--anchor-width\,0px\)\,14rem\)\]{width:max(var(--anchor-width,0px),14rem);}
+.w-\[min\(22rem\,calc\(100vw-2rem\)\)\]{width:min(22rem,calc(100vw - 2rem));}
+.w-\[min\(24rem\,calc\(100\%-1rem\)\)\]{width:min(24rem,calc(100% - 1rem));}
+.w-\[var\(--anchor-width\)\]{width:var(--anchor-width);}
+.w-\[var\(--scroll-area-thumb-width\)\]{width:var(--scroll-area-thumb-width);}
+.w-0{width:calc(var(--spacing) * 0);}
+.w-1{width:calc(var(--spacing) * 1);}
+.w-10{width:calc(var(--spacing) * 10);}
+.w-12{width:calc(var(--spacing) * 12);}
+.w-15{width:calc(var(--spacing) * 15);}
+.w-16{width:calc(var(--spacing) * 16);}
+.w-2{width:calc(var(--spacing) * 2);}
+.w-2\.5{width:calc(var(--spacing) * 2.5);}
+.w-28{width:calc(var(--spacing) * 28);}
+.w-3{width:calc(var(--spacing) * 3);}
+.w-5{width:calc(var(--spacing) * 5);}
+.w-56{width:calc(var(--spacing) * 56);}
+.w-7{width:calc(var(--spacing) * 7);}
+.w-72{width:calc(var(--spacing) * 72);}
+.w-9{width:calc(var(--spacing) * 9);}
+.w-full{width:100%;}
+.w-max{width:max-content;}
+.w-px{width:1px;}
+.group\/scrollbar:hover .group-hover\/scrollbar\:h-1\.5{height:calc(var(--spacing) * 1.5);}
+.group\/scrollbar:hover .group-hover\/scrollbar\:w-1\.5{width:calc(var(--spacing) * 1.5);}
+.after\:w-px::after{width:1px;}
+.aspect-\[16\/9\]{aspect-ratio:16/9;}
+.inline{display:inline;}
+.\[\&\>div\[style\]\]\:\!block>div[style],
+.\[\&\>div\]\:\!block>div{display:block !important;}
+.block{display:block;}
+.inline-block{display:inline-block;}
+.contents{display:contents;}
+.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button,
+.hidden{display:none;}
+.empty\:hidden:empty{display:none;}
+.visible{visibility:visible;}
+.invisible{visibility:hidden;}
+.collapse{visibility:collapse;}
+.cursor-default{cursor:default;}
+.disabled\:cursor-default:disabled{cursor:default;}
+.cursor-none{cursor:none;}
+.cursor-pointer{cursor:pointer;}
+.cursor-text{cursor:text;}
+.cursor-grab{cursor:grab;}
+.active\:cursor-grabbing:active{cursor:grabbing;}
+.cursor-col-resize{cursor:col-resize;}
+.cursor-ew-resize{cursor:ew-resize;}
+.group\/card:focus-within .group-focus-within\/card\:pointer-events-auto,
+.group\/card:hover .group-hover\/card\:pointer-events-auto{pointer-events:auto;}
+.focus-visible\:pointer-events-auto:focus-visible{pointer-events:auto;}
+.\[\&_\*\]\:pointer-events-none *,
+.data-\[disabled\]\:pointer-events-none[data-disabled],
+.pointer-events-none{pointer-events:none;}
+.disabled\:pointer-events-none:disabled{pointer-events:none;}
+.resize{resize:both;}
+.resize-none{resize:none;}
+.select-none{-webkit-user-select:none;user-select:none;}
+.whitespace-nowrap{white-space:nowrap;}
+.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.text-ellipsis{text-overflow:ellipsis;}
+.uppercase{text-transform:uppercase;}
+.italic{font-style:italic;}
+.ring,
+.ring-1{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.ring-2{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.focus-within\:ring-1:focus-within{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.focus-visible\:ring-1:focus-visible{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.data-\[active\]\:ring-border[data-active],
+.data-\[disabled\]\:ring-border[data-disabled],
+.ring-border{--un-ring-color:color-mix(in srgb, var(--border) var(--un-ring-opacity), transparent);}
+.data-\[active\]\:ring-transparent[data-active],
+.ring-transparent{--un-ring-color:transparent;}
+.data-\[invalid\]\:\!ring-destructive\/50[data-invalid]{--un-ring-color:color-mix(in srgb, var(--destructive) 50%, transparent) !important;}
+.ring-focus-ring{--un-ring-color:color-mix(in srgb, var(--focus-ring) var(--un-ring-opacity), transparent);}
+.focus-within\:ring-border:focus-within{--un-ring-color:color-mix(in srgb, var(--border) var(--un-ring-opacity), transparent);}
+.focus-within\:ring-focus-ring:focus-within{--un-ring-color:color-mix(in srgb, var(--focus-ring) var(--un-ring-opacity), transparent);}
+.focus-within\:ring-transparent:focus-within{--un-ring-color:transparent;}
+.hover\:ring-border:hover{--un-ring-color:color-mix(in srgb, var(--border) var(--un-ring-opacity), transparent);}
+.hover\:ring-transparent:hover{--un-ring-color:transparent;}
+.focus-visible\:ring-focus-ring:focus-visible{--un-ring-color:color-mix(in srgb, var(--focus-ring) var(--un-ring-opacity), transparent);}
+.focus-visible\:ring-offset-0:focus-visible{--un-ring-offset-width:0px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);}
+.focus-visible\:ring-offset-2:focus-visible{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);}
+.focus-visible\:ring-offset-background:focus-visible{--un-ring-offset-color:color-mix(in srgb, var(--background) var(--un-ring-offset-opacity), transparent);}
+.shadow,
+.shadow\)\,,
+.shadowLevel\)\)\){--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-\[0_0_0_1px_transparent\]{--un-shadow:0 0 0 1px transparent var(--un-shadow-color, );box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-\[0_0_0_1px_var\(--active\)\]{--un-shadow:0 0 0 1px var(--un-shadow-color, var(--active));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-\[0_0_0_1px_var\(--border\)\,inset_0_0_0_0px_var\(--border\)\]{--un-shadow:0 0 0 1px var(--border),inset 0 0 0 0px var(--border);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-\[0_0_0_1px_var\(--btn-bg\)\]{--un-shadow:0 0 0 1px var(--un-shadow-color, var(--btn-bg));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-picker-cursor{--un-shadow:var(--shadow-picker-cursor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-picker-thumb{--un-shadow:var(--shadow-picker-thumb);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-1{--un-shadow:var(--shadow-1);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-2{--un-shadow:var(--shadow-2);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-3{--un-shadow:var(--shadow-3);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-4{--un-shadow:var(--shadow-4);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-5{--un-shadow:var(--shadow-5);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-6{--un-shadow:var(--shadow-6);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-7{--un-shadow:var(--shadow-7);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-surface-8{--un-shadow:var(--shadow-8);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-swatch{--un-shadow:var(--shadow-swatch);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-swatch-hover{--un-shadow:var(--shadow-swatch-hover);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-swatch-selected{--un-shadow:var(--shadow-swatch-selected);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-thumb{--un-shadow:var(--shadow-thumb);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.group:hover .group-hover\:shadow-\[0_0_0_1px_var\(--hover\)\]{--un-shadow:0 0 0 1px var(--un-shadow-color, var(--hover));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.group:active .group-active\:shadow-\[0_0_0_0px_var\(--active\)\]{--un-shadow:0 0 0 0px var(--un-shadow-color, var(--active));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.group:active .group-active\:shadow-\[0_0_0_0px_var\(--border\)\,inset_0_0_0_1px_var\(--border\)\]{--un-shadow:0 0 0 0px var(--border),inset 0 0 0 1px var(--border);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.group:active .group-active\:shadow-\[0_0_0_0px_var\(--btn-bg\)\]{--un-shadow:0 0 0 0px var(--un-shadow-color, var(--btn-bg));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.origin-top{transform-origin:top;}
+.-translate-x-0\.5{--un-translate-x:calc(var(--spacing) * -0.5);translate:var(--un-translate-x) var(--un-translate-y);}
+.-translate-x-1\/2{--un-translate-x:-50%;translate:var(--un-translate-x) var(--un-translate-y);}
+.-translate-y-0\.5{--un-translate-y:calc(var(--spacing) * -0.5);translate:var(--un-translate-x) var(--un-translate-y);}
+.-translate-y-1\/2{--un-translate-y:-50%;translate:var(--un-translate-x) var(--un-translate-y);}
+.-translate-y-px{--un-translate-y:-1px;translate:var(--un-translate-x) var(--un-translate-y);}
+.after\:-translate-x-1\/2::after{--un-translate-x:-50%;translate:var(--un-translate-x) var(--un-translate-y);}
+.-rotate-45{rotate:-45deg;}
+.rotate-180{rotate:180deg;}
+.data-\[active\]\:scale-\[0\.96\][data-active]{--un-scale-x:0.96;--un-scale-y:0.96;scale:var(--un-scale-x) var(--un-scale-y);}
+.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}
+.\[\&_svg\]\:transition-\[stroke-width\] svg,
+.transition-\[stroke-width\]{transition-property:stroke-width;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[background-color\,box-shadow\,opacity\]{transition-property:background-color,box-shadow,opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[background-color\,width\,height\]{transition-property:background-color,width,height;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[background-color\]{transition-property:background-color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[border-color\]{transition-property:border-color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[box-shadow\,background-color\]{transition-property:box-shadow,background-color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[box-shadow\,color\]{transition-property:box-shadow,color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[box-shadow\],
+.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,background-color\,border-radius\,box-shadow\,opacity\]{transition-property:color,background-color,border-radius,box-shadow,opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,background-color\,opacity\]{transition-property:color,background-color,opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,background-color\]{transition-property:color,background-color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,font-variation-settings\]{transition-property:color,font-variation-settings;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,opacity\]{transition-property:color,opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\,stroke-width\]{transition-property:color,stroke-width;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[color\]{transition-property:color;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[font-variation-settings\]{transition-property:font-variation-settings;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[margin\]{transition-property:margin;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[padding\]{transition-property:padding;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-\[transform\],
+.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-all{transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.transition-opacity{transition-property:opacity;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.after\:transition-colors::after{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
+.duration-100{--un-duration:100ms;transition-duration:100ms;}
+.duration-150{--un-duration:150ms;transition-duration:150ms;}
+.data-\[hovering\]\:delay-0[data-hovering],
+.data-\[scrolling\]\:delay-0[data-scrolling]{transition-delay:0s;}
+.ease{--un-ease:var(--ease-DEFAULT);transition-timing-function:var(--ease-DEFAULT);}
+.ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);}
+.ease-out{--un-ease:var(--ease-out);transition-timing-function:var(--ease-out);}
+.\[--btn-bg\:color-mix\(in_oklab\,var\(--foreground\)_80\%\,var\(--background\)\)\],
+.group:active .group-active\:\[--btn-bg\:color-mix\(in_oklab\,var\(--foreground\)_80\%\,var\(--background\)\)\]{--btn-bg:color-mix(in oklab,var(--foreground) 80%,var(--background));}
+.\[--btn-bg\:var\(--accent\)\],
+.group:active .group-active\:\[--btn-bg\:var\(--accent\)\]{--btn-bg:var(--accent);}
+.\[--btn-bg\:var\(--foreground\)\]{--btn-bg:var(--foreground);}
+.\[--scroll-divider-inset\:8px\]{--scroll-divider-inset:8px;}
+.\[--scroll-fade-size\:16px\]{--scroll-fade-size:16px;}
+.\[--scroll-fade-size\:24px\]{--scroll-fade-size:24px;}
+.\[--scroll-fade-size\:32px\]{--scroll-fade-size:32px;}
+.\[flood-color\:var\(--shadow-color\)\]{flood-color:var(--shadow-color);}
+.\[overflow-anchor\:none\]{overflow-anchor:none;}
+.\[text-box\:trim-both_cap_alphabetic\]{text-box:trim-both cap alphabetic;}
+.\[transform\:translate\(var\(--drawer-swipe-movement-x\)\,calc\(var\(--drawer-snap-point-offset\)_\+_var\(--drawer-swipe-movement-y\)\)\)\]{transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));}
+.\[transition-behavior\:allow-discrete\]{transition-behavior:allow-discrete;}
+.\[transition-duration\:180ms\,80ms\]{transition-duration:180ms,80ms;}
+.\[transition-timing-function\:cubic-bezier\(0\.23\,1\,0\.32\,1\)\,ease\]{transition-timing-function:cubic-bezier(0.23,1,0.32,1),ease;}
+.\[translate\:var\(--toast-swipe-movement-x\)_var\(--toast-swipe-movement-y\)\]{translate:var(--toast-swipe-movement-x) var(--toast-swipe-movement-y);}
+.group:hover .group-hover\:\[--btn-bg\:color-mix\(in_oklab\,var\(--accent\)_80\%\,var\(--background\)\)\]{--btn-bg:color-mix(in oklab,var(--accent) 80%,var(--background));}
+.group:hover .group-hover\:\[--btn-bg\:color-mix\(in_oklab\,var\(--foreground\)_90\%\,var\(--background\)\)\]{--btn-bg:color-mix(in oklab,var(--foreground) 90%,var(--background));}
+.group:active .group-active\:\[transition-duration\:80ms\,80ms\]{transition-duration:80ms,80ms;}
+.after\:\[mask-image\:linear-gradient\(to_bottom\,transparent_var\(--rail-fade-start\)\,black_var\(--rail-fade-end\)\,black_calc\(100\%-var\(--rail-fade-end\)\)\,transparent_calc\(100\%-var\(--rail-fade-start\)\)\)\]::after{mask-image:linear-gradient(to bottom,transparent var(--rail-fade-start),black var(--rail-fade-end),black calc(100% - var(--rail-fade-end)),transparent calc(100% - var(--rail-fade-start)));}
+.\!items-start{align-items:flex-start !important;}
+.items-start{align-items:flex-start;}
+.items-end{align-items:flex-end;}
+.items-center{align-items:center;}
+.self-start{align-self:flex-start;}
+.self-center{align-self:center;}
+.self-stretch{align-self:stretch;}
+.inset-0{inset:calc(var(--spacing) * 0);}
+.inset-px{inset:1px;}
+.start-1{inset-inline-start:calc(var(--spacing) * 1);}
+.before\:end-0::before{inset-inline-end:calc(var(--spacing) * 0);}
+.before\:end-1\/2::before{inset-inline-end:50%;}
+.before\:start-0::before{inset-inline-start:calc(var(--spacing) * 0);}
+.before\:start-1\/2::before{inset-inline-start:50%;}
+.inset-x-0{inset-inline:calc(var(--spacing) * 0);}
+.inset-x-2{inset-inline:calc(var(--spacing) * 2);}
+.inset-y-0{inset-block:calc(var(--spacing) * 0);}
+.inset-y-2{inset-block:calc(var(--spacing) * 2);}
+.before\:inset-y-0::before{inset-block:calc(var(--spacing) * 0);}
+.after\:inset-y-0::after{inset-block:calc(var(--spacing) * 0);}
+.after\:inset-y-2::after{inset-block:calc(var(--spacing) * 2);}
+.bottom-0{bottom:calc(var(--spacing) * 0);}
+.bottom-2{bottom:calc(var(--spacing) * 2);}
+.bottom-4{bottom:calc(var(--spacing) * 4);}
+.bottom-px{bottom:1px;}
+.group\/menu-item:has(>[data-sidebar=menu-badge]) .group-has-\[\>\[data-sidebar\=menu-badge\]\]\/menu-item\:right-8\.5,
+.group\/menu-sub-item:has(>[data-sidebar=menu-badge]) .group-has-\[\>\[data-sidebar\=menu-badge\]\]\/menu-sub-item\:right-8\.5{right:calc(var(--spacing) * 8.5);}
+.left-0{left:calc(var(--spacing) * 0);}
+.left-1{left:calc(var(--spacing) * 1);}
+.left-1\.5{left:calc(var(--spacing) * 1.5);}
+.left-1\/2{left:50%;}
+.left-2{left:calc(var(--spacing) * 2);}
+.left-4{left:calc(var(--spacing) * 4);}
+.right-0{right:calc(var(--spacing) * 0);}
+.right-1{right:calc(var(--spacing) * 1);}
+.right-1\.5{right:calc(var(--spacing) * 1.5);}
+.right-2{right:calc(var(--spacing) * 2);}
+.right-3{right:calc(var(--spacing) * 3);}
+.right-3\.5{right:calc(var(--spacing) * 3.5);}
+.right-4{right:calc(var(--spacing) * 4);}
+.top-\[12dvh\]{top:12dvh;}
+.top-0{top:calc(var(--spacing) * 0);}
+.top-0\.5{top:calc(var(--spacing) * 0.5);}
+.top-1{top:calc(var(--spacing) * 1);}
+.top-1\.5{top:calc(var(--spacing) * 1.5);}
+.top-1\/2{top:50%;}
+.top-2{top:calc(var(--spacing) * 2);}
+.top-3{top:calc(var(--spacing) * 3);}
+.top-4{top:calc(var(--spacing) * 4);}
+.top-full{top:100%;}
+.after\:bottom-1::after{bottom:calc(var(--spacing) * 1);}
+.after\:left-\[3\.5px\]::after{left:3.5px;}
+.after\:left-0::after{left:calc(var(--spacing) * 0);}
+.after\:left-1\/2::after{left:50%;}
+.after\:right-\[3\.5px\]::after{right:3.5px;}
+.after\:right-0::after{right:calc(var(--spacing) * 0);}
+.justify-end{justify-content:flex-end;}
+.justify-center{justify-content:center;}
+.justify-between{justify-content:space-between;}
+.justify-self-end{justify-self:end;}
+.order-first{order:calc(-infinity);}
+.order-last{order:calc(infinity);}
+.absolute{position:absolute;}
+.fixed{position:fixed;}
+.relative{position:relative;}
+.sticky{position:sticky;}
+.before\:absolute::before{position:absolute;}
+.after\:absolute::after{position:absolute;}
+.-z-10{z-index:-10;}
+.z-\[1\],
+.z-1{z-index:1;}
+.z-\[2\]{z-index:2;}
+.z-\[3\]{z-index:3;}
+.z-\[4\]{z-index:4;}
+.z-\[60\]{z-index:60;}
+.z-0{z-index:0;}
+.z-10{z-index:10;}
+.z-20{z-index:20;}
+.z-30{z-index:30;}
+.z-50{z-index:50;}
+.data-\[active\]\:overflow-hidden[data-active],
+.overflow-hidden{overflow:hidden;}
+.overflow-auto{overflow:auto;}
+.overflow-visible{overflow:visible;}
+.overflow-x-auto{overflow-x:auto;}
+.overflow-x-clip{overflow-x:clip;}
+.overflow-x-hidden{overflow-x:hidden;}
+.overflow-y-auto{overflow-y:auto;}
+.overflow-y-hidden{overflow-y:hidden;}
+.fill-picker-edge{fill:color-mix(in srgb, var(--picker-edge) var(--un-fill-opacity), transparent);}
+.\[\&_svg\]\:stroke-\[1\.5\] svg{stroke-width:1.5;}
+.\[\&_svg\]\:stroke-\[2\] svg,
+.group\/field:focus-within .group-focus-within\/field\:stroke-\[2\],
+.group\/search:focus-within .group-focus-within\/search\:stroke-\[2\],
+.group:hover .group-hover\:\[\&_svg\]\:stroke-\[2\] svg,
+.group:hover .group-hover\:stroke-\[2\],
+.group\/action:hover .group-hover\/action\:stroke-\[2\],
+.group\/field:hover .group-hover\/field\:stroke-\[2\]{stroke-width:2;}
+.stroke-thumb{stroke:color-mix(in srgb, var(--thumb) var(--un-stroke-opacity), transparent);}
+.hover\:\[\&_svg\]\:stroke-\[2\] svg:hover{stroke-width:2;}
+@keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}
+@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}
+.animate-spin{animation:spin 1s linear infinite;}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
+.isolate{isolation:isolate;}
+.object-cover{object-fit:cover;}
+.object-contain{object-fit:contain;}
+.min-h-svh{min-height:100svh;}
+.h-svh{height:100svh;}
+.backdrop-blur-sm{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);}
+.blur{--un-blur:blur(8px);filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
+.drop-shadow-picker-cursor{--un-drop-shadow:drop-shadow(var(--drop-shadow-picker-cursor));filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
+.filter{filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
+.table{display:table;}
+.border-collapse{border-collapse:collapse;}
+.touch-none{touch-action:none;}
+.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);}
+.text-title{font-size:var(--text-title);line-height:var(--leading-title);}
+.text-title-compact{font-size:var(--text-title-compact);line-height:var(--leading-title);}
+.text-subtitle{font-size:var(--text-subtitle);line-height:var(--leading-subtitle);}
+.text-subtitle-compact{font-size:var(--text-subtitle-compact);line-height:var(--leading-subtitle);}
+.text-body{font-size:var(--text-body);line-height:var(--leading-body);}
+.text-body-compact{font-size:var(--text-body-compact);line-height:var(--leading-body);}
+.text-caption{font-size:var(--text-caption);line-height:var(--leading-caption);}
+.\[\&_button\]\:text-caption-compact button,
+.text-caption-compact{font-size:var(--text-caption-compact);line-height:var(--leading-caption);}
+.text-micro{font-size:var(--text-micro);line-height:var(--leading-micro);}
+.text-micro-compact{font-size:var(--text-micro-compact);line-height:var(--leading-micro);}
+.weight-normal{font-variation-settings:var(--weight-normal);}
+.weight-medium{font-variation-settings:var(--weight-medium);}
+.weight-semibold{font-variation-settings:var(--weight-semibold);}
+.weight-bold{font-variation-settings:var(--weight-bold);}
+.\[\&_svg\]\:duration-fast svg,
+.duration-fast{--un-duration:var(--duration-fast);transition-duration:var(--duration-fast);}
+.after\:duration-fast::after{--un-duration:var(--duration-fast);transition-duration:var(--duration-fast);}
+.data-\[hovering\]\:duration-moderate[data-hovering],
+.data-\[scrolling\]\:duration-moderate[data-scrolling],
+.duration-moderate{--un-duration:var(--duration-moderate);transition-duration:var(--duration-moderate);}
+.delay-moderate{transition-delay:var(--duration-moderate);}
+.duration-moderate-exit{--un-duration:var(--duration-moderate-exit);transition-duration:var(--duration-moderate-exit);}
+.duration-slow{--un-duration:var(--duration-slow);transition-duration:var(--duration-slow);}
+.rounded-box{border-radius:var(--radius-box);}
+.rounded-glyph{border-radius:var(--radius-glyph);}
+.group-data-\[active\]\/field\:stroke-\[2\]{
+&:is(:where(.group\/field)[data-active] *){stroke-width:2;}
+}
+.group-data-\[active\]\/field\:text-foreground{
+&:is(:where(.group\/field)[data-active] *){color:color-mix(in srgb, var(--foreground) var(--un-text-opacity), transparent);}
+}
+.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]{
+&:has(*[data-slot=card-action]){grid-template-columns:1fr auto;}
+}
+.peer-data-\[variant\=inset\]\:bg-surface-2{
+&:is(:where(.peer)[data-variant=inset] ~ *){background-color:color-mix(in srgb, var(--surface-2) var(--un-bg-opacity), transparent);}
+}
+.peer-data-\[variant\=inset\]\:m-2{
+&:is(:where(.peer)[data-variant=inset] ~ *){margin:calc(var(--spacing) * 2);}
+}
+.peer-data-\[variant\=inset\]\:peer-data-\[side\=left\]\:ml-0{&:is(:where(.peer)[data-side=left] ~ *){
+&:is(:where(.peer)[data-variant=inset] ~ *){margin-left:calc(var(--spacing) * 0);}
+}}
+.peer-data-\[variant\=inset\]\:peer-data-\[side\=right\]\:mr-0{&:is(:where(.peer)[data-side=right] ~ *){
+&:is(:where(.peer)[data-variant=inset] ~ *){margin-right:calc(var(--spacing) * 0);}
+}}
+.peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:peer-data-\[side\=left\]\:ml-2{&:is(:where(.peer)[data-side=left] ~ *){&:is(:where(.peer)[data-state=collapsed] ~ *){
+&:is(:where(.peer)[data-variant=inset] ~ *){margin-left:calc(var(--spacing) * 2);}
+}}}
+.peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:peer-data-\[side\=right\]\:mr-2{&:is(:where(.peer)[data-side=right] ~ *){&:is(:where(.peer)[data-state=collapsed] ~ *){
+&:is(:where(.peer)[data-variant=inset] ~ *){margin-right:calc(var(--spacing) * 2);}
+}}}
+.peer-data-\[variant\=inset\]\:rounded-3xl{
+&:is(:where(.peer)[data-variant=inset] ~ *){border-radius:var(--radius-3xl);}
+}
+.peer-data-\[variant\=inset\]\:rounded-xl{
+&:is(:where(.peer)[data-variant=inset] ~ *){border-radius:var(--radius-xl);}
+}
+.peer-data-\[variant\=inset\]\:shadow-surface-2{
+&:is(:where(.peer)[data-variant=inset] ~ *){--un-shadow:var(--shadow-2);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+}
+@media (prefers-reduced-motion: reduce){
+.motion-reduce\:transition-none{transition:none;}
+}
+@supports (text-box:trim-both){
+.supports-\[text-box\:trim-both\]\:py-2{padding-block:calc(var(--spacing) * 2);}
+}
+@media (max-width: calc(80rem - 0.1px)){
+.max-xl\:opacity-0{opacity:0%;}
+.max-xl\:hidden{display:none;}
+.max-xl\:duration-moderate{--un-duration:var(--duration-moderate);transition-duration:var(--duration-moderate);}
+}
+@media (max-width: calc(64rem - 0.1px)){
+.max-lg\:opacity-0{opacity:0%;}
+.max-lg\:hidden{display:none;}
+.max-lg\:duration-moderate{--un-duration:var(--duration-moderate);transition-duration:var(--duration-moderate);}
+}
+@media (max-width: calc(48rem - 0.1px)){
+.max-md\:opacity-0{opacity:0%;}
+.max-md\:hidden{display:none;}
+.max-md\:duration-moderate{--un-duration:var(--duration-moderate);transition-duration:var(--duration-moderate);}
+}
+@media (max-width: calc(40rem - 0.1px)){
+.max-sm\:opacity-0{opacity:0%;}
+.max-sm\:hidden{display:none;}
+.max-sm\:duration-moderate{--un-duration:var(--duration-moderate);transition-duration:var(--duration-moderate);}
+}
+@media (min-width: 40rem){
+.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
+.sm\:duration-slow{--un-duration:var(--duration-slow);transition-duration:var(--duration-slow);}
+}
+@starting-style{@media (min-width: 40rem){
+.sm\:starting\:opacity-0{opacity:0%;}
+}}
+@media (min-width: 48rem){
+.md\:duration-slow{--un-duration:var(--duration-slow);transition-duration:var(--duration-slow);}
+}
+@starting-style{@media (min-width: 48rem){
+.md\:starting\:opacity-0{opacity:0%;}
+}}
+@media (min-width: 64rem){
+.lg\:duration-slow{--un-duration:var(--duration-slow);transition-duration:var(--duration-slow);}
+}
+@starting-style{@media (min-width: 64rem){
+.lg\:starting\:opacity-0{opacity:0%;}
+}}
+@media (min-width: 80rem){
+.xl\:duration-slow{--un-duration:var(--duration-slow);transition-duration:var(--duration-slow);}
+}
+@starting-style{@media (min-width: 80rem){
+.xl\:starting\:opacity-0{opacity:0%;}
+}}
+}
+/*
+ * Fluid Functionalism color tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §1 (DESIGN TOKENS)
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License
+ * © 2026 Micka Touillaud — fluidfunctionalism.com.
+ *
+ * Migration from upstream: every HEX literal was converted to its exact oklch
+ * equivalent (sRGB → OKLab, round-trip verified to the original hex). The
+ * rgb()/rgba() alpha overlays (--overlay, --hover, --active, --shadow-color,
+ * --dm-*) are kept as-is — they are alpha contracts, not palette colors.
+ *
+ * Every color token is written ONCE, as light-dark(light, dark). Which side
+ * renders is driven by `color-scheme` (set in base.css): :root follows the
+ * OS, and a `.light` or `.dark` class pins it. The block is declared on
+ * `:root, .light, .dark` — not just `:root` — because light-dark() inside a
+ * custom property resolves against the color-scheme of the element the
+ * property is declared on, so a forced-scope subtree becomes its own
+ * resolution point.
+ *
+ * The surface ladder and its shadow recipes live with their primitive in
+ * primitives/surface/surface.css. The one token that cannot ride
+ * light-dark() here — the --overlay RGB triplet (consumed as
+ * rgb(var(--overlay) / α), an alpha contract) — is re-pointed per scheme in
+ * base.css.
+ */
+
+:root,
+.light,
+.dark {
+  /* The surface ladder (--surface-1..8) and the shadow recipes pair with it
+     in primitives/surface/surface.css. */
+
+  /* ── Semantic tokens ── */
+  /* Same color as --surface-1, inlined so the global token set never
+     depends on the surface primitive's CSS being loaded. */
+  --background: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Same color as --surface-3, inlined for the same reason. */
+  --card: light-dark(oklch(1 0 0), oklch(0.264 0 0));
+  --card-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* Light `muted` decouples from surface-2: the light surface ladder is so
+     compressed that a ladder value would read as near-white, making anything
+     sitting on it blend together. A slightly greyer value gives muted real
+     semantic presence. Dark keeps the ladder value (= surface-2). */
+  --muted: light-dark(oklch(0.967 0.001 286.375), oklch(0.235 0 0));
+  --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.7155 0 0));
+
+  /* ── Interactive states ── */
+  --accent: light-dark(oklch(0.922 0 0), oklch(0.439 0 0));
+  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.97 0 0));
+  /* --accent nudged toward the overlay direction (the switch track's hover). */
+  --accent-hover: color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%);
+  --selected: light-dark(oklch(0.87 0 0), oklch(0.439 0 0));
+
+  /* ── Borders ──
+     --border mixes from --foreground, so it tracks the theme automatically —
+     including inside nested forced scopes, where light-dark() re-resolves
+     --foreground before the mix happens. */
+  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
+  --ring: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+  --input: light-dark(oklch(0.922 0 0), oklch(0.371 0 0));
+
+  /* ── Error / Destructive ── */
+  --destructive: light-dark(oklch(0.6368 0.2078 25.33), oklch(0.7106 0.1661 22.22));
+  --destructive-light: light-dark(oklch(0.971 0.013 17.38), oklch(0.2575 0.0886 26.04));
+
+  /* ── Brand blue ──
+     FF's one chromatic accent: the switch's on-track, the copy field's hover
+     highlight, drop-target and selected-swatch rings. */
+  --brand: oklch(0.693 0.16 265);
+  --brand-hover: oklch(0.649 0.164 264.76);
+
+  /* ── Focus indicator ──
+     Every component focus ring reads it (`ring-focus-ring`,
+     `border-focus-ring`), so this is the single theming point. */
+  --focus-ring: var(--brand);
+
+  /* ── Alpha checkerboard (color-picker swatches) ── */
+  --checker-a: light-dark(oklch(0.792 0 0), oklch(0.239 0 0));
+  --checker-b: light-dark(oklch(1 0 0), oklch(0.285 0 0));
+  /* Swatch edges: a mid-grey hairline that reads on any swatch color in
+     either scheme, plus the hover / selected rings, set off by a
+     --background gap. */
+  --swatch-edge: rgb(127 127 127 / 0.25);
+  --swatch-edge-hover: rgb(127 127 127 / 0.4);
+  --shadow-swatch: inset 0 0 0 1px var(--swatch-edge);
+  --shadow-swatch-hover: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--swatch-edge-hover);
+  --shadow-swatch-selected: var(--shadow-swatch), 0 0 0 2px var(--background), 0 0 0 4px var(--brand);
+
+  /* ── Thumbs (switch, slider) ──
+     White in both schemes, set off by a soft drop. */
+  --thumb: oklch(1 0 0);
+  --shadow-thumb: 0 1px 2px rgb(0 0 0 / 0.1);
+
+  /* ── Color picker affordances ──
+     Drawn over any user color, so fixed white and black rather than theme
+     colors: they have to read on every fill, in either scheme. */
+  --picker-edge: oklch(0 0 0);
+  --picker-ring: oklch(1 0 0 / 0.55);
+  --picker-thumb-border: oklch(1 0 0 / 0.9);
+  --shadow-picker-thumb: 0 0 0 1px var(--picker-edge);
+  --shadow-picker-cursor: 0 0 0 1px oklch(0 0 0 / 0.2);
+  --drop-shadow-picker-cursor: 0 1px 1px oklch(0 0 0 / 0.4);
+
+  /* ── Controls ──
+     An unchecked checkbox or radio takes a stronger edge than --border;
+     a modal dialog dims the page behind it with the scrim. */
+  --control-border: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
+  --scrim: light-dark(oklch(0 0 0 / 0.4), oklch(0 0 0 / 0.8));
+
+  /* ── Surface-relative interactive overlays (work on any elevation) ──
+     --overlay is the tint-direction triplet — black for light surfaces,
+     white for dark. Components consume it as rgb(var(--overlay) / α), so it
+     stays an RGB triplet and switches per theme in base.css. --hover and
+     --active are the pre-mixed conveniences. */
+  --overlay: 0 0 0;
+  --hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
+  --active: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.1));
+
+  /* ── Syntax (primitives/code) ──
+     Low-chroma hues so code reads as text first; identifiers, JSX text and
+     punctuation ride the existing foreground pair. */
+  --syntax-keyword: light-dark(oklch(0.52 0.16 300), oklch(0.76 0.12 300));
+  --syntax-string: light-dark(oklch(0.52 0.12 150), oklch(0.79 0.11 150));
+  --syntax-class: light-dark(oklch(0.56 0.12 65), oklch(0.81 0.1 75));
+  --syntax-entity: light-dark(oklch(0.52 0.15 255), oklch(0.77 0.11 250));
+  --syntax-property: light-dark(oklch(0.52 0.1 205), oklch(0.79 0.08 200));
+  --syntax-comment: light-dark(oklch(0.62 0 0), oklch(0.56 0 0));
+  --syntax-identifier: var(--foreground);
+  --syntax-jsx: var(--foreground);
+  --syntax-sign: var(--muted-foreground);
+}
+
+/* ── Badge palette ──
+   Badge's `color` hues (upstream hex, as exact oklch). Constant across
+   schemes; the solid variant mixes each 15% into --background. */
+:root {
+  --badge-gray: oklch(0.715 0 0);
+  --badge-red: oklch(0.637 0.208 25.33);
+  --badge-orange: oklch(0.7049 0.1867 47.6);
+  --badge-amber: oklch(0.7686 0.1647 70.08);
+  --badge-yellow: oklch(0.7952 0.1617 86.05);
+  --badge-lime: oklch(0.7681 0.2044 130.85);
+  --badge-green: oklch(0.723 0.192 149.58);
+  --badge-emerald: oklch(0.6959 0.1491 162.48);
+  --badge-teal: oklch(0.704 0.123 182.5);
+  --badge-cyan: oklch(0.7148 0.1257 215.22);
+  --badge-blue: oklch(0.623 0.188 259.81);
+  --badge-indigo: oklch(0.585 0.204 277.12);
+  --badge-violet: oklch(0.606 0.219 292.72);
+  --badge-purple: oklch(0.627 0.233 303.9);
+  --badge-fuchsia: oklch(0.667 0.259 322.15);
+  --badge-pink: oklch(0.656 0.212 354.31);
+  --badge-rose: oklch(0.645 0.215 16.44);
+}
+
+/* ── Status roles ──
+   The toast states, picked from the badge palette (and --destructive /
+   --brand) by reference, so a status reads the same wherever it shows. */
+:root {
+  --status-success: var(--badge-green);
+  --status-loading: var(--badge-gray);
+  --status-error: var(--destructive);
+  --status-warning: var(--badge-amber);
+  --status-info: var(--badge-blue);
+  --status-action: var(--brand);
+}
+
+/*
+ * Fluid Functionalism motion tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `registry/default/lib/springs.ts`
+ * at commit b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026
+ * Micka Touillaud — fluidfunctionalism.com.
+ *
+ * FF's motion is JS: the `spring` tiers in lib/springs.ts feed
+ * `motion/react`, and components always reach for a tier rather than a
+ * hand-written duration. These properties mirror those tiers for CSS
+ * consumers and for the tokens page — keep the two in sync.
+ *
+ * Each tier's enter transition is a spring of the given duration; its exit is
+ * a plain tween one step quicker, so a dismissal reads as crisp and final.
+ *   fast      80ms enter, 60ms exit   — critically damped (bounce 0)
+ *   moderate  160ms enter, 120ms exit — critically damped (bounce 0): panels,
+ *             dropdowns, tabs, merged selection backgrounds
+ *   slow      240ms enter, 160ms exit — the one tier with a little bounce
+ *             (bounce 0.12)
+ * The bigger the thing that moves, the slower the tier.
+ *
+ * Local addition: `goo`, the morph engine's tier for the goo effect — 250ms
+ * to land (bounce 0.15), a 200ms spring back — so the liquid neck reads.
+ */
+
+:root {
+  --duration-fast: 80ms;
+  --duration-fast-exit: 60ms;
+  --duration-moderate: 160ms;
+  --duration-moderate-exit: 120ms;
+  --duration-slow: 240ms;
+  --duration-slow-exit: 160ms;
+  --duration-goo: 250ms;
+  --duration-goo-exit: 200ms;
+}
+
+:root {
+  /* Fluid Functionalism's corner token (upstream tokens/radius.css). */
+  --radius: 0.625rem;
+
+  /* Small-box corners between wind4's xs (2px) and md (6px) steps, read by
+     the `rounded-box|glyph` utility in preset.ts: checkbox squares and
+     keycaps, and the composer's stop glyph. */
+  --radius-box: 5px;
+  --radius-glyph: 3px;
+}
+
+:root {
+  /* The docs chrome's spacing rhythm (AGENTS.md generic tokens). */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+}
+
+/*
+ * Fluid Functionalism type tokens.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §3–4 (`--font-sans`,
+ * the `--fs-*` type-scale roles and their `@utility text-*` classes) at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026 Micka
+ * Touillaud — fluidfunctionalism.com.
+ *
+ * Local changes:
+ * - The family is Inter Variable from @fontsource-variable/inter/opsz
+ *   (imported in base.css) instead of upstream's self-hosted
+ *   InterVariable.ttf. The opsz build matters: the `--weight-*` ladder sets
+ *   both the wght and opsz axes.
+ * - The role sizes are renamed `--fs-*` → `--text-*` and read by the
+ *   `text-<role>[-compact]` utility in preset.ts. They hold both columns of
+ *   `typeScale` in lib/size-context.tsx (keep the two in sync), so a
+ *   component's `compact ? … : …` picks a token on either side. Upstream's
+ *   site-chrome extras — the 22px mobile display step and the
+ *   `html[data-size="compact"]` override set by the docs site's
+ *   SizeAttribute — are not carried over.
+ * - `micro` (keycaps, one notch below caption) is a local role.
+ * - Each role's line-height (FF's typography page: 28/34, 16/22, 14/20,
+ *   13/20, 12/16) is a `--leading-*` token, emitted by the same
+ *   `text-<role>` rule; the compact step keeps its role's leading.
+ * - The docs chrome's element roles (`--font-size-<el>`, `--line-height-<el>`,
+ *   `--font-weight-<el>`, `--color-<el>`) reference these, following FF's
+ *   rules: headings in foreground, text muted.
+ * - Upstream's `fontWeights` (lib/font-weight.ts, fontVariationSettings
+ *   strings) become the `--weight-*` variation settings, read by the
+ *   `weight-*` utility in preset.ts. Each derives its wght from
+ *   `--font-weight-*`, the plain font-weight form the docs chrome reads.
+ */
+
+:root {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Page titles. */
+  --text-display: 28px;
+  /* Section headings, dialog titles. */
+  --text-title: 16px;
+  /* Card titles, emphasized rows. */
+  --text-subtitle: 14px;
+  /* Control labels and body copy. */
+  --text-body: 13px;
+  /* Secondary text: descriptions, meta rows, errors, group labels. */
+  --text-caption: 12px;
+  /* Keycaps and chips. */
+  --text-micro: 11px;
+
+  /* Each role's paired line-height. */
+  --leading-display: 34px;
+  --leading-title: 22px;
+  --leading-subtitle: 20px;
+  --leading-body: 20px;
+  --leading-caption: 16px;
+  --leading-micro: 14px;
+
+  /* The compact step: each role one notch down. */
+  --text-display-compact: 24px;
+  --text-title-compact: 15px;
+  --text-subtitle-compact: 13px;
+  --text-body-compact: 12px;
+  --text-caption-compact: 11px;
+  --text-micro-compact: 10px;
+
+  /* Inter variable weights, each paired with the opsz that keeps a label's
+     advance width steady as it changes weight. */
+  --font-weight-normal: 400;
+  --font-weight-medium: 450;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 700;
+  --weight-normal: "wght" var(--font-weight-normal), "opsz" 14;
+  --weight-medium: "wght" var(--font-weight-medium), "opsz" 15;
+  --weight-semibold: "wght" var(--font-weight-semibold), "opsz" 18;
+  --weight-bold: "wght" var(--font-weight-bold), "opsz" 25;
+
+  /* The docs chrome's elements (modo's type contract), on the roles above. */
+  --font-size-h1: var(--text-display);
+  --line-height-h1: var(--leading-display);
+  --font-weight-h1: var(--font-weight-bold);
+  --color-h1: var(--foreground);
+
+  --font-size-h2: var(--text-title);
+  --line-height-h2: var(--leading-title);
+  --font-weight-h2: var(--font-weight-semibold);
+  --color-h2: var(--foreground);
+
+  --font-size-h3: var(--text-subtitle);
+  --line-height-h3: var(--leading-subtitle);
+  --font-weight-h3: var(--font-weight-semibold);
+  --color-h3: var(--foreground);
+
+  --font-size-h4: var(--text-body);
+  --line-height-h4: var(--leading-body);
+  --font-weight-h4: var(--font-weight-semibold);
+  --color-h4: var(--foreground);
+
+  --font-size-p: var(--text-body);
+  --line-height-p: var(--leading-body);
+  --font-weight-p: var(--font-weight-normal);
+  --color-p: var(--muted-foreground);
+
+  --font-size-lead: var(--text-body);
+  --line-height-lead: var(--leading-body);
+  --font-weight-lead: var(--font-weight-normal);
+  --color-lead: var(--muted-foreground);
+
+  --font-size-eyebrow: var(--text-caption);
+  --line-height-eyebrow: var(--leading-caption);
+  --font-weight-eyebrow: var(--font-weight-medium);
+  --color-eyebrow: var(--muted-foreground);
+
+  --font-size-sm: var(--text-caption);
+  --line-height-sm: var(--leading-caption);
+
+  --font-size-xs: var(--text-micro);
+  --line-height-xs: var(--leading-micro);
+}
+
+/* biome-ignore-all lint: vendored upstream code keeps its own values (see the header) */
+/*
+ * UI theme plumbing and base styles.
+ *
+ * Source: mickadesign/fluid-functionalism `app/globals.css` at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License © 2026 Micka
+ * Touillaud — fluidfunctionalism.com. Translated from Tailwind v4 CSS to
+ * plain CSS for UnoCSS (uno.config.ts); vite.ts injects the UnoCSS
+ * stylesheet ahead of this file. The docs site imports it from global.css;
+ * the package ships it inside dist/base.css and dist/styles.css.
+ *
+ * Where upstream's sections went:
+ * - §1 design tokens → tokens/colors.css; the surface ladder and shadow
+ *   recipes → primitives/surface/surface.css. All HEX migrated to oklch.
+ * - §2 theme switching → the color-scheme / --overlay block below (the
+ *   shadow re-pointing lives in surface.css).
+ * - §3 `@theme inline` → preset.ts `theme`; the `--fs-*` roles and
+ *   `@utility text-*` → tokens/typography.css (`--text-*`) + preset.ts
+ *   `utilities`.
+ * - §4–6 → below: html/body base, `@layer base` (text wrap, inline code chip,
+ *   :focus-visible fallback), html.transitioning, native scrollbars,
+ *   .scrollbar-hide, shimmer + spinner keyframes, .scroll-fade(-x).
+ *
+ * Local value changes: the inline code chip and the shimmer stops read color
+ * tokens instead of upstream's hex (light code chip `--muted`, dark
+ * `--surface-4`; shimmer dim → bright runs `--muted-foreground` →
+ * `--foreground` in light and `--accent` → `--muted-foreground` in dark).
+ *
+ * Dropped: the Tailwind directives (`@import "tailwindcss"`,
+ * `@custom-variant`), the self-hosted Inter @font-face (replaced by
+ * @fontsource-variable/inter/opsz), the Radix-only scroll-lock margin fix
+ * (`body[data-scroll-locked]`), the reserved shadcn-compare colors, and the
+ * docs-site-only CSS (.xl-fade-*, .inview-fade-block, .scroll-divider — only
+ * the omitted Sidebar uses it — .bento-*, .shiki).
+ *
+ * Layers: UnoCSS (`outputToCssLayers`) declares `@layer properties, theme,
+ * base, default` first, and its reset lives in `base`. The `@layer base`
+ * rules here join that layer after the reset, so the reset loses to them and
+ * every utility (`default`) still wins — the same arrangement as Tailwind's
+ * base/utilities layers upstream.
+ *
+ * The switch blocks double their class selector (.light.light / .dark.dark)
+ * because user CSS is injected BEFORE tokens/*.css and item CSS — the
+ * doubled selector (0,2,0) must out-specify the shared `:root, .light,
+ * .dark` token blocks (0,1,0) so the re-pointed values win regardless of
+ * stylesheet order.
+ */
+
+
+/* ── Theme switching (upstream §2) ──
+   `color-scheme` is what flips every light-dark() token; the classes work on
+   <html> (vite.ts puts the stored preference there, or the OS one under
+   'system') and on any subtree (forced-theme previews). The only value that can't ride light-dark() here
+   is the --overlay RGB triplet, consumed as rgb(var(--overlay) / α). */
+
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --overlay: 255 255 255;
+  }
+}
+
+.light.light {
+  color-scheme: light;
+  --overlay: 0 0 0;
+}
+
+.dark.dark {
+  color-scheme: dark;
+  --overlay: 255 255 255;
+}
+
+/* ── Base styles (upstream §4) ── */
+
+/* No explicit overflow here: scrollbar-gutter applies to the viewport when
+   set on the root, and an explicit `overflow-y: auto` would stop dialog
+   scroll locks (`body { overflow: hidden }`) from propagating to the
+   viewport. */
+html {
+  scrollbar-gutter: stable;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100vh;
+  overscroll-behavior-y: none;
+  background-color: var(--background);
+  /* Explicit text color so unstyled text follows the theme (and so the UA's
+     color-scheme-driven canvastext default never shows through). */
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  /* Inherited by everything (portals included) — a `subpixel-antialiased`
+     utility on a subtree is the only way to opt back out. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* @layer base so a utility can still win: unlayered, these outrank
+   `truncate` on the text-wrap-mode longhand (white-space is a shorthand for
+   white-space-collapse + text-wrap-mode), which silently un-truncates every
+   <p> that asks for it. */
+@layer base {
+  h1,
+  h2,
+  h3 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  /* Inline code chips: bare <code> in prose gets its own ground. Excludes
+     code inside <pre>. Base layer, so a page can still override with
+     utilities. */
+  code:not(pre code) {
+    background: light-dark(var(--muted), var(--surface-4));
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: var(--text-caption, 12px);
+    color: var(--foreground, inherit);
+  }
+}
+
+/* Theme-toggle cross-fade: ShapeProvider (and any theme switcher) adds
+   `.transitioning` around a class swap so colors and corners tween instead of
+   snapping. */
+html.transitioning *,
+html.transitioning *::before,
+html.transitioning *::after {
+  transition:
+    border-radius 180ms ease-in-out,
+    background-color 180ms ease-in-out,
+    color 180ms ease-in-out,
+    border-color 180ms ease-in-out,
+    fill 180ms ease-in-out,
+    stroke 180ms ease-in-out !important;
+}
+
+/* Focus fallback — natively focusable elements no component styles (scroll
+   containers Chrome makes tabbable, prose links, demo boxes) get the same
+   token ring as the components instead of the UA default. Lives in
+   @layer base so `outline-none` (a utility) still wins — components that
+   draw their own ring aren't double-ringed. The radius rides
+   --shape-input-radius (published by ShapeProvider); 8px = the rounded-mode
+   default. */
+@layer base {
+  :focus-visible {
+    outline: 1px solid var(--focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--shape-input-radius, 8px);
+  }
+
+  /* Prose links are inline text boxes — the shape-system radius reads
+     pill-ish at text height, so their ring takes a tight 2px corner. */
+  a:focus-visible {
+    border-radius: 2px;
+  }
+}
+
+/* ── Native scrollbar theme (upstream §5) ──
+   Matches the ScrollArea thumb language (narrow, low-contrast, darkens on
+   hover) so surfaces that fall back to native scrollbars stay consistent
+   with the custom scrollbar. Rides the surface-relative overlay ramp (rest
+   8%, hover 12%, drag 16%) — adapts to dark mode through --overlay. Only on
+   fine pointers; touch devices keep their overlay momentum bars. Chromium
+   121+ renders scrollbar-color and ignores the ::-webkit-* block, so both
+   ramps must stay in sync. */
+
+@media (pointer: fine) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(var(--overlay) / 0.08) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    /* Transparent borders + content-box clip leave a ~4px visible thumb
+       inside the 10px hit area; the asymmetric edge-side border slides it
+       2px away from the edge, matching the ScrollArea thumb's nudge. */
+    background-color: rgb(var(--overlay) / 0.08);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical {
+    border-left-width: 1px;
+    border-right-width: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    border-top-width: 1px;
+    border-bottom-width: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(var(--overlay) / 0.12);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: rgb(var(--overlay) / 0.16);
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Utilities (upstream §6) ── */
+
+/* shimmer-text (thinking-indicator) */
+
+@keyframes shimmer {
+  0% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.shimmer-text {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    light-dark(var(--muted-foreground), var(--accent)) 0%,
+    light-dark(var(--muted-foreground), var(--accent)) 35%,
+    light-dark(var(--foreground), var(--muted-foreground)) 50%,
+    light-dark(var(--muted-foreground), var(--accent)) 65%,
+    light-dark(var(--muted-foreground), var(--accent)) 100%
+  );
+  background-size: 300% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Spinner keyframes (Button's loading state). */
+
+@keyframes spinner-move {
+  to {
+    stroke-dashoffset: -100;
+  }
+}
+
+@keyframes spinner-dash {
+  0%,
+  100% {
+    stroke-dasharray: 15 85;
+  }
+  50% {
+    stroke-dasharray: 40 60;
+  }
+}
+
+/* scroll-fade — vendored equivalent of shadcn's scroll-fade utility. A
+   mask-image dissolves the content toward the edges that have more to
+   scroll. CSS scroll-driven animations make it scroll-aware: the true
+   start/end edge stays crisp until you scroll past it. Browsers without
+   scroll-driven animations fall back to a static fade on both edges. Apply
+   to a scroll container, or to a ScrollArea via `viewportClassName`. */
+
+@property --sf-start {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --sf-end {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@keyframes sf-reveal-start {
+  from {
+    --sf-start: 1;
+  }
+  to {
+    --sf-start: 0;
+  }
+}
+@keyframes sf-reveal-end {
+  from {
+    --sf-end: 0;
+  }
+  to {
+    --sf-end: 1;
+  }
+}
+
+.scroll-fade,
+.scroll-fade-x {
+  --scroll-fade-size: 48px;
+}
+
+/* Static fallback: fade both edges. */
+.scroll-fade {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+}
+.scroll-fade-x {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-size),
+    #000 calc(100% - var(--scroll-fade-size)),
+    transparent 100%
+  );
+}
+
+/* Scroll-aware: the start/end edge stays solid until there's content past it. */
+@supports (animation-timeline: scroll()) {
+  .scroll-fade {
+    mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    animation:
+      sf-reveal-start both linear,
+      sf-reveal-end both linear;
+    animation-timeline: scroll(self), scroll(self);
+    animation-range-start: 0, calc(100% - var(--scroll-fade-size));
+    animation-range-end: var(--scroll-fade-size), 100%;
+  }
+  .scroll-fade-x {
+    mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, var(--sf-start)) 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      rgba(0, 0, 0, var(--sf-end)) 100%
+    );
+    animation:
+      sf-reveal-start both linear,
+      sf-reveal-end both linear;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range-start: 0, calc(100% - var(--scroll-fade-size));
+    animation-range-end: var(--scroll-fade-size), 100%;
+  }
+}
+
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `app/globals.css` (`.scroll-divider`) @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications: none (modo injects this file beside the Sidebar).
+ */
+
+/* ── scroll-divider — a hairline marking a scroll edge ──────────────────────
+   Pairs with .scroll-fade on a descendant viewport: where the fade dissolves
+   content, this draws the line that says "the region continues". The line
+   can't live inside the scroller — the fade's own mask would erase it at
+   exactly the edge it belongs on — so it rides the parent's pseudo-elements
+   and borrows the scroller's timeline by name. Browsers without scroll-driven
+   timelines simply get the fade, as before. */
+@keyframes sf-divider-start {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sf-divider-end {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@supports (timeline-scope: --sf) {
+  .scroll-divider {
+    position: relative;
+    timeline-scope: --sf-scroller;
+    --scroll-divider-size: 48px;
+  }
+  .scroll-divider .scroll-fade {
+    scroll-timeline-name: --sf-scroller;
+  }
+  .scroll-divider::before,
+  .scroll-divider::after {
+    content: "";
+    position: absolute;
+    /* Inset so the line can hug the content's own gutter rather than the
+       panel edge — the sidebar's inset variant sets this to 8px. */
+    left: var(--scroll-divider-inset, 0px);
+    right: var(--scroll-divider-inset, 0px);
+    height: 1px;
+    background-color: var(--border);
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+  }
+  /* Top edge: absent at rest, fading in as content passes above. */
+  .scroll-divider::before {
+    top: 0;
+    animation: sf-divider-start both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: 0 var(--scroll-divider-size);
+  }
+  /* A region flush with the panel's own top edge has nothing above for
+     content to pass under, so the start line would read as a stray border. */
+  .scroll-divider:first-child::before {
+    content: none;
+  }
+  /* Bottom edge: present while content continues below, gone at the end. */
+  .scroll-divider::after {
+    bottom: 0;
+    animation: sf-divider-end both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: calc(100% - var(--scroll-divider-size)) 100%;
+  }
+}
+
+/* biome-ignore-all lint: vendored upstream code keeps its own values (see the header) */
+/*
+ * Surface elevation module: the 8-level surface ladder and its 1:1 shadow
+ * recipes, plus the per-scheme selection of the active --shadow-N alias.
+ *
+ * Extracted from tokens/colors.css and base.css — the elevation system
+ * belongs to this primitive, not the global token set.
+ * Source: mickadesign/fluid-functionalism `app/globals.css` §1–2 at commit
+ * b3587bdbd83fc66c2a6aae3817ffb856cb09260b — MIT License
+ * © 2026 Micka Touillaud — fluidfunctionalism.com. All HEX migrated to
+ * exact oklch (see tokens/colors.css for the note).
+ *
+ * Like tokens/colors.css, the token block is declared on
+ * `:root, .light, .dark` so light-dark() re-resolves per forced scope. The
+ * switch blocks double their class selector (.light.light / .dark.dark) to
+ * out-specify the shared (0,1,0) token block regardless of stylesheet
+ * order.
+ */
+
+:root,
+.light,
+.dark {
+  /* ── Surfaces (8-level ladder) ──
+     Light: 2 color steps (floor, sunken) then flat white; shadow does the
+     work. Dark: additive white-opacity ladder over near-black. Each surface
+     pairs 1:1 with a shadow recipe (--shadow-1 .. --shadow-8). */
+  --surface-1: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --surface-2: light-dark(oklch(0.991 0 0), oklch(0.235 0 0));
+  --surface-3: light-dark(oklch(1 0 0), oklch(0.264 0 0));
+  --surface-4: light-dark(oklch(1 0 0), oklch(0.293 0 0));
+  --surface-5: light-dark(oklch(1 0 0), oklch(0.321 0 0));
+  --surface-6: light-dark(oklch(1 0 0), oklch(0.349 0 0));
+  --surface-7: light-dark(oklch(1 0 0), oklch(0.375 0 0));
+  --surface-8: light-dark(oklch(1 0 0), oklch(0.402 0 0));
+
+  /* ── Shadow recipes ──
+     Light: additive stacked drops, halving offsets (1/3/6/12/24/48/96 px).
+     Dark: inset highlight + inset ring + stacked drops.
+     Structurally different, so each ladder is written out once here and the
+     active --shadow-N is selected per scheme below.
+     --shadow-color is intentionally static: it is also consumed directly by
+     components and has never varied by theme. */
+  --shadow-color: rgb(0 0 0 / 0.06);
+  --shadow-light-1: 0 0 0 1px var(--shadow-color);
+  --shadow-light-2: 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color);
+  --shadow-light-3:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color);
+  --shadow-light-4:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    );
+  --shadow-light-5:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color);
+  --shadow-light-6:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color);
+  --shadow-light-7:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(
+      --shadow-color
+    );
+  --shadow-light-8:
+    0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(
+      --shadow-color
+    ), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(
+      --shadow-color
+    ), 0 96px 96px -48px var(--shadow-color);
+  /* Surface-2/3 with the hairline moved INSIDE the box — for cards whose
+     border must stay within their own edge. Dark's recipes already draw
+     their ring inset, so dark scopes alias --shadow-dark-2/3 directly. */
+  --shadow-light-2-inset: inset 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color);
+  --shadow-light-3-inset:
+    inset 0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color);
+
+  --dm-hi-base: rgba(255, 255, 255, 0.01);
+  --dm-hi-mid: rgba(255, 255, 255, 0.02);
+  --dm-hi-high: rgba(255, 255, 255, 0.04);
+  --dm-hi-peak: rgba(255, 255, 255, 0.06);
+  --dm-ring-base: rgba(255, 255, 255, 0.02);
+  --dm-ring-mid: rgba(255, 255, 255, 0.04);
+  --dm-ring-high: rgba(255, 255, 255, 0.06);
+  --dm-drop: rgba(0, 0, 0, 0.18);
+  --shadow-dark-1: inset 0 0 0 1px var(--dm-ring-base);
+  --shadow-dark-2:
+    inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop);
+  --shadow-dark-3:
+    inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop);
+  --shadow-dark-4:
+    inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop);
+  --shadow-dark-5:
+    inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop);
+  --shadow-dark-6:
+    inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    );
+  --shadow-dark-7:
+    inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    ), 0 48px 48px -24px var(--dm-drop);
+  --shadow-dark-8:
+    inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 1px -0.5px var(
+      --dm-drop
+    ), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(
+      --dm-drop
+    ), 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop);
+
+  --shadow-1: var(--shadow-light-1);
+  --shadow-2: var(--shadow-light-2);
+  --shadow-3: var(--shadow-light-3);
+  --shadow-4: var(--shadow-light-4);
+  --shadow-5: var(--shadow-light-5);
+  --shadow-6: var(--shadow-light-6);
+  --shadow-7: var(--shadow-light-7);
+  --shadow-8: var(--shadow-light-8);
+  --shadow-2-inset: var(--shadow-light-2-inset);
+  --shadow-3-inset: var(--shadow-light-3-inset);
+}
+
+/* ── Per-scheme shadow selection ──
+   The light/dark recipes are structurally different, so they cannot ride
+   light-dark(); the active --shadow-N alias is re-pointed per scheme here. */
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --shadow-1: var(--shadow-dark-1);
+    --shadow-2: var(--shadow-dark-2);
+    --shadow-3: var(--shadow-dark-3);
+    --shadow-4: var(--shadow-dark-4);
+    --shadow-5: var(--shadow-dark-5);
+    --shadow-6: var(--shadow-dark-6);
+    --shadow-7: var(--shadow-dark-7);
+    --shadow-8: var(--shadow-dark-8);
+    --shadow-2-inset: var(--shadow-dark-2);
+    --shadow-3-inset: var(--shadow-dark-3);
+  }
+}
+
+.light.light {
+  --shadow-1: var(--shadow-light-1);
+  --shadow-2: var(--shadow-light-2);
+  --shadow-3: var(--shadow-light-3);
+  --shadow-4: var(--shadow-light-4);
+  --shadow-5: var(--shadow-light-5);
+  --shadow-6: var(--shadow-light-6);
+  --shadow-7: var(--shadow-light-7);
+  --shadow-8: var(--shadow-light-8);
+  --shadow-2-inset: var(--shadow-light-2-inset);
+  --shadow-3-inset: var(--shadow-light-3-inset);
+}
+
+.dark.dark {
+  --shadow-1: var(--shadow-dark-1);
+  --shadow-2: var(--shadow-dark-2);
+  --shadow-3: var(--shadow-dark-3);
+  --shadow-4: var(--shadow-dark-4);
+  --shadow-5: var(--shadow-dark-5);
+  --shadow-6: var(--shadow-dark-6);
+  --shadow-7: var(--shadow-dark-7);
+  --shadow-8: var(--shadow-dark-8);
+  --shadow-2-inset: var(--shadow-dark-2);
+  --shadow-3-inset: var(--shadow-dark-3);
+}