@font-face {
font-family: "TimelessSans";
src: url("/@atproto/oauth-provider/~assets/TimelessSansVF.woff2") format("woff2-variations");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
:root {
--font-sans: "TimelessSans", "system-ui", sans-serif, ui-sans-serif;
--default-font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
--font-weight-medium: 510;
--font-weight-semibold: 590;
--radius-2xl: var(--radius);
--text-sm: 0.8125rem;
--text-sm--line-height: 1.25rem;
--text-2xl: 1.5rem;
--text-2xl--line-height: 1.875rem;
--background: #f5f5f5;
--foreground: #0a0a0a;
--primary: #0a0a0a;
--primary-foreground: #ffffff;
--card: #ffffff;
--card-foreground: #0a0a0a;
--popover: #ffffff;
--popover-foreground: #0a0a0a;
--secondary: #f2f2f2;
--secondary-foreground: #0a0a0a;
--muted: #f2f2f2;
--muted-foreground: #525252;
--accent: #f2f2f2;
--accent-foreground: #0a0a0a;
--border: #e5e5e5;
--input: #e5e5e5;
--ring: #d4d4d4;
--sidebar: #fafafa;
--sidebar-foreground: #0a0a0a;
--sidebar-accent: #f2f2f2;
--sidebar-accent-foreground: #0a0a0a;
--sidebar-border: #e5e5e5;
--page: #ffffff;
--subtle: #fafafa;
--subtle-foreground: #737373;
--placeholder: #a3a3a3;
--focus: #8b85f7;
--brand: #5750f1;
--selection: #e0e7ff;
--shadow-ring: color-mix(in srgb, var(--foreground) 10%, transparent);
--shadow-ambient-strong: rgb(0 0 0 / 0.08);
--shadow-ambient-subtle: rgb(0 0 0 / 0.04);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--primary: #f5f5f5;
--primary-foreground: #0a0a0a;
--card: #141414;
--card-foreground: #ededed;
--popover: #141414;
--popover-foreground: #ededed;
--secondary: #1f1f1f;
--secondary-foreground: #ededed;
--muted: #1f1f1f;
--muted-foreground: #a3a3a3;
--accent: #1f1f1f;
--accent-foreground: #ededed;
--border: #262626;
--input: #262626;
--ring: #404040;
--sidebar: #1a1a1a;
--sidebar-foreground: #ededed;
--sidebar-accent: #1f1f1f;
--sidebar-accent-foreground: #ededed;
--sidebar-border: #262626;
--page: #0a0a0a;
--subtle: #1a1a1a;
--placeholder: #737373;
--selection: #27235f;
--brand: #6d67f5;
--shadow-ambient-strong: rgb(0 0 0 / 0.35);
--shadow-ambient-subtle: rgb(0 0 0 / 0.2);
color-scheme: dark;
}
img[src$="/logotype.svg"] {
filter: invert(1);
}
}
html {
scrollbar-gutter: stable;
}
::selection {
background-color: var(--selection);
color: var(--foreground);
}
html.auth-background {
background-color: var(--page);
}
#root > .min-h-svh {
position: relative;
padding: 1.75rem 1.75rem 4.5rem;
}
[data-slot="card-footer"] > div:has(> a) {
position: absolute;
right: 0;
bottom: 1.75rem;
left: 0;
}
.max-w-auth-card {
max-width: 28rem;
}
[data-slot="card"] {
overflow: visible;
background-color: transparent;
box-shadow: none;
padding-block: 0;
}
[data-slot="card"] > * {
padding-inline: 0;
}
[data-slot="card"] > div:has(> img[src$="/logotype.svg"]) {
padding-top: 0;
}
[data-slot="card-title"] {
font-size: 1.875rem;
line-height: 1.875rem;
font-weight: 600;
}
img[src$="/logotype.svg"] {
width: 12rem;
height: 6rem;
max-width: none;
translate: 0.5rem 0;
}
[data-slot="card-content"] div:has(> div.items-center > label) {
gap: 0;
}
[data-slot="card-content"] div.items-center > label {
padding-block: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 400;
}
[data-slot="card-content"] p,
[data-slot="card-footer"] a {
font-size: 0.75rem;
line-height: 1rem;
color: var(--subtle-foreground);
}
input[data-slot="input"] {
height: 2rem;
padding: 0.25rem 0.5rem;
font-size: 0.8125rem;
line-height: 1.25rem;
background-color: var(--card);
border: 0;
box-shadow: inset 0 0 0 1px var(--shadow-ring);
}
span.absolute + input[data-slot="input"] {
padding-left: 1.875rem;
}
span.absolute:has(+ input[data-slot="input"]) {
left: 0.5625rem;
color: var(--subtle-foreground);
}
span.absolute:has(+ input[data-slot="input"]) svg,
input[data-slot="input"] + span.absolute svg {
width: 0.875rem;
height: 0.875rem;
}
input[data-slot="input"]::placeholder {
color: var(--placeholder);
}
input[data-slot="input"]:focus-visible {
box-shadow:
inset 0 0 0 1px var(--ring),
0 0 0 1px var(--ring);
}
button[data-slot="button"] {
font-size: 0.8125rem;
line-height: 1.25rem;
font-weight: 400;
translate: none;
}
button[data-slot="button"].bg-primary,
button[data-slot="button"].bg-secondary {
height: 2rem;
padding: 0.125rem 0.75rem;
}
button[data-slot="button"].bg-primary {
--btn-from: color-mix(in oklch, var(--brand), white 15%);
--btn-highlight: color-mix(in oklch, var(--brand), white 30%);
color: #ffffff;
background-color: var(--btn-highlight);
background-image: linear-gradient(to bottom in oklab, var(--btn-from), var(--brand));
border: 0;
box-shadow:
inset 0 0 0 1px color-mix(in oklch, var(--brand), black 10%),
inset 0 2px 0 0 var(--btn-highlight);
}
button[data-slot="button"].bg-primary:hover {
--btn-from: var(--btn-highlight);
}
button[data-slot="button"].bg-primary:focus-visible {
outline-color: var(--brand);
}
button[data-slot="button"].bg-primary:disabled {
opacity: 0.5;
}
button[data-slot="button"]:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
button[data-slot="button"][type="submit"].bg-primary {
gap: 0.375rem;
padding-right: 0.5625rem;
}
button[data-slot="button"][type="submit"].bg-primary::after {
content: "";
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
background-color: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
form:has([data-slot="avatar"]) button[data-slot="button"][type="submit"].bg-primary {
padding-right: 0.75rem;
padding-left: 0.5625rem;
}
form:has([data-slot="avatar"]) button[data-slot="button"][type="submit"].bg-primary::after {
order: -1;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
button[data-slot="button"].bg-secondary {
background-color: transparent;
}
button[data-slot="button"].bg-secondary:hover {
background-color: var(--muted);
}
[data-slot="select-trigger"] {
height: 2rem;
gap: 0.375rem;
padding: 0.125rem 0.75rem;
font-size: 0.8125rem;
line-height: 1.25rem;
color: var(--foreground);
background-color: var(--card);
border: 0;
box-shadow: inset 0 0 0 1px var(--shadow-ring);
}
[data-slot="select-trigger"]:hover {
background-color: var(--muted);
}
[data-slot="select-trigger"]:focus-visible,
[data-slot="select-trigger"][aria-expanded="true"] {
box-shadow:
inset 0 0 0 1px var(--ring),
0 0 0 1px var(--ring);
}
[data-slot="select-trigger"] svg {
width: 0.875rem;
height: 0.875rem;
color: var(--subtle-foreground);
}
[data-slot="select-content"] {
width: 14rem;
padding: 0.25rem;
border: 0;
border-radius: var(--radius);
background-color: var(--card);
box-shadow:
0 0 0 1px var(--shadow-ring),
0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
[data-slot="select-item"] {
min-height: 2rem;
border-radius: 0.25rem;
padding: 0.125rem 2rem 0.125rem 0.5rem;
font-size: 0.8125rem;
line-height: 1.25rem;
}
[data-slot="select-item"]:hover,
[data-slot="select-item"]:focus {
background-color: var(--muted);
}
[data-slot="select-item"] svg {
width: 0.875rem;
height: 0.875rem;
}
div:has(> button[data-slot="item"]) {
gap: 0.5rem;
}
button[data-slot="item"] {
min-height: 2.25rem;
gap: 0.375rem;
padding: 0.375rem 0.5625rem 0.375rem 0.5rem;
border: 0;
border-radius: var(--radius);
background-color: var(--card);
box-shadow: inset 0 0 0 1px var(--shadow-ring);
}
button[data-slot="item"]:hover {
background-color: var(--muted);
}
button[data-slot="item"]:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
box-shadow: inset 0 0 0 1px var(--shadow-ring);
}
button[data-slot="item"] [data-slot="avatar"],
button[data-slot="item"] [data-slot="item-media"].rounded-full {
width: 1.3125rem;
height: 1.3125rem;
}
button[data-slot="item"] [data-slot="item-description"],
button[data-slot="item"] [data-slot="item-title"],
button[data-slot="item"] [data-slot="item-title"] > span {
font-size: 0.8125rem;
line-height: 1.25rem;
font-weight: 400;
color: var(--foreground);
}
button[data-slot="item"] [data-slot="item-actions"] svg {
width: 0.875rem;
height: 0.875rem;
color: var(--subtle-foreground);
}