Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072/* design tokens, the dark variant and utilities, without preflight or page styles: app.css builds the app on top of this, and the docs site imports it to render these components under starlight (docs/src/styles/global.css) */
@custom-variant dark { @media (prefers-color-scheme: dark) { &:where(:not([data-theme="light"], [data-theme="light"] *)) { @slot; } } &:where([data-theme="dark"], [data-theme="dark"] *) { @slot; }}
/* the inverse of dark, for surfaces drawn dark-first (the landing page) */@custom-variant light { @media (prefers-color-scheme: light) { &:where(:not([data-theme="dark"], [data-theme="dark"] *)) { @slot; } } &:where([data-theme="light"], [data-theme="light"] *) { @slot; }}
@custom-variant mobile (@media (pointer: coarse) and (width < 48rem));
@theme { --radius-sm: 0.375rem; --radius-md: 0.5rem;
--font-sans: "TimelessSans", "TimelessSans Fallback", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans--font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
--font-weight-medium: 510; --font-weight-semibold: 590;
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
--ease-spring: linear( 0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1 );
--spacing-none: 0px; --spacing-3xs: 0.125rem; --spacing-2xs: 0.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.25rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; --spacing-3xl: 2.5rem; --spacing-4xl: 3rem; --spacing-5xl: 4rem; --spacing-word: 0.236em;
--container-*: initial; --container-compact: 28rem; --container-narrow: 32rem; --container-medium: 42rem; --container-wide: 48rem; --container-page: 64rem; --container-hero: 80rem;
--color-background-default: #ffffff; --color-background-subtle: #fafafa; --color-background-inset: #f2f2f2; --color-background-muted: #e5e5e5; --color-background-strong: #d4d4d4; --color-background-canvas: #f5f5f5; --color-background-highlight: #e0e7ff; --color-background-success-subtle: #dcfce7; --color-background-success-subtle-hover: #bbf7d0; --color-background-success-emphasis: #008931; --color-background-success-emphasis-hover: #15803d; --color-background-danger-subtle: #ffe4e6; --color-background-danger-subtle-hover: #fecdd3; --color-background-danger-emphasis: #fda4af; --color-background-danger-emphasis-hover: #fb7185; --color-background-warning-subtle: #fffbeb; --color-background-warning-subtle-hover: #fef3c7; --color-background-warning-emphasis: #f59e0b; --color-background-info-subtle: #eef2ff; --color-background-info-subtle-hover: #e0e7ff; --color-background-info-emphasis: #5750f1; --color-background-info-emphasis-hover: #4a41e0; --color-background-emphasis: #0a0a0a;
/* --- background / navigation --- The settings sidebar aliases *invert* between modes, so these cannot be spelled as an existing pair: light recesses the frame (subtle) and raises the active item (default), dark does the exact opposite. */ --color-background-navigation-frame: #f5f5f5; --color-background-navigation-item: #ffffff;
--color-foreground-default: #0a0a0a; --color-foreground-muted: #525252; --color-foreground-subtle: #6e6e6e; --color-foreground-placeholder: #a3a3a3; --color-foreground-disabled: #d4d4d4; --color-foreground-on-emphasis: #ffffff; --color-foreground-inverted: #f5f5f5; --color-foreground-highlight: #3730a3; --color-foreground-success: #00822a; --color-foreground-success-strong: #166534; --color-foreground-success-disabled: #16a34a80; --color-foreground-danger: #d4003e; --color-foreground-danger-strong: #9f1239; --color-foreground-danger-subtle: #fb7185; --color-foreground-danger-disabled: #fda4af; --color-foreground-warning: #b85900; --color-foreground-warning-strong: #92400e; --color-foreground-warning-disabled: #fcd34d; --color-foreground-info: #4338ca; --color-foreground-info-strong: #3730a3; --color-foreground-link-default: #0a0a0a; --color-foreground-link-hover: #5750f1; --color-foreground-link-disabled: #a3a3a3; --color-foreground-link-danger: #d4003e; --color-foreground-link-danger-hover: #a63f3f; --color-foreground-link-success: #00822a; --color-foreground-link-success-hover: #31814e; --color-foreground-link-warning: #b85900; --color-foreground-link-warning-hover: #b05e00; --color-foreground-link-info: #5750f1; --color-foreground-link-info-hover: #6d67f5;
--color-border-default: #e5e5e5; --color-border-subtle: #f0f0f0; --color-border-strong: #d4d4d4; --color-border-disabled: #e5e5e5; --color-border-focus: #7c75e5; --color-border-focus-success: #22c55e; --color-border-focus-danger: #f43f5e; --color-border-success: #15803d; --color-border-warning: #fcd34d; --color-border-danger: #fda4af; --color-border-danger-subtle: #fecdd3; --color-border-navigation-item-active: #e5e5e5;
--color-drawing-accent: #6d67f5; --color-drawing-accent-recess: color-mix(in srgb, var(--color-drawing-accent), black 14%); --color-drawing-accent-edge: color-mix(in srgb, var(--color-drawing-accent), black 38%);
--color-shadow-inner-strong: #d4d4d4; --color-shadow-inner-strong-hover: #d4d4d4; --color-shadow-inner-subtle: #e5e5e5; --color-shadow-ambient-strong: rgb(0 0 0 / 0.08); --color-shadow-ambient-subtle: rgb(0 0 0 / 0.04); --color-shadow-ring: var(--color-alpha-dark-10);
--color-inverse-background: #262626; --color-inverse-foreground: #f5f5f5; --color-inverse-border: #404040; --color-inverse-shadow-inner: #171717;
--shadow-small: 0 1px 2px var(--color-shadow-ambient-strong); --shadow-regular: 0 10px 28px -8px var(--color-shadow-ambient-strong), 0 2px 6px var(--color-shadow-ambient-subtle); --shadow-large: 0 24px 48px -12px var(--color-shadow-ambient-strong), 0 6px 14px var(--color-shadow-ambient-subtle);
--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent); --color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent); --color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent); --color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent); --color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent); --color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent); --color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent); --color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent); --color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent); --color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent); --color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent); --color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent); --color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent); --color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent); --color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent); --color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent); --color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent); --color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent); --color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent); --color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent); --color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent); --color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent); --color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent); --color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent); --color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent); --color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent); --color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent); --color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent); --color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent); --color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent); --color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent); --color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent); --color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent); --color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent); --color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent); --color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent); --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
/* --- terminal (pipeline logs) --- catppuccin latte, same values the appview's terminal-to-html palette uses. dark is macchiato, below. */ --color-ansi-black: #6c6f85; --color-ansi-red: #d20f39; --color-ansi-green: #218500; --color-ansi-yellow: #ad6000; --color-ansi-blue: #1e66f5; --color-ansi-magenta: #8839ef; --color-ansi-cyan: #008087; --color-ansi-white: #4c4f69; --color-ansi-bright-black: #6f7284; --color-ansi-bright-red: #d63547; --color-ansi-bright-green: #218500; --color-ansi-bright-yellow: #8a703a; --color-ansi-bright-blue: #007f95; --color-ansi-bright-magenta: #b8489d; --color-ansi-bright-cyan: #007ab7; --color-ansi-bright-white: #70737e;
--color-syntax-foreground: #4c4f69; --color-syntax-comment: #56586b; --color-syntax-string: #006900; --color-syntax-keyword: #781fdb; --color-syntax-function: #004bd9; --color-syntax-constant: #b41100; --color-syntax-parameter: #b6002d; --color-syntax-punctuation: #56586b; --color-syntax-link: #004bd9; --color-syntax-inserted: #006900; --color-syntax-deleted: #b60023; --color-syntax-changed: #904400;
--animate-spin-step: spin-step 2.5s infinite; --animate-stack-pop: stack-pop 620ms var(--ease-spring) both; --animate-stack-shift: stack-shift 520ms var(--ease-spring) both; --animate-marquee-up: marquee-up 40s linear infinite; --animate-marquee-down: marquee-down 40s linear infinite; --animate-marquee-left: marquee-left 40s linear infinite;
@keyframes stack-pop { from { opacity: 0; transform: translateY(-0.75rem) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes stack-shift { from { transform: translateY(-2.5rem); } to { transform: none; } }
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes spin-step { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { transform: rotate(360deg); } }}
@utility hit-area-y-* { &::before { content: ""; position: absolute; inset-inline: 0; inset-block: calc(var(--spacing) * --value(number) * -1); }}
@utility typography-heading-0 { font-size: 5rem; line-height: 1; font-weight: 600; letter-spacing: -0.25px;}
@utility typography-heading-1 { font-size: 3rem; line-height: 1.1667; font-weight: 500;}
@utility typography-heading-2 { font-size: 1.875rem; line-height: 1.2; font-weight: 600;}
@utility typography-heading-3 { font-size: 1.5rem; line-height: 1.25; font-weight: 500;}
@utility typography-heading-4 { font-size: 1.25rem; line-height: 1.4; font-weight: 500;}
@utility typography-paragraph-large { font-size: 1rem; line-height: 1.625;}
@utility typography-paragraph-body { font-size: 0.9375rem; line-height: 1.6;}
@utility typography-paragraph-regular { font-size: 0.8125rem; line-height: 1.5385;}
@utility typography-paragraph-small { font-size: 0.75rem; line-height: 1.3333;}
@utility typography-paragraph-mini { font-size: 0.625rem; line-height: 1.6;}
@utility typography-monospace-large { @apply font-mono; font-size: 1rem; line-height: 1.5;}
@utility typography-monospace-regular { @apply font-mono; font-size: 0.8125rem; line-height: 1.5385;}
@utility typography-monospace-small { @apply font-mono; font-size: 0.75rem; line-height: 1.3333;}
@utility popover-transition { opacity: 0; scale: 0.95; transform-origin: center;
&[data-popover-origin="top-left"] { transform-origin: top left; } &[data-popover-origin="top-center"] { transform-origin: top center; } &[data-popover-origin="top-right"] { transform-origin: top right; } &[data-popover-origin="center-left"] { transform-origin: center left; } &[data-popover-origin="center-center"] { transform-origin: center; } &[data-popover-origin="center-right"] { transform-origin: center right; } &[data-popover-origin="bottom-left"] { transform-origin: bottom left; } &[data-popover-origin="bottom-center"] { transform-origin: bottom center; } &[data-popover-origin="bottom-right"] { transform-origin: bottom right; }
transition: opacity 120ms ease-out, scale 120ms ease-out, overlay 120ms allow-discrete, display 120ms allow-discrete;
&:is(:popover-open, :modal) { opacity: 1; scale: 1; }
@starting-style { &:is(:popover-open, :modal) { opacity: 0; scale: 0.95; } }
@media (prefers-reduced-motion: reduce) { transition: none; }}
@utility edge-ring { @apply ring ring-shadow-ring; @variant forced-colors { outline: 1px solid; }}
@utility edge-ring-inset { @apply inset-ring inset-ring-shadow-ring; @variant forced-colors { outline: 1px solid; outline-offset: -1px; }}
@utility defer-render-* { content-visibility: auto; contain-intrinsic-height: auto --spacing(--value(number));}
@utility hit-area { position: relative;
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1); --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1); --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1); --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-l-* { position: relative; --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-r-* { position: relative; --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-t-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-b-* { position: relative; --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-x-* { position: relative; --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1); --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-y-* { position: relative; --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1); --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; }}
@utility hit-area-debug { position: relative;
&::before { content: ""; position: absolute; top: var(--hit-area-t, 0px); right: var(--hit-area-r, 0px); bottom: var(--hit-area-b, 0px); left: var(--hit-area-l, 0px); pointer-events: inherit; @apply border border-dashed border-blue-500; @apply bg-blue-500/10; }
&:hover::before { @apply border border-dashed border-green-500; @apply bg-green-500/10; }}
/* debug only. */@utility debug-border { --debug-hue: 0; --debug-depth: 0; --debug-width: 1px; outline: var(--debug-width) solid hsl(calc(var(--debug-hue) + var(--debug-depth)) 100% 50%); /* an outline is drawn outward from the outline edge, so the offset has to cancel the whole width — otherwise a thick one bleeds past the box it is marking */ outline-offset: calc(-1 * var(--debug-width));
&:nth-child(6n + 2) { --debug-hue: 60; } &:nth-child(6n + 3) { --debug-hue: 120; } &:nth-child(6n + 4) { --debug-hue: 180; } &:nth-child(6n + 5) { --debug-hue: 240; } &:nth-child(6n) { --debug-hue: 300; }}
@layer utilities { .debug-border .debug-border { --debug-depth: 25; --debug-width: 2px; } .debug-border .debug-border .debug-border { --debug-depth: 50; --debug-width: 3px; } .debug-border .debug-border .debug-border .debug-border { --debug-depth: 75; --debug-width: 4px; }}
@utility swap-layer { grid-area: 1 / 1; transition-property: opacity, scale, translate, filter; transition-duration: var(--swap-duration); transition-timing-function: var(--swap-easing);}
@utility swap-icon-out { opacity: 0; scale: 0.25; filter: blur(4px);
@media (prefers-reduced-motion: reduce) { scale: 1; filter: none; }}
@utility swap-label-out { opacity: 0; translate: 0 3px; filter: blur(3px);
@media (prefers-reduced-motion: reduce) { translate: none; filter: none; }}
@utility text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1; will-change: transform, filter, opacity; transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
&[data-swap="exit"] { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
&[data-swap="enter"] { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { transition: none; }}
@utility bone-pulse { /* fade-in has to be second so it overrides pulse during its 120ms */ animation: var(--animate-pulse), bone-fade-in 120ms ease-out;
@media (prefers-reduced-motion: reduce) { animation: none; }}
@keyframes bone-fade-in { from { opacity: 0; }}
@utility row-breathe { animation: row-breathe 1.2s ease-in-out infinite; background-color: var(--color-background-muted); border-radius: var(--radius-md, 0.5rem);
@media (prefers-reduced-motion: reduce) { animation: none; }}
@keyframes row-breathe { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; }}
@layer base { :root { --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out; }}
/* unlayered, so the dark values beat the light @theme values wherever those land: the theme layer in the app, unlayered in the docs */:root { @variant dark { --color-background-default: #141414; --color-background-subtle: #1a1a1a; --color-background-inset: #1f1f1f; --color-background-muted: #2a2a2a; --color-background-strong: #474747; --color-background-canvas: #0a0a0a; --color-background-highlight: #2c2675; --color-background-success-subtle: #14532d; --color-background-success-subtle-hover: #166534; --color-background-success-emphasis: #15803d; --color-background-success-emphasis-hover: #166534; --color-background-danger-subtle: #4c0519; --color-background-danger-subtle-hover: #881337; --color-background-danger-emphasis: #be123c; --color-background-danger-emphasis-hover: #9f1239; --color-background-warning-subtle: #451a03; --color-background-warning-subtle-hover: #78350f; --color-background-warning-emphasis: #d97706; --color-background-info-subtle: #1c1a45; --color-background-info-subtle-hover: #27235f; --color-background-info-emphasis: #6a63f0; --color-background-info-emphasis-hover: #6e67de; --color-background-emphasis: #f5f5f5;
/* --- background / navigation (Dark) --- inverted vs light, see above */ --color-background-navigation-frame: #141414; --color-background-navigation-item: #1f1f1f;
--color-foreground-default: #fafafa; --color-foreground-muted: #c4c4c4; --color-foreground-subtle: #a4a4a4; --color-foreground-placeholder: #8d8d8d; --color-foreground-disabled: #474747; --color-foreground-on-emphasis: #ffffff; --color-foreground-inverted: #0a0a0a; --color-foreground-highlight: #c7cffe; --color-foreground-success: #4ade80; --color-foreground-success-strong: #bbf7d0; --color-foreground-success-disabled: #15803d; --color-foreground-danger: #fb7185; --color-foreground-danger-strong: #fecdd3; --color-foreground-danger-disabled: #9f1239; --color-foreground-warning: #fbbf24; --color-foreground-warning-strong: #fde68a; --color-foreground-warning-disabled: #b45309; --color-foreground-info: #a5acfb; --color-foreground-info-strong: #c7cffe; --color-foreground-link-default: #fafafa; --color-foreground-link-hover: #a5acfb; --color-foreground-link-disabled: #737373; --color-foreground-link-danger: #fb7185; --color-foreground-link-danger-hover: #f9ecec; --color-foreground-link-success: #22c55e; --color-foreground-link-success-hover: #e0f5e7; --color-foreground-link-warning: #f59e0b; --color-foreground-link-warning-hover: #fbbf24; --color-foreground-link-info: #8b85f7; --color-foreground-link-info-hover: #a5acfb;
--color-border-default: #2c2c2c; --color-border-subtle: #222222; --color-border-strong: #444444; --color-border-disabled: #2a2a2a; --color-border-focus: #8b85f7; --color-border-focus-success: #22c55e; --color-border-focus-danger: #f43f5e; --color-border-success: #15803d; --color-border-warning: #92400e; --color-border-danger: #9f1239; --color-border-navigation-item-active: #2a2a2a;
--color-shadow-inner-strong: #000000; --color-shadow-inner-strong-hover: #141414; --color-shadow-inner-subtle: #0a0a0a; --color-shadow-ambient-strong: rgb(0 0 0 / 0.35); --color-shadow-ambient-subtle: rgb(0 0 0 / 0.2);
--color-inverse-background: #ffffff; --color-inverse-foreground: #171717; --color-inverse-border: #e5e5e5; --color-inverse-shadow-inner: #e5e5e5;
/* --- terminal (Dark) --- catppuccin macchiato */ --color-ansi-black: #a5adcb; --color-ansi-red: #ed8796; --color-ansi-green: #a6da95; --color-ansi-yellow: #eed49f; --color-ansi-blue: #8aadf4; --color-ansi-magenta: #c6a0f6; --color-ansi-cyan: #8bd5ca; --color-ansi-white: #cad3f5; --color-ansi-bright-black: #8087a2; --color-ansi-bright-red: #f5bde6; --color-ansi-bright-green: #a6da95; --color-ansi-bright-yellow: #f5a97f; --color-ansi-bright-blue: #7dc4e4; --color-ansi-bright-magenta: #f4dbd6; --color-ansi-bright-cyan: #91d7e3; --color-ansi-bright-white: #f0c6c6;
--color-syntax-foreground: #cdd6f4; --color-syntax-comment: #afb6cf; --color-syntax-string: #a6e3a1; --color-syntax-keyword: #cca7f8; --color-syntax-function: #8cb8fe; --color-syntax-constant: #fab387; --color-syntax-parameter: #eda2ae; --color-syntax-punctuation: #afb6cf; --color-syntax-link: #8cb8fe; --color-syntax-inserted: #a6e3a1; --color-syntax-deleted: #ff98b5; --color-syntax-changed: #f9e2af; }}
:root[data-palette="classic-light"] { --color-background-default: #ffffff; --color-background-subtle: #f9fafb; --color-background-inset: #f3f4f6; --color-background-muted: #e5e7eb; --color-background-strong: #d1d5db; --color-background-canvas: #f1f5f9; --color-background-emphasis: #111827; --color-background-navigation-frame: #f1f5f9; --color-background-navigation-item: #ffffff;
--color-foreground-default: #111827; --color-foreground-muted: #4b5563; --color-foreground-subtle: #6b7280; --color-foreground-placeholder: #9ca3af; --color-foreground-disabled: #d1d5db; --color-foreground-inverted: #f3f4f6; --color-foreground-link-default: #111827; --color-foreground-link-disabled: #9ca3af;
--color-border-default: #e5e7eb; --color-border-subtle: #f3f4f6; --color-border-strong: #d1d5db; --color-border-disabled: #e5e7eb; --color-border-navigation-item-active: #e5e7eb;
--color-shadow-inner-strong: #d1d5db; --color-shadow-inner-strong-hover: #d1d5db; --color-shadow-inner-subtle: #e5e7eb;
--color-inverse-background: #1f2937; --color-inverse-foreground: #f3f4f6; --color-inverse-border: #374151; --color-inverse-shadow-inner: #111827; --color-shadow-ring: var(--color-border-default);}
:root[data-palette="classic-dark"] { --color-background-default: #1f2937; --color-background-subtle: #243040; --color-background-inset: #2b3544; --color-background-muted: #374151; --color-background-strong: #4b5563; --color-background-canvas: #111827; --color-background-emphasis: #f3f4f6; --color-background-navigation-frame: #1f2937; --color-background-navigation-item: #2b3544;
--color-foreground-default: #f3f4f6; --color-foreground-muted: #d1d5db; --color-foreground-subtle: #9ca3af; --color-foreground-placeholder: #6b7280; --color-foreground-disabled: #4b5563; --color-foreground-inverted: #111827; --color-foreground-link-default: #f3f4f6; --color-foreground-link-disabled: #6b7280;
--color-border-default: #374151; --color-border-subtle: #2b3544; --color-border-strong: #4b5563; --color-border-disabled: #374151; --color-border-navigation-item-active: #374151;
--color-shadow-inner-strong: #030712; --color-shadow-inner-strong-hover: #1f2937; --color-shadow-inner-subtle: #111827;
--color-inverse-background: #f9fafb; --color-inverse-foreground: #111827; --color-inverse-border: #e5e7eb; --color-inverse-shadow-inner: #e5e7eb; --color-shadow-ring: var(--color-border-default);}
:root[data-palette="ash"] { --color-background-default: #313338; --color-background-subtle: #383a40; --color-background-inset: #3e4047; --color-background-muted: #4a4c54; --color-background-strong: #5d6069; --color-background-canvas: #1e1f22; --color-background-highlight: #3c4270; --color-background-info-subtle: #383c5c; --color-background-info-subtle-hover: #3f4470; --color-background-info-emphasis: #5865f2; --color-background-info-emphasis-hover: #4752c4; --color-background-navigation-frame: #313338; --color-background-navigation-item: #3e4047;
--color-foreground-default: #eceef0; --color-foreground-muted: #c4c9cf; --color-foreground-subtle: #a3a9b1; --color-foreground-placeholder: #7c7f88; --color-foreground-disabled: #5d6069; --color-foreground-inverted: #1e1f22; --color-foreground-link-default: #eceef0; --color-foreground-link-hover: #00a8fc; --color-foreground-link-disabled: #7c7f88; --color-foreground-link-info: #00a8fc; --color-foreground-link-info-hover: #4fc3ff;
--color-border-default: #4e5058; --color-border-subtle: #404249; --color-border-strong: #686b74; --color-border-disabled: #4e5058; --color-border-focus: #5865f2; --color-border-navigation-item-active: #4e5058;
--color-drawing-accent: #5865f2; --color-shadow-inner-strong-hover: #313338; --color-shadow-inner-subtle: #111214; --color-shadow-ring: var(--color-border-default);}
:root[data-palette="snow"] { --color-background-default: #ffffff; --color-background-subtle: #fafafa; --color-background-inset: #f4f5f6; --color-background-muted: #e8eaee; --color-background-strong: #d4d7dc; --color-background-canvas: #ffffff; --color-background-highlight: #edeff9; --color-background-info-subtle: #edeff9; --color-background-info-subtle-hover: #e2e5f6; --color-background-info-emphasis: #5e6ad2; --color-background-info-emphasis-hover: #4c56b8; --color-background-navigation-frame: #ffffff; --color-background-navigation-item: #f4f5f6;
--color-foreground-default: #282a30; --color-foreground-muted: #4e535b; --color-foreground-subtle: #6e747b; --color-foreground-placeholder: #a0a4ab; --color-foreground-disabled: #d4d7dc; --color-foreground-link-default: #282a30; --color-foreground-link-hover: #5e6ad2; --color-foreground-link-disabled: #a0a4ab; --color-foreground-link-info: #5e6ad2; --color-foreground-link-info-hover: #4c56b8;
--color-border-default: #e9eaed; --color-border-subtle: #f4f5f6; --color-border-strong: #d4d7dc; --color-border-disabled: #e9eaed; --color-border-focus: #5e6ad2; --color-border-navigation-item-active: #e9eaed;
--color-drawing-accent: #5e6ad2; --color-shadow-inner-strong: #d4d7dc; --color-shadow-inner-strong-hover: #d4d7dc; --color-shadow-inner-subtle: #e9eaed; --color-shadow-ring: var(--color-border-default);}