/* design-system/tokens/colors.css */
:root {
    --palette-white: 255 255 255;
    --palette-black: 0 0 0;
    --palette-gray-50: 249 250 251;
    --palette-gray-100: 243 244 246;
    --palette-gray-200: 229 231 235;
    --palette-gray-300: 209 213 219;
    --palette-gray-400: 156 163 175;
    --palette-gray-500: 107 114 128;
    --palette-gray-600: 75 85 99;
    --palette-gray-700: 55 65 81;
    --palette-gray-800: 31 41 55;
    --palette-gray-900: 17 24 39;
    --palette-gray-950: 3 7 18;
    --palette-red-50: 254 242 242;
    --palette-red-200: 254 202 202;
    --palette-red-300: 252 165 165;
    --palette-red-500: 239 68 68;
    --palette-red-600: 220 38 38;
    --palette-red-700: 185 28 28;
    --palette-red-800: 153 27 27;
    --palette-amber-700: 180 83 9;
    --palette-green-700: 21 128 61;
    --palette-emerald-500: 16 185 129;
    --palette-emerald-600: 5 150 105;
    --palette-blue-500: 59 130 246;

    --color-surface: rgb(var(--palette-white));
    --color-surface-subtle: rgb(var(--palette-gray-50));
    --color-surface-muted: rgb(var(--palette-gray-100));
    --color-text: rgb(var(--palette-gray-900));
    --color-text-strong: rgb(var(--palette-gray-800));
    --color-text-secondary: rgb(var(--palette-gray-700));
    --color-text-muted: rgb(var(--palette-gray-500));
    --color-text-subtle: rgb(var(--palette-gray-400));
    --color-border: rgb(var(--palette-gray-200));
    --color-border-subtle: rgb(var(--palette-gray-100));
    --color-brand: rgb(var(--palette-red-500));
    --color-brand-surface: rgb(var(--palette-red-50));
    --color-link: rgb(var(--palette-red-700));
    --color-link-hover: rgb(var(--palette-red-800));
    --color-priority-high: rgb(var(--palette-red-600));
    --color-priority-medium: rgb(var(--palette-amber-700));
    --color-priority-low: rgb(var(--palette-green-700));
    --color-priority-unknown: rgb(var(--palette-gray-600));
}

/* design-system/tokens/typography.css */
:root {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-size-xs: 0.75rem;
    --font-size-caption: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-body-sm: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-body: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-display: 6rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --leading-tight: 1.25;
    --leading-body: 1.5;
    --leading-relaxed: 1.625;
    --tracking-tight: -0.025em;
    --tracking-display: -0.05em;
}

/* design-system/tokens/layout.css */
:root {
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-4-5: 1.125rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.25rem;
    --space-14: 3.5rem;
    --space-15: 3.75rem;
    --space-16: 4rem;
    --space-17: 4.25rem;
    --space-18: 4.5rem;
    --space-19: 4.75rem;
    --space-20: 5rem;
    --space-22: 5.5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-33: 8.25rem;
    --space-36: 9rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgb(var(--palette-black) / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(var(--palette-black) / 0.1), 0 2px 4px -2px rgb(var(--palette-black) / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(var(--palette-black) / 0.25);
    --shadow-dialog: 0 25px 50px -12px rgb(var(--palette-black) / 0.32);
    --shadow-focus: 0 0 0 3px rgb(var(--palette-red-500) / 0.13);
    --focus-ring: 2px solid var(--color-brand);
    --focus-offset: 3px;
    --container-wide: 72rem;
    --container-content: 56rem;
    --container-reading: 44rem;
    --section-space: var(--space-24);
    --page-gutter: var(--space-6);
    --header-height: var(--space-16);
    --z-header: 50;
}

/* design-system/tokens/motion.css */
:root {
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-panel-leave: 250ms;
    --duration-feature-leave: 300ms;
    --duration-scene: 500ms;
    --duration-slow: 700ms;
    --duration-dialog: 180ms;
    --duration-marquee: 90s;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --indicator-size: 8px;
    --indicator-active: 32px;
    --indicator-feature-active: 24px;
    --color-indicator: var(--color-border);
    --color-indicator-inverse: rgb(var(--palette-white) / 0.2);
}

/* css/base.css */
/* Document reset and compatibility defaults for the utility layer. */
*,
::backdrop,
:after,
:before {
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: var(--color-surface);
    --tw-ring-color: rgb(var(--palette-blue-500) / 0.5);
    --tw-ring-offset-shadow: 0 0 rgb(var(--palette-black) / 0);
    --tw-ring-shadow: 0 0 rgb(var(--palette-black) / 0);
    --tw-shadow: 0 0 rgb(var(--palette-black) / 0);
}
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid var(--color-border);
}
:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: var(--font-sans);
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}
body {
    margin: 0;
    line-height: inherit;
}
hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}
abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}
a {
    color: inherit;
    text-decoration: inherit;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
pre,
samp {
    font-family:
        var(--font-mono);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button,
select {
    text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
:-moz-focusring {
    outline: auto;
}
:-moz-ui-invalid {
    box-shadow: none;
}
progress {
    vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
summary {
    display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}
fieldset {
    margin: 0;
}
fieldset,
legend {
    padding: 0;
}
menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
dialog {
    padding: 0;
}
textarea {
    resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: var(--color-text-subtle);
}
input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: var(--color-text-subtle);
}
[role="button"],
button {
    cursor: pointer;
}
:disabled {
    cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle;
}
img,
video {
    max-width: 100%;
    height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* css/utilities.css */
/* Compatibility utilities for static templates and showcase scenes. */

.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.inset-4 {
    inset: var(--space-4);
}
.-bottom-0\.5 {
    bottom: calc(-1 * var(--space-0-5));
}
.-right-0\.5 {
    right: calc(-1 * var(--space-0-5));
}
.bottom-1 {
    bottom: var(--space-1);
}
.left-1 {
    left: var(--space-1);
}
.right-1 {
    right: var(--space-1);
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.-mt-1 {
    margin-top: calc(-1 * var(--space-1));
}
.mb-1\.5 {
    margin-bottom: var(--space-1-5);
}
.mb-10 {
    margin-bottom: var(--space-10);
}
.mb-12 {
    margin-bottom: var(--space-12);
}
.mb-2 {
    margin-bottom: var(--space-2);
}
.mb-5 {
    margin-bottom: var(--space-5);
}
.ml-3 {
    margin-left: var(--space-3);
}
.mt-1 {
    margin-top: var(--space-1);
}
.mt-2 {
    margin-top: var(--space-2);
}
.mt-4 {
    margin-top: var(--space-4);
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.grid {
    display: grid;
}
.repo-language-stats {
    height: auto;
}
.repo-language-stats-frame {
    align-items: center;
    aspect-ratio: 495/340;
    background: var(--color-surface);
    display: flex;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.h-1\.5 {
    height: var(--space-1-5);
}
.h-2 {
    height: var(--space-2);
}
.h-4 {
    height: var(--space-4);
}
.h-6 {
    height: var(--space-6);
}
.h-7 {
    height: var(--space-7);
}
.h-8 {
    height: var(--space-8);
}
.h-9 {
    height: var(--space-9);
}
.h-px {
    height: 1px;
}
.min-h-screen {
    min-height: 100vh;
}
.w-1\.5 {
    width: var(--space-1-5);
}
.w-11\/12 {
    width: 91.666667%;
}
.w-2 {
    width: var(--space-2);
}
.w-2\/3 {
    width: 66.666667%;
}
.w-24 {
    width: var(--space-24);
}
.w-3\/4 {
    width: 75%;
}
.w-4 {
    width: var(--space-4);
}
.w-4\/5 {
    width: 80%;
}
.w-6 {
    width: var(--space-6);
}
.w-7 {
    width: var(--space-7);
}
.w-8 {
    width: var(--space-8);
}
.w-9 {
    width: var(--space-9);
}
.w-full {
    width: 100%;
}
.min-w-0 {
    min-width: 0;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-6xl {
    max-width: var(--container-wide);
}
.flex-1 {
    flex: 1 1 0%;
}
.shrink-0 {
    flex-shrink: 0;
}
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.content-start {
    align-content: flex-start;
}
.items-start {
    align-items: flex-start;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-1 {
    gap: var(--space-1);
}
.gap-1\.5 {
    gap: var(--space-1-5);
}
.gap-2 {
    gap: var(--space-2);
}
.gap-2\.5 {
    gap: var(--space-2-5);
}
.gap-3 {
    gap: var(--space-3);
}
.gap-4 {
    gap: var(--space-4);
}
.gap-6 {
    gap: var(--space-6);
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(-1 * var(--space-2)) * var(--tw-space-x-reverse));
    margin-left: calc(calc(-1 * var(--space-2)) * (1 - var(--tw-space-x-reverse)));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--space-1-5) * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--space-1-5) * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--space-2) * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--space-2) * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--space-2-5) * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--space-2-5) * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--space-4) * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--space-4) * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--space-5) * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--space-5) * var(--tw-space-y-reverse));
}
.overflow-hidden,
.truncate {
    overflow: hidden;
}
.truncate {
    text-overflow: ellipsis;
}
.truncate,
.whitespace-nowrap {
    white-space: nowrap;
}
.rounded {
    border-radius: var(--radius-sm);
}
.rounded-2xl {
    border-radius: var(--radius-2xl);
}
.rounded-3xl {
    border-radius: var(--radius-3xl);
}
.rounded-full {
    border-radius: var(--radius-full);
}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.rounded-md {
    border-radius: var(--radius-md);
}
.rounded-xl {
    border-radius: var(--radius-xl);
}
.border {
    border-width: 1px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(var(--palette-gray-100) / var(--tw-border-opacity, 1));
}
.border-gray-50 {
    --tw-border-opacity: 1;
    border-color: rgb(var(--palette-gray-50) / var(--tw-border-opacity, 1));
}
.border-white\/10 {
    border-color: rgb(var(--palette-white) / 0.102);
}
.bg-black\/30 {
    background-color: rgb(var(--palette-black) / 0.302);
}
.bg-black\/50 {
    background-color: rgb(var(--palette-black) / 0.502);
}
.bg-emerald-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-emerald-500) / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-100) / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-50) / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/60 {
    background-color: rgb(var(--palette-gray-50) / 0.6);
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-800) / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-900) / var(--tw-bg-opacity, 1));
}
.bg-gray-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-950) / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-red-500) / var(--tw-bg-opacity, 1));
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-white) / var(--tw-bg-opacity, 1));
}
.bg-white\/15 {
    background-color: rgb(var(--palette-white) / 0.149);
}
.bg-gradient-to-br {
    background-image: linear-gradient(
        to bottom right,
        var(--tw-gradient-stops)
    );
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/\[0\.07\] {
    --tw-gradient-from: rgb(var(--palette-white) / 0.07) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--palette-white) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-gray-200 {
    --tw-gradient-to: rgb(var(--palette-gray-200) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops:
        var(--tw-gradient-from), var(--color-border) var(--tw-gradient-via-position),
        var(--tw-gradient-to);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white\/\[0\.02\] {
    --tw-gradient-to: rgb(var(--palette-white) / 0.02) var(--tw-gradient-to-position);
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.p-1\.5 {
    padding: var(--space-1-5);
}
.p-2 {
    padding: var(--space-2);
}
.p-2\.5 {
    padding: var(--space-2-5);
}
.p-3 {
    padding: var(--space-3);
}
.p-4 {
    padding: var(--space-4);
}
.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}
.px-1\.5 {
    padding-left: var(--space-1-5);
    padding-right: var(--space-1-5);
}
.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}
.py-0\.5 {
    padding-top: var(--space-0-5);
    padding-bottom: var(--space-0-5);
}
.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}
.py-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}
.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
.py-24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}
.py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
.pb-1 {
    padding-bottom: var(--space-1);
}
.pb-28 {
    padding-bottom: var(--space-28);
}
.pt-2 {
    padding-top: var(--space-2);
}
.pt-36 {
    padding-top: var(--space-36);
}
.text-center {
    text-align: center;
}
.font-mono {
    font-family:
        var(--font-mono);
}
.font-sans {
    font-family: var(--font-sans);
}
.text-2xl {
    font-size: var(--font-size-2xl);
    line-height: var(--space-8);
}
.text-8xl {
    font-size: var(--font-size-display);
    line-height: 1;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[7px\] {
    font-size: 7px;
}
.text-\[8px\] {
    font-size: 8px;
}
.text-\[9px\] {
    font-size: 9px;
}
.text-base {
    font-size: var(--font-size-base);
    line-height: var(--space-6);
}
.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--space-7);
}
.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--space-5);
}
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--space-4);
}
.font-black {
    font-weight: var(--font-weight-black);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semibold {
    font-weight: var(--font-weight-semibold);
}
.uppercase {
    text-transform: uppercase;
}
.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
        var(--tw-numeric-figure) var(--tw-numeric-spacing)
        var(--tw-numeric-fraction);
}
.leading-none {
    line-height: 1;
}
.leading-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-tight {
    letter-spacing: var(--tracking-tight);
}
.tracking-tighter {
    letter-spacing: var(--tracking-display);
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-emerald-600) / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-300) / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-400) / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-500) / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-700) / var(--tw-text-opacity, 1));
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-800) / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-900) / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-white) / var(--tw-text-opacity, 1));
}
.text-white\/50 {
    color: rgb(var(--palette-white) / 0.502);
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.shadow-2xl {
    --tw-shadow: var(--shadow-2xl);
}
.shadow-2xl,
.shadow-sm {
    box-shadow:
        var(--tw-ring-offset-shadow, 0 0 rgb(var(--palette-black) / 0)),
        var(--tw-ring-shadow, 0 0 rgb(var(--palette-black) / 0)), var(--tw-shadow);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
        var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
        calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
        var(--tw-shadow, 0 0 rgb(var(--palette-black) / 0));
}
.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--palette-white) / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
    --tw-ring-color: rgb(var(--palette-white) / 0.1);
}
.transition-colors {
    transition-property:
        color, background-color, border-color, text-decoration-color, fill,
        stroke;
    transition-timing-function: var(--ease-standard);
}
.duration-150,
.transition-colors {
    transition-duration: var(--duration-fast);
}

.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--palette-gray-50) / var(--tw-bg-opacity, 1));
}
.hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-600) / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--palette-gray-900) / var(--tw-text-opacity, 1));
}

/* Static mockup colors and animation offsets. */
.mock-accent-chip {
    color: rgb(var(--ui-accent-rgb));
    background-color: rgb(var(--ui-accent-rgb) / 0.1);
}
.mock-accent-chip-soft {
    color: rgb(var(--ui-accent-rgb));
    background-color: rgb(var(--ui-accent-rgb) / 0.08);
}
.mock-accent-bg {
    background-color: rgb(var(--ui-accent-rgb));
}
.mock-active-chip {
    color: rgb(255, 255, 255);
    background-color: rgb(var(--ui-accent-rgb));
}
.mock-muted-chip {
    color: rgb(107, 114, 128);
    background-color: rgb(243, 244, 246);
}
.mock-translucent-bg {
    background-color: rgba(255, 255, 255, 0.15);
}
.mock-cursor-position {
    top: 40%;
    left: 55%;
}
.mock-delay-0 {
    animation-delay: 0s;
}
.mock-delay-0-15 {
    animation-delay: 0.15s;
}
.mock-delay-0-2 {
    animation-delay: 0.2s;
}
.mock-delay-0-3 {
    animation-delay: 0.3s;
}
.mock-delay-0-4 {
    animation-delay: 0.4s;
}
.mock-delay-0-45 {
    animation-delay: 0.45s;
}
.mock-delay-0-6 {
    animation-delay: 0.6s;
}
.mock-delay-0-8 {
    animation-delay: 0.8s;
}

/* css/responsive.css */
@media (min-width: 640px) {
    .sm\:inset-5 {
        inset: var(--space-5);
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:p-5 {
        padding: var(--space-5);
    }
}

/* design-system/components.css */
/* Shared UI components consume the design-system tokens. */
.ui-container {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
}

.ui-container--content {
    max-width: var(--container-content);
}

.ui-section {
    padding: var(--section-space) var(--page-gutter);
}

.ui-section-heading {
    text-align: center;
    margin-bottom: var(--space-14);
}

.ui-section-heading h2 {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--space-9);
}

.ui-section-heading p {
    color: var(--color-text-muted);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-icon {
    width: var(--icon-size, 18px);
    height: var(--icon-size, 18px);
    flex-shrink: 0;
}

.ui-brand-mark {
    width: var(--brand-width, 28px);
    height: var(--brand-height, 21px);
    color: var(--color-brand);
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    padding: var(--space-3-5) var(--space-7);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--space-5);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.ui-button--primary {
    background: var(--color-text);
    color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ui-button--primary:hover {
    background: var(--color-text-secondary);
}

.ui-button--secondary {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.ui-button--secondary:hover {
    background: var(--color-surface-subtle);
    border-color: rgb(var(--palette-gray-300));
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2-5);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--space-4);
}

.ui-badge--generation {
    padding: var(--space-0-5) var(--space-1-5);
    color: var(--color-text-subtle);
}

.ui-badge--technology {
    padding: var(--space-1-5) var(--space-3-5);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--space-5);
}

.ui-badge--accent {
    background: rgb(var(--ui-accent-rgb) / 0.082);
    color: rgb(var(--ui-accent-rgb));
    font-weight: var(--font-weight-semibold);
}

.ui-dot {
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgb(var(--ui-accent-rgb));
}

.ui-dot--small {
    width: var(--space-1-5);
    height: var(--space-1-5);
}

.ui-avatar {
    width: var(--avatar-size, var(--space-8));
    height: var(--avatar-size, var(--space-8));
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface-muted);
    flex-shrink: 0;
}

.ui-avatar--profile {
    --avatar-size: var(--space-11);
    box-shadow: 0 0 0 2px var(--color-border-subtle);
}

.ui-member-card {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-4);
    border: 1px solid rgb(var(--ui-accent-rgb, var(--palette-gray-200)) / 0.19);
    border-radius: var(--radius-xl);
    background: rgb(var(--ui-accent-rgb) / 0.07);
}

.ui-member-card--profile {
    min-width: 200px;
    flex-shrink: 0;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    user-select: none;
}

.ui-member-card__name {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
}

.ui-member-card__generation {
    color: var(--color-text-subtle);
    font-size: var(--font-size-xs);
    line-height: var(--space-4);
}

.ui-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
}

.ui-card--interactive {
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.ui-card--interactive:hover {
    border-color: rgb(var(--palette-red-200));
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .ui-button, .ui-card--interactive {
        transition: none;
    }
}

/* css/site.css */
/* Site chrome shared by the landing page and development dashboard. */
.skip-link {
    position: fixed;
    inset: var(--space-3) auto auto var(--space-3);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

#main-content {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    background: rgb(var(--palette-white) / 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
}

.site-header__inner {
    height: var(--header-height);
    padding-inline: var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-footer {
    --brand-width: 22px;
    --brand-height: 16px;
}