/* GENERATED by tools/design/looks-gen.js from css/app.css + tools/design/looks-base.css (stage 9a "Looks"). Do not edit.
 * Everything is inside @media screen and under html:root[data-look]: with no look (Classic) and in print this file changes nothing. */
@media screen{
/* ---- Looks (stage 9a): hand-written part. looks-gen.js wraps this in @media screen and appends the generated remap. ----
   The look's own values (--bgc --panelc --po --blur --ink --pink --head --accent --onaccent --edge --bw --r --depth --hard
   --glow --fh --fb --tex --texo --anim --inset --scheme) are written by Looks.js into <style id="look-vars"> (and by the
   head script of index.php before first paint). Nothing below applies without html[data-look]. */

html:root[data-look]{
  color-scheme: var(--scheme, dark);
  --theme-border: var(--accent);
  /* --fl = the panel colour composited over the page colour, fully opaque (a glass look: the page colour lifted a few percent;
     a solid look: the panel colour). Floating layers (menus, dialogs, pop-ups, the Looks window) are painted from --fl1..--fl4
     so the page can never show through them. --pnl (inline panels) = --fl at max(Panel opacity, 80%): never see-through. */
  --fl: color-mix(in srgb, var(--panelc) calc(var(--po) * 100%), var(--bgc));
  --fl1: var(--fl);
  --fl2: color-mix(in srgb, var(--fl), var(--pink) 10%);
  --fl3: color-mix(in srgb, var(--fl), var(--pink) 20%);
  --fl4: color-mix(in srgb, var(--fl), var(--pink) 32%);
  --pnl: color-mix(in srgb, var(--fl) calc(max(var(--po), .8) * 100%), transparent);
  --s0: var(--bgc);
  --s1: var(--pnl);
  --s2: color-mix(in srgb, var(--pnl), var(--pink) 10%);
  --s3: color-mix(in srgb, var(--pnl), var(--pink) 20%);
  --s4: color-mix(in srgb, var(--pnl), var(--pink) 32%);
  /* text colour of the surface you are on (--t1) and the heading colour there (--hd); surfaces re-declare them */
  --t1: var(--ink);
  --hd: var(--head);
  --lt: var(--bl); /* 1 = the surface you are on is light (semantic text darkens, dark-tint chips lighten) */
  --sh: calc(var(--hard) * 4px) calc(var(--hard) * 4px) 0 var(--edge),
        0 calc(var(--depth) * 8px) calc(var(--depth) * 18px) rgba(0,0,0,calc(.08 + var(--depth) * .28)),
        inset 0 1px 0 rgba(255,255,255,calc(var(--depth) * .22)),
        inset 0 calc(var(--depth) * -3px) calc(var(--depth) * 7px) rgba(0,0,0,calc(var(--depth) * .28));
}

/* FLOATING layers (stage 9c): every full-screen window / overlay, menu, list box, dialog, drop-down and toast re-declares the
   surface steps from the opaque --fl family. The generated remap (bg-slate-800 -> var(--s1) ...) then paints them solid, and
   everything inside them inherits it. Census: tools/design/looks-floating-census.js. A new floating surface needs no CSS when it
   is .fixed (and not pointer-events-none), has a role of menu / listbox / dialog, or a z-index class on an .absolute drop-down. */
html:root[data-look] :is(.fixed:not(.pointer-events-none), .absolute[class*="z-["], .absolute.z-50, .absolute.z-40, [role=menu], [role=listbox], [role=dialog], .suggest-popup, .app-dialog-overlay, #app-toasts){
  --pnl: var(--fl);
  --s1: var(--fl1); --s2: var(--fl2); --s3: var(--fl3); --s4: var(--fl4);
}

/* page */
:where(html:root[data-look]) body{ background-color: var(--bgc); color: var(--ink); font-family: var(--fb); }
:where(html:root[data-look]) body::before{
  content: ""; position: fixed; inset: var(--inset); z-index: -100; pointer-events: none;
  background: var(--tex); background-size: var(--texsize, auto); opacity: var(--texo); animation: var(--anim);
}
html:root[data-look][data-look-motion="sub"] body::before{ animation-duration: 60s !important; }
html:root[data-look][data-look-motion="off"] body::before{ animation: none !important; }
@media (prefers-reduced-motion: reduce){ html:root[data-look] body::before{ animation: none !important; } }
@keyframes look-drift{ to{ transform: translate(4%,3%) scale(1.06); } }
@keyframes look-scan{ to{ transform: translateY(3px); } }
@keyframes look-flicker{ 0%,100%{ opacity: var(--texo); } 30%{ opacity: calc(var(--texo) * .7); } 60%{ opacity: calc(var(--texo) * .95); } 80%{ opacity: calc(var(--texo) * .75); } }
@keyframes look-spin{ to{ transform: rotate(360deg); } }
@keyframes look-sway{ to{ transform: translateX(3%); } }

/* decorative backgrounds never fight the text */
html:root[data-look] .magic-watermark{ opacity: .07 !important; }
html:root[data-look] .class-logo-watermark{ opacity: .06 !important; filter: none !important; }

/* type */
html:root[data-look] :is(h1,h2,h3,h4,h5,h6,.sheet-box-title,.font-cinzel){ font-family: var(--fh); }
:where(html:root[data-look]) :is(h1,h2,h3,h4,h5,h6){ color: var(--hd); }
html:root[data-look][data-look-caps] :is(h1,h2,h3,h4,h5,h6,.sheet-box-title){ text-transform: uppercase; }
html:root[data-look][data-look-track] :is(h1,h2,h3,h4,h5,h6,.sheet-box-title){ letter-spacing: var(--track); }
html:root[data-look] :is(h1,h2,h3,h4,h5,h6){ text-shadow: 0 0 calc(var(--glow) * 14px) var(--accent); }

/* form controls. Classic is the plain element rule `input, textarea, select` (specificity 0,0,1): these tie with it and win by
   order, but lose to any class on the element. An input with no bg-* class is a panel-coloured box that pairs with --pink and says so
   itself (--t1); one WITH a bg-* class (remapped to a surface) keeps what the class says and only gets the text colour of that surface. */
:where(html:root[data-look]) :is(input,textarea,select):where(:not([class*="bg-"])){
  background-color: var(--s2); color: var(--pink); --t1: var(--pink); --lt: var(--pl);
}
:where(html:root[data-look]) :is(input,textarea,select):where([class*="bg-"]){ color: var(--t1); }
:where(html:root[data-look]) :is(input,textarea,select){ border: var(--bw) solid var(--edge); border-radius: calc(var(--r) * .5); }
:where(html:root[data-look]) :is(input,textarea)::placeholder{ color: color-mix(in srgb, var(--t1) 55%, transparent); }
:where(html:root[data-look]) select option{ background-color: var(--s0); color: var(--ink); }
html:root[data-look] :is(input:focus,textarea:focus,select:focus){ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 calc(var(--glow) * 12px) var(--accent); }
html:root[data-look] :is(input[type="checkbox"],input[type="radio"],input[type="range"]){ accent-color: var(--accent); }

/* panels */
html:root[data-look] .sheet-box{
  background: var(--pnl) !important; border: var(--bw) solid var(--edge) !important; border-radius: calc(var(--r) * .7);
  box-shadow: var(--sh); color: var(--pink); --t1: var(--pink); --hd: var(--pink); --lt: var(--pl);
  -webkit-backdrop-filter: var(--bfilter, none); backdrop-filter: var(--bfilter, none);
}
html:root[data-look] .sheet-box:hover{ border-color: var(--accent) !important; box-shadow: var(--sh), 0 0 calc(var(--glow) * 18px) var(--accent); }
html:root[data-look] .sheet-box-title{
  background: color-mix(in srgb, var(--pnl), var(--pink) 14%) !important; color: var(--pink) !important;
  border-top: 1px solid var(--edge); border-radius: 0 0 calc(var(--r) * .7) calc(var(--r) * .7);
}
/* the Classic "glass" rule for bg-slate-800/900 (index.php) paints a gradient with !important */
html:root[data-look] .bg-slate-800:not(.no-glass):not(.active-combat-turn){
  background: var(--s1) !important; border: var(--bw) solid var(--edge); box-shadow: var(--sh);
}
html:root[data-look] .bg-slate-900:not(.no-glass):not(.active-combat-turn){
  background: var(--s0) !important; border: var(--bw) solid var(--edge); box-shadow: var(--sh);
}

/* the Compendium window paints its own navy at 95% (index.php) and has no surface class: solid, paired with the panel text colour */
html:root[data-look] .compendium-modal-panel{
  background: var(--fl1) !important; color: var(--pink); --t1: var(--pink); --hd: var(--pink); --lt: var(--pl);
}

/* markdown (user-written text) */
html:root[data-look] .markdown-body{ color: var(--t1); }
html:root[data-look] .markdown-body h1{ color: var(--hd); border-bottom-color: var(--edge); }
html:root[data-look] .markdown-body :is(h2,h3){ color: color-mix(in srgb, var(--accent) 45%, var(--t1)); }
html:root[data-look] .markdown-body strong{ color: var(--t1); }
html:root[data-look] .markdown-body em{ color: color-mix(in srgb, var(--t1) 70%, transparent); }
html:root[data-look] .markdown-body code{ background: var(--s2); }
html:root[data-look] .markdown-body pre{ background: var(--s0); color: var(--ink); }
html:root[data-look] .markdown-body blockquote{ border-left-color: var(--edge); color: color-mix(in srgb, var(--t1) 70%, transparent); }

/* scrollbars */
html:root[data-look] ::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--bgc) 40%, transparent); }
html:root[data-look] ::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent) 55%, transparent); }
html:root[data-look] ::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

/* the class colour seam (globals.js getTheme returns these names while a look is on) */
html:root[data-look] .look-primary{ background-color: var(--accent); --t1: var(--onaccent); --hd: var(--onaccent); --lt: var(--al); }
html:root[data-look] .look-hover:hover{ background-color: color-mix(in srgb, var(--accent) 82%, #fff); }
html:root[data-look] .look-text{ color: color-mix(in srgb, var(--accent) 45%, var(--t1)); }
html:root[data-look] .look-border{ border-color: var(--accent); }

/* the combat card whose turn it is: Classic paints a pale cyan veil with !important (index.php) */
html:root[data-look] .active-combat-turn{
  background: color-mix(in srgb, var(--accent) 14%, var(--s1)) !important; border-color: var(--accent);
  --t1: var(--pink); --hd: var(--pink); --lt: var(--pl); color: var(--pink);
}

/* art packs (stage 9b, Looks.js lookArtActive): the look's own header banner behind the page headers (class look-banner, with a veil
   so the buttons and tabs stay readable) and its pictures as icons (Icon in Looks.js renders <img class="look-icon">) */
html:root[data-look][data-look-art] .look-banner{
  background-image: linear-gradient(color-mix(in srgb, var(--s0) 52%, transparent), color-mix(in srgb, var(--s0) 52%, transparent)), var(--banner);
  background-size: cover; background-position: center;
}
html:root[data-look] .look-icon{ image-rendering: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* the Portals icons are thin glowing lines on a dark disc: lift them a little so they read at 22-24 px */
html:root[data-look="portal"] .look-icon{ filter: brightness(1.35) contrast(1.05) drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* stage 9c: Tavern's slab type is wide, so the ten phone tab labels ("TRAITS") were cut to "TRAI…" at 375 px */
@media (max-width: 420px){
  html:root[data-look="tavern"] .fixed.bottom-0 > button > span:last-child{ font-size: 7.5px; letter-spacing: -.045em; padding-left: 0; padding-right: 0; }
}

/* stage 9c: Carved Stone is a mid-tone look (page #9a968c, panel #a9a59b), so the usual 50-78 % text steps and the pale indigo
   chips fell to 2.4-2.9:1. Those classes read the surface's own text colour (--t1), so on an accent button they still pair with it. */
html:root:root[data-look="stone"] :is(.text-slate-300,.text-slate-400,.text-slate-500,.text-slate-600){ color: color-mix(in srgb, var(--t1) 94%, transparent); }
html:root:root[data-look="stone"] [class*="text-indigo-"]{ color: color-mix(in srgb, var(--accent) 22%, var(--t1)); }

/* stage 9c: the card whose turn it is washes the whole card in the accent; red names (down / monsters) fell to 2.6:1 on Druidic Nature's
   bright green. A lighter wash + red-200 text on dark surfaces; light surfaces keep a dark red. */
html:root[data-look] .active-combat-turn :is(.text-red-400,.text-red-500){ color: color-mix(in srgb, #fecaca calc(100% - var(--lt) * 100%), #7f1d1d); }

/* ---- art packs, stage 9d: corners, dividers, portrait rings, class emblems (only with html[data-look-art]; Looks.js writes
   --corner-tl/-tr/-bl/-br --divider --avatar --ak into <style id="look-vars">; a picture that fails to load simply shows nothing) ---- */

/* corners: background images only, on a ::before that never takes a click and never moves anything. LOOK_CORNERS = 1 in Looks.js
   turns the other three off. Only the OUTERMOST panel wears them (a panel inside a panel stays plain). */
html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800:is([class*="rounded-lg"],[class*="rounded-xl"],[class*="rounded-2xl"]):is([class*="p-3"],[class*="p-4"],[class*="p-5"],[class*="p-6"],[class*="p-8"]), .compendium-modal-panel):not(:is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800) :is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800)):not(.absolute,.fixed,.sticky,.relative){
  position: relative;
}
/* the ::before sits at z -1 inside the panel's own stacking context: above the panel colour, below every child */
html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800:is([class*="rounded-lg"],[class*="rounded-xl"],[class*="rounded-2xl"]):is([class*="p-3"],[class*="p-4"],[class*="p-5"],[class*="p-6"],[class*="p-8"]), .compendium-modal-panel):not(:is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800) :is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800)){
  isolation: isolate;
}
html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800:is([class*="rounded-lg"],[class*="rounded-xl"],[class*="rounded-2xl"]):is([class*="p-3"],[class*="p-4"],[class*="p-5"],[class*="p-6"],[class*="p-8"]), .compendium-modal-panel):not(:is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800) :is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800))::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;   /* under the text, over the panel colour */
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: clamp(22px, 9%, 38px) auto;
  background-image: var(--corner-tl, none), var(--corner-tr, none), var(--corner-bl, none), var(--corner-br, none);
}
/* wide, short bars (the Combat Tracker header, the compact character header) size the ornament by their HEIGHT so it never
   covers the first letters of the title; the .sheet-box tiles keep the width-based size */
html:root[data-look][data-look-art] :is(.cfx-card, .bg-slate-800, .compendium-modal-panel):not(.sheet-box)::before{ background-size: auto clamp(20px, 32%, 38px) !important; }
@media (max-width: 420px){
  html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800, .compendium-modal-panel)::before{ background-size: clamp(18px, 8%, 30px) auto; }
  html:root[data-look][data-look-art] :is(.cfx-card, .bg-slate-800, .compendium-modal-panel):not(.sheet-box)::before{ background-size: auto clamp(18px, 26%, 30px) !important; }
}

/* stage 9e: the first heading of a panel with corners gets room for the top-left ornament (short wide bars such as the Combat
   Tracker header had the ornament over the first letter). Padding only, so nothing else moves. */
html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800:is([class*="rounded-lg"],[class*="rounded-xl"],[class*="rounded-2xl"]):is([class*="p-3"],[class*="p-4"],[class*="p-5"],[class*="p-6"],[class*="p-8"]), .compendium-modal-panel):not(:is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800) :is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800)) > :is(h1,h2,h3,h4):first-child,
html:root[data-look][data-look-art] :is(.sheet-box, .cfx-card, .bg-slate-800:is([class*="rounded-lg"],[class*="rounded-xl"],[class*="rounded-2xl"]):is([class*="p-3"],[class*="p-4"],[class*="p-5"],[class*="p-6"],[class*="p-8"]), .compendium-modal-panel):not(:is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800) :is(.sheet-box, .cfx-card, .compendium-modal-panel, .bg-slate-800)) > :first-child > :is(h1,h2,h3,h4):first-child{
  padding-left: 1.5rem;
}

/* dividers: the thin rule under a section title (h1-h4 with border-b, and the Classic title bar's top rule) becomes the look's divider,
   centred, contained, 18 px high; the rule's own colour goes transparent so nothing shifts. Table rows, inputs and one-pixel
   separators inside lists are left alone. */
html:root[data-look][data-look-art] :is(h1,h2,h3,h4).border-b{
  border-bottom-color: transparent !important; position: relative;
}
html:root[data-look][data-look-art] :is(h1,h2,h3,h4).border-b::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 18px; pointer-events: none;
  background: var(--divider, none) center / contain no-repeat;
}
html:root[data-look][data-look-art] .sheet-box-title{ border-top-color: transparent; position: relative; }
html:root[data-look][data-look-art] .sheet-box-title::before{
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 18px; pointer-events: none;
  background: var(--divider, none) center / contain no-repeat;
}

/* portrait rings: Looks.js lookAvatar() wraps a round portrait in span.look-avatar. The ring sits OVER the portrait (its hole is
   transparent), --ak = ring width / portrait width (1.5 - 1.7), so the ring's edge is about 17 px beyond a 48 px portrait: the small
   right margin keeps it off the name. The portrait itself is forced round (monster portraits are rounded squares). */
html:root[data-look][data-look-art] .look-avatar{
  position: relative; display: inline-flex; flex-shrink: 0; border-radius: 9999px;
  /* stage 9e: the ring (portrait x --ak) reaches (ak-1)/2 x 48 px past a 48 px portrait; sized together with it, the ring stays
     inside the card's 16 px padding + this margin on the left (it used to poke past the card edge) and off the name on the right */
  margin-left: max(0px, calc((var(--ak, 1.6) - 1) * 24px - 12px)); margin-right: calc((var(--ak, 1.6) - 1) * 24px - 4px);
  /* and below the Active Turn pill that sits on the card's top edge (it reaches up to 14 px into the card; the ring top ends 15 px inside) */
  margin-top: max(0px, calc((var(--ak, 1.6) - 1) * 24px - 1px));
}
html:root[data-look][data-look-art] .look-avatar > *{ border-radius: 9999px; }
html:root[data-look][data-look-art] .look-avatar::after{
  content: ""; position: absolute; inset: calc((1 - var(--ak, 1.6)) * 50%); z-index: 3; pointer-events: none;
  background: var(--avatar, none) center / 100% 100% no-repeat;
}

/* the class emblem next to a name (CompactCharHeader) */
html:root[data-look][data-look-art] .look-emblem{ display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: .4rem; vertical-align: -.35em; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* stage 9f: the top-right of a combat card was crowded (corner ornament + initiative badge + AC circle + Speak pill in one spot).
   (1) no top-right ornament on a combat card (the other three stay);
   (2) the small initiative badge moves OUT to the left of the AC circle (the circle gets the room, margin only) so badge, circle and
   the Speak pill sit apart. Classic never matches html[data-look]; the big "rolling" badge (w-14) is not touched. */
html:root[data-look][data-look-art] .cfx-card{ --corner-tr: none; }
html:root[data-look] .cfx-card :is(div):has(> [class*="-top-2 -left-2 w-5 h-5"]){ margin-left: 30px !important; }
html:root[data-look] .cfx-card [class*="-top-2 -left-2 w-5 h-5"]{ top: 8px !important; left: -26px !important; }
/* stage 9g-1: a combat card with NO portrait (player card without a picture) starts its name block in the top-left corner, where the
   ornament is (Parchment: the ornament touched the "T" of the name). That name block, only when it is the first thing in its row, moves right. */
html:root[data-look][data-look-art] .cfx-card div:first-child:has(> :first-child > h3:first-child){ padding-left: 1.25rem; }

/* stage 9f: the class emblem behind the page was at .06 and half off-screen (Classic: .15, left -60px). With the look's drawn emblem:
   per-look strength --wm (stage 9g-3: .32 on dark looks, .24 on light ones, LOOK_ART[look].wm for busy tiles; x .9 on a phone), an
   outline pair --wmf (drop-shadow: pale + dark, so it stands off its own texture; never backdrop-filter), fully on screen at the
   bottom left, same size as Classic. Still a background: z -50 (behind the panels), no clicks. The img/logos fallback keeps .06 above. */
html:root[data-look][data-look-art] .class-logo-watermark.look-emblem-wm{ opacity: var(--wm, .3) !important; filter: var(--wmf, none) !important; left: 8px; bottom: 5%; }
@media (max-width: 768px){
  html:root[data-look][data-look-art] .class-logo-watermark.look-emblem-wm{ opacity: calc(var(--wm, .3) * .9) !important; left: 4px; bottom: 4%; }
}

/* stage 9f: on a phone (the folded ~360 px wide screen included) the header banner was cropped by "cover" to its calm middle, so
   the swirls at both ends were out of view. Up to 420 px the strip is fitted to the width and centred instead (no stretching). */
@media (max-width: 420px){
  html:root[data-look][data-look-art] .look-banner{ background-size: auto, 100% auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
}

/* ---- generated remap of the compiled Tailwind colour utilities ---- */
html:root[data-look] .divide-slate-700>:not([hidden])~:not([hidden]){border-color:var(--edge)}
html:root[data-look] .divide-stone-800>:not([hidden])~:not([hidden]){border-color:color-mix(in srgb, var(--edge) 55%, transparent)}
html:root[data-look] .rounded{border-radius:max(0px,calc(var(--r)*0.5))}
html:root[data-look] .rounded-2xl{border-radius:max(0px,calc(var(--r)*2))}
html:root[data-look] .rounded-lg{border-radius:max(0px,calc(var(--r)*1))}
html:root[data-look] .rounded-md{border-radius:max(0px,calc(var(--r)*0.75))}
html:root[data-look] .rounded-sm{border-radius:max(0px,calc(var(--r)*0.25))}
html:root[data-look] .rounded-xl{border-radius:max(0px,calc(var(--r)*1.5))}
html:root[data-look] .rounded-b-lg{border-bottom-right-radius:max(0px,calc(var(--r)*1));border-bottom-left-radius:max(0px,calc(var(--r)*1))}
html:root[data-look] .rounded-l{border-top-left-radius:max(0px,calc(var(--r)*0.5));border-bottom-left-radius:max(0px,calc(var(--r)*0.5))}
html:root[data-look] .rounded-r{border-bottom-right-radius:max(0px,calc(var(--r)*0.5))}
html:root[data-look] .rounded-t{border-top-left-radius:max(0px,calc(var(--r)*0.5))}
html:root[data-look] .rounded-t-lg{border-top-left-radius:max(0px,calc(var(--r)*1));border-top-right-radius:max(0px,calc(var(--r)*1))}
html:root[data-look] .border-indigo-300{border-color:var(--accent)}
html:root[data-look] .border-indigo-400{border-color:var(--accent)}
html:root[data-look] .border-indigo-400\/30{border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
html:root[data-look] .border-indigo-500{border-color:var(--accent)}
html:root[data-look] .border-indigo-500\/30{border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
html:root[data-look] .border-indigo-500\/40{border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
html:root[data-look] .border-indigo-500\/50{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
html:root[data-look] .border-indigo-500\/60{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
html:root[data-look] .border-indigo-500\/70{border-color:color-mix(in srgb, var(--accent) 70%, transparent)}
html:root[data-look] .border-indigo-600{border-color:var(--accent)}
html:root[data-look] .border-indigo-700{border-color:var(--accent)}
html:root[data-look] .border-indigo-700\/50{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
html:root[data-look] .border-indigo-900{border-color:var(--accent)}
html:root[data-look] .border-indigo-900\/40{border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
html:root[data-look] .border-indigo-900\/50{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
html:root[data-look] .border-indigo-950\/60{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
html:root[data-look] .border-slate-300{border-color:color-mix(in srgb, var(--edge), var(--pink) 45%)}
html:root[data-look] .border-slate-400{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .border-slate-500{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .border-slate-600{border-color:var(--edge)}
html:root[data-look] .border-slate-600\/50{border-color:color-mix(in srgb, var(--edge) 50%, transparent)}
html:root[data-look] .border-slate-700{border-color:var(--edge)}
html:root[data-look] .border-slate-700\/50{border-color:color-mix(in srgb, var(--edge) 50%, transparent)}
html:root[data-look] .border-slate-700\/60{border-color:color-mix(in srgb, var(--edge) 60%, transparent)}
html:root[data-look] .border-slate-700\/70{border-color:color-mix(in srgb, var(--edge) 70%, transparent)}
html:root[data-look] .border-slate-800{border-color:color-mix(in srgb, var(--edge) 55%, transparent)}
html:root[data-look] .border-slate-800\/80{border-color:color-mix(in srgb, color-mix(in srgb, var(--edge) 55%, transparent) 80%, transparent)}
html:root[data-look] .border-slate-900{border-color:color-mix(in srgb, var(--edge) 55%, transparent)}
html:root[data-look] .border-stone-700{border-color:var(--edge)}
html:root[data-look] .border-zinc-500{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .border-x-slate-700\/50{border-left-color:color-mix(in srgb, var(--edge) 50%, transparent);border-right-color:color-mix(in srgb, var(--edge) 50%, transparent)}
html:root[data-look] .border-b-slate-700\/50{border-bottom-color:color-mix(in srgb, var(--edge) 50%, transparent)}
html:root[data-look] .border-l-slate-400{border-left-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .border-t-indigo-600{border-top-color:var(--accent)}
:where(html:root[data-look]) :where(.bg-amber-500){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-amber-600){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-amber-600\/80){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-amber-700){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-amber-800{background-color:color-mix(in srgb, rgb(146 64 14/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-800\/80{background-color:color-mix(in srgb, rgba(146,64,14,.8) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/20{background-color:color-mix(in srgb, rgba(120,53,15,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/30{background-color:color-mix(in srgb, rgba(120,53,15,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/40{background-color:color-mix(in srgb, rgba(120,53,15,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/50{background-color:color-mix(in srgb, rgba(120,53,15,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/60{background-color:color-mix(in srgb, rgba(120,53,15,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-900\/90{background-color:color-mix(in srgb, rgba(120,53,15,.9) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-950{background-color:color-mix(in srgb, rgb(69 26 3/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-950\/15{background-color:color-mix(in srgb, rgba(69,26,3,.15) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-950\/30{background-color:color-mix(in srgb, rgba(69,26,3,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-amber-950\/40{background-color:color-mix(in srgb, rgba(69,26,3,.4) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-black){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-black\/30{background-color:color-mix(in srgb, #000 calc(30% + var(--pl) * 55%), transparent)}:where(html:root[data-look]) :where(.bg-black\/30){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-black\/50{background-color:color-mix(in srgb, #000 calc(50% + var(--pl) * 35%), transparent)}:where(html:root[data-look]) :where(.bg-black\/50){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-black\/60{background-color:color-mix(in srgb, #000 calc(60% + var(--pl) * 25%), transparent)}:where(html:root[data-look]) :where(.bg-black\/60){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-black\/70{background-color:color-mix(in srgb, #000 calc(70% + var(--pl) * 15%), transparent)}:where(html:root[data-look]) :where(.bg-black\/70){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-black\/80{background-color:color-mix(in srgb, #000 calc(80% + var(--pl) * 5%), transparent)}:where(html:root[data-look]) :where(.bg-black\/80){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-black\/85){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-black\/90){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-black\/95){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-blue-500){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-blue-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-blue-900\/40{background-color:color-mix(in srgb, rgba(30,58,138,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-blue-950\/10{background-color:color-mix(in srgb, rgba(23,37,84,.1) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-cyan-900\/60{background-color:color-mix(in srgb, rgba(22,78,99,.6) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-emerald-500){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-emerald-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-emerald-600\/90){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-emerald-700){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-emerald-800{background-color:color-mix(in srgb, rgb(6 95 70/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900{background-color:color-mix(in srgb, rgb(6 78 59/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/20{background-color:color-mix(in srgb, rgba(6,78,59,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/30{background-color:color-mix(in srgb, rgba(6,78,59,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/40{background-color:color-mix(in srgb, rgba(6,78,59,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/50{background-color:color-mix(in srgb, rgba(6,78,59,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/60{background-color:color-mix(in srgb, rgba(6,78,59,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/70{background-color:color-mix(in srgb, rgba(6,78,59,.7) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-900\/80{background-color:color-mix(in srgb, rgba(6,78,59,.8) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950{background-color:color-mix(in srgb, rgb(2 44 34/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950\/10{background-color:color-mix(in srgb, rgba(2,44,34,.1) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950\/20{background-color:color-mix(in srgb, rgba(2,44,34,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950\/30{background-color:color-mix(in srgb, rgba(2,44,34,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950\/40{background-color:color-mix(in srgb, rgba(2,44,34,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-emerald-950\/50{background-color:color-mix(in srgb, rgba(2,44,34,.5) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-fuchsia-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-fuchsia-900\/40{background-color:color-mix(in srgb, rgba(112,26,117,.4) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-green-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-green-900{background-color:color-mix(in srgb, rgb(20 83 45/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-green-900\/70{background-color:color-mix(in srgb, rgba(20,83,45,.7) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-indigo-500{background-color:color-mix(in srgb, var(--accent) 82%, #fff)}:where(html:root[data-look]) :where(.bg-indigo-500){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .bg-indigo-600{background-color:var(--accent)}:where(html:root[data-look]) :where(.bg-indigo-600){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .bg-indigo-600\/50{background-color:color-mix(in srgb, var(--accent) 50%, transparent)}
html:root[data-look] .bg-indigo-600\/90{background-color:color-mix(in srgb, var(--accent) 90%, transparent)}
html:root[data-look] .bg-indigo-700{background-color:color-mix(in srgb, var(--accent) 85%, #000)}:where(html:root[data-look]) :where(.bg-indigo-700){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .bg-indigo-900{background-color:color-mix(in srgb, var(--accent) 22%, var(--s1))}:where(html:root[data-look]) :where(.bg-indigo-900){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-indigo-900\/10{background-color:color-mix(in srgb, var(--accent) 2%, transparent)}
html:root[data-look] .bg-indigo-900\/20{background-color:color-mix(in srgb, var(--accent) 4%, transparent)}
html:root[data-look] .bg-indigo-900\/30{background-color:color-mix(in srgb, var(--accent) 7%, transparent)}
html:root[data-look] .bg-indigo-900\/40{background-color:color-mix(in srgb, var(--accent) 9%, transparent)}
html:root[data-look] .bg-indigo-900\/50{background-color:color-mix(in srgb, var(--accent) 11%, transparent)}
html:root[data-look] .bg-indigo-900\/60{background-color:color-mix(in srgb, var(--accent) 13%, transparent)}
html:root[data-look] .bg-indigo-900\/70{background-color:color-mix(in srgb, var(--accent) 15%, transparent)}
html:root[data-look] .bg-indigo-900\/80{background-color:color-mix(in srgb, var(--accent) 18%, transparent)}
html:root[data-look] .bg-indigo-900\/90{background-color:color-mix(in srgb, var(--accent) 20%, transparent)}
html:root[data-look] .bg-indigo-950{background-color:color-mix(in srgb, var(--accent) 16%, var(--s1))}:where(html:root[data-look]) :where(.bg-indigo-950){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-indigo-950\/30{background-color:color-mix(in srgb, var(--accent) 5%, transparent)}
html:root[data-look] .bg-indigo-950\/40{background-color:color-mix(in srgb, var(--accent) 6%, transparent)}
:where(html:root[data-look]) :where(.bg-orange-500){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-orange-600){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-orange-700){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-orange-900\/50{background-color:color-mix(in srgb, rgba(124,45,18,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-orange-900\/60{background-color:color-mix(in srgb, rgba(124,45,18,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-orange-900\/80{background-color:color-mix(in srgb, rgba(124,45,18,.8) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-orange-950{background-color:color-mix(in srgb, rgb(67 20 7/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-pink-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-purple-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-purple-600\/90){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-purple-900\/20{background-color:color-mix(in srgb, rgba(88,28,135,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-purple-900\/40{background-color:color-mix(in srgb, rgba(88,28,135,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-purple-900\/60{background-color:color-mix(in srgb, rgba(88,28,135,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-purple-950\/10{background-color:color-mix(in srgb, rgba(59,7,100,.1) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-purple-950\/20{background-color:color-mix(in srgb, rgba(59,7,100,.2) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-red-500){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-red-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-red-600\/80){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-red-600\/90){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-red-700){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-red-800{background-color:color-mix(in srgb, rgb(153 27 27/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900{background-color:color-mix(in srgb, rgb(127 29 29/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/30{background-color:color-mix(in srgb, rgba(127,29,29,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/40{background-color:color-mix(in srgb, rgba(127,29,29,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/50{background-color:color-mix(in srgb, rgba(127,29,29,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/60{background-color:color-mix(in srgb, rgba(127,29,29,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/70{background-color:color-mix(in srgb, rgba(127,29,29,.7) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/80{background-color:color-mix(in srgb, rgba(127,29,29,.8) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-900\/90{background-color:color-mix(in srgb, rgba(127,29,29,.9) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-950{background-color:color-mix(in srgb, rgb(69 10 10/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-950\/20{background-color:color-mix(in srgb, rgba(69,10,10,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-950\/30{background-color:color-mix(in srgb, rgba(69,10,10,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-red-950\/40{background-color:color-mix(in srgb, rgba(69,10,10,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-rose-900\/50{background-color:color-mix(in srgb, rgba(136,19,55,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-rose-950\/15{background-color:color-mix(in srgb, rgba(76,5,25,.15) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-sky-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.bg-sky-700){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-sky-800{background-color:color-mix(in srgb, rgb(7 89 133/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-sky-900{background-color:color-mix(in srgb, rgb(12 74 110/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-sky-900\/60{background-color:color-mix(in srgb, rgba(12,74,110,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-sky-950\/20{background-color:color-mix(in srgb, rgba(8,47,73,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-sky-950\/60{background-color:color-mix(in srgb, rgba(8,47,73,.6) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-slate-500{background-color:var(--s4)}:where(html:root[data-look]) :where(.bg-slate-500){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-slate-600{background-color:var(--s3)}:where(html:root[data-look]) :where(.bg-slate-600){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-slate-700{background-color:var(--s2)}:where(html:root[data-look]) :where(.bg-slate-700){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-slate-700\/50{background-color:color-mix(in srgb, var(--t1) 18%, transparent)}
html:root[data-look] .bg-slate-700\/80{background-color:color-mix(in srgb, var(--t1) 28%, transparent)}
html:root[data-look] .bg-slate-800{background-color:var(--s1)}:where(html:root[data-look]) :where(.bg-slate-800){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .bg-slate-800\/50{background-color:color-mix(in srgb, var(--t1) 13%, transparent)}
html:root[data-look] .bg-slate-800\/60{background-color:color-mix(in srgb, var(--t1) 15%, transparent)}
html:root[data-look] .bg-slate-800\/70{background-color:color-mix(in srgb, var(--t1) 18%, transparent)}
html:root[data-look] .bg-slate-800\/80{background-color:color-mix(in srgb, var(--t1) 20%, transparent)}
html:root[data-look] .bg-slate-900{background-color:var(--s0)}:where(html:root[data-look]) :where(.bg-slate-900){--t1:var(--ink);--hd:var(--head);--lt:var(--bl);color:var(--t1)}
html:root[data-look] .bg-slate-900\/30{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(30 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/40{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(40 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/50{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(50 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/60{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(60 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/70{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(70 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/80{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(80 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/90{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(90 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-900\/95{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(95 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-slate-950{background-color:var(--s0)}:where(html:root[data-look]) :where(.bg-slate-950){--t1:var(--ink);--hd:var(--head);--lt:var(--bl);color:var(--t1)}
html:root[data-look] .bg-slate-950\/50{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(50 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-stone-900{background-color:var(--s0)}:where(html:root[data-look]) :where(.bg-stone-900){--t1:var(--ink);--hd:var(--head);--lt:var(--bl);color:var(--t1)}
html:root[data-look] .bg-stone-900\/50{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(50 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .bg-stone-950{background-color:var(--s0)}:where(html:root[data-look]) :where(.bg-stone-950){--t1:var(--ink);--hd:var(--head);--lt:var(--bl);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-teal-600){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .bg-teal-900\/50{background-color:color-mix(in srgb, rgba(19,78,74,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-violet-900\/50{background-color:color-mix(in srgb, rgba(76,29,149,.5) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.bg-yellow-500){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.bg-yellow-600){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
html:root[data-look] .bg-yellow-900\/30{background-color:color-mix(in srgb, rgba(113,63,18,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-yellow-900\/40{background-color:color-mix(in srgb, rgba(113,63,18,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-yellow-900\/50{background-color:color-mix(in srgb, rgba(113,63,18,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-yellow-950\/20{background-color:color-mix(in srgb, rgba(66,32,6,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .bg-zinc-600{background-color:var(--s3)}:where(html:root[data-look]) :where(.bg-zinc-600){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .from-amber-900\/40{--tw-gradient-from:color-mix(in srgb, rgba(120,53,15,.4) calc(100% - var(--lt) * 62%), #ffffff) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb, rgba(120,53,15,0) calc(100% - var(--lt) * 62%), #ffffff) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html:root[data-look] .from-amber-900\/70{--tw-gradient-from:color-mix(in srgb, rgba(120,53,15,.7) calc(100% - var(--lt) * 62%), #ffffff) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb, rgba(120,53,15,0) calc(100% - var(--lt) * 62%), #ffffff) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html:root[data-look] .from-black\/80{--tw-gradient-from:color-mix(in srgb, #000 calc(80% + var(--pl) * 5%), transparent) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}:where(html:root[data-look]) :where(.from-black\/80){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.from-cyan-500){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .from-indigo-400{--tw-gradient-from:color-mix(in srgb, var(--accent) 65%, #fff) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb, var(--accent) 65%, #fff) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}:where(html:root[data-look]) :where(.from-indigo-400){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .from-indigo-500{--tw-gradient-from:color-mix(in srgb, var(--accent) 82%, #fff) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb, var(--accent) 82%, #fff) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}:where(html:root[data-look]) :where(.from-indigo-500){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .via-slate-800{--tw-gradient-to:var(--s1) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--s1) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html:root[data-look] .via-slate-900{--tw-gradient-to:var(--s0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--s0) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html:root[data-look] .to-black\/80{--tw-gradient-to:color-mix(in srgb, #000 calc(80% + var(--pl) * 5%), transparent) var(--tw-gradient-to-position)}
html:root[data-look] .to-indigo-500{--tw-gradient-to:color-mix(in srgb, var(--accent) 82%, #fff) var(--tw-gradient-to-position)}
html:root[data-look] .to-slate-800{--tw-gradient-to:var(--s1) var(--tw-gradient-to-position)}
html:root[data-look] .to-slate-900{--tw-gradient-to:var(--s0) var(--tw-gradient-to-position)}
html:root[data-look] .fill-amber-500{fill:color-mix(in srgb, #f59e0b calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .fill-emerald-500{fill:color-mix(in srgb, #10b981 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .fill-indigo-500{fill:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .fill-red-500{fill:color-mix(in srgb, #ef4444 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .fill-slate-400{fill:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .stroke-slate-600{stroke:color-mix(in srgb, var(--t1) 50%, transparent)}
html:root[data-look] .text-amber-100{color:color-mix(in srgb, rgb(254 243 199/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-amber-200{color:color-mix(in srgb, rgb(253 230 138/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-amber-300{color:color-mix(in srgb, rgb(252 211 77/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-amber-300\/70{color:color-mix(in srgb, rgba(252,211,77,.7) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-amber-400{color:color-mix(in srgb, rgb(251 191 36/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-blue-300{color:color-mix(in srgb, rgb(147 197 253/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-blue-400{color:color-mix(in srgb, rgb(96 165 250/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-cyan-300{color:color-mix(in srgb, rgb(103 232 249/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-emerald-100{color:color-mix(in srgb, rgb(209 250 229/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-emerald-200{color:color-mix(in srgb, rgb(167 243 208/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-emerald-300{color:color-mix(in srgb, rgb(110 231 183/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-emerald-400{color:color-mix(in srgb, rgb(52 211 153/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-emerald-500{color:color-mix(in srgb, rgb(16 185 129/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-fuchsia-200{color:color-mix(in srgb, rgb(245 208 254/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-fuchsia-300{color:color-mix(in srgb, rgb(240 171 252/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-fuchsia-400{color:color-mix(in srgb, rgb(232 121 249/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-green-200{color:color-mix(in srgb, rgb(187 247 208/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-green-400{color:color-mix(in srgb, rgb(74 222 128/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-indigo-100{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .text-indigo-200{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .text-indigo-200\/70{color:color-mix(in srgb, color-mix(in srgb, var(--accent) 45%, var(--t1)) 70%, transparent)}
html:root[data-look] .text-indigo-200\/80{color:color-mix(in srgb, color-mix(in srgb, var(--accent) 45%, var(--t1)) 80%, transparent)}
html:root[data-look] .text-indigo-300{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .text-indigo-400{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .text-indigo-500{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .text-orange-200{color:color-mix(in srgb, rgb(254 215 170/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-orange-300{color:color-mix(in srgb, rgb(253 186 116/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-orange-400{color:color-mix(in srgb, rgb(251 146 60/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-orange-500{color:color-mix(in srgb, rgb(249 115 22/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-pink-300{color:color-mix(in srgb, rgb(249 168 212/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-pink-400{color:color-mix(in srgb, rgb(244 114 182/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-purple-300{color:color-mix(in srgb, rgb(216 180 254/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-purple-400{color:color-mix(in srgb, rgb(192 132 252/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-purple-500{color:color-mix(in srgb, rgb(168 85 247/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-red-100{color:color-mix(in srgb, rgb(254 226 226/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-red-200{color:color-mix(in srgb, rgb(254 202 202/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-red-300{color:color-mix(in srgb, rgb(252 165 165/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-red-400{color:color-mix(in srgb, rgb(248 113 113/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-red-500{color:color-mix(in srgb, rgb(239 68 68/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-red-500\/50{color:color-mix(in srgb, rgba(239,68,68,.5) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-red-500\/80{color:color-mix(in srgb, rgba(239,68,68,.8) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-rose-300{color:color-mix(in srgb, rgb(253 164 175/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-rose-400{color:color-mix(in srgb, rgb(251 113 133/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-sky-100{color:color-mix(in srgb, rgb(224 242 254/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-sky-200{color:color-mix(in srgb, rgb(186 230 253/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-sky-300{color:color-mix(in srgb, rgb(125 211 252/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-sky-400{color:color-mix(in srgb, rgb(56 189 248/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-slate-100{color:var(--t1)}
html:root[data-look] .text-slate-200{color:var(--t1)}
html:root[data-look] .text-slate-300{color:color-mix(in srgb, var(--t1) 92%, transparent)}
html:root[data-look] .text-slate-400{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .text-slate-500{color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .text-slate-600{color:color-mix(in srgb, var(--t1) 50%, transparent)}
html:root[data-look] .text-stone-100{color:var(--t1)}
html:root[data-look] .text-stone-200{color:var(--t1)}
html:root[data-look] .text-stone-300{color:color-mix(in srgb, var(--t1) 92%, transparent)}
html:root[data-look] .text-stone-400{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .text-stone-500{color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .text-teal-300{color:color-mix(in srgb, rgb(94 234 212/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-teal-400{color:color-mix(in srgb, rgb(45 212 191/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-violet-300{color:color-mix(in srgb, rgb(196 181 253/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-violet-400{color:color-mix(in srgb, rgb(167 139 250/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-white{color:var(--t1)}
html:root[data-look] .text-yellow-200{color:color-mix(in srgb, rgb(254 240 138/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-yellow-300{color:color-mix(in srgb, rgb(253 224 71/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .text-yellow-400{color:color-mix(in srgb, rgb(250 204 21/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .text-yellow-500{color:color-mix(in srgb, rgb(234 179 8/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .text-zinc-400{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .decoration-slate-500{text-decoration-color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .decoration-slate-600{text-decoration-color:color-mix(in srgb, var(--t1) 50%, transparent)}
html:root[data-look] .placeholder-slate-400::-moz-placeholder{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .placeholder-slate-400::placeholder{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .placeholder-slate-500::-moz-placeholder{color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .placeholder-slate-500::placeholder{color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .placeholder-slate-600::-moz-placeholder{color:color-mix(in srgb, var(--t1) 50%, transparent)}
html:root[data-look] .placeholder-slate-600::placeholder{color:color-mix(in srgb, var(--t1) 50%, transparent)}
html:root[data-look] .accent-blue-300{accent-color:color-mix(in srgb, #93c5fd calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .accent-blue-400{accent-color:color-mix(in srgb, #60a5fa calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .accent-emerald-400{accent-color:color-mix(in srgb, #34d399 calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .accent-emerald-500{accent-color:color-mix(in srgb, #10b981 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-indigo-500{accent-color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .accent-orange-300{accent-color:color-mix(in srgb, #fdba74 calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .accent-orange-500{accent-color:color-mix(in srgb, #f97316 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-pink-400{accent-color:color-mix(in srgb, #f472b6 calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .accent-pink-500{accent-color:color-mix(in srgb, #ec4899 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-purple-500{accent-color:color-mix(in srgb, #a855f7 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-red-400{accent-color:color-mix(in srgb, #f87171 calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .accent-red-500{accent-color:color-mix(in srgb, #ef4444 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-slate-400{accent-color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .accent-slate-500{accent-color:color-mix(in srgb, var(--t1) 64%, transparent)}
html:root[data-look] .accent-stone-400{accent-color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .accent-violet-500{accent-color:color-mix(in srgb, #8b5cf6 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .accent-yellow-200{accent-color:color-mix(in srgb, #fef08a calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .accent-yellow-400{accent-color:color-mix(in srgb, #facc15 calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .accent-yellow-500{accent-color:color-mix(in srgb, #eab308 calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .shadow-indigo-500\/50{--tw-shadow-color:color-mix(in srgb, var(--accent) 50%, transparent);--tw-shadow:var(--tw-shadow-colored)}
html:root[data-look] .ring-indigo-300{--tw-ring-color:var(--accent)}
html:root[data-look] .ring-indigo-400{--tw-ring-color:var(--accent)}
html:root[data-look] .ring-indigo-500\/60{--tw-ring-color:color-mix(in srgb, var(--accent) 60%, transparent)}
html:root[data-look] .ring-slate-900{--tw-ring-color:color-mix(in srgb, var(--edge) 55%, transparent)}
html:root[data-look] .ring-white\/70{--tw-ring-color:hsla(0,0%,100%,.7)}
html:root[data-look] .hover\:border-indigo-300:hover{border-color:var(--accent)}
html:root[data-look] .hover\:border-indigo-400:hover{border-color:var(--accent)}
html:root[data-look] .hover\:border-indigo-500:hover{border-color:var(--accent)}
html:root[data-look] .hover\:border-indigo-500\/50:hover{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
html:root[data-look] .hover\:border-slate-400:hover{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .hover\:border-slate-500:hover{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .hover\:border-slate-600:hover{border-color:var(--edge)}
:where(html:root[data-look]) :where(.hover\:bg-amber-500:hover){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-amber-600:hover){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-amber-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-amber-800\/40:hover{background-color:color-mix(in srgb, rgba(146,64,14,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-amber-900\/20:hover{background-color:color-mix(in srgb, rgba(120,53,15,.2) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-amber-900\/50:hover{background-color:color-mix(in srgb, rgba(120,53,15,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-amber-950\/25:hover{background-color:color-mix(in srgb, rgba(69,26,3,.25) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-black\/80:hover{background-color:color-mix(in srgb, #000 calc(80% + var(--pl) * 5%), transparent)}:where(html:root[data-look]) :where(.hover\:bg-black\/80:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-blue-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-blue-950\/20:hover{background-color:color-mix(in srgb, rgba(23,37,84,.2) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-emerald-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-emerald-600:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-emerald-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-emerald-800:hover{background-color:color-mix(in srgb, rgb(6 95 70/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-emerald-900\/30:hover{background-color:color-mix(in srgb, rgba(6,78,59,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-emerald-900\/40:hover{background-color:color-mix(in srgb, rgba(6,78,59,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-emerald-950\/20:hover{background-color:color-mix(in srgb, rgba(2,44,34,.2) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-fuchsia-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-green-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-green-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-500:hover{background-color:color-mix(in srgb, var(--accent) 82%, #fff)}:where(html:root[data-look]) :where(.hover\:bg-indigo-500:hover){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-600:hover{background-color:var(--accent)}:where(html:root[data-look]) :where(.hover\:bg-indigo-600:hover){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-700:hover{background-color:color-mix(in srgb, var(--accent) 85%, #000)}:where(html:root[data-look]) :where(.hover\:bg-indigo-700:hover){--t1:var(--onaccent);--hd:var(--onaccent);--lt:var(--al);color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-800:hover{background-color:color-mix(in srgb, var(--accent) 32%, var(--s1))}:where(html:root[data-look]) :where(.hover\:bg-indigo-800:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-900:hover{background-color:color-mix(in srgb, var(--accent) 22%, var(--s1))}:where(html:root[data-look]) :where(.hover\:bg-indigo-900:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-indigo-900\/40:hover{background-color:color-mix(in srgb, var(--accent) 9%, transparent)}
:where(html:root[data-look]) :where(.hover\:bg-orange-500:hover){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
html:root[data-look] .hover\:bg-orange-800:hover{background-color:color-mix(in srgb, rgb(154 52 18/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-pink-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-purple-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-purple-600:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-purple-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-purple-950\/20:hover{background-color:color-mix(in srgb, rgba(59,7,100,.2) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-red-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-red-600:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-red-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-red-800:hover{background-color:color-mix(in srgb, rgb(153 27 27/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-red-900:hover{background-color:color-mix(in srgb, rgb(127 29 29/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-red-900\/30:hover{background-color:color-mix(in srgb, rgba(127,29,29,.3) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-red-900\/40:hover{background-color:color-mix(in srgb, rgba(127,29,29,.4) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-red-900\/50:hover{background-color:color-mix(in srgb, rgba(127,29,29,.5) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-rose-950\/25:hover{background-color:color-mix(in srgb, rgba(76,5,25,.25) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-sky-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-sky-600:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-sky-800:hover{background-color:color-mix(in srgb, rgb(7 89 133/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
html:root[data-look] .hover\:bg-slate-500:hover{background-color:var(--s4)}:where(html:root[data-look]) :where(.hover\:bg-slate-500:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-slate-600:hover{background-color:var(--s3)}:where(html:root[data-look]) :where(.hover\:bg-slate-600:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-slate-600\/50:hover{background-color:color-mix(in srgb, var(--t1) 23%, transparent)}
html:root[data-look] .hover\:bg-slate-600\/80:hover{background-color:color-mix(in srgb, var(--t1) 36%, transparent)}
html:root[data-look] .hover\:bg-slate-700:hover{background-color:var(--s2)}:where(html:root[data-look]) :where(.hover\:bg-slate-700:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-slate-700\/40:hover{background-color:color-mix(in srgb, var(--t1) 14%, transparent)}
html:root[data-look] .hover\:bg-slate-700\/50:hover{background-color:color-mix(in srgb, var(--t1) 18%, transparent)}
html:root[data-look] .hover\:bg-slate-800:hover{background-color:var(--s1)}:where(html:root[data-look]) :where(.hover\:bg-slate-800:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-slate-800\/60:hover{background-color:color-mix(in srgb, var(--t1) 15%, transparent)}
html:root[data-look] .hover\:bg-slate-900\/70:hover{background-color:color-mix(in srgb, color-mix(in srgb, var(--s0) calc(100% - var(--lt) * 100%), color-mix(in srgb, var(--panelc), var(--pink) 10%)) calc(70 * (1 - var(--lt) * .25) * 1%), transparent)}
html:root[data-look] .hover\:bg-stone-800:hover{background-color:var(--s1)}:where(html:root[data-look]) :where(.hover\:bg-stone-800:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:bg-stone-800\/70:hover{background-color:color-mix(in srgb, var(--t1) 18%, transparent)}
:where(html:root[data-look]) :where(.hover\:bg-teal-500:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-teal-800:hover{background-color:color-mix(in srgb, rgb(17 94 89/var(--tw-bg-opacity,1)) calc(100% - var(--lt) * 62%), #ffffff)}
:where(html:root[data-look]) :where(.hover\:bg-yellow-500:hover){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-yellow-600:hover){--t1:color-mix(in srgb,#fff calc(100% - var(--lt) * 100%),#1c1410);--hd:var(--t1);color:var(--t1)}
:where(html:root[data-look]) :where(.hover\:bg-yellow-700:hover){--t1:#fff;--hd:#fff;--lt:0;color:var(--t1)}
html:root[data-look] .hover\:bg-zinc-500:hover{background-color:var(--s4)}:where(html:root[data-look]) :where(.hover\:bg-zinc-500:hover){--t1:var(--pink);--hd:var(--pink);--lt:var(--pl);color:var(--t1)}
html:root[data-look] .hover\:text-amber-200:hover{color:color-mix(in srgb, rgb(253 230 138/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-amber-300:hover{color:color-mix(in srgb, rgb(252 211 77/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-amber-400:hover{color:color-mix(in srgb, rgb(251 191 36/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .hover\:text-emerald-200:hover{color:color-mix(in srgb, rgb(167 243 208/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-emerald-300:hover{color:color-mix(in srgb, rgb(110 231 183/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-emerald-400:hover{color:color-mix(in srgb, rgb(52 211 153/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .hover\:text-indigo-200:hover{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .hover\:text-indigo-300:hover{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .hover\:text-indigo-400:hover{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
html:root[data-look] .hover\:text-purple-300:hover{color:color-mix(in srgb, rgb(216 180 254/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-red-200:hover{color:color-mix(in srgb, rgb(254 202 202/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-red-300:hover{color:color-mix(in srgb, rgb(252 165 165/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-red-400:hover{color:color-mix(in srgb, rgb(248 113 113/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .hover\:text-red-500:hover{color:color-mix(in srgb, rgb(239 68 68/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 72%), #1c1410)}
html:root[data-look] .hover\:text-sky-300:hover{color:color-mix(in srgb, rgb(125 211 252/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-slate-200:hover{color:var(--t1)}
html:root[data-look] .hover\:text-slate-300:hover{color:color-mix(in srgb, var(--t1) 92%, transparent)}
html:root[data-look] .hover\:text-slate-400:hover{color:color-mix(in srgb, var(--t1) 78%, transparent)}
html:root[data-look] .hover\:text-teal-200:hover{color:color-mix(in srgb, rgb(153 246 228/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-white:hover{color:var(--t1)}
html:root[data-look] .hover\:text-yellow-300:hover{color:color-mix(in srgb, rgb(253 224 71/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .hover\:text-yellow-400:hover{color:color-mix(in srgb, rgb(250 204 21/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 78%), #1c1410)}
html:root[data-look] .hover\:shadow-indigo-500\/50:hover{--tw-shadow-color:color-mix(in srgb, var(--accent) 50%, transparent);--tw-shadow:var(--tw-shadow-colored)}
html:root[data-look] .focus\:border-indigo-500:focus{border-color:var(--accent)}
html:root[data-look] .focus\:border-slate-500:focus{border-color:color-mix(in srgb, var(--edge), var(--pink) 30%)}
html:root[data-look] .focus\:ring-indigo-500:focus{--tw-ring-color:var(--accent)}
html:root[data-look] .group:hover .group-hover\:text-emerald-300{color:color-mix(in srgb, rgb(110 231 183/var(--tw-text-opacity,1)) calc(100% - var(--lt) * 85%), #1c1410)}
html:root[data-look] .group:hover .group-hover\:text-indigo-300{color:color-mix(in srgb, var(--accent) 45%, var(--t1))}
@media (min-width:768px){html:root[data-look] .md\:rounded-lg{border-radius:max(0px,calc(var(--r)*1))}
}
}