@layer theme,base;@layer components{.trait-carousel{--carousel-item-w:clamp(6.75rem, 30cqi, 13rem);overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;gap:.75rem;padding-block:1.375rem 1.25rem;padding-inline:.375rem;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 2.25rem calc(100% - 2.25rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 2.25rem calc(100% - 2.25rem),#0000 100%);-webkit-mask-image:linear-gradient(90deg,#0000 0,lab(0% 0 0) 2.25rem calc(100% - 2.25rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,lab(0% 0 0) 2.25rem calc(100% - 2.25rem),#0000 100%)}.trait-carousel.is-compact{gap:.75rem;padding-block:.5rem}.trait-carousel.is-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.25rem),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 2.25rem),#0000 100%);-webkit-mask-image:linear-gradient(90deg,lab(0% 0 0) calc(100% - 2.25rem),#0000 100%);mask-image:linear-gradient(90deg,lab(0% 0 0) calc(100% - 2.25rem),#0000 100%)}.trait-carousel.is-end{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 2.25rem);mask-image:linear-gradient(90deg,#0000 0,#000 2.25rem);-webkit-mask-image:linear-gradient(90deg,#0000 0,lab(0% 0 0) 2.25rem);mask-image:linear-gradient(90deg,#0000 0,lab(0% 0 0) 2.25rem)}.trait-carousel.is-start.is-end{-webkit-mask-image:none;mask-image:none}.trait-carousel::-webkit-scrollbar{display:none}.trait-carousel.is-dragging{cursor:grabbing}.trait-carousel.is-bots{--carousel-item-w:clamp(6.5rem, 27cqi, 12rem)}.trait-carousel .enum-item{overflow:visible}@media (max-width:639px){.trait-carousel.is-bleed{margin-inline:-1.5rem;padding-inline:1.5rem}.trait-carousel{padding-block:.875rem .75rem}.trait-carousel.is-compact{padding-block:.5rem}}@media (min-width:1024px){.trait-carousel.is-bleed{margin-inline:-2rem;padding-inline:2rem}}.trait-carousel-item{width:var(--carousel-item-w);flex:none;position:relative}.carousel-arrow{z-index:10;width:2.25rem;height:2.25rem;color:var(--color-white);cursor:pointer;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease;background:#14151fd9;background:lab(7.05658% 1.67041 -7.16021/.85);border:1px solid #ffffff26;border:1px solid lab(100% 0 0/.15);border-radius:9999px;justify-content:center;align-items:center;display:none;position:absolute;top:50%;transform:translateY(-50%)}.carousel-arrow:hover{border-color:oklch(from var(--color-brand-primary-400) l c h / .6);background:#262738f2;background:lab(16.2013% 2.73459 -10.8233/.95)}.carousel-arrow.is-left{left:-.625rem}.carousel-arrow.is-right{right:-.625rem}@media (hover:hover) and (pointer:fine){.carousel-arrow{display:flex}}}@layer utilities;
@layer theme,base;@layer components{.enum-row{--carousel-item-w:clamp(4.5rem, 24cqi, 6rem);--carousel-item-h:calc(var(--carousel-item-w) * 4 / 3);container:enum-row/inline-size}.enum-row.is-compact-cards{--carousel-item-w:clamp(3.25rem, 17cqi, 4rem);--carousel-item-h:var(--carousel-item-w)}.enum-row.is-avatars{--carousel-item-w:clamp(5.5rem, 32cqi, 8rem)}.enum-row .trait-carousel{--carousel-item-w:inherit}.enum-expand-btn,.avatar-add-btn{width:var(--carousel-item-w);height:var(--carousel-item-h);margin-top:.5rem;padding:.5rem}.enum-expand-btn-label{font-size:var(--text-xs);text-align:center;font-weight:500;line-height:1.2}@container enum-row (max-width:26rem){.enum-expand-btn,.avatar-add-btn{width:2.25rem;height:var(--carousel-item-h);align-self:flex-start;margin-top:.5rem;padding:.5rem .125rem}.enum-expand-btn-label{writing-mode:vertical-rl;letter-spacing:.02em;rotate:180deg}}.enum-item,.avatar-item{border:2px solid oklch(from var(--color-gray-600) l c h / .5);cursor:pointer;background-image:linear-gradient(to bottom right, oklch(from var(--color-gray-700) l c h / .2), oklch(from var(--color-gray-800) l c h / .2));transition:border-color var(--duration-slow) ease, ring var(--duration-slow) ease, box-shadow var(--duration-slow) ease, transform var(--duration-slow) ease, background-image var(--duration-slow) ease;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a;box-shadow:0 4px 6px -1px lab(0% 0 0/.1)}:is(.enum-item,.avatar-item):hover{border-color:oklch(from var(--color-brand-primary-400) l c h / .6);box-shadow:var(--shadow-md), 0 8px 10px -6px #0000001a;transform:scale(1.05)}@supports (color:lab(0% 0 0)){:is(.enum-item,.avatar-item):hover{box-shadow:var(--shadow-md), 0 8px 10px -6px lab(0% 0 0/.1)}}:is(.enum-item,.avatar-item).is-selected{border-color:oklch(from var(--color-brand-primary) l c h / .8);box-shadow:0 0 0 2px oklch(from var(--color-brand-primary) l c h / .3), 0 4px 6px -1px oklch(from var(--color-brand-primary) l c h / .3);background-image:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .1), oklch(from var(--color-brand-secondary) l c h / .1));transform:scale(1.05)}:is(.enum-item,.avatar-item).is-selected:after{content:"";background:oklch(from var(--color-brand-primary) l c h / .2);pointer-events:none;z-index:1;border-radius:.375rem;position:absolute;inset:0}.enum-item-skeleton{background-image:var(--gradient-skeleton);-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));border-radius:.5rem;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.enum-item-skeleton-inner{background-image:linear-gradient(to bottom right, oklch(from var(--color-gray-600) l c h / .5), oklch(from var(--color-gray-700) l c h / .5));border-radius:.25rem}.enum-delete-btn{border:2px solid var(--color-gray-800);background-image:linear-gradient(to right, var(--color-danger-500), var(--color-danger-600));box-shadow:var(--shadow-sm);transition:background-image var(--duration-base) ease, transform var(--duration-base) ease;border-radius:9999px}.enum-delete-btn:hover{background-image:linear-gradient(to right, var(--color-danger-600), var(--color-danger-700));transform:scale(1.1)}.enum-label-reveal,.avatar-label,.avatar-dialog-item-label{color:var(--color-white);background-image:linear-gradient(#0000,#000000d9 80%);background-image:linear-gradient(#0000,lab(0% 0 0/.85) 80%);border-radius:0 0 .5rem .5rem}.enum-custom-text{border:2px dashed oklch(from var(--color-brand-primary) l c h / .6);cursor:pointer;background-image:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .2), oklch(from var(--color-brand-secondary) l c h / .2));-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));transition:border-color var(--duration-slow) ease, background-image var(--duration-slow) ease, ring var(--duration-slow) ease, box-shadow var(--duration-slow) ease, transform var(--duration-slow) ease;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a;box-shadow:0 4px 6px -1px lab(0% 0 0/.1)}.enum-custom-text:hover{border-color:oklch(from var(--color-brand-primary-400) l c h / .8);background-image:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .3), oklch(from var(--color-brand-secondary) l c h / .3));box-shadow:var(--shadow-md), 0 8px 10px -6px #0000001a;transform:scale(1.05)}@supports (color:lab(0% 0 0)){.enum-custom-text:hover{box-shadow:var(--shadow-md), 0 8px 10px -6px lab(0% 0 0/.1)}}.enum-custom-text.is-selected{border-color:oklch(from var(--color-brand-primary) l c h / .8);background-image:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .3), oklch(from var(--color-brand-secondary) l c h / .3));-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));box-shadow:0 0 0 2px oklch(from var(--color-brand-primary) l c h / .3), 0 4px 6px -1px oklch(from var(--color-brand-primary) l c h / .3);transform:scale(1.05)}.enum-custom-text-overlay{color:var(--color-white);opacity:0;transition:opacity var(--duration-base) ease;background-image:linear-gradient(#0000,#000c);background-image:linear-gradient(#0000,lab(0% 0 0/.8));border-radius:0 0 .5rem .5rem}.enum-custom-text-overlay:hover{opacity:1}.enum-nsfw-overlay{-webkit-backdrop-filter:blur(var(--blur-lg));backdrop-filter:blur(var(--blur-lg));background:#0006;background:lab(0% 0 0/.4);border-radius:.5rem}.enum-nsfw-badge{color:var(--color-white);-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));box-shadow:var(--shadow-sm);background:#000000b3;background:lab(0% 0 0/.7);border-radius:.25rem;font-size:.75rem;font-weight:600}.enum-color-picker{border:2px solid var(--color-gray-800);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--duration-base) ease;border-radius:9999px}.enum-color-picker:hover{transform:scale(1.1)}.enum-expand-btn,.avatar-add-btn{border:2px dashed oklch(from var(--color-gray-600) l c h / .5);-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));color:var(--color-gray-400);transition:border-color var(--duration-slow) ease, background-image var(--duration-slow) ease, transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease, color var(--duration-slow) ease;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a;box-shadow:0 4px 6px -1px lab(0% 0 0/.1)}:is(.enum-expand-btn,.avatar-add-btn):hover{border-color:oklch(from var(--color-brand-primary-400) l c h / .6);background-image:linear-gradient(to bottom right, oklch(from var(--color-gray-700) l c h / .3), oklch(from var(--color-gray-800) l c h / .3));box-shadow:var(--shadow-sm), 0 4px 6px -4px #0000001a;color:var(--color-brand-primary-300);transform:scale(1.05)}@supports (color:lab(0% 0 0)){:is(.enum-expand-btn,.avatar-add-btn):hover{box-shadow:var(--shadow-sm), 0 4px 6px -4px lab(0% 0 0/.1)}}.enum-selection-badge{background-image:linear-gradient(to right, oklch(from var(--color-brand-primary) l c h / .1), oklch(from var(--color-brand-secondary) l c h / .1));border:1px solid oklch(from var(--color-brand-primary) l c h / .3);border-radius:.375rem}.enum-mode-toggle{transition:background-color var(--duration-base) ease, border-color var(--duration-base) ease, color var(--duration-base) ease;border-radius:.375rem}.enum-mode-toggle.is-visual{background-color:var(--color-gray-700);color:var(--color-gray-300);border:1px solid var(--color-gray-600)}.enum-mode-toggle.is-visual:hover{background-color:var(--color-gray-600);border-color:var(--color-gray-500)}.enum-mode-toggle.is-text{background-color:var(--color-brand-primary-600);color:var(--color-white);border:1px solid var(--color-brand-primary-600)}.enum-mode-toggle.is-text:hover{background-color:var(--color-brand-primary-700)}.enum-text-input{background:oklch(from var(--color-gray-700) l c h / .5);-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));color:var(--color-white);border:1px solid oklch(from var(--color-gray-600) l c h / .5);box-shadow:var(--shadow-sm);transition:border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;border-radius:.5rem}.enum-text-input:focus{border-color:oklch(from var(--color-brand-primary) l c h / .6);box-shadow:0 0 0 2px oklch(from var(--color-brand-primary) l c h / .3), var(--shadow-sm);outline:none}.enum-text-input.is-error{border-width:2px;border-color:oklch(from var(--color-danger-500) l c h / .8)}.enum-text-input.is-error:focus{border-color:var(--color-danger-500);box-shadow:0 0 0 2px oklch(from var(--color-danger-500) l c h / .3), var(--shadow-sm)}.enum-text-confirm{background-image:var(--gradient-brand-lr);color:var(--color-white);border:1px solid oklch(from var(--color-brand-primary-400) l c h / .3);box-shadow:var(--shadow-sm);transition:background-image var(--duration-base) ease, transform var(--duration-base) ease, box-shadow var(--duration-base) ease;border-radius:.5rem}.enum-text-confirm:hover{background-image:var(--gradient-brand-hover-lr);box-shadow:var(--shadow-md), 0 8px 10px -6px #0000001a;transform:scale(1.05)}@supports (color:lab(0% 0 0)){.enum-text-confirm:hover{box-shadow:var(--shadow-md), 0 8px 10px -6px lab(0% 0 0/.1)}}.enum-text-confirm:disabled{opacity:.5;cursor:not-allowed}.enum-text-confirm:disabled:hover{background-image:var(--gradient-brand-lr);transform:none}.enum-validation-error{background:oklch(from var(--color-danger-900) l c h / .3);border:1px solid var(--color-danger-500);border-radius:.375rem}.enum-item.is-unavailable{cursor:not-allowed;opacity:.35;filter:grayscale()}.enum-item.is-unavailable:hover{border-color:oklch(from var(--color-gray-600) l c h / .5);transform:none;box-shadow:0 4px 6px -1px #0000001a;box-shadow:0 4px 6px -1px lab(0% 0 0/.1)}}@layer utilities;