/* 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-text-opacity:100%;--un-via-opacity:100%;}} @property --un-text-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-border-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-bg-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-gradient-from{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-from-position{syntax:"";inherits:false;initial-value:0%;} @property --un-gradient-position{syntax:"*";inherits:false;} @property --un-gradient-stops{syntax:"*";inherits:false;} @property --un-gradient-to{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-to-position{syntax:"";inherits:false;initial-value:100%;} @property --un-gradient-via{syntax:"";inherits:false;initial-value:#0000;} @property --un-gradient-via-position{syntax:"";inherits:false;initial-value:50%;} @property --un-gradient-via-stops{syntax:"*";inherits:false;} @property --un-via-opacity{syntax:"";inherits:false;initial-value:100%;} @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;} /* layer: theme */ :root, :host { --spacing: 0.25rem; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --colors-fg: #f4f5f7; --colors-red-400: oklch(70.4% 0.191 22.216); --colors-white: #fff; --text-xs-fontSize: 0.75rem; --text-xs-lineHeight: 1rem; --colors-accent: #a78bfa; --radius-md: 0.375rem; --radius-2xl: 1rem; --colors-ink: #0d0d12; --radius-DEFAULT: 0.25rem; --fontWeight-semibold: 600; --colors-signal: #8bd5ca; --colors-accent-ink: #140a24; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); } /* 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: preflights */ @keyframes drift-a { 0% { transform: translate3d(-390px, -390px, 0); } 50% { transform: translate3d(calc(100vw - 390px), calc(100vh - 390px), 0); } 100% { transform: translate3d(-390px, -390px, 0); } } @keyframes drift-b { 0% { transform: translate3d(-390px, calc(100vh - 390px), 0); } 50% { transform: translate3d(calc(100vw - 390px), -390px, 0); } 100% { transform: translate3d(-390px, calc(100vh - 390px), 0); } } @keyframes drift-c { 0% { transform: translate3d(-390px, 40vh, 0); } 50% { transform: translate3d(calc(100vw - 390px), 60vh, 0); } 100% { transform: translate3d(-390px, 40vh, 0); } } @keyframes drift-d { 0% { transform: translate3d(10vw, -390px, 0); } 50% { transform: translate3d(72vw, calc(100vh - 390px), 0); } 100% { transform: translate3d(10vw, -390px, 0); } } /* layer: default */ .text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));} .text-\[10px\]{font-size:10px;} .text-\[11px\]{font-size:11px;} .text-accent{color:color-mix(in srgb, var(--colors-accent) var(--un-text-opacity), transparent);} .text-accent-ink{color:color-mix(in srgb, var(--colors-accent-ink) var(--un-text-opacity), transparent);} .text-accent\/70{color:color-mix(in srgb, var(--colors-accent) 70%, transparent);} .text-accent\/80{color:color-mix(in srgb, var(--colors-accent) 80%, transparent);} .text-accent\/90{color:color-mix(in srgb, var(--colors-accent) 90%, transparent);} .text-fg{color:color-mix(in srgb, var(--colors-fg) var(--un-text-opacity), transparent);} .text-red-400\/80{color:color-mix(in srgb, var(--colors-red-400) 80%, transparent);} .text-red-400\/90{color:color-mix(in srgb, var(--colors-red-400) 90%, transparent);} .text-signal\/60{color:color-mix(in srgb, var(--colors-signal) 60%, transparent);} .text-signal\/70{color:color-mix(in srgb, var(--colors-signal) 70%, transparent);} .text-signal\/80{color:color-mix(in srgb, var(--colors-signal) 80%, transparent);} .text-white\/15{color:color-mix(in srgb, var(--colors-white) 15%, transparent);} .text-white\/25{color:color-mix(in srgb, var(--colors-white) 25%, transparent);} .text-white\/30{color:color-mix(in srgb, var(--colors-white) 30%, transparent);} .text-white\/35{color:color-mix(in srgb, var(--colors-white) 35%, transparent);} .text-white\/40{color:color-mix(in srgb, var(--colors-white) 40%, transparent);} .text-white\/45{color:color-mix(in srgb, var(--colors-white) 45%, transparent);} .text-white\/50{color:color-mix(in srgb, var(--colors-white) 50%, transparent);} .text-white\/60{color:color-mix(in srgb, var(--colors-white) 60%, transparent);} .hover\:text-accent:hover{color:color-mix(in srgb, var(--colors-accent) var(--un-text-opacity), transparent);} .hover\:text-red-400:hover{color:color-mix(in srgb, var(--colors-red-400) var(--un-text-opacity), transparent);} .hover\:text-white\/80:hover{color:color-mix(in srgb, var(--colors-white) 80%, transparent);} .placeholder\:text-white\/15::placeholder{color:color-mix(in srgb, var(--colors-white) 15%, transparent);} .tracking-\[0\.14em\]{--un-tracking:0.14em;letter-spacing:0.14em;} .tracking-\[0\.18em\]{--un-tracking:0.18em;letter-spacing:0.18em;} .font-mono{font-family:var(--font-mono);} .font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);} .mx-auto{margin-inline:auto;} .ml-auto{margin-left:auto;} .mt-3{margin-top:calc(var(--spacing) * 3);} .mt-4{margin-top:calc(var(--spacing) * 4);} .mt-5{margin-top:calc(var(--spacing) * 5);} .p-0\.5{padding:calc(var(--spacing) * 0.5);} .p-5{padding:calc(var(--spacing) * 5);} .p-6{padding:calc(var(--spacing) * 6);} .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);} .px-5{padding-inline:calc(var(--spacing) * 5);} .px-6{padding-inline:calc(var(--spacing) * 6);} .py-0\.5{padding-block:calc(var(--spacing) * 0.5);} .py-1{padding-block:calc(var(--spacing) * 1);} .py-1\.5{padding-block:calc(var(--spacing) * 1.5);} .py-10{padding-block:calc(var(--spacing) * 10);} .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-4{padding-block:calc(var(--spacing) * 4);} .py-6{padding-block:calc(var(--spacing) * 6);} .pb-0\.5{padding-bottom:calc(var(--spacing) * 0.5);} .pb-1{padding-bottom:calc(var(--spacing) * 1);} .text-center{text-align:center;} .text-left{text-align:left;} .text-right{text-align:right;} .outline-none{--un-outline-style:none;outline-style:none;} .border{border-width:1px;} .border-b{border-bottom-width:1px;} .border-accent\/30{border-color:color-mix(in srgb, var(--colors-accent) 30%, transparent);} .border-red-400\/30{border-color:color-mix(in srgb, var(--colors-red-400) 30%, transparent);} .border-red-400\/70{border-color:color-mix(in srgb, var(--colors-red-400) 70%, transparent);} .border-signal\/30{border-color:color-mix(in srgb, var(--colors-signal) 30%, transparent);} .border-white\/10{border-color:color-mix(in srgb, var(--colors-white) 10%, transparent);} .border-white\/12{border-color:color-mix(in srgb, var(--colors-white) 12%, transparent);} .border-white\/15{border-color:color-mix(in srgb, var(--colors-white) 15%, transparent);} .border-white\/8{border-color:color-mix(in srgb, var(--colors-white) 8%, transparent);} .hover\:border-accent\/40:hover{border-color:color-mix(in srgb, var(--colors-accent) 40%, transparent);} .hover\:border-red-400\/60:hover{border-color:color-mix(in srgb, var(--colors-red-400) 60%, transparent);} .focus\:border-accent\/60:focus{border-color:color-mix(in srgb, var(--colors-accent) 60%, transparent);} .focus\:border-red-400:focus{border-color:color-mix(in srgb, var(--colors-red-400) var(--un-border-opacity), transparent);} .last\:border-b-0:last-child{border-bottom-width:0px;} .rounded{border-radius:var(--radius-DEFAULT);} .rounded-2xl{border-radius:var(--radius-2xl);} .rounded-full{border-radius:calc(infinity * 1px);} .rounded-md{border-radius:var(--radius-md);} .border-dashed{--un-border-style:dashed;border-style:dashed;} .bg-\[radial-gradient\(circle\,rgba\(139\,92\,246\,0\.9\)\,transparent_48\%\)\]{background-image:radial-gradient(circle,rgba(139,92,246,0.9),transparent 48%);} .bg-\[radial-gradient\(circle\,rgba\(167\,139\,250\,0\.9\)\,transparent_46\%\)\]{background-image:radial-gradient(circle,rgba(167,139,250,0.9),transparent 46%);} .bg-\[radial-gradient\(circle\,rgba\(167\,139\,250\,0\.95\)\,transparent_48\%\)\]{background-image:radial-gradient(circle,rgba(167,139,250,0.95),transparent 48%);} .bg-\[radial-gradient\(circle\,rgba\(196\,181\,253\,0\.85\)\,transparent_46\%\)\]{background-image:radial-gradient(circle,rgba(196,181,253,0.85),transparent 46%);} .bg-accent{background-color:color-mix(in srgb, var(--colors-accent) var(--un-bg-opacity), transparent);} .bg-accent\/15{background-color:color-mix(in srgb, var(--colors-accent) 15%, transparent);} .bg-accent\/60{background-color:color-mix(in srgb, var(--colors-accent) 60%, transparent);} .bg-ink{background-color:color-mix(in srgb, var(--colors-ink) var(--un-bg-opacity), transparent);} .bg-red-400\/70{background-color:color-mix(in srgb, var(--colors-red-400) 70%, transparent);} .bg-transparent{background-color:transparent;} .flex{display:flex;} .inline-flex{display:inline-flex;} .shrink-0{flex-shrink:0;} .flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;} .gap-2{gap:calc(var(--spacing) * 2);} .gap-3{gap:calc(var(--spacing) * 3);} .gap-4{gap:calc(var(--spacing) * 4);} .grid{display:grid;} .grid-cols-\[130px_1fr_auto\]{grid-template-columns:130px 1fr auto;} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));} .size-\[980px\]{width:980px;height:980px;} .size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2);} .h-px{height:1px;} .max-h-\[420px\]{max-height:420px;} .max-w-\[220px\]{max-width:220px;} .max-w-\[380px\]{max-width:380px;} .max-w-\[880px\]{max-width:880px;} .min-h-screen{min-height:100vh;} .min-w-0{min-width:calc(var(--spacing) * 0);} .w-\[84px\]{width:84px;} .w-16{width:calc(var(--spacing) * 16);} .w-24{width:calc(var(--spacing) * 24);} .w-8{width:calc(var(--spacing) * 8);} .w-9{width:calc(var(--spacing) * 9);} .w-full{width:100%;} .block{display:block;} .hidden{display:none;} .cursor-not-allowed{cursor:not-allowed;} .pointer-events-none{pointer-events:none;} .whitespace-nowrap{white-space:nowrap;} .break-all{word-break:break-all;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .uppercase{text-transform:uppercase;} .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .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));} .items-center{align-items:center;} .items-baseline{align-items:baseline;} .inset-0{inset:calc(var(--spacing) * 0);} .left-0{left:calc(var(--spacing) * 0);} .left-6{left:calc(var(--spacing) * 6);} .right-6{right:calc(var(--spacing) * 6);} .top-0{top:calc(var(--spacing) * 0);} .justify-end{justify-content:flex-end;} .justify-center{justify-content:center;} .justify-between{justify-content:space-between;} .absolute{position:absolute;} .fixed{position:fixed;} .relative{position:relative;} .overflow-hidden{overflow:hidden;} .overflow-y-auto{overflow-y:auto;} .from-transparent{--un-gradient-from:transparent;--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .to-transparent{--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-via-stops, var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-to) var(--un-gradient-to-position));} .via-accent\/40{--un-via-opacity:40%;--un-gradient-via:color-mix(in oklab, var(--colors-accent) var(--un-via-opacity), transparent);--un-gradient-via-stops:var(--un-gradient-position), var(--un-gradient-from) var(--un-gradient-from-position), var(--un-gradient-via) var(--un-gradient-via-position), var(--un-gradient-to) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-via-stops);} .bg-linear-to-r{--un-gradient-position:to right in oklab;background-image:linear-gradient(var(--un-gradient-stops));} .min-h-dvh{min-height:100dvh;} .blur-\[18px\]{--un-blur:blur(18px);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,);} .blur-\[21px\]{--un-blur:blur(21px);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,);} .blur-\[22px\]{--un-blur:blur(22px);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,);} .blur-\[24px\]{--un-blur:blur(24px);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,);} .hover\:brightness-110:hover{--un-brightness:brightness(110%);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,);} .hex-mask{mask-image:url("data:image/svg+xml,");-webkit-mask-image:url("data:image/svg+xml,");mask-size:63.00px 36.37px;-webkit-mask-size:63.00px 36.37px;mask-repeat:repeat;-webkit-mask-repeat:repeat;} .plastic{background:rgba(255,255,255,0.045);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 32px rgba(0,0,0,0.5);} .glow-a{animation:drift-a 6.4s linear infinite;} .glow-b{animation:drift-b 8.6s linear infinite;} .glow-c{animation:drift-c 10.7s linear infinite;} .glow-d{animation:drift-d 7.9s linear infinite;} .hex{background-image:url("data:image/svg+xml,");background-size:63.00px 36.37px;} @supports (color: color-mix(in lab, red, red)){ .text-accent{color:color-mix(in oklab, var(--colors-accent) var(--un-text-opacity), transparent);} .text-accent-ink{color:color-mix(in oklab, var(--colors-accent-ink) var(--un-text-opacity), transparent);} .text-accent\/70{color:color-mix(in oklab, var(--colors-accent) 70%, transparent);} .text-accent\/80{color:color-mix(in oklab, var(--colors-accent) 80%, transparent);} .text-accent\/90{color:color-mix(in oklab, var(--colors-accent) 90%, transparent);} .text-fg{color:color-mix(in oklab, var(--colors-fg) var(--un-text-opacity), transparent);} .text-red-400\/80{color:color-mix(in oklab, var(--colors-red-400) 80%, transparent);} .text-red-400\/90{color:color-mix(in oklab, var(--colors-red-400) 90%, transparent);} .text-signal\/60{color:color-mix(in oklab, var(--colors-signal) 60%, transparent);} .text-signal\/70{color:color-mix(in oklab, var(--colors-signal) 70%, transparent);} .text-signal\/80{color:color-mix(in oklab, var(--colors-signal) 80%, transparent);} .text-white\/15{color:color-mix(in oklab, var(--colors-white) 15%, transparent);} .text-white\/25{color:color-mix(in oklab, var(--colors-white) 25%, transparent);} .text-white\/30{color:color-mix(in oklab, var(--colors-white) 30%, transparent);} .text-white\/35{color:color-mix(in oklab, var(--colors-white) 35%, transparent);} .text-white\/40{color:color-mix(in oklab, var(--colors-white) 40%, transparent);} .text-white\/45{color:color-mix(in oklab, var(--colors-white) 45%, transparent);} .text-white\/50{color:color-mix(in oklab, var(--colors-white) 50%, transparent);} .text-white\/60{color:color-mix(in oklab, var(--colors-white) 60%, transparent);} .hover\:text-accent:hover{color:color-mix(in oklab, var(--colors-accent) var(--un-text-opacity), transparent);} .hover\:text-red-400:hover{color:color-mix(in oklab, var(--colors-red-400) var(--un-text-opacity), transparent);} .hover\:text-white\/80:hover{color:color-mix(in oklab, var(--colors-white) 80%, transparent);} .placeholder\:text-white\/15::placeholder{color:color-mix(in oklab, var(--colors-white) 15%, transparent);} .border-accent\/30{border-color:color-mix(in oklab, var(--colors-accent) 30%, transparent);} .border-red-400\/30{border-color:color-mix(in oklab, var(--colors-red-400) 30%, transparent);} .border-red-400\/70{border-color:color-mix(in oklab, var(--colors-red-400) 70%, transparent);} .border-signal\/30{border-color:color-mix(in oklab, var(--colors-signal) 30%, transparent);} .border-white\/10{border-color:color-mix(in oklab, var(--colors-white) 10%, transparent);} .border-white\/12{border-color:color-mix(in oklab, var(--colors-white) 12%, transparent);} .border-white\/15{border-color:color-mix(in oklab, var(--colors-white) 15%, transparent);} .border-white\/8{border-color:color-mix(in oklab, var(--colors-white) 8%, transparent);} .hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--colors-accent) 40%, transparent);} .hover\:border-red-400\/60:hover{border-color:color-mix(in oklab, var(--colors-red-400) 60%, transparent);} .focus\:border-accent\/60:focus{border-color:color-mix(in oklab, var(--colors-accent) 60%, transparent);} .focus\:border-red-400:focus{border-color:color-mix(in oklab, var(--colors-red-400) var(--un-border-opacity), transparent);} .bg-accent{background-color:color-mix(in oklab, var(--colors-accent) var(--un-bg-opacity), transparent);} .bg-accent\/15{background-color:color-mix(in oklab, var(--colors-accent) 15%, transparent);} .bg-accent\/60{background-color:color-mix(in oklab, var(--colors-accent) 60%, transparent);} .bg-ink{background-color:color-mix(in oklab, var(--colors-ink) var(--un-bg-opacity), transparent);} .bg-red-400\/70{background-color:color-mix(in oklab, var(--colors-red-400) 70%, transparent);} } @media (min-width: 40rem){ .sm\:gap-4{gap:calc(var(--spacing) * 4);} .sm\:grid{display:grid;} .sm\:grid-cols-\[130px_1fr_auto\]{grid-template-columns:130px 1fr auto;} .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} .sm\:items-center{align-items:center;} .sm\:justify-end{justify-content:flex-end;} }