@layer neek.reset, neek.tokens, neek.theme, neek.appearance, neek.base, neek.layout, neek.components, neek.utilities;
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-400-normal.8909904ab6.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-ext-400-normal.6744a7f509.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-500-normal.f3779f1efc.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-ext-500-normal.2c6fbc42d3.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-600-normal.f9a06e79cd.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-ext-600-normal.e4bdf67b0c.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-700-normal.6f56409fd3.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-ext-700-normal.143f9504f1.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-400-normal.14425ba9c6.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-ext-400-normal.505dfba8ec.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-500-normal.cb182feeed.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-ext-500-normal.879df9319f.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-600-normal.400c6bfda1.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-ext-600-normal.90899aac1c.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-700-normal.d0d4e81880.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/jetbrains-mono-latin-ext-700-normal.45a606d88f.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Neek Mark';
font-style: normal;
font-weight: 400;
font-display: block;
src: url('../fonts/neek-mark.33eb87fcf0.woff2') format('woff2'), url('../fonts/neek-mark.36257a2705.ttf') format('truetype');
}
@layer neek.reset {
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
line-height: round(nearest, 1.5em, 4px);
}
body {
min-height: 100%;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select,
optgroup {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
background-color: transparent;
border-radius: 0;
}
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
appearance: button;
}
textarea {
resize: vertical;
}
::placeholder {
opacity: 1;
}
ol,
ul,
menu {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
table {
border-collapse: collapse;
text-indent: 0;
border-color: inherit;
}
summary {
display: list-item;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
@layer neek.tokens {
:root {
--neek-neutral-50: oklch(98.5% 0 none);
--neek-neutral-100: oklch(97% 0 none);
--neek-neutral-200: oklch(92.2% 0 none);
--neek-neutral-300: oklch(87% 0 none);
--neek-neutral-400: oklch(70.8% 0 none);
--neek-neutral-500: oklch(55.6% 0 none);
--neek-neutral-600: oklch(43.9% 0 none);
--neek-neutral-700: oklch(37.1% 0 none);
--neek-neutral-800: oklch(26.9% 0 none);
--neek-neutral-900: oklch(20.5% 0 none);
--neek-neutral-950: oklch(14.5% 0 none);
--neek-red-50: oklch(97.1% 0.013 17.38);
--neek-red-100: oklch(93.6% 0.032 17.717);
--neek-red-200: oklch(88.5% 0.062 18.334);
--neek-red-300: oklch(80.8% 0.114 19.571);
--neek-red-400: oklch(70.4% 0.191 22.216);
--neek-red-500: oklch(63.7% 0.237 25.331);
--neek-red-600: oklch(57.7% 0.245 27.325);
--neek-red-700: oklch(50.5% 0.213 27.518);
--neek-red-800: oklch(44.4% 0.177 26.899);
--neek-red-900: oklch(39.6% 0.141 25.723);
--neek-red-950: oklch(25.8% 0.092 26.042);
--neek-amber-50: oklch(98.7% 0.022 95.277);
--neek-amber-100: oklch(96.2% 0.059 95.617);
--neek-amber-200: oklch(92.4% 0.12 95.746);
--neek-amber-300: oklch(87.9% 0.169 91.605);
--neek-amber-400: oklch(82.8% 0.189 84.429);
--neek-amber-500: oklch(76.9% 0.188 70.08);
--neek-amber-600: oklch(66.6% 0.179 58.318);
--neek-amber-700: oklch(55.5% 0.163 48.998);
--neek-amber-800: oklch(47.3% 0.137 46.201);
--neek-amber-900: oklch(41.4% 0.112 45.904);
--neek-amber-950: oklch(27.9% 0.077 45.635);
--neek-emerald-50: oklch(97.9% 0.021 166.113);
--neek-emerald-100: oklch(95% 0.052 163.051);
--neek-emerald-200: oklch(90.5% 0.093 164.15);
--neek-emerald-300: oklch(84.5% 0.143 164.978);
--neek-emerald-400: oklch(76.5% 0.177 163.223);
--neek-emerald-500: oklch(69.6% 0.17 162.48);
--neek-emerald-600: oklch(59.6% 0.145 163.225);
--neek-emerald-700: oklch(50.8% 0.118 165.612);
--neek-emerald-800: oklch(43.2% 0.095 166.913);
--neek-emerald-900: oklch(37.8% 0.077 168.94);
--neek-emerald-950: oklch(26.2% 0.051 172.552);
--neek-space-unit: 0.25rem;
--neek-space-xs: calc(var(--neek-space-unit) * 1);
--neek-space-sm: calc(var(--neek-space-unit) * 2);
--neek-space-md: calc(var(--neek-space-unit) * 4);
--neek-space-lg: calc(var(--neek-space-unit) * 6);
--neek-space-xl: calc(var(--neek-space-unit) * 8);
--neek-space-2xl: calc(var(--neek-space-unit) * 12);
--neek-space-3xl: calc(var(--neek-space-unit) * 16);
--neek-border-width: 1px;
--neek-radius-sm: 8px;
--neek-radius-md: 8px;
--neek-radius-lg: 8px;
--neek-radius-full: 8px;
--neek-radius-step-none: 0;
--neek-radius-step-sm: 4px;
--neek-radius-step-md: 8px;
--neek-radius-step-lg: 16px;
--neek-font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--neek-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, var(--neek-font-emoji);
--neek-font-heading: var(--neek-font-sans);
--neek-font-input: var(--neek-font-sans);
--neek-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
--neek-font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif, var(--neek-font-emoji);
--neek-font-system: system-ui, sans-serif, var(--neek-font-emoji);
--neek-font-apple: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Helvetica Neue', Helvetica, sans-serif,
var(--neek-font-emoji);
--neek-font-windows: 'Segoe UI Variable Text', 'Segoe UI', Tahoma, Arial, sans-serif, var(--neek-font-emoji);
--neek-font-android: Roboto, Ubuntu, Cantarell, 'Noto Sans', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif,
var(--neek-font-emoji);
--neek-font-serif: ui-serif, 'Iowan Old Style', 'Apple Garamond', Charter, Cambria, Georgia, 'Noto Serif',
'Times New Roman', Times, serif, var(--neek-font-emoji);
--neek-font-monospace: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Segoe UI Mono', Consolas,
'Ubuntu Mono', 'Liberation Mono', 'DejaVu Sans Mono', Menlo, monospace, var(--neek-font-emoji);
--neek-font-jetbrains: 'JetBrainsMono Nerd Font', 'JetBrains Mono', var(--neek-font-monospace);
--neek-font-brand: 'Neek Mark', var(--neek-font-mono);
--neek-grid: 4px;
--neek-font-size-base: 1rem;
--neek-text-xs: round(nearest, calc(var(--neek-font-size-base) * 0.75), var(--neek-grid));
--neek-text-sm: round(nearest, calc(var(--neek-font-size-base) * 0.875), var(--neek-grid));
--neek-text-base: round(nearest, var(--neek-font-size-base), var(--neek-grid));
--neek-text-lg: round(nearest, calc(var(--neek-font-size-base) * 1.25), var(--neek-grid));
--neek-text-xl: round(nearest, calc(var(--neek-font-size-base) * 1.5), var(--neek-grid));
--neek-text-2xl: round(nearest, calc(var(--neek-font-size-base) * 1.75), var(--neek-grid));
--neek-text-3xl: round(nearest, calc(var(--neek-font-size-base) * 2), var(--neek-grid));
--neek-text-xs-leading: round(nearest, calc(var(--neek-text-xs) * 1.3333), var(--neek-grid));
--neek-text-sm-leading: round(nearest, calc(var(--neek-text-sm) * 1.5), var(--neek-grid));
--neek-text-base-leading: round(nearest, calc(var(--neek-text-base) * 1.5), var(--neek-grid));
--neek-text-lg-leading: round(nearest, calc(var(--neek-text-lg) * 1.4), var(--neek-grid));
--neek-text-xl-leading: round(nearest, calc(var(--neek-text-xl) * 1.3333), var(--neek-grid));
--neek-text-2xl-leading: round(nearest, calc(var(--neek-text-2xl) * 1.2857), var(--neek-grid));
--neek-text-3xl-leading: round(nearest, calc(var(--neek-text-3xl) * 1.25), var(--neek-grid));
--neek-weight-regular: 400;
--neek-weight-medium: 500;
--neek-weight-semibold: 600;
--neek-weight-bold: 700;
--neek-leading-tight: round(nearest, 1.25em, var(--neek-grid));
--neek-leading-snug: round(nearest, 1.375em, var(--neek-grid));
--neek-leading-normal: round(nearest, 1.5em, var(--neek-grid));
--neek-leading-relaxed: round(nearest, 1.625em, var(--neek-grid));
--neek-tracking-tight: -0.025em;
--neek-blur: 9px;
--neek-duration: 150ms;
--neek-duration-slow: 350ms;
--neek-ease: cubic-bezier(0.4, 0, 0.2, 1);
--neek-container-sm: 28rem;
--neek-container-md: 42rem;
--neek-container-lg: 64rem;
--neek-header-gap: var(--neek-space-md);
}
@media (width < 40rem) {
:root {
--neek-font-size-base: 1.125rem;
--neek-grid: 2px;
}
}
}
@layer neek.tokens {
:root,
[data-color-scheme='light'] {
color-scheme: light;
}
[data-color-scheme='dark'] {
color-scheme: dark;
}
:root {
--neek-bg: light-dark(var(--neek-neutral-50), var(--neek-neutral-950));
--neek-bg-2: var(--neek-bg);
--neek-bg-muted: light-dark(var(--neek-neutral-100), var(--neek-neutral-800));
--neek-surface: light-dark(#ffffff, var(--neek-neutral-900));
--neek-surface-hover: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
--neek-surface-input: light-dark(#ffffff, var(--neek-neutral-950));
--neek-border: light-dark(var(--neek-neutral-200), var(--neek-neutral-800));
--neek-border-strong: light-dark(var(--neek-neutral-300), var(--neek-neutral-600));
--neek-border-subtle: light-dark(var(--neek-neutral-100), color-mix(in oklab, var(--neek-border), var(--neek-surface)));
--neek-text: light-dark(var(--neek-neutral-900), var(--neek-neutral-100));
--neek-text-secondary: light-dark(var(--neek-neutral-600), var(--neek-neutral-400));
--neek-text-muted: light-dark(var(--neek-neutral-500), color-mix(in oklab, var(--neek-neutral-400) 90%, var(--neek-neutral-500)));
--neek-accent: #6366f1;
--neek-accent-hover: #4f46e5;
--neek-accent-contrast: #ffffff;
--neek-accent-soft: color-mix(in oklab, var(--neek-accent) 15%, transparent);
--neek-accent-text: light-dark(var(--neek-accent), color-mix(in oklab, var(--neek-accent) 70%, #ffffff));
--neek-focus-ring: var(--neek-text);
--neek-selection-bg: var(--neek-text);
--neek-selection-text: var(--neek-bg);
--neek-success: light-dark(var(--neek-emerald-600), var(--neek-emerald-400));
--neek-success-text: light-dark(var(--neek-emerald-800), var(--neek-emerald-300));
--neek-success-soft: light-dark(var(--neek-emerald-50), color-mix(in oklab, var(--neek-emerald-500) 10%, transparent));
--neek-success-border: light-dark(var(--neek-emerald-200), color-mix(in oklab, var(--neek-emerald-500) 20%, transparent));
--neek-danger: light-dark(var(--neek-red-600), var(--neek-red-400));
--neek-danger-text: light-dark(var(--neek-red-800), var(--neek-red-300));
--neek-danger-soft: light-dark(var(--neek-red-50), color-mix(in oklab, var(--neek-red-500) 10%, transparent));
--neek-danger-border: light-dark(var(--neek-red-200), color-mix(in oklab, var(--neek-red-500) 20%, transparent));
--neek-warning: light-dark(var(--neek-amber-500), var(--neek-amber-400));
--neek-warning-text: light-dark(var(--neek-amber-700), var(--neek-amber-300));
--neek-warning-soft: light-dark(var(--neek-amber-50), color-mix(in oklab, var(--neek-amber-500) 10%, transparent));
--neek-warning-border: light-dark(var(--neek-amber-200), color-mix(in oklab, var(--neek-amber-500) 20%, transparent));
--neek-shadow-color: light-dark(color-mix(in oklab, var(--neek-neutral-900) 5%, transparent), color-mix(in oklab, #000000 20%, transparent));
--neek-shadow-sm: 0 1px 3px 0 var(--neek-shadow-color), 0 1px 2px -1px var(--neek-shadow-color);
--neek-shadow-md: 0 4px 12px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
--neek-shadow-lg: 0 8px 30px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5));
--neek-page-glow: light-dark(
color-mix(in oklab, var(--neek-text) calc(var(--neek-panel-shade-light) * 1.5), transparent),
color-mix(in oklab, var(--neek-text) calc(var(--neek-panel-shade-dark) * 1.5), transparent)
);
--neek-page-glow-shape: 120% 720px at 50% 0%;
--neek-page-glow-grain-light: 0.6;
--neek-page-glow-grain-dark: 0.22;
--neek-page-glow-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
--neek-bg-image: none;
--neek-bg-size: auto;
--neek-bg-repeat: no-repeat;
--neek-bg-position: center;
--neek-bg-attachment: fixed;
--neek-vignette: none;
--neek-rainbow-red: #ff5f6d;
--neek-rainbow-orange: #ff9f43;
--neek-rainbow-yellow: #ffd93d;
--neek-rainbow-green: #6bcb77;
--neek-rainbow-cyan: #4fc3f7;
--neek-rainbow-blue: #6c8cff;
--neek-rainbow-violet: #b07cff;
--neek-rainbow-pink: #ff6fb5;
--neek-rainbow: linear-gradient(90deg, var(--neek-rainbow-red), var(--neek-rainbow-orange), var(--neek-rainbow-yellow), var(--neek-rainbow-green), var(--neek-rainbow-cyan), var(--neek-rainbow-blue), var(--neek-rainbow-violet), var(--neek-rainbow-pink), var(--neek-rainbow-red));
--neek-rainbow-text: linear-gradient(90deg,
light-dark(#dc2626, var(--neek-rainbow-red)),
light-dark(#ea580c, var(--neek-rainbow-orange)),
light-dark(#ca8a04, var(--neek-rainbow-yellow)),
light-dark(#16a34a, var(--neek-rainbow-green)),
light-dark(#0891b2, var(--neek-rainbow-cyan)),
light-dark(#2563eb, var(--neek-rainbow-blue)),
light-dark(#7c3aed, var(--neek-rainbow-violet)),
light-dark(#db2777, var(--neek-rainbow-pink)),
light-dark(#dc2626, var(--neek-rainbow-red)));
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-highlight-gradient: linear-gradient(90deg, var(--neek-highlight), var(--neek-highlight-2), var(--neek-highlight));
--neek-highlight-glow:
-6px 0 16px -8px color-mix(in oklab, var(--neek-highlight) 60%, transparent),
0 -4px 16px -8px color-mix(in oklab, var(--neek-highlight) 40%, transparent),
0 6px 16px -8px color-mix(in oklab, var(--neek-highlight-2) 40%, transparent),
6px 0 16px -8px color-mix(in oklab, var(--neek-highlight-2) 60%, transparent);
--neek-rainbow-glow-blur: 0.16em;
--neek-rainbow-glow-strength: 0.55;
--neek-rainbow-glow:
-6px 0 16px -8px color-mix(in oklab, var(--neek-rainbow-red) 50%, transparent),
0 -4px 16px -8px color-mix(in oklab, var(--neek-rainbow-yellow) 35%, transparent),
0 6px 16px -8px color-mix(in oklab, var(--neek-rainbow-green) 35%, transparent),
6px 0 16px -8px color-mix(in oklab, var(--neek-rainbow-violet) 50%, transparent);
--neek-gap-ring: 0 0 0 2px var(--neek-bg), 0 0 0 3px var(--neek-rainbow-violet);
--neek-rainbow-ring-width: var(--neek-border-width);
--neek-rainbow-hover-fade: 500ms;
--neek-rainbow-hover-cycle: 6s;
--neek-rainbow-hover-glow: var(--neek-rainbow-glow);
--neek-link-color: transparent;
--neek-link-color-hover: transparent;
--neek-link-underline: 1px;
--neek-link-underline-hover: 2px;
--neek-dust-opacity: 0;
--neek-dust-color: #ffffff;
--neek-dust-density: 6;
--neek-dust-strength: 0.25;
--neek-dust-vignette: 0;
--neek-social-link-color: light-dark(var(--neek-neutral-500), var(--neek-neutral-400));
--neek-social-link-hover-color: var(--neek-accent);
}
[data-color-scheme='dark'] {
--neek-bg: var(--neek-neutral-950);
}
}
@layer neek.tokens {
:root {
--neek-frame-width: 72rem;
--neek-frame-gutter: 1.5rem;
--neek-header-height: 4.5rem;
--neek-settings-nav-width: 14rem;
--neek-settings-nav-icon: var(--neek-text-muted);
--neek-nav-item-text: var(--neek-text-secondary);
--neek-nav-current-bg: var(--neek-surface-hover);
--neek-nav-current-text: var(--neek-text);
--neek-menu-current-bg: var(--neek-bg-muted);
--neek-menu-current-text: var(--neek-text);
--neek-nav-link-color: var(--neek-meta-text);
--neek-brand-color: var(--neek-text);
--neek-composer-type-pressed-bg: color-mix(in oklab, var(--neek-accent) 12%, transparent);
--neek-timeline-new-bg: var(--neek-button-color);
--neek-timeline-new-brighten: var(--neek-button-brighten);
--neek-timeline-new-angle: var(--neek-button-angle);
--neek-rail-badge-bg: var(--neek-accent);
--neek-rail-badge-text: var(--neek-accent-contrast);
--neek-app-rail-width: 14rem;
--neek-app-aside-width: 18rem;
--neek-timeline-width: 40rem;
--neek-post-avatar: calc(var(--neek-space-unit) * 11);
--neek-page-transition-duration: 200ms;
--neek-frost-bg: color-mix(in oklab, var(--neek-bg) 72%, transparent);
--neek-frost: blur(14px) saturate(140%);
--neek-card-bg: var(--neek-surface);
--neek-card-border: var(--neek-border);
--neek-card-sticky-bg: color-mix(in oklab, var(--neek-accent) 5%, var(--neek-card-bg));
--neek-card-sticky-border: color-mix(in oklab, var(--neek-accent) 45%, var(--neek-card-border));
--neek-card-radius: var(--neek-radius-lg);
--neek-card-padding: calc(var(--neek-space-unit) * 5);
--neek-card-shadow: var(--neek-shadow-sm);
--neek-card-padding-wide: calc(var(--neek-space-unit) * 6);
--neek-card-backdrop: none;
--neek-panel-shade-light: 1.5%;
--neek-panel-shade-dark: 4.5%;
--neek-panel-shade: light-dark(
color-mix(in oklab, var(--neek-text) var(--neek-panel-shade-light), transparent),
color-mix(in oklab, var(--neek-text) var(--neek-panel-shade-dark), transparent)
);
--neek-panel-glow: light-dark(
color-mix(in oklab, var(--neek-text) calc(var(--neek-panel-shade-light) * 0.6), transparent),
color-mix(in oklab, var(--neek-text) calc(var(--neek-panel-shade-dark) * 0.6), transparent)
);
--neek-panel-image:
radial-gradient(circle at 10% 100%, var(--neek-panel-glow), transparent 55%),
linear-gradient(to top, var(--neek-panel-shade), transparent 55%);
--neek-card-link-color: var(--neek-accent);
--neek-card-hover-border-image: var(--neek-rainbow);
--neek-card-hover-glow: var(--neek-rainbow-glow);
--neek-card-hover-fade: 1400ms;
--neek-panel-bleed: var(--neek-frame-gutter);
--neek-stream-bleed: var(--neek-panel-bleed);
--neek-stream-gap: calc(var(--neek-space-unit) * 6);
--neek-stream-max-width: var(--neek-timeline-width);
--neek-stack-gap: calc(var(--neek-space-unit) * 10);
--neek-stack-card-height: 36rem;
--neek-stack-thumb-size: calc(var(--neek-space-unit) * 12);
--neek-stack-thumb-sign-bg: rgb(0 0 0 / 0.6);
--neek-stack-thumb-sign-color: #ffffff;
--neek-stack-composer-width: 44rem;
--neek-stack-composer-bg: var(--neek-card-bg);
--neek-stack-composer-flip: 600ms;
--neek-carousel-gap: calc(var(--neek-space-unit) * 4);
--neek-carousel-bleed: calc(var(--neek-space-unit) * 1);
--neek-carousel-arrow-size: calc(var(--neek-space-unit) * 10);
--neek-teaser-height: calc(var(--neek-space-unit) * 32);
--neek-teaser-media-width: 38%;
--neek-stream-text: light-dark(var(--neek-neutral-800), var(--neek-neutral-200));
--neek-stream-text-leading: var(--neek-leading-normal);
--neek-post-paragraph-gap: calc(var(--neek-space-unit) * 3);
--neek-stream-title-gap: var(--neek-post-paragraph-gap);
--neek-homepage-width: 640px;
--neek-card-hover-cycle: 8s;
--neek-gallery-ratio: 4 / 3;
--neek-gallery-bg: var(--neek-bg-muted);
--neek-gallery-thumb-size: calc(var(--neek-space-unit) * 14);
--neek-lightbox-backdrop: color-mix(in oklab, var(--neek-neutral-950) 80%, transparent);
--neek-lightbox-blur: 12px;
--neek-playlist-video-bg: var(--neek-neutral-950);
--neek-playlist-border: var(--neek-audio-list-border);
--neek-playlist-number: var(--neek-audio-list-number);
--neek-playlist-current-bg: color-mix(in oklab, var(--neek-accent) 8%, transparent);
--neek-playlist-button-size: calc(var(--neek-space-unit) * 9);
--neek-playlist-button-hover-bg: color-mix(in oklab, var(--neek-accent) 10%, transparent);
--neek-playlist-seek-track: calc(var(--neek-space-unit) * 1);
--neek-playlist-seek-thumb: calc(var(--neek-space-unit) * 3.5);
--neek-playlist-seek-rail: color-mix(in oklab, var(--neek-text) 15%, transparent);
--neek-playlist-seek-halo: color-mix(in oklab, var(--neek-accent) 20%, transparent);
--neek-card-bg-image: none;
--neek-card-bg-size: auto;
--neek-card-bg-position: center;
--neek-card-bg-repeat: repeat;
--neek-card-bg-opacity: 0.3;
--neek-card-bg-fade: 50%;
--neek-pattern-strength-light: 37%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-light: 0%;
--neek-pattern-ink-dark: 23%;
--neek-pattern-lift-light: 6%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-fade: min(100%, 20rem);
--neek-pattern-single-height: 28rem;
--neek-media-radius: var(--neek-radius-lg);
--neek-media-fit: cover;
--neek-media-max-height: none;
--neek-media-hover-scale: 1;
--neek-panel-bg: var(--neek-surface);
--neek-panel-border: var(--neek-border);
--neek-panel-backdrop: none;
--neek-pill-radius: var(--neek-radius-full);
--neek-filter-pill-radius: var(--neek-pill-radius);
--neek-logo-size: 4rem;
--neek-logo-radius: var(--neek-radius-full);
--neek-button-radius: var(--neek-radius-sm);
--neek-button-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--neek-button-bg: light-dark(var(--neek-neutral-900), var(--neek-neutral-100));
--neek-button-bg-hover: light-dark(var(--neek-neutral-800), #ffffff);
--neek-button-text: light-dark(#ffffff, var(--neek-neutral-900));
--neek-button-ring: light-dark(var(--neek-neutral-900), var(--neek-neutral-100));
--neek-button-ring-offset: light-dark(#ffffff, var(--neek-neutral-900));
--neek-button-secondary-bg: light-dark(color-mix(in oklab, #ffffff 80%, transparent), color-mix(in oklab, var(--neek-neutral-900) 60%, transparent));
--neek-button-secondary-bg-hover: light-dark(#ffffff, var(--neek-neutral-800));
--neek-button-secondary-text: light-dark(var(--neek-neutral-700), var(--neek-neutral-300));
--neek-button-secondary-text-hover: light-dark(var(--neek-neutral-900), var(--neek-neutral-100));
--neek-button-secondary-border: var(--neek-border);
--neek-button-secondary-brighten: 8%;
--neek-button-secondary-brighten-hover: 14%;
--neek-button-secondary-ring-offset: light-dark(#ffffff, var(--neek-neutral-950));
--neek-button-danger-bg: var(--neek-red-600);
--neek-button-danger-bg-hover: var(--neek-red-500);
--neek-button-danger-bg-active: var(--neek-red-700);
--neek-button-danger-text: #ffffff;
--neek-button-danger-ring: var(--neek-red-500);
--neek-button-danger-brighten: 22%;
--neek-button-danger-brighten-hover: 32%;
--neek-button-color: var(--neek-accent);
--neek-button-weight: var(--neek-weight-medium);
--neek-button-dark-text-from: 0.86;
--neek-button-angle: to bottom;
--neek-button-brighten: 30%;
--neek-button-brighten-hover: 45%;
--neek-button-lift-hover: 0%;
--neek-button-disabled-opacity: 0.5;
--neek-button-yellow-text: var(--neek-button-color-text);
--neek-button-red: var(--neek-rainbow-red);
--neek-button-orange: var(--neek-rainbow-orange);
--neek-button-yellow: var(--neek-rainbow-yellow);
--neek-button-green: var(--neek-rainbow-green);
--neek-button-cyan: var(--neek-rainbow-cyan);
--neek-button-blue: var(--neek-rainbow-blue);
--neek-button-violet: var(--neek-rainbow-violet);
--neek-button-pink: var(--neek-rainbow-pink);
--neek-input-radius: var(--neek-radius-sm);
--neek-input-font: var(--neek-font-input);
--neek-input-bg: var(--neek-surface-input);
--neek-input-border: var(--neek-border-strong);
--neek-input-text: var(--neek-text);
--neek-input-placeholder: light-dark(var(--neek-neutral-400), var(--neek-neutral-600));
--neek-input-focus-border: var(--neek-focus-ring);
--neek-input-focus-border-image: var(--neek-rainbow);
--neek-input-focus-glow: var(--neek-rainbow-glow);
--neek-input-focus-ring: color-mix(in oklab, var(--neek-focus-ring) 10%, transparent);
--neek-select-chevron-size: 0.3125rem;
--neek-select-chevron-stroke: 1.5px;
--neek-select-chevron:
linear-gradient(to bottom right, transparent calc(50% - var(--neek-select-chevron-stroke) / 2), currentColor 0 calc(50% + var(--neek-select-chevron-stroke) / 2), transparent 0),
linear-gradient(to bottom left, transparent calc(50% - var(--neek-select-chevron-stroke) / 2), currentColor 0 calc(50% + var(--neek-select-chevron-stroke) / 2), transparent 0);
--neek-check-color: var(--neek-text);
--neek-icon-size: 1rem;
--neek-provider-icon-size: 1rem;
--neek-icon-stroke: 1.8;
--neek-option-padding: calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 5);
--neek-option-radius: var(--neek-card-radius);
--neek-option-border: var(--neek-card-border);
--neek-option-bg: var(--neek-card-bg);
--neek-option-selected-bg: var(--neek-surface-hover);
--neek-switch-width: 2.75rem;
--neek-switch-height: 1.5rem;
--neek-switch-off-bg: var(--neek-border-strong);
--neek-switch-on-bg: var(--neek-button-bg);
--neek-switch-knob: var(--neek-surface);
--neek-label-text: light-dark(var(--neek-neutral-700), var(--neek-neutral-300));
--neek-error-text: light-dark(var(--neek-red-600), var(--neek-red-400));
--neek-project-row-disabled-opacity: 0.6;
--neek-badge-radius: var(--neek-pill-radius);
--neek-badge-bg: var(--neek-bg-muted);
--neek-badge-text: light-dark(var(--neek-neutral-600), var(--neek-neutral-400));
--neek-badge-success-bg: var(--neek-success-soft);
--neek-badge-success-text: light-dark(var(--neek-emerald-700), var(--neek-emerald-300));
--neek-badge-danger-bg: var(--neek-danger-soft);
--neek-badge-danger-text: light-dark(var(--neek-red-700), var(--neek-red-300));
--neek-badge-warning-bg: var(--neek-warning-soft);
--neek-badge-warning-text: light-dark(var(--neek-amber-700), var(--neek-amber-300));
--neek-badge-outline-bg: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
--neek-badge-outline-border: light-dark(var(--neek-neutral-200), var(--neek-border));
--neek-badge-outline-text: light-dark(var(--neek-neutral-700), var(--neek-neutral-200));
--neek-alert-radius: var(--neek-radius-md);
--neek-alert-bg: light-dark(color-mix(in oklab, var(--neek-emerald-50) 70%, transparent), color-mix(in oklab, var(--neek-emerald-500) 10%, transparent));
--neek-alert-border: var(--neek-success-border);
--neek-alert-text: var(--neek-success-text);
--neek-alert-error-bg: light-dark(color-mix(in oklab, var(--neek-red-50) 70%, transparent), color-mix(in oklab, var(--neek-red-500) 10%, transparent));
--neek-alert-error-border: var(--neek-danger-border);
--neek-alert-error-text: var(--neek-danger-text);
--neek-alert-info-bg: light-dark(color-mix(in oklab, var(--neek-neutral-50) 70%, transparent), color-mix(in oklab, var(--neek-neutral-800) 60%, transparent));
--neek-alert-info-border: light-dark(var(--neek-neutral-200), var(--neek-border));
--neek-alert-info-text: light-dark(var(--neek-neutral-700), var(--neek-neutral-300));
--neek-avatar-radius: var(--neek-radius-full);
--neek-identity-avatar-radius: 50%;
--neek-avatar-fallback-bg: var(--neek-button-bg);
--neek-avatar-fallback-brighten: 35%;
--neek-avatar-fallback-text: var(--neek-button-text);
--neek-avatar-ring: var(--neek-surface);
--neek-status-online: var(--neek-emerald-500);
--neek-status-away: var(--neek-amber-400);
--neek-status-busy: var(--neek-red-500);
--neek-status-offline: var(--neek-neutral-400);
--neek-mark-radius: var(--neek-radius-sm);
--neek-mark-bg: var(--neek-button-bg);
--neek-mark-text: var(--neek-button-text);
--neek-logo-radius: var(--neek-radius-sm);
--neek-logo-angle: to top right;
--neek-logo-from: #ff00d7;
--neek-logo-via: #ff368d;
--neek-logo-to: #ff5763;
--neek-logo-bg: linear-gradient(var(--neek-logo-angle), var(--neek-logo-from), var(--neek-logo-via), var(--neek-logo-to));
--neek-logo-bg-blue: linear-gradient(to top right, #5b3cff, #2f6bff, #1e9bff);
--neek-logo-bg-green: linear-gradient(to top right, #00875a, #12a150, #5cb82e);
--neek-logo-text: #fff;
--neek-logo-text-blue: #fff;
--neek-logo-text-green: #fff;
--neek-meta-text: light-dark(var(--neek-neutral-500), var(--neek-neutral-400));
--neek-meta-text-hover: light-dark(var(--neek-neutral-700), var(--neek-neutral-200));
--neek-tag-bg: var(--neek-badge-outline-bg);
--neek-tag-bg-hover: light-dark(var(--neek-neutral-100), var(--neek-neutral-700));
--neek-tag-border: var(--neek-badge-outline-border);
--neek-tag-text: var(--neek-badge-outline-text);
--neek-link-preview-radius: var(--neek-radius-md);
--neek-link-preview-border: var(--neek-border);
--neek-link-preview-border-hover: var(--neek-accent);
--neek-link-preview-description: var(--neek-text-secondary);
--neek-link-preview-domain: light-dark(var(--neek-neutral-400), var(--neek-neutral-500));
--neek-poll-radius: var(--neek-radius-sm);
--neek-poll-border: var(--neek-border);
--neek-poll-bar: light-dark(var(--neek-neutral-100), color-mix(in oklab, var(--neek-neutral-700) 60%, transparent));
--neek-poll-text: light-dark(var(--neek-neutral-700), var(--neek-neutral-300));
--neek-poll-leader-border: color-mix(in oklab, var(--neek-accent) 40%, transparent);
--neek-poll-leader-bar: var(--neek-accent-soft);
--neek-poll-leader-text: var(--neek-text);
--neek-poll-leader-percent: var(--neek-accent);
--neek-play-bg: color-mix(in oklab, var(--neek-neutral-950) 60%, transparent);
--neek-play-bg-hover: color-mix(in oklab, var(--neek-neutral-950) 75%, transparent);
--neek-pill-bg: var(--neek-badge-outline-bg);
--neek-pill-bg-hover: var(--neek-tag-bg-hover);
--neek-pill-border: var(--neek-badge-outline-border);
--neek-pill-text: light-dark(var(--neek-neutral-600), var(--neek-neutral-300));
--neek-pill-active-bg: var(--neek-pill-bg);
--neek-pill-active-border: var(--neek-pill-border);
--neek-pill-active-text: var(--neek-pill-text);
--neek-pill-active-paint: var(--neek-rainbow);
--neek-card-button-hover-bg: var(--neek-card-bg);
--neek-card-button-hover-text: var(--neek-text);
--neek-popover-bg: var(--neek-surface);
--neek-popover-border: var(--neek-badge-outline-border);
--neek-popover-shadow-color: light-dark(color-mix(in oklab, var(--neek-neutral-900) 10%, transparent), color-mix(in oklab, #000000 40%, transparent));
--neek-popover-shadow: 0 10px 15px -3px var(--neek-popover-shadow-color), 0 4px 6px -4px var(--neek-popover-shadow-color);
--neek-popover-item-hover: light-dark(var(--neek-neutral-100), var(--neek-surface-hover));
--neek-modal-backdrop: light-dark(color-mix(in oklab, var(--neek-neutral-950) 40%, transparent), color-mix(in oklab, var(--neek-neutral-950) 60%, transparent));
--neek-modal-backdrop-filter: blur(12px) saturate(140%);
--neek-modal-width: 36rem;
--neek-dialog-backdrop: color-mix(in oklab, var(--neek-neutral-950) 55%, transparent);
--neek-dialog-shadow-color: color-mix(in oklab, var(--neek-neutral-950) 20%, transparent);
--neek-dialog-shadow: 0 20px 25px -5px var(--neek-dialog-shadow-color), 0 8px 10px -6px var(--neek-dialog-shadow-color);
--neek-comment-text: var(--neek-poll-text);
--neek-table-head-text: var(--neek-meta-text);
--neek-table-cell-text: var(--neek-poll-text);
--neek-table-divider: var(--neek-border-subtle);
--neek-audio-bg: light-dark(color-mix(in oklab, var(--neek-neutral-50) 60%, transparent), color-mix(in oklab, var(--neek-neutral-950) 60%, transparent));
--neek-audio-border: var(--neek-border);
--neek-audio-radius: var(--neek-radius-md);
--neek-audio-button-bg: var(--neek-button-bg);
--neek-audio-button-text: var(--neek-button-text);
--neek-audio-button-bg-hover: var(--neek-accent);
--neek-audio-button-text-hover: light-dark(var(--neek-button-text), #ffffff);
--neek-audio-cover-bg: var(--neek-bg-muted);
--neek-audio-cover-border: var(--neek-badge-outline-border);
--neek-audio-cover-icon: light-dark(var(--neek-neutral-400), var(--neek-neutral-500));
--neek-audio-list-border: light-dark(color-mix(in oklab, var(--neek-neutral-200) 70%, transparent), var(--neek-border-subtle));
--neek-audio-list-number: var(--neek-neutral-400);
--neek-social-bg: var(--neek-button-secondary-bg);
--neek-social-border: var(--neek-border);
--neek-social-hover-scale: 1.1;
--neek-admin-nav-width: 16rem;
--neek-admin-page-width: 56rem;
--neek-admin-wide-width: 120rem;
--neek-widget-gap: calc(var(--neek-space-unit) * 5);
--neek-widget-icon: var(--neek-text-muted);
--neek-chart-line: var(--neek-accent);
--neek-chart-bar: color-mix(in oklab, var(--neek-accent) 55%, transparent);
--neek-chart-bar-strong: var(--neek-accent);
--neek-chart-bar-gap: 3px;
--neek-chart-bar-radius: 3px;
--neek-chart-track: var(--neek-surface-hover);
--neek-chart-grid: var(--neek-border-subtle);
--neek-chart-height: calc(var(--neek-space-unit) * 36);
--neek-sparkline-height: calc(var(--neek-space-unit) * 14);
--neek-gauge-size: calc(var(--neek-space-unit) * 24);
}
}
@layer neek.tokens {
:root {
--neek-type-body-font: var(--neek-font-sans);
--neek-type-body-size: var(--neek-text-base);
--neek-type-body-weight: var(--neek-weight-regular);
--neek-type-body-leading: var(--neek-leading-normal);
--neek-type-body-tracking: normal;
--neek-type-body-transform: none;
--neek-type-body-color: var(--neek-text);
--neek-type-body-smoothing: antialiased;
--neek-type-heading-font: var(--neek-font-heading);
--neek-type-heading-weight: var(--neek-weight-semibold);
--neek-type-heading-leading: var(--neek-leading-tight);
--neek-type-heading-tracking: var(--neek-tracking-tight);
--neek-type-heading-transform: var(--neek-type-body-transform);
--neek-type-heading-color: var(--neek-text);
--neek-type-heading-smoothing: var(--neek-type-body-smoothing);
--neek-type-h1-size: var(--neek-text-3xl);
--neek-type-h2-size: var(--neek-text-2xl);
--neek-type-h3-size: var(--neek-text-xl);
--neek-type-h4-size: var(--neek-text-lg);
--neek-type-h5-size: var(--neek-text-base);
--neek-type-h6-size: var(--neek-text-sm);
--neek-flow-space: round(nearest, 1em, var(--neek-grid));
--neek-type-site-title-font: var(--neek-font-heading);
--neek-type-site-title-size: var(--neek-text-2xl);
--neek-type-site-title-weight: var(--neek-weight-semibold);
--neek-type-site-title-leading: var(--neek-text-2xl-leading);
--neek-type-site-title-tracking: var(--neek-tracking-tight);
--neek-type-site-title-transform: var(--neek-type-body-transform);
--neek-type-site-title-color: light-dark(var(--neek-neutral-900), var(--neek-neutral-50));
--neek-type-site-title-smoothing: var(--neek-type-body-smoothing);
--neek-type-site-description-font: var(--neek-type-body-font);
--neek-type-site-description-size: var(--neek-text-sm);
--neek-type-site-description-weight: var(--neek-weight-regular);
--neek-type-site-description-leading: var(--neek-leading-relaxed);
--neek-type-site-description-tracking: normal;
--neek-type-site-description-transform: var(--neek-type-body-transform);
--neek-type-site-description-color: var(--neek-text-secondary);
--neek-type-site-description-smoothing: var(--neek-type-body-smoothing);
--neek-type-card-header-font: var(--neek-type-body-font);
--neek-type-card-header-size: var(--neek-text-sm);
--neek-type-card-header-weight: var(--neek-weight-semibold);
--neek-type-card-header-leading: var(--neek-text-sm-leading);
--neek-type-card-header-tracking: normal;
--neek-type-card-header-transform: var(--neek-type-body-transform);
--neek-type-card-header-color: var(--neek-text);
--neek-type-card-header-smoothing: var(--neek-type-body-smoothing);
--neek-type-card-title-font: var(--neek-font-heading);
--neek-type-card-title-size: var(--neek-text-lg);
--neek-type-card-title-weight: var(--neek-weight-semibold);
--neek-type-card-title-leading: var(--neek-leading-snug);
--neek-type-card-title-tracking: var(--neek-tracking-tight);
--neek-type-card-title-transform: var(--neek-type-body-transform);
--neek-type-card-title-color: var(--neek-text);
--neek-type-card-title-smoothing: var(--neek-type-body-smoothing);
--neek-type-card-body-font: var(--neek-type-body-font);
--neek-type-card-body-size: var(--neek-text-sm);
--neek-type-card-body-weight: var(--neek-type-body-weight);
--neek-type-card-body-leading: var(--neek-leading-relaxed);
--neek-type-card-body-tracking: normal;
--neek-type-card-body-transform: var(--neek-type-body-transform);
--neek-type-card-body-color: var(--neek-text-secondary);
--neek-type-card-body-smoothing: var(--neek-type-body-smoothing);
--neek-type-card-sticky-header-font: var(--neek-type-card-header-font);
--neek-type-card-sticky-header-size: var(--neek-type-card-header-size);
--neek-type-card-sticky-header-weight: var(--neek-type-card-header-weight);
--neek-type-card-sticky-header-leading: var(--neek-type-card-header-leading);
--neek-type-card-sticky-header-tracking: var(--neek-type-card-header-tracking);
--neek-type-card-sticky-header-transform: var(--neek-type-card-header-transform);
--neek-type-card-sticky-header-color: var(--neek-type-card-header-color);
--neek-type-card-sticky-header-smoothing: var(--neek-type-card-header-smoothing);
--neek-type-card-sticky-title-font: var(--neek-type-card-title-font);
--neek-type-card-sticky-title-size: var(--neek-type-card-title-size);
--neek-type-card-sticky-title-weight: var(--neek-type-card-title-weight);
--neek-type-card-sticky-title-leading: var(--neek-type-card-title-leading);
--neek-type-card-sticky-title-tracking: var(--neek-type-card-title-tracking);
--neek-type-card-sticky-title-transform: var(--neek-type-card-title-transform);
--neek-type-card-sticky-title-color: var(--neek-type-card-title-color);
--neek-type-card-sticky-title-smoothing: var(--neek-type-card-title-smoothing);
--neek-type-card-sticky-body-font: var(--neek-type-card-body-font);
--neek-type-card-sticky-body-size: var(--neek-type-card-body-size);
--neek-type-card-sticky-body-weight: var(--neek-type-card-body-weight);
--neek-type-card-sticky-body-leading: var(--neek-type-card-body-leading);
--neek-type-card-sticky-body-tracking: var(--neek-type-card-body-tracking);
--neek-type-card-sticky-body-transform: var(--neek-type-card-body-transform);
--neek-type-card-sticky-body-color: var(--neek-type-card-body-color);
--neek-type-card-sticky-body-smoothing: var(--neek-type-card-body-smoothing);
--neek-type-filter-font: var(--neek-type-body-font);
--neek-type-filter-size: var(--neek-text-sm);
--neek-type-filter-weight: var(--neek-weight-medium);
--neek-type-filter-leading: var(--neek-leading-tight);
--neek-type-filter-tracking: normal;
--neek-type-filter-transform: var(--neek-type-body-transform);
--neek-type-filter-color: var(--neek-text);
--neek-type-filter-smoothing: var(--neek-type-body-smoothing);
--neek-type-title-font: var(--neek-font-heading);
--neek-type-title-size: var(--neek-text-3xl);
--neek-type-title-weight: var(--neek-weight-semibold);
--neek-type-title-leading: var(--neek-leading-tight);
--neek-type-title-tracking: var(--neek-tracking-tight);
--neek-type-title-transform: var(--neek-type-body-transform);
--neek-type-title-color: light-dark(var(--neek-neutral-900), var(--neek-neutral-50));
--neek-type-title-smoothing: var(--neek-type-body-smoothing);
--neek-type-subtitle-font: var(--neek-type-body-font);
--neek-type-subtitle-size: var(--neek-text-base);
--neek-type-subtitle-weight: var(--neek-type-body-weight);
--neek-type-subtitle-leading: var(--neek-leading-relaxed);
--neek-type-subtitle-tracking: normal;
--neek-type-subtitle-transform: var(--neek-type-body-transform);
--neek-type-subtitle-color: var(--neek-text-secondary);
--neek-type-subtitle-smoothing: var(--neek-type-body-smoothing);
--neek-type-footer-font: var(--neek-type-body-font);
--neek-type-footer-size: var(--neek-text-sm);
--neek-type-footer-weight: var(--neek-type-body-weight);
--neek-type-footer-leading: var(--neek-leading-normal);
--neek-type-footer-tracking: normal;
--neek-type-footer-transform: var(--neek-type-body-transform);
--neek-type-footer-color: var(--neek-text-secondary);
--neek-type-footer-smoothing: var(--neek-type-body-smoothing);
--neek-type-nav-font: var(--neek-type-body-font);
--neek-type-nav-size: var(--neek-text-sm);
--neek-type-nav-weight: var(--neek-weight-medium);
--neek-type-nav-leading: var(--neek-leading-normal);
--neek-type-nav-tracking: normal;
--neek-type-nav-transform: var(--neek-type-body-transform);
--neek-type-nav-color: var(--neek-text-secondary);
--neek-type-nav-smoothing: var(--neek-type-body-smoothing);
}
}
@layer neek.base {
html {
font-family: var(--neek-font-sans);
background-color: var(--neek-bg);
-webkit-tap-highlight-color: transparent;
scrollbar-gutter: stable;
}
@media (width < 52rem) and (pointer: coarse) {
html,
body {
overscroll-behavior-y: none;
}
}
html::before,
body::before,
html::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100lvh;
z-index: -2;
pointer-events: none;
}
html::before {
--neek-glow-l: var(--neek-page-glow-grain-light);
--neek-glow-d: var(--neek-page-glow-grain-dark);
background-color: var(--neek-page-glow);
mask-image:
radial-gradient(var(--neek-page-glow-shape), #000, transparent 80%),
var(--neek-page-glow-grain-image),
radial-gradient(
var(--neek-page-glow-shape),
light-dark(rgb(0 0 0 / calc(var(--neek-glow-l) * 16)), rgb(0 0 0 / calc(var(--neek-glow-d) * 16))) 5%,
light-dark(rgb(0 0 0 / calc(var(--neek-glow-l) * 8)), rgb(0 0 0 / calc(var(--neek-glow-d) * 8))) 10%,
light-dark(rgb(0 0 0 / calc(var(--neek-glow-l) * 4)), rgb(0 0 0 / calc(var(--neek-glow-d) * 4))) 20%,
light-dark(rgb(0 0 0 / calc(var(--neek-glow-l) * 2)), rgb(0 0 0 / calc(var(--neek-glow-d) * 2))) 40%,
light-dark(rgb(0 0 0 / var(--neek-glow-l)), rgb(0 0 0 / var(--neek-glow-d))) 80%,
transparent
);
mask-repeat: no-repeat, repeat, no-repeat;
mask-composite: add, intersect;
}
body::before {
background-image: var(--neek-bg-image);
background-size: var(--neek-bg-size);
background-repeat: var(--neek-bg-repeat);
background-position: var(--neek-bg-position);
}
html::after {
background-image: var(--neek-vignette);
}
body {
font-family: var(--neek-type-body-font);
font-size: var(--neek-type-body-size);
font-weight: var(--neek-type-body-weight);
line-height: var(--neek-type-body-leading);
letter-spacing: var(--neek-type-body-tracking);
text-transform: var(--neek-type-body-transform);
color: var(--neek-type-body-color);
-webkit-font-smoothing: var(--neek-type-body-smoothing);
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
:focus-visible {
outline: 2px solid var(--neek-focus-ring);
outline-offset: 2px;
}
::selection {
background-color: var(--neek-selection-bg);
color: var(--neek-selection-text);
}
summary {
cursor: pointer;
}
dialog:not([class]) {
margin: auto;
width: min(100% - 2 * var(--neek-space-md), var(--neek-container-sm));
padding: var(--neek-card-padding);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
color: var(--neek-text);
box-shadow: var(--neek-shadow-lg);
}
dialog:not([class])::backdrop {
background-color: color-mix(in oklab, var(--neek-neutral-950) 55%, transparent);
backdrop-filter: blur(4px);
}
}
@layer neek.base {
:is(p, ul, ol, dl, blockquote, pre, table, figure, hr, details, address):not([class]) {
margin-block: 0 var(--neek-flow-space);
}
:is(p, ul, ol, dl, blockquote, pre, table, figure, hr, details, address, h1, h2, h3, h4, h5, h6):not([class]):last-child {
margin-block-end: 0;
}
:is(h1, h2, h3, h4, h5, h6):not([class]) {
margin-block: round(nearest, 1.5em, var(--neek-grid)) round(nearest, 0.5em, var(--neek-grid));
font-family: var(--neek-type-heading-font);
font-weight: var(--neek-type-heading-weight);
line-height: var(--neek-type-heading-leading);
letter-spacing: var(--neek-type-heading-tracking);
text-transform: var(--neek-type-heading-transform);
color: var(--neek-type-heading-color);
-webkit-font-smoothing: var(--neek-type-heading-smoothing);
text-wrap: balance;
}
:is(h1, h2, h3, h4, h5, h6):not([class]):first-child {
margin-block-start: 0;
}
h1:not([class]) { font-size: var(--neek-type-h1-size); }
h2:not([class]) { font-size: var(--neek-type-h2-size); }
h3:not([class]) { font-size: var(--neek-type-h3-size); }
h4:not([class]) { font-size: var(--neek-type-h4-size); }
h5:not([class]) { font-size: var(--neek-type-h5-size); }
h6:not([class]) { font-size: var(--neek-type-h6-size); }
p:not([class]) {
text-wrap: pretty;
}
a:not([class]) {
color: var(--neek-accent);
text-decoration-line: none;
background-image: var(--neek-rainbow-text), var(--neek-rainbow-text);
background-size: 200% 100%, 200% var(--neek-link-underline);
background-position: 0 0, 0 100%;
background-repeat: repeat-x;
padding-block-end: 1px;
transition: color var(--neek-duration) var(--neek-ease), background-size var(--neek-duration-slow) var(--neek-ease);
animation: neek-link-shift 6s linear infinite paused;
}
a:not([class]):is(:hover, :focus-visible) {
color: var(--neek-accent-hover);
background-size: 200% 100%, 200% var(--neek-link-underline-hover);
animation-play-state: running;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
a:not([class]) {
-webkit-background-clip: text, border-box;
background-clip: text, border-box;
color: var(--neek-link-color);
}
a:not([class]):is(:hover, :focus-visible) {
color: var(--neek-link-color-hover);
}
}
@keyframes neek-link-shift {
to {
background-position: 200% 0, 200% 100%;
}
}
@media (prefers-reduced-motion: reduce) {
a:not([class]) {
animation: none;
}
}
:is(strong, b):not([class]) {
font-weight: var(--neek-weight-semibold);
color: var(--neek-text);
}
small:not([class]) {
font-size: var(--neek-text-sm);
}
mark:not([class]) {
padding-inline: 0.15em;
border-radius: var(--neek-radius-sm);
background-color: var(--neek-accent-soft);
color: inherit;
}
abbr[title]:not([class]) {
text-decoration: underline dotted;
cursor: help;
}
:is(code, kbd, samp):not([class]) {
font-family: var(--neek-font-mono);
font-size: round(down, 0.875em, var(--neek-grid));
}
code:not([class]) {
padding: 0.15em 0.35em;
border-radius: var(--neek-radius-sm);
background-color: var(--neek-bg-muted);
}
kbd:not([class]) {
padding: 0.1em 0.4em;
border: 1px solid var(--neek-border-strong);
border-bottom-width: 2px;
border-radius: var(--neek-radius-sm);
background-color: var(--neek-surface);
}
pre:not([class]) {
overflow-x: auto;
padding: var(--neek-space-md);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-sm);
line-height: var(--neek-leading-relaxed);
}
pre:not([class]) code {
padding: 0;
background: none;
font-size: inherit;
}
:is(ul, ol):not([class]) {
padding-inline-start: 1.5em;
}
ul:not([class]) {
list-style: disc;
}
ol:not([class]) {
list-style: decimal;
}
:is(ul, ol):not([class]) > li + li {
margin-block-start: round(nearest, 0.35em, var(--neek-grid));
}
:is(ul, ol):not([class]) > li::marker {
color: var(--neek-text-muted);
}
:is(ul, ol):not([class]) :is(ul, ol):not([class]) {
margin-block: round(nearest, 0.35em, var(--neek-grid)) 0;
}
dl:not([class]) > dt {
font-weight: var(--neek-weight-semibold);
color: var(--neek-text);
}
dl:not([class]) > dd {
margin-block-end: round(nearest, 0.5em, var(--neek-grid));
margin-inline-start: round(nearest, 1.5em, var(--neek-grid));
}
blockquote:not([class]) {
padding-inline-start: var(--neek-space-md);
border-inline-start: 3px solid var(--neek-border-strong);
color: var(--neek-text-secondary);
font-style: italic;
}
hr:not([class]) {
border: 0;
border-block-start: 1px solid var(--neek-border);
margin-block: calc(var(--neek-flow-space) * 2);
}
table:not([class]) {
width: 100%;
border-collapse: collapse;
font-size: var(--neek-text-sm);
font-variant-numeric: tabular-nums;
}
table:not([class]) caption {
margin-block-end: round(nearest, 0.5em, var(--neek-grid));
color: var(--neek-text-secondary);
text-align: start;
}
table:not([class]) :is(th, td) {
padding: 0.6em 0.75em;
border-block-end: 1px solid var(--neek-border);
text-align: start;
vertical-align: top;
}
table:not([class]) th {
font-weight: var(--neek-weight-semibold);
color: var(--neek-text);
}
table:not([class]) thead th {
border-block-end-color: var(--neek-border-strong);
font-size: var(--neek-text-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--neek-text-secondary);
}
}
@layer neek.base {
:where(.neek-button, .neek-compose-fab, :is(button, input:where([type='submit'], [type='button'], [type='reset'])):not([class])) {
--neek-button-brighten-now: var(--neek-button-brighten);
--neek-button-lift-now: 0%;
--neek-button-from: var(--neek-button-color-from, var(--neek-button-color));
--neek-button-to: var(--neek-button-color-to, color-mix(in oklab, var(--neek-button-color), #ffffff var(--neek-button-brighten-now)));
--neek-button-via: var(--neek-button-color-via, color-mix(in oklab, var(--neek-button-from), var(--neek-button-to)));
--neek-button-fill: linear-gradient(var(--neek-button-angle),
color-mix(in oklab, var(--neek-button-from), #ffffff var(--neek-button-lift-now)),
color-mix(in oklab, var(--neek-button-via), #ffffff var(--neek-button-lift-now)),
color-mix(in oklab, var(--neek-button-to), #ffffff var(--neek-button-lift-now)));
}
:where(.neek-button:not([data-color]):is(:not([data-variant]), [data-variant='primary']), .neek-compose-fab, .neek-timeline-new > button, :is(button:not([type]), button[type='submit'], input[type='submit']):not([class])) {
--neek-button-color-from: var(--neek-button-primary-from);
--neek-button-color-via: var(--neek-button-primary-via);
--neek-button-color-to: var(--neek-button-primary-to);
}
}
@layer neek.base {
label:not([class]) {
display: block;
margin-block-end: 0.5rem;
font-size: var(--neek-text-sm);
font-weight: var(--neek-weight-medium);
color: var(--neek-text);
}
:is(input:not([type]), input:where([type='text'], [type='email'], [type='password'], [type='search'], [type='url'], [type='tel'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']), select, textarea):not([class]) {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
border: var(--neek-border-width) solid var(--neek-border-strong);
border-radius: var(--neek-input-radius);
background-color: var(--neek-surface-input);
color: var(--neek-text);
font-family: var(--neek-input-font);
font-size: var(--neek-text-sm);
line-height: round(nearest, 1.5em, var(--neek-grid));
transition: border-color var(--neek-duration) var(--neek-ease), box-shadow var(--neek-duration) var(--neek-ease);
}
:is(input, textarea):not([class])::placeholder {
color: var(--neek-text-muted);
}
:is(input, textarea):not([class]):not([type='checkbox'], [type='radio'], [type='range'], [type='file'], [type='submit'], [type='button'], [type='reset']):focus,
select:not([class]):focus {
outline: none;
border-color: transparent;
background:
linear-gradient(var(--neek-surface-input), var(--neek-surface-input)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-size: 100% 100%, 200% 100%;
box-shadow: var(--neek-input-focus-glow);
animation: neek-focus-rainbow 3s linear infinite;
}
select:not([class]):not([multiple]):focus {
background:
var(--neek-select-chevron),
linear-gradient(var(--neek-surface-input), var(--neek-surface-input)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-position:
right var(--neek-select-chevron-end) center,
right calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size)) center,
0 0,
0 0;
background-size: var(--neek-select-chevron-size) var(--neek-select-chevron-size), var(--neek-select-chevron-size) var(--neek-select-chevron-size), 100% 100%, 200% 100%;
background-repeat: no-repeat, no-repeat, repeat, repeat;
animation-name: neek-focus-rainbow-select;
}
@media (prefers-reduced-motion: reduce) {
:is(input, select, textarea):not([class]):focus {
animation: none;
}
}
:is(input, select, textarea):not([class]):disabled {
opacity: 0.6;
cursor: not-allowed;
}
:is(input, select, textarea):not([class]):user-invalid {
border-color: var(--neek-danger);
}
select:not([class]):not([multiple]) {
--neek-select-chevron-end: calc(0.5rem + (1lh - var(--neek-select-chevron-size)) / 2);
appearance: none;
padding-inline-end: calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size) * 2 + 0.5rem);
background-image: var(--neek-select-chevron);
background-position:
right var(--neek-select-chevron-end) center,
right calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size)) center;
background-size: var(--neek-select-chevron-size) var(--neek-select-chevron-size);
background-repeat: no-repeat;
}
textarea:not([class]) {
min-height: 6rem;
}
input:where([type='checkbox'], [type='radio']):not([class]) {
width: 1rem;
height: 1rem;
margin-inline-end: 0.5rem;
vertical-align: -0.15em;
accent-color: var(--neek-accent);
}
input[type='range']:not([class]) {
width: 100%;
accent-color: var(--neek-accent);
}
progress:not([class]),
meter:not([class]) {
width: 100%;
accent-color: var(--neek-accent);
}
:is(button, input:where([type='submit'], [type='button'], [type='reset'])):not([class]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border: 1px solid transparent;
border-radius: var(--neek-button-radius);
background-color: var(--neek-button-color);
background-image: var(--neek-button-fill);
color: var(--neek-button-color-text, #ffffff);
font-size: var(--neek-text-sm);
font-weight: var(--neek-button-weight);
line-height: round(nearest, 1.25em, var(--neek-grid));
box-shadow: var(--neek-shadow-sm);
cursor: pointer;
transition: opacity var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
}
@supports (color: oklch(from red l c h)) {
:is(button, input:where([type='submit'], [type='button'], [type='reset'])):not([class]) {
color: var(--neek-button-color-text, oklch(from var(--neek-button-color) clamp(0, (var(--neek-button-dark-text-from) - l) * 1000, 1) 0 0));
}
}
:is(button, input:where([type='submit'], [type='button'], [type='reset'])):not([class]):hover {
opacity: 0.88;
}
:is(button, input:where([type='button'], [type='reset'])):not([class]):where([type='button'], [type='reset']) {
--neek-button-color: var(--neek-surface);
--neek-button-brighten: 8%;
--neek-button-angle: to bottom;
border-color: var(--neek-border);
color: var(--neek-text);
}
:is(button, input):not([class]):disabled {
opacity: 0.5;
cursor: not-allowed;
}
input[type='file']:not([class]) {
font-size: var(--neek-text-sm);
color: var(--neek-text-secondary);
}
input[type='file']:not([class])::file-selector-button {
margin-inline-end: 0.75rem;
padding: 0.5rem 0.875rem;
border: 1px solid var(--neek-border);
border-radius: var(--neek-button-radius);
background-color: var(--neek-surface);
color: var(--neek-text);
font: inherit;
font-weight: var(--neek-button-weight);
cursor: pointer;
}
fieldset:not([class]) {
margin-block: 0 var(--neek-flow-space);
padding: var(--neek-space-md);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
}
legend:not([class]) {
padding-inline: 0.375rem;
font-size: var(--neek-text-sm);
font-weight: var(--neek-weight-semibold);
}
:is(input, select, textarea):not([class]) + label:not([class]) {
margin-block-start: var(--neek-space-md);
}
}
@layer neek.base {
:is(img, video, iframe):not([class]) {
border-radius: var(--neek-media-radius);
}
:is(img, video):not([class]) {
max-width: 100%;
height: auto;
}
iframe:not([class]) {
width: 100%;
border: 0;
}
audio[controls]:not([class]) {
width: 100%;
}
figure:not([class]) > :is(img, video) {
width: 100%;
}
figcaption:not([class]) {
margin-block-start: 0.5rem;
font-size: var(--neek-text-sm);
color: var(--neek-text-muted);
text-align: center;
}
}
@layer neek.base {
:is(.neek-card, .neek-stream-card, .neek-teaser, .neek-timeline, .neek-settings-section):not(:is(.neek-card, .neek-stream-card, .neek-timeline, .neek-replies, .neek-reply-thread) *) {
background-image: var(--neek-panel-image);
}
.neek-app-post > .neek-stream-item > .neek-stream-card {
--neek-app-post-card-bg: var(--neek-card-bg);
& > * {
--neek-card-bg: var(--neek-app-post-card-bg);
}
}
.neek-app-post:not(:has(> .neek-app-post-replies:empty)) > .neek-stream-item > .neek-stream-card {
--neek-card-bg: transparent;
--neek-app-post-card-bg: var(--neek-surface);
background-image: linear-gradient(var(--neek-surface) calc(100% - 10rem), transparent);
}
.neek-app-post:has(> .neek-stream-item):has(> .neek-app-post-replies:empty) {
background-image: none;
& > .neek-stream-item > .neek-stream-card,
& > .neek-app-post-reply {
background-image: var(--neek-panel-image);
}
}
}
@layer neek.components {
.neek-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 2.5) calc(var(--neek-space-unit) * 4);
border-radius: var(--neek-button-radius);
background-color: var(--neek-button-color);
background-image: var(--neek-button-fill);
color: var(--neek-button-color-text, #ffffff);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-button-weight);
text-decoration-line: none;
box-shadow: var(--neek-button-shadow);
cursor: pointer;
transition-property: color, background-color, border-color, box-shadow, opacity;
transition-duration: var(--neek-duration);
transition-timing-function: var(--neek-ease);
@supports (color: oklch(from red l c h)) {
color: var(--neek-button-color-text, oklch(from var(--neek-button-color) clamp(0, (var(--neek-button-dark-text-from) - l) * 1000, 1) 0 0));
}
&:hover {
--neek-button-brighten-now: var(--neek-button-brighten-hover);
--neek-button-lift-now: var(--neek-button-lift-hover);
}
&:focus {
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--neek-button-ring-offset), 0 0 0 4px var(--neek-button-ring), var(--neek-button-shadow);
}
&:disabled {
opacity: 0.5;
}
}
.neek-button[data-variant='secondary'] {
--neek-button-color: var(--neek-button-secondary-bg);
--neek-button-color-text: var(--neek-button-secondary-text);
--neek-button-brighten: var(--neek-button-secondary-brighten);
--neek-button-brighten-hover: var(--neek-button-secondary-brighten-hover);
--neek-button-angle: to bottom;
--neek-button-lift-hover: 0%;
border: 1px solid var(--neek-button-secondary-border);
&:hover {
color: var(--neek-button-secondary-text-hover);
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--neek-button-secondary-ring-offset), 0 0 0 4px var(--neek-button-ring), var(--neek-button-shadow);
}
}
.neek-button[data-variant='danger'] {
--neek-button-color: var(--neek-button-danger-bg);
--neek-button-color-text: var(--neek-button-danger-text);
--neek-button-brighten: var(--neek-button-danger-brighten);
--neek-button-brighten-hover: var(--neek-button-danger-brighten-hover);
&:active {
--neek-button-color: var(--neek-button-danger-bg-active);
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--neek-button-ring-offset), 0 0 0 4px var(--neek-button-danger-ring), var(--neek-button-shadow);
}
}
.neek-button[data-variant='link'] {
padding: 0;
border-radius: var(--neek-radius-sm);
background: none;
color: var(--neek-link-color);
text-decoration-line: underline;
text-decoration-color: var(--neek-link-underline);
text-underline-offset: 0.25em;
box-shadow: none;
&:hover {
background: none;
color: var(--neek-link-color-hover);
text-decoration-color: var(--neek-link-underline-hover);
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--neek-button-ring-offset), 0 0 0 4px var(--neek-button-ring);
}
}
.neek-button[data-color='red'] { --neek-button-color: var(--neek-button-red); }
.neek-button[data-color='orange'] { --neek-button-color: var(--neek-button-orange); }
.neek-button[data-color='yellow'] {
--neek-button-color: var(--neek-button-yellow);
--neek-button-color-text: var(--neek-button-yellow-text);
}
.neek-button[data-color='green'] { --neek-button-color: var(--neek-button-green); }
.neek-button[data-color='cyan'] { --neek-button-color: var(--neek-button-cyan); }
.neek-button[data-color='blue'] { --neek-button-color: var(--neek-button-blue); }
.neek-button[data-color='violet'] { --neek-button-color: var(--neek-button-violet); }
.neek-button[data-color='pink'] {
--neek-button-color: var(--neek-button-pink);
--neek-button-color-via: var(--neek-button-pink-via);
--neek-button-color-to: var(--neek-button-pink-to);
}
.neek-button[data-size='sm'] {
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3.5);
}
.neek-button:disabled:not([data-variant='link']) {
--neek-button-color-from: var(--neek-button-disabled-bg);
--neek-button-color-via: var(--neek-button-disabled-bg);
--neek-button-color-to: var(--neek-button-disabled-bg);
--neek-button-lift-now: 0%;
opacity: var(--neek-button-disabled-opacity);
color: var(--neek-button-disabled-text, var(--neek-button-color-text, #ffffff));
cursor: not-allowed;
@supports (color: oklch(from red l c h)) {
color: var(--neek-button-disabled-text, var(--neek-button-color-text, oklch(from var(--neek-button-color) clamp(0, (var(--neek-button-dark-text-from) - l) * 1000, 1) 0 0)));
}
}
}
@layer neek.components {
.neek-input {
display: block;
width: 100%;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-input-radius);
background-color: var(--neek-input-bg);
color: var(--neek-input-text);
font-family: var(--neek-input-font);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&::placeholder {
color: var(--neek-input-placeholder);
}
&:focus {
outline: none;
border-color: transparent;
background:
linear-gradient(var(--neek-input-bg), var(--neek-input-bg)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-size: 100% 100%, 200% 100%;
box-shadow: var(--neek-input-focus-glow);
animation: neek-focus-rainbow 3s linear infinite;
}
}
select.neek-input:not([multiple]) {
--neek-select-chevron-end: calc(var(--neek-space-unit) * 2 + (1lh - var(--neek-select-chevron-size)) / 2);
appearance: none;
padding-inline-end: calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size) * 2 + var(--neek-space-unit) * 2);
background-image: var(--neek-select-chevron);
background-position:
right var(--neek-select-chevron-end) center,
right calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size)) center;
background-size: var(--neek-select-chevron-size) var(--neek-select-chevron-size);
background-repeat: no-repeat;
&:focus {
background:
var(--neek-select-chevron),
linear-gradient(var(--neek-input-bg), var(--neek-input-bg)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-position:
right var(--neek-select-chevron-end) center,
right calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size)) center,
0 0,
0 0;
background-size: var(--neek-select-chevron-size) var(--neek-select-chevron-size), var(--neek-select-chevron-size) var(--neek-select-chevron-size), 100% 100%, 200% 100%;
background-repeat: no-repeat, no-repeat, repeat, repeat;
animation-name: neek-focus-rainbow-select;
}
}
.neek-input:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.neek-input[type='file'] {
padding: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-text-secondary);
cursor: pointer;
&::file-selector-button {
margin-inline-end: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
border: 0;
border-radius: var(--neek-radius-sm);
background-color: var(--neek-surface-hover);
color: var(--neek-text);
font: inherit;
font-weight: var(--neek-weight-medium);
cursor: pointer;
}
&:hover::file-selector-button {
background-color: var(--neek-bg-muted);
}
}
.neek-input-group {
display: flex;
align-items: center;
width: 100%;
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-input-radius);
background-color: var(--neek-input-bg);
&:focus-within {
border-color: transparent;
background:
linear-gradient(var(--neek-input-bg), var(--neek-input-bg)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-size: 100% 100%, 200% 100%;
box-shadow: var(--neek-input-focus-glow);
animation: neek-focus-rainbow 3s linear infinite;
}
&:has(.neek-input-group-input:disabled) {
cursor: not-allowed;
opacity: 0.6;
}
}
.neek-input-addon {
flex: none;
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
white-space: nowrap;
user-select: none;
&:first-child {
padding-inline-start: calc(var(--neek-space-unit) * 3);
}
&:last-child {
padding-inline-end: calc(var(--neek-space-unit) * 3);
}
}
.neek-input-group-input {
flex: 1;
min-width: 0;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: 0;
background-color: transparent;
color: var(--neek-input-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&::placeholder {
color: var(--neek-input-placeholder);
}
&:focus {
outline: none;
}
&:disabled {
cursor: not-allowed;
}
.neek-input-addon + & {
padding-inline-start: calc(var(--neek-space-unit) * 0.5);
}
&:has(+ .neek-input-addon) {
padding-inline-end: calc(var(--neek-space-unit) * 0.5);
}
}
.neek-check {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
accent-color: var(--neek-check-color);
}
.neek-label {
display: block;
color: var(--neek-label-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-error {
color: var(--neek-error-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
@keyframes neek-focus-rainbow {
to {
background-position: 0 0, 200% 0;
}
}
@keyframes neek-focus-rainbow-select {
to {
background-position:
right var(--neek-select-chevron-end) center,
right calc(var(--neek-select-chevron-end) + var(--neek-select-chevron-size)) center,
0 0,
200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.neek-input:focus,
.neek-input-group:focus-within,
.neek-inline-field:focus-within {
animation: none;
}
}
}
@layer neek.components {
.neek-badge {
display: inline-flex;
align-items: center;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2.5);
border-radius: var(--neek-badge-radius);
background-color: var(--neek-badge-bg);
color: var(--neek-badge-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-badge[data-variant='success'] {
background-color: var(--neek-badge-success-bg);
color: var(--neek-badge-success-text);
}
.neek-badge[data-variant='danger'] {
background-color: var(--neek-badge-danger-bg);
color: var(--neek-badge-danger-text);
}
.neek-badge[data-variant='warning'] {
background-color: var(--neek-badge-warning-bg);
color: var(--neek-badge-warning-text);
}
.neek-badge[data-variant='outline'] {
border: 1px solid var(--neek-badge-outline-border);
background-color: var(--neek-badge-outline-bg);
color: var(--neek-badge-outline-text);
}
}
@layer neek.components {
.neek-alert {
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4);
border: var(--neek-border-width) solid var(--neek-alert-border);
border-radius: var(--neek-alert-radius);
background-color: var(--neek-alert-bg);
color: var(--neek-alert-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-alert[data-variant='error'] {
border-color: var(--neek-alert-error-border);
background-color: var(--neek-alert-error-bg);
color: var(--neek-alert-error-text);
}
.neek-alert[data-variant='info'] {
border-color: var(--neek-alert-info-border);
background-color: var(--neek-alert-info-bg);
color: var(--neek-alert-info-text);
}
.neek-alert[data-variant='warning'] {
border-color: var(--neek-warning-border);
background-color: var(--neek-warning-soft);
color: var(--neek-warning-text);
}
.neek-alert-title {
font-weight: var(--neek-weight-semibold);
}
.neek-alert-actions {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 2);
margin-block-start: calc(var(--neek-space-unit) * 3);
}
}
@layer neek.components {
.neek-card {
padding: var(--neek-card-padding);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
backdrop-filter: var(--neek-card-backdrop);
@media (width >= 40rem) {
padding: var(--neek-card-padding-wide);
}
}
@media (width < 40rem) {
:is(.neek-card, .neek-settings-section, .neek-projects-list, .neek-projects-empty[data-first], .neek-table, .neek-connection):not(:is(.neek-card, .neek-settings-section, .neek-table, .neek-connection, .neek-timeline, .neek-stream-card, .neek-modal, .neek-dialog-panel, .neek-app-aside) *) {
margin-inline: calc(var(--neek-panel-bleed) * -1);
border-inline-width: 0;
border-radius: 0;
box-shadow: none;
}
.neek-timeline > :is(.neek-card, .neek-table) {
border-inline-width: 0;
border-radius: 0;
box-shadow: none;
}
}
}
@layer neek.components {
.neek-avatar {
position: relative;
display: inline-grid;
flex-shrink: 0;
block-size: fit-content;
}
.neek-avatar-frame {
display: grid;
flex-shrink: 0;
place-items: center;
width: var(--neek-avatar-size, calc(var(--neek-space-unit) * 8));
height: var(--neek-avatar-size, calc(var(--neek-space-unit) * 8));
overflow: hidden;
border-radius: var(--neek-avatar-radius);
& > .neek-avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.neek-avatar-frame[data-fallback] {
background-color: var(--neek-avatar-fallback-bg);
background-image: linear-gradient(var(--neek-avatar-fallback-bg), color-mix(in oklab, var(--neek-avatar-fallback-bg), #ffffff var(--neek-avatar-fallback-brighten)));
color: var(--neek-avatar-fallback-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-avatar-status {
position: absolute;
right: 0;
bottom: 0;
display: block;
width: var(--neek-avatar-status-size, calc(var(--neek-space-unit) * 2.5));
height: var(--neek-avatar-status-size, calc(var(--neek-space-unit) * 2.5));
border-radius: var(--neek-radius-full);
background-color: var(--neek-status-online);
box-shadow: 0 0 0 2px var(--neek-avatar-ring);
}
.neek-avatar-status[data-status='away'] {
background-color: var(--neek-status-away);
}
.neek-avatar-status[data-status='busy'] {
background-color: var(--neek-status-busy);
}
.neek-avatar-status[data-status='offline'] {
background-color: var(--neek-status-offline);
}
.neek-mark {
display: grid;
flex-shrink: 0;
place-items: center;
width: var(--neek-mark-size, calc(var(--neek-space-unit) * 7));
height: var(--neek-mark-size, calc(var(--neek-space-unit) * 7));
border-radius: var(--neek-mark-radius);
background-color: var(--neek-mark-bg);
color: var(--neek-mark-text);
box-shadow: var(--neek-button-shadow);
& > svg {
width: max(calc(var(--neek-space-unit) * 3), calc(var(--neek-mark-size, calc(var(--neek-space-unit) * 7)) - var(--neek-space-unit) * 3));
height: max(calc(var(--neek-space-unit) * 3), calc(var(--neek-mark-size, calc(var(--neek-space-unit) * 7)) - var(--neek-space-unit) * 3));
}
}
.neek-avatar-picker {
display: inline-flex;
}
.neek-avatar-picker-current {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
border-radius: var(--neek-radius-full);
color: var(--neek-text-secondary);
summary& {
padding: calc(var(--neek-space-unit) * 0.5);
transition: color var(--neek-duration) var(--neek-ease);
&:hover,
.neek-avatar-picker[open] > & {
color: var(--neek-text);
}
&:focus-visible {
outline: 2px solid var(--neek-focus-ring);
outline-offset: 4px;
}
}
}
.neek-avatar-picker-shown {
display: inline-grid;
border-radius: var(--neek-avatar-radius);
box-shadow: var(--neek-gap-ring);
&[hidden] {
display: none;
}
}
.neek-menu > summary > .neek-avatar-picker-arrow {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
transition: rotate var(--neek-duration) var(--neek-ease);
.neek-avatar-picker[open] > summary > & {
rotate: 180deg;
}
}
.neek-menu-panel.neek-avatar-picker-menu {
width: calc(var(--neek-space-unit) * 64);
max-width: calc(100vw - var(--neek-space-unit) * 8);
}
.neek-menu-link.neek-avatar-choice {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
& + & {
margin-block-start: calc(var(--neek-space-unit) * 0.5);
}
& > .neek-avatar {
border-radius: var(--neek-avatar-radius);
transition: box-shadow var(--neek-duration-slow) var(--neek-ease);
}
&[aria-pressed='true'] {
background-color: var(--neek-menu-current-bg);
color: var(--neek-menu-current-text);
& > .neek-avatar {
box-shadow: var(--neek-gap-ring);
}
}
&:focus-visible {
outline: 2px solid var(--neek-focus-ring);
outline-offset: -2px;
}
}
.neek-avatar-choice-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-logo {
position: relative;
display: block;
flex-shrink: 0;
width: var(--neek-logo-size, calc(var(--neek-space-unit) * 8));
height: var(--neek-logo-size, calc(var(--neek-space-unit) * 8));
border-radius: var(--neek-logo-radius);
background-image: var(--neek-logo-bg);
color: var(--neek-logo-text);
& > .neek-logo-mark-art {
position: absolute;
top: calc(100% * 2.5 / 16);
left: calc(100% * 3.5 / 16);
display: block;
width: calc(100% * 9 / 16);
height: calc(100% * 11 / 16);
}
& .neek-logo-mark-pixels {
fill: currentColor;
}
&[data-variant='blue'] {
background-image: var(--neek-logo-bg-blue);
color: var(--neek-logo-text-blue);
}
&[data-variant='green'] {
background-image: var(--neek-logo-bg-green);
color: var(--neek-logo-text-green);
}
}
.neek-wordmark {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
text-decoration-line: none;
}
}
@layer neek.components {
.neek-stream-item {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
width: 100%;
max-width: var(--neek-stream-max-width);
margin-inline: auto;
position: relative;
}
.neek-stream-card {
display: flex;
flex-direction: column;
padding: var(--neek-card-padding);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
backdrop-filter: var(--neek-card-backdrop);
position: relative;
isolation: isolate;
}
.neek-stream-item > .neek-stream-footer {
padding-inline: calc(var(--neek-card-padding) + var(--neek-border-width));
}
.neek-stream-item[data-sticky] > .neek-stream-card {
&::before,
&::after {
content: '';
position: absolute;
inset: calc(var(--neek-border-width) * -1);
border-radius: inherit;
opacity: 0;
transition: opacity var(--neek-card-hover-fade) var(--neek-ease);
pointer-events: none;
}
&::before {
z-index: 1;
padding: var(--neek-border-width);
background: var(--neek-card-hover-border-image);
background-size: 200% 100%;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: neek-rainbow-shift var(--neek-card-hover-cycle) linear infinite paused;
}
&::after {
z-index: -2;
box-shadow: var(--neek-card-hover-glow);
}
&:hover {
&::before {
opacity: 1;
animation-play-state: running;
}
&::after {
opacity: 1;
}
}
}
@media (width < 40rem) {
.neek-stream-item {
width: auto;
max-width: none;
margin-inline: calc(var(--neek-stream-bleed) * -1);
&:not(:has(~ .neek-stream-item)) {
border-block-end: var(--neek-border-width) solid var(--neek-card-border);
}
&:has(> .neek-stream-footer) {
padding-block-end: calc(var(--neek-space-unit) * 6);
}
& > .neek-stream-footer {
padding-inline: var(--neek-card-padding);
}
& + .neek-stream-item {
margin-block-start: calc(var(--neek-stream-gap) * -1);
}
.neek-timeline > & {
margin-inline: 0;
}
}
.neek-stream-card {
border-inline-width: 0;
border-block-end-width: 0;
border-radius: 0;
box-shadow: none;
&::before,
&::after {
display: none;
}
}
}
.neek-stream-card > :not(.neek-stream-item-backdrop, .neek-pattern) + * {
margin-block-start: calc(var(--neek-space-unit) * 4);
}
.neek-stream-card > :not(.neek-stream-item-backdrop, .neek-pattern) + .neek-media[data-flush] {
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-stream-card > .neek-stream-context + .neek-stream-meta {
margin-block-start: calc(var(--neek-space-unit) * 5);
}
.neek-stream-card > .neek-stream-meta {
margin-block-end: 0;
}
.neek-stream-card > .neek-stream-meta + :is(*, .neek-media[data-flush]) {
margin-block-start: var(--neek-card-padding);
}
.neek-stream-card > .neek-stream-meta + .neek-stack > .neek-stack-parts > .neek-stack-part:first-child > :first-child {
margin-block-start: 0;
}
.neek-stream-card > .neek-stream-title + :is(p, .neek-post-body) {
margin-block-start: var(--neek-stream-title-gap);
}
.neek-stream-card > .neek-stream-title + .neek-stack:has(> .neek-stack-parts > .neek-stack-part:first-child > .neek-post-body:first-child) {
margin-block-start: var(--neek-stream-title-gap);
& > .neek-stack-parts > .neek-stack-part:first-child > .neek-post-body:first-child {
margin-block-start: 0;
}
}
.neek-stream-card > .neek-post-body {
color: var(--neek-stream-text);
font-size: var(--neek-text-base);
line-height: var(--neek-stream-text-leading);
}
.neek-stream-card > .neek-stream-tombstone {
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
}
:is(.neek-feed, .neek-replies) > :is(.neek-thread-more, .neek-timeline-empty) {
border: 0;
}
.neek-stream-item-backdrop {
position: absolute;
inset: 0;
z-index: -1;
border-radius: calc(var(--neek-card-radius) - var(--neek-border-width));
background-image: var(--neek-card-bg-image);
background-size: var(--neek-card-bg-size);
background-position: var(--neek-card-bg-position);
background-repeat: var(--neek-card-bg-repeat);
opacity: var(--neek-card-bg-opacity);
mask-image: linear-gradient(#000, transparent var(--neek-card-bg-fade));
pointer-events: none;
}
.neek-stream-item[data-sticky] {
& > .neek-stream-card {
border-color: var(--neek-card-sticky-border);
background-color: var(--neek-card-sticky-bg);
--neek-card-button-hover-bg: var(--neek-card-sticky-bg);
}
& .neek-stream-meta-name {
font-family: var(--neek-type-card-sticky-header-font);
font-size: var(--neek-type-card-sticky-header-size);
line-height: var(--neek-type-card-sticky-header-leading);
font-weight: var(--neek-type-card-sticky-header-weight);
letter-spacing: var(--neek-type-card-sticky-header-tracking);
text-transform: var(--neek-type-card-sticky-header-transform);
color: var(--neek-type-card-sticky-header-color);
}
& .neek-stream-title {
font-family: var(--neek-type-card-sticky-title-font);
font-size: var(--neek-type-card-sticky-title-size);
line-height: var(--neek-type-card-sticky-title-leading);
font-weight: var(--neek-type-card-sticky-title-weight);
letter-spacing: var(--neek-type-card-sticky-title-tracking);
text-transform: var(--neek-type-card-sticky-title-transform);
& > a:not(:hover, :focus-visible) {
color: var(--neek-type-card-sticky-title-color);
}
}
}
@media (prefers-reduced-motion: reduce) {
.neek-stream-title > a,
.neek-stream-item[data-sticky] > .neek-stream-card::before {
animation: none;
}
}
.neek-stream-context {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.08em;
text-transform: uppercase;
& > svg {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
}
.neek-stream-context[data-icon='trending'] > svg {
color: var(--neek-rainbow-orange);
}
.neek-stream-context[data-icon='reacted'] > svg {
color: var(--neek-rainbow-pink);
}
.neek-stream-context[data-icon='boost'] > svg {
color: var(--neek-rainbow-green);
}
.neek-stream-context[data-icon='mention'] > svg {
color: var(--neek-rainbow-blue);
}
.neek-stream-context[data-icon='page'] > svg {
color: var(--neek-accent);
}
.neek-stream-context[data-icon='pinned'] {
color: var(--neek-accent-text);
& > svg {
color: inherit;
}
}
.neek-stream-context[data-icon='hidden'] > svg {
color: var(--neek-rainbow-orange);
}
.neek-stream-item[data-hidden] > .neek-stream-card {
border-style: dashed;
border-color: color-mix(in oklab, var(--neek-rainbow-orange) 45%, var(--neek-card-border));
& > :not(.neek-pattern, .neek-stream-item-backdrop, .neek-stream-context, .neek-stream-footer) {
opacity: 0.7;
}
& .neek-play-cover-image {
filter: grayscale(0.7);
}
}
.neek-stream-meta {
display: flex;
margin-block: var(--neek-space-unit);
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-stream-item-backdrop + .neek-stream-meta {
margin-block-start: 0;
}
.neek-stream-meta-body {
flex: 1;
min-width: 0;
}
.neek-stream-meta-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 calc(var(--neek-space-unit) * 2);
}
.neek-stream-meta-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--neek-type-card-header-font);
font-size: var(--neek-type-card-header-size);
line-height: var(--neek-type-card-header-leading);
font-weight: var(--neek-type-card-header-weight);
letter-spacing: var(--neek-type-card-header-tracking);
text-transform: var(--neek-type-card-header-transform);
color: var(--neek-type-card-header-color);
}
.neek-stream-meta-line > .neek-badge {
flex-shrink: 0;
align-self: center;
}
.neek-stream-meta-edited {
flex-shrink: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-stream-meta-time {
flex-shrink: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-meta-text-hover);
}
}
.neek-stream-meta-handle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-stream-meta-avatar {
display: flex;
flex-shrink: 0;
border-radius: var(--neek-radius-full);
}
.neek-stream-item[data-stream-link] > .neek-stream-card {
cursor: pointer;
}
a.neek-stream-meta-name,
a.neek-stream-meta-handle,
.neek-stream-item[data-stream-link] :is(.neek-stream-meta-name, .neek-stream-meta-handle) {
text-decoration-line: none;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease);
}
.neek-stream-meta :is(a.neek-stream-meta-name, a.neek-stream-meta-handle):hover,
.neek-stream-item[data-stream-link] .neek-stream-meta :is(.neek-stream-meta-name, .neek-stream-meta-handle):hover {
color: var(--neek-accent-text);
}
a.neek-stream-meta-handle {
display: block;
width: fit-content;
max-width: 100%;
}
.neek-stream-meta-follow {
flex-shrink: 0;
}
.neek-stream-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
& > .neek-reactions {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
& > .neek-post-actions {
flex-shrink: 0;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
max-width: none;
margin: 0 0 0 auto;
& > form {
display: flex;
}
}
}
.neek-stream-item:has([data-reactions-picker]:not([hidden]), .neek-menu[open]) {
z-index: 28;
}
.neek-stream-title {
font-family: var(--neek-type-card-title-font);
font-size: var(--neek-type-card-title-size);
line-height: var(--neek-type-card-title-leading);
font-weight: var(--neek-type-card-title-weight);
letter-spacing: var(--neek-type-card-title-tracking);
text-transform: var(--neek-type-card-title-transform);
& > a {
color: var(--neek-type-card-title-color);
text-decoration-line: none;
background-image: var(--neek-rainbow-text);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
transition: color var(--neek-rainbow-hover-fade) var(--neek-ease);
animation: neek-rainbow-shift var(--neek-rainbow-hover-cycle) linear infinite paused;
&:is(:hover, :focus-visible) {
color: transparent;
animation-play-state: running;
}
}
}
.neek-media {
width: 100%;
}
.neek-media-frame {
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-media-radius);
& img {
display: block;
width: 100%;
height: auto;
max-height: var(--neek-media-max-height);
object-fit: var(--neek-media-fit);
transition: scale var(--neek-duration-slow) var(--neek-ease);
}
& a:hover img {
scale: var(--neek-media-hover-scale);
}
}
.neek-media[data-flush] {
width: auto;
margin-block: calc(var(--neek-space-unit) * -1);
& > .neek-media-frame {
margin-inline: calc(var(--neek-card-padding) * -1);
border: 0;
border-radius: 0;
}
}
.neek-media-link {
position: relative;
display: block;
}
.neek-media-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
& > span {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 14);
height: calc(var(--neek-space-unit) * 14);
border-radius: var(--neek-radius-full);
background-color: var(--neek-play-bg);
color: #ffffff;
backdrop-filter: blur(8px);
transition: background-color var(--neek-duration) var(--neek-ease);
}
& svg {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
translate: calc(var(--neek-space-unit) * 0.5) 0;
}
}
.neek-media-link:hover .neek-media-play > span {
background-color: var(--neek-play-bg-hover);
}
.neek-media-caption {
padding-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-align: center;
}
.neek-media[data-flush] .neek-media-caption {
text-align: start;
}
.neek-tags {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-tag {
display: inline-flex;
align-items: center;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2.5);
border: 1px solid var(--neek-tag-border);
border-radius: var(--neek-pill-radius);
background-color: var(--neek-tag-bg);
color: var(--neek-tag-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-tag-bg-hover);
}
}
.neek-stream-tagline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 4);
& > :is(.neek-ai-note, .neek-auto-note, .neek-feed-note, .neek-import-note):not(:is(.neek-ai-note, .neek-auto-note, .neek-feed-note, .neek-import-note) + *) {
margin-inline-start: auto;
}
}
.neek-auto-note {
--neek-provider-icon-size: calc(var(--neek-space-unit) * 3.5);
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
white-space: nowrap;
}
.neek-feed-note {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
white-space: nowrap;
}
.neek-feed-note-icon {
flex: none;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
.neek-import-note {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
white-space: nowrap;
}
.neek-import-note-icon {
flex: none;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
.neek-import-note-link {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
text-underline-offset: 0.15em;
&:hover {
color: var(--neek-text);
text-decoration-color: currentColor;
}
}
.neek-ai-note {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
white-space: nowrap;
}
.neek-link-preview {
display: block;
border: var(--neek-border-width) solid var(--neek-link-preview-border);
border-radius: var(--neek-link-preview-radius);
text-decoration-line: none;
transition: border-color var(--neek-duration) var(--neek-ease);
&:hover {
border-color: var(--neek-link-preview-border-hover);
}
}
.neek-link-preview-image {
display: block;
border-radius: calc(var(--neek-link-preview-radius) - var(--neek-border-width)) calc(var(--neek-link-preview-radius) - var(--neek-border-width)) 0 0;
width: 100%;
height: calc(var(--neek-space-unit) * 40);
object-fit: cover;
}
.neek-link-preview-body {
display: block;
padding: calc(var(--neek-space-unit) * 3);
& > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 1);
}
}
.neek-link-preview-title {
display: block;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-leading-snug);
font-weight: var(--neek-weight-medium);
}
.neek-link-preview-description {
display: block;
color: var(--neek-link-preview-description);
font-size: var(--neek-text-xs);
line-height: var(--neek-leading-relaxed);
}
.neek-link-preview-domain {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
padding-block-start: calc(var(--neek-space-unit) * 0.5);
color: var(--neek-link-preview-domain);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.025em;
text-transform: uppercase;
& > svg {
width: calc(var(--neek-space-unit) * 3);
height: calc(var(--neek-space-unit) * 3);
}
}
.neek-poll > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 2);
}
.neek-poll-option {
position: relative;
overflow: hidden;
border: 1px solid var(--neek-poll-border);
border-radius: var(--neek-poll-radius);
}
.neek-poll-bar {
position: absolute;
inset-block: 0;
left: 0;
background-color: var(--neek-poll-bar);
}
.neek-poll-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-poll-label {
color: var(--neek-poll-text);
}
.neek-poll-percent {
flex-shrink: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-poll-option[data-leading] {
border-color: var(--neek-poll-leader-border);
& .neek-poll-bar {
background-color: var(--neek-poll-leader-bar);
}
& .neek-poll-label {
color: var(--neek-poll-leader-text);
font-weight: var(--neek-weight-medium);
}
& .neek-poll-percent {
color: var(--neek-poll-leader-percent);
font-weight: var(--neek-weight-semibold);
}
}
.neek-poll-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2);
padding-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-poll-choice {
display: block;
width: 100%;
padding: 0;
background-color: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
transition: border-color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
border-color: var(--neek-accent);
background-color: var(--neek-poll-bar);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 2px;
}
& .neek-poll-label {
font-weight: var(--neek-weight-medium);
}
}
.neek-poll-option[data-chosen] {
border-color: var(--neek-accent);
}
.neek-poll-check {
display: inline-block;
width: 1em;
height: 1em;
margin-inline-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-accent);
vertical-align: -0.125em;
}
.neek-poll-undo {
padding: 0;
border: 0;
background: none;
color: var(--neek-meta-text);
font: inherit;
text-decoration-line: underline;
text-underline-offset: 0.2em;
cursor: pointer;
&:hover {
color: var(--neek-meta-text-hover);
}
}
.neek-teaser {
position: relative;
display: flex;
height: 100%;
min-height: var(--neek-teaser-height);
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
transition: border-color var(--neek-duration) var(--neek-ease);
&:hover,
&:focus-within {
border-color: color-mix(in oklab, var(--neek-accent) 50%, var(--neek-card-border));
}
}
.neek-teaser-body {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
padding: calc(var(--neek-space-unit) * 4);
}
.neek-teaser-title,
.neek-teaser-excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.neek-teaser-title {
-webkit-line-clamp: 3;
font-family: var(--neek-type-card-title-font);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-type-card-title-weight);
letter-spacing: var(--neek-type-card-title-tracking);
}
.neek-teaser-excerpt {
-webkit-line-clamp: 3;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-teaser-link {
color: var(--neek-type-card-title-color);
text-decoration-line: none;
&::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
&:focus-visible {
outline: none;
&::after {
border-radius: inherit;
outline: 2px solid var(--neek-accent);
outline-offset: -2px;
}
}
}
.neek-teaser-meta {
display: flex;
align-items: baseline;
margin-block-start: auto;
gap: calc(var(--neek-space-unit) * 1.5);
min-width: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-teaser-time,
.neek-teaser-separator {
flex-shrink: 0;
}
.neek-teaser-author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-teaser-stats {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
margin-block-start: calc(var(--neek-space-unit) * -1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-teaser-stat {
display: inline-flex;
align-items: center;
gap: var(--neek-space-unit);
& > svg {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
}
:is(.neek-teaser-title, .neek-teaser-excerpt) + .neek-teaser-stats {
margin-block-start: auto;
}
.neek-teaser-stat-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.neek-teaser-media {
flex-shrink: 0;
width: var(--neek-teaser-media-width);
overflow: hidden;
background-color: var(--neek-bg-muted);
}
.neek-teaser-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: scale var(--neek-duration-slow) var(--neek-ease);
.neek-teaser:hover & {
scale: 1.04;
}
}
}
@layer neek.components {
.neek-stack {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 4);
min-width: 0;
}
.neek-stack-parts {
display: flex;
flex-direction: column;
gap: var(--neek-stack-gap);
min-width: 0;
}
.neek-stack-part {
display: flex;
flex-direction: column;
min-width: 0;
scroll-margin-block-start: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 6);
& > * {
margin-block: 0;
}
}
.neek-stack-part > * + :is(*, .neek-media[data-flush]) {
margin-block-start: calc(var(--neek-space-unit) * 4);
}
.neek-stack-part > * + .neek-media[data-flush] {
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-stack-part > .neek-stream-title + :is(p, .neek-post-body) {
margin-block-start: var(--neek-stream-title-gap);
}
.neek-stack-new {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
margin: 0;
color: var(--neek-accent);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
&::after {
content: '';
flex: 1;
height: var(--neek-border-width);
background-color: currentColor;
opacity: 0.4;
}
}
.neek-stream-item .neek-stack-parts {
--neek-stack-gap: calc(var(--neek-space-unit) * 4);
}
.neek-stream-item .neek-stack:not([data-whole]) > .neek-stack-parts:has(> .neek-stack-part[data-type='article']) {
max-height: var(--neek-stack-card-height);
overflow-x: visible;
overflow-y: clip;
}
.neek-stack:not([data-clipped]) > .neek-stack-more[data-clip] {
display: none;
}
.neek-stack-more {
display: inline-flex;
flex-wrap: wrap;
align-self: flex-start;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
color: var(--neek-accent);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-decoration: none;
&:hover .neek-stack-more-label > .neek-icon {
translate: calc(var(--neek-space-unit) * 1) 0;
}
}
.neek-stack-more-label {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
transition: translate var(--neek-duration) var(--neek-ease);
}
}
.neek-stack-thumbs {
display: flex;
gap: calc(var(--neek-space-unit) * 1.5);
}
.neek-stack-thumb {
position: relative;
flex: none;
width: var(--neek-stack-thumb-size);
height: var(--neek-stack-thumb-size);
overflow: hidden;
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
& > .neek-stack-thumb-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
& > .neek-icon:only-child {
position: static;
width: 100%;
height: 100%;
padding: calc(var(--neek-space-unit) * 3.5);
border-radius: 0;
background-color: transparent;
color: var(--neek-text-muted);
}
& > .neek-icon {
position: absolute;
inset-block-end: calc(var(--neek-space-unit) * 1);
inset-inline-end: calc(var(--neek-space-unit) * 1);
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
padding: calc(var(--neek-space-unit) * 1);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-stack-thumb-sign-bg);
color: var(--neek-stack-thumb-sign-color);
}
}
}
@layer neek.components {
.neek-stack-composer {
--neek-stack-composer-off: calc(var(--neek-space-unit) * 20);
--neek-stack-composer-pad: calc(var(--neek-space-unit) * 8);
width: min(100% - var(--neek-stack-composer-off) * 2, var(--neek-stack-composer-width));
max-width: none;
height: fit-content;
max-height: calc(100dvh - var(--neek-space-unit) * 12);
margin: auto;
padding: 0;
overflow: visible;
border: 0;
background: none;
color: var(--neek-text);
&::backdrop {
background-color: var(--neek-modal-backdrop);
backdrop-filter: var(--neek-modal-backdrop-filter);
}
&[open] {
display: flex;
flex-direction: column;
animation: neek-modal-in var(--neek-duration-slow, 240ms) var(--neek-ease);
&::backdrop {
animation: neek-modal-fade var(--neek-duration-slow, 240ms) var(--neek-ease);
}
}
@media (prefers-reduced-motion: reduce) {
&[open],
&[open]::backdrop {
animation: none;
}
}
@media (width < 48rem) {
--neek-stack-composer-pad: calc(var(--neek-space-unit) * 4);
width: calc(100% - var(--neek-space-unit) * 8);
max-height: calc(100dvh - var(--neek-space-unit) * 20);
margin-block: calc(var(--neek-space-unit) * 16) auto;
}
}
html:has(.neek-stack-composer[open]) {
overflow: hidden;
}
.neek-stack-composer-form {
position: relative;
display: flex;
flex: 0 1 auto;
flex-direction: column;
min-width: 0;
min-height: 0;
perspective: 2400px;
}
.neek-stack-composer-card {
position: relative;
display: grid;
flex: 0 1 auto;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
min-height: 0;
transform-style: preserve-3d;
transition: transform var(--neek-stack-composer-flip) var(--neek-ease);
&[data-flipped] {
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
.neek-stack-composer-face {
grid-area: 1 / 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-stack-composer-bg);
box-shadow: var(--neek-dialog-shadow);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: visibility 0s linear;
&[data-face='back'] {
transform: rotateY(180deg);
}
&[inert] {
visibility: hidden;
transition-delay: var(--neek-stack-composer-flip);
@media (prefers-reduced-motion: reduce) {
transition-delay: 0s;
}
}
}
.neek-stack-composer-writer {
position: absolute;
top: 0;
right: calc(100% + var(--neek-space-unit) * 4);
z-index: 3;
@media (width < 48rem) {
top: auto;
right: auto;
bottom: calc(100% + var(--neek-space-unit) * 4);
left: 0;
}
}
.neek-stack-composer-avatar {
display: inline-grid;
border-radius: var(--neek-avatar-radius);
box-shadow: var(--neek-gap-ring);
}
.neek-stack-composer-settings-toggle {
position: absolute;
top: 0;
left: calc(100% + var(--neek-space-unit) * 4);
z-index: 2;
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 10);
height: calc(var(--neek-space-unit) * 10);
padding: 0;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-full);
background-color: var(--neek-stack-composer-bg);
color: var(--neek-text-secondary);
box-shadow: var(--neek-popover-shadow);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease), color var(--neek-duration) var(--neek-ease), rotate var(--neek-stack-composer-flip) var(--neek-ease);
&:hover,
&:focus-visible {
color: var(--neek-text);
}
&[aria-expanded='true'] {
border-color: var(--neek-accent);
background-color: var(--neek-accent-soft);
color: var(--neek-accent-text);
rotate: 90deg;
}
&:focus-visible {
outline: 2px solid var(--neek-focus-ring);
outline-offset: 2px;
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
.neek-stack-composer:not([data-js]) & {
display: none;
}
@media (prefers-reduced-motion: reduce) {
&[aria-expanded='true'] {
rotate: none;
}
}
@media (width < 48rem) {
top: auto;
right: 0;
bottom: calc(100% + var(--neek-space-unit) * 4);
left: auto;
}
}
.neek-stack-part-handle,
.neek-stack-part-remove,
.neek-stack-file-remove {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(var(--neek-space-unit) * 8);
height: calc(var(--neek-space-unit) * 8);
padding: 0;
border: 0;
border-radius: var(--neek-radius-full);
background-color: transparent;
color: var(--neek-text-secondary);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease), color var(--neek-duration) var(--neek-ease);
&:hover,
&:focus-visible {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4.5);
height: calc(var(--neek-space-unit) * 4.5);
}
}
.neek-stack-composer-face[data-face='front'] {
display: flex;
flex-direction: column;
}
.neek-stack-composer-body {
flex: 1 0 auto;
padding: var(--neek-stack-composer-pad) var(--neek-stack-composer-pad) 0;
& > * {
box-sizing: border-box;
width: 100%;
}
}
.neek-stack-composer-foot {
position: sticky;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 6) var(--neek-stack-composer-pad) calc(var(--neek-space-unit) * 5);
background-image: linear-gradient(transparent, var(--neek-stack-composer-bg) calc(var(--neek-space-unit) * 5));
& > .neek-button {
flex-shrink: 0;
}
@media (width < 48rem) {
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 2);
& > .neek-stack-composer-status {
flex-basis: 100%;
order: -1;
}
& > .neek-stack-composer-leave {
flex: 1 1 0;
min-width: 0;
padding-inline: calc(var(--neek-space-unit) * 2);
}
& > [data-stack-publish] {
flex-basis: 100%;
}
}
}
.neek-stack-composer:not([data-js]) .neek-stack-composer-leave {
display: none;
}
.neek-stack-composer-discard {
display: contents;
}
.neek-stack-composer-status {
flex: 1;
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-overflow: ellipsis;
white-space: nowrap;
&[data-kind='error'] {
color: var(--neek-danger-text);
white-space: normal;
}
&[data-kind='note'] {
color: var(--neek-accent-text);
}
}
.neek-stack-composer-title {
display: block;
margin-block-end: calc(var(--neek-space-unit) * 6);
padding: 0 calc(var(--neek-space-unit) * 4);
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-2xl);
line-height: var(--neek-leading-tight);
font-weight: var(--neek-weight-semibold);
outline: none;
&::placeholder {
color: var(--neek-text-muted);
}
}
.neek-stack-composer-parts {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
margin-block: 0;
padding: 0;
list-style: none;
}
.neek-stack-part-editor {
position: relative;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 4);
border: var(--neek-border-width) solid transparent;
border-radius: var(--neek-card-radius);
transition: border-color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover,
&:focus-within {
border-color: var(--neek-card-border);
background-color: var(--neek-card-bg);
}
&[data-dragging] {
opacity: 0.4;
}
&[data-insert='before'] {
box-shadow: 0 calc(var(--neek-space-unit) * -1.5) 0 calc(var(--neek-space-unit) * -1) var(--neek-accent);
}
&[data-insert='after'] {
box-shadow: 0 calc(var(--neek-space-unit) * 1.5) 0 calc(var(--neek-space-unit) * -1) var(--neek-accent);
}
&[data-drop='yes'] {
border-color: var(--neek-accent);
background-color: var(--neek-accent-soft);
}
&[data-drop='no'] {
border-color: var(--neek-danger-border);
& > .neek-stack-part-nodrop {
display: flex;
}
}
}
.neek-stack-part-bar {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
margin-inline-start: calc(var(--neek-space-unit) * -2);
color: var(--neek-meta-text);
opacity: 0.6;
transition: opacity var(--neek-duration) var(--neek-ease);
.neek-stack-part-editor:is(:hover, :focus-within) > & {
opacity: 1;
}
}
.neek-stack-part-handle {
cursor: grab;
&:active {
cursor: grabbing;
}
}
.neek-stack-part-type {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin-inline-end: auto;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
& > .neek-icon {
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
}
.neek-stack-part-count {
font-size: var(--neek-text-xs);
font-variant-numeric: tabular-nums;
transition: color var(--neek-duration) var(--neek-ease);
&[data-warn='1'] {
color: var(--neek-danger-text);
}
}
.neek-stack-part-nodrop {
position: absolute;
inset: 0;
z-index: 1;
display: none;
align-items: center;
justify-content: center;
border-radius: inherit;
background-color: color-mix(in oklab, var(--neek-bg) 70%, transparent);
color: var(--neek-danger-text);
pointer-events: none;
& > .neek-icon {
width: calc(var(--neek-space-unit) * 12);
height: calc(var(--neek-space-unit) * 12);
}
}
.neek-stack-part-text {
display: block;
width: 100%;
min-height: calc(var(--neek-space-unit) * 8);
padding: 0;
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-family: var(--neek-input-font);
font-size: var(--neek-text-lg);
line-height: var(--neek-leading-relaxed);
resize: none;
outline: none;
field-sizing: content;
&::placeholder {
color: var(--neek-text-muted);
}
.neek-stack-part-editor:not([data-type='status'], [data-type='article']) > & {
font-size: var(--neek-text-base);
}
.neek-stack-part-editor[data-type='article'] > & {
min-height: calc(var(--neek-space-unit) * 40);
}
}
.neek-stack-part-editor[data-fixed] > .neek-stack-part-bar {
margin-inline-start: 0;
}
.neek-stack-part-fixed {
padding: calc(var(--neek-space-unit) * 0.5) calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-full);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-stack-files {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: calc(var(--neek-space-unit) * 3);
margin: 0;
padding: 0;
list-style: none;
&:empty {
display: none;
}
}
.neek-stack-file {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-card-bg);
&:not([data-kind='image']) {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 2);
}
&:is([data-state='uploading'], [data-state='processing']) {
& > :is(.neek-stack-file-thumb, .neek-stack-file-icon) {
opacity: 0.5;
}
}
&[data-state='failed'] {
border-color: var(--neek-danger-border);
& .neek-stack-file-note {
color: var(--neek-danger-text);
}
}
& > .neek-stack-file-remove {
position: absolute;
top: calc(var(--neek-space-unit) * 1.5);
right: calc(var(--neek-space-unit) * 1.5);
width: calc(var(--neek-space-unit) * 7);
height: calc(var(--neek-space-unit) * 7);
background-color: color-mix(in oklab, var(--neek-bg) 75%, transparent);
}
&:not([data-kind='image']) > .neek-stack-file-remove {
position: static;
background-color: transparent;
}
}
.neek-stack-file-thumb {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.neek-stack-file-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(var(--neek-space-unit) * 10);
height: calc(var(--neek-space-unit) * 10);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-surface-hover);
color: var(--neek-text-secondary);
& > .neek-icon {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-stack-file-info {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
.neek-stack-file[data-kind='image'] > & {
padding: calc(var(--neek-space-unit) * 2);
}
}
.neek-stack-file-alt {
width: 100%;
padding: 0;
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
outline: none;
&::placeholder {
color: var(--neek-text-muted);
}
}
.neek-stack-file-name {
overflow: hidden;
font-size: var(--neek-text-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-stack-file-note {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
}
.neek-stack-file-progress {
height: calc(var(--neek-space-unit) * 1);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
}
.neek-stack-file-progress-bar {
display: block;
width: var(--neek-progress, 0%);
height: 100%;
border-radius: inherit;
background-color: var(--neek-accent);
transition: width var(--neek-duration) var(--neek-ease);
:is(.neek-stack-file, .neek-stack-slot)[data-state='processing'] & {
width: 100%;
animation: neek-stack-file-processing 1.2s ease-in-out infinite alternate;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
@keyframes neek-stack-file-processing {
to {
opacity: 0.35;
}
}
.neek-stack-file-retry {
align-self: flex-start;
padding: 0;
border: 0;
background: none;
color: var(--neek-accent-text);
font: inherit;
font-size: var(--neek-text-xs);
font-weight: var(--neek-weight-medium);
cursor: pointer;
}
.neek-stack-part-url,
.neek-stack-poll-option {
width: 100%;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-input-bg);
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-sm);
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 1px;
}
&[hidden] {
display: none;
}
}
.neek-stack-poll-options {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
padding: 0;
list-style: none;
& > li {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
}
.neek-stack-part-more,
.neek-stack-composer-add-button {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
height: calc(var(--neek-space-unit) * 8);
padding: 0 calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-full);
background-color: transparent;
color: var(--neek-text-secondary);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease), color var(--neek-duration) var(--neek-ease);
&:hover,
&:focus-visible {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-stack-part-more {
border-style: dashed;
}
.neek-stack-part-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-stack-part-convert {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
height: calc(var(--neek-space-unit) * 8);
margin-inline-start: auto;
padding: 0 calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-accent);
border-radius: var(--neek-radius-full);
background-color: var(--neek-accent-soft);
color: var(--neek-accent-text);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease), color var(--neek-duration) var(--neek-ease);
&:hover,
&:focus-visible {
background-color: var(--neek-accent);
color: var(--neek-accent-contrast);
}
&[hidden] {
display: none;
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-stack-composer-add {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
margin-block-start: calc(var(--neek-space-unit) * 6);
padding: calc(var(--neek-space-unit) * 6) calc(var(--neek-space-unit) * 4);
border: var(--neek-border-width) dashed var(--neek-border);
border-radius: var(--neek-card-radius);
text-align: center;
transition: border-color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&[data-drop='yes'] {
border-color: var(--neek-accent);
background-color: var(--neek-accent-soft);
}
&[data-full] > .neek-stack-composer-add-buttons {
opacity: 0.4;
pointer-events: none;
}
}
.neek-stack-composer-add-label {
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-stack-composer-add-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-stack-composer-drop-hint {
margin: 0;
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-stack-composer-fallback {
width: 100%;
padding: calc(var(--neek-space-unit) * 4);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-input-bg);
color: var(--neek-text);
font: inherit;
}
.neek-stack-composer-settings {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 4);
padding: var(--neek-stack-composer-pad);
}
.neek-stack-composer-settings-title {
font-family: var(--neek-font-heading);
margin: 0;
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-stack-composer-settings-foot {
display: flex;
justify-content: flex-end;
margin-block-start: auto;
padding-block-start: calc(var(--neek-space-unit) * 2);
}
.neek-stack-file:has(> .neek-stack-file-extras) {
flex-wrap: wrap;
}
.neek-stack-file-extras {
display: grid;
flex-basis: 100%;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: calc(var(--neek-space-unit) * 2);
}
.neek-stack-slot {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
padding: calc(var(--neek-space-unit) * 1.5);
border: var(--neek-border-width) dashed var(--neek-border);
border-radius: var(--neek-radius-sm);
transition: border-color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:not([data-state='empty']) {
border-style: solid;
}
&[data-state='failed'] {
border-color: var(--neek-danger-border);
& .neek-stack-file-note {
color: var(--neek-danger-text);
}
}
&[data-drop='yes'] {
border-color: var(--neek-accent);
background-color: var(--neek-accent-soft);
}
&[data-drop='no'] {
border-color: var(--neek-danger-border);
}
}
.neek-stack-slot-pick {
display: inline-flex;
flex: 1;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
padding: 0;
border: 0;
background: none;
color: var(--neek-text-secondary);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-align: start;
cursor: pointer;
&:hover {
color: var(--neek-accent-text);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 2px;
}
& > .neek-icon {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-stack-slot-thumb,
.neek-stack-slot-icon {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border-radius: var(--neek-radius-sm);
}
.neek-stack-slot-thumb {
object-fit: cover;
.neek-stack-slot:is([data-state='uploading'], [data-state='processing']) > & {
opacity: 0.5;
}
}
.neek-stack-slot-icon {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--neek-surface-hover);
color: var(--neek-text-secondary);
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-stack-slot-info {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
min-width: 0;
}
.neek-stack-slot-label {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-stack-file-chapters {
grid-column: 1 / -1;
width: 100%;
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-input-bg);
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
resize: vertical;
&::placeholder {
color: var(--neek-text-muted);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 1px;
}
}
}
@layer neek.components {
.neek-carousel {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-carousel-viewport {
position: relative;
container: neek-carousel / inline-size;
}
.neek-carousel-track {
--neek-carousel-visible: var(--neek-carousel-per-view, 1);
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--neek-carousel-gap) * (var(--neek-carousel-visible) - 1)) / var(--neek-carousel-visible));
column-gap: var(--neek-carousel-gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: var(--neek-carousel-bleed);
margin: calc(var(--neek-carousel-bleed) * -1);
scroll-padding-inline: var(--neek-carousel-bleed);
&::-webkit-scrollbar {
display: none;
}
& > * {
scroll-snap-align: start;
min-width: 0;
}
}
@container neek-carousel (width < 48rem) {
.neek-carousel-track {
--neek-carousel-visible: min(var(--neek-carousel-per-view, 1), 2);
}
}
@container neek-carousel (width < 32rem) {
.neek-carousel-track {
--neek-carousel-visible: 1;
}
}
.neek-carousel-arrow {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: var(--neek-carousel-arrow-size);
height: var(--neek-carousel-arrow-size);
padding: 0;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: 50%;
background-color: var(--neek-frost-bg);
backdrop-filter: var(--neek-frost);
box-shadow: var(--neek-shadow-md);
color: var(--neek-text);
cursor: pointer;
opacity: 0;
translate: 0 -50%;
transition: opacity var(--neek-duration) var(--neek-ease), color var(--neek-duration) var(--neek-ease), border-color var(--neek-duration) var(--neek-ease);
& > svg {
width: 55%;
height: 55%;
}
&[data-direction='previous'] {
left: calc(var(--neek-space-unit) * 3);
}
&[data-direction='next'] {
right: calc(var(--neek-space-unit) * 3);
}
&:hover {
border-color: var(--neek-accent);
color: var(--neek-accent);
}
&:focus-visible {
opacity: 1;
outline: 2px solid var(--neek-accent);
outline-offset: 2px;
}
}
@media (hover: hover) {
.neek-carousel:hover .neek-carousel-arrow {
opacity: 1;
}
}
@media (hover: none) {
.neek-carousel-arrow:not(:focus-visible) {
visibility: hidden;
}
}
}
@layer neek.components {
.neek-gallery {
grid-column: 2;
gap: calc(var(--neek-space-unit) * 2);
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-gallery[data-flush] > .neek-carousel-viewport {
margin-inline: calc(var(--neek-card-padding) * -1);
& > .neek-gallery-track {
border-inline: 0;
border-radius: 0;
}
}
.neek-gallery-track {
--neek-carousel-bleed: 0px;
margin: 0;
padding: 0;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
list-style: none;
}
.neek-gallery-slide {
display: block;
}
.neek-gallery-open {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: var(--neek-gallery-ratio);
padding: 0;
overflow: hidden;
border: 0;
background-color: var(--neek-gallery-bg);
cursor: zoom-in;
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: -2px;
}
}
.neek-gallery-thumbs {
display: flex;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
padding: calc(var(--neek-space-unit) * 0.5);
overflow-x: auto;
list-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.neek-gallery-thumb {
display: block;
flex: none;
width: var(--neek-gallery-thumb-size);
height: var(--neek-gallery-thumb-size);
padding: 0;
overflow: hidden;
border: 2px solid transparent;
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
opacity: 0.7;
cursor: pointer;
transition: border-color var(--neek-duration) var(--neek-ease), opacity var(--neek-duration) var(--neek-ease);
& > img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover {
opacity: 1;
}
&[aria-current='true'] {
border-color: var(--neek-accent);
opacity: 1;
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 2px;
}
}
.neek-lightbox {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #ffffff;
&::backdrop {
background-color: var(--neek-lightbox-backdrop);
backdrop-filter: blur(var(--neek-lightbox-blur));
}
&[open] {
display: grid;
place-items: center;
}
& .neek-carousel-arrow {
opacity: 1;
visibility: visible;
}
}
.neek-lightbox-image {
max-width: calc(100vw - var(--neek-carousel-arrow-size) * 2 - var(--neek-space-unit) * 12);
max-height: calc(100dvh - var(--neek-space-unit) * 24);
object-fit: contain;
border-radius: var(--neek-radius-md);
box-shadow: var(--neek-shadow-lg);
@media (width < 40rem) {
max-width: 100vw;
border-radius: 0;
}
}
.neek-lightbox-close {
position: absolute;
top: calc(var(--neek-space-unit) * 4);
right: calc(var(--neek-space-unit) * 4);
translate: none;
}
.neek-lightbox-count {
position: absolute;
bottom: calc(var(--neek-space-unit) * 5);
left: 50%;
translate: -50% 0;
margin: 0;
color: rgb(255 255 255 / 0.8);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
letter-spacing: 0.04em;
}
}
@layer neek.components {
.neek-playlist {
grid-column: 2;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
margin-block-start: calc(var(--neek-space-unit) * 3);
container-type: inline-size;
}
.neek-playlist-screen {
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
background-color: var(--neek-playlist-video-bg);
}
.neek-playlist-video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--neek-playlist-video-bg);
[data-playlist-ready] & {
cursor: pointer;
}
}
.neek-playlist-controls {
display: none;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
[data-playlist-ready] > & {
display: flex;
}
}
.neek-playlist-button {
display: grid;
flex: none;
place-items: center;
width: var(--neek-playlist-button-size);
height: var(--neek-playlist-button-size);
padding: 0;
border: 0;
border-radius: var(--neek-radius-full);
background: none;
color: var(--neek-text);
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
& > svg {
width: 60%;
height: 60%;
}
&:hover {
background-color: var(--neek-playlist-button-hover-bg);
color: var(--neek-accent);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 1px;
}
&[data-playlist-toggle] {
width: calc(var(--neek-playlist-button-size) * 1.2);
height: calc(var(--neek-playlist-button-size) * 1.2);
background-color: var(--neek-accent);
color: var(--neek-accent-contrast);
&:hover {
background-color: color-mix(in oklab, var(--neek-accent) 85%, var(--neek-text));
color: var(--neek-accent-contrast);
}
& > svg {
width: 50%;
height: 50%;
}
}
}
.neek-playlist-button[data-variant='play'] .neek-playlist-pause,
.neek-playlist-button[data-variant='pause'] .neek-playlist-play {
display: none;
}
.neek-playlist-skip {
font-family: var(--neek-font-sans);
font-weight: var(--neek-weight-semibold);
}
.neek-playlist-time {
flex: none;
min-width: 2.75em;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
text-align: center;
}
.neek-playlist-seek {
--neek-playlist-seek-fill: 0%;
flex: 1 1 auto;
width: 100%;
min-width: calc(var(--neek-space-unit) * 8);
height: var(--neek-playlist-seek-thumb);
margin: 0;
margin-inline: calc(var(--neek-space-unit) * 1.5);
background: none;
cursor: pointer;
appearance: none;
&::-webkit-slider-runnable-track {
height: var(--neek-playlist-seek-track);
border-radius: var(--neek-radius-full);
background: linear-gradient(to right, var(--neek-accent) var(--neek-playlist-seek-fill), var(--neek-playlist-seek-rail) var(--neek-playlist-seek-fill));
}
&::-moz-range-track {
height: var(--neek-playlist-seek-track);
border-radius: var(--neek-radius-full);
background-color: var(--neek-playlist-seek-rail);
}
&::-moz-range-progress {
height: var(--neek-playlist-seek-track);
border-radius: var(--neek-radius-full);
background-color: var(--neek-accent);
}
&::-webkit-slider-thumb {
width: var(--neek-playlist-seek-thumb);
height: var(--neek-playlist-seek-thumb);
margin-block-start: calc((var(--neek-playlist-seek-track) - var(--neek-playlist-seek-thumb)) / 2);
border: 0;
border-radius: 50%;
background-color: var(--neek-accent);
box-shadow: 0 0 0 3px var(--neek-playlist-seek-halo);
appearance: none;
}
&::-moz-range-thumb {
width: var(--neek-playlist-seek-thumb);
height: var(--neek-playlist-seek-thumb);
border: 0;
border-radius: 50%;
background-color: var(--neek-accent);
box-shadow: 0 0 0 3px var(--neek-playlist-seek-halo);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 2px;
border-radius: var(--neek-radius-full);
}
}
@container (width < 26rem) {
.neek-playlist-controls {
gap: 0;
}
.neek-playlist-time {
min-width: 2.4em;
}
}
.neek-playlist-chevron {
rotate: 180deg;
transition: rotate var(--neek-duration) var(--neek-ease);
[data-collapsed] & {
rotate: 0deg;
}
}
.neek-playlist-list {
margin: 0;
padding: calc(var(--neek-space-unit) * 1);
max-height: calc(var(--neek-space-unit) * 64);
overflow-y: auto;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
list-style: none;
[data-collapsed] > & {
display: none;
}
}
.neek-playlist-entry:not(:last-child) {
border-block-end: 1px solid var(--neek-playlist-border);
}
.neek-playlist-item {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
width: 100%;
padding: calc(var(--neek-space-unit) * 2);
border: 0;
border-radius: var(--neek-radius-md);
background: none;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: left;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-accent-text);
}
&[aria-current='true'] {
background-color: var(--neek-playlist-current-bg);
color: var(--neek-accent-text);
& .neek-playlist-thumb {
border-color: var(--neek-accent);
}
& .neek-playlist-title {
font-weight: var(--neek-weight-medium);
}
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: -2px;
}
}
.neek-playlist-thumb {
position: relative;
display: grid;
flex: none;
place-items: center;
width: calc(var(--neek-space-unit) * 16);
aspect-ratio: 16 / 9;
overflow: hidden;
border: 2px solid transparent;
border-radius: var(--neek-radius-sm);
background-color: var(--neek-bg-muted);
color: var(--neek-playlist-number);
& > svg {
width: 40%;
height: 40%;
}
}
.neek-playlist-thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.neek-playlist-progress {
position: absolute;
inset: auto 0 0;
height: 3px;
background-color: var(--neek-playlist-seek-rail);
opacity: 0;
transition: opacity var(--neek-duration) var(--neek-ease);
&::after {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--neek-playlist-watched) * 100%);
background-color: var(--neek-accent);
}
&[data-watched] {
opacity: 1;
}
}
.neek-playlist-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-playlist-number,
.neek-playlist-duration {
flex-shrink: 0;
color: var(--neek-playlist-number);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
}
@layer neek.components {
.neek-embed {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
aspect-ratio: 16 / 9;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-media-radius);
background:
radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--neek-accent) 35%, transparent), transparent 60%),
var(--neek-neutral-950);
color: #ffffff;
& > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
}
.neek-embed-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.neek-embed-play {
position: relative;
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 16);
height: calc(var(--neek-space-unit) * 16);
border: 0;
border-radius: var(--neek-radius-full);
background-color: rgb(0 0 0 / 0.6);
color: #ffffff;
cursor: pointer;
backdrop-filter: blur(6px);
transition: scale var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
& > svg {
width: 45%;
height: 45%;
translate: 6% 0;
}
&:hover {
scale: 1.06;
background-color: color-mix(in oklab, var(--neek-accent) 80%, black);
}
}
.neek-embed-caption {
position: absolute;
inset: auto 0 0;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
margin: 0;
padding: calc(var(--neek-space-unit) * 8) calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 3);
background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
pointer-events: none;
}
.neek-embed-title {
overflow: hidden;
font-weight: var(--neek-weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-embed-note {
opacity: 0.75;
font-size: var(--neek-text-xs);
}
.neek-post-media > .neek-embed {
height: 100%;
border: 0;
border-radius: 0;
aspect-ratio: auto;
}
}
@layer neek.components {
.neek-homepage {
width: min(100% - var(--neek-frame-gutter) * 2, var(--neek-homepage-width));
margin-inline: auto;
padding-block: calc(var(--neek-space-unit) * 12) calc(var(--neek-space-unit) * 24);
}
.neek-homepage-feed {
--neek-stream-gap: calc(var(--neek-space-unit) * 8);
display: flex;
flex-direction: column;
gap: var(--neek-stream-gap);
}
.neek-homepage-identity {
padding-block: calc(var(--neek-space-unit) * 6);
}
.neek-homepage-center {
display: flex;
justify-content: center;
}
.neek-socials {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding-block-start: calc(var(--neek-space-unit) * 2);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > span {
color: light-dark(var(--neek-neutral-400), var(--neek-neutral-600));
}
& > a {
color: var(--neek-text-secondary);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-text);
}
}
}
.neek-homepage[data-layout='split'] {
--neek-homepage-width: 64rem;
display: grid;
grid-template-columns: minmax(0, var(--neek-stream-max-width));
justify-content: center;
gap: calc(var(--neek-space-unit) * 10);
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(var(--neek-space-unit) * 14);
}
}
.neek-homepage-panel {
@media (width >= 64rem) {
position: sticky;
top: var(--neek-header-height);
display: flex;
align-items: center;
justify-content: center;
align-self: start;
min-height: calc(100dvh - var(--neek-header-height));
}
}
.neek-homepage-banner {
position: relative;
isolation: isolate;
padding-block: calc(var(--neek-space-unit) * 12) calc(var(--neek-space-unit) * 14);
color: var(--neek-text);
color-scheme: dark;
&::before {
content: '';
position: absolute;
inset: calc(var(--neek-header-height) * -3) 0 0;
z-index: -1;
background:
linear-gradient(to bottom, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.15) 40%, rgb(0 0 0 / 0.55)),
var(--neek-homepage-banner-image, linear-gradient(135deg, var(--neek-neutral-800), var(--neek-neutral-950))) center / cover no-repeat;
}
& > .neek-homepage {
padding-block: 0;
}
& .neek-identity-bio {
max-width: 32rem;
}
}
.neek-homepage-banner[data-blur] {
overflow-x: clip;
color-scheme: inherit;
&::before {
background:
linear-gradient(
to bottom,
light-dark(rgb(255 255 255 / 0.62), rgb(0 0 0 / 0.45)),
light-dark(rgb(255 255 255 / 0.72), rgb(0 0 0 / 0.15)) 40%,
light-dark(rgb(255 255 255 / 0.9), rgb(0 0 0 / 0.55))
),
var(--neek-homepage-banner-image, linear-gradient(135deg, var(--neek-neutral-800), var(--neek-neutral-950))) center / cover no-repeat;
filter: blur(2.5rem) saturate(1.4);
inset-inline: -5rem;
}
}
:root:has(.neek-homepage-banner:not([data-blur])) .neek-header:not([data-scrolled]) {
color-scheme: dark;
}
.neek-homepage[data-layout='wide'] {
--neek-homepage-width: 75rem;
padding-block-start: calc(var(--neek-space-unit) * 10);
}
.neek-homepage-grid {
--neek-stream-gap: calc(var(--neek-space-unit) * 6);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
align-items: start;
gap: var(--neek-stream-gap);
}
.neek-homepage[data-layout='aside'] {
--neek-homepage-width: 64rem;
display: grid;
grid-template-columns: minmax(0, var(--neek-stream-max-width));
justify-content: center;
align-items: start;
gap: calc(var(--neek-space-unit) * 8);
padding-block-start: calc(var(--neek-space-unit) * 10);
@media (width >= 64rem) {
grid-template-columns: minmax(0, var(--neek-stream-max-width)) minmax(0, 18rem);
gap: calc(var(--neek-space-unit) * 10);
}
}
.neek-homepage-aside {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 6);
@media (width >= 64rem) {
position: sticky;
top: calc(var(--neek-header-height) + var(--neek-space-unit) * 6);
}
}
.neek-homepage-footer {
padding-block: calc(var(--neek-space-unit) * 10) calc(var(--neek-space-unit) * 16);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: center;
& a {
color: inherit;
}
}
:is(.neek-powered-by, .neek-homepage-footer .neek-powered-by) {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-decoration-line: none;
opacity: 0.7;
transition: opacity var(--neek-duration) var(--neek-ease);
&:is(:hover, :focus-visible) {
opacity: 1;
}
}
.neek-powered-by-label {
font-weight: var(--neek-weight-medium);
}
.neek-powered-by .neek-logo-mark {
--neek-text: currentColor;
}
}
@layer neek.components {
.neek-single {
--neek-card-button-hover-bg: var(--neek-bg);
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 8);
padding-block-start: calc(var(--neek-space-unit) * 4);
}
.neek-single-back {
display: flex;
margin-block-end: calc(var(--neek-space-unit) * -4);
}
.neek-single-measure {
width: 100%;
max-width: 65ch;
margin-inline: auto;
}
.neek-post-title {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
text-align: center;
}
.neek-post-title-text {
max-width: 42rem;
font-family: var(--neek-type-title-font);
font-size: var(--neek-type-title-size);
line-height: var(--neek-type-title-leading);
font-weight: var(--neek-type-title-weight);
letter-spacing: var(--neek-type-title-tracking);
text-transform: var(--neek-type-title-transform);
color: var(--neek-type-title-color);
}
.neek-post-title-excerpt {
max-width: 36rem;
font-family: var(--neek-type-subtitle-font);
font-size: var(--neek-type-subtitle-size);
line-height: var(--neek-type-subtitle-leading);
font-weight: var(--neek-type-subtitle-weight);
letter-spacing: var(--neek-type-subtitle-tracking);
text-transform: var(--neek-type-subtitle-transform);
color: var(--neek-type-subtitle-color);
}
.neek-single-prose {
color: var(--neek-comment-text);
font-size: var(--neek-text-base);
line-height: var(--neek-leading-relaxed);
& > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 5);
}
& > :is(h2, h3) {
margin-block-start: 0;
padding-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
}
& > h2 {
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
}
& > h3 {
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
}
}
.neek-single-status {
color: light-dark(var(--neek-neutral-800), var(--neek-neutral-200));
font-size: var(--neek-text-xl);
line-height: var(--neek-leading-relaxed);
text-align: center;
}
.neek-single-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 6);
padding-block-start: calc(var(--neek-space-unit) * 2);
}
.neek-single-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(var(--neek-space-unit) * 4);
padding-block-start: calc(var(--neek-space-unit) * 6);
border-block-start: var(--neek-border-width) solid var(--neek-border);
& > a {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
color: var(--neek-text);
text-decoration-line: none;
&:hover .neek-single-nav-title {
color: var(--neek-accent-text);
}
}
& > [rel='next'] {
grid-column: 2;
align-items: end;
text-align: end;
}
}
.neek-single-nav-label {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
font-weight: var(--neek-weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.neek-single-nav-title {
overflow: hidden;
max-width: 100%;
font-weight: var(--neek-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--neek-duration) var(--neek-ease);
}
.neek-single-related {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 4);
& > ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
gap: calc(var(--neek-space-unit) * 4);
margin: 0;
padding: 0;
list-style: none;
}
}
}
@layer neek.components {
.neek-join {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
text-align: center;
}
.neek-join-copy > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 1);
}
.neek-join-headline {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
.neek-join-text {
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-inline-field {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
width: 100%;
max-width: 24rem;
padding: calc(var(--neek-space-unit) * 1.5);
padding-inline-start: calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-input-bg);
transition: border-color var(--neek-duration) var(--neek-ease), box-shadow var(--neek-duration) var(--neek-ease);
&:focus-within {
border-color: transparent;
background:
linear-gradient(var(--neek-input-bg), var(--neek-input-bg)) padding-box,
var(--neek-input-focus-border-image) border-box;
background-size: 100% 100%, 200% 100%;
box-shadow: var(--neek-input-focus-glow);
animation: neek-focus-rainbow 3s linear infinite;
}
& > .neek-inline-field-input {
flex: 1;
min-width: 0;
padding: 0;
border: 0;
background-color: transparent;
color: var(--neek-input-text);
font-family: var(--neek-input-font);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&::placeholder {
color: var(--neek-input-placeholder);
}
&:focus {
outline: none;
box-shadow: none;
}
}
& > .neek-button {
flex-shrink: 0;
}
}
}
@layer neek.components {
.neek-reactions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-pill {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2.5);
border: 1px solid var(--neek-pill-border);
border-radius: var(--neek-pill-radius);
background-color: var(--neek-pill-bg);
color: var(--neek-pill-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
cursor: pointer;
transition: color var(--neek-rainbow-hover-fade) var(--neek-ease), border-color var(--neek-rainbow-hover-fade) var(--neek-ease), background-color var(--neek-rainbow-hover-fade) var(--neek-ease);
&:is([data-reacted], [aria-pressed='true']) {
border-color: var(--neek-pill-active-border);
background-color: var(--neek-pill-active-bg);
color: var(--neek-pill-active-text);
&::before {
opacity: 1;
}
& > :is([data-reaction-count], .neek-pill-count) {
background-image: var(--neek-pill-active-paint);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
& > .neek-pill-icon {
background-color: transparent;
background-image: var(--neek-pill-active-paint);
background-size: 200% 100%;
}
}
&:hover {
background-color: var(--neek-pill-bg-hover);
}
& > [data-reaction-count],
& > .neek-pill-count {
font-variant-numeric: tabular-nums;
}
& > svg {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
&[data-icon-only] {
padding: calc(var(--neek-space-unit) + (var(--neek-text-xs-leading) - var(--neek-space-unit) * 3.5) / 2) calc(var(--neek-space-unit) * 2);
}
&[aria-pressed='true'][data-just-pressed] > .neek-pill-icon {
animation: neek-pill-pop 400ms var(--neek-ease);
}
}
.neek-pill-icon {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
background-color: currentColor;
mask: var(--neek-pill-icon) center / contain no-repeat;
}
.neek-pill[data-action='comment'] {
--neek-pill-icon: 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='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.neek-pill[data-action='reply'] {
--neek-pill-icon: 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='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E");
}
.neek-pill[data-action='boost'] {
--neek-pill-icon: 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='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
}
.neek-pill[data-action='bookmark'] {
--neek-pill-icon: 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='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
.neek-pill[data-action='more'] {
--neek-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
}
.neek-pill[data-action='bookmark'][aria-pressed='true'] {
--neek-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
summary.neek-pill {
list-style: none;
&::-webkit-details-marker {
display: none;
}
}
@keyframes neek-pill-pop {
40% {
scale: 1.35;
}
}
.neek-stream-footer .neek-pill:is(:hover, :focus-visible) {
border-color: var(--neek-card-button-hover-bg);
background-color: var(--neek-card-button-hover-bg);
color: var(--neek-card-button-hover-text);
}
.neek-reactions-anchor {
position: relative;
display: inline-flex;
}
.neek-reactions-trigger {
gap: calc(var(--neek-space-unit) * 1);
padding-inline: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
&[aria-expanded='true'] {
background-color: var(--neek-pill-bg-hover);
}
}
.neek-reactions-picker {
position: absolute;
bottom: 100%;
left: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
margin-block-end: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 1);
border: var(--neek-border-width) solid var(--neek-popover-border);
border-radius: var(--neek-pill-radius);
background-color: var(--neek-popover-bg);
box-shadow: var(--neek-popover-shadow);
&[data-placement='below'] {
top: 100%;
bottom: auto;
margin-block: calc(var(--neek-space-unit) * 2) 0;
}
&:has(.neek-reactions-all) {
border-radius: var(--neek-radius-lg);
}
& .neek-reactions-choice {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 8);
height: calc(var(--neek-space-unit) * 8);
border-radius: var(--neek-radius-full);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
cursor: pointer;
transition: scale var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
scale: 1.25;
background-color: var(--neek-popover-item-hover);
}
}
}
.neek-reactions-quick {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
}
.neek-reactions-all {
display: grid;
grid-template-columns: repeat(8, calc(var(--neek-space-unit) * 8));
gap: calc(var(--neek-space-unit) * 0.5);
max-width: min(calc(var(--neek-space-unit) * 70), calc(100vw - var(--neek-space-unit) * 8));
max-height: calc(var(--neek-space-unit) * 60);
padding-block-start: calc(var(--neek-space-unit) * 1);
border-block-start: var(--neek-border-width) solid var(--neek-popover-border);
overflow-y: auto;
overscroll-behavior: contain;
&[data-state] {
grid-column: 1 / -1;
padding: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
}
}
.neek-reactions-group {
grid-column: 1 / -1;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 1) 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.neek-reactions-comments {
margin-inline-start: auto;
}
}
@layer neek.components {
.neek-audio {
padding: calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-audio-border);
border-radius: var(--neek-audio-radius);
background-color: var(--neek-audio-bg);
}
.neek-audio-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-audio-cover {
display: grid;
flex-shrink: 0;
place-items: center;
width: calc(var(--neek-space-unit) * 14);
height: calc(var(--neek-space-unit) * 14);
overflow: hidden;
border: 1px solid var(--neek-audio-cover-border);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-audio-cover-bg);
color: var(--neek-audio-cover-icon);
& > .neek-audio-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
& > svg {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
}
.neek-audio-toggle {
display: grid;
flex-shrink: 0;
place-items: center;
width: calc(var(--neek-space-unit) * 10);
height: calc(var(--neek-space-unit) * 10);
border-radius: var(--neek-radius-full);
background-color: var(--neek-audio-button-bg);
color: var(--neek-audio-button-text);
box-shadow: var(--neek-button-shadow);
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-audio-button-bg-hover);
color: var(--neek-audio-button-text-hover);
}
& > svg {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-audio-play {
translate: calc(var(--neek-space-unit) * 0.5) 0;
}
.neek-audio-pause,
.neek-audio[data-playing] .neek-audio-play {
display: none;
}
.neek-audio[data-playing] .neek-audio-pause {
display: block;
}
.neek-audio-skip {
display: grid;
flex-shrink: 0;
place-items: center;
width: calc(var(--neek-space-unit) * 8);
height: calc(var(--neek-space-unit) * 8);
padding: 0;
border: 0;
border-radius: var(--neek-radius-full);
background: none;
color: var(--neek-text-secondary);
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
& > svg {
width: 70%;
height: 70%;
}
&:hover {
background-color: var(--neek-bg-muted);
color: var(--neek-accent);
}
&:focus-visible {
outline: 2px solid var(--neek-accent);
outline-offset: 1px;
}
}
.neek-audio-speed {
flex-shrink: 0;
min-width: calc(var(--neek-space-unit) * 10);
padding: 0 calc(var(--neek-space-unit) * 1.5);
border: 1px solid var(--neek-audio-border);
border-radius: var(--neek-radius-full);
background: none;
color: var(--neek-text-secondary);
font: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
&:hover {
border-color: var(--neek-accent);
color: var(--neek-accent);
}
}
.neek-audio-info {
flex: 1 1 12rem;
min-width: 0;
}
.neek-audio-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-audio-progress {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
& > input {
flex: 1;
min-width: 0;
height: calc(var(--neek-space-unit) * 1);
accent-color: var(--neek-accent);
cursor: pointer;
}
}
.neek-audio-list {
margin-block-start: calc(var(--neek-space-unit) * 3);
border-block-start: 1px solid var(--neek-audio-list-border);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > li:not(:last-child) {
border-block-end: 1px solid var(--neek-audio-list-border);
}
& .neek-audio-item {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
width: 100%;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 1);
text-align: left;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease);
&:hover,
&[data-active] {
color: var(--neek-accent-text);
}
}
}
.neek-audio-number,
.neek-audio-duration {
flex-shrink: 0;
color: var(--neek-audio-list-number);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-audio-number {
width: calc(var(--neek-space-unit) * 5);
}
.neek-audio-track-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-audio-list[data-audio-chapters] {
margin-block: 0;
margin-inline-start: calc(var(--neek-space-unit) * 6);
border-block-start: 1px solid var(--neek-audio-list-border);
}
.neek-audio-item:not([data-active]) + .neek-audio-list[data-audio-chapters] {
display: none;
}
.neek-audio-cover-image:not([hidden]) + svg {
display: none;
}
}
@layer neek.components {
.neek-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
text-align: center;
& > .neek-tags {
justify-content: center;
}
}
.neek-hero-meta {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-hero-title {
max-width: 42rem;
font-family: var(--neek-type-title-font);
font-size: var(--neek-type-title-size);
line-height: var(--neek-type-title-leading);
font-weight: var(--neek-type-title-weight);
letter-spacing: var(--neek-type-title-tracking);
text-transform: var(--neek-type-title-transform);
color: var(--neek-type-title-color);
}
.neek-hero-excerpt {
max-width: 36rem;
font-family: var(--neek-type-subtitle-font);
font-size: var(--neek-type-subtitle-size);
line-height: var(--neek-type-subtitle-leading);
font-weight: var(--neek-type-subtitle-weight);
letter-spacing: var(--neek-type-subtitle-tracking);
text-transform: var(--neek-type-subtitle-transform);
color: var(--neek-type-subtitle-color);
}
.neek-hero-author {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
& > .p-author {
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
}
}
.neek-identity {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
text-align: center;
}
.neek-identity > .neek-avatar {
--neek-avatar-radius: var(--neek-identity-avatar-radius);
& > .neek-avatar-status {
right: calc(var(--neek-avatar-size) * 0.1464 - var(--neek-avatar-status-size) / 2);
bottom: calc(var(--neek-avatar-size) * 0.1464 - var(--neek-avatar-status-size) / 2);
}
}
.neek-identity-text > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 2);
}
.neek-identity-title-image {
display: block;
max-width: min(100%, calc(var(--neek-space-unit) * 80));
max-height: calc(var(--neek-space-unit) * 20);
margin-inline: auto;
object-fit: contain;
}
.neek-identity-name {
font-family: var(--neek-type-site-title-font);
font-size: var(--neek-type-site-title-size);
line-height: var(--neek-type-site-title-leading);
font-weight: var(--neek-type-site-title-weight);
letter-spacing: var(--neek-type-site-title-tracking);
text-transform: var(--neek-type-site-title-transform);
color: var(--neek-type-site-title-color);
& > a {
color: inherit;
text-decoration-line: none;
}
}
.neek-identity-bio {
max-width: 24rem;
margin-inline: auto;
font-family: var(--neek-type-site-description-font);
font-size: var(--neek-type-site-description-size);
line-height: var(--neek-type-site-description-leading);
font-weight: var(--neek-type-site-description-weight);
letter-spacing: var(--neek-type-site-description-tracking);
text-transform: var(--neek-type-site-description-transform);
color: var(--neek-type-site-description-color);
& a {
color: var(--neek-accent);
text-decoration-line: underline;
text-decoration-color: color-mix(in oklab, var(--neek-accent) 40%, transparent);
text-underline-offset: 2px;
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-accent-hover);
}
}
& strong {
color: light-dark(var(--neek-neutral-800), var(--neek-neutral-200));
font-weight: var(--neek-weight-semibold);
}
}
.neek-count-pill {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 3);
border: 1px solid var(--neek-social-border);
border-radius: var(--neek-pill-radius);
background-color: var(--neek-social-bg);
color: var(--neek-pill-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
& > svg {
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
color: var(--neek-accent);
}
}
.neek-identity-follow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-social-link {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border: 1px solid var(--neek-social-border);
border-radius: var(--neek-radius-full);
background-color: var(--neek-social-bg);
color: var(--neek-social-link-color);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), border-color var(--neek-duration) var(--neek-ease), scale var(--neek-duration) var(--neek-ease);
&:hover {
scale: var(--neek-social-hover-scale);
border-color: var(--neek-social-link-hover-color);
color: var(--neek-social-link-hover-color);
}
& > svg {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border: 1px solid var(--neek-button-secondary-border);
border-radius: var(--neek-button-radius);
background-color: var(--neek-button-secondary-bg);
color: var(--neek-button-secondary-text);
box-shadow: var(--neek-button-shadow);
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-button-secondary-bg-hover);
color: var(--neek-button-secondary-text-hover);
}
&:focus {
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 2px light-dark(var(--neek-neutral-50), var(--neek-neutral-950)), 0 0 0 4px var(--neek-button-ring), var(--neek-button-shadow);
}
& > svg {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-theme-toggle-sun,
[data-color-scheme='dark'] .neek-theme-toggle-moon {
display: none;
}
[data-color-scheme='dark'] .neek-theme-toggle-sun {
display: block;
}
.neek-theme-select {
--neek-theme-select-height: calc(var(--neek-space-unit) * 9);
--neek-theme-select-icon: calc(var(--neek-space-unit) * 3.5);
position: relative;
display: inline-flex;
align-items: center;
& > svg {
position: absolute;
right: calc((var(--neek-theme-select-height) - var(--neek-theme-select-icon) * 0.275) / 2 - var(--neek-theme-select-icon) * 0.25);
width: var(--neek-theme-select-icon);
height: var(--neek-theme-select-icon);
color: var(--neek-button-secondary-text);
pointer-events: none;
}
}
.neek-theme-select-input {
height: var(--neek-theme-select-height);
padding-inline: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 8);
border: var(--neek-border-width) solid var(--neek-button-secondary-border);
border-radius: var(--neek-button-radius);
background-color: var(--neek-button-secondary-bg);
color: var(--neek-button-secondary-text);
box-shadow: var(--neek-button-shadow);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
appearance: none;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-button-secondary-bg-hover);
color: var(--neek-button-secondary-text-hover);
}
&:focus {
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 2px light-dark(var(--neek-neutral-50), var(--neek-neutral-950)), 0 0 0 4px var(--neek-button-ring), var(--neek-button-shadow);
}
}
.neek-language-select {
display: inline-flex;
margin: 0;
}
.neek-dust {
position: fixed;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
opacity: var(--neek-dust-opacity);
pointer-events: none;
}
.neek-dialog {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding-inline: calc(var(--neek-space-unit) * 6);
background-color: var(--neek-dialog-backdrop);
backdrop-filter: blur(8px);
}
.neek-dialog-panel {
width: 100%;
max-width: var(--neek-dialog-width, var(--neek-container-sm));
padding: calc(var(--neek-space-unit) * 6);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-dialog-shadow);
& > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 5);
}
}
html:has(.neek-dialog:not([hidden])) {
overflow: hidden;
}
.neek-dialog-head {
display: flex;
align-items: flex-start;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-dialog-icon {
display: grid;
flex: none;
place-items: center;
width: calc(var(--neek-space-unit) * 10);
height: calc(var(--neek-space-unit) * 10);
border-radius: var(--neek-radius-md);
background-color: var(--neek-mark-bg);
color: var(--neek-mark-text);
& > svg {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-dialog-title {
color: var(--neek-text);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-dialog-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-dialog-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-progress {
height: calc(var(--neek-space-unit) * 2);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
& + .neek-hint {
margin-block-start: calc(var(--neek-space-unit) * 2);
}
}
.neek-progress-bar {
width: 0;
height: 100%;
border-radius: inherit;
background-color: var(--neek-text);
transition: width var(--neek-duration-slow) var(--neek-ease);
}
.neek-spinner {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
animation: neek-spin 1s linear infinite;
& > circle {
opacity: 0.25;
}
& > path {
opacity: 0.75;
}
}
@keyframes neek-spin {
to {
rotate: 360deg;
}
}
@media (prefers-reduced-motion: reduce) {
.neek-spinner {
animation-duration: 3s;
}
}
.neek-modal {
width: min(100% - var(--neek-frame-gutter) * 2, var(--neek-modal-width));
max-width: none;
max-height: calc(100dvh - var(--neek-space-unit) * 16);
margin: auto;
padding: 0;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
color: var(--neek-text);
box-shadow: var(--neek-dialog-shadow);
&::backdrop {
background-color: var(--neek-modal-backdrop);
backdrop-filter: var(--neek-modal-backdrop-filter);
}
&[open] {
animation: neek-modal-in var(--neek-duration-slow, 240ms) var(--neek-ease);
&::backdrop {
animation: neek-modal-fade var(--neek-duration-slow, 240ms) var(--neek-ease);
}
}
@media (prefers-reduced-motion: reduce) {
&[open],
&[open]::backdrop {
animation: none;
}
}
}
@keyframes neek-modal-in {
from {
opacity: 0;
translate: 0 calc(var(--neek-space-unit) * 3);
scale: 0.98;
}
}
@keyframes neek-modal-fade {
from {
opacity: 0;
}
}
html:has(.neek-modal[open]) {
overflow: hidden;
}
.neek-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 5);
border-block-end: var(--neek-border-width) solid var(--neek-border);
}
.neek-modal-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-modal-close {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border: 0;
border-radius: var(--neek-radius-md);
background: none;
color: var(--neek-meta-text);
cursor: pointer;
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
& > svg {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-modal-body {
padding: calc(var(--neek-space-unit) * 5);
}
.neek-table {
overflow-x: auto;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
& > .neek-table-element {
width: 100%;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: left;
}
& thead > tr {
border-block-end: 1px solid var(--neek-table-divider);
}
& tbody > tr:not(:last-child) {
border-block-end: 1px solid var(--neek-table-divider);
}
}
.neek-table[data-inset] {
--neek-table-inset: var(--neek-card-padding);
margin-inline: calc(var(--neek-table-inset) * -1);
border: 0;
border-block-start: 1px solid var(--neek-table-divider);
border-radius: 0;
background-color: transparent;
box-shadow: none;
@media (width >= 40rem) {
--neek-table-inset: var(--neek-card-padding-wide);
}
&:last-child {
margin-block-end: calc(var(--neek-table-inset) * -1);
}
& :is(.neek-th, .neek-td):first-child {
padding-inline-start: var(--neek-table-inset);
}
& :is(.neek-th, .neek-td):last-child {
padding-inline-end: var(--neek-table-inset);
}
}
.neek-th {
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 5);
color: var(--neek-table-head-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: inherit;
white-space: nowrap;
}
.neek-td {
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 5);
color: var(--neek-table-cell-text);
}
:is(.neek-th, .neek-td)[data-align='end'] {
text-align: end;
}
.neek-sort-link {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: inherit;
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
& > svg {
width: calc(var(--neek-space-unit) * 3);
height: calc(var(--neek-space-unit) * 3);
opacity: 0.35;
}
&[aria-current] > svg {
opacity: 1;
}
}
.neek-td-detail {
display: block;
margin-block-start: calc(var(--neek-space-unit) * 0.5);
color: var(--neek-text-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-guest {
height: 100%;
}
.neek-guest-page {
position: relative;
min-height: 100%;
}
.neek-guest-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--neek-container-lg);
margin-inline: auto;
padding: calc(var(--neek-space-unit) * 6);
}
.neek-guest-main {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--neek-container-sm);
margin-inline: auto;
padding: calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 6) calc(var(--neek-space-unit) * 16);
@media (width >= 40rem) {
padding-block-start: calc(var(--neek-space-unit) * 10);
}
& > .neek-alert {
margin-block-end: calc(var(--neek-space-unit) * 5);
}
& > .neek-card {
@media (width >= 40rem) {
padding: calc(var(--neek-space-unit) * 8);
}
}
}
.neek-guest-heading {
margin-block-end: calc(var(--neek-space-unit) * 8);
text-align: center;
& > .neek-guest-title {
font-family: var(--neek-font-heading);
color: var(--neek-type-site-title-color);
font-size: var(--neek-text-2xl);
line-height: var(--neek-text-2xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
& > .neek-guest-subtitle {
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
}
.neek-guest-footer {
margin-block-start: calc(var(--neek-space-unit) * 6);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: center;
}
}
@layer neek.components {
.neek-name {
--neek-name-step: 16px;
font-family: var(--neek-font-brand);
font-weight: 400;
font-size: 1.152em;
font-size: round(nearest, 1.152em, var(--neek-name-step));
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
@media (resolution >= 2dppx) {
.neek-name {
--neek-name-step: 8px;
}
}
.neek-logo-mark {
--neek-logo-mark-step: 11px;
display: block;
flex-shrink: 0;
height: var(--neek-logo-mark-size, calc(var(--neek-space-unit) * 8));
height: max(var(--neek-logo-mark-step), round(nearest, var(--neek-logo-mark-size, calc(var(--neek-space-unit) * 8)), var(--neek-logo-mark-step)));
aspect-ratio: 9 / 11;
color: var(--neek-text);
& > .neek-logo-mark-art {
display: block;
width: 100%;
height: 100%;
}
}
@media (resolution >= 2dppx) {
.neek-logo-mark {
--neek-logo-mark-step: 5.5px;
}
}
.neek-eyebrow .neek-name,
.neek-stream-context .neek-name {
font-size: round(up, 1.152em, var(--neek-name-step));
}
.neek-eyebrow {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.neek-eyebrow[data-marker]::before {
content: '';
width: 0.5em;
height: 0.5em;
background: var(--neek-rainbow);
background-size: 800% 100%;
animation: neek-rainbow-shift 6s linear infinite;
}
.neek-rainbow-text {
background-image: var(--neek-rainbow-text);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.neek-rainbow-text[data-animate] {
animation: neek-rainbow-shift 8s linear infinite;
}
.neek-rainbow-text[data-glow] {
position: relative;
display: inline-block;
padding-block: 0.1em 0.25em;
margin-block: -0.1em -0.25em;
isolation: isolate;
&::before {
content: attr(data-glow);
position: absolute;
inset: 0;
z-index: -1;
background: inherit;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: blur(var(--neek-rainbow-glow-blur));
opacity: var(--neek-rainbow-glow-strength);
animation: inherit;
pointer-events: none;
}
}
.neek-rainbow-border {
border: 1px solid transparent;
background:
linear-gradient(var(--neek-rainbow-fill, var(--neek-surface)), var(--neek-rainbow-fill, var(--neek-surface))) padding-box,
var(--neek-rainbow) border-box;
background-size: 100% 100%, 200% 100%;
}
.neek-rainbow-border[data-animate] {
animation: neek-rainbow-border-shift 8s linear infinite;
}
:where(.neek-rainbow-hover, .neek-button:not([data-variant='danger']), .neek-pill, .neek-tag, .neek-link-preview, .neek-social-link) {
position: relative;
isolation: isolate;
&::before {
content: '';
position: absolute;
inset: calc(var(--neek-rainbow-ring-edge, 0px) * -1);
z-index: 1;
padding: var(--neek-rainbow-ring-width);
border-radius: inherit;
background: var(--neek-rainbow);
background-size: 200% 100%;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0;
transition: opacity var(--neek-rainbow-hover-fade) var(--neek-ease);
animation: neek-rainbow-shift var(--neek-rainbow-hover-cycle) linear infinite paused;
pointer-events: none;
}
&::after {
content: '';
position: absolute;
inset: calc(var(--neek-rainbow-ring-edge, 0px) * -1);
z-index: -1;
border-radius: inherit;
box-shadow: var(--neek-rainbow-hover-glow);
opacity: 0;
transition: opacity var(--neek-rainbow-hover-fade) var(--neek-ease);
pointer-events: none;
}
&:is(:hover, :focus-visible):not(:disabled) {
&::before {
opacity: 1;
animation-play-state: running;
}
&::after {
opacity: 1;
}
}
}
:where(.neek-button[data-variant='secondary'], .neek-pill, .neek-tag, .neek-social-link) {
--neek-rainbow-ring-edge: 1px;
}
:where(.neek-link-preview) {
--neek-rainbow-ring-edge: var(--neek-border-width);
}
@keyframes neek-rainbow-shift {
to {
background-position: 200% 0;
}
}
@keyframes neek-rainbow-border-shift {
to {
background-position: 0 0, 200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
:where(.neek-rainbow-hover, .neek-button, .neek-pill, .neek-tag, .neek-link-preview, .neek-social-link)::before,
.neek-eyebrow[data-marker]::before,
.neek-rainbow-text[data-animate],
.neek-rainbow-border[data-animate] {
animation: none;
}
}
}
@layer neek.components {
.neek-app {
min-height: 100%;
}
.neek-app-page {
position: relative;
min-height: 100%;
}
.neek-frame {
width: min(100% - var(--neek-frame-gutter) * 2, var(--neek-frame-width));
margin-inline: auto;
}
.neek-header {
position: sticky;
top: 0;
z-index: 30;
border-block-end: 1px solid transparent;
transition: border-color var(--neek-duration-slow) var(--neek-ease);
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
transition: background-color var(--neek-duration-slow) var(--neek-ease), backdrop-filter var(--neek-duration-slow) var(--neek-ease);
}
}
.neek-header[data-scrolled] {
border-block-end-color: color-mix(in oklab, var(--neek-border) 70%, transparent);
&::before {
background-color: var(--neek-frost-bg);
backdrop-filter: var(--neek-frost);
}
}
.neek-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
width: min(100% - var(--neek-frame-gutter) * 2, var(--neek-frame-width));
height: var(--neek-header-height);
margin-inline: auto;
}
.neek-header-start {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 7);
min-width: 0;
}
.neek-header-end {
display: flex;
flex-shrink: 0;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-header-brand {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-brand-color);
font-size: var(--neek-text-base);
line-height: round(nearest, 1em, var(--neek-grid));
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
text-decoration-line: none;
& > :is(.neek-mark, .neek-logo) {
transition: rotate var(--neek-duration-slow) var(--neek-ease), box-shadow var(--neek-duration-slow) var(--neek-ease);
}
@media (hover: hover) {
&:hover > :is(.neek-mark, .neek-logo) {
rotate: -8deg;
box-shadow: var(--neek-gap-ring), 0 6px 20px -4px color-mix(in oklab, var(--neek-rainbow-violet) 60%, transparent);
}
}
}
.neek-nav {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 5);
}
.neek-nav-link {
color: var(--neek-nav-link-color);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration-line: none;
white-space: nowrap;
transition: color var(--neek-duration) var(--neek-ease);
&:hover,
&[aria-current] {
color: var(--neek-text);
}
}
.neek-menu {
position: relative;
& > summary {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
white-space: nowrap;
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
& > svg {
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
}
}
}
.neek-menu-panel {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
width: calc(var(--neek-space-unit) * 44);
margin-block-start: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 1.5);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-frost-bg);
box-shadow: var(--neek-popover-shadow);
backdrop-filter: var(--neek-frost);
& > form {
display: contents;
}
}
.neek-menu-link {
display: block;
width: 100%;
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
border: 0;
border-radius: var(--neek-radius-sm);
background: none;
color: var(--neek-text-secondary);
font: inherit;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: start;
text-decoration-line: none;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-menu-current-bg);
color: var(--neek-menu-current-text);
}
}
.neek-menu-divider {
margin: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * -1.5);
border: 0;
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
.neek-user-menu > summary {
color: var(--neek-text-secondary);
border-radius: var(--neek-radius-full);
&:hover {
color: var(--neek-text);
}
}
.neek-user-menu > .neek-menu-panel {
right: 0;
left: auto;
width: calc(var(--neek-space-unit) * 56);
}
.neek-user-menu-who {
display: flex;
flex-direction: column;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 3);
}
.neek-user-menu-name {
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-user-menu-handle {
overflow: hidden;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
}
.neek-header-burger {
display: none;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
margin-inline-start: calc(var(--neek-space-unit) * -2);
padding: 0;
border: 0;
border-radius: var(--neek-radius-md);
background: none;
color: var(--neek-text-secondary);
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
}
.neek-drawer {
position: fixed;
inset: 0 auto 0 0;
display: flex;
flex-direction: column;
width: min(100% - var(--neek-space-unit) * 12, calc(var(--neek-space-unit) * 80));
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0 var(--neek-frame-gutter) calc(var(--neek-space-unit) * 6);
border: 0;
border-inline-end: var(--neek-border-width) solid var(--neek-border);
background-color: var(--neek-bg);
color: var(--neek-text);
box-shadow: var(--neek-dialog-shadow);
overflow-y: auto;
overscroll-behavior: contain;
outline: none;
translate: -100% 0;
transition: translate var(--neek-duration-slow) var(--neek-ease), display var(--neek-duration-slow) allow-discrete, overlay var(--neek-duration-slow) allow-discrete;
&:not([open]) {
display: none;
}
&[open] {
translate: 0 0;
@starting-style {
translate: -100% 0;
}
}
&::backdrop {
background-color: transparent;
backdrop-filter: none;
transition: background-color var(--neek-duration-slow) var(--neek-ease), backdrop-filter var(--neek-duration-slow) var(--neek-ease), display var(--neek-duration-slow) allow-discrete, overlay var(--neek-duration-slow) allow-discrete;
}
&[open]::backdrop {
background-color: var(--neek-modal-backdrop);
backdrop-filter: var(--neek-modal-backdrop-filter);
@starting-style {
background-color: transparent;
backdrop-filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
&,
&::backdrop {
transition: none;
}
}
}
.neek-drawer-head {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
height: var(--neek-header-height);
margin-block-end: calc(var(--neek-space-unit) * 4);
}
.neek-drawer-close {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
margin-inline-end: calc(var(--neek-space-unit) * -2);
padding: 0;
border: 0;
border-radius: var(--neek-radius-md);
background: none;
color: var(--neek-meta-text);
cursor: pointer;
@media (hover: hover) {
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
}
.neek-drawer-nav {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
}
.neek-drawer-link {
display: block;
width: 100%;
padding: calc(var(--neek-space-unit) * 3);
border: 0;
background: none;
text-align: start;
cursor: pointer;
border-radius: var(--neek-radius-md);
color: var(--neek-nav-link-color);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-menu-current-bg);
color: var(--neek-menu-current-text);
}
}
.neek-drawer[data-side='end'] {
inset: 0 0 0 auto;
border-inline-start: var(--neek-border-width) solid var(--neek-border);
border-inline-end: 0;
translate: 100% 0;
& > .neek-drawer-head {
flex-direction: row-reverse;
}
& > .neek-drawer-head > .neek-drawer-close {
margin-inline: calc(var(--neek-space-unit) * -2) 0;
}
&[open] {
translate: 0 0;
@starting-style {
translate: 100% 0;
}
}
}
.neek-drawer-divider {
margin: calc(var(--neek-space-unit) * 2) 0;
border: 0;
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
.neek-drawer-form {
display: contents;
}
.neek-account-drawer-who {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-account-drawer-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.neek-header-account {
display: none;
padding: 0;
border: 0;
border-radius: var(--neek-radius-full);
background: none;
cursor: pointer;
}
.neek-drawer-group-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2);
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&[data-section] {
color: var(--neek-text);
}
}
.neek-drawer-group {
&::details-content {
opacity: 0;
transition: opacity var(--neek-duration-slow) var(--neek-ease), content-visibility var(--neek-duration-slow) allow-discrete;
}
&[open]::details-content {
opacity: 1;
}
@supports (interpolate-size: allow-keywords) {
interpolate-size: allow-keywords;
&::details-content {
block-size: 0;
overflow-y: clip;
transition: block-size var(--neek-duration-slow) var(--neek-ease), opacity var(--neek-duration-slow) var(--neek-ease), content-visibility var(--neek-duration-slow) allow-discrete;
}
&[open]::details-content {
block-size: auto;
}
}
@media (prefers-reduced-motion: reduce) {
&::details-content {
transition: none;
}
}
}
.neek-drawer-group-chevron {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
transition: rotate var(--neek-duration) var(--neek-ease);
.neek-drawer-group[open] > summary > & {
rotate: 180deg;
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
.neek-drawer-sub {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
padding-block: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2);
padding-inline-start: calc(var(--neek-space-unit) * 4);
}
.neek-drawer-sublink {
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-md);
color: color-mix(in oklab, var(--neek-nav-link-color) 80%, transparent);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-menu-current-bg);
color: var(--neek-menu-current-text);
}
}
@media (width < 52rem) {
.neek-header-start {
gap: calc(var(--neek-space-unit) * 2);
}
.neek-header-burger {
display: grid;
}
.neek-header-brand {
flex-shrink: 1;
min-width: 0;
}
.neek-header .neek-nav,
.neek-header-end :is(.neek-language-select, .neek-theme-select, .neek-theme-toggle) {
display: none;
}
.neek-header-end .neek-user-menu {
display: none;
}
.neek-header-account {
display: grid;
}
.neek-header-end {
gap: calc(var(--neek-space-unit) * 2);
}
}
@media (width >= 52rem) {
.neek-drawer {
display: none;
}
}
@media (width < 40rem) {
.neek-header-register {
display: none;
}
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: var(--neek-page-transition-duration);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none;
}
}
.neek-header-title {
overflow: hidden;
max-width: 16rem;
color: var(--neek-text);
font-size: var(--neek-text-base);
font-weight: var(--neek-weight-semibold);
line-height: var(--neek-text-base-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
}
@layer neek.components {
.neek-version {
position: fixed;
right: var(--neek-frame-gutter);
bottom: var(--neek-frame-gutter);
z-index: 20;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2.5);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-pill-radius);
background-color: var(--neek-frost-bg);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
backdrop-filter: var(--neek-frost);
user-select: all;
}
@media (width < 48rem) {
body:has(.neek-app-rail) .neek-version {
display: none;
}
}
}
@layer neek.components {
.neek-settings {
padding-block: calc(var(--neek-space-unit) * 8) calc(var(--neek-space-unit) * 20);
}
.neek-settings[data-rail] {
padding-block-end: 0;
@media (width >= 72rem) {
grid-template-columns: var(--neek-app-rail-width) minmax(0, calc(var(--neek-timeline-width) + var(--neek-app-aside-width) + var(--neek-space-unit) * 6));
}
& .neek-settings-layout {
grid-template-columns: minmax(0, 1fr);
margin-block-start: calc(var(--neek-space-unit) * 6);
}
}
.neek-settings-main {
min-width: 0;
}
.neek-settings-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-2xl);
line-height: var(--neek-text-2xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
.neek-settings-lede {
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-settings-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 6);
margin-block-start: calc(var(--neek-space-unit) * 8);
@media (width >= 48rem) {
grid-template-columns: var(--neek-settings-nav-width) minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 10);
}
}
.neek-settings-nav {
display: flex;
gap: calc(var(--neek-space-unit) * 1);
overflow-x: auto;
scrollbar-width: none;
@media (width >= 48rem) {
position: sticky;
top: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 6);
flex-direction: column;
align-self: flex-start;
overflow: visible;
}
}
.neek-settings-nav[data-pages] {
@media (width < 48rem) {
display: none;
}
}
.neek-settings-menu {
@media (width >= 48rem) {
display: none;
}
}
.neek-settings-menu-toggle {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2.5);
padding: calc(var(--neek-space-unit) * 2.5) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-card-bg);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
display: none;
}
&:focus-visible {
outline: 2px solid var(--neek-button-ring);
outline-offset: 2px;
}
}
.neek-settings-menu-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-settings-menu-chevron {
color: var(--neek-text-secondary);
transition: rotate var(--neek-duration) var(--neek-ease);
.neek-settings-menu[open] & {
rotate: 180deg;
}
}
.neek-settings-menu-list {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
margin-block-start: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 1.5);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
& .neek-settings-nav-link {
display: flex;
}
}
.neek-settings-nav-link {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2.5);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-sm);
color: var(--neek-nav-item-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
white-space: nowrap;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-nav-current-bg);
color: var(--neek-nav-current-text);
}
&[data-danger] {
color: var(--neek-danger);
}
}
.neek-settings-nav-icon {
color: var(--neek-settings-nav-icon);
}
.neek-settings-nav-link:is(:hover, [aria-current]) .neek-settings-nav-icon {
color: currentColor;
}
.neek-settings-sections {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 6);
min-width: 0;
}
.neek-settings-section {
scroll-margin-block-start: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 6);
padding: var(--neek-card-padding);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
@media (width >= 40rem) {
padding: var(--neek-card-padding-wide);
}
&[data-danger] {
border-color: var(--neek-danger-border);
}
}
.neek-settings-section-header {
margin-block-end: calc(var(--neek-space-unit) * 6);
}
.neek-settings-section-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
.neek-settings-section[data-danger] & {
color: var(--neek-danger-text);
}
}
.neek-settings-section-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-settings-section > :not(.neek-settings-section-header, :last-child) {
margin-block-end: calc(var(--neek-space-unit) * 5);
}
.neek-settings-section-header:has(> .neek-settings-section-actions) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: calc(var(--neek-space-unit) * 4);
}
.neek-settings-section-header > * {
grid-column: 1;
}
.neek-settings-section-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
grid-column: 2;
grid-row: 1 / span 2;
}
.neek-settings-page-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: calc(var(--neek-space-unit) * 4);
}
.neek-settings-page-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
overflow-wrap: anywhere;
}
.neek-settings-page-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-settings-page-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-settings-sections > .neek-tabs {
margin-block-end: 0;
}
.neek-settings-sections > form:has(> .neek-settings-section) {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 6);
}
.neek-settings-section :is(h3, h4):not([class]) {
margin-block: calc(var(--neek-space-unit) * 6) calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: 0;
}
.neek-settings-picture {
display: block;
margin-block: calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
object-fit: cover;
}
.neek-settings-avatar {
width: calc(var(--neek-space-unit) * 20);
height: calc(var(--neek-space-unit) * 20);
border-radius: var(--neek-radius-full);
}
.neek-settings-banner {
width: 100%;
max-width: calc(var(--neek-space-unit) * 120);
aspect-ratio: 3 / 1;
border-radius: var(--neek-radius-md);
}
}
@layer neek.components {
.neek-customizer {
--neek-customizer-sidebar: 22rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
block-size: calc(100dvh - var(--neek-header-height));
border-block-start: var(--neek-border-width) solid var(--neek-border);
@media (width >= 64rem) {
grid-template-columns: var(--neek-customizer-sidebar) minmax(0, 1fr);
}
}
.neek-customizer-sidebar {
display: flex;
flex-direction: column;
min-block-size: 0;
border-inline-end: var(--neek-border-width) solid var(--neek-border);
background-color: var(--neek-bg-muted);
.neek-customizer[data-view='preview'] & {
display: none;
@media (width >= 64rem) {
display: flex;
}
}
}
.neek-customizer-header {
display: flex;
align-items: flex-start;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
}
.neek-customizer-close {
display: inline-grid;
place-items: center;
flex: none;
inline-size: calc(var(--neek-space-unit) * 9);
block-size: calc(var(--neek-space-unit) * 9);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-sm);
color: var(--neek-text);
&:is(:hover, :focus-visible) {
background-color: var(--neek-surface-hover);
}
& .neek-icon {
inline-size: calc(var(--neek-space-unit) * 4.5);
block-size: calc(var(--neek-space-unit) * 4.5);
}
}
.neek-customizer-heading {
min-inline-size: 0;
}
.neek-customizer-eyebrow {
display: block;
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-customizer-title {
margin: 0;
overflow: hidden;
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-customizer-lede {
margin: 0;
overflow: hidden;
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-customizer-panels {
flex: 1;
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.neek-customizer-panel {
border-block-end: var(--neek-border-width) solid var(--neek-border);
}
.neek-customizer-panel-title {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 3.5) calc(var(--neek-space-unit) * 4);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&:hover {
background-color: var(--neek-surface-hover);
}
& .neek-icon {
flex: none;
inline-size: calc(var(--neek-space-unit) * 4.5);
block-size: calc(var(--neek-space-unit) * 4.5);
color: var(--neek-text-muted);
}
}
.neek-customizer-panel-label {
flex: 1;
}
.neek-customizer-panel-dirty {
display: none;
inline-size: calc(var(--neek-space-unit) * 2);
block-size: calc(var(--neek-space-unit) * 2);
border-radius: 9999px;
background-color: var(--neek-text);
.neek-customizer-panel[data-dirty] & {
display: block;
}
}
.neek-customizer-panel-chevron {
transition: rotate var(--neek-duration) var(--neek-ease);
.neek-customizer-panel[open] & {
rotate: 180deg;
}
}
.neek-customizer-panel-body {
padding: 0 calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 5);
.neek-customizer & .neek-settings-section {
margin-inline: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
}
.neek-customizer-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4);
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
.neek-customizer-devices {
display: none;
gap: calc(var(--neek-space-unit) * 1);
@media (width >= 64rem) {
display: flex;
}
}
.neek-customizer-device {
display: inline-grid;
place-items: center;
inline-size: calc(var(--neek-space-unit) * 9);
block-size: calc(var(--neek-space-unit) * 9);
border: var(--neek-border-width) solid transparent;
border-radius: var(--neek-radius-sm);
background: none;
color: var(--neek-text-muted);
cursor: pointer;
&:hover {
color: var(--neek-text);
}
&[aria-pressed='true'] {
border-color: var(--neek-border);
background-color: var(--neek-surface);
color: var(--neek-text);
}
& .neek-icon {
inline-size: calc(var(--neek-space-unit) * 4.5);
block-size: calc(var(--neek-space-unit) * 4.5);
}
}
.neek-customizer-toggle {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-surface);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
cursor: pointer;
@media (width >= 64rem) {
display: none;
}
& .neek-icon {
inline-size: calc(var(--neek-space-unit) * 4);
block-size: calc(var(--neek-space-unit) * 4);
}
}
.neek-customizer-preview {
display: none;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
min-block-size: 0;
padding: calc(var(--neek-space-unit) * 3);
background-color: var(--neek-bg-muted);
.neek-customizer[data-view='preview'] & {
display: flex;
}
@media (width >= 64rem) {
display: flex;
padding: calc(var(--neek-space-unit) * 4);
& > .neek-customizer-toggle {
display: none;
}
}
}
.neek-customizer-stage {
position: relative;
flex: 1;
inline-size: 100%;
margin-inline: auto;
transition: inline-size var(--neek-duration-slow) var(--neek-ease);
.neek-customizer-preview[data-device='tablet'] & {
inline-size: min(100%, 48rem);
}
.neek-customizer-preview[data-device='phone'] & {
inline-size: min(100%, 23.4375rem);
}
}
.neek-customizer-frame {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg);
box-shadow: var(--neek-card-shadow);
&[data-loading] {
visibility: hidden;
}
}
}
@layer neek.components {
.neek-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-filter-pill {
--neek-rainbow-ring-edge: 1px;
display: inline-flex;
flex-shrink: 0;
align-items: center;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 3);
border: 1px solid var(--neek-border);
border-radius: var(--neek-radius-full);
background-color: var(--neek-button-secondary-bg);
color: var(--neek-text-secondary);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
white-space: nowrap;
text-transform: uppercase;
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-text);
}
&[aria-current] {
--neek-rainbow-ring-edge: 0px;
border-width: 0;
background-color: var(--neek-button-bg);
color: var(--neek-button-text);
}
}
.neek-feed-bar {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
& > .neek-filter {
flex: 1;
flex-wrap: nowrap;
min-width: 0;
margin-block: calc(var(--neek-space-unit) * -1);
padding-block: calc(var(--neek-space-unit) * 1);
overflow-x: auto;
scrollbar-width: none;
}
& > .neek-button {
flex-shrink: 0;
}
@media (width < 52rem) {
& > .neek-button {
display: none;
}
}
}
}
@layer neek.components {
.neek-app-view {
--neek-app-column-top: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 6);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 6);
padding-block-start: calc(var(--neek-space-unit) * 6);
& > :not(.neek-app-rail, .neek-app-aside) {
margin-block-end: calc(var(--neek-space-unit) * 24);
}
@media (width >= 48rem) {
grid-template-columns: var(--neek-app-rail-width) minmax(0, var(--neek-timeline-width));
justify-content: center;
}
@media (width >= 72rem) {
grid-template-columns: var(--neek-app-rail-width) minmax(0, var(--neek-timeline-width)) var(--neek-app-aside-width);
}
&[data-layout="single"] > * {
@media (width >= 48rem) {
grid-column: 2;
}
}
}
.neek-timeline-column {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 4);
min-width: 0;
@media (width < 52rem) {
& > .neek-feed-bar {
margin-block: calc(var(--neek-space-unit) * -3) calc(var(--neek-space-unit) * -1);
}
& > .neek-feed-bar + .neek-timeline-new {
margin-block-end: calc(var(--neek-space-unit) * -4);
}
}
}
.neek-feed {
display: flex;
flex-direction: column;
gap: var(--neek-stream-gap);
min-width: 0;
@media (width < 52rem) {
& > .neek-timeline-new {
margin-block-end: calc(var(--neek-stream-gap) * -1);
}
}
}
.neek-app-rail {
position: fixed;
inset: auto 0 0;
z-index: 25;
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 1.5 + env(safe-area-inset-bottom));
border-block-start: var(--neek-border-width) solid var(--neek-border);
background-color: var(--neek-frost-bg);
backdrop-filter: var(--neek-frost);
@media (width >= 48rem) {
position: sticky;
inset: auto;
top: var(--neek-app-column-pin, var(--neek-app-column-top));
align-self: flex-start;
padding: 0;
border: 0;
background: none;
backdrop-filter: none;
}
}
.neek-app-rail-list {
display: flex;
justify-content: space-around;
margin: 0;
padding: 0;
list-style: none;
@media (width >= 48rem) {
flex-direction: column;
justify-content: flex-start;
gap: calc(var(--neek-space-unit) * 1);
}
}
.neek-app-rail-item {
display: flex;
flex-direction: column;
}
.neek-app-rail-link {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 0.5);
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 1);
border-radius: var(--neek-radius-md);
color: var(--neek-nav-item-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
& > svg {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-nav-current-bg);
color: var(--neek-nav-current-text);
}
&[data-section] {
color: var(--neek-text);
font-weight: var(--neek-weight-semibold);
@media (width < 48rem) {
background-color: var(--neek-nav-current-bg);
color: var(--neek-nav-current-text);
}
}
@media (width >= 48rem) {
flex-direction: row;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 2.5) calc(var(--neek-space-unit) * 3);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
}
@media (width < 36rem) {
.neek-app-rail-item {
flex: 1 1 0;
min-width: 0;
}
.neek-app-rail-link {
padding: calc(var(--neek-space-unit) * 2.5) 0;
&:is([aria-current], [data-section]) > svg {
stroke-width: 2.4;
}
}
.neek-app-rail-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.neek-app-rail-badge {
position: absolute;
top: calc(var(--neek-space-unit) * 0.5);
left: 50%;
min-width: calc(var(--neek-space-unit) * 4.5);
padding-inline: calc(var(--neek-space-unit) * 1);
border-radius: var(--neek-radius-full);
background-color: var(--neek-rail-badge-bg);
color: var(--neek-rail-badge-text);
font-size: 10px;
line-height: calc(var(--neek-space-unit) * 4.5);
font-weight: var(--neek-weight-semibold);
text-align: center;
@media (width >= 48rem) {
position: static;
margin-inline-start: auto;
}
}
.neek-app-rail-children {
--neek-rail-branch-x: calc(var(--neek-space-unit) * 6);
--neek-rail-branch-tick: calc(var(--neek-space-unit) * 3);
display: none;
margin: 0;
padding: calc(var(--neek-space-unit) * 0.5) 0 0;
list-style: none;
@media (width >= 48rem) {
display: block;
}
}
.neek-app-rail-child {
position: relative;
padding-inline-start: calc(var(--neek-rail-branch-x) + var(--neek-rail-branch-tick) + var(--neek-space-unit));
&::before,
&::after {
content: "";
position: absolute;
inset-inline-start: calc(var(--neek-rail-branch-x) - var(--neek-border-width) / 2);
pointer-events: none;
border-color: var(--neek-border-strong);
border-style: solid;
border-width: 0;
}
&::before {
inset-block: 0;
border-inline-start-width: var(--neek-border-width);
}
&::after {
top: 50%;
width: var(--neek-rail-branch-tick);
border-block-start-width: var(--neek-border-width);
}
&:last-child::before {
bottom: auto;
height: 50%;
}
}
.neek-app-rail-child-link {
display: flex;
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-md);
color: var(--neek-nav-item-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-nav-current-bg);
color: var(--neek-nav-current-text);
}
&[data-danger] {
color: var(--neek-danger);
}
}
.neek-timeline {
min-width: 0;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
}
.neek-timeline-header {
position: sticky;
top: var(--neek-header-offset, var(--neek-header-height));
z-index: 10;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
background-color: var(--neek-frost-bg);
backdrop-filter: var(--neek-frost);
}
.neek-timeline-title {
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-timeline-tabs {
display: flex;
gap: calc(var(--neek-space-unit) * 1);
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
& > .neek-timeline-tab {
flex-shrink: 0;
white-space: nowrap;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-full);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-bg-muted);
color: var(--neek-text);
}
}
}
.neek-composer {
display: flex;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
& > form {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
& textarea {
width: 100%;
min-height: calc(var(--neek-space-unit) * 12);
padding: 0;
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
resize: none;
field-sizing: content;
&:focus {
outline: none;
}
&::placeholder {
color: var(--neek-meta-text);
}
}
}
.neek-composer-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
& > select {
flex: 0 1 auto;
min-width: 0;
}
& > .neek-button {
flex-shrink: 0;
}
}
.neek-composer[data-dragover] {
outline: 2px dashed var(--neek-accent);
outline-offset: calc(var(--neek-space-unit) * -2);
}
.neek-composer-media {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--neek-space-unit) * 32), 1fr));
gap: calc(var(--neek-space-unit) * 2);
&[hidden] {
display: none;
}
}
.neek-composer-image {
position: relative;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
}
.neek-composer-thumb {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
}
.neek-composer-alt {
width: 100%;
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: transparent;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
&::placeholder {
color: var(--neek-meta-text);
}
&:focus-visible {
outline: 2px solid var(--neek-button-ring);
outline-offset: 1px;
}
}
.neek-composer-remove {
position: absolute;
top: calc(var(--neek-space-unit) * 1.5);
right: calc(var(--neek-space-unit) * 1.5);
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 7);
height: calc(var(--neek-space-unit) * 7);
padding: 0;
border: 0;
border-radius: var(--neek-radius-full);
background-color: color-mix(in oklab, #000000 65%, transparent);
color: #ffffff;
cursor: pointer;
& > svg {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-composer-check {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
cursor: pointer;
}
.neek-composer-error {
margin: 0;
color: var(--neek-danger-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&:empty {
display: none;
}
}
.neek-composer-tools {
display: flex;
flex: 1;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
}
.neek-composer-tool {
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border-radius: var(--neek-radius-full);
color: var(--neek-accent);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-bg-muted);
}
&:has(:focus-visible) {
outline: 2px solid var(--neek-button-ring);
outline-offset: 1px;
}
& > svg {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-composer-count {
flex-shrink: 0;
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
font-variant-numeric: tabular-nums;
&[data-over] {
color: var(--neek-danger-text);
font-weight: var(--neek-weight-semibold);
}
}
.neek-composer[data-size='compact'] {
padding: calc(var(--neek-space-unit) * 3);
& textarea {
min-height: calc(var(--neek-space-unit) * 9);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
}
.neek-composer[data-size='page'] {
border: 0;
& textarea {
min-height: calc(var(--neek-space-unit) * 48);
}
}
.neek-composer-types {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
padding: 0;
border: 0;
}
.neek-composer-type {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
height: calc(var(--neek-space-unit) * 8);
padding: 0 calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-full);
background-color: transparent;
color: var(--neek-text-secondary);
font: inherit;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease), border-color var(--neek-duration) var(--neek-ease);
&:hover {
border-color: var(--neek-border-strong);
}
&:focus-visible {
outline: 2px solid var(--neek-button-ring);
outline-offset: 1px;
}
&[aria-pressed='true'] {
border-color: var(--neek-accent);
background-color: var(--neek-composer-type-pressed-bg);
color: var(--neek-text);
}
& > .neek-icon {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-composer-title {
width: 100%;
padding: 0;
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
&:focus {
outline: none;
}
&::placeholder {
color: var(--neek-meta-text);
}
}
.neek-composer[data-dragover] .neek-composer-drop {
border-color: var(--neek-accent);
background-color: color-mix(in oklab, var(--neek-accent) 8%, transparent);
color: var(--neek-text);
}
.neek-composer-record {
display: none;
:root[data-can-record] & {
display: inline-flex;
}
&[hidden] {
display: none;
}
&[data-recording] {
border-color: var(--neek-danger-text);
color: var(--neek-danger-text);
}
}
.neek-composer-record-time {
font-variant-numeric: tabular-nums;
&:empty {
display: none;
}
}
.neek-composer[data-dragover]:has(.neek-composer-drop:not([hidden])) {
outline: none;
}
.neek-composer-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--neek-space-unit) * 48)), 1fr));
gap: calc(var(--neek-space-unit) * 3);
&[hidden] {
display: none;
}
& > .neek-field[data-span='full'] {
grid-column: 1 / -1;
}
}
.neek-composer-options {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
padding: 0;
& > li {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
& .neek-input {
flex: 1;
min-width: 0;
}
}
.neek-composer-tray {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--neek-space-unit) * 36), 1fr));
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
padding: 0;
&:empty,
&[hidden] {
display: none;
}
}
.neek-composer-file {
position: relative;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1.5);
min-width: 0;
margin: 0;
&[data-state='uploading'] .neek-composer-thumb {
opacity: 0.6;
}
&[data-state='failed'] .neek-composer-thumb,
&[data-state='failed'] .neek-composer-file-card {
border-color: var(--neek-danger-border);
}
}
.neek-composer-file-card {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-height: calc(var(--neek-space-unit) * 14);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 10) calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
& > .neek-icon {
flex: none;
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
color: var(--neek-accent);
}
}
.neek-composer-file-name {
display: flex;
flex-direction: column;
min-width: 0;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > small {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
}
}
.neek-composer-progress {
height: calc(var(--neek-space-unit) * 1);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
& > span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background-color: var(--neek-accent);
transition: width var(--neek-duration) var(--neek-ease);
}
.neek-composer-file:not([data-state='uploading']) > & {
display: none;
}
}
.neek-composer-file-error {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
color: var(--neek-danger-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
.neek-composer-file:not([data-state='failed']) > & {
display: none;
}
}
.neek-composer-settings {
border-block-start: var(--neek-border-width) solid var(--neek-border);
padding-block-start: calc(var(--neek-space-unit) * 3);
& > summary {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&::before {
content: '';
width: calc(var(--neek-space-unit) * 1.5);
height: calc(var(--neek-space-unit) * 1.5);
border-block-end: 1.5px solid currentColor;
border-inline-end: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--neek-duration) var(--neek-ease);
}
}
&[open] > summary {
margin-block-end: calc(var(--neek-space-unit) * 3);
&::before {
transform: rotate(45deg);
}
}
}
.neek-composer-saved {
flex-shrink: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
&:empty {
display: none;
}
}
.neek-composer [data-field-error]:empty {
display: none;
}
.neek-timeline-new {
position: sticky;
top: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 2);
z-index: 29;
display: flex;
justify-content: center;
height: 0;
& > button {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
height: max-content;
margin-block-start: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3.5);
border: 0;
border-radius: var(--neek-radius-full);
--neek-button-color: var(--neek-timeline-new-bg);
--neek-button-brighten: var(--neek-timeline-new-brighten);
--neek-button-angle: var(--neek-timeline-new-angle);
background-color: var(--neek-timeline-new-bg);
background-image: var(--neek-button-fill);
color: var(--neek-timeline-new-text, #ffffff);
box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--neek-timeline-new-bg) 60%, transparent);
font: inherit;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
cursor: pointer;
@supports (color: oklch(from red l c h)) {
color: var(--neek-timeline-new-text, oklch(from var(--neek-timeline-new-bg) clamp(0, (var(--neek-button-dark-text-from) - l) * 1000, 1) 0 0));
}
}
}
.neek-post {
position: relative;
display: grid;
grid-template-columns: var(--neek-post-avatar) minmax(0, 1fr);
gap: 0 calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
transition: background-color var(--neek-duration) var(--neek-ease);
&:last-child {
border-block-end: 0;
}
&:hover {
background-color: color-mix(in oklab, var(--neek-surface-hover) 50%, transparent);
}
& > .neek-avatar {
grid-row: span 6;
align-self: start;
}
&[data-thread]::before {
content: '';
position: absolute;
top: calc(var(--neek-space-unit) * 4 + var(--neek-post-avatar) + var(--neek-space-unit) * 1.5);
bottom: calc(var(--neek-space-unit) * -2.5);
left: calc(var(--neek-space-unit) * 4 + var(--neek-post-avatar) / 2 - 1px);
z-index: 1;
width: 2px;
border-radius: 1px;
background-color: var(--neek-border-strong);
}
&[data-thread] {
border-block-end-color: transparent;
}
}
.neek-post[data-focus] {
&:hover {
background-color: transparent;
}
& > .neek-post-body {
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
}
}
.neek-post[data-tombstone] {
grid-template-columns: minmax(0, 1fr);
&:hover {
background-color: transparent;
}
}
.neek-post-tombstone {
margin: 0;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) dashed var(--neek-border-strong);
border-radius: var(--neek-radius-md);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
:is(.neek-replies, .neek-reply-thread) {
display: flex;
flex-direction: column;
min-width: 0;
& > .neek-stream-item {
--neek-card-padding: 0;
width: auto;
max-width: none;
margin: 0;
padding-block: calc(var(--neek-space-unit) * 5);
gap: calc(var(--neek-space-unit) * 4);
border: 0;
& > .neek-stream-card {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
backdrop-filter: none;
&::before,
&::after {
display: none;
}
}
& > .neek-stream-footer {
padding-inline: 0;
}
& .neek-media[data-flush] {
margin-block: 0;
& > .neek-media-frame {
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-media-radius);
}
}
& > .neek-stream-card > * + .neek-media[data-flush] {
margin-block-start: calc(var(--neek-space-unit) * 4);
}
& > .neek-stream-card > .neek-stream-meta + :is(*, .neek-media[data-flush]) {
margin-block-start: calc(var(--neek-space-unit) * 5);
}
& .neek-gallery[data-flush] .neek-gallery-track {
border-inline: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
}
}
}
.neek-replies > .neek-stream-item + .neek-stream-item {
border-block-start: var(--neek-border-width) solid var(--neek-card-border);
}
.neek-reply-thread {
--neek-reply-thread-avatar: calc(var(--neek-space-unit) * 11);
--neek-reply-thread-pad: calc(var(--neek-space-unit) * 5);
--neek-reply-thread-inset: 0px;
& > .neek-stream-item[data-parent] {
& > .neek-stream-card > :not(.neek-pattern, .neek-stream-item-backdrop, .neek-stream-meta),
& > .neek-stream-footer {
margin-inline-start: calc(var(--neek-reply-thread-avatar) + var(--neek-space-unit) * 3);
}
&::after {
content: '';
display: block;
position: absolute;
inset: auto;
top: calc(var(--neek-reply-thread-pad) + var(--neek-reply-thread-avatar) + var(--neek-space-unit) * 1.5);
bottom: calc((var(--neek-reply-thread-pad) - var(--neek-space-unit) * 1.5) * -1);
left: calc(var(--neek-reply-thread-avatar) / 2 - 1px);
z-index: 0;
width: 2px;
border-radius: 1px;
background-color: var(--neek-border-strong);
box-shadow: none;
opacity: 1;
transition: none;
}
}
}
.neek-timeline-column > .neek-app-post-back {
display: flex;
padding-inline: calc(var(--neek-card-padding) + var(--neek-border-width));
@media (width < 40rem) {
margin-inline: calc(var(--neek-stream-bleed) * -1);
padding-inline: var(--neek-card-padding);
}
}
.neek-app-post {
&:not(:has(> .neek-app-post-replies:empty)) {
& > .neek-stream-item > .neek-stream-card {
border-width: 0;
box-shadow: none;
}
& > .neek-stream-item:has(> .neek-stream-footer) {
gap: calc(var(--neek-space-unit) * 4);
padding-block-end: var(--neek-card-padding);
& > .neek-stream-card {
padding-block-end: 0;
}
& > .neek-stream-footer {
padding-inline: var(--neek-card-padding);
}
}
}
&:has(> .neek-stream-item):has(> .neek-app-post-replies:empty) {
display: flex;
flex-direction: column;
gap: var(--neek-stream-gap);
margin-inline: 0;
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
& > .neek-app-post-replies {
display: none;
}
& > .neek-app-post-reply {
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
}
@media (width < 40rem) {
& > :is(.neek-stream-item, .neek-app-post-reply) {
margin-inline: calc(var(--neek-stream-bleed) * -1);
}
& > .neek-app-post-reply {
border-inline-width: 0;
border-radius: 0;
box-shadow: none;
}
}
}
& > .neek-reply-thread {
--neek-reply-thread-inset: var(--neek-card-padding);
padding-inline: var(--neek-card-padding);
border-radius: inherit;
& > .neek-stream-item:first-child {
border-radius: inherit;
}
}
& > .neek-app-post-replies > .neek-replies {
--neek-app-post-inset: var(--neek-card-padding);
& > .neek-stream-item {
padding-inline: var(--neek-app-post-inset);
}
}
& > .neek-app-post-reply,
& > .neek-app-post-replies > .neek-replies > :is(.neek-stream-item, .neek-thread-more),
& > .neek-app-post-replies > .neek-thread-more {
border-block-start: var(--neek-border-width) solid var(--neek-card-border);
}
& > .neek-app-post-reply > :is(.neek-composer, .neek-thread-more),
& > .neek-app-post-replies > .neek-thread-more {
border-block-end: 0;
}
& > .neek-app-post-reply > .neek-composer {
padding-inline: var(--neek-card-padding);
}
& > .neek-app-post-reply:not(:target, :focus-within) {
display: none;
}
}
.neek-thread-more {
display: flex;
justify-content: center;
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
}
.neek-post-context {
grid-column: 2;
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin-block-end: calc(var(--neek-space-unit) * 1);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
& > svg {
width: calc(var(--neek-space-unit) * 3.5);
height: calc(var(--neek-space-unit) * 3.5);
flex-shrink: 0;
}
& > .neek-post-context-link {
color: inherit;
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
&[data-kind='boost'] > svg {
color: var(--neek-rainbow-green);
}
&[data-kind='page'] > svg {
color: var(--neek-accent);
}
&[data-kind='mention'] > svg {
color: var(--neek-rainbow-blue);
}
}
.neek-post-tier {
flex-shrink: 0;
padding: 0 calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: color-mix(in oklab, var(--neek-rainbow-yellow) 18%, transparent);
color: var(--neek-text);
font-size: var(--neek-text-xs);
line-height: calc(var(--neek-space-unit) * 5);
font-weight: var(--neek-weight-medium);
}
.neek-post-head {
grid-column: 2;
display: flex;
align-items: baseline;
gap: calc(var(--neek-space-unit) * 1.5);
min-width: 0;
white-space: nowrap;
}
.neek-post-name {
overflow: hidden;
color: var(--neek-text);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
text-overflow: ellipsis;
&:hover {
text-decoration-line: underline;
}
}
.neek-post-handle {
overflow: hidden;
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
text-overflow: ellipsis;
}
.neek-post-time {
flex-shrink: 0;
margin-inline-start: auto;
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
}
.neek-post > :is(.neek-tags, .neek-stream-tagline, .neek-stream-footer) {
grid-column: 2;
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-post-note {
grid-column: 2;
margin: calc(var(--neek-space-unit) * 1) 0 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-post[data-hidden] :is(.neek-post-body, .neek-post-media, .neek-post-gallery) {
opacity: 0.6;
}
.neek-post-body {
grid-column: 2;
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text);
overflow-wrap: anywhere;
& > p {
margin: 0;
text-wrap: pretty;
}
& > p + p {
margin-block-start: var(--neek-post-paragraph-gap);
}
& > .neek-post-heading {
margin: calc(var(--neek-space-unit) * 5) 0 calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
text-wrap: balance;
&:first-child {
margin-block-start: 0;
}
&[data-level='3'] {
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
}
& > .neek-post-heading + p {
margin-block-start: 0;
}
& > :is(ul, ol) {
margin: 0;
padding-inline-start: calc(var(--neek-space-unit) * 6);
text-wrap: pretty;
& > li + li {
margin-block-start: calc(var(--neek-space-unit) * 1);
}
}
& > ul {
list-style: disc;
}
& > ol {
list-style: decimal;
}
& > blockquote {
margin: 0;
padding-inline-start: calc(var(--neek-space-unit) * 4);
border-inline-start: calc(var(--neek-space-unit) * 0.75) solid var(--neek-border-strong);
color: var(--neek-text-secondary);
& > p {
margin: 0;
}
& > p + p {
margin-block-start: var(--neek-post-paragraph-gap);
}
}
& > :is(p, ul, ol, blockquote) + :is(ul, ol, blockquote),
& > :is(ul, ol, blockquote) + p {
margin-block-start: var(--neek-post-paragraph-gap);
}
& > .neek-post-heading + :is(ul, ol, blockquote) {
margin-block-start: 0;
}
& .neek-post-mention,
& .neek-post-tag {
color: var(--neek-accent);
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
}
.neek-post-cw {
grid-column: 2;
margin-block-start: calc(var(--neek-space-unit) * 1);
& > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 2.5) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) dashed var(--neek-border-strong);
border-radius: var(--neek-radius-md);
color: var(--neek-text);
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
&::after {
content: 'Show';
flex-shrink: 0;
padding: calc(var(--neek-space-unit) * 0.5) calc(var(--neek-space-unit) * 2.5);
border-radius: var(--neek-radius-full);
background-color: var(--neek-bg-muted);
color: var(--neek-text-secondary);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.08em;
text-transform: uppercase;
}
}
&[open] > summary::after {
content: 'Hide';
}
& > .neek-post-body,
& > .neek-post-media {
grid-column: auto;
}
}
.neek-post-media {
grid-column: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(var(--neek-space-unit) * 1);
margin-block-start: calc(var(--neek-space-unit) * 3);
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
aspect-ratio: 16 / 9;
&[data-count='1'] {
grid-template-columns: minmax(0, 1fr);
aspect-ratio: auto;
max-height: calc(var(--neek-space-unit) * 130);
}
&[data-count='3'] > :first-child {
grid-row: span 2;
}
& > a,
& > img {
display: block;
min-height: 0;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: var(--neek-bg-muted);
}
& > video {
display: block;
width: 100%;
height: 100%;
max-height: inherit;
background-color: var(--neek-bg-muted);
}
&[data-kind='audio'] {
overflow: visible;
border: 0;
border-radius: 0;
& > audio {
display: block;
width: 100%;
}
}
}
.neek-post-downloads {
grid-column: 2;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
margin-block-start: calc(var(--neek-space-unit) * 3);
padding: 0;
& > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: calc(var(--neek-space-unit) * 2);
}
& small {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
}
}
.neek-post-media-pending {
display: grid;
place-items: center;
min-height: calc(var(--neek-space-unit) * 40);
aspect-ratio: var(--neek-media-ratio, 4 / 3);
background-color: var(--neek-bg-muted);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
animation: neek-pending 1.6s var(--neek-ease) infinite alternate;
.neek-post-media[data-count='1'] > & {
max-height: calc(var(--neek-space-unit) * 130);
}
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
@keyframes neek-pending {
to {
opacity: 0.6;
}
}
.neek-post > .neek-link-preview {
grid-column: 2;
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-post-embed {
grid-column: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-block-start: calc(var(--neek-space-unit) * 3);
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
color: inherit;
text-decoration-line: none;
transition: border-color var(--neek-duration) var(--neek-ease);
&:hover {
border-color: var(--neek-border-strong);
}
& > img {
width: 100%;
height: calc(var(--neek-space-unit) * 36);
object-fit: cover;
}
}
.neek-post-embed-body {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
padding: calc(var(--neek-space-unit) * 3);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > strong {
color: var(--neek-text);
}
& > span {
color: var(--neek-text-secondary);
}
& > small {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
letter-spacing: 0.04em;
}
}
.neek-post-quote {
padding: calc(var(--neek-space-unit) * 3);
& .neek-post-head {
display: flex;
align-items: center;
}
& > p {
margin: calc(var(--neek-space-unit) * 1) 0 0;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-post-embed[data-unavailable] > & > p {
margin: 0;
color: var(--neek-meta-text);
}
}
.neek-post-embed[data-quote='full'] {
cursor: pointer;
& > .neek-post-quote {
--neek-card-padding: calc(var(--neek-space-unit) * 3);
padding: var(--neek-card-padding);
}
& .neek-post-cw {
margin-block-start: calc(var(--neek-space-unit) * 3);
}
}
.neek-post-quote-content {
display: flex;
flex-direction: column;
min-width: 0;
margin-block-start: calc(var(--neek-space-unit) * 3);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > :is(*, .neek-media[data-flush]) {
grid-column: auto;
margin-block: 0;
}
& > * + :is(*, .neek-media[data-flush]) {
margin-block-start: calc(var(--neek-space-unit) * 3);
}
& > .neek-stream-title {
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
& > .neek-stream-title + :is(p, .neek-post-body) {
margin-block-start: var(--neek-stream-title-gap);
}
.neek-post-embed[data-quote] & .neek-media[data-flush] {
margin-block-end: 0;
& > .neek-media-frame {
margin-inline: calc(var(--neek-card-padding) * -1);
border: 0;
border-radius: 0;
}
}
.neek-post-embed[data-quote] & .neek-gallery[data-flush] .neek-gallery-track {
border-inline: 0;
border-radius: 0;
}
}
.neek-post-edited {
flex-shrink: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-post-menu {
margin-inline-start: auto;
& > summary {
list-style: none;
}
& > .neek-menu-panel {
right: 0;
left: auto;
width: calc(var(--neek-space-unit) * 40);
}
& .neek-menu-link[data-variant='danger'] {
color: var(--neek-danger-text);
}
}
.neek-post-actions {
grid-column: 2;
display: flex;
justify-content: space-between;
max-width: calc(var(--neek-space-unit) * 110);
margin-block-start: calc(var(--neek-space-unit) * 2);
margin-inline-start: calc(var(--neek-space-unit) * -2);
}
.neek-post-action {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 2);
border: 0;
border-radius: var(--neek-radius-full);
background: none;
color: var(--neek-meta-text);
font: inherit;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
& > svg {
width: calc(var(--neek-space-unit) * 4.5);
height: calc(var(--neek-space-unit) * 4.5);
transition: scale var(--neek-duration) var(--neek-ease);
}
&:hover {
background-color: color-mix(in oklab, var(--neek-post-action-color, var(--neek-accent)) 12%, transparent);
color: var(--neek-post-action-color, var(--neek-accent));
}
&[data-action='boost'] {
--neek-post-action-color: var(--neek-rainbow-green);
}
&[data-action='like'] {
--neek-post-action-color: var(--neek-rainbow-pink);
}
&[data-action='bookmark'] {
--neek-post-action-color: var(--neek-rainbow-orange);
}
&[aria-pressed='true'] {
color: var(--neek-post-action-color, var(--neek-accent));
& > svg {
fill: currentColor;
}
}
&[data-action='boost'][aria-pressed='true'] > svg {
fill: none;
}
text-decoration-line: none;
&[aria-pressed='true'][data-just-pressed] > svg {
animation: neek-post-pop 400ms var(--neek-ease);
}
}
@keyframes neek-post-pop {
40% {
scale: 1.35;
}
}
.neek-compose-fab {
position: fixed;
right: var(--neek-frame-gutter);
bottom: calc(var(--neek-space-unit) * 20 + env(safe-area-inset-bottom));
z-index: 26;
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 14);
height: calc(var(--neek-space-unit) * 14);
border-radius: var(--neek-radius-full);
background-color: var(--neek-button-color);
background-image: var(--neek-button-fill);
color: var(--neek-button-color-text, #ffffff);
box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--neek-button-color) 70%, transparent);
text-decoration-line: none;
transition: scale var(--neek-duration) var(--neek-ease);
& > svg {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
@supports (color: oklch(from red l c h)) {
color: var(--neek-button-color-text, oklch(from var(--neek-button-color) clamp(0, (var(--neek-button-dark-text-from) - l) * 1000, 1) 0 0));
}
&:hover {
scale: 1.06;
}
@media (width >= 48rem) {
bottom: calc(var(--neek-frame-gutter) + var(--neek-space-unit) * 12);
}
}
.neek-app-aside {
display: none;
@media (width >= 72rem) {
position: sticky;
top: var(--neek-app-column-pin, var(--neek-app-column-top));
display: flex;
flex-direction: column;
align-self: flex-start;
gap: calc(var(--neek-space-unit) * 4);
}
}
.neek-aside-title {
margin-block-end: calc(var(--neek-space-unit) * 4);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.neek-suggestions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 4);
margin: 0;
padding: 0;
list-style: none;
}
.neek-suggestion {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
& .neek-button {
flex-shrink: 0;
min-width: 6.25rem;
padding-inline: calc(var(--neek-space-unit) * 3);
}
& .neek-button[aria-pressed='true'] {
border-color: var(--neek-accent);
color: var(--neek-accent);
}
}
.neek-suggestion-text {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.neek-suggestion-name {
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration-line: underline;
}
}
.neek-suggestion-meta {
overflow: hidden;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-aside-account {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-aside-account-who {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.neek-aside-account-meta {
max-width: 100%;
overflow: hidden;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
&[href] {
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
}
.neek-aside-account-level {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
min-width: calc(var(--neek-space-unit) * 14);
margin: 0;
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-bg-muted);
}
.neek-aside-account-level-value {
color: var(--neek-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
}
.neek-aside-account-level-label {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
}
.neek-aside-account-name {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
min-width: 0;
max-width: 100%;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
& > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > .neek-icon {
--neek-icon-size: calc(var(--neek-space-unit) * 3.5);
color: var(--neek-meta-text);
}
&:hover > span:first-child {
text-decoration-line: underline;
}
}
.neek-aside-account-stats {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 4);
margin: calc(var(--neek-space-unit) * 4) 0 0;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > dt {
color: var(--neek-meta-text);
}
& > dd {
overflow: hidden;
margin: 0;
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
font-variant-numeric: tabular-nums;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.neek-aside-account-progress {
height: calc(var(--neek-space-unit) * 1.5);
margin-block-start: calc(var(--neek-space-unit) * 4);
}
.neek-aside-account-progress-text {
margin: calc(var(--neek-space-unit) * 1.5) 0 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-aside-account-status {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-aside-account-status-label {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-aside-account-status-dot {
flex: none;
width: calc(var(--neek-space-unit) * 2);
height: calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: currentColor;
opacity: 0.6;
}
.neek-aside-account-status[data-live] {
& .neek-aside-account-status-label {
color: var(--neek-text);
}
& .neek-aside-account-status-dot {
background-color: var(--neek-status-online);
box-shadow: 0 0 0 0 color-mix(in oklab, var(--neek-status-online) 60%, transparent);
opacity: 1;
animation: neek-live-pulse 1.8s ease-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.neek-aside-account-status[data-live] .neek-aside-account-status-dot {
animation: none;
}
}
@keyframes neek-live-pulse {
0% {
box-shadow: 0 0 0 0 color-mix(in oklab, var(--neek-status-online) 60%, transparent);
}
70%,
100% {
box-shadow: 0 0 0 calc(var(--neek-space-unit) * 2) color-mix(in oklab, var(--neek-status-online) 0%, transparent);
}
}
.neek-aside-account-status-title {
display: -webkit-box;
max-width: 100%;
overflow: hidden;
margin: 0;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
a.neek-aside-account-status-title:hover {
text-decoration-line: underline;
}
.neek-aside-account-status-meta {
max-width: 100%;
overflow: hidden;
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-aside-connection {
--neek-connection-from: var(--neek-neutral-800);
--neek-connection-to: var(--neek-neutral-950);
--neek-connection-text: #ffffff;
--neek-connection-muted: rgb(255 255 255 / 75%);
--neek-connection-line: rgb(255 255 255 / 15%);
--neek-connection-tile: rgb(255 255 255 / 5%);
padding: calc(var(--neek-card-padding-wide) / 2);
background-image: linear-gradient(to bottom, var(--neek-connection-from), var(--neek-connection-to));
color: var(--neek-connection-text);
& > .neek-aside-title {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
& > .neek-provider-icon {
--neek-provider-icon-size: calc(var(--neek-space-unit) * 4);
}
}
& :is(.neek-aside-title, .neek-aside-account-meta, .neek-aside-account-level-label, .neek-aside-account-stats > dt, .neek-aside-account-name > .neek-icon, .neek-aside-account-progress-text, .neek-aside-account-status-label, .neek-aside-account-status-meta) {
color: var(--neek-connection-muted);
}
& :is(.neek-aside-account-name, .neek-aside-account-level-value, .neek-aside-account-stats > dd, .neek-aside-account-status[data-live] .neek-aside-account-status-label, .neek-aside-account-status-title) {
color: var(--neek-connection-text);
}
& .neek-aside-account-level {
border-color: var(--neek-connection-line);
background-color: var(--neek-connection-tile);
}
& .neek-progress {
background-color: var(--neek-connection-line);
}
& .neek-progress-bar {
background-color: var(--neek-connection-text);
}
}
.neek-aside-connection:is([data-provider='discord'], [data-provider='twitch']) {
--neek-connection-muted: var(--neek-connection-text);
background-image: none;
background-color: var(--neek-connection-from);
& .neek-aside-account-name {
font-weight: var(--neek-weight-bold);
}
}
@media (width < 48rem) {
.neek-app-view > :not(.neek-app-rail, .neek-app-aside) {
margin-block-end: calc(var(--neek-space-unit) * 28);
}
.neek-timeline {
margin-inline: calc(var(--neek-panel-bleed) * -1);
border-inline: 0;
border-radius: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.neek-post-action[aria-pressed='true'][data-just-pressed] > svg {
animation: none;
}
}
.neek-notification {
position: relative;
display: grid;
grid-template-columns: var(--neek-post-avatar) minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
color: inherit;
text-decoration-line: none;
transition: background-color var(--neek-duration) var(--neek-ease);
&:last-child {
border-block-end: 0;
}
&:hover {
background-color: color-mix(in oklab, var(--neek-surface-hover) 50%, transparent);
}
&[data-unread] {
background-color: color-mix(in oklab, var(--neek-accent) 6%, transparent);
&::before {
content: '';
position: absolute;
top: calc(var(--neek-space-unit) * 4);
bottom: calc(var(--neek-space-unit) * 4);
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background-color: var(--neek-accent);
}
}
}
.neek-notification-icon {
display: flex;
justify-content: flex-end;
padding-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-notification-color, var(--neek-accent));
& > svg {
width: calc(var(--neek-space-unit) * 6);
height: calc(var(--neek-space-unit) * 6);
}
&[data-kind='like'] {
--neek-notification-color: var(--neek-rainbow-pink);
& > svg {
fill: currentColor;
}
}
&:is([data-kind='boost'], [data-kind='quote']) {
--neek-notification-color: var(--neek-rainbow-green);
}
&[data-kind='follow'] {
--neek-notification-color: var(--neek-rainbow-blue);
}
&[data-kind='support'] {
--neek-notification-color: var(--neek-rainbow-yellow);
& > svg {
fill: currentColor;
}
}
}
.neek-notification-avatars {
display: flex;
& > .neek-avatar + .neek-avatar {
margin-inline-start: calc(var(--neek-space-unit) * -1.5);
}
& > .neek-avatar .neek-avatar-frame {
box-shadow: 0 0 0 2px var(--neek-card-bg);
}
}
.neek-notification-text {
grid-column: 2;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > time {
margin-inline-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-meta-text);
}
}
.neek-notification-excerpt {
grid-column: 2;
display: -webkit-box;
overflow: hidden;
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.neek-explore-search {
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
& > label {
position: relative;
display: block;
& > svg {
position: absolute;
top: 50%;
left: calc(var(--neek-space-unit) * 3.5);
width: calc(var(--neek-space-unit) * 4.5);
height: calc(var(--neek-space-unit) * 4.5);
translate: 0 -50%;
color: var(--neek-meta-text);
pointer-events: none;
}
& > .neek-input {
padding-inline-start: calc(var(--neek-space-unit) * 11);
border-radius: var(--neek-radius-full);
}
}
}
.neek-timeline-section {
padding: calc(var(--neek-space-unit) * 4);
border-block-end: var(--neek-border-width) solid var(--neek-border);
&:last-child {
border-block-end: 0;
}
& > h2 {
margin-block-end: calc(var(--neek-space-unit) * 3);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
}
.neek-trend {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
padding-block: calc(var(--neek-space-unit) * 2.5);
color: inherit;
text-decoration-line: none;
& + & {
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
& > span {
display: flex;
flex-direction: column;
min-width: 0;
}
& strong {
color: var(--neek-text);
font-weight: var(--neek-weight-semibold);
}
& small {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
& > svg {
flex-shrink: 0;
width: calc(var(--neek-space-unit) * 20);
height: calc(var(--neek-space-unit) * 7);
color: var(--neek-rainbow-green);
}
&:hover strong {
text-decoration-line: underline;
}
}
.neek-people {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--neek-space-unit) * 56), 1fr));
gap: calc(var(--neek-space-unit) * 3);
}
.neek-person {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 3);
align-items: center;
padding: calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-lg);
& > span {
display: flex;
flex-direction: column;
min-width: 0;
}
& p {
grid-column: 1 / -1;
margin: 0;
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
& > .neek-button {
grid-column: 1 / -1;
}
}
.neek-profile {
border-block-end: var(--neek-border-width) solid var(--neek-border);
&:last-child {
border-block-end: 0;
}
}
.neek-profile-banner {
height: calc(var(--neek-space-unit) * 44);
overflow: hidden;
border-start-start-radius: calc(var(--neek-card-radius) - var(--neek-border-width));
border-start-end-radius: calc(var(--neek-card-radius) - var(--neek-border-width));
background: var(--neek-rainbow);
@media (width < 40rem) {
.neek-timeline & {
border-radius: 0;
}
}
}
.neek-profile-banner-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.neek-profile-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
margin-block-start: calc(var(--neek-space-unit) * -12);
padding-inline: calc(var(--neek-space-unit) * 4);
& > .neek-avatar .neek-avatar-frame {
box-shadow: 0 0 0 4px var(--neek-card-bg);
}
}
.neek-profile-actions {
display: flex;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-profile-menu {
display: flex;
& > summary > svg {
width: calc(var(--neek-space-unit) * 4);
height: 1lh;
}
& > .neek-menu-panel {
right: 0;
left: auto;
width: calc(var(--neek-space-unit) * 40);
}
& .neek-menu-link[data-variant='danger'] {
color: var(--neek-danger-text);
}
}
.neek-profile-body {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 4);
}
.neek-profile-name {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
.neek-profile-handle {
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
overflow-wrap: anywhere;
}
.neek-profile-bio {
margin: 0;
color: var(--neek-text);
white-space: pre-line;
text-wrap: pretty;
}
.neek-profile-fineprint {
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
overflow-wrap: anywhere;
}
.neek-profile-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 4);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-profile-link {
color: var(--neek-accent);
text-decoration-line: none;
overflow-wrap: anywhere;
&:hover {
text-decoration-line: underline;
}
}
.neek-profile-link[data-icon] {
--neek-provider-icon-size: calc(var(--neek-space-unit) * 5);
--neek-icon-size: calc(var(--neek-space-unit) * 5);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(var(--neek-space-unit) * 6);
min-height: calc(var(--neek-space-unit) * 6);
color: var(--neek-meta-text);
&:hover {
color: var(--neek-accent);
}
}
.neek-profile-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 4);
}
.neek-profile-note {
display: flex;
margin-inline-start: auto;
}
.neek-profile-stats {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 5);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-profile-count {
color: var(--neek-text);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
}
.neek-profile-stat {
color: inherit;
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
}
.neek-profile-tabs {
display: flex;
border-block-start: var(--neek-border-width) solid var(--neek-border);
& > .neek-profile-tab {
flex: 1;
padding: calc(var(--neek-space-unit) * 3);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-align: center;
text-decoration-line: none;
box-shadow: inset 0 -2px 0 transparent;
&:hover {
color: var(--neek-text);
}
&[aria-current] {
color: var(--neek-text);
box-shadow: inset 0 -2px 0 var(--neek-accent);
}
}
}
.neek-timeline-note {
margin: 0;
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-timeline-empty {
padding: calc(var(--neek-space-unit) * 12) calc(var(--neek-space-unit) * 6);
color: var(--neek-meta-text);
text-align: center;
}
.neek-modal-body > .neek-composer {
padding: 0;
border: 0;
& textarea {
min-height: calc(var(--neek-space-unit) * 32);
}
}
}
@layer neek.components {
.neek-form > :not(:last-child),
.neek-stack > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 5);
}
.neek-field > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 2);
}
.neek-field-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-field-link {
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
}
.neek-choice {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-hint {
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
&[data-variant='warning'] {
color: var(--neek-warning-text);
}
}
.neek-button-stack {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2.5);
& .neek-button {
width: 100%;
}
}
.neek-fine-print {
margin-block-start: calc(var(--neek-space-unit) * 5);
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-align: center;
}
.neek-field-grid {
display: grid;
gap: calc(var(--neek-space-unit) * 5);
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.neek-avatar-field {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
& > .neek-field {
flex: 1;
min-width: 0;
}
}
.neek-fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
& > legend {
margin-block-end: calc(var(--neek-space-unit) * 2);
padding: 0;
}
& > :not(legend, :last-child) {
margin-block-end: calc(var(--neek-space-unit) * 2);
}
}
.neek-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
&[data-align='end'] {
justify-content: flex-end;
}
&[data-align='between'] {
justify-content: space-between;
}
}
.neek-form-status {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-success);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
& > .neek-icon {
flex: none;
}
.neek-form-actions[data-align='end'] > & {
order: -1;
}
}
.neek-button[data-width='full'] {
width: 100%;
}
.neek-tabs {
display: flex;
gap: calc(var(--neek-space-unit) * 1);
margin-block-end: calc(var(--neek-space-unit) * 6);
padding-block: calc(var(--neek-space-unit) * 0.5) calc(var(--neek-space-unit) * 3);
border-block-end: var(--neek-border-width) solid var(--neek-border);
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.neek-tab {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-md);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
white-space: nowrap;
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
&:focus-visible {
outline: 2px solid var(--neek-focus-ring);
outline-offset: -2px;
}
&[aria-current='page'] {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
}
.neek-tab-icon {
--neek-icon-size: 1rem;
}
.neek-tab-count {
min-width: calc(var(--neek-space-unit) * 5);
padding-inline: calc(var(--neek-space-unit) * 1.5);
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
text-align: center;
.neek-tab[aria-current='page'] & {
background-color: var(--neek-card-bg);
color: var(--neek-text);
}
}
.neek-qr {
display: block;
width: calc(var(--neek-space-unit) * 60);
max-width: 100%;
height: auto;
padding: calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-md);
background-color: #ffffff;
image-rendering: pixelated;
}
.neek-qr > svg {
display: block;
width: 100%;
height: auto;
}
.neek-qr-setup {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 6);
text-align: center;
}
.neek-qr-key {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
overflow-wrap: anywhere;
user-select: all;
}
.neek-input-mono {
font-family: var(--neek-font-mono);
letter-spacing: 0.08em;
}
.neek-recovery-codes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--neek-space-unit) * 36), 1fr));
gap: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 6);
margin-block: 0 calc(var(--neek-space-unit) * 6);
padding: 0;
list-style: none;
counter-reset: neek-code;
& > li {
counter-increment: neek-code;
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&::before {
content: counter(neek-code, decimal-leading-zero) '  ';
}
& > code {
color: var(--neek-text);
font-size: inherit;
letter-spacing: 0.08em;
}
}
}
.neek-list {
margin-block: 0 calc(var(--neek-space-unit) * 4);
padding: 0;
list-style: none;
}
.neek-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
padding-block: calc(var(--neek-space-unit) * 3);
border-block-end: var(--neek-border-width) solid var(--neek-border);
& > span:not([class]) {
display: flex;
flex-direction: column;
min-width: 0;
}
}
.neek-list[data-inset] {
--neek-list-inset: var(--neek-card-padding);
margin-inline: calc(var(--neek-list-inset) * -1);
border-block-start: var(--neek-border-width) solid var(--neek-border);
@media (width >= 40rem) {
--neek-list-inset: var(--neek-card-padding-wide);
}
&:first-child {
margin-block-start: calc(var(--neek-list-inset) * -1);
border-block-start: 0;
}
&:last-child {
margin-block-end: calc(var(--neek-list-inset) * -1);
}
& > .neek-list-row {
padding-inline: var(--neek-list-inset);
&:last-child {
border-block-end: 0;
}
}
}
.neek-list-lead {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-list-media {
display: grid;
flex: none;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-bg-muted);
color: var(--neek-text-secondary);
& > svg {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
& > .neek-icon {
--neek-icon-size: calc(var(--neek-space-unit) * 4);
}
& > img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.neek-list-body {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
min-width: 0;
}
.neek-list-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-list-text {
overflow-wrap: anywhere;
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-empty {
padding-block: calc(var(--neek-space-unit) * 4);
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: center;
}
.neek-secret {
display: block;
margin-block-start: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-sm);
background-color: color-mix(in oklab, currentColor 10%, transparent);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
overflow-wrap: anywhere;
user-select: all;
}
.neek-list-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-divider-label {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
margin-block: calc(var(--neek-space-unit) * 5);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-transform: uppercase;
letter-spacing: 0.08em;
&::before,
&::after {
content: '';
flex: 1;
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
}
.neek-honeypot {
display: none;
}
}
@layer neek.components {
.neek-drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--neek-space-unit) * 3);
min-height: calc(var(--neek-space-unit) * 32);
padding: calc(var(--neek-space-unit) * 5);
border: var(--neek-border-width) dashed var(--neek-border-strong);
border-radius: var(--neek-radius-lg);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-align: center;
transition: border-color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&[hidden] {
display: none;
}
&[data-dragover] {
border-color: var(--neek-accent);
background-color: color-mix(in oklab, var(--neek-accent) 8%, transparent);
color: var(--neek-text);
}
& .neek-button:has(:focus-visible) {
outline: 2px solid var(--neek-button-ring);
outline-offset: 2px;
}
&[data-picked] .neek-drop-error {
margin: 0;
&[hidden] {
display: none;
}
}
.neek-drop-text {
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
}
&[data-uploading] {
border-style: solid;
color: var(--neek-text);
}
&[data-invalid] {
border-color: var(--neek-error-text);
}
&[data-uploading] .neek-button {
pointer-events: none;
opacity: 0.5;
}
}
.neek-drop-preview {
display: block;
max-width: 100%;
max-height: calc(var(--neek-space-unit) * 40);
border-radius: var(--neek-radius-md);
object-fit: contain;
}
.neek-drop-progress {
display: none;
align-self: stretch;
height: calc(var(--neek-space-unit) * 1);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
.neek-drop[data-uploading] & {
display: block;
}
}
.neek-drop-progress-bar {
display: block;
width: var(--neek-drop-progress, 0%);
height: 100%;
border-radius: inherit;
background-color: var(--neek-accent);
transition: width var(--neek-duration) var(--neek-ease);
.neek-drop[data-uploading]:not([data-progress]) & {
width: 100%;
animation: neek-drop-sending 1.2s ease-in-out infinite alternate;
}
}
@keyframes neek-drop-sending {
to {
opacity: 0.35;
}
}
.neek-drop-error {
margin: 0;
&[hidden] {
display: none;
}
}
.neek-drop-text {
margin: 0;
overflow-wrap: anywhere;
}
}
@layer neek.components {
.neek-color {
--neek-color-swatch-size: calc(var(--neek-space-unit) * 9);
--neek-color-checker: repeating-conic-gradient(var(--neek-input-border) 0 25%, var(--neek-input-bg) 0 50%) 0 0 / 10px 10px;
position: relative;
&:not(:root[data-neek-color] *) :is(.neek-color-swatch, .neek-color-area, .neek-color-hue, .neek-color-clear) {
display: none;
}
}
:root[data-neek-color] .neek-color {
display: inline-block;
vertical-align: top;
& .neek-color-popover {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
display: none;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
width: min(calc(var(--neek-space-unit) * 64), calc(100vw - var(--neek-space-unit) * 8));
margin-block-start: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-popover-border);
border-radius: var(--neek-radius-lg);
background-color: var(--neek-popover-bg);
box-shadow: var(--neek-popover-shadow);
}
&[data-placement='above'] .neek-color-popover {
top: auto;
bottom: 100%;
margin-block: 0 calc(var(--neek-space-unit) * 2);
}
&[data-open] .neek-color-popover {
display: flex;
}
& + .neek-color {
margin-inline-start: calc(var(--neek-space-unit) * 4);
}
}
.neek-color-swatch {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
padding: 0;
border: 0;
background: none;
color: var(--neek-text);
font: inherit;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
cursor: pointer;
&:focus-visible {
outline: none;
& .neek-color-fill {
box-shadow: var(--neek-input-focus-glow);
border-color: var(--neek-input-focus-border);
}
}
&:hover .neek-color-fill {
border-color: var(--neek-input-focus-border);
}
}
.neek-color-fill {
flex: none;
width: var(--neek-color-swatch-size);
height: var(--neek-color-swatch-size);
border: var(--neek-border-width) solid var(--neek-input-border);
border-radius: var(--neek-input-radius);
background:
linear-gradient(var(--neek-color-value, transparent), var(--neek-color-value, transparent)),
var(--neek-color-checker);
transition: border-color var(--neek-duration) var(--neek-ease);
}
.neek-color-text {
color: var(--neek-meta-text);
}
.neek-color-area {
position: relative;
height: calc(var(--neek-space-unit) * 36);
border-radius: var(--neek-radius-md);
background:
linear-gradient(to top, #000000, transparent),
linear-gradient(to right, #ffffff, hsl(var(--neek-color-hue, 0) 100% 50%));
cursor: crosshair;
touch-action: none;
&:focus-visible {
outline: 2px solid var(--neek-input-focus-border);
outline-offset: 2px;
}
}
.neek-color-thumb {
position: absolute;
top: var(--neek-color-y, 0%);
left: var(--neek-color-x, 100%);
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
border: 2px solid #ffffff;
border-radius: var(--neek-radius-full);
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), inset 0 0 0 1px rgb(0 0 0 / 0.4);
translate: -50% -50%;
pointer-events: none;
}
.neek-color-hue {
width: 100%;
height: calc(var(--neek-space-unit) * 3);
margin: 0;
border-radius: var(--neek-radius-full);
background: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));
appearance: none;
cursor: pointer;
&::-webkit-slider-thumb {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
border: 2px solid #ffffff;
border-radius: var(--neek-radius-full);
background-color: hsl(var(--neek-color-hue, 0) 100% 50%);
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
appearance: none;
}
&::-moz-range-thumb {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
border: 2px solid #ffffff;
border-radius: var(--neek-radius-full);
background-color: hsl(var(--neek-color-hue, 0) 100% 50%);
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
}
&:focus-visible {
outline: 2px solid var(--neek-input-focus-border);
outline-offset: 2px;
}
}
.neek-color-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
& .neek-color-input {
flex: 1 1 calc(var(--neek-space-unit) * 24);
width: auto;
font-family: var(--neek-font-mono);
}
}
}
@layer neek.components {
.neek-icon {
flex: none;
width: var(--neek-icon-size);
height: var(--neek-icon-size);
fill: none;
stroke: currentColor;
stroke-width: var(--neek-icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
}
.neek-provider-icon {
flex: none;
width: var(--neek-provider-icon-size);
height: var(--neek-provider-icon-size);
}
}
@layer neek.components {
.neek-option-list {
border: var(--neek-border-width) solid var(--neek-option-border);
border-radius: var(--neek-option-radius);
background-color: var(--neek-option-bg);
overflow: hidden;
}
.neek-option {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
padding: var(--neek-option-padding);
cursor: pointer;
transition: background-color var(--neek-duration) var(--neek-ease);
& + & {
border-block-start: var(--neek-border-width) solid var(--neek-option-border);
}
&:has(.neek-option-input[type='radio']:checked) {
background-color: var(--neek-option-selected-bg);
}
&[data-sub] {
padding-inline-start: calc(var(--neek-space-unit) * 11);
}
&:has(.neek-option-input:disabled) {
cursor: not-allowed;
opacity: 0.6;
}
}
.neek-option-media {
display: flex;
flex: none;
}
.neek-option-body {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
min-width: 0;
}
.neek-option-title {
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-option-text {
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-option-input {
flex: none;
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
margin: 0;
accent-color: var(--neek-check-color);
cursor: inherit;
&[data-variant='switch'] {
position: relative;
width: var(--neek-switch-width);
height: var(--neek-switch-height);
border-radius: calc(var(--neek-switch-height) / 2);
background-color: var(--neek-switch-off-bg);
appearance: none;
transition: background-color var(--neek-duration) var(--neek-ease);
&::before {
content: '';
position: absolute;
inset-block-start: calc(var(--neek-space-unit) * 0.5);
inset-inline-start: calc(var(--neek-space-unit) * 0.5);
width: calc(var(--neek-switch-height) - var(--neek-space-unit));
height: calc(var(--neek-switch-height) - var(--neek-space-unit));
border-radius: 50%;
background-color: var(--neek-switch-knob);
box-shadow: var(--neek-shadow-sm);
transition: translate var(--neek-duration) var(--neek-ease);
}
&:checked {
background-color: var(--neek-switch-on-bg);
}
&:checked::before {
translate: calc(var(--neek-switch-width) - var(--neek-switch-height)) 0;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--neek-button-ring-offset), 0 0 0 4px var(--neek-button-ring);
}
}
}
}
@layer neek.components {
.neek-choices {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.neek-choices-legend {
margin-block-end: calc(var(--neek-space-unit) * 2);
padding: 0;
color: var(--neek-label-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-choices-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
gap: calc(var(--neek-space-unit) * 2);
}
.neek-choice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-option-border);
border-radius: var(--neek-input-radius);
background-color: var(--neek-option-bg);
color: var(--neek-text);
text-align: center;
cursor: pointer;
transition:
border-color var(--neek-duration) var(--neek-ease),
background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
}
&:has(.neek-choice-input:checked) {
border-color: var(--neek-accent);
background-color: var(--neek-option-selected-bg);
box-shadow: inset 0 0 0 var(--neek-border-width) var(--neek-accent);
}
&:has(.neek-choice-input:focus-visible) {
box-shadow: 0 0 0 2px var(--neek-button-ring-offset), 0 0 0 4px var(--neek-button-ring);
}
}
.neek-choice-input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.neek-choice-preview {
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--neek-space-unit) * 10);
}
.neek-choice-label {
max-width: 100%;
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
}
.neek-choice-sample {
font-size: var(--neek-text-2xl);
line-height: 1;
font-weight: var(--neek-weight-medium);
}
.neek-choice[data-font='inter'] { font-family: var(--neek-font-inter); }
.neek-choice[data-font='system'] { font-family: var(--neek-font-system); }
.neek-choice[data-font='apple'] { font-family: var(--neek-font-apple); }
.neek-choice[data-font='windows'] { font-family: var(--neek-font-windows); }
.neek-choice[data-font='android'] { font-family: var(--neek-font-android); }
.neek-choice[data-font='serif'] { font-family: var(--neek-font-serif); }
.neek-choice[data-font='mono'] { font-family: var(--neek-font-monospace); }
.neek-choice[data-font='jetbrains'] { font-family: var(--neek-font-jetbrains); }
.neek-choice-shape {
width: calc(var(--neek-space-unit) * 12);
height: calc(var(--neek-space-unit) * 8);
border: 2px solid var(--neek-text-muted);
border-inline-end: 0;
border-block-end: 0;
border-start-start-radius: var(--neek-choice-radius, 0);
translate: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 1);
}
.neek-choice[data-radius='none'] { --neek-choice-radius: var(--neek-radius-step-none); }
.neek-choice[data-radius='sm'] { --neek-choice-radius: var(--neek-radius-step-sm); }
.neek-choice[data-radius='md'] { --neek-choice-radius: var(--neek-radius-step-md); }
.neek-choice[data-radius='lg'] { --neek-choice-radius: var(--neek-radius-step-lg); }
.neek-choice-page {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: calc(var(--neek-space-unit) * 14);
height: calc(var(--neek-space-unit) * 10);
padding-inline: calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-step-sm);
background-color: var(--neek-bg);
&::before,
&::after {
content: '';
display: block;
height: 4px;
border-radius: 2px;
background-color: var(--neek-text);
}
&::before {
width: 70%;
}
&::after {
width: 40%;
background-color: var(--neek-accent);
}
}
.neek-choice-pages {
display: flex;
& > .neek-choice-page {
width: calc(var(--neek-space-unit) * 7);
padding-inline: calc(var(--neek-space-unit) * 1);
}
& > .neek-choice-page:first-child {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
& > .neek-choice-page:last-child {
border-inline-start: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
.neek-choice-page[data-color-scheme] {
--neek-bg: light-dark(var(--neek-neutral-50), var(--neek-neutral-950));
}
.neek-choice-page[data-theme=''] {
--neek-bg: light-dark(oklch(98.5% 0 none), oklch(14.5% 0 none));
--neek-border: light-dark(oklch(92.2% 0 none), oklch(26.9% 0 none));
--neek-text: light-dark(oklch(20.5% 0 none), oklch(97% 0 none));
--neek-accent: #6366f1;
}
}
@layer neek.components {
[data-pattern] {
--neek-pattern-image: none;
--neek-pattern-size: auto;
--neek-pattern-position: 0 0;
--neek-pattern-repeat: repeat;
--neek-pattern-composite: add;
--neek-pattern-gain: 1;
}
[data-pattern='pixels'] {
--neek-pattern-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
--neek-pattern-size: 16px 16px;
}
[data-pattern='grooves'] {
--neek-pattern-image: repeating-radial-gradient(circle at 100% 0, #000 0 2px, transparent 3px 12px);
--neek-pattern-repeat: no-repeat;
--neek-pattern-size: 100% 100%;
}
[data-pattern='ruled'] {
--neek-pattern-image:
linear-gradient(90deg, transparent 0 40px, #000 40px 42px, transparent 42px),
repeating-linear-gradient(transparent 0 26px, #000 26px 28px);
--neek-pattern-size: 100% 100%, auto;
--neek-pattern-repeat: no-repeat, repeat;
}
[data-pattern='dots'] {
--neek-pattern-image:
radial-gradient(circle, #000 3px, transparent 3.5px),
radial-gradient(circle, #000 2px, transparent 2.5px);
--neek-pattern-size: 24px 24px;
--neek-pattern-position: 0 0, 12px 12px;
}
[data-pattern='bokeh'] {
--neek-pattern-image:
radial-gradient(circle at 85% 20%, rgb(0 0 0 / 0.7) 0 60px, transparent 61px),
radial-gradient(circle at 60% 35%, rgb(0 0 0 / 0.5) 0 36px, transparent 37px),
radial-gradient(circle at 95% 45%, rgb(0 0 0 / 0.8) 0 24px, transparent 25px),
radial-gradient(circle at 20% 15%, rgb(0 0 0 / 0.6) 0 44px, transparent 45px);
--neek-pattern-repeat: no-repeat;
--neek-pattern-size: 100% 100%;
}
[data-pattern='waveform'] {
--neek-pattern-image:
repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px),
radial-gradient(50% 50%, #000 96%, transparent),
radial-gradient(50% 35%, #000 96%, transparent);
--neek-pattern-size: 100% 56px, 136px 56px, 56px 56px;
--neek-pattern-position: 0 0, 0 0, 28px 0;
--neek-pattern-repeat: no-repeat, repeat-x, repeat-x;
--neek-pattern-composite: intersect, add;
}
[data-pattern='rain'] {
--neek-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' shape-rendering='crispEdges'%3E%3Cpath opacity='0.3' d='M13 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM13 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 6h3v1h-2v4h-1zm3 1h1v4h-1zM19 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 54h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM25 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM31 138h3v1h-2v4h-1zm3 1h1v4h-1zM31 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM37 6h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM43 150h3v1h-2v4h-1zm3 1h1v4h-1zM43 114h3v1h-2v4h-1zm3 1h1v4h-1zM49 36h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM55 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 168h3v1h-2v4h-1zm3 1h1v4h-1zM61 96h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 18h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM73 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 102h3v1h-2v4h-1zm3 1h1v4h-1zM79 66h3v1h-2v4h-1zm3 1h1v4h-1zM79 60h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM91 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 6h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM115 60h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 6h3v1h-2v4h-1zm3 1h1v4h-1zM121 84h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM127 66h3v1h-2v4h-1zm3 1h1v4h-1zM127 120h3v1h-2v4h-1zm3 1h1v4h-1zM127 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 24h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM151 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM157 42h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM157 162h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 6h3v1h-2v4h-1zm3 1h1v4h-1zM169 0h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM175 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 36h3v1h-2v4h-1zm3 1h1v4h-1zM181 96h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 138h3v1h-2v4h-1zm3 1h1v4h-1zM187 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 54h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM193 66h3v1h-2v4h-1zm3 1h1v4h-1zM199 48h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM199 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM205 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 150h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM211 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 90h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 84h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 18h3v1h-2v4h-1zm3 1h1v4h-1z'/%3E%3Cpath opacity='0.4' d='M13 6h3v1h-2v4h-1zm3 1h1v4h-1zM13 0h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM19 12h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 126h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM31 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM37 12h3v1h-2v4h-1zm3 1h1v4h-1zM43 174h3v1h-2v4h-1zm3 1h1v4h-1zM43 168h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM43 162h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 42h3v1h-2v4h-1zm3 1h1v4h-1zM61 6h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 102h3v1h-2v4h-1zm3 1h1v4h-1zM73 30h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 24h3v1h-2v4h-1zm3 1h1v4h-1zM73 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM73 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM79 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 12h3v1h-2v4h-1zm3 1h1v4h-1zM115 78h3v1h-2v4h-1zm3 1h1v4h-1zM115 72h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM115 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 90h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM121 18h3v1h-2v4h-1zm3 1h1v4h-1zM121 12h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM121 6h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM127 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 30h3v1h-2v4h-1zm3 1h1v4h-1zM151 126h3v1h-2v4h-1zm3 1h1v4h-1zM157 48h3v1h-2v4h-1zm3 1h1v4h-1zM169 84h3v1h-2v4h-1zm3 1h1v4h-1zM169 78h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM175 114h3v1h-2v4h-1zm3 1h1v4h-1zM175 108h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM175 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM181 102h3v1h-2v4h-1zm3 1h1v4h-1zM187 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 60h3v1h-2v4h-1zm3 1h1v4h-1zM193 78h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM193 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM199 60h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM199 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM205 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 126h3v1h-2v4h-1zm3 1h1v4h-1zM217 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 96h3v1h-2v4h-1zm3 1h1v4h-1zM229 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4z'/%3E%3Cpath opacity='0.5' d='M19 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 114h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM25 60h3v1h-2v4h-1zm3 1h1v4h-1zM25 132h3v1h-2v4h-1zm3 1h1v4h-1zM31 156h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM31 144h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM37 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 66h3v1h-2v4h-1zm3 1h1v4h-1zM49 60h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM49 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM55 162h3v1h-2v4h-1zm3 1h1v4h-1zM55 156h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 12h3v1h-2v4h-1zm3 1h1v4h-1zM61 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 138h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 126h3v1h-2v4h-1zm3 1h1v4h-1zM79 84h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM79 78h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 102h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM91 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM115 84h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 12h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 96h3v1h-2v4h-1zm3 1h1v4h-1zM121 30h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM127 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM127 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM139 6h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM151 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 66h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM157 60h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 174h3v1h-2v4h-1zm3 1h1v4h-1zM157 168h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM169 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 12h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM181 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 144h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 78h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM193 84h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM199 54h3v1h-2v4h-1zm3 1h1v4h-1zM205 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM211 108h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM217 138h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 36h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 30h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4z'/%3E%3Cpath opacity='0.6' d='M13 12h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM13 78h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM19 24h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM19 120h3v1h-2v4h-1zm3 1h1v4h-1zM25 138h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM31 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM31 168h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM31 162h3v1h-2v4h-1zm3 1h1v4h-1zM37 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 18h3v1h-2v4h-1zm3 1h1v4h-1zM43 12h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM43 6h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM55 168h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 36h3v1h-2v4h-1zm3 1h1v4h-1zM61 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 42h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM73 150h3v1h-2v4h-1zm3 1h1v4h-1zM73 144h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM79 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM79 90h3v1h-2v4h-1zm3 1h1v4h-1zM91 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 36h3v1h-2v4h-1zm3 1h1v4h-1zM115 96h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM115 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 36h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM127 78h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM127 36h3v1h-2v4h-1zm3 1h1v4h-1zM139 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 12h3v1h-2v4h-1zm3 1h1v4h-1zM151 54h3v1h-2v4h-1zm3 1h1v4h-1zM151 48h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM151 138h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 78h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 72h3v1h-2v4h-1zm3 1h1v4h-1zM157 6h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 102h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM169 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 24h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM169 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 144h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 138h3v1h-2v4h-1zm3 1h1v4h-1zM175 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM175 54h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM181 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 156h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM193 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM193 90h3v1h-2v4h-1zm3 1h1v4h-1zM199 78h3v1h-2v4h-1zm3 1h1v4h-1zM199 72h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM199 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM205 138h3v1h-2v4h-1zm3 1h1v4h-1zM211 156h3v1h-2v4h-1zm3 1h1v4h-1zM211 114h3v1h-2v4h-1zm3 1h1v4h-1zM217 144h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 120h3v1h-2v4h-1zm3 1h1v4h-1zM229 114h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 42h3v1h-2v4h-1zm3 1h1v4h-1z'/%3E%3Cpath opacity='0.7' d='M13 24h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM13 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 30h3v1h-2v4h-1zm3 1h1v4h-1zM25 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 144h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM31 0h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM37 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM43 30h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 84h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM49 78h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 48h3v1h-2v4h-1zm3 1h1v4h-1zM73 162h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 108h3v1h-2v4h-1zm3 1h1v4h-1zM91 54h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM91 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 102h3v1h-2v4h-1zm3 1h1v4h-1zM121 114h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM121 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 42h3v1h-2v4h-1zm3 1h1v4h-1zM127 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 60h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 144h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM157 84h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 108h3v1h-2v4h-1zm3 1h1v4h-1zM169 30h3v1h-2v4h-1zm3 1h1v4h-1zM175 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM181 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 168h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 162h3v1h-2v4h-1zm3 1h1v4h-1zM187 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 84h3v1h-2v4h-1zm3 1h1v4h-1zM193 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM199 96h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM199 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM199 84h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM205 144h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 60h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM211 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 150h3v1h-2v4h-1zm3 1h1v4h-1zM229 144h3v1h-2v4h-1zm3 1h1v4h-1zM229 138h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4z'/%3E%3Cpath opacity='0.8' d='M13 30h3v1h-2v4h-1zm3 1h1v4h-1zM13 84h3v1h-2v4h-1zm3 1h1v4h-1zM19 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 150h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM25 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM31 6h3v1h-2v4h-1zm3 1h1v4h-1zM37 36h3v1h-2v4h-1zm3 1h1v4h-1zM43 42h3v1h-2v4h-1zm3 1h1v4h-1zM43 36h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM43 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM49 90h3v1h-2v4h-1zm3 1h1v4h-1zM55 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 60h3v1h-2v4h-1zm3 1h1v4h-1zM61 54h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 126h3v1h-2v4h-1zm3 1h1v4h-1zM73 60h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 174h3v1h-2v4h-1zm3 1h1v4h-1zM73 168h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM79 108h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM79 102h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 60h3v1h-2v4h-1zm3 1h1v4h-1zM115 114h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 18h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 120h3v1h-2v4h-1zm3 1h1v4h-1zM121 60h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM127 84h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM127 138h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM127 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 30h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM151 72h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM151 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM151 150h3v1h-2v4h-1zm3 1h1v4h-1zM157 90h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM157 18h3v1h-2v4h-1zm3 1h1v4h-1zM157 12h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM169 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 162h3v1h-2v4h-1zm3 1h1v4h-1zM175 156h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM175 60h3v1h-2v4h-1zm3 1h1v4h-1zM181 126h3v1h-2v4h-1zm3 1h1v4h-1zM187 174h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 102h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM193 114h3v1h-2v4h-1zm3 1h1v4h-1zM193 108h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM199 102h3v1h-2v4h-1zm3 1h1v4h-1zM205 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 162h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 66h3v1h-2v4h-1zm3 1h1v4h-1zM211 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM217 162h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 150h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 54h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4z'/%3E%3Cpath d='M13 36h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM13 90h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM19 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM25 78h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM25 156h3v1h-2v4h-1zm3 1h1v4h-1zM25 36h3v1h-2v4h-1zm3 1h1v4h-1zM31 12h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM37 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM43 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM49 96h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM55 0h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM61 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM61 138h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM73 66h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM73 0h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM79 114h3v1h-2v4h-1zm3 1h1v4h-1zM91 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM91 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM115 120h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM115 24h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM121 126h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM121 66h3v1h-2v4h-1zm3 1h1v4h-1zM127 90h3v1h-2v4h-1zm3 1h1v4h-1zM127 144h3v1h-2v4h-1zm3 1h1v4h-1zM127 48h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM139 36h3v1h-2v4h-1zm3 1h1v4h-1zM151 78h3v1h-2v4h-1zm3 1h1v4h-1zM151 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM157 96h3v1h-2v4h-1zm3 1h1v4h-1zM157 24h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM169 126h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM169 42h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 168h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM175 66h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM181 132h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM187 0h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM187 108h3v1h-2v4h-1zm3 1h1v4h-1zM193 120h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM199 108h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM205 156h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM211 168h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 72h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM211 132h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM217 168h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1zM229 156h4v1h-4zm0 2h4v1h-4zm0 2h4v1h-4zM229 60h1v5h-1zm3 0h1v1h-1zm-1 1h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 1h1v1h-1z'/%3E%3C/svg%3E");
--neek-pattern-size: 480px 360px;
--neek-pattern-gain: 2;
}
.neek-stream-item[data-pattern],
.neek-single[data-pattern] {
--neek-pattern-text: var(--neek-text);
--neek-pattern-stream-text: var(--neek-stream-text);
--neek-pattern-meta-text: var(--neek-meta-text);
--neek-pattern-text-muted: var(--neek-text-muted);
--neek-pattern-text-secondary: var(--neek-text-secondary);
--neek-pattern-accent-text: var(--neek-accent-text);
--neek-pattern-card-link-color: var(--neek-card-link-color);
--neek-pattern-link-color: var(--neek-link-color);
--neek-pattern-type-card-header-color: var(--neek-type-card-header-color);
--neek-pattern-type-card-title-color: var(--neek-type-card-title-color);
--neek-pattern-type-card-body-color: var(--neek-type-card-body-color);
--neek-pattern-type-title-color: var(--neek-type-title-color);
--neek-pattern-type-subtitle-color: var(--neek-type-subtitle-color);
--neek-pattern-poll-text: var(--neek-poll-text);
--neek-pattern-poll-leader-text: var(--neek-poll-leader-text);
--neek-pattern-poll-leader-percent: var(--neek-poll-leader-percent);
& > .neek-stream-card,
&.neek-single > * {
--neek-text: light-dark(
color-mix(in oklab, var(--neek-pattern-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-text), #fff var(--neek-pattern-lift-dark))
);
--neek-stream-text: light-dark(
color-mix(in oklab, var(--neek-pattern-stream-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-stream-text), #fff var(--neek-pattern-lift-dark))
);
--neek-meta-text: light-dark(
color-mix(in oklab, var(--neek-pattern-meta-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-meta-text), #fff var(--neek-pattern-lift-dark))
);
--neek-text-muted: light-dark(
color-mix(in oklab, var(--neek-pattern-text-muted), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-text-muted), #fff var(--neek-pattern-lift-dark))
);
--neek-text-secondary: light-dark(
color-mix(in oklab, var(--neek-pattern-text-secondary), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-text-secondary), #fff var(--neek-pattern-lift-dark))
);
--neek-accent-text: light-dark(
color-mix(in oklab, var(--neek-pattern-accent-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-accent-text), #fff var(--neek-pattern-lift-dark))
);
--neek-card-link-color: light-dark(
color-mix(in oklab, var(--neek-pattern-card-link-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-card-link-color), #fff var(--neek-pattern-lift-dark))
);
--neek-link-color: light-dark(
color-mix(in oklab, var(--neek-pattern-link-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-link-color), #fff var(--neek-pattern-lift-dark))
);
--neek-type-card-header-color: light-dark(
color-mix(in oklab, var(--neek-pattern-type-card-header-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-type-card-header-color), #fff var(--neek-pattern-lift-dark))
);
--neek-type-card-title-color: light-dark(
color-mix(in oklab, var(--neek-pattern-type-card-title-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-type-card-title-color), #fff var(--neek-pattern-lift-dark))
);
--neek-type-card-body-color: light-dark(
color-mix(in oklab, var(--neek-pattern-type-card-body-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-type-card-body-color), #fff var(--neek-pattern-lift-dark))
);
--neek-type-title-color: light-dark(
color-mix(in oklab, var(--neek-pattern-type-title-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-type-title-color), #fff var(--neek-pattern-lift-dark))
);
--neek-type-subtitle-color: light-dark(
color-mix(in oklab, var(--neek-pattern-type-subtitle-color), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-type-subtitle-color), #fff var(--neek-pattern-lift-dark))
);
--neek-poll-text: light-dark(
color-mix(in oklab, var(--neek-pattern-poll-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-poll-text), #fff var(--neek-pattern-lift-dark))
);
--neek-poll-leader-text: light-dark(
color-mix(in oklab, var(--neek-pattern-poll-leader-text), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-poll-leader-text), #fff var(--neek-pattern-lift-dark))
);
--neek-poll-leader-percent: light-dark(
color-mix(in oklab, var(--neek-pattern-poll-leader-percent), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-pattern-poll-leader-percent), #fff var(--neek-pattern-lift-dark))
);
}
}
.neek-single[data-pattern] .neek-single-status {
color: light-dark(
color-mix(in oklab, var(--neek-neutral-800), #000 var(--neek-pattern-lift-light)),
color-mix(in oklab, var(--neek-neutral-200), #fff var(--neek-pattern-lift-dark))
);
}
.neek-pattern {
display: none;
}
.neek-stream-item[data-pattern] > .neek-stream-card > .neek-pattern,
.neek-reply-thread > .neek-stream-item[data-pattern]::before,
.neek-single[data-pattern]::before,
.neek-pattern-swatch[data-pattern]::before {
--neek-pattern-tint: light-dark(
color-mix(
in oklab,
color-mix(in oklab, var(--neek-pattern-color, var(--neek-card-border)), #000 var(--neek-pattern-ink-light))
min(100%, var(--neek-pattern-strength-light) * var(--neek-pattern-gain, 1)),
transparent
),
color-mix(
in oklab,
color-mix(in oklab, var(--neek-pattern-color, var(--neek-card-border)), #fff var(--neek-pattern-ink-dark))
min(100%, var(--neek-pattern-strength-dark) * var(--neek-pattern-gain, 1)),
transparent
)
);
content: '';
display: block;
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-image: linear-gradient(var(--neek-pattern-tint), transparent var(--neek-pattern-fade));
mask-image: var(--neek-pattern-image);
mask-size: var(--neek-pattern-size);
mask-position: var(--neek-pattern-position);
mask-repeat: var(--neek-pattern-repeat);
mask-composite: var(--neek-pattern-composite);
pointer-events: none;
}
.neek-reply-thread > .neek-stream-item[data-pattern] {
isolation: isolate;
& > .neek-stream-card > .neek-pattern {
display: none;
}
&::before {
inset: 0 calc(var(--neek-reply-thread-inset) * -1);
}
}
.neek-single[data-pattern] {
position: relative;
isolation: isolate;
&::before {
inset: 0 0 auto;
height: var(--neek-pattern-single-height);
background-image: radial-gradient(farthest-side at 50% 0, var(--neek-pattern-tint), transparent);
}
}
.neek-pattern-swatch {
position: relative;
isolation: isolate;
overflow: hidden;
display: block;
width: calc(var(--neek-space-unit) * 14);
height: calc(var(--neek-space-unit) * 10);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-step-sm);
background-color: var(--neek-card-bg);
&::before {
--neek-pattern-strength-light: 100%;
--neek-pattern-strength-dark: 100%;
--neek-pattern-fade: 100%;
inset: 0 auto auto 0;
width: 200%;
height: 200%;
border-radius: 0;
scale: 0.5;
transform-origin: 0 0;
}
}
}
@layer neek.components {
.neek-page {
padding-block: calc(var(--neek-space-unit) * 8) calc(var(--neek-space-unit) * 20);
& > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 6);
}
&[data-width='narrow'] {
width: min(100% - var(--neek-frame-gutter) * 2, var(--neek-container-lg));
}
}
.neek-flash {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
padding-block-start: calc(var(--neek-space-unit) * 6);
& + .neek-frame {
padding-block-start: calc(var(--neek-space-unit) * 6);
}
}
.neek-flash-detail {
margin-block-start: calc(var(--neek-space-unit) * 1);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
opacity: 0.85;
}
.neek-page-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
.neek-page > & {
margin-block-end: calc(var(--neek-space-unit) * 8);
}
}
.neek-page-heading {
min-width: 0;
}
.neek-page-eyebrow {
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-page-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-3xl);
line-height: var(--neek-text-3xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
overflow-wrap: anywhere;
.neek-page-eyebrow + & {
margin-block-start: calc(var(--neek-space-unit) * 1);
}
}
.neek-page-lede {
max-width: 42rem;
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
margin-block-end: calc(var(--neek-space-unit) * 4);
}
.neek-section-title {
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-section-link {
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
text-decoration-line: none;
&:hover {
color: var(--neek-text);
}
}
.neek-card-grid {
display: grid;
gap: calc(var(--neek-space-unit) * 4);
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (width >= 64rem) {
grid-template-columns: repeat(var(--neek-card-grid-columns, 3), minmax(0, 1fr));
}
}
.neek-card > :not(:last-child) {
margin-block-end: calc(var(--neek-space-unit) * 4);
}
.neek-card-heading {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
margin-block-end: calc(var(--neek-space-unit) * 4);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
& > .neek-icon {
--neek-icon-size: calc(var(--neek-space-unit) * 4);
}
}
.neek-card-note {
margin-block-start: calc(var(--neek-space-unit) * 4);
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-badges {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-details {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
margin: 0;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& > :is(div, .neek-details-link) {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
min-width: 0;
color: inherit;
text-decoration-line: none;
}
& > .neek-details-link {
margin-inline: calc(var(--neek-space-unit) * -1);
padding-inline: calc(var(--neek-space-unit) * 1);
border-radius: var(--neek-radius-sm);
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
}
}
& dt {
flex: none;
color: var(--neek-meta-text);
}
& dd {
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
text-align: end;
text-overflow: ellipsis;
}
&[data-layout='stacked'] {
display: grid;
gap: calc(var(--neek-space-unit) * 4);
@media (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
& > :is(div, .neek-details-link) {
flex-direction: column;
align-items: flex-start;
gap: calc(var(--neek-space-unit) * 0.5);
}
& dd {
overflow: visible;
overflow-wrap: anywhere;
text-align: start;
}
}
& > [data-span='full'] {
grid-column: 1 / -1;
}
& a:not([class]) {
overflow-wrap: anywhere;
}
}
.neek-stats {
display: grid;
gap: calc(var(--neek-space-unit) * 4);
@media (width >= 40rem) {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
.neek-stat-label {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-stat-value {
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-size: var(--neek-text-3xl);
line-height: var(--neek-text-3xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
font-variant-numeric: tabular-nums;
&[data-tone='positive'] {
color: var(--neek-success-text);
}
&[data-tone='negative'] {
color: var(--neek-danger-text);
}
}
.neek-stat-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-chart {
display: block;
width: 100%;
height: calc(var(--neek-space-unit) * 24);
margin-block-start: calc(var(--neek-space-unit) * 5);
overflow: visible;
& rect {
fill: var(--neek-text);
}
& line {
stroke: var(--neek-border);
}
}
.neek-chart-labels {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-align: center;
}
.neek-prose {
max-width: 48rem;
color: var(--neek-text-secondary);
& > * + * {
margin-block-start: calc(var(--neek-space-unit) * 10);
}
}
}
@layer neek.components {
.neek-connection {
--neek-connection-from: var(--neek-neutral-800);
--neek-connection-to: var(--neek-neutral-950);
--neek-connection-border: color-mix(in oklab, var(--neek-connection-from) 55%, transparent);
--neek-connection-text: #ffffff;
--neek-connection-muted: rgb(255 255 255 / 75%);
--neek-connection-line: rgb(255 255 255 / 15%);
--neek-connection-tile: rgb(255 255 255 / 5%);
position: relative;
border: var(--neek-border-width) solid var(--neek-connection-border);
border-radius: var(--neek-card-radius);
background-image: linear-gradient(to bottom, var(--neek-connection-from), var(--neek-connection-to));
color: var(--neek-connection-text);
box-shadow: var(--neek-card-shadow);
& + & {
margin-block-start: calc(var(--neek-space-unit) * 4);
}
}
.neek-connection-settings {
position: absolute;
top: calc(var(--neek-space-unit) * 5);
right: calc(var(--neek-space-unit) * 6);
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
border: var(--neek-border-width) solid rgb(255 255 255 / 25%);
border-radius: var(--neek-radius-sm);
color: var(--neek-connection-text);
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: rgb(255 255 255 / 10%);
}
&:focus-visible {
outline: 2px solid var(--neek-connection-text);
outline-offset: 2px;
}
& > .neek-icon {
--neek-icon-size: calc(var(--neek-space-unit) * 4);
}
}
.neek-connection-head {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
padding: calc(var(--neek-space-unit) * 5) calc(var(--neek-space-unit) * 6);
&[data-has-settings] {
padding-inline-end: calc(var(--neek-space-unit) * 20);
}
@media (width >= 64rem) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.neek-connection-who {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 4);
min-width: 0;
}
.neek-connection-media {
position: relative;
display: grid;
flex: none;
place-items: center;
width: calc(var(--neek-space-unit) * 16);
height: calc(var(--neek-space-unit) * 16);
border: var(--neek-border-width) solid rgb(255 255 255 / 20%);
border-radius: var(--neek-radius-md);
background-color: rgb(255 255 255 / 10%);
& > svg {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-connection-avatar {
width: 100%;
height: 100%;
border-radius: calc(var(--neek-radius-md) - var(--neek-border-width));
object-fit: cover;
}
.neek-connection-status {
position: absolute;
top: calc(var(--neek-space-unit) * -1);
left: calc(var(--neek-space-unit) * -1);
z-index: 1;
width: calc(var(--neek-space-unit) * 3);
height: calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-emerald-200);
border-radius: var(--neek-radius-full);
background-color: var(--neek-status-online);
}
.neek-connection-body {
min-width: 0;
}
.neek-connection-label {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
color: var(--neek-connection-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
& > svg {
flex: none;
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
}
}
.neek-connection-name {
margin-block-start: calc(var(--neek-space-unit) * 1);
overflow: hidden;
color: var(--neek-connection-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-connection-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-connection-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-connection-stats {
display: grid;
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
@media (width >= 40rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.neek-connection-stat {
min-width: 0;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-connection-line);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-connection-tile);
}
.neek-connection-stat-label {
color: var(--neek-connection-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
}
.neek-connection-stat-value {
max-width: 12rem;
margin: calc(var(--neek-space-unit) * 1) 0 0;
overflow: hidden;
color: var(--neek-connection-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-connection-connect {
flex: none;
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid rgb(255 255 255 / 25%);
border-radius: var(--neek-radius-sm);
color: var(--neek-connection-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-align: center;
text-decoration-line: none;
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: rgb(255 255 255 / 10%);
}
@media (width >= 40rem) {
align-self: center;
}
}
.neek-connection-head:has(> .neek-connection-connect) {
@media (width >= 40rem) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.neek-connection-more {
border-block-start: var(--neek-border-width) solid var(--neek-connection-line);
&[open] > .neek-connection-summary > svg {
rotate: 180deg;
}
}
.neek-connection-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 6);
color: var(--neek-connection-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
list-style: none;
cursor: pointer;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&::-webkit-details-marker {
display: none;
}
&:hover {
background-color: var(--neek-connection-tile);
color: var(--neek-connection-text);
}
& > svg {
flex: none;
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
transition: rotate var(--neek-duration) var(--neek-ease);
}
}
.neek-connection-empty {
padding: calc(var(--neek-space-unit) * 5) calc(var(--neek-space-unit) * 6);
border-block-start: var(--neek-border-width) solid var(--neek-connection-line);
color: var(--neek-connection-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-connection-details {
margin: 0;
border-block-start: var(--neek-border-width) solid var(--neek-connection-line);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
&[data-columns] {
@media (width >= 48rem) {
columns: 2;
column-gap: 0;
column-rule: var(--neek-border-width) solid var(--neek-connection-line);
}
}
& > div {
display: grid;
gap: calc(var(--neek-space-unit) * 1);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 6);
border-block-end: var(--neek-border-width) solid var(--neek-connection-line);
break-inside: avoid;
@media (width >= 40rem) {
grid-template-columns: 11rem minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 4);
}
&:last-child {
border-block-end: 0;
}
}
& dt {
color: var(--neek-connection-muted);
}
& dd {
min-width: 0;
margin: 0;
color: var(--neek-connection-text);
font-weight: var(--neek-weight-medium);
overflow-wrap: anywhere;
}
}
.neek-connection-link {
color: inherit;
text-decoration-line: none;
text-underline-offset: 0.25em;
&:hover {
text-decoration-line: underline;
}
}
.neek-connection-columns {
display: grid;
border-block-start: var(--neek-border-width) solid var(--neek-connection-line);
@media (width >= 64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
& > * + * {
border-inline-start: var(--neek-border-width) solid var(--neek-connection-line);
}
}
& > * {
padding: calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 6);
}
& > * + * {
@media (width < 64rem) {
border-block-start: var(--neek-border-width) solid var(--neek-connection-line);
}
}
}
.neek-connection-heading {
color: var(--neek-connection-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-connection-list {
margin-block-start: calc(var(--neek-space-unit) * 3);
}
.neek-connection-item {
display: grid;
gap: calc(var(--neek-space-unit) * 1);
padding-block: calc(var(--neek-space-unit) * 2);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
& + & {
border-block-start: var(--neek-border-width) solid rgb(255 255 255 / 10%);
}
& > * {
min-width: 0;
}
@media (width >= 40rem) {
grid-template-columns: minmax(0, 1fr) auto;
gap: calc(var(--neek-space-unit) * 4);
}
}
.neek-connection-item-title {
overflow: hidden;
color: var(--neek-connection-text);
font-weight: var(--neek-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-connection-item-meta {
color: var(--neek-connection-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
@media (width >= 40rem) {
.neek-connection-item > & {
text-align: end;
}
}
}
.neek-connection-note {
margin-block-start: calc(var(--neek-space-unit) * 3);
color: var(--neek-connection-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
:is(.neek-connection, .neek-aside-connection, .neek-play)[data-provider='steam'] {
--neek-connection-from: #111927;
--neek-connection-to: #004074;
--neek-connection-border: rgb(24 52 77 / 55%);
}
:is(.neek-connection, .neek-aside-connection, .neek-play)[data-provider='discord'] {
--neek-connection-from: #5865f2;
--neek-connection-to: #313338;
--neek-connection-border: rgb(71 82 196 / 45%);
}
:is(.neek-connection, .neek-aside-connection, .neek-play)[data-provider='twitch'] {
--neek-connection-from: #9146ff;
--neek-connection-to: #18181b;
--neek-connection-border: rgb(145 70 255 / 45%);
}
.neek-stat-link {
color: inherit;
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
}
@layer neek.components {
.neek-game {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: calc(var(--neek-space-unit) * 6);
@media (width >= 48rem) {
grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 10);
}
}
.neek-game-cover {
overflow: hidden;
aspect-ratio: 460 / 215;
border: var(--neek-border-width) solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 12%));
border-radius: var(--neek-radius-lg);
box-shadow: 0 1.5rem 3rem -1rem light-dark(rgb(40 20 60 / 35%), rgb(0 0 0 / 60%));
}
.neek-game-cover-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.neek-game-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--neek-space-unit) * 4);
min-width: 0;
}
.neek-game-name {
margin: 0;
font-family: var(--neek-type-site-title-font);
font-size: var(--neek-type-site-title-size);
line-height: var(--neek-type-site-title-leading);
font-weight: var(--neek-type-site-title-weight);
letter-spacing: var(--neek-type-site-title-tracking);
text-transform: var(--neek-type-site-title-transform);
color: var(--neek-type-site-title-color);
overflow-wrap: anywhere;
& > a {
color: inherit;
text-decoration-line: none;
}
}
.neek-game-project {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2);
margin-block-start: calc(var(--neek-space-unit) * -2);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
&:hover > .neek-game-project-name {
text-decoration-line: underline;
}
}
.neek-game-project-label {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-game-tagline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-game-description {
max-width: 38rem;
margin: 0;
color: var(--neek-text-secondary);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
.neek-game-facts {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 8);
margin: 0;
}
.neek-game-fact {
display: flex;
flex-direction: column;
min-width: 0;
}
.neek-game-fact-label {
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-game-fact-value {
margin: 0;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
}
.neek-game-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
padding-block-start: calc(var(--neek-space-unit) * 1);
}
.neek-game-store {
--neek-provider-icon-size: calc(var(--neek-space-unit) * 4);
--neek-icon-size: calc(var(--neek-space-unit) * 3.5);
& > .neek-icon {
opacity: 0.6;
}
}
.neek-play {
--neek-connection-from: var(--neek-neutral-800);
--neek-connection-to: var(--neek-neutral-950);
--neek-connection-border: color-mix(in oklab, var(--neek-connection-from) 55%, transparent);
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: var(--neek-border-width) solid var(--neek-connection-border);
border-radius: var(--neek-radius-lg);
background-image: linear-gradient(135deg, var(--neek-connection-from), var(--neek-connection-to));
color: #ffffff;
@container (width >= 30rem) {
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
align-items: center;
}
}
.neek-play-cover {
display: block;
aspect-ratio: 460 / 215;
}
.neek-play-cover-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.neek-play-body {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1.5);
padding: calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 5);
}
.neek-play-text {
margin: 0;
color: rgb(255 255 255 / 80%);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
}
.neek-play-game {
color: #ffffff;
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
.neek-play-duration {
color: #ffffff;
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.neek-play-total {
--neek-icon-size: calc(var(--neek-space-unit) * 3.5);
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
margin: 0;
color: rgb(255 255 255 / 65%);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-stream-card:has(> .neek-play) {
container-type: inline-size;
}
.neek-play-post {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 2);
width: 100%;
max-width: var(--neek-stream-max-width);
margin-inline: auto;
@container (width >= 30rem) {
& > .neek-play {
align-items: stretch;
}
& .neek-play-cover {
aspect-ratio: auto;
min-height: calc(var(--neek-space-unit) * 28);
}
}
& .neek-play-body {
justify-content: center;
gap: calc(var(--neek-space-unit) * 2);
}
& .neek-stream-context {
color: rgb(255 255 255 / 70%);
}
}
.neek-play-post-meta {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-play-post-avatar {
display: flex;
flex: none;
}
.neek-play-post-name {
overflow: hidden;
color: #ffffff;
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
text-overflow: ellipsis;
white-space: nowrap;
}
a.neek-play-post-name:hover {
text-decoration-line: underline;
}
.neek-play-post-time {
flex: none;
color: rgb(255 255 255 / 65%);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-decoration-line: none;
&:hover {
color: #ffffff;
}
}
.neek-play-post-source {
--neek-provider-icon-size: calc(var(--neek-space-unit) * 6);
display: flex;
margin-inline-start: auto;
color: rgb(255 255 255 / 55%);
}
.neek-play-post-actions {
padding-inline: calc(var(--neek-card-padding) + var(--neek-border-width));
}
.neek-play-post:has([data-reactions-picker]:not([hidden]), .neek-menu[open]) {
position: relative;
z-index: 28;
}
.neek-play-post[data-hidden] {
& > .neek-play {
border-style: dashed;
border-color: color-mix(in oklab, var(--neek-rainbow-orange) 55%, transparent);
}
& .neek-play-cover-image {
filter: grayscale(0.7);
opacity: 0.7;
}
}
.neek-top-players {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--neek-space-unit) * 4);
margin: 0;
padding: 0;
list-style: none;
}
.neek-top-player {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-top-player-rank {
flex: none;
width: calc(var(--neek-space-unit) * 4);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
text-align: end;
}
.neek-top-player:first-child > .neek-top-player-rank {
color: var(--neek-rainbow-orange);
font-weight: var(--neek-weight-semibold);
}
.neek-top-player-text {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1.5);
min-width: 0;
}
.neek-top-player-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-top-player-name {
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration-line: underline;
}
}
.neek-top-player-time {
flex: none;
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-top-player-bar {
display: block;
height: calc(var(--neek-space-unit) * 1);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
}
.neek-top-player-fill {
display: block;
width: var(--neek-top-player-share, 0%);
height: 100%;
border-radius: inherit;
background-image: var(--neek-rainbow);
}
}
@layer neek.components {
.neek-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
}
.neek-pagination-summary {
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-pagination-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
}
.neek-pagination-link {
display: inline-grid;
place-items: center;
min-width: calc(var(--neek-space-unit) * 9);
height: calc(var(--neek-space-unit) * 9);
padding-inline: calc(var(--neek-space-unit) * 2);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: var(--neek-radius-sm);
background-color: var(--neek-surface);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
font-variant-numeric: tabular-nums;
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:is(a):hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
border-color: var(--neek-text);
color: var(--neek-text);
}
&[aria-disabled] {
opacity: 0.4;
}
& > svg {
width: calc(var(--neek-space-unit) * 4);
height: calc(var(--neek-space-unit) * 4);
}
}
.neek-pagination-gap {
padding-inline: calc(var(--neek-space-unit) * 1);
color: var(--neek-meta-text);
}
}
@layer neek.components {
.neek-follow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
&[data-following] > .neek-follow-on,
&:not([data-following]) > .neek-follow-off {
display: none;
}
}
.neek-follow-on,
.neek-follow-off {
display: contents;
}
.neek-follow-button.neek-button[data-size='sm'] {
padding: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
white-space: nowrap;
}
.neek-follow-off .neek-follow-button {
display: inline-grid;
& > .neek-follow-label {
grid-area: 1 / 1;
text-align: center;
}
& > .neek-follow-label[data-label='unfollow'],
&:is(:hover, :focus-visible) > .neek-follow-label[data-label='following'] {
visibility: hidden;
}
&:is(:hover, :focus-visible) {
border-color: var(--neek-danger-border);
color: var(--neek-danger-text);
& > .neek-follow-label[data-label='unfollow'] {
visibility: visible;
}
}
}
.neek-follow-dialog {
--neek-modal-width: 26rem;
}
.neek-follow-dialog .neek-dialog-actions {
margin-block-start: calc(var(--neek-space-unit) * 5);
}
}
@layer neek.components {
.neek-projects {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 8);
min-width: 0;
}
.neek-projects-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 4);
}
.neek-projects-heading {
min-width: 0;
}
.neek-projects-title {
color: var(--neek-text);
font-family: var(--neek-font-heading);
font-size: var(--neek-text-2xl);
line-height: var(--neek-text-2xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
.neek-projects-lede {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-projects-group {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
scroll-margin-block-start: calc(var(--neek-header-offset, var(--neek-header-height)) + var(--neek-space-unit) * 4);
}
.neek-projects-group-header {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-projects-group-heading {
flex: 1;
min-width: 0;
}
.neek-projects-group-title {
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-projects-group-link {
color: inherit;
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
.neek-projects-group-meta {
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-projects-group-new {
display: inline-flex;
flex: none;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
padding: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-md);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
}
.neek-projects-list {
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
backdrop-filter: var(--neek-card-backdrop);
}
.neek-project-row {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 4);
& + & {
border-block-start: var(--neek-border-width) solid var(--neek-border);
}
}
.neek-project-row-text {
flex: 1;
min-width: 0;
}
.neek-project-row-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--neek-space-unit) * 0.5) calc(var(--neek-space-unit) * 2);
min-width: 0;
& > .neek-badge {
flex: none;
padding-block: calc(var(--neek-space-unit) * 0.5);
}
}
.neek-project-row-link {
max-width: 100%;
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
text-decoration-line: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration-line: underline;
}
}
.neek-project-row-meta {
display: flex;
flex-wrap: wrap;
column-gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-project-row-address {
overflow: hidden;
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-project-row-fact::before {
content: '·';
margin-inline-end: calc(var(--neek-space-unit) * 1.5);
}
.neek-project-row-manage {
flex: none;
}
.neek-project-row[data-state='disabled'] {
& .neek-project-row-link,
& .neek-project-row-meta {
color: var(--neek-text-muted);
}
& > .neek-avatar {
filter: grayscale(1);
opacity: var(--neek-project-row-disabled-opacity);
}
}
.neek-projects-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
padding: calc(var(--neek-space-unit) * 6) calc(var(--neek-space-unit) * 4);
border: var(--neek-border-width) dashed var(--neek-border);
border-radius: var(--neek-card-radius);
text-align: center;
&[data-first] {
padding-block: calc(var(--neek-space-unit) * 10);
border-style: solid;
border-color: var(--neek-card-border);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
}
}
.neek-projects-empty-title {
color: var(--neek-text);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-projects-empty-text {
max-width: 36ch;
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
@media (width < 40rem) {
.neek-project-row {
padding-inline: var(--neek-card-padding);
}
}
@media (width < 30rem) {
.neek-project-row {
padding-block: calc(var(--neek-space-unit) * 3);
}
.neek-projects-group-new {
padding: calc(var(--neek-space-unit) * 2);
font-size: 0;
line-height: 0;
}
.neek-project-row-manage {
padding-inline: calc(var(--neek-space-unit) * 2.5);
font-size: 0;
line-height: 0;
gap: 0;
}
}
}
@layer neek.components {
.neek-pull-refresh {
--neek-pull-refresh-pull: 0px;
--neek-pull-refresh-progress: 0;
position: relative;
height: var(--neek-pull-refresh-pull);
overflow: clip;
overflow-anchor: none;
transition: height var(--neek-duration-slow) var(--neek-ease);
&:is([data-state='pulling'], [data-state='armed']) {
transition: none;
}
}
.neek-pull-refresh-disc {
position: absolute;
bottom: calc(var(--neek-space-unit) * 2);
left: 50%;
display: grid;
place-items: center;
width: calc(var(--neek-space-unit) * 10);
height: calc(var(--neek-space-unit) * 10);
border: var(--neek-border-width) solid var(--neek-border);
border-radius: 50%;
background-color: light-dark(var(--neek-surface), var(--neek-neutral-800));
color: var(--neek-text-secondary);
opacity: min(1, var(--neek-pull-refresh-progress) * 2);
translate: -50% 0;
transition: color var(--neek-duration) var(--neek-ease), scale var(--neek-duration) var(--neek-ease);
.neek-pull-refresh[data-state='refreshing'] > & {
opacity: 1;
}
.neek-pull-refresh:is([data-state='armed'], [data-state='refreshing']) > & {
color: var(--neek-accent);
}
.neek-pull-refresh[data-state='armed'] > & {
scale: 1.1;
}
& > .neek-pull-refresh-icon {
width: calc(var(--neek-space-unit) * 5);
height: calc(var(--neek-space-unit) * 5);
rotate: calc(var(--neek-pull-refresh-progress) * 270deg);
}
.neek-pull-refresh[data-state='refreshing'] > & > .neek-pull-refresh-icon {
animation: neek-pull-refresh-spin 0.8s linear infinite;
}
}
@keyframes neek-pull-refresh-spin {
from {
rotate: 270deg;
}
to {
rotate: 630deg;
}
}
@media (prefers-reduced-motion: reduce) {
.neek-pull-refresh,
.neek-pull-refresh-disc {
transition: none;
}
.neek-pull-refresh-disc > .neek-pull-refresh-icon {
rotate: none;
}
.neek-pull-refresh[data-state='refreshing'] > .neek-pull-refresh-disc > .neek-pull-refresh-icon {
animation: none;
}
.neek-pull-refresh[data-state='armed'] > .neek-pull-refresh-disc {
scale: none;
}
}
}
@layer neek.components {
.neek-back-link {
--neek-icon-size: 1rem;
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration: none;
border-radius: var(--neek-radius-sm);
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-text);
}
}
.neek-back-link-icon {
transition: translate var(--neek-duration) var(--neek-ease);
.neek-back-link:hover & {
translate: calc(var(--neek-space-unit) * -0.5) 0;
}
}
}
@layer neek.components {
.neek-admin-app .neek-header-inner {
width: calc(100% - var(--neek-frame-gutter) * 2);
}
.neek-admin {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: calc(100dvh - var(--neek-header-offset, var(--neek-header-height)));
@media (width >= 60rem) {
grid-template-columns: var(--neek-admin-nav-width) minmax(0, 1fr);
}
}
.neek-admin-sidebar {
display: none;
@media (width >= 60rem) {
display: block;
}
}
.neek-admin-sidebar-inner {
position: sticky;
top: var(--neek-header-offset, var(--neek-header-height));
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
max-height: calc(100dvh - var(--neek-header-offset, var(--neek-header-height)));
padding: calc(var(--neek-space-unit) * 6) calc(var(--neek-space-unit) * 3);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&:hover {
scrollbar-color: var(--neek-border-strong) transparent;
}
}
.neek-admin-sidebar-title {
padding-inline: calc(var(--neek-space-unit) * 3);
color: var(--neek-text);
font-family: var(--neek-font-heading);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
}
.neek-admin-nav,
.neek-admin-menu-list {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
}
.neek-admin-nav-heading {
margin-block-end: calc(var(--neek-space-unit) * 1.5);
padding-inline: calc(var(--neek-space-unit) * 3);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-admin-nav-list {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
margin: 0;
padding: 0;
list-style: none;
}
.neek-admin-nav-link {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2.5);
padding: calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-sm);
color: var(--neek-nav-item-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease), background-color var(--neek-duration) var(--neek-ease);
&:hover {
background-color: var(--neek-surface-hover);
color: var(--neek-text);
}
&[aria-current] {
background-color: var(--neek-nav-current-bg);
color: var(--neek-nav-current-text);
}
&[data-danger] {
color: var(--neek-danger);
}
&:focus-visible {
outline: 2px solid var(--neek-button-ring);
outline-offset: -2px;
}
}
.neek-admin-nav-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-admin-nav-icon {
flex-shrink: 0;
color: var(--neek-settings-nav-icon);
}
.neek-admin-nav-link:is(:hover, [aria-current]) .neek-admin-nav-icon {
color: currentColor;
}
.neek-admin-nav-badge {
min-width: calc(var(--neek-space-unit) * 5);
padding-inline: calc(var(--neek-space-unit) * 1.5);
border-radius: var(--neek-radius-full);
background-color: var(--neek-rail-badge-bg);
color: var(--neek-rail-badge-text);
font-size: var(--neek-text-xs);
line-height: calc(var(--neek-space-unit) * 5);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
text-align: center;
}
.neek-admin-sidebar-footer {
margin-block-start: auto;
padding-block-start: calc(var(--neek-space-unit) * 4);
padding-inline: calc(var(--neek-space-unit) * 3);
border-block-start: var(--neek-border-width) solid var(--neek-border);
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-admin-content {
min-width: 0;
padding: calc(var(--neek-space-unit) * 6) var(--neek-frame-gutter) calc(var(--neek-space-unit) * 20);
@media (width >= 60rem) {
padding: calc(var(--neek-space-unit) * 8) calc(var(--neek-space-unit) * 10) calc(var(--neek-space-unit) * 20);
}
}
.neek-admin-menu {
margin-block-end: calc(var(--neek-space-unit) * 6);
@media (width >= 60rem) {
display: none;
}
}
.neek-admin-menu-toggle {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2.5);
padding: calc(var(--neek-space-unit) * 2.5) calc(var(--neek-space-unit) * 3);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-card-bg);
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
display: none;
}
&:focus-visible {
outline: 2px solid var(--neek-button-ring);
outline-offset: 2px;
}
}
.neek-admin-menu-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-admin-menu-chevron {
color: var(--neek-text-secondary);
transition: rotate var(--neek-duration) var(--neek-ease);
.neek-admin-menu[open] & {
rotate: 180deg;
}
}
.neek-admin-menu-list {
margin-block-start: calc(var(--neek-space-unit) * 2);
padding: calc(var(--neek-space-unit) * 3) calc(var(--neek-space-unit) * 1.5);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-radius-md);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
}
.neek-admin-page {
width: 100%;
max-width: var(--neek-admin-page-width);
margin-inline: auto;
&[data-width='wide'] {
max-width: var(--neek-admin-wide-width);
}
}
.neek-admin-page-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 4);
margin-block-end: calc(var(--neek-space-unit) * 8);
}
.neek-admin-page-heading {
min-width: 0;
}
.neek-admin-page-eyebrow {
margin-block-end: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-admin-page-title {
font-family: var(--neek-font-heading);
color: var(--neek-text);
font-size: var(--neek-text-2xl);
line-height: var(--neek-text-2xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
overflow-wrap: anywhere;
}
.neek-admin-page-lede {
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-admin-page-actions {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 2);
}
.neek-admin-page-body {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 6);
min-width: 0;
& > .neek-tabs {
margin-block-end: 0;
}
& > form:has(> .neek-settings-section) {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 6);
}
}
}
@layer neek.components {
.neek-dashboard {
container: neek-dashboard / inline-size;
}
.neek-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-flow: row dense;
gap: var(--neek-widget-gap);
@container neek-dashboard (width >= 40rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container neek-dashboard (width >= 68rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.neek-widget {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
min-width: 0;
padding: var(--neek-card-padding);
border: var(--neek-border-width) solid var(--neek-card-border);
border-radius: var(--neek-card-radius);
background-color: var(--neek-card-bg);
box-shadow: var(--neek-card-shadow);
@container neek-dashboard (width >= 40rem) {
padding: var(--neek-card-padding-wide);
&[data-span] {
grid-column: span 2;
}
}
@container neek-dashboard (width >= 68rem) {
&[data-span='full'] {
grid-column: 1 / -1;
}
}
&[data-tone='warning'] {
border-color: var(--neek-warning-border);
}
&[data-tone='danger'] {
border-color: var(--neek-danger-border);
}
}
.neek-widget-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-widget-title {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 2);
min-width: 0;
color: var(--neek-text);
font-family: var(--neek-font-heading);
font-size: var(--neek-text-base);
line-height: var(--neek-text-base-leading);
font-weight: var(--neek-weight-semibold);
}
.neek-widget-icon {
flex-shrink: 0;
color: var(--neek-widget-icon);
}
.neek-widget-meta {
display: flex;
flex-shrink: 0;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.04em;
white-space: nowrap;
}
.neek-widget-live {
position: relative;
width: calc(var(--neek-space-unit) * 2);
height: calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: var(--neek-success);
&::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--neek-success);
animation: neek-widget-live 2s var(--neek-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
&::after {
animation: none;
}
}
}
@keyframes neek-widget-live {
from {
opacity: 0.6;
scale: 1;
}
to {
opacity: 0;
scale: 2.6;
}
}
.neek-widget-body {
display: flex;
flex: 1;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
min-width: 0;
}
.neek-widget-footer {
margin-block-start: auto;
padding-block-start: calc(var(--neek-space-unit) * 4);
border-block-start: var(--neek-border-width) solid var(--neek-border-subtle);
}
.neek-widget-link {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-decoration-line: none;
transition: color var(--neek-duration) var(--neek-ease);
&:hover {
color: var(--neek-text);
}
}
.neek-widget-link-icon {
width: 1em;
height: 1em;
transition: translate var(--neek-duration) var(--neek-ease);
.neek-widget-link:hover & {
translate: 2px 0;
}
}
.neek-widget-metrics {
display: flex;
flex-wrap: wrap;
gap: calc(var(--neek-space-unit) * 4) calc(var(--neek-space-unit) * 10);
}
.neek-widget-split {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 5);
}
.neek-widget-details {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 1);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
color: var(--neek-text-secondary);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-variant-numeric: tabular-nums;
}
.neek-widget-detail:first-child {
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
}
.neek-widget-users {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 3);
margin: 0;
padding: 0;
list-style: none;
}
.neek-widget-user {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 3);
min-width: 0;
}
.neek-widget-user-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.neek-widget-user-name {
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-weight: var(--neek-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
text-decoration-line: none;
&:is(a):hover {
text-decoration-line: underline;
}
}
.neek-widget-user-meta {
overflow: hidden;
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-widget-more {
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-metric {
min-width: 0;
}
.neek-metric-label {
margin-block-end: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.neek-metric-value {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: calc(var(--neek-space-unit) * 1) calc(var(--neek-space-unit) * 2.5);
color: var(--neek-text);
}
.neek-metric-number {
font-size: var(--neek-text-3xl);
line-height: var(--neek-text-3xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
font-variant-numeric: tabular-nums;
.neek-metric[data-size='sm'] & {
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
}
}
.neek-metric-unit {
margin-inline-start: calc(var(--neek-space-unit) * -1.5);
color: var(--neek-text-secondary);
font-size: var(--neek-text-lg);
line-height: var(--neek-text-lg-leading);
font-weight: var(--neek-weight-medium);
}
.neek-metric-text {
margin-block-start: calc(var(--neek-space-unit) * 1);
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-change {
display: inline-flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1);
align-self: center;
padding: calc(var(--neek-space-unit) * 0.5) calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
color: var(--neek-text-secondary);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
&[data-tone='positive'] {
background-color: var(--neek-success-soft);
color: var(--neek-success-text);
}
&[data-tone='negative'] {
background-color: var(--neek-danger-soft);
color: var(--neek-danger-text);
}
}
.neek-change-icon {
width: 1.1em;
height: 1.1em;
}
.neek-bar-chart {
min-width: 0;
margin: 0;
}
.neek-bar-chart-bars {
display: grid;
grid-template-columns: repeat(var(--neek-chart-count), minmax(0, 1fr));
align-items: end;
gap: var(--neek-chart-bar-gap);
height: var(--neek-chart-height);
margin: 0;
padding: 0;
border-block-end: var(--neek-border-width) solid var(--neek-border);
background-image: linear-gradient(to bottom, var(--neek-chart-grid) var(--neek-border-width), transparent var(--neek-border-width));
background-size: 100% 25%;
list-style: none;
}
.neek-bar-chart-bar {
height: max(var(--neek-bar), 2px);
border-radius: var(--neek-chart-bar-radius) var(--neek-chart-bar-radius) 0 0;
background-color: var(--neek-chart-bar);
transition: background-color var(--neek-duration) var(--neek-ease);
&:hover,
&[data-current] {
background-color: var(--neek-chart-bar-strong);
}
}
.neek-bar-chart-axis {
display: grid;
grid-template-columns: repeat(var(--neek-chart-count), minmax(0, 1fr));
margin-block-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
}
.neek-bar-chart-label {
grid-row: 1;
grid-column: var(--neek-chart-at);
justify-self: center;
white-space: nowrap;
}
.neek-sparkline {
--neek-sparkline-color: var(--neek-chart-line);
min-width: 0;
margin: 0;
&[data-tone='warning'] {
--neek-sparkline-color: var(--neek-warning);
}
&[data-tone='danger'] {
--neek-sparkline-color: var(--neek-danger);
}
}
.neek-sparkline-chart {
display: block;
width: 100%;
height: var(--neek-sparkline-height);
overflow: visible;
}
.neek-sparkline-area {
fill: color-mix(in oklab, var(--neek-sparkline-color) 16%, transparent);
stroke: none;
}
.neek-sparkline-line {
fill: none;
stroke: var(--neek-sparkline-color);
stroke-width: 1.75;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.neek-sparkline-axis {
display: flex;
justify-content: space-between;
margin-block-start: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-gauge {
--neek-gauge-color: var(--neek-chart-line);
position: relative;
display: grid;
flex-shrink: 0;
place-items: center;
width: var(--neek-gauge-size);
aspect-ratio: 1;
&[data-tone='warning'] {
--neek-gauge-color: var(--neek-warning);
}
&[data-tone='danger'] {
--neek-gauge-color: var(--neek-danger);
}
}
.neek-gauge-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
rotate: -90deg;
}
.neek-gauge-track,
.neek-gauge-value {
fill: none;
stroke-width: 4;
}
.neek-gauge-track {
stroke: var(--neek-chart-track);
}
.neek-gauge-value {
stroke: var(--neek-gauge-color);
stroke-linecap: round;
transition: stroke-dasharray var(--neek-duration-slow) var(--neek-ease);
}
.neek-gauge-text {
position: relative;
color: var(--neek-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
letter-spacing: var(--neek-tracking-tight);
font-variant-numeric: tabular-nums;
}
.neek-meter {
--neek-meter-color: var(--neek-chart-line);
display: block;
height: calc(var(--neek-space-unit) * 2);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-chart-track);
&[data-tone='warning'] {
--neek-meter-color: var(--neek-warning);
}
&[data-tone='danger'] {
--neek-meter-color: var(--neek-danger);
}
}
.neek-meter-bar {
display: block;
width: var(--neek-meter);
height: 100%;
border-radius: inherit;
background-color: var(--neek-meter-color);
transition: width var(--neek-duration-slow) var(--neek-ease);
}
.neek-disk-list {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 5);
margin: 0;
padding: 0;
list-style: none;
}
.neek-disk-head,
.neek-disk-used {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: calc(var(--neek-space-unit) * 3);
font-variant-numeric: tabular-nums;
}
.neek-disk-head {
margin-block-end: calc(var(--neek-space-unit) * 2);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
.neek-disk-name {
min-width: 0;
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
}
.neek-disk-detail {
margin-inline-start: calc(var(--neek-space-unit) * 2);
color: var(--neek-text-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
font-weight: var(--neek-weight-regular);
}
.neek-disk-free {
flex-shrink: 0;
color: var(--neek-text-secondary);
}
.neek-disk-used {
margin-block-start: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-text-muted);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
}
.neek-disk-share {
color: var(--neek-text-secondary);
font-weight: var(--neek-weight-semibold);
}
.neek-queue-totals {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(var(--neek-space-unit) * 2);
margin: 0;
}
.neek-queue-total {
padding: calc(var(--neek-space-unit) * 3);
border-radius: var(--neek-radius-md);
background-color: var(--neek-surface-hover);
&[data-alert] {
background-color: var(--neek-danger-soft);
}
}
.neek-queue-total-label {
display: flex;
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5);
color: var(--neek-meta-text);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
letter-spacing: 0.04em;
text-transform: uppercase;
&::before {
content: '';
width: calc(var(--neek-space-unit) * 2);
height: calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: var(--neek-queue-color);
}
}
.neek-queue-total-value {
margin: calc(var(--neek-space-unit) * 1) 0 0;
color: var(--neek-text);
font-size: var(--neek-text-xl);
line-height: var(--neek-text-xl-leading);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
.neek-queue-total[data-alert] & {
color: var(--neek-danger-text);
}
}
.neek-queue-total,
.neek-queue-bar-part {
&[data-state='running'] {
--neek-queue-color: var(--neek-chart-line);
}
&[data-state='pending'] {
--neek-queue-color: color-mix(in oklab, var(--neek-chart-line) 40%, var(--neek-chart-track));
}
&[data-state='failed'] {
--neek-queue-color: var(--neek-danger);
}
}
.neek-queue-table {
width: 100%;
border-collapse: collapse;
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
font-variant-numeric: tabular-nums;
}
.neek-queue-th {
padding: 0 0 calc(var(--neek-space-unit) * 2);
color: var(--neek-meta-text);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-weight: var(--neek-weight-medium);
text-align: start;
}
.neek-queue-row {
border-block-start: var(--neek-border-width) solid var(--neek-border-subtle);
}
.neek-queue-name {
padding-block: calc(var(--neek-space-unit) * 2);
color: var(--neek-text);
font-weight: var(--neek-weight-medium);
text-align: start;
}
.neek-queue-td {
padding: calc(var(--neek-space-unit) * 2) 0 calc(var(--neek-space-unit) * 2) calc(var(--neek-space-unit) * 3);
color: var(--neek-text-secondary);
vertical-align: top;
&[data-alert] {
color: var(--neek-danger-text);
font-weight: var(--neek-weight-semibold);
}
}
.neek-queue-th[data-num],
.neek-queue-td[data-num] {
text-align: end;
}
.neek-queue-bar {
display: flex;
gap: 2px;
height: calc(var(--neek-space-unit) * 1.5);
margin-block-start: calc(var(--neek-space-unit) * 1.5);
overflow: hidden;
border-radius: var(--neek-radius-full);
background-color: var(--neek-chart-track);
}
.neek-queue-bar-part {
background-color: var(--neek-queue-color);
&[data-state='running'] {
width: var(--neek-queue-running);
}
&[data-state='pending'] {
width: var(--neek-queue-pending);
}
&[data-state='failed'] {
width: var(--neek-queue-failed);
}
}
.neek-log {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.neek-log-entry {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
'time level count'
'text text text';
align-items: center;
gap: calc(var(--neek-space-unit) * 1.5) calc(var(--neek-space-unit) * 3);
padding-block: calc(var(--neek-space-unit) * 3);
border-block-start: var(--neek-border-width) solid var(--neek-border-subtle);
&:first-child {
padding-block-start: 0;
border-block-start: 0;
}
@container neek-dashboard (width >= 40rem) {
grid-template-columns: calc(var(--neek-space-unit) * 22) calc(var(--neek-space-unit) * 20) minmax(0, 1fr) auto;
grid-template-areas: 'time level text count';
align-items: baseline;
}
}
.neek-log-time {
grid-area: time;
color: var(--neek-text-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.neek-log-level {
grid-area: level;
}
.neek-log-text {
display: flex;
flex-direction: column;
gap: calc(var(--neek-space-unit) * 0.5);
grid-area: text;
min-width: 0;
}
.neek-log-message {
overflow: hidden;
color: var(--neek-text);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
overflow-wrap: anywhere;
text-decoration-line: none;
@container neek-dashboard (width >= 40rem) {
text-overflow: ellipsis;
white-space: nowrap;
}
&:is(a):hover {
text-decoration-line: underline;
}
}
.neek-log-source {
overflow: hidden;
color: var(--neek-text-muted);
font-family: var(--neek-font-mono);
font-size: var(--neek-text-xs);
line-height: var(--neek-text-xs-leading);
text-overflow: ellipsis;
white-space: nowrap;
}
.neek-log-count {
grid-area: count;
justify-self: end;
padding-inline: calc(var(--neek-space-unit) * 2);
border-radius: var(--neek-radius-full);
background-color: var(--neek-surface-hover);
color: var(--neek-text-secondary);
font-size: var(--neek-text-xs);
line-height: calc(var(--neek-space-unit) * 5);
font-weight: var(--neek-weight-semibold);
font-variant-numeric: tabular-nums;
}
.neek-log-empty {
color: var(--neek-text-muted);
font-size: var(--neek-text-sm);
line-height: var(--neek-text-sm-leading);
}
}
@layer neek.utilities {
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
}
@layer neek.theme {
:root:is(:not([data-theme]), [data-theme='']) {
--neek-button-angle: var(--neek-logo-angle) in srgb;
--neek-button-brighten: 15%;
--neek-button-brighten-hover: 15%;
--neek-button-lift-hover: 6%;
--neek-button-danger-brighten: 15%;
--neek-button-danger-brighten-hover: 15%;
--neek-button-color-text: #ffffff;
--neek-button-yellow-text: #000000;
--neek-button-color: var(--neek-logo-from);
--neek-button-primary-from: var(--neek-logo-from);
--neek-button-primary-via: var(--neek-logo-via);
--neek-button-primary-to: var(--neek-logo-to);
--neek-button-red: #ff0016;
--neek-button-orange: #ff7d00;
--neek-button-yellow: #ffcd00;
--neek-button-green: #00ff20;
--neek-button-cyan: #00b0ff;
--neek-button-blue: #0038ff;
--neek-button-violet: #6500ff;
--neek-button-pink: var(--neek-logo-from);
--neek-button-pink-via: var(--neek-logo-via);
--neek-button-pink-to: var(--neek-logo-to);
--neek-button-danger-bg: var(--neek-button-red);
--neek-button-danger-bg-active: #cc0012;
--neek-button-disabled-bg: light-dark(var(--neek-neutral-200), var(--neek-neutral-800));
--neek-button-disabled-text: var(--neek-neutral-500);
--neek-button-disabled-opacity: 1;
}
}
@layer neek.theme {
[data-theme='tokyo-night'] {
--neek-neutral-50: light-dark(#e1e2e7, #d5d6f0);
--neek-neutral-100: light-dark(#d5d6db, #c0caf5);
--neek-neutral-200: light-dark(#c4c8da, #c0caf5);
--neek-neutral-300: light-dark(#a8aecb, #a9b1d6);
--neek-neutral-400: light-dark(#8990b3, #a9b1d6);
--neek-neutral-500: light-dark(#6172b0, #737aa2);
--neek-neutral-600: light-dark(#6172b0, #545c7e);
--neek-neutral-700: light-dark(#4a5a99, #3b4261);
--neek-neutral-800: light-dark(#3760bf, #292e42);
--neek-neutral-900: light-dark(#3760bf, #24283b);
--neek-neutral-950: light-dark(#2d4f9e, #1a1b26);
--neek-emerald-50: light-dark(#d9e3cf, #2a3329);
--neek-emerald-200: #b5cb9f;
--neek-emerald-300: #9ece6a;
--neek-emerald-400: #9ece6a;
--neek-emerald-500: #73a942;
--neek-emerald-600: #587539;
--neek-emerald-700: #587539;
--neek-emerald-800: #485e30;
--neek-red-50: light-dark(#f4d6de, #3b2530);
--neek-red-200: #f0a7b8;
--neek-red-300: light-dark(#f7768e, #f97e94);
--neek-red-400: light-dark(#f7768e, #f97e94);
--neek-red-500: #f7768e;
--neek-red-600: #f52a65;
--neek-red-700: #c4214f;
--neek-red-800: #a01c41;
--neek-amber-50: light-dark(#ece2d0, #35302a);
--neek-amber-200: #d9c19a;
--neek-amber-300: #e0af68;
--neek-amber-400: #e0af68;
--neek-amber-500: #e0af68;
--neek-amber-700: #8c6c3e;
--neek-bg: light-dark(#e1e2e7, #1a1b26);
--neek-bg-muted: light-dark(#d5d6db, #16161e);
--neek-surface: light-dark(rgb(233 233 236 / 0.75), #292e42);
--neek-surface-hover: light-dark(rgb(244 244 247 / 0.9), #1f2335);
--neek-surface-input: light-dark(#e9e9ec, #16161e);
--neek-border: light-dark(#c4c8da, #444b6a);
--neek-border-strong: light-dark(#a8aecb, #545c7e);
--neek-text: light-dark(#365ebb, #c0caf5);
--neek-text-secondary: light-dark(#6172b0, #a9b1d6);
--neek-text-muted: light-dark(#6172b0, #9ca3c5);
--neek-pattern-lift-light: 5%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 23%;
--neek-pattern-strength-dark: 25%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#2e7de9, #8fb1f9);
--neek-accent-hover: light-dark(#9854f1, #bb9af7);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #1a1b26);
--neek-button-secondary-bg: light-dark(rgb(233 233 236 / 0.8), rgb(36 40 59 / 0.6));
--neek-button-secondary-bg-hover: light-dark(#e9e9ec, #24283b);
--neek-shadow-color: light-dark(rgb(55 96 191 / 0.08), rgb(22 22 30 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='catppuccin'] {
--neek-neutral-50: light-dark(#eff1f5, #cdd6f4);
--neek-neutral-100: light-dark(#e6e9ef, #cdd6f4);
--neek-neutral-200: light-dark(#ccd0da, #bac2de);
--neek-neutral-300: light-dark(#bcc0cc, #aab1ca);
--neek-neutral-400: light-dark(#9ca0b0, #b0b7cf);
--neek-neutral-500: light-dark(#7c7f93, #7f849c);
--neek-neutral-600: light-dark(#6c6f85, #6c7086);
--neek-neutral-700: light-dark(#5c5f77, #45475a);
--neek-neutral-800: light-dark(#4c4f69, #313244);
--neek-neutral-900: light-dark(#4c4f69, #181825);
--neek-neutral-950: light-dark(#3c3f55, #1e1e2e);
--neek-emerald-50: light-dark(color-mix(in oklab, #40a02b 14%, #eff1f5), color-mix(in oklab, #a6e3a1 14%, #1e1e2e));
--neek-emerald-200: light-dark(color-mix(in oklab, #40a02b 35%, #eff1f5), color-mix(in oklab, #a6e3a1 35%, #1e1e2e));
--neek-emerald-300: light-dark(#40a02b, #a6e3a1);
--neek-emerald-400: light-dark(#40a02b, #a6e3a1);
--neek-emerald-500: light-dark(#40a02b, #a6e3a1);
--neek-emerald-600: light-dark(#40a02b, #a6e3a1);
--neek-emerald-700: light-dark(#40a02b, #a6e3a1);
--neek-emerald-800: light-dark(#40a02b, #a6e3a1);
--neek-red-50: light-dark(color-mix(in oklab, #d20f39 14%, #eff1f5), color-mix(in oklab, #f38ba8 14%, #1e1e2e));
--neek-red-200: light-dark(color-mix(in oklab, #d20f39 35%, #eff1f5), color-mix(in oklab, #f38ba8 35%, #1e1e2e));
--neek-red-300: light-dark(#d20f39, #f79fb6);
--neek-red-400: light-dark(#d20f39, #f79fb6);
--neek-red-500: light-dark(#d20f39, #f38ba8);
--neek-red-600: light-dark(#d20f39, #f38ba8);
--neek-red-700: light-dark(#d20f39, #f38ba8);
--neek-red-800: light-dark(#d20f39, #f38ba8);
--neek-amber-50: light-dark(color-mix(in oklab, #df8e1d 14%, #eff1f5), color-mix(in oklab, #f9e2af 14%, #1e1e2e));
--neek-amber-200: light-dark(color-mix(in oklab, #df8e1d 35%, #eff1f5), color-mix(in oklab, #f9e2af 35%, #1e1e2e));
--neek-amber-300: light-dark(#df8e1d, #f9e2af);
--neek-amber-400: light-dark(#df8e1d, #f9e2af);
--neek-amber-500: light-dark(#df8e1d, #f9e2af);
--neek-amber-600: light-dark(#df8e1d, #f9e2af);
--neek-amber-700: light-dark(#df8e1d, #f9e2af);
--neek-amber-800: light-dark(#df8e1d, #f9e2af);
--neek-bg: light-dark(#eff1f5, #1e1e2e);
--neek-bg-muted: light-dark(#e6e9ef, #181825);
--neek-surface: light-dark(rgb(255 255 255 / 0.7), #313244);
--neek-surface-hover: light-dark(#ffffff, #181825);
--neek-surface-input: light-dark(#ffffff, #181825);
--neek-border: light-dark(#ccd0da, #585b70);
--neek-border-strong: light-dark(#bcc0cc, #6c7086);
--neek-text: light-dark(#4c4f69, #cdd6f4);
--neek-text-secondary: light-dark(#5c5f77, #bac2de);
--neek-text-muted: light-dark(#7c7f93, #b0b7cf);
--neek-pattern-lift-light: 3%;
--neek-pattern-lift-dark: 4%;
--neek-pattern-strength-light: 18%;
--neek-pattern-strength-dark: 16%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#1d65f2, #90b9fb);
--neek-accent-hover: light-dark(#8839ef, #cba6f7);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #1e1e2e);
--neek-button-secondary-bg: light-dark(rgb(255 255 255 / 0.7), rgb(49 50 68 / 0.55));
--neek-button-danger-text: light-dark(#ffffff, #1e1e2e);
--neek-button-secondary-bg-hover: light-dark(#ffffff, #181825);
--neek-shadow-color: light-dark(rgb(76 79 105 / 0.08), rgb(17 17 27 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='ethereal'] {
--neek-neutral-50: light-dark(#eff3ff, #ffddc6);
--neek-neutral-100: light-dark(#e4e9f8, #ffcead);
--neek-neutral-200: light-dark(#cfd6e6, #d4ad96);
--neek-neutral-300: light-dark(#b7bed0, #aa8d80);
--neek-neutral-400: light-dark(#858ca0, #826f6b);
--neek-neutral-500: light-dark(#656d82, #5c5155);
--neek-neutral-600: light-dark(#4a5267, #403b44);
--neek-neutral-700: light-dark(#333b51, #252e56);
--neek-neutral-800: light-dark(#1e253b, #131a3a);
--neek-neutral-900: light-dark(#1e253b, #040816);
--neek-neutral-950: light-dark(#111625, #060b1e);
--neek-emerald-50: light-dark(#d9dfe6, #151e2d);
--neek-emerald-200: light-dark(#b8c2c3, #303b45);
--neek-emerald-300: light-dark(#5a6c5b, #92a593);
--neek-emerald-400: light-dark(#5a6c5b, #92a593);
--neek-emerald-500: light-dark(#5a6c5b, #92a593);
--neek-emerald-600: light-dark(#5a6c5b, #92a593);
--neek-emerald-700: light-dark(#5a6c5b, #92a593);
--neek-emerald-800: light-dark(#5a6c5b, #92a593);
--neek-red-50: light-dark(#edd9e2, #221828);
--neek-red-200: light-dark(#e7b3b7, #502a37);
--neek-red-300: light-dark(#c13036, #f3605f);
--neek-red-400: light-dark(#c13036, #f3605f);
--neek-red-500: light-dark(#c13036, #f3605f);
--neek-red-600: light-dark(#c13036, #f3605f);
--neek-red-700: light-dark(#c13036, #f3605f);
--neek-red-800: light-dark(#c13036, #f3605f);
--neek-amber-50: light-dark(#dfdede, #1e212a);
--neek-amber-200: light-dark(#c8bfae, #4a4338);
--neek-amber-300: light-dark(#836306, #e9bb4f);
--neek-amber-400: light-dark(#836306, #e9bb4f);
--neek-amber-500: light-dark(#836306, #e9bb4f);
--neek-amber-600: light-dark(#836306, #e9bb4f);
--neek-amber-700: light-dark(#836306, #e9bb4f);
--neek-amber-800: light-dark(#836306, #e9bb4f);
--neek-bg: light-dark(#eff3ff, #060b1e);
--neek-bg-muted: light-dark(#e4e9f8, #040816);
--neek-surface: light-dark(#fbfcff, #131a3a);
--neek-surface-hover: light-dark(#eff3ff, #040816);
--neek-surface-input: light-dark(#fbfcff, #040816);
--neek-border: light-dark(#cfd6e6, #252e56);
--neek-border-strong: light-dark(#b7bed0, #3f4364);
--neek-text: light-dark(#1e253b, #ffcead);
--neek-text-secondary: light-dark(#3c445c, #c9b8a6);
--neek-text-muted: light-dark(#5a637b, #7d8ec8);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 32%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#5c5fb3, #8388e0);
--neek-accent-hover: light-dark(#825b7c, #c89dc1);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #060b1e);
--neek-button-secondary-bg: light-dark(#fbfcff, #131a3a);
--neek-button-secondary-bg-hover: light-dark(#eff3ff, #040816);
--neek-button-danger-text: light-dark(#ffffff, #060b1e);
--neek-shadow-color: light-dark(rgb(30 37 59 / 0.08), rgb(4 8 22 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='everforest'] {
--neek-neutral-50: light-dark(#fdf6e3, #e8dfc6);
--neek-neutral-100: light-dark(#f4f0d9, #d3c6aa);
--neek-neutral-200: light-dark(#e6e2cc, #c7bb9f);
--neek-neutral-300: light-dark(#e0dcc7, #bfbca9);
--neek-neutral-400: light-dark(#bdc3af, #b6beb3);
--neek-neutral-500: light-dark(#939f91, #7a8478);
--neek-neutral-600: light-dark(#829181, #56635f);
--neek-neutral-700: light-dark(#708089, #4f585e);
--neek-neutral-800: light-dark(#5c6a72, #3d484d);
--neek-neutral-900: light-dark(#5c6a72, #343f44);
--neek-neutral-950: light-dark(#4b575e, #2d353b);
--neek-emerald-50: light-dark(color-mix(in oklab, #8da101 14%, #fdf6e3), color-mix(in oklab, #a7c080 14%, #2d353b));
--neek-emerald-200: light-dark(color-mix(in oklab, #8da101 35%, #fdf6e3), color-mix(in oklab, #a7c080 35%, #2d353b));
--neek-emerald-300: light-dark(#8da101, #b6cb96);
--neek-emerald-400: light-dark(#8da101, #b6cb96);
--neek-emerald-500: light-dark(#8da101, #a7c080);
--neek-emerald-600: light-dark(#8da101, #a7c080);
--neek-emerald-700: light-dark(#8da101, #a7c080);
--neek-emerald-800: light-dark(#8da101, #a7c080);
--neek-red-50: light-dark(color-mix(in oklab, #f85552 14%, #fdf6e3), color-mix(in oklab, #e67e80 14%, #2d353b));
--neek-red-200: light-dark(color-mix(in oklab, #f85552 35%, #fdf6e3), color-mix(in oklab, #e67e80 35%, #2d353b));
--neek-red-300: light-dark(#f85552, #e67e80);
--neek-red-400: light-dark(#f85552, #e67e80);
--neek-red-500: light-dark(#f85552, #e67e80);
--neek-red-600: light-dark(#f85552, #e67e80);
--neek-red-700: light-dark(#f85552, #e67e80);
--neek-red-800: light-dark(#f85552, #e67e80);
--neek-amber-50: light-dark(color-mix(in oklab, #dfa000 14%, #fdf6e3), color-mix(in oklab, #dbbc7f 14%, #2d353b));
--neek-amber-200: light-dark(color-mix(in oklab, #dfa000 35%, #fdf6e3), color-mix(in oklab, #dbbc7f 35%, #2d353b));
--neek-amber-300: light-dark(#dfa000, #dbbc7f);
--neek-amber-400: light-dark(#dfa000, #dbbc7f);
--neek-amber-500: light-dark(#dfa000, #dbbc7f);
--neek-amber-600: light-dark(#dfa000, #dbbc7f);
--neek-amber-700: light-dark(#dfa000, #dbbc7f);
--neek-amber-800: light-dark(#dfa000, #dbbc7f);
--neek-bg: light-dark(#fdf6e3, #2d353b);
--neek-bg-muted: light-dark(#f4f0d9, #232a2e);
--neek-surface: light-dark(rgb(255 251 239 / 0.75), #394449);
--neek-surface-hover: light-dark(#fffbef, #232a2e);
--neek-surface-input: light-dark(#fffbef, #232a2e);
--neek-border: light-dark(#e6e2cc, #56635f);
--neek-border-strong: light-dark(#bdc3af, #7a8478);
--neek-text: light-dark(#5c6a72, #d3c6aa);
--neek-text-secondary: light-dark(#708089, #bfbca9);
--neek-text-muted: light-dark(#829181, #b6beb3);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 20%;
--neek-pattern-strength-light: 33%;
--neek-pattern-strength-dark: 22%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#0472a1, #8bc8c0);
--neek-accent-hover: light-dark(#067b57, #8ecc9d);
--neek-accent-text: var(--neek-accent);
--neek-composer-type-pressed-bg: color-mix(in oklab, var(--neek-accent) 5%, transparent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#fdf6e3, #2d353b);
--neek-button-secondary-bg: light-dark(rgb(255 251 239 / 0.75), rgb(52 63 68 / 0.6));
--neek-button-danger-text: light-dark(#ffffff, #2d353b);
--neek-button-secondary-bg-hover: light-dark(#fffbef, #232a2e);
--neek-shadow-color: light-dark(rgb(92 106 114 / 0.08), rgb(35 42 46 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='flexoki'] {
--neek-neutral-50: light-dark(#fffcf0, #dcdcd5);
--neek-neutral-100: light-dark(#f2efe4, #cecdc3);
--neek-neutral-200: light-dark(#cecdc3, #aeada4);
--neek-neutral-300: light-dark(#b4b3aa, #8e8d87);
--neek-neutral-400: light-dark(#7d7c76, #706f6a);
--neek-neutral-500: light-dark(#5b5a56, #54524f);
--neek-neutral-600: light-dark(#3e3d3b, #3e3d3a);
--neek-neutral-700: light-dark(#262524, #343331);
--neek-neutral-800: light-dark(#100f0f, #1c1b1a);
--neek-neutral-900: light-dark(#100f0f, #0b0a0a);
--neek-neutral-950: light-dark(#070707, #100f0f);
--neek-emerald-50: light-dark(#e7e8d2, #1e2016);
--neek-emerald-200: light-dark(#c4caa5, #353b20);
--neek-emerald-300: light-dark(#61720c, #879a39);
--neek-emerald-400: light-dark(#61720c, #879a39);
--neek-emerald-500: light-dark(#61720c, #879a39);
--neek-emerald-600: light-dark(#61720c, #879a39);
--neek-emerald-700: light-dark(#61720c, #879a39);
--neek-emerald-800: light-dark(#61720c, #879a39);
--neek-red-50: light-dark(#fae2d4, #2a1b18);
--neek-red-200: light-dark(#efbbac, #542c27);
--neek-red-300: light-dark(#c03d33, #ea6456);
--neek-red-400: light-dark(#c03d33, #ea6456);
--neek-red-500: light-dark(#c03d33, #ea6456);
--neek-red-600: light-dark(#c03d33, #ea6456);
--neek-red-700: light-dark(#c03d33, #ea6456);
--neek-red-800: light-dark(#c03d33, #ea6456);
--neek-amber-50: light-dark(#ede6d1, #262116);
--neek-amber-200: light-dark(#d3c6a4, #4b3d1d);
--neek-amber-300: light-dark(#866703, #d0a215);
--neek-amber-400: light-dark(#866703, #d0a215);
--neek-amber-500: light-dark(#866703, #d0a215);
--neek-amber-600: light-dark(#866703, #d0a215);
--neek-amber-700: light-dark(#866703, #d0a215);
--neek-amber-800: light-dark(#866703, #d0a215);
--neek-bg: light-dark(#fffcf0, #100f0f);
--neek-bg-muted: light-dark(#f2efe4, #0b0a0a);
--neek-surface: light-dark(#fffef9, #1c1b1a);
--neek-surface-hover: light-dark(#fffcf0, #0b0a0a);
--neek-surface-input: light-dark(#fffef9, #0b0a0a);
--neek-border: light-dark(#cecdc3, #343331);
--neek-border-strong: light-dark(#b4b3aa, #474643);
--neek-text: light-dark(#100f0f, #cecdc3);
--neek-text-secondary: light-dark(#403e3c, #b7b5ac);
--neek-text-muted: light-dark(#6d6b66, #918f8a);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 1%;
--neek-pattern-strength-light: 15%;
--neek-pattern-strength-dark: 28%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#205ea6, #5193cc);
--neek-accent-hover: light-dark(#b0427d, #d967a1);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #100f0f);
--neek-button-secondary-bg: light-dark(#fffef9, #1c1b1a);
--neek-button-secondary-bg-hover: light-dark(#fffcf0, #0b0a0a);
--neek-button-danger-text: light-dark(#ffffff, #100f0f);
--neek-shadow-color: light-dark(rgb(16 15 15 / 0.08), rgb(11 10 10 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='gruvbox'] {
--neek-neutral-50: light-dark(#fbf1c7, #e1d1b7);
--neek-neutral-100: light-dark(#f2e5bc, #d4be98);
--neek-neutral-200: light-dark(#e5d5ad, #b8a586);
--neek-neutral-300: light-dark(#d5c39d, #9c8d74);
--neek-neutral-400: light-dark(#b29c7c, #817663);
--neek-neutral-500: light-dark(#9c8367, #675f52);
--neek-neutral-600: light-dark(#886c54, #534e45);
--neek-neutral-700: light-dark(#765944, #504945);
--neek-neutral-800: light-dark(#654735, #3c3836);
--neek-neutral-900: light-dark(#654735, #1e1e1e);
--neek-neutral-950: light-dark(#422d21, #282828);
--neek-emerald-50: light-dark(#e4ddaf, #383a31);
--neek-emerald-200: light-dark(#c2c08c, #52563f);
--neek-emerald-300: light-dark(#606b20, #aab766);
--neek-emerald-400: light-dark(#606b20, #aab766);
--neek-emerald-500: light-dark(#606b20, #aab766);
--neek-emerald-600: light-dark(#606b20, #aab766);
--neek-emerald-700: light-dark(#606b20, #aab766);
--neek-emerald-800: light-dark(#606b20, #aab766);
--neek-red-50: light-dark(#f3d8b3, #433635);
--neek-red-200: light-dark(#e6b395, #6d4c48);
--neek-red-300: light-dark(#b23c3e, #fe9289);
--neek-red-400: light-dark(#b23c3e, #fe9289);
--neek-red-500: light-dark(#b23c3e, #fe9289);
--neek-red-600: light-dark(#b23c3e, #fe9289);
--neek-red-700: light-dark(#b23c3e, #fe9289);
--neek-red-800: light-dark(#b23c3e, #fe9289);
--neek-amber-50: light-dark(#ecdbae, #3e3830);
--neek-amber-200: light-dark(#d6ba88, #61513b);
--neek-amber-300: light-dark(#905902, #d9a758);
--neek-amber-400: light-dark(#905902, #d9a758);
--neek-amber-500: light-dark(#905902, #d9a758);
--neek-amber-600: light-dark(#905902, #d9a758);
--neek-amber-700: light-dark(#905902, #d9a758);
--neek-amber-800: light-dark(#905902, #d9a758);
--neek-bg: light-dark(#fbf1c7, #282828);
--neek-bg-muted: light-dark(#f2e5bc, #1e1e1e);
--neek-surface: light-dark(#fdf8e3, #3c3836);
--neek-surface-hover: light-dark(#fbf1c7, #1e1e1e);
--neek-surface-input: light-dark(#fdf8e3, #1e1e1e);
--neek-border: light-dark(#e5d5ad, #504945);
--neek-border-strong: light-dark(#d5c39d, #615850);
--neek-text: light-dark(#654735, #d4be98);
--neek-text-secondary: light-dark(#6f6258, #bdae93);
--neek-text-muted: light-dark(#716254, #bcaea2);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 21%;
--neek-pattern-strength-dark: 27%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#406b75, #88b9ae);
--neek-accent-hover: light-dark(#a14e0c, #f4996d);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #282828);
--neek-button-secondary-bg: light-dark(#fdf8e3, #3c3836);
--neek-button-secondary-bg-hover: light-dark(#fbf1c7, #1e1e1e);
--neek-button-danger-text: light-dark(#ffffff, #282828);
--neek-shadow-color: light-dark(rgb(101 71 53 / 0.08), rgb(30 30 30 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='hackerman'] {
--neek-neutral-50: light-dark(#f1f3fc, #e7f9ff);
--neek-neutral-100: light-dark(#e7e9f4, #ddf7ff);
--neek-neutral-200: light-dark(#d3d5e1, #b9cfd7);
--neek-neutral-300: light-dark(#bcbeca, #96a8b1);
--neek-neutral-400: light-dark(#8a8c99, #74828c);
--neek-neutral-500: light-dark(#6b6d79, #555f69);
--neek-neutral-600: light-dark(#50515e, #3d444e);
--neek-neutral-700: light-dark(#393b47, #333a4a);
--neek-neutral-800: light-dark(#242531, #151828);
--neek-neutral-900: light-dark(#242531, #080910);
--neek-neutral-950: light-dark(#15161e, #0b0c16);
--neek-emerald-50: light-dark(#d4e1e0, #162526);
--neek-emerald-200: light-dark(#a8c7b7, #25503f);
--neek-emerald-300: light-dark(#047740, #4fe88f);
--neek-emerald-400: light-dark(#047740, #4fe88f);
--neek-emerald-500: light-dark(#047740, #4fe88f);
--neek-emerald-600: light-dark(#047740, #4fe88f);
--neek-emerald-700: light-dark(#047740, #4fe88f);
--neek-emerald-800: light-dark(#047740, #4fe88f);
--neek-red-50: light-dark(#d3e2de, #162724);
--neek-red-200: light-dark(#a8c8b1, #265438);
--neek-red-300: light-dark(#027929, #50f872);
--neek-red-400: light-dark(#027929, #50f872);
--neek-red-500: light-dark(#027929, #50f872);
--neek-red-600: light-dark(#027929, #50f872);
--neek-red-700: light-dark(#027929, #50f872);
--neek-red-800: light-dark(#027929, #50f872);
--neek-amber-50: light-dark(#d4e1e5, #17272d);
--neek-amber-200: light-dark(#a8c5c3, #275351);
--neek-amber-300: light-dark(#0b7462, #50f7d4);
--neek-amber-400: light-dark(#0b7462, #50f7d4);
--neek-amber-500: light-dark(#0b7462, #50f7d4);
--neek-amber-600: light-dark(#0b7462, #50f7d4);
--neek-amber-700: light-dark(#0b7462, #50f7d4);
--neek-amber-800: light-dark(#0b7462, #50f7d4);
--neek-bg: light-dark(#f1f3fc, #0b0c16);
--neek-bg-muted: light-dark(#e7e9f4, #080910);
--neek-surface: light-dark(#fcfcff, #151828);
--neek-surface-hover: light-dark(#f1f3fc, #080910);
--neek-surface-input: light-dark(#fcfcff, #080910);
--neek-border: light-dark(#d3d5e1, #333a4a);
--neek-border-strong: light-dark(#bcbeca, #485161);
--neek-text: light-dark(#242531, #ddf7ff);
--neek-text-secondary: light-dark(#424451, #b5c5db);
--neek-text-muted: light-dark(#606270, #878cb4);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 20%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#097833, #82fb9c);
--neek-accent-hover: light-dark(#007373, #7cf8f7);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #0b0c16);
--neek-button-secondary-bg: light-dark(#fcfcff, #151828);
--neek-button-secondary-bg-hover: light-dark(#f1f3fc, #080910);
--neek-button-danger-text: light-dark(#ffffff, #0b0c16);
--neek-shadow-color: light-dark(rgb(36 37 49 / 0.08), rgb(8 9 16 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='jade-horse'] {
--neek-neutral-50: light-dark(#eaf7f2, #e9f2ed);
--neek-neutral-100: light-dark(#deeee8, #dfede5);
--neek-neutral-200: light-dark(#c9dbd4, #bdccc4);
--neek-neutral-300: light-dark(#b2c4bd, #9caca4);
--neek-neutral-400: light-dark(#80928b, #7c8c85);
--neek-neutral-500: light-dark(#61736c, #5e6f67);
--neek-neutral-600: light-dark(#455851, #465851);
--neek-neutral-700: light-dark(#2f413a, #2b5147);
--neek-neutral-800: light-dark(#192b25, #203b31);
--neek-neutral-900: light-dark(#192b25, #0f1e19);
--neek-neutral-950: light-dark(#0d1a16, #142620);
--neek-emerald-50: light-dark(#d0e4dc, #223a32);
--neek-emerald-200: light-dark(#aac7bb, #3a5a4e);
--neek-emerald-300: light-dark(#34735c, #8bcbb1);
--neek-emerald-400: light-dark(#34735c, #8bcbb1);
--neek-emerald-500: light-dark(#34735c, #8bcbb1);
--neek-emerald-600: light-dark(#34735c, #8bcbb1);
--neek-emerald-700: light-dark(#34735c, #8bcbb1);
--neek-emerald-800: light-dark(#34735c, #8bcbb1);
--neek-red-50: light-dark(#e0dfdb, #303530);
--neek-red-200: light-dark(#d1bcba, #594d48);
--neek-red-300: light-dark(#995459, #e79b9e);
--neek-red-400: light-dark(#995459, #e79b9e);
--neek-red-500: light-dark(#995459, #e79b9e);
--neek-red-600: light-dark(#995459, #e79b9e);
--neek-red-700: light-dark(#995459, #e79b9e);
--neek-red-800: light-dark(#995459, #e79b9e);
--neek-amber-50: light-dark(#d6e3d6, #2a3a2e);
--neek-amber-200: light-dark(#bac4ad, #4c5b45);
--neek-amber-300: light-dark(#676c34, #c5cc91);
--neek-amber-400: light-dark(#676c34, #c5cc91);
--neek-amber-500: light-dark(#676c34, #c5cc91);
--neek-amber-600: light-dark(#676c34, #c5cc91);
--neek-amber-700: light-dark(#676c34, #c5cc91);
--neek-amber-800: light-dark(#676c34, #c5cc91);
--neek-bg: light-dark(#eaf7f2, #142620);
--neek-bg-muted: light-dark(#deeee8, #0f1e19);
--neek-surface: light-dark(#f7fefc, #203b31);
--neek-surface-hover: light-dark(#eaf7f2, #0f1e19);
--neek-surface-input: light-dark(#f7fefc, #0f1e19);
--neek-border: light-dark(#c9dbd4, #2b5147);
--neek-border-strong: light-dark(#b2c4bd, #43655b);
--neek-text: light-dark(#192b25, #dfede5);
--neek-text-secondary: light-dark(#374a43, #bed6c9);
--neek-text-muted: light-dark(#546861, #9ab6a8);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 18%;
--neek-pattern-strength-dark: 23%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#34735c, #8bcbb1);
--neek-accent-hover: light-dark(#4d6c82, #96b7d0);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #142620);
--neek-button-secondary-bg: light-dark(#f7fefc, #203b31);
--neek-button-secondary-bg-hover: light-dark(#eaf7f2, #0f1e19);
--neek-button-danger-text: light-dark(#ffffff, #142620);
--neek-shadow-color: light-dark(rgb(25 43 37 / 0.08), rgb(15 30 25 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='kanagawa'] {
--neek-neutral-50: light-dark(#f2ecbc, #dcd7ba);
--neek-neutral-100: light-dark(#e7dba0, #dcd7ba);
--neek-neutral-200: light-dark(#dcd5ac, #c8c093);
--neek-neutral-300: light-dark(#c9c09a, #acaca3);
--neek-neutral-400: light-dark(#a09c84, #a4b2ce);
--neek-neutral-500: light-dark(#8a8980, #727169);
--neek-neutral-600: light-dark(#716e61, #54546d);
--neek-neutral-700: light-dark(#545464, #363646);
--neek-neutral-800: light-dark(#43436c, #2a2a37);
--neek-neutral-900: light-dark(#43436c, #2a2a37);
--neek-neutral-950: light-dark(#1f1f28, #1f1f28);
--neek-emerald-50: light-dark(color-mix(in oklab, #6f894e 14%, #f2ecbc), color-mix(in oklab, #98bb6c 14%, #1f1f28));
--neek-emerald-200: light-dark(color-mix(in oklab, #6f894e 35%, #f2ecbc), color-mix(in oklab, #98bb6c 35%, #1f1f28));
--neek-emerald-300: light-dark(#6f894e, #9fc077);
--neek-emerald-400: light-dark(#6f894e, #9fc077);
--neek-emerald-500: light-dark(#6f894e, #98bb6c);
--neek-emerald-600: light-dark(#6f894e, #98bb6c);
--neek-emerald-700: light-dark(#6f894e, #98bb6c);
--neek-emerald-800: light-dark(#6f894e, #98bb6c);
--neek-red-50: light-dark(color-mix(in oklab, #c84053 14%, #f2ecbc), color-mix(in oklab, #e46876 14%, #1f1f28));
--neek-red-200: light-dark(color-mix(in oklab, #c84053 35%, #f2ecbc), color-mix(in oklab, #e46876 35%, #1f1f28));
--neek-red-300: light-dark(#c84053, #e46876);
--neek-red-400: light-dark(#c84053, #e46876);
--neek-red-500: light-dark(#c84053, #e46876);
--neek-red-600: light-dark(#c84053, #e46876);
--neek-red-700: light-dark(#c84053, #e46876);
--neek-red-800: light-dark(#c84053, #e46876);
--neek-amber-50: light-dark(color-mix(in oklab, #77713f 14%, #f2ecbc), color-mix(in oklab, #e6c384 14%, #1f1f28));
--neek-amber-200: light-dark(color-mix(in oklab, #77713f 35%, #f2ecbc), color-mix(in oklab, #e6c384 35%, #1f1f28));
--neek-amber-300: light-dark(#77713f, #e6c384);
--neek-amber-400: light-dark(#77713f, #e6c384);
--neek-amber-500: light-dark(#77713f, #e6c384);
--neek-amber-600: light-dark(#77713f, #e6c384);
--neek-amber-700: light-dark(#77713f, #e6c384);
--neek-amber-800: light-dark(#77713f, #e6c384);
--neek-bg: light-dark(#f2ecbc, #1f1f28);
--neek-bg-muted: light-dark(#e7dba0, #16161d);
--neek-surface: light-dark(rgb(245 240 205 / 0.75), #2f2f3d);
--neek-surface-hover: light-dark(#f5f0cd, #16161d);
--neek-surface-input: light-dark(#f5f0cd, #16161d);
--neek-border: light-dark(#dcd5ac, #54546d);
--neek-border-strong: light-dark(#c9c09a, #727169);
--neek-text: light-dark(#545464, #dcd7ba);
--neek-text-secondary: light-dark(#43436c, #c8c093);
--neek-text-muted: light-dark(#716e61, #a8a799);
--neek-pattern-lift-light: 3%;
--neek-pattern-lift-dark: 10%;
--neek-pattern-strength-light: 30%;
--neek-pattern-strength-dark: 18%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#545464, #dcd7ba);
--neek-accent-hover: light-dark(#624c83, #c8c093);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: light-dark(#425d8f, #89a7e4);
--neek-link-color-hover: light-dark(#624c83, #b39cd7);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#f2ecbc, #1f1f28);
--neek-button-secondary-bg: light-dark(rgb(245 240 205 / 0.75), rgb(42 42 55 / 0.6));
--neek-button-danger-text: light-dark(#ffffff, #1f1f28);
--neek-button-secondary-bg-hover: light-dark(#f5f0cd, #16161d);
--neek-shadow-color: light-dark(rgb(84 84 100 / 0.08), rgb(22 22 29 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='last-horizon'] {
--neek-neutral-50: light-dark(#f4f3f4, #fbfdfc);
--neek-neutral-100: light-dark(#eae9ea, #fafcfb);
--neek-neutral-200: light-dark(#d6d5d6, #d1d2d2);
--neek-neutral-300: light-dark(#bfbebf, #a9aaaa);
--neek-neutral-400: light-dark(#8e8c8e, #838484);
--neek-neutral-500: light-dark(#6e6d6e, #5f5f60);
--neek-neutral-600: light-dark(#535253, #444444);
--neek-neutral-700: light-dark(#3c3b3c, #584e51);
--neek-neutral-800: light-dark(#272627, #191819);
--neek-neutral-900: light-dark(#272627, #090809);
--neek-neutral-950: light-dark(#171617, #0c0b0c);
--neek-emerald-50: light-dark(#dbdfe1, #1b1d1f);
--neek-emerald-200: light-dark(#b7c2c5, #333c3e);
--neek-emerald-300: light-dark(#4d6d73, #87a9b0);
--neek-emerald-400: light-dark(#4d6d73, #87a9b0);
--neek-emerald-500: light-dark(#4d6d73, #87a9b0);
--neek-emerald-600: light-dark(#4d6d73, #87a9b0);
--neek-emerald-700: light-dark(#4d6d73, #87a9b0);
--neek-emerald-800: light-dark(#4d6d73, #87a9b0);
--neek-red-50: light-dark(#e6dddb, #211a19);
--neek-red-200: light-dark(#d1bcb6, #44332f);
--neek-red-300: light-dark(#8f5b4c, #c38b7b);
--neek-red-400: light-dark(#8f5b4c, #c38b7b);
--neek-red-500: light-dark(#8f5b4c, #c38b7b);
--neek-red-600: light-dark(#8f5b4c, #c38b7b);
--neek-red-700: light-dark(#8f5b4c, #c38b7b);
--neek-red-800: light-dark(#8f5b4c, #c38b7b);
--neek-amber-50: light-dark(#e0dde1, #1c1a1d);
--neek-amber-200: light-dark(#c2bcc5, #37323a);
--neek-amber-300: light-dark(#6b5e73, #988aa1);
--neek-amber-400: light-dark(#6b5e73, #988aa1);
--neek-amber-500: light-dark(#6b5e73, #988aa1);
--neek-amber-600: light-dark(#6b5e73, #988aa1);
--neek-amber-700: light-dark(#6b5e73, #988aa1);
--neek-amber-800: light-dark(#6b5e73, #988aa1);
--neek-bg: light-dark(#f4f3f4, #0c0b0c);
--neek-bg-muted: light-dark(#eae9ea, #090809);
--neek-surface: light-dark(#fdfcfd, #191819);
--neek-surface-hover: light-dark(#f4f3f4, #090809);
--neek-surface-input: light-dark(#fdfcfd, #090809);
--neek-border: light-dark(#d6d5d6, #584e51);
--neek-border-strong: light-dark(#bfbebf, #6d6467);
--neek-text: light-dark(#272627, #fafcfb);
--neek-text-secondary: light-dark(#464446, #cfd3cd);
--neek-text-muted: light-dark(#646364, #928d90);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#7c615a, #b59790);
--neek-accent-hover: light-dark(#3a4b53, #c4d8e2);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #0c0b0c);
--neek-button-secondary-bg: light-dark(#fdfcfd, #191819);
--neek-button-secondary-bg-hover: light-dark(#f4f3f4, #090809);
--neek-button-danger-text: light-dark(#ffffff, #0c0b0c);
--neek-shadow-color: light-dark(rgb(39 38 39 / 0.08), rgb(9 8 9 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='lumon'] {
--neek-neutral-50: light-dark(#eaf5fd, #e2ebf3);
--neek-neutral-100: light-dark(#dfecf4, #d6e2ee);
--neek-neutral-200: light-dark(#cad8e2, #b6c2ce);
--neek-neutral-300: light-dark(#b2c1cb, #97a4af);
--neek-neutral-400: light-dark(#808f9a, #788691);
--neek-neutral-500: light-dark(#61707a, #5c6974);
--neek-neutral-600: light-dark(#46555f, #45535e);
--neek-neutral-700: light-dark(#2f3e48, #243d56);
--neek-neutral-800: light-dark(#1a2832, #1b2d40);
--neek-neutral-900: light-dark(#1a2832, #101b21);
--neek-neutral-950: light-dark(#0e181f, #16242d);
--neek-emerald-50: light-dark(#d0e1ee, #213441);
--neek-emerald-200: light-dark(#aac4d7, #334e61);
--neek-emerald-300: light-dark(#376d92, #70a8cf);
--neek-emerald-400: light-dark(#376d92, #70a8cf);
--neek-emerald-500: light-dark(#376d92, #70a8cf);
--neek-emerald-600: light-dark(#376d92, #70a8cf);
--neek-emerald-700: light-dark(#376d92, #70a8cf);
--neek-emerald-800: light-dark(#376d92, #70a8cf);
--neek-red-50: light-dark(#d0e1ee, #213442);
--neek-red-200: light-dark(#a9c4d9, #334f62);
--neek-red-300: light-dark(#346d96, #6fa9d4);
--neek-red-400: light-dark(#346d96, #6fa9d4);
--neek-red-500: light-dark(#346d96, #6fa9d4);
--neek-red-600: light-dark(#346d96, #6fa9d4);
--neek-red-700: light-dark(#346d96, #6fa9d4);
--neek-red-800: light-dark(#346d96, #6fa9d4);
--neek-amber-50: light-dark(#d0e1ed, #223441);
--neek-amber-200: light-dark(#aac3d6, #344e60);
--neek-amber-300: light-dark(#386c8f, #73a8cd);
--neek-amber-400: light-dark(#386c8f, #73a8cd);
--neek-amber-500: light-dark(#386c8f, #73a8cd);
--neek-amber-600: light-dark(#386c8f, #73a8cd);
--neek-amber-700: light-dark(#386c8f, #73a8cd);
--neek-amber-800: light-dark(#386c8f, #73a8cd);
--neek-bg: light-dark(#eaf5fd, #16242d);
--neek-bg-muted: light-dark(#dfecf4, #101b21);
--neek-surface: light-dark(#fafdff, #1b2d40);
--neek-surface-hover: light-dark(#eaf5fd, #101b21);
--neek-surface-input: light-dark(#fafdff, #101b21);
--neek-border: light-dark(#cad8e2, #243d56);
--neek-border-strong: light-dark(#b2c1cb, #3b526a);
--neek-text: light-dark(#1a2832, #d6e2ee);
--neek-text-secondary: light-dark(#384751, #b5c6d6);
--neek-text-muted: light-dark(#566670, #87a6bd);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 17%;
--neek-pattern-strength-dark: 35%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#306e8c, #8bc9eb);
--neek-accent-hover: light-dark(#416e7e, #b4e4f6);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #16242d);
--neek-button-secondary-bg: light-dark(#fafdff, #1b2d40);
--neek-button-secondary-bg-hover: light-dark(#eaf5fd, #101b21);
--neek-button-danger-text: light-dark(#ffffff, #16242d);
--neek-shadow-color: light-dark(rgb(26 40 50 / 0.08), rgb(16 27 33 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='lupine'] {
--neek-neutral-50: light-dark(#fafafa, #f3f3f3);
--neek-neutral-100: light-dark(#ececec, #eeeeee);
--neek-neutral-200: light-dark(#d0d0d0, #c8c8c8);
--neek-neutral-300: light-dark(#b9b9b9, #a3a3a3);
--neek-neutral-400: light-dark(#878787, #7f7f7f);
--neek-neutral-500: light-dark(#686868, #5e5e5e);
--neek-neutral-600: light-dark(#4d4d4d, #444444);
--neek-neutral-700: light-dark(#363636, #353535);
--neek-neutral-800: light-dark(#212121, #1b1b1b);
--neek-neutral-900: light-dark(#212121, #090909);
--neek-neutral-950: light-dark(#131313, #0f0f0f);
--neek-emerald-50: light-dark(#dde0f7, #1c1e2b);
--neek-emerald-200: light-dark(#b3b9f1, #333558);
--neek-emerald-300: light-dark(#4a2fd0, #8284fe);
--neek-emerald-400: light-dark(#4a2fd0, #8284fe);
--neek-emerald-500: light-dark(#4a2fd0, #8284fe);
--neek-emerald-600: light-dark(#4a2fd0, #8284fe);
--neek-emerald-700: light-dark(#4a2fd0, #8284fe);
--neek-emerald-800: light-dark(#4a2fd0, #8284fe);
--neek-red-50: light-dark(#f4def2, #2a1928);
--neek-red-200: light-dark(#eab4e5, #542651);
--neek-red-300: light-dark(#bc01b7, #ee42e7);
--neek-red-400: light-dark(#bc01b7, #ee42e7);
--neek-red-500: light-dark(#bc01b7, #ee42e7);
--neek-red-600: light-dark(#bc01b7, #ee42e7);
--neek-red-700: light-dark(#bc01b7, #ee42e7);
--neek-red-800: light-dark(#bc01b7, #ee42e7);
--neek-amber-50: light-dark(#dae6f6, #171f2a);
--neek-amber-200: light-dark(#abc8ef, #213858);
--neek-amber-300: light-dark(#0267cf, #3b90fb);
--neek-amber-400: light-dark(#0267cf, #3b90fb);
--neek-amber-500: light-dark(#0267cf, #3b90fb);
--neek-amber-600: light-dark(#0267cf, #3b90fb);
--neek-amber-700: light-dark(#0267cf, #3b90fb);
--neek-amber-800: light-dark(#0267cf, #3b90fb);
--neek-bg: light-dark(#fafafa, #0f0f0f);
--neek-bg-muted: light-dark(#ececec, #090909);
--neek-surface: light-dark(#ffffff, #1b1b1b);
--neek-surface-hover: light-dark(#fafafa, #090909);
--neek-surface-input: light-dark(#ffffff, #090909);
--neek-border: light-dark(#d0d0d0, #353535);
--neek-border-strong: light-dark(#b9b9b9, #4c4c4c);
--neek-text: light-dark(#212121, #eeeeee);
--neek-text-secondary: light-dark(#424242, #cecece);
--neek-text-muted: light-dark(#696969, #ababab);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 16%;
--neek-pattern-strength-dark: 26%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#2d5de4, #5d8cfa);
--neek-accent-hover: light-dark(#8646d3, #ac73fa);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #0f0f0f);
--neek-button-secondary-bg: light-dark(#ffffff, #1b1b1b);
--neek-button-secondary-bg-hover: light-dark(#fafafa, #090909);
--neek-button-danger-text: light-dark(#ffffff, #0f0f0f);
--neek-shadow-color: light-dark(rgb(33 33 33 / 0.08), rgb(9 9 9 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='matte-black'] {
--neek-neutral-50: light-dark(#f3f3f3, #d1d1d1);
--neek-neutral-100: light-dark(#e9e9e9, #bebebe);
--neek-neutral-200: light-dark(#d6d6d6, #a1a1a1);
--neek-neutral-300: light-dark(#bfbfbf, #858585);
--neek-neutral-400: light-dark(#8d8d8d, #6a6a6a);
--neek-neutral-500: light-dark(#6e6e6e, #505050);
--neek-neutral-600: light-dark(#525252, #3c3c3c);
--neek-neutral-700: light-dark(#3c3c3c, #333333);
--neek-neutral-800: light-dark(#262626, #1e1e1e);
--neek-neutral-900: light-dark(#262626, #0d0d0d);
--neek-neutral-950: light-dark(#161616, #121212);
--neek-emerald-50: light-dark(#e3ded4, #2d271a);
--neek-emerald-200: light-dark(#cbbfa6, #5a4922);
--neek-emerald-300: light-dark(#836208, #ffc107);
--neek-emerald-400: light-dark(#836208, #ffc107);
--neek-emerald-500: light-dark(#836208, #ffc107);
--neek-emerald-600: light-dark(#836208, #ffc107);
--neek-emerald-700: light-dark(#836208, #ffc107);
--neek-emerald-800: light-dark(#836208, #ffc107);
--neek-red-50: light-dark(#eddad9, #2b1e1d);
--neek-red-200: light-dark(#e2b5b3, #53302f);
--neek-red-300: light-dark(#b24144, #e26d6c);
--neek-red-400: light-dark(#b24144, #e26d6c);
--neek-red-500: light-dark(#b24144, #e26d6c);
--neek-red-600: light-dark(#b24144, #e26d6c);
--neek-red-700: light-dark(#b24144, #e26d6c);
--neek-red-800: light-dark(#b24144, #e26d6c);
--neek-amber-50: light-dark(#efd8d4, #2e1d1b);
--neek-amber-200: light-dark(#e7afa7, #5a2d28);
--neek-amber-300: light-dark(#b91c1c, #f75d52);
--neek-amber-400: light-dark(#b91c1c, #f75d52);
--neek-amber-500: light-dark(#b91c1c, #f75d52);
--neek-amber-600: light-dark(#b91c1c, #f75d52);
--neek-amber-700: light-dark(#b91c1c, #f75d52);
--neek-amber-800: light-dark(#b91c1c, #f75d52);
--neek-bg: light-dark(#f3f3f3, #121212);
--neek-bg-muted: light-dark(#e9e9e9, #0d0d0d);
--neek-surface: light-dark(#fcfcfc, #1e1e1e);
--neek-surface-hover: light-dark(#f3f3f3, #0d0d0d);
--neek-surface-input: light-dark(#fcfcfc, #0d0d0d);
--neek-border: light-dark(#d6d6d6, #333333);
--neek-border-strong: light-dark(#bfbfbf, #444444);
--neek-text: light-dark(#262626, #bebebe);
--neek-text-secondary: light-dark(#454545, #909093);
--neek-text-muted: light-dark(#636363, #909090);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 27%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#955a00, #e68e0d);
--neek-accent-hover: light-dark(#b24144, #e26d6c);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #121212);
--neek-button-secondary-bg: light-dark(#fcfcfc, #1e1e1e);
--neek-button-secondary-bg-hover: light-dark(#f3f3f3, #0d0d0d);
--neek-button-danger-text: light-dark(#ffffff, #121212);
--neek-shadow-color: light-dark(rgb(38 38 38 / 0.08), rgb(13 13 13 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='miasma'] {
--neek-neutral-50: light-dark(#f3f3f3, #d4d4c7);
--neek-neutral-100: light-dark(#e9e9e9, #c2c2b0);
--neek-neutral-200: light-dark(#d6d6d6, #a7a799);
--neek-neutral-300: light-dark(#bfbfbf, #8e8e82);
--neek-neutral-400: light-dark(#8d8d8d, #75756c);
--neek-neutral-500: light-dark(#6e6e6e, #5d5d56);
--neek-neutral-600: light-dark(#525252, #4a4a46);
--neek-neutral-700: light-dark(#3c3c3c, #444441);
--neek-neutral-800: light-dark(#262626, #2c2c2c);
--neek-neutral-900: light-dark(#262626, #191919);
--neek-neutral-950: light-dark(#161616, #222222);
--neek-emerald-50: light-dark(#dae0da, #2e332e);
--neek-emerald-200: light-dark(#b5c4b5, #414e41);
--neek-emerald-300: light-dark(#49704a, #81ab81);
--neek-emerald-400: light-dark(#49704a, #81ab81);
--neek-emerald-500: light-dark(#49704a, #81ab81);
--neek-emerald-600: light-dark(#49704a, #81ab81);
--neek-emerald-700: light-dark(#49704a, #81ab81);
--neek-emerald-800: light-dark(#49704a, #81ab81);
--neek-red-50: light-dark(#dedcd8, #33312f);
--neek-red-200: light-dark(#c0b9b1, #4f4a43);
--neek-red-300: light-dark(#685742, #b09d87);
--neek-red-400: light-dark(#685742, #b09d87);
--neek-red-500: light-dark(#685742, #b09d87);
--neek-red-600: light-dark(#685742, #b09d87);
--neek-red-700: light-dark(#685742, #b09d87);
--neek-red-800: light-dark(#685742, #b09d87);
--neek-amber-50: light-dark(#e7dcd6, #38302b);
--neek-amber-200: light-dark(#d5baac, #5c4639);
--neek-amber-300: light-dark(#99552b, #d88f64);
--neek-amber-400: light-dark(#99552b, #d88f64);
--neek-amber-500: light-dark(#99552b, #d88f64);
--neek-amber-600: light-dark(#99552b, #d88f64);
--neek-amber-700: light-dark(#99552b, #d88f64);
--neek-amber-800: light-dark(#99552b, #d88f64);
--neek-bg: light-dark(#f3f3f3, #222222);
--neek-bg-muted: light-dark(#e9e9e9, #191919);
--neek-surface: light-dark(#fcfcfc, #2c2c2c);
--neek-surface-hover: light-dark(#f3f3f3, #191919);
--neek-surface-input: light-dark(#fcfcfc, #191919);
--neek-border: light-dark(#d6d6d6, #444441);
--neek-border-strong: light-dark(#bfbfbf, #54544f);
--neek-text: light-dark(#262626, #c2c2b0);
--neek-text-secondary: light-dark(#454545, #a1a195);
--neek-text-muted: light-dark(#636363, #a0a0a0);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 22%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#626c35, #9ba56d);
--neek-accent-hover: light-dark(#836309, #c9a554);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #222222);
--neek-button-secondary-bg: light-dark(#fcfcfc, #2c2c2c);
--neek-button-secondary-bg-hover: light-dark(#f3f3f3, #191919);
--neek-button-danger-text: light-dark(#ffffff, #222222);
--neek-shadow-color: light-dark(rgb(38 38 38 / 0.08), rgb(25 25 25 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='nord'] {
--neek-neutral-50: light-dark(#eceff4, #eceff4);
--neek-neutral-100: light-dark(#e5e9f0, #e5e9f0);
--neek-neutral-200: light-dark(#d8dee9, #d8dee9);
--neek-neutral-300: light-dark(#c5cdd9, #c5cdd9);
--neek-neutral-400: light-dark(#a3adbf, #c9cfd9);
--neek-neutral-500: light-dark(#7b88a1, #7b88a1);
--neek-neutral-600: light-dark(#616e88, #616e88);
--neek-neutral-700: light-dark(#4c566a, #4c566a);
--neek-neutral-800: light-dark(#434c5e, #3b4252);
--neek-neutral-900: light-dark(#2e3440, #3b4252);
--neek-neutral-950: light-dark(#242933, #2e3440);
--neek-emerald-50: light-dark(color-mix(in oklab, #5f7f45 14%, #eceff4), color-mix(in oklab, #a3be8c 14%, #2e3440));
--neek-emerald-200: light-dark(color-mix(in oklab, #5f7f45 35%, #eceff4), color-mix(in oklab, #a3be8c 35%, #2e3440));
--neek-emerald-300: light-dark(#5f7f45, #a3be8c);
--neek-emerald-400: light-dark(#5f7f45, #a3be8c);
--neek-emerald-500: light-dark(#5f7f45, #a3be8c);
--neek-emerald-600: light-dark(#5f7f45, #a3be8c);
--neek-emerald-700: light-dark(#5f7f45, #a3be8c);
--neek-emerald-800: light-dark(#5f7f45, #a3be8c);
--neek-red-50: light-dark(color-mix(in oklab, #a5444e 14%, #eceff4), color-mix(in oklab, #bf616a 14%, #2e3440));
--neek-red-200: light-dark(color-mix(in oklab, #a5444e 35%, #eceff4), color-mix(in oklab, #bf616a 35%, #2e3440));
--neek-red-300: light-dark(#a5444e, #bf616a);
--neek-red-400: light-dark(#a5444e, #bf616a);
--neek-red-500: light-dark(#a5444e, #bf616a);
--neek-red-600: light-dark(#a5444e, #bf616a);
--neek-red-700: light-dark(#a5444e, #bf616a);
--neek-red-800: light-dark(#a5444e, #bf616a);
--neek-amber-50: light-dark(color-mix(in oklab, #9a7330 14%, #eceff4), color-mix(in oklab, #ebcb8b 14%, #2e3440));
--neek-amber-200: light-dark(color-mix(in oklab, #9a7330 35%, #eceff4), color-mix(in oklab, #ebcb8b 35%, #2e3440));
--neek-amber-300: light-dark(#9a7330, #ebcb8b);
--neek-amber-400: light-dark(#9a7330, #ebcb8b);
--neek-amber-500: light-dark(#9a7330, #ebcb8b);
--neek-amber-600: light-dark(#9a7330, #ebcb8b);
--neek-amber-700: light-dark(#9a7330, #ebcb8b);
--neek-amber-800: light-dark(#9a7330, #ebcb8b);
--neek-bg: light-dark(#eceff4, #2e3440);
--neek-bg-muted: light-dark(#e5e9f0, #272c36);
--neek-surface: light-dark(rgb(255 255 255 / 0.65), #3b4252);
--neek-surface-hover: light-dark(#f5f7fa, #272c36);
--neek-surface-input: light-dark(#f5f7fa, #272c36);
--neek-border: light-dark(#d8dee9, #566075);
--neek-border-strong: light-dark(#c5cdd9, #6d7a94);
--neek-text: light-dark(#2e3440, #eceff4);
--neek-text-secondary: light-dark(#4c566a, #d8dee9);
--neek-text-muted: light-dark(#616e88, #c9cfd9);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 6%;
--neek-pattern-strength-light: 32%;
--neek-pattern-strength-dark: 23%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#4c6a88, #a3c4e6);
--neek-accent-hover: light-dark(#386f7e, #92cada);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #2e3440);
--neek-button-secondary-bg: light-dark(rgb(255 255 255 / 0.65), rgb(59 66 82 / 0.6));
--neek-button-danger-text: light-dark(#ffffff, #2e3440);
--neek-button-secondary-bg-hover: light-dark(#f5f7fa, #272c36);
--neek-shadow-color: light-dark(rgb(46 52 64 / 0.08), rgb(26 30 37 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='retro-82'] {
--neek-neutral-50: light-dark(#ecf4ff, #f9e7c5);
--neek-neutral-100: light-dark(#e0ebf8, #f6dcac);
--neek-neutral-200: light-dark(#cbd7e6, #cdbc99);
--neek-neutral-300: light-dark(#b2c0d0, #a69c86);
--neek-neutral-400: light-dark(#7e8fa2, #807e73);
--neek-neutral-500: light-dark(#5d6f84, #5c6060);
--neek-neutral-600: light-dark(#41546b, #404a51);
--neek-neutral-700: light-dark(#2a3d54, #134e5a);
--neek-neutral-800: light-dark(#13273f, #0a2540);
--neek-neutral-900: light-dark(#13273f, #031222);
--neek-neutral-950: light-dark(#091728, #05182e);
--neek-emerald-50: light-dark(#cfe1ec, #0b2a3f);
--neek-emerald-200: light-dark(#a5c6d1, #16465a);
--neek-emerald-300: light-dark(#077380, #3fa7b5);
--neek-emerald-400: light-dark(#077380, #3fa7b5);
--neek-emerald-500: light-dark(#077380, #3fa7b5);
--neek-emerald-600: light-dark(#077380, #3fa7b5);
--neek-emerald-700: light-dark(#077380, #3fa7b5);
--neek-emerald-800: light-dark(#077380, #3fa7b5);
--neek-red-50: light-dark(#eadbde, #272635);
--neek-red-200: light-dark(#e3b6ae, #57393d);
--neek-red-300: light-dark(#bd3709, #fd6b43);
--neek-red-400: light-dark(#bd3709, #fd6b43);
--neek-red-500: light-dark(#bd3709, #fd6b43);
--neek-red-600: light-dark(#bd3709, #fd6b43);
--neek-red-700: light-dark(#bd3709, #fd6b43);
--neek-red-800: light-dark(#bd3709, #fd6b43);
--neek-amber-50: light-dark(#e5ddde, #242735);
--neek-amber-200: light-dark(#d9baaf, #503c3c);
--neek-amber-300: light-dark(#aa4c09, #e97b3c);
--neek-amber-400: light-dark(#aa4c09, #e97b3c);
--neek-amber-500: light-dark(#aa4c09, #e97b3c);
--neek-amber-600: light-dark(#aa4c09, #e97b3c);
--neek-amber-700: light-dark(#aa4c09, #e97b3c);
--neek-amber-800: light-dark(#aa4c09, #e97b3c);
--neek-bg: light-dark(#ecf4ff, #05182e);
--neek-bg-muted: light-dark(#e0ebf8, #031222);
--neek-surface: light-dark(#fbfdff, #0a2540);
--neek-surface-hover: light-dark(#ecf4ff, #031222);
--neek-surface-input: light-dark(#fbfdff, #031222);
--neek-border: light-dark(#cbd7e6, #134e5a);
--neek-border-strong: light-dark(#b2c0d0, #386166);
--neek-text: light-dark(#13273f, #f6dcac);
--neek-text-secondary: light-dark(#32475f, #a7c9c6);
--neek-text-muted: light-dark(#53657a, #58a6a1);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 17%;
--neek-pattern-strength-dark: 16%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#9e5400, #faa968);
--neek-accent-hover: light-dark(#3e706a, #8cbfb8);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #05182e);
--neek-button-secondary-bg: light-dark(#fbfdff, #0a2540);
--neek-button-secondary-bg-hover: light-dark(#ecf4ff, #031222);
--neek-button-danger-text: light-dark(#ffffff, #05182e);
--neek-shadow-color: light-dark(rgb(19 39 63 / 0.08), rgb(3 18 34 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='ristretto'] {
--neek-neutral-50: light-dark(#f8f2f2, #eee4e6);
--neek-neutral-100: light-dark(#eee8e8, #e6d9db);
--neek-neutral-200: light-dark(#dbd4d4, #c7bbbd);
--neek-neutral-300: light-dark(#c4bdbc, #a99e9f);
--neek-neutral-400: light-dark(#928b8a, #8c8283);
--neek-neutral-500: light-dark(#736b6b, #706767);
--neek-neutral-600: light-dark(#585050, #5b5252);
--neek-neutral-700: light-dark(#413939, #594a46);
--neek-neutral-800: light-dark(#2b2424, #3d2f2a);
--neek-neutral-900: light-dark(#2b2424, #211b1b);
--neek-neutral-950: light-dark(#1a1515, #2c2525);
--neek-emerald-50: light-dark(#dee0d3, #3d3b31);
--neek-emerald-200: light-dark(#b9c4a6, #575f42);
--neek-emerald-300: light-dark(#4d720e, #adda78);
--neek-emerald-400: light-dark(#4d720e, #adda78);
--neek-emerald-500: light-dark(#4d720e, #adda78);
--neek-emerald-600: light-dark(#4d720e, #adda78);
--neek-emerald-700: light-dark(#4d720e, #adda78);
--neek-emerald-800: light-dark(#4d720e, #adda78);
--neek-red-50: light-dark(#f4d8da, #463233);
--neek-red-200: light-dark(#ebb1b7, #6f454a);
--neek-red-300: light-dark(#c02d51, #fe8496);
--neek-red-400: light-dark(#c02d51, #fe8496);
--neek-red-500: light-dark(#c02d51, #fe8496);
--neek-red-600: light-dark(#c02d51, #fe8496);
--neek-red-700: light-dark(#c02d51, #fe8496);
--neek-red-800: light-dark(#c02d51, #fe8496);
--neek-amber-50: light-dark(#e7ddd3, #453a30);
--neek-amber-200: light-dark(#cebea6, #6d5a3f);
--neek-amber-300: light-dark(#83620d, #f9cc6c);
--neek-amber-400: light-dark(#83620d, #f9cc6c);
--neek-amber-500: light-dark(#83620d, #f9cc6c);
--neek-amber-600: light-dark(#83620d, #f9cc6c);
--neek-amber-700: light-dark(#83620d, #f9cc6c);
--neek-amber-800: light-dark(#83620d, #f9cc6c);
--neek-bg: light-dark(#f8f2f2, #2c2525);
--neek-bg-muted: light-dark(#eee8e8, #211b1b);
--neek-surface: light-dark(#fffcfc, #3d2f2a);
--neek-surface-hover: light-dark(#f8f2f2, #211b1b);
--neek-surface-input: light-dark(#fffcfc, #211b1b);
--neek-border: light-dark(#dbd4d4, #594a46);
--neek-border-strong: light-dark(#c4bdbc, #6b5c59);
--neek-text: light-dark(#2b2424, #e6d9db);
--neek-text-secondary: light-dark(#4b4343, #c3b7b8);
--neek-text-muted: light-dark(#696161, #b1a7a8);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 17%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#a94b30, #f48e71);
--neek-accent-hover: light-dark(#62629e, #a8a9eb);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #2c2525);
--neek-button-secondary-bg: light-dark(#fffcfc, #3d2f2a);
--neek-button-secondary-bg-hover: light-dark(#f8f2f2, #211b1b);
--neek-button-danger-text: light-dark(#ffffff, #2c2525);
--neek-shadow-color: light-dark(rgb(43 36 36 / 0.08), rgb(33 27 27 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='rose-pine'] {
--neek-neutral-50: light-dark(#faf4ed, #e0def4);
--neek-neutral-100: light-dark(#f2e9e1, #e0def4);
--neek-neutral-200: light-dark(#dfdad9, #c5c1e0);
--neek-neutral-300: light-dark(#cecacd, #aeaac6);
--neek-neutral-400: light-dark(#9893a5, #a8a5c0);
--neek-neutral-500: light-dark(#9893a5, #6e6a86);
--neek-neutral-600: light-dark(#797593, #6e6a86);
--neek-neutral-700: light-dark(#575279, #524f67);
--neek-neutral-800: light-dark(#575279, #26233a);
--neek-neutral-900: light-dark(#575279, #1f1d2e);
--neek-neutral-950: light-dark(#26233a, #191724);
--neek-emerald-50: light-dark(color-mix(in oklab, #286983 14%, #faf4ed), color-mix(in oklab, #9ccfd8 14%, #191724));
--neek-emerald-200: light-dark(color-mix(in oklab, #286983 35%, #faf4ed), color-mix(in oklab, #9ccfd8 35%, #191724));
--neek-emerald-300: light-dark(#286983, #9ccfd8);
--neek-emerald-400: light-dark(#286983, #9ccfd8);
--neek-emerald-500: light-dark(#286983, #9ccfd8);
--neek-emerald-600: light-dark(#286983, #9ccfd8);
--neek-emerald-700: light-dark(#286983, #9ccfd8);
--neek-emerald-800: light-dark(#286983, #9ccfd8);
--neek-red-50: light-dark(color-mix(in oklab, #b4637a 14%, #faf4ed), color-mix(in oklab, #eb6f92 14%, #191724));
--neek-red-200: light-dark(color-mix(in oklab, #b4637a 35%, #faf4ed), color-mix(in oklab, #eb6f92 35%, #191724));
--neek-red-300: light-dark(#b4637a, #f186a2);
--neek-red-400: light-dark(#b4637a, #f186a2);
--neek-red-500: light-dark(#b4637a, #eb6f92);
--neek-red-600: light-dark(#b4637a, #eb6f92);
--neek-red-700: light-dark(#b4637a, #eb6f92);
--neek-red-800: light-dark(#b4637a, #eb6f92);
--neek-amber-50: light-dark(color-mix(in oklab, #ea9d34 14%, #faf4ed), color-mix(in oklab, #f6c177 14%, #191724));
--neek-amber-200: light-dark(color-mix(in oklab, #ea9d34 35%, #faf4ed), color-mix(in oklab, #f6c177 35%, #191724));
--neek-amber-300: light-dark(#ea9d34, #f6c177);
--neek-amber-400: light-dark(#ea9d34, #f6c177);
--neek-amber-500: light-dark(#ea9d34, #f6c177);
--neek-amber-600: light-dark(#ea9d34, #f6c177);
--neek-amber-700: light-dark(#ea9d34, #f6c177);
--neek-amber-800: light-dark(#ea9d34, #f6c177);
--neek-bg: light-dark(#faf4ed, #191724);
--neek-bg-muted: light-dark(#f2e9e1, #33304a);
--neek-surface: light-dark(rgb(255 250 243 / 0.8), #26233a);
--neek-surface-hover: light-dark(#fffaf3, #33304a);
--neek-surface-input: light-dark(#fffaf3, #1f1d2e);
--neek-border: light-dark(#dfdad9, #403d52);
--neek-border-strong: light-dark(#cecacd, #524f67);
--neek-text: light-dark(#575279, #e0def4);
--neek-text-secondary: light-dark(#797593, #aeaac6);
--neek-text-muted: light-dark(#9893a5, #a8a5c0);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 26%;
--neek-pattern-strength-dark: 39%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#32717c, #9ccfd8);
--neek-accent-hover: light-dark(#755f8c, #c4a7e7);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #191724);
--neek-button-secondary-bg: light-dark(rgb(255 250 243 / 0.8), rgb(31 29 46 / 0.7));
--neek-button-danger-text: light-dark(#ffffff, #191724);
--neek-button-secondary-bg-hover: light-dark(#fffaf3, #1f1d2e);
--neek-shadow-color: light-dark(rgb(87 82 121 / 0.08), rgb(14 13 22 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='solitude'] {
--neek-neutral-50: light-dark(#f1f4f6, #dadbdb);
--neek-neutral-100: light-dark(#e7eaec, #cacccc);
--neek-neutral-200: light-dark(#d3d6d9, #aaadad);
--neek-neutral-300: light-dark(#bcbfc2, #8c8e8f);
--neek-neutral-400: light-dark(#8a8e90, #6e7172);
--neek-neutral-500: light-dark(#6b6e71, #525557);
--neek-neutral-600: light-dark(#505356, #3d4042);
--neek-neutral-700: light-dark(#393c3f, #343d41);
--neek-neutral-800: light-dark(#242729, #1a1d1f);
--neek-neutral-900: light-dark(#242729, #0c0e10);
--neek-neutral-950: light-dark(#151718, #101315);
--neek-emerald-50: light-dark(#d9dcdf, #212427);
--neek-emerald-200: light-dark(#b6b9bc, #3d4143);
--neek-emerald-300: light-dark(#51565a, #9fa5a9);
--neek-emerald-400: light-dark(#51565a, #9fa5a9);
--neek-emerald-500: light-dark(#51565a, #9fa5a9);
--neek-emerald-600: light-dark(#51565a, #9fa5a9);
--neek-emerald-700: light-dark(#51565a, #9fa5a9);
--neek-emerald-800: light-dark(#51565a, #9fa5a9);
--neek-red-50: light-dark(#ecdbd8, #2a1f1e);
--neek-red-200: light-dark(#e3b6ac, #54312a);
--neek-red-300: light-dark(#b83e23, #e86a4e);
--neek-red-400: light-dark(#b83e23, #e86a4e);
--neek-red-500: light-dark(#b83e23, #e86a4e);
--neek-red-600: light-dark(#b83e23, #e86a4e);
--neek-red-700: light-dark(#b83e23, #e86a4e);
--neek-red-800: light-dark(#b83e23, #e86a4e);
--neek-amber-50: light-dark(#d8dad9, #252728);
--neek-amber-200: light-dark(#b4b3b0, #494947);
--neek-amber-300: light-dark(#4d473b, #c9c2b4);
--neek-amber-400: light-dark(#4d473b, #c9c2b4);
--neek-amber-500: light-dark(#4d473b, #c9c2b4);
--neek-amber-600: light-dark(#4d473b, #c9c2b4);
--neek-amber-700: light-dark(#4d473b, #c9c2b4);
--neek-amber-800: light-dark(#4d473b, #c9c2b4);
--neek-bg: light-dark(#f1f4f6, #101315);
--neek-bg-muted: light-dark(#e7eaec, #0c0e10);
--neek-surface: light-dark(#fbfdfd, #1a1d1f);
--neek-surface-hover: light-dark(#f1f4f6, #0c0e10);
--neek-surface-input: light-dark(#fbfdfd, #0c0e10);
--neek-border: light-dark(#d3d6d9, #343d41);
--neek-border-strong: light-dark(#bcbfc2, #474f53);
--neek-text: light-dark(#242729, #cacccc);
--neek-text-secondary: light-dark(#424648, #cbc2be);
--neek-text-muted: light-dark(#606466, #8c9097);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 21%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#61696e, #889196);
--neek-accent-hover: light-dark(#4d4d4d, #aeaeae);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #101315);
--neek-button-secondary-bg: light-dark(#fbfdfd, #1a1d1f);
--neek-button-secondary-bg-hover: light-dark(#f1f4f6, #0c0e10);
--neek-button-danger-text: light-dark(#ffffff, #101315);
--neek-shadow-color: light-dark(rgb(36 39 41 / 0.08), rgb(12 14 16 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-sm);
--neek-radius-lg: var(--neek-radius-step-sm);
}
}
@layer neek.theme {
[data-theme='starship'] {
--neek-neutral-50: light-dark(#f3f3f5, #f8f8f9);
--neek-neutral-100: light-dark(#e9e9eb, #f5f5f7);
--neek-neutral-200: light-dark(#d5d5d8, #d0d0d2);
--neek-neutral-300: light-dark(#bebec1, #adadaf);
--neek-neutral-400: light-dark(#8c8c8f, #8b8b8d);
--neek-neutral-500: light-dark(#6d6d70, #6a6a6c);
--neek-neutral-600: light-dark(#525255, #515153);
--neek-neutral-700: light-dark(#3b3b3e, #4c4c4e);
--neek-neutral-800: light-dark(#262628, #2c2c2e);
--neek-neutral-900: light-dark(#262628, #161618);
--neek-neutral-950: light-dark(#161618, #1c1c1e);
--neek-emerald-50: light-dark(#e5ddd6, #372f26);
--neek-emerald-200: light-dark(#cfbda8, #634d31);
--neek-emerald-300: light-dark(#8d5e0d, #ffb340);
--neek-emerald-400: light-dark(#8d5e0d, #ffb340);
--neek-emerald-500: light-dark(#8d5e0d, #ffb340);
--neek-emerald-600: light-dark(#8d5e0d, #ffb340);
--neek-emerald-700: light-dark(#8d5e0d, #ffb340);
--neek-emerald-800: light-dark(#8d5e0d, #ffb340);
--neek-red-50: light-dark(#f2d9d6, #382928);
--neek-red-200: light-dark(#ecb3a9, #643d38);
--neek-red-300: light-dark(#c82616, #ff7d69);
--neek-red-400: light-dark(#c82616, #ff7d69);
--neek-red-500: light-dark(#c82616, #ff7d69);
--neek-red-600: light-dark(#c82616, #ff7d69);
--neek-red-700: light-dark(#c82616, #ff7d69);
--neek-red-800: light-dark(#c82616, #ff7d69);
--neek-amber-50: light-dark(#e6ddd5, #37302b);
--neek-amber-200: light-dark(#d2bda7, #63513e);
--neek-amber-300: light-dark(#925c00, #ffc27a);
--neek-amber-400: light-dark(#925c00, #ffc27a);
--neek-amber-500: light-dark(#925c00, #ffc27a);
--neek-amber-600: light-dark(#925c00, #ffc27a);
--neek-amber-700: light-dark(#925c00, #ffc27a);
--neek-amber-800: light-dark(#925c00, #ffc27a);
--neek-bg: light-dark(#f3f3f5, #1c1c1e);
--neek-bg-muted: light-dark(#e9e9eb, #161618);
--neek-surface: light-dark(#fcfcfd, #2c2c2e);
--neek-surface-hover: light-dark(#f3f3f5, #161618);
--neek-surface-input: light-dark(#fcfcfd, #161618);
--neek-border: light-dark(#d5d5d8, #4c4c4e);
--neek-border-strong: light-dark(#bebec1, #616163);
--neek-text: light-dark(#262628, #f5f5f7);
--neek-text-secondary: light-dark(#454547, #fbfbfd);
--neek-text-muted: light-dark(#636365, #a4a4a9);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 15%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#945b05, #ff9f0a);
--neek-accent-hover: light-dark(#456b8e, #8fb8de);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #1c1c1e);
--neek-button-secondary-bg: light-dark(#fcfcfd, #2c2c2e);
--neek-button-secondary-bg-hover: light-dark(#f3f3f5, #161618);
--neek-button-danger-text: light-dark(#ffffff, #1c1c1e);
--neek-shadow-color: light-dark(rgb(38 38 40 / 0.08), rgb(22 22 24 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='vantablack'] {
--neek-neutral-50: light-dark(#f3f3f3, #ffffff);
--neek-neutral-100: light-dark(#e9e9e9, #ffffff);
--neek-neutral-200: light-dark(#d6d6d6, #cecece);
--neek-neutral-300: light-dark(#bfbfbf, #9e9e9e);
--neek-neutral-400: light-dark(#8d8d8d, #717171);
--neek-neutral-500: light-dark(#6e6e6e, #484848);
--neek-neutral-600: light-dark(#525252, #292929);
--neek-neutral-700: light-dark(#3c3c3c, #2e2e2e);
--neek-neutral-800: light-dark(#262626, #1a1a1a);
--neek-neutral-900: light-dark(#262626, #090909);
--neek-neutral-950: light-dark(#161616, #000000);
--neek-emerald-50: light-dark(#d9d9d9, #040404);
--neek-emerald-200: light-dark(#b3b3b3, #272727);
--neek-emerald-300: light-dark(#484848, #b6b6b6);
--neek-emerald-400: light-dark(#484848, #b6b6b6);
--neek-emerald-500: light-dark(#484848, #b6b6b6);
--neek-emerald-600: light-dark(#484848, #b6b6b6);
--neek-emerald-700: light-dark(#484848, #b6b6b6);
--neek-emerald-800: light-dark(#484848, #b6b6b6);
--neek-red-50: light-dark(#dbdbdb, #030303);
--neek-red-200: light-dark(#b8b8b8, #222222);
--neek-red-300: light-dark(#555555, #a4a4a4);
--neek-red-400: light-dark(#555555, #a4a4a4);
--neek-red-500: light-dark(#555555, #a4a4a4);
--neek-red-600: light-dark(#555555, #a4a4a4);
--neek-red-700: light-dark(#555555, #a4a4a4);
--neek-red-800: light-dark(#555555, #a4a4a4);
--neek-amber-50: light-dark(#d9d9d9, #060606);
--neek-amber-200: light-dark(#b3b3b3, #2d2d2d);
--neek-amber-300: light-dark(#484848, #cecece);
--neek-amber-400: light-dark(#484848, #cecece);
--neek-amber-500: light-dark(#484848, #cecece);
--neek-amber-600: light-dark(#484848, #cecece);
--neek-amber-700: light-dark(#484848, #cecece);
--neek-amber-800: light-dark(#484848, #cecece);
--neek-bg: light-dark(#f3f3f3, #000000);
--neek-bg-muted: light-dark(#e9e9e9, #090909);
--neek-surface: light-dark(#fcfcfc, #1a1a1a);
--neek-surface-hover: light-dark(#f3f3f3, #090909);
--neek-surface-input: light-dark(#fcfcfc, #090909);
--neek-border: light-dark(#d6d6d6, #2e2e2e);
--neek-border-strong: light-dark(#bfbfbf, #474747);
--neek-text: light-dark(#262626, #ffffff);
--neek-text-secondary: light-dark(#454545, #ececec);
--neek-text-muted: light-dark(#636363, #919191);
--neek-pattern-lift-light: 0%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 19%;
--neek-pattern-strength-dark: 33%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#676767, #919191);
--neek-accent-hover: light-dark(#484848, #cecece);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #000000);
--neek-button-secondary-bg: light-dark(#fcfcfc, #1a1a1a);
--neek-button-secondary-bg-hover: light-dark(#f3f3f3, #090909);
--neek-button-danger-text: light-dark(#ffffff, #000000);
--neek-shadow-color: light-dark(rgb(38 38 38 / 0.08), rgb(9 9 9 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='white'] {
--neek-neutral-50: light-dark(#ffffff, #f3f3f3);
--neek-neutral-100: light-dark(#f5f5f5, #eeeeee);
--neek-neutral-200: light-dark(#c0c0c0, #c8c8c8);
--neek-neutral-300: light-dark(#a2a2a2, #a3a3a3);
--neek-neutral-400: light-dark(#636363, #7f7f7f);
--neek-neutral-500: light-dark(#3c3c3c, #5e5e5e);
--neek-neutral-600: light-dark(#1c1c1c, #444444);
--neek-neutral-700: light-dark(#050505, #353535);
--neek-neutral-800: light-dark(#000000, #1b1b1b);
--neek-neutral-900: light-dark(#000000, #090909);
--neek-neutral-950: light-dark(#000000, #0f0f0f);
--neek-emerald-50: light-dark(#e1e1e1, #242424);
--neek-emerald-200: light-dark(#b5b5b5, #484848);
--neek-emerald-300: light-dark(#3a3a3a, #c7c7c7);
--neek-emerald-400: light-dark(#3a3a3a, #c7c7c7);
--neek-emerald-500: light-dark(#3a3a3a, #c7c7c7);
--neek-emerald-600: light-dark(#3a3a3a, #c7c7c7);
--neek-emerald-700: light-dark(#3a3a3a, #c7c7c7);
--neek-emerald-800: light-dark(#3a3a3a, #c7c7c7);
--neek-red-50: light-dark(#dedede, #262626);
--neek-red-200: light-dark(#aeaeae, #4c4c4c);
--neek-red-300: light-dark(#2a2a2a, #d7d7d7);
--neek-red-400: light-dark(#2a2a2a, #d7d7d7);
--neek-red-500: light-dark(#2a2a2a, #d7d7d7);
--neek-red-600: light-dark(#2a2a2a, #d7d7d7);
--neek-red-700: light-dark(#2a2a2a, #d7d7d7);
--neek-red-800: light-dark(#2a2a2a, #d7d7d7);
--neek-amber-50: light-dark(#e3e3e3, #232323);
--neek-amber-200: light-dark(#bbbbbb, #434343);
--neek-amber-300: light-dark(#4a4a4a, #b9b9b9);
--neek-amber-400: light-dark(#4a4a4a, #b9b9b9);
--neek-amber-500: light-dark(#4a4a4a, #b9b9b9);
--neek-amber-600: light-dark(#4a4a4a, #b9b9b9);
--neek-amber-700: light-dark(#4a4a4a, #b9b9b9);
--neek-amber-800: light-dark(#4a4a4a, #b9b9b9);
--neek-bg: light-dark(#ffffff, #0f0f0f);
--neek-bg-muted: light-dark(#f5f5f5, #090909);
--neek-surface: light-dark(#ffffff, #1b1b1b);
--neek-surface-hover: light-dark(#ffffff, #090909);
--neek-surface-input: light-dark(#ffffff, #090909);
--neek-border: light-dark(#c0c0c0, #353535);
--neek-border-strong: light-dark(#a2a2a2, #4c4c4c);
--neek-text: light-dark(#000000, #eeeeee);
--neek-text-secondary: light-dark(#3a3a3a, #cecece);
--neek-text-muted: light-dark(#6e6e6e, #ababab);
--neek-pattern-lift-light: 1%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 12%;
--neek-pattern-strength-dark: 26%;
--neek-pattern-ink-dark: 0%;
--neek-accent: light-dark(#6e6e6e, #9b9b9b);
--neek-accent-hover: light-dark(#1a1a1a, #dedede);
--neek-accent-text: var(--neek-accent);
--neek-highlight: var(--neek-accent);
--neek-highlight-2: var(--neek-accent-hover);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: var(--neek-amber-500);
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-logo-bg: linear-gradient(var(--neek-text), var(--neek-text));
--neek-logo-text: var(--neek-bg);
--neek-accent-contrast: light-dark(#ffffff, #0f0f0f);
--neek-button-secondary-bg: light-dark(#ffffff, #1b1b1b);
--neek-button-secondary-bg-hover: light-dark(#ffffff, #090909);
--neek-button-danger-text: light-dark(#ffffff, #0f0f0f);
--neek-shadow-color: light-dark(rgb(0 0 0 / 0.08), rgb(9 9 9 / 0.5));
--neek-font-sans: var(--neek-font-jetbrains);
--neek-font-mono: var(--neek-font-jetbrains);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
}
@layer neek.theme {
[data-theme='xbox'] {
--neek-neutral-50: #f6f7f8;
--neek-neutral-100: #eceef0;
--neek-neutral-200: #dcdfe2;
--neek-neutral-300: #cbccd0;
--neek-neutral-400: #9a9ea6;
--neek-neutral-500: #62676f;
--neek-neutral-600: #4f545c;
--neek-neutral-700: #3e424b;
--neek-neutral-800: #25282d;
--neek-neutral-900: #1a1b1f;
--neek-neutral-950: #0e0f11;
--neek-bg: light-dark(#f7f8f8, #070809);
--neek-bg-image:
radial-gradient(38% 30% at 100% 0%, light-dark(rgb(180 190 196 / 0.55), rgb(66 77 86 / 0.75)), transparent 75%),
linear-gradient(
light-dark(#dde2e4, #15261b) 0%,
light-dark(#dcebe1, #0f1c14) 14%,
light-dark(#e9f1ec, #0a110d) 32%,
light-dark(#f3f6f4, #08090a) 55%,
light-dark(#f7f8f8, #070809) 75%
);
--neek-bg-attachment: fixed;
--neek-font-sans: var(--neek-font-windows);
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
--neek-bg-muted: light-dark(var(--neek-neutral-100), var(--neek-neutral-800));
--neek-surface: light-dark(#ffffff, var(--neek-neutral-900));
--neek-surface-hover: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
--neek-surface-input: light-dark(#ffffff, var(--neek-neutral-950));
--neek-border: light-dark(#d3d7da, #4c5352);
--neek-border-strong: light-dark(#b4b9be, #5f6766);
--neek-text: light-dark(var(--neek-neutral-900), #ffffff);
--neek-text-secondary: light-dark(var(--neek-neutral-600), var(--neek-neutral-300));
--neek-text-muted: light-dark(var(--neek-neutral-500), var(--neek-neutral-400));
--neek-shadow-color: light-dark(rgb(26 27 31 / 0.08), rgb(0 0 0 / 0.35));
--neek-pattern-lift-light: 4%;
--neek-pattern-lift-dark: 2%;
--neek-pattern-strength-light: 21%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-dark: 0%;
--neek-type-body-color: light-dark(var(--neek-neutral-900), #e2e3e6);
--neek-stream-text: light-dark(var(--neek-neutral-800), #e2e3e6);
--neek-type-title-color: var(--neek-text);
--neek-type-site-title-color: var(--neek-text);
--neek-nav-link-color: var(--neek-text);
--neek-accent: light-dark(#007d40, #3cb268);
--neek-accent-hover: light-dark(#006133, #2fc277);
--neek-accent-text: light-dark(#006d37, var(--neek-accent));
--neek-accent-contrast: light-dark(#ffffff, #0a0a0a);
--neek-nav-current-bg: #008745;
--neek-nav-current-text: #ffffff;
--neek-menu-current-bg: #008745;
--neek-menu-current-text: #ffffff;
--neek-rail-badge-bg: #008745;
--neek-rail-badge-text: #ffffff;
--neek-button-radius: 0;
--neek-button-weight: var(--neek-weight-bold);
--neek-timeline-new-brighten: 0%;
--neek-button-color: #008745;
--neek-button-brighten: 0%;
--neek-button-brighten-hover: 12%;
--neek-button-shadow: none;
--neek-button-bg: #008745;
--neek-button-bg-hover: #0a9a52;
--neek-button-text: #ffffff;
--neek-button-ring: var(--neek-focus-ring);
--neek-button-ring-offset: var(--neek-surface);
--neek-button-secondary-bg: light-dark(#e3e5e8, var(--neek-neutral-700));
--neek-button-secondary-bg-hover: light-dark(#d6d9dd, #4a4f59);
--neek-button-secondary-text: light-dark(var(--neek-neutral-900), #ffffff);
--neek-button-secondary-text-hover: light-dark(var(--neek-neutral-900), #ffffff);
--neek-button-secondary-border: light-dark(#cdd1d5, #50555e);
--neek-button-secondary-ring-offset: var(--neek-surface);
--neek-button-secondary-brighten: 0%;
--neek-button-secondary-brighten-hover: 8%;
--neek-highlight: var(--neek-accent);
--neek-highlight-2: light-dark(#006a36, #9bf00b);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: light-dark(var(--neek-amber-700), var(--neek-amber-500));
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-accent);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-focus-ring: var(--neek-accent);
--neek-status-online: light-dark(#008745, #35a954);
--neek-logo-bg: linear-gradient(#008745, #008745);
--neek-logo-text: #ffffff;
--neek-link-preview-domain: var(--neek-text-muted);
--neek-audio-list-number: var(--neek-text-muted);
--neek-playlist-number: var(--neek-text-secondary);
--neek-success: var(--neek-accent);
--neek-danger: light-dark(var(--neek-red-700), var(--neek-red-400));
}
}
@layer neek.theme {
[data-theme='ps5'] {
--neek-neutral-50: oklch(98.5% 0.002 255);
--neek-neutral-100: oklch(97% 0.003 255);
--neek-neutral-200: oklch(92.2% 0.005 255);
--neek-neutral-300: oklch(87% 0.007 255);
--neek-neutral-400: oklch(70.8% 0.01 255);
--neek-neutral-500: oklch(53% 0.012 255);
--neek-neutral-600: oklch(43.9% 0.012 255);
--neek-neutral-700: oklch(37.1% 0.012 255);
--neek-neutral-800: oklch(26.9% 0.01 255);
--neek-neutral-900: oklch(20.5% 0.008 255);
--neek-neutral-950: oklch(14.5% 0.006 255);
--neek-bg: light-dark(var(--neek-neutral-50), var(--neek-neutral-950));
--neek-bg-muted: light-dark(var(--neek-neutral-100), var(--neek-neutral-800));
--neek-surface: light-dark(#ffffff, var(--neek-neutral-900));
--neek-surface-hover: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
--neek-surface-input: light-dark(#ffffff, var(--neek-neutral-950));
--neek-border: light-dark(var(--neek-neutral-200), var(--neek-neutral-800));
--neek-border-strong: light-dark(var(--neek-neutral-300), var(--neek-neutral-600));
--neek-text: light-dark(var(--neek-neutral-900), var(--neek-neutral-100));
--neek-text-secondary: light-dark(var(--neek-neutral-600), var(--neek-neutral-400));
--neek-text-muted: light-dark(var(--neek-neutral-500), color-mix(in oklab, var(--neek-neutral-400) 90%, var(--neek-neutral-500)));
--neek-pattern-lift-light: 4%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 37%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-dark: 23%;
--neek-ps5-blue: #0070cc;
--neek-ps5-blue-hover: #0064b7;
--neek-accent: light-dark(#0068bd, #3d9df5);
--neek-accent-hover: light-dark(#003697, #7cbcf8);
--neek-accent-text: var(--neek-accent);
--neek-accent-contrast: #ffffff;
--neek-button-color: var(--neek-ps5-blue);
--neek-button-color-text: #ffffff;
--neek-button-bg: var(--neek-ps5-blue);
--neek-button-bg-hover: var(--neek-ps5-blue-hover);
--neek-button-text: #ffffff;
--neek-rail-badge-bg: var(--neek-ps5-blue);
--neek-rail-badge-text: #ffffff;
--neek-timeline-new-brighten: 0%;
--neek-highlight: var(--neek-ps5-blue);
--neek-highlight-2: light-dark(#003697, #0070cc);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: light-dark(var(--neek-amber-700), var(--neek-amber-500));
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-focus-ring: var(--neek-ps5-blue);
--neek-logo-bg: linear-gradient(var(--neek-ps5-blue), var(--neek-ps5-blue));
--neek-logo-text: #ffffff;
--neek-link-preview-domain: var(--neek-text-muted);
--neek-audio-list-number: var(--neek-text-muted);
--neek-playlist-number: var(--neek-text-secondary);
--neek-success: light-dark(var(--neek-emerald-700), var(--neek-emerald-400));
--neek-shadow-color: light-dark(rgb(0 67 156 / 0.06), rgb(0 0 0 / 0.2));
}
}
@layer neek.theme {
[data-theme='nintendo'] {
--neek-neutral-50: oklch(98.5% 0 none);
--neek-neutral-100: oklch(97% 0 none);
--neek-neutral-200: oklch(92.2% 0 none);
--neek-neutral-300: oklch(87% 0 none);
--neek-neutral-400: oklch(70.8% 0 none);
--neek-neutral-500: oklch(53.5% 0 none);
--neek-neutral-600: oklch(43.9% 0 none);
--neek-neutral-700: oklch(37.1% 0 none);
--neek-neutral-800: oklch(26.9% 0 none);
--neek-neutral-900: oklch(20.5% 0 none);
--neek-neutral-950: oklch(14.5% 0 none);
--neek-bg: light-dark(#f8f8f8, var(--neek-neutral-950));
--neek-bg-muted: light-dark(#efefef, var(--neek-neutral-800));
--neek-surface: light-dark(#ffffff, var(--neek-neutral-900));
--neek-surface-hover: light-dark(#f8f8f8, var(--neek-neutral-800));
--neek-surface-input: light-dark(#ffffff, var(--neek-neutral-950));
--neek-border: light-dark(#e0e0e0, var(--neek-neutral-800));
--neek-border-strong: light-dark(#c8c8c8, var(--neek-neutral-600));
--neek-text: light-dark(#1d1d1f, var(--neek-neutral-100));
--neek-text-secondary: light-dark(#4a4a4f, var(--neek-neutral-400));
--neek-text-muted: light-dark(#66666c, color-mix(in oklab, var(--neek-neutral-400) 90%, var(--neek-neutral-500)));
--neek-meta-text: var(--neek-text-muted);
--neek-shadow-color: light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.2));
--neek-pattern-lift-light: 4%;
--neek-pattern-lift-dark: 0%;
--neek-pattern-strength-light: 27%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-dark: 23%;
--neek-nintendo-red: #e60012;
--neek-nintendo-red-hover: #b8000e;
--neek-accent: light-dark(#e60012, #ff5d68);
--neek-accent-hover: light-dark(#b8000e, #ff8a93);
--neek-accent-contrast: #ffffff;
--neek-accent-text: light-dark(#c4000f, #ff5d68);
--neek-nav-link-color: light-dark(var(--neek-accent), #ffffff);
--neek-nav-item-text: light-dark(var(--neek-accent), #ffffff);
--neek-brand-color: var(--neek-accent);
--neek-logo-bg: linear-gradient(var(--neek-nintendo-red), var(--neek-nintendo-red));
--neek-logo-text: #ffffff;
--neek-nav-current-bg: var(--neek-nintendo-red);
--neek-nav-current-text: #ffffff;
--neek-menu-current-bg: var(--neek-nintendo-red);
--neek-menu-current-text: #ffffff;
--neek-rail-badge-bg: var(--neek-nintendo-red);
--neek-rail-badge-text: #ffffff;
--neek-button-color: var(--neek-nintendo-red);
--neek-button-color-text: #ffffff;
--neek-button-brighten: 0%;
--neek-button-brighten-hover: 0%;
--neek-button-shadow: none;
--neek-button-bg: var(--neek-nintendo-red);
--neek-button-bg-hover: var(--neek-nintendo-red-hover);
--neek-button-text: #ffffff;
--neek-button-ring: var(--neek-focus-ring);
--neek-button-ring-offset: var(--neek-bg);
--neek-button-secondary-bg: light-dark(#ffffff, var(--neek-neutral-900));
--neek-button-secondary-bg-hover: light-dark(#f2f2f2, var(--neek-neutral-800));
--neek-button-secondary-text: light-dark(#1d1d1f, var(--neek-neutral-100));
--neek-button-secondary-text-hover: light-dark(#1d1d1f, var(--neek-neutral-100));
--neek-button-secondary-border: light-dark(#d6d6d6, var(--neek-neutral-700));
--neek-button-secondary-ring-offset: var(--neek-bg);
--neek-button-secondary-brighten: 0%;
--neek-button-secondary-brighten-hover: 0%;
--neek-timeline-new-text: #ffffff;
--neek-timeline-new-brighten: 0%;
--neek-composer-type-pressed-bg: light-dark(color-mix(in oklab, #e60012 12%, transparent), color-mix(in oklab, #e60012 22%, transparent));
--neek-pill-bg: light-dark(#ffffff, var(--neek-neutral-900));
--neek-pill-bg-hover: light-dark(#f2f2f2, var(--neek-neutral-800));
--neek-pill-border: light-dark(#e0e0e0, var(--neek-neutral-800));
--neek-pill-text: light-dark(#4a4a4f, var(--neek-neutral-300));
--neek-highlight: var(--neek-nintendo-red);
--neek-highlight-2: light-dark(#0080a8, #00c3e3);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: light-dark(#e60012, var(--neek-red-400));
--neek-rainbow-orange: light-dark(var(--neek-amber-700), var(--neek-amber-500));
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-emerald-400);
--neek-rainbow-cyan: light-dark(#0080a8, #00c3e3);
--neek-rainbow-blue: light-dark(#0080a8, #00c3e3);
--neek-rainbow-violet: light-dark(#b8000e, var(--neek-red-300));
--neek-rainbow-pink: light-dark(#b8000e, var(--neek-red-300));
--neek-focus-ring: var(--neek-nintendo-red);
--neek-link-preview-domain: var(--neek-text-muted);
--neek-audio-list-number: var(--neek-text-muted);
--neek-playlist-number: var(--neek-text-secondary);
--neek-success: light-dark(var(--neek-emerald-700), var(--neek-emerald-400));
--neek-danger: light-dark(var(--neek-red-700), var(--neek-red-400));
--neek-success-text: light-dark(var(--neek-emerald-700), var(--neek-emerald-300));
--neek-danger-text: light-dark(var(--neek-red-700), var(--neek-red-300));
--neek-badge-success-text: light-dark(var(--neek-emerald-700), var(--neek-emerald-300));
--neek-badge-danger-text: light-dark(var(--neek-red-700), var(--neek-red-300));
--neek-badge-warning-text: light-dark(var(--neek-amber-700), var(--neek-amber-300));
}
}
@layer neek.theme {
[data-theme='steam'] {
--neek-neutral-50: #f1f5f8;
--neek-neutral-100: #e4ebf1;
--neek-neutral-200: #d3dde6;
--neek-neutral-300: #b9c7d3;
--neek-neutral-400: #93a3b1;
--neek-neutral-500: #576c7f;
--neek-neutral-600: #46596b;
--neek-neutral-700: #2a475e;
--neek-neutral-800: #233a50;
--neek-neutral-900: #1b2838;
--neek-neutral-950: #171a21;
--neek-bg: light-dark(var(--neek-neutral-50), #0f1924);
--neek-bg-muted: light-dark(var(--neek-neutral-100), var(--neek-neutral-800));
--neek-surface: light-dark(#ffffff, var(--neek-neutral-900));
--neek-surface-hover: light-dark(var(--neek-neutral-50), var(--neek-neutral-800));
--neek-surface-input: light-dark(#ffffff, var(--neek-neutral-950));
--neek-border: light-dark(var(--neek-neutral-200), var(--neek-neutral-700));
--neek-border-strong: light-dark(var(--neek-neutral-300), var(--neek-neutral-600));
--neek-text: light-dark(var(--neek-neutral-900), #dfe8ef);
--neek-text-secondary: light-dark(var(--neek-neutral-600), #acb9c4);
--neek-text-muted: light-dark(var(--neek-neutral-500), var(--neek-neutral-400));
--neek-pattern-lift-light: 3%;
--neek-pattern-lift-dark: 9%;
--neek-pattern-strength-light: 28%;
--neek-pattern-strength-dark: 13%;
--neek-pattern-ink-dark: 20%;
--neek-page-glow: light-dark(rgb(26 159 255 / 0.12), rgb(94 174 255 / 0.24));
--neek-page-glow-grain-light: 0.13;
--neek-page-glow-grain-dark: 0.065;
--neek-panel-shade: light-dark(rgb(26 159 255 / 0.04), rgb(43 83 118 / 0.45));
--neek-panel-glow: light-dark(rgb(26 159 255 / 0.05), rgb(94 174 255 / 0.1));
--neek-steam-blue: #1a9fff;
--neek-steam-blue-hover: #47b1ff;
--neek-accent: light-dark(#0b6dbf, var(--neek-steam-blue));
--neek-accent-hover: light-dark(#084f8c, #66c0f4);
--neek-accent-text: light-dark(#0960a8, var(--neek-steam-blue));
--neek-accent-contrast: #ffffff;
--neek-button-color: var(--neek-steam-blue);
--neek-button-color-text: #ffffff;
--neek-button-bg: var(--neek-steam-blue);
--neek-button-bg-hover: var(--neek-steam-blue-hover);
--neek-button-text: #ffffff;
--neek-rail-badge-bg: var(--neek-steam-blue);
--neek-rail-badge-text: #ffffff;
--neek-timeline-new-brighten: 0%;
--neek-highlight: var(--neek-steam-blue);
--neek-highlight-2: light-dark(#2a475e, #66c0f4);
--neek-rainbow: var(--neek-highlight-gradient);
--neek-rainbow-text: var(--neek-highlight-gradient);
--neek-rainbow-glow: var(--neek-highlight-glow);
--neek-link-color: var(--neek-accent);
--neek-link-color-hover: var(--neek-accent-hover);
--neek-rainbow-red: var(--neek-red-400);
--neek-rainbow-orange: light-dark(var(--neek-amber-700), var(--neek-amber-500));
--neek-rainbow-yellow: var(--neek-amber-300);
--neek-rainbow-green: var(--neek-status-online);
--neek-rainbow-cyan: var(--neek-accent);
--neek-rainbow-blue: var(--neek-accent);
--neek-rainbow-violet: var(--neek-accent-hover);
--neek-rainbow-pink: var(--neek-accent-hover);
--neek-focus-ring: var(--neek-steam-blue);
--neek-status-online: light-dark(#5c7e10, #90ba3c);
--neek-logo-bg: linear-gradient(var(--neek-steam-blue), var(--neek-steam-blue));
--neek-logo-text: #ffffff;
--neek-link-preview-domain: var(--neek-text-muted);
--neek-audio-list-number: var(--neek-text-muted);
--neek-playlist-number: var(--neek-text-secondary);
--neek-success: var(--neek-status-online);
--neek-danger: light-dark(var(--neek-red-700), var(--neek-red-400));
--neek-shadow-color: light-dark(rgb(27 40 56 / 0.08), rgb(0 0 0 / 0.3));
}
}
@layer neek.theme {
:root[data-project-theme='neutral'] {
--neek-project-ink: var(--neek-project-accent, light-dark(#000000, #ffffff));
--neek-project-ink-text: oklch(from var(--neek-project-ink) clamp(0, (0.62 - l) * 1000, 1) 0 0);
--neek-accent: var(--neek-project-ink);
--neek-accent-hover: var(--neek-project-ink);
--neek-accent-text: var(--neek-project-ink);
--neek-accent-contrast: var(--neek-project-ink-text);
--neek-focus-ring: var(--neek-project-ink);
--neek-highlight: var(--neek-project-ink);
--neek-highlight-2: var(--neek-project-ink);
--neek-rainbow-red: var(--neek-project-ink);
--neek-rainbow-orange: var(--neek-project-ink);
--neek-rainbow-yellow: var(--neek-project-ink);
--neek-rainbow-green: var(--neek-project-ink);
--neek-rainbow-cyan: var(--neek-project-ink);
--neek-rainbow-blue: var(--neek-project-ink);
--neek-rainbow-violet: var(--neek-project-ink);
--neek-rainbow-pink: var(--neek-project-ink);
--neek-rainbow: linear-gradient(var(--neek-project-ink), var(--neek-project-ink));
--neek-rainbow-text: linear-gradient(var(--neek-project-ink), var(--neek-project-ink));
--neek-rainbow-glow: 0 0 0 0 transparent;
--neek-rainbow-hover-glow: 0 0 0 0 transparent;
--neek-highlight-glow: 0 0 0 0 transparent;
--neek-rainbow-glow-strength: 0;
--neek-card-hover-glow: 0 0 0 0 transparent;
--neek-input-focus-glow: 0 0 0 0 transparent;
--neek-card-hover-border-image: linear-gradient(var(--neek-border-strong), var(--neek-border-strong));
--neek-gap-ring: 0 0 0 2px var(--neek-bg), 0 0 0 3px var(--neek-project-ink);
--neek-link-color: var(--neek-project-ink);
--neek-link-color-hover: var(--neek-project-ink);
--neek-button-angle: to bottom;
--neek-button-brighten: 0%;
--neek-button-brighten-hover: 0%;
--neek-button-lift-hover: 0%;
--neek-button-color: var(--neek-project-ink);
--neek-button-color-text: initial;
--neek-button-yellow-text: initial;
--neek-button-primary-from: var(--neek-project-ink);
--neek-button-primary-via: var(--neek-project-ink);
--neek-button-primary-to: var(--neek-project-ink);
--neek-button-red: var(--neek-project-ink);
--neek-button-orange: var(--neek-project-ink);
--neek-button-yellow: var(--neek-project-ink);
--neek-button-green: var(--neek-project-ink);
--neek-button-cyan: var(--neek-project-ink);
--neek-button-blue: var(--neek-project-ink);
--neek-button-violet: var(--neek-project-ink);
--neek-button-pink: var(--neek-project-ink);
--neek-button-pink-via: var(--neek-project-ink);
--neek-button-pink-to: var(--neek-project-ink);
--neek-button-ring: var(--neek-project-ink);
--neek-button-bg: var(--neek-project-ink);
--neek-button-bg-hover: var(--neek-project-ink);
--neek-button-text: var(--neek-project-ink-text);
--neek-button-danger-bg: var(--neek-red-600);
--neek-button-danger-bg-active: var(--neek-red-700);
--neek-button-danger-brighten: 0%;
--neek-button-danger-brighten-hover: 0%;
--neek-logo-bg: linear-gradient(var(--neek-project-ink), var(--neek-project-ink));
--neek-logo-text: var(--neek-bg);
}
:root[data-project-theme='neutral'] :where(.neek-button:not([data-color]):is(:not([data-variant]), [data-variant='primary']), .neek-compose-fab):hover {
--neek-button-color: color-mix(in oklab, var(--neek-project-ink) 85%, var(--neek-bg));
--neek-button-primary-from: var(--neek-button-color);
--neek-button-primary-via: var(--neek-button-color);
--neek-button-primary-to: var(--neek-button-color);
}
}
@layer neek.appearance {
:root[data-radius='none'] {
--neek-radius-md: var(--neek-radius-step-none);
--neek-radius-lg: var(--neek-radius-step-none);
}
:root[data-radius='sm'] {
--neek-radius-md: var(--neek-radius-step-sm);
--neek-radius-lg: var(--neek-radius-step-sm);
}
:root[data-radius='md'] {
--neek-radius-md: var(--neek-radius-step-md);
--neek-radius-lg: var(--neek-radius-step-md);
}
:root[data-radius='lg'] {
--neek-radius-md: var(--neek-radius-step-lg);
--neek-radius-lg: var(--neek-radius-step-lg);
}
:root[data-font-body='inter'] { --neek-font-sans: var(--neek-font-inter); }
:root[data-font-body='system'] { --neek-font-sans: var(--neek-font-system); }
:root[data-font-body='apple'] { --neek-font-sans: var(--neek-font-apple); }
:root[data-font-body='windows'] { --neek-font-sans: var(--neek-font-windows); }
:root[data-font-body='android'] { --neek-font-sans: var(--neek-font-android); }
:root[data-font-body='serif'] { --neek-font-sans: var(--neek-font-serif); }
:root[data-font-body='mono'] { --neek-font-sans: var(--neek-font-monospace); }
:root[data-font-body='jetbrains'] { --neek-font-sans: var(--neek-font-jetbrains); }
:root[data-font-heading='inter'] { --neek-font-heading: var(--neek-font-inter); }
:root[data-font-heading='system'] { --neek-font-heading: var(--neek-font-system); }
:root[data-font-heading='apple'] { --neek-font-heading: var(--neek-font-apple); }
:root[data-font-heading='windows'] { --neek-font-heading: var(--neek-font-windows); }
:root[data-font-heading='android'] { --neek-font-heading: var(--neek-font-android); }
:root[data-font-heading='serif'] { --neek-font-heading: var(--neek-font-serif); }
:root[data-font-heading='mono'] { --neek-font-heading: var(--neek-font-monospace); }
:root[data-font-heading='jetbrains'] { --neek-font-heading: var(--neek-font-jetbrains); }
:root[data-font-input='inter'] { --neek-font-input: var(--neek-font-inter); }
:root[data-font-input='system'] { --neek-font-input: var(--neek-font-system); }
:root[data-font-input='apple'] { --neek-font-input: var(--neek-font-apple); }
:root[data-font-input='windows'] { --neek-font-input: var(--neek-font-windows); }
:root[data-font-input='android'] { --neek-font-input: var(--neek-font-android); }
:root[data-font-input='serif'] { --neek-font-input: var(--neek-font-serif); }
:root[data-font-input='mono'] { --neek-font-input: var(--neek-font-monospace); }
:root[data-font-input='jetbrains'] { --neek-font-input: var(--neek-font-jetbrains); }
}