@layer theme,base,components,animations,utilities;@layer base{*,*::before,*::after {box-sizing: border-box; -webkit-tap-highlight-color: transparent;} * {margin: 0;} html {tab-size: 4;} body,dialog,[popover] {font-family: var(--font-sans); font-size: var(--text-regular); line-height: var(--leading-normal); color: var(--foreground);} body {background-color: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased;} main {padding-block-start: var(--space-8);} img,picture,video,canvas,svg {max-width: 100%;} p,h1,h2,h3,h4,h5,h6 {overflow-wrap: break-word;} h1,h2,h3,h4,h5,h6 {font-weight: var(--font-semibold); line-height: 1.25; &:first-child {margin-block-start: 0;}} h1 {font-size: var(--text-1); margin: var(--space-10) 0 var(--space-6);} h2 {font-size: var(--text-2); margin: var(--space-8) 0 var(--space-5);} h3 {font-size: var(--text-3); margin: var(--space-6) 0 var(--space-4);} h4 {font-size: var(--text-4); margin: var(--space-5) 0 var(--space-3);} h5 {font-size: var(--text-5); margin: var(--space-4) 0 var(--space-2);} h6 {font-size: var(--text-regular); margin: var(--space-4) 0 var(--space-2);} p {margin-block-end: var(--space-4); &:last-child {margin-block-end: 0;}} a {color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); &:hover {color: rgb(from var(--primary) r g b / .8);}} strong,b {font-weight: var(--font-semibold);} em,i {font-style: italic;} small {font-size: var(--text-7);} code {font-family: var(--font-mono); font-size: .875em; padding: calc(var(--space-1) / 2) var(--space-1); background-color: var(--faint); border-radius: var(--radius-small);} pre {font-family: var(--font-mono); padding: var(--space-4); background-color: var(--faint); border-radius: var(--radius-medium); overflow-x: auto; margin-block-end: var(--space-4); code {padding: 0; background: none; border-radius: 0;}} blockquote {border-inline-start: 4px solid var(--border); padding-inline-start: var(--space-4); margin: var(--space-4) 0; color: var(--muted-foreground); font-style: italic;} hr {border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0;} ul,ol {padding-inline-start: var(--space-6); margin-block-end: var(--space-4);} ul {list-style-type: disc;} ol {list-style-type: decimal;} li {margin-block-end: var(--space-1);} mark {background-color: rgb(from var(--warning) r g b / .3); padding: calc(var(--space-1) / 2) var(--space-1); border-radius: var(--radius-small);} [hidden] {display: none;} :focus-visible {outline: 2px solid var(--ring); outline-offset: 2px;} :disabled {opacity: .5; cursor: not-allowed;}}@layer theme{:root {color-scheme: light dark; --background: light-dark(#fff,#09090b); --foreground: light-dark(#09090b,#fafafa); --card: light-dark(#fff,#18181b); --card-foreground: light-dark(#09090b,#fafafa); --primary: light-dark(#574747,#fafafa); --primary-foreground: light-dark(#fafafa,#18181b); --secondary: light-dark(#f4f4f5,#27272a); --secondary-foreground: light-dark(#574747,#fafafa); --muted: light-dark(#f4f4f5,#27272a); --muted-foreground: light-dark(#71717a,#a1a1aa); --faint: light-dark(#fafafa,#1e1e21); --faint-foreground: light-dark(#a1a1aa,#71717a); --accent: light-dark(#f4f4f5,#27272a); --danger: light-dark(#d32f2f,#f4807b); --danger-foreground: light-dark(#fafafa,#18181b); --success: light-dark(#008032,#6cc070); --success-foreground: light-dark(#fafafa,#18181b); --warning: light-dark(#a65b00,#f0a030); --warning-foreground: #09090b; --border: light-dark(#d4d4d8,#52525b); --input: light-dark(#d4d4d8,#52525b); --ring: light-dark(#574747,#d4d4d8); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-18: 4.5rem; --radius-small: .125rem; --radius-medium: .375rem; --radius-large: .75rem; --radius-full: 9999px; --bar-height: .5rem; --font-sans: system-ui,sans-serif; --font-mono: ui-monospace,Consolas,monospace; --text-1: clamp(1.75rem,1.5rem + 1.1vw,2.25rem); --text-2: clamp(1.5rem,1.3rem + .8vw,1.875rem); --text-3: clamp(1.25rem,1.1rem + .5vw,1.5rem); --text-4: clamp(1.125rem,1.05rem + .3vw,1.25rem); --text-5: 1.125rem; --text-6: 1rem; --text-7: .875rem; --text-8: .75rem; --text-regular: var(--text-6); --leading-normal: 1.5; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 600; --shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1); --shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1); --transition-fast: .12s cubic-bezier(.4,0,.2,1); --transition: .2s cubic-bezier(.4,0,.2,1); --z-dropdown: 50; --z-modal: 200;}}@layer animations{@media (prefers-reduced-motion: reduce) {*,*::before,*::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;}} .animate-pop-in {opacity: 1; transform: perspective(1000px) rotateX(0deg) translateZ(0); transition: opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),overlay .15s cubic-bezier(.4,0,.2,1) allow-discrete,display .15s cubic-bezier(.4,0,.2,1) allow-discrete; @starting-style {opacity: 0; transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);} &[data-state="closing"] {opacity: 0; transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);} &[data-state="closing"]::backdrop {opacity: 0;}} dialog::backdrop {opacity: 1; transition: opacity .15s cubic-bezier(.4,0,.2,1); @starting-style {opacity: 0;}} .animate-slide-in {opacity: 1; transform: translateX(0); transition: opacity .15s cubic-bezier(.16,1,.3,1),transform .15s cubic-bezier(.16,1,.3,1); @starting-style {opacity: 0; transform: translateX(100%);} &[data-state="closing"] {opacity: 0; transform: translateX(100%);}}}@layer components{figure[data-variant="avatar"]:not([role="group"]) {display: inline-flex; align-items: center; justify-content: center; width: var(--sz, 2.5rem); height: var(--sz, 2.5rem); color: var(--primary); background-color: var(--muted); border-radius: var(--radius-full); font-weight: var(--font-medium); overflow: hidden; & > img {width: 100%; height: 100%; object-fit: cover;} &.small {--sz: 2rem;} &.large {--sz: 3.25rem;}} figure[data-variant="avatar"][role="group"] {display: inline-flex; align-items: center; margin: 0; & figure[data-variant="avatar"] {isolation: isolate; margin-inline-end: calc(var(--space-5) * -1); border: 2px solid var(--background); &:last-child {margin-inline-end: 0;}} &.small {--sz: 2rem; & figure[data-variant="avatar"] {margin-inline-end: calc(var(--space-4) * -.8); border-width: 1px;}} &.large {--sz: 3.25rem; & figure[data-variant="avatar"] {margin-inline-end: calc(var(--space-6) * -1);}}}}@layer base{:is(button,[type=submit],[type=reset],[type=button],a.button),::file-selector-button {--_hov: color-mix(in srgb,var(--primary),white 25%); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-7); font-weight: var(--font-medium); line-height: var(--leading-normal); white-space: nowrap; text-decoration: none; background-color: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-medium); border: 1px solid; border-color: rgb(from #fff r g b / .15) rgb(from #000 r g b / .2) rgb(from #000 r g b / .2) rgb(from #fff r g b / .15); transition: background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast); &:not(:disabled) {cursor: pointer;} &:hover:not(:disabled) {background-color: var(--_hov);} &:active:not(:disabled) {transform: translate(1px,1px);} &[data-variant="secondary"] {--_hov: color-mix(in srgb,var(--secondary),black 10%); background-color: var(--secondary); color: var(--secondary-foreground); border-color: rgb(from #fff r g b / .5) rgb(from #000 r g b / .1) rgb(from #000 r g b / .1) rgb(from #fff r g b / .5);} &[data-variant="danger"] {--_hov: color-mix(in srgb,var(--danger),black 15%); background-color: var(--danger); color: var(--danger-foreground);} &:is(.outline,.ghost) {--_hov: var(--accent); background-color: transparent; color: var(--foreground); &[data-variant="danger"] {--_hov: color-mix(in srgb,var(--danger),transparent 90%); color: var(--danger);} &[data-variant="secondary"] {--_hov: color-mix(in srgb,var(--secondary),transparent 80%); color: var(--secondary-foreground);}} &.outline {border-color: var(--border); &[data-variant="danger"] {border-color: var(--danger);} &[data-variant="secondary"] {border-color: var(--secondary);}} &.ghost {border-color: transparent;} &.small {padding: var(--space-1) var(--space-3); font-size: var(--text-8);} &.large {height: 3rem; padding: 0 var(--space-6); font-size: var(--text-regular);} &.icon {width: 2.5rem; padding: 0; &.small {width: 2rem;} &.large {width: 3rem;}}} ::file-selector-button {background-color: transparent; color: var(--foreground); border: 1px solid var(--border);} ::file-selector-button:hover {background-color: var(--accent);}}@layer components{menu.buttons {list-style-type: none; padding-inline-start: 0; display: inline-flex; & > li {&:first-child > * {border-start-start-radius: var(--radius-medium); border-end-start-radius: var(--radius-medium);} &:last-child > * {border-start-end-radius: var(--radius-medium); border-end-end-radius: var(--radius-medium);} & > * {border-radius: 0;} &:not(:last-child) > * {border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / .2);}}}}@layer base{label {display: block; font-size: var(--text-7); font-weight: var(--font-medium); &:has(input:where([type=checkbox],[type=radio])) {display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-normal);}} :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea,select) {width: 100%; margin-block-start: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--text-7); line-height: var(--leading-normal); background-color: var(--background); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius-medium); transition: border-color var(--transition-fast),box-shadow var(--transition-fast); &::placeholder {color: var(--muted-foreground);} &:focus {outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / .2); z-index: 1;} &:disabled {background-color: var(--muted);} &:is([aria-invalid=true],:user-invalid) {border-color: var(--danger); &:focus {box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / .2);}}} textarea {height: auto; min-height: 5rem; padding: var(--space-3); resize: vertical;} select {appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-2) center; padding-inline-end: var(--space-6);} input:where([type=checkbox],[type=radio]) {appearance: none; width: 1rem; height: 1rem; margin: 0; position: relative; background-color: var(--background); border: 1px solid var(--input); transition: background-color var(--transition-fast),border-color var(--transition-fast); &:checked {background-color: var(--primary); border-color: var(--primary); &::after {content: ""; position: absolute; inset: 0; background-color: var(--primary-foreground); mask-position: center; mask-repeat: no-repeat; mask-size: 100%;}}} input[type=checkbox] {border-radius: var(--radius-small); &:checked::after {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");} &[role=switch] {--switch-height: calc(var(--bar-height) * 3); --switch-inset: 2px; --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3); width: calc(var(--switch-height) * 2); height: var(--switch-height); border-radius: var(--radius-full); background-color: var(--input); &::before {content: ""; position: absolute; top: 50%; left: var(--switch-inset); transform: translateY(-50%); width: var(--switch-thumb); height: var(--switch-thumb); background-color: var(--background); border-radius: var(--radius-full); transition: transform var(--transition); box-shadow: var(--shadow-small);} &:checked {background-color: var(--primary); &::after {content: none;} &::before {transform: translateY(-50%) translateX(var(--switch-height));}}}} input[type=radio] {border-radius: var(--radius-full); &:checked::after {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");}} :where(input:where([type=checkbox],[type=radio],[type=range]),select):not(:disabled),label:has(input:where([type=checkbox],[type=radio]):not(:disabled)) {cursor: pointer;} input[type=range] {width: 100%; height: var(--bar-height); appearance: none; background: var(--muted); border-radius: var(--radius-full); &::-webkit-slider-thumb {appearance: none; width: 1.25rem; height: 1.25rem; background: var(--primary); border-radius: var(--radius-full); transition: transform var(--transition-fast); &:hover {transform: scale(1.1);}} &::-moz-range-thumb {width: 1.25rem; height: 1.25rem; background: var(--primary); border: none; border-radius: var(--radius-full);}} fieldset {border: 1px solid var(--border); border-radius: var(--radius-medium); padding: var(--space-4); margin-block-end: var(--space-4);} legend {font-size: var(--text-7); font-weight: var(--font-medium); padding: 0 var(--space-2);}}@layer components{fieldset.group {display: flex; align-items: stretch; border: none; padding: 0; margin: 0; & > :is(input,textarea,select) {flex: 1; margin-block-start: 0; &:not(:focus):not(:last-child) {border-inline-end-color: transparent;}} & > :is(input,textarea,select,button) {border-radius: 0; &:first-child {border-radius: var(--radius-medium) 0 0 var(--radius-medium);} &:last-child {border-radius: 0 var(--radius-medium) var(--radius-medium) 0;}} & > legend {float: inline-start; display: inline-flex; align-items: center; padding: 0 var(--space-3); line-height: var(--leading-normal); font-weight: var(--font-normal); color: var(--muted-foreground); background-color: var(--muted); border: 1px solid var(--input); border-inline-end: none; border-radius: var(--radius-medium) 0 0 var(--radius-medium);}} [data-field] {margin-block-end: var(--space-4); [data-hint],.error {font-size: var(--text-8); font-weight: var(--font-normal); color: var(--muted-foreground); margin-block-start: var(--space-1);} .error {display: none;} &[data-field="error"] .error {display: block; color: var(--danger);}}}@layer base{.table {min-width: 320px; width: 100%; overflow-x: auto;} table {border-collapse: collapse; width: 100%; font-size: var(--text-7);} thead {border-bottom: 1px solid var(--border);} th,td {overflow-wrap: break-word;} th {padding: var(--space-3) var(--space-2); text-align: start; font-weight: var(--font-medium); color: var(--muted-foreground);} td {padding: var(--space-3) var(--space-2);} tbody tr {border-bottom: 1px solid var(--border); transition: background-color var(--transition-fast); &:last-child {border-bottom: none;} &:hover {background-color: rgb(from var(--muted) r g b / .5);}}}@layer base{progress {appearance: none; width: 100%; height: var(--bar-height); border: none; border-radius: var(--radius-full); overflow: hidden; background-color: var(--muted); &::-webkit-progress-bar {background-color: var(--muted); border-radius: var(--radius-full);} &::-webkit-progress-value {background-color: var(--primary); border-radius: var(--radius-full); transition: width var(--transition);} &::-moz-progress-bar {background-color: var(--primary); border-radius: var(--radius-full);}} meter {appearance: none; width: 100%; height: var(--bar-height); border: none; border-radius: var(--radius-full); overflow: hidden; background: var(--muted); &::-webkit-meter-bar {background: var(--muted); border: none; border-radius: var(--radius-full); height: var(--bar-height);} &::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value {border-radius: var(--radius-full);} &::-webkit-meter-optimum-value {background: var(--success);} &::-webkit-meter-suboptimum-value {background: var(--warning);} &::-webkit-meter-even-less-good-value {background: var(--danger);} &::-moz-meter-bar {background: var(--success); border-radius: var(--radius-full);} &:-moz-meter-sub-optimum::-moz-meter-bar {background: var(--warning);} &:-moz-meter-sub-sub-optimum::-moz-meter-bar {background: var(--danger);}}}@layer components{[aria-busy="true"] {&::before {content: ""; display: inline-block; inset: 0; margin: auto; width: 1.5rem; height: 1.5rem; border: 2px solid var(--muted); border-top-color: var(--primary); border-radius: var(--radius-full); animation: spin 1s linear infinite; text-align: center;} &[data-spinner~="small"]::before {width: 1rem; height: 1rem;} &[data-spinner~="large"]::before {width: 2rem; height: 2rem; border-width: 3px;} &[data-spinner~="overlay"] {position: relative; > * {opacity: .3; pointer-events: none;} &::before {position: absolute; inset: 0; margin: auto; z-index: 1;}}} @keyframes spin {to {transform: rotate(360deg);}}}@layer components{:root {--grid-cols: 12; --grid-gap: 1.5rem; --container-max: 1280px; --container-pad: 1rem;} .container {width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad);} .row {display: grid; grid-template-columns: repeat(var(--grid-cols),1fr); gap: var(--grid-gap); width: 100%;} .col,[class*="col-"] {grid-column-end: span calc(var(--span, var(--grid-cols)) + var(--offset, 0));} .col-1 {--span: 1;} .col-2 {--span: 2;} .col-3 {--span: 3;} .col-4 {--span: 4;} .col-5 {--span: 5;} .col-6 {--span: 6;} .col-7 {--span: 7;} .col-8 {--span: 8;} .col-9 {--span: 9;} .col-10 {--span: 10;} .col-11 {--span: 11;} .col-12 {--span: 12;} .offset-1 {--offset: 1;} .offset-2 {--offset: 2;} .offset-3 {--offset: 3;} .offset-4 {--offset: 4;} .offset-5 {--offset: 5;} .offset-6 {--offset: 6;} [class*="offset-"] {margin-inline-start: calc(var(--offset) * (100% + var(--grid-gap)) / (var(--span) + var(--offset)));} .col-end {grid-column-start: span var(--span, 1); grid-column-end: -1;} @media (max-width: 768px) {.row {--grid-cols: 4; --grid-gap: 1rem;} .col,[class*="col-"] {--span: 4;} [class*="offset-"] {--offset: 0; margin-inline-start: 0;}}}@layer components{.card {background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-medium); box-shadow: var(--shadow-small); padding: var(--space-6);}}@layer components{[role="alert"] {position: relative; display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-medium); font-size: var(--text-7); &[data-variant] {border: none;} &[data-variant="error"],&[data-variant="danger"] {color: var(--danger); background-color: light-dark(color-mix(in srgb,var(--danger) 8%,transparent),color-mix(in srgb,var(--danger) 20%,transparent)); & a {color: var(--danger);}} &[data-variant="success"] {color: var(--success); background-color: light-dark(color-mix(in srgb,var(--success) 8%,transparent),color-mix(in srgb,var(--success) 20%,transparent)); & a {color: var(--success);}} &[data-variant="warning"] {color: var(--warning); background-color: light-dark(color-mix(in srgb,var(--warning) 8%,transparent),color-mix(in srgb,var(--warning) 20%,transparent)); & a {color: var(--warning);}}}}@layer components{.badge {display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-4); font-size: var(--text-8); font-weight: var(--font-medium); line-height: var(--leading-normal); background-color: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-full); &.secondary {background-color: var(--secondary); color: var(--secondary-foreground);} &.outline {background-color: transparent; color: var(--foreground); border: 1px solid var(--border);} &.success {color: var(--success); background-color: light-dark(color-mix(in srgb,var(--success) 10%,transparent),color-mix(in srgb,var(--success) 30%,transparent));} &.warning {color: var(--warning); background-color: light-dark(color-mix(in srgb,var(--warning) 10%,transparent),color-mix(in srgb,var(--warning) 30%,transparent));} &.danger {color: var(--danger); background-color: light-dark(color-mix(in srgb,var(--danger) 10%,transparent),color-mix(in srgb,var(--danger) 30%,transparent));}}}@layer components{details {border: 1px solid var(--border); border-radius: var(--radius-medium); overflow: hidden; & + details {margin-top: -1px; border-start-start-radius: 0; border-start-end-radius: 0;} &:has(+ details) {border-end-start-radius: 0; border-end-end-radius: 0;} &[open] summary {border-bottom: 1px solid var(--border);}} summary {display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4); font-weight: var(--font-medium); cursor: pointer; user-select: none; transition: background-color var(--transition-fast); &:hover {background-color: var(--muted);} &::-webkit-details-marker,&::marker {display: none;} &::after {content: ""; width: 1em; height: 1em; flex-shrink: 0; background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; transition: transform var(--transition-fast);} details[open] &::after {transform: rotate(180deg);}} details > *:not(summary) {margin: var(--space-4);}}@layer components{[role="tablist"] {display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); background-color: var(--muted); border-radius: var(--radius-medium);} [role="tab"] {display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); font-size: var(--text-7); font-weight: var(--font-medium); white-space: nowrap; background-color: transparent; color: var(--foreground); border: none; border-radius: calc(var(--radius-medium) - 2px); cursor: pointer; transition: background-color var(--transition-fast),color var(--transition-fast); &:hover {color: var(--muted-foreground);} &[aria-selected="true"] {background-color: var(--background); box-shadow: var(--shadow-small);}} [role="tabpanel"] {padding: var(--space-4) 0; &:focus-visible {outline: none;}}}@layer components{dialog {position: fixed; inset: 0; z-index: var(--z-modal); width: min(100% - 2rem,32rem); max-height: 85vh; margin: auto; padding: 0; background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-large); overflow: hidden; opacity: 0; transform: scale(.95); transition: opacity .15s ease,transform .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete; &:is([open],:popover-open) {opacity: 1; transform: scale(1);} @starting-style {&:is([open],:popover-open) {opacity: 0; transform: scale(.95);}} &::backdrop {background-color: rgb(0 0 0 / 0); transition: background-color .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete;} &:is([open],:popover-open)::backdrop {background-color: rgb(0 0 0 / .5);} @starting-style {&:is([open],:popover-open)::backdrop {background-color: rgb(0 0 0 / 0);}} & > header,& > form > header {display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); padding-block-end: 0; & > h1,& > h2,& > h3,& > h4,& > h5,& > h6 {margin-block-end: 0;} & > p {font-size: var(--text-7); color: var(--muted-foreground); margin-block-end: 0;}} & > p,& > div,& > section,& > form > p,& > form > div,& > form > section {padding: var(--space-6); overflow-y: auto;} & > footer,& > form > footer {display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-6); padding-block-start: 0;}}}@layer components{ot-dropdown {[popover] {position: fixed; margin: 0; min-width: 12rem; background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); opacity: 0; transform: translateY(-4px); transition: opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete; &:popover-open {opacity: 1; transform: translateY(0);} @starting-style {&:popover-open {opacity: 0; transform: translateY(-4px);}}} [role="menuitem"] {display: flex; align-items: center; justify-content: start; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--text-7); text-align: start; color: var(--foreground); background: none; border: none; border-radius: var(--radius-small); cursor: pointer; &:hover,&:focus {background-color: var(--accent); outline: none;}}}}@layer components{.toast-container {position: fixed; display: flex; flex-direction: column; pointer-events: none; margin: 0; padding: 0; border: none; background: transparent; overflow: visible; &::backdrop {display: none;} &[data-placement="top-left"] {inset: var(--space-4) auto auto var(--space-4);} &[data-placement="top-center"] {inset: var(--space-4) auto auto 50%; transform: translateX(-50%);} &[data-placement="top-right"] {inset: var(--space-4) var(--space-4) auto auto;} &[data-placement="bottom-left"] {inset: auto auto var(--space-4) var(--space-4); flex-direction: column-reverse;} &[data-placement="bottom-center"] {inset: auto auto var(--space-4) 50%; transform: translateX(-50%); flex-direction: column-reverse;} &[data-placement="bottom-right"] {inset: auto var(--space-4) var(--space-4) auto; flex-direction: column-reverse;}} .toast {--transition: .3s; --transition-in: calc(var(--transition) - 50ms); padding: var(--space-5) var(--space-4); max-width: 28rem; min-width: 20rem; pointer-events: auto; background-color: var(--card); border: 1px solid var(--border); border-inline-start-width: var(--space-1); border-inline-start-style: solid; border-radius: var(--radius-medium); box-shadow: var(--shadow-small); transition: opacity var(--transition-in),transform var(--transition-in),margin var(--transition-in); line-height: 1; .toast-title {font-weight: 600; margin: 0 0 var(--space-3) 0;} .toast-message {color: var(--muted-foreground);} &[data-variant="success"] {border-inline-start-color: var(--success); .toast-title {color: var(--success);}} &[data-variant="danger"] {border-inline-start-color: var(--danger); .toast-title {color: var(--danger);}} &[data-variant="warning"] {border-inline-start-color: var(--warning); .toast-title {color: var(--warning);}} & > [data-close] {margin-inline-start: auto; background: none; border: none; padding: 0; cursor: pointer; opacity: .5; &:hover {opacity: 1;}} margin: var(--space-2) 0; &[data-entering] {opacity: 0; transform: translateY(-1rem);} &[data-exiting] {opacity: 0; margin: 0; padding-block: 0; max-height: 0; overflow: hidden; transition: opacity var(--transition),margin var(--transition),padding var(--transition),max-height var(--transition);}}}@layer components{[data-sidebar-layout] {display: grid; grid-template-columns: 14rem 1fr; grid-template-rows: auto 1fr; height: 100dvh; > main {grid-row: 2; min-width: 0; overflow-y: auto;} > aside[data-sidebar] {grid-row: 2; min-height: 0; z-index: 1; background-color: var(--background); border-inline-end: 1px solid var(--border); box-shadow: var(--shadow-medium); display: flex; flex-direction: column; > :is(header,footer) {flex-shrink: 0; padding: var(--space-3);} > footer {margin-block-start: auto;} > nav {flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-2); font-size: var(--text-7); ul {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); li {margin: 0;}} a {display: flex; gap: var(--space-2); padding: var(--space-1) var(--space-3); color: var(--foreground); text-decoration: none; border-radius: var(--radius-small); transition: background-color var(--transition-fast); &:is(:hover,[aria-current]) {background-color: var(--accent);}} details {border: none; overflow: visible; & + details {margin-top: 0;} &[open] summary {border-bottom: none;} > ul {margin-inline-start: var(--space-4); padding: var(--space-1) 0;}} summary {justify-content: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); &::after {width: .75rem; height: .75rem; margin-inline-start: auto;}}}} > nav[data-topnav] {grid-column: 1 / -1;}} nav[data-topnav] {position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background-color: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-small); a {text-decoration: none;}} :is([data-sidebar-toggle],[data-sidebar-header]) {display: none;} [data-sidebar-toggle] {padding: 0 var(--space-1); background: none; border: 1px solid var(--border); border-radius: var(--radius-small);} @media (min-width: 769px) {[data-sidebar-layout="always"] {transition: grid-template-columns var(--transition); [data-sidebar-toggle] {display: inline-block;} > aside[data-sidebar] {transform: translateX(0); opacity: 1; transition: transform var(--transition),opacity var(--transition),visibility var(--transition);} &[data-sidebar-open] {grid-template-columns: 0px 1fr; gap: 0; > aside[data-sidebar] {overflow: hidden; min-width: 0; transform: translateX(-100%); opacity: 0; visibility: hidden; border-inline-end: none;}}}} @media (max-width: 768px) {[data-sidebar-layout] {grid-template-columns: 1fr; > main {grid-column: 1;} > aside[data-sidebar] {grid-column: 1; z-index: 2; width: 16rem; transform: translateX(-100%); transition: transform var(--transition); box-shadow: var(--shadow-large);} &[data-sidebar-open] > aside[data-sidebar] {transform: translateX(0);}} [data-sidebar-toggle] {display: inline-block;} [data-sidebar-header] {display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);}}}@layer components{[role="status"].skeleton {--_c: light-dark(color-mix(in srgb,var(--muted) 15%,white),color-mix(in srgb,var(--muted) 90%,var(--foreground))); margin-block-end: var(--space-3); background: var(--muted); border-radius: var(--radius-medium); animation: anim 2s infinite; background-size: 200% 100%; background-image: linear-gradient(90deg,var(--muted) 0%,var(--_c) 50%,var(--muted) 100%); &.box {width: 4rem; height: 4rem;} &.line {height: 1rem; width: 100%;}} [role="status"].skeleton:last-child {margin-block-end: 0;} @keyframes anim {from {background-position: 200% 0;} to {background-position: -200% 0;}}}@layer components{[data-tooltip] {position: relative;} [data-tooltip]::before,[data-tooltip]::after {position: absolute; inset-inline-start: 50%; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast); pointer-events: none; z-index: calc(var(--z-modal) + 10);} [data-tooltip]::after {content: attr(data-tooltip); inset-block-end: calc(100% + 10px); transform: translateX(-50%) translateY(4px); padding: var(--space-2) var(--space-3); font-size: var(--text-7); line-height: 1; white-space: nowrap; background: var(--foreground); color: var(--background); border-radius: var(--radius-medium);} [data-tooltip]::before {content: ""; inset-block-end: calc(100% - 5px); transform: translateX(-50%) translateY(4px); border: 8px solid transparent; border-top-color: var(--foreground);} [data-tooltip][data-tooltip-placement="bottom"]::after {inset-block-start: calc(100% + 10px); inset-block-end: auto; transform: translateX(-50%) translateY(-4px);} [data-tooltip][data-tooltip-placement="bottom"]::before {inset-block-start: calc(100% - 5px); inset-block-end: auto; transform: translateX(-50%) translateY(-4px); border-color: transparent; border-bottom-color: var(--foreground);} [data-tooltip]:is([data-tooltip-placement="left"],[data-tooltip-placement="right"])::before,[data-tooltip]:is([data-tooltip-placement="left"],[data-tooltip-placement="right"])::after {inset-block-start: 50%; inset-block-end: auto;} [data-tooltip]:is([data-tooltip-placement="left"],[data-tooltip-placement="right"])::before {border-color: transparent;} [data-tooltip][data-tooltip-placement="left"]::before,[data-tooltip][data-tooltip-placement="left"]::after {inset-inline-start: auto; transform: translateX(4px) translateY(-50%);} [data-tooltip][data-tooltip-placement="left"]::after {inset-inline-end: calc(100% + 10px);} [data-tooltip][data-tooltip-placement="left"]::before {inset-inline-end: calc(100% - 5px); border-inline-start-color: var(--foreground);} [data-tooltip][data-tooltip-placement="right"]::before,[data-tooltip][data-tooltip-placement="right"]::after {transform: translateX(-4px) translateY(-50%);} [data-tooltip][data-tooltip-placement="right"]::after {inset-inline-start: calc(100% + 10px);} [data-tooltip][data-tooltip-placement="right"]::before {inset-inline-start: calc(100% - 5px); border-inline-end-color: var(--foreground);} [data-tooltip]:is(:hover,:focus-visible)::before,[data-tooltip]:is(:hover,:focus-visible)::after {opacity: 1; visibility: visible; transition-delay: .7s; transform: translateX(-50%) translateY(0);} [data-tooltip]:is([data-tooltip-placement="left"],[data-tooltip-placement="right"]):is(:hover,:focus-visible)::before,[data-tooltip]:is([data-tooltip-placement="left"],[data-tooltip-placement="right"]):is(:hover,:focus-visible)::after {transform: translateX(0) translateY(-50%);}}@layer utilities{.align-left {text-align: start;} .align-center {text-align: center;} .align-right {text-align: end;} .text-light {color: var(--muted-foreground);} .text-lighter {color: var(--faint-foreground);} .flex {display: flex;} .flex-col {flex-direction: column;} .items-center {align-items: center;} .justify-center {justify-content: center;} .justify-between {justify-content: space-between;} .justify-end {justify-content: flex-end;} .hstack {display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; align-content: flex-start; height: auto; > * {margin: 0;}} .vstack {display: flex; flex-direction: column; gap: var(--space-3);} .gap-1 {gap: var(--space-1);} .gap-2 {gap: var(--space-2);} .gap-4 {gap: var(--space-4);} .mt-2 {margin-block-start: var(--space-2);} .mt-4 {margin-block-start: var(--space-4);} .mt-6 {margin-block-start: var(--space-6);} .mb-2 {margin-block-end: var(--space-2);} .mb-4 {margin-block-end: var(--space-4);} .mb-6 {margin-block-end: var(--space-6);} .p-4 {padding: var(--space-4);} .w-100 {width: 100%;} :is(ul,ol,a).unstyled {list-style: none; text-decoration: none; padding: 0;}}