:root {
  /* Light mode (default) */
  --background: oklch(98.5% 0.003 228.8);
  --foreground: oklch(14.8% 0.004 228.8);
  --primary: oklch(76.9% 0.188 70.08);
  --primary-foreground: oklch(42% 0.18 70.08);
  --muted: oklch(93% 0.006 286.033);
  --muted-foreground: oklch(21.8% 0.008 223.9);
  --border: oklch(0 0 0 / 12%);

  --red: oklch(70.4% 0.191 22.216);
  --blue: oklch(54.6% 0.245 262.881);
  --green: oklch(62.7% 0.194 149.214);

  --bp-sm: 40rem;   /* 640px  - large phones */

  --font-sans: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SF Mono, SF Mono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;

  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Crect x='0' y='0' width='24' height='24' fill='none' stroke='none'/%3E%3Cpath d='M20 15.4961C20 19.7938 16.9692 23 12.1057 23C7.10132 23 4 19.862 4 15.4961C4 12.6651 5.40969 10.6527 6.92511 9.59535C7.91189 8.87907 9.88546 8.02636 12 8.02636H12.1057L5.62115 3.14884V1H17.3216V2.87597H8.37004L16.511 8.98139C19.1189 10.9256 20 12.938 20 15.4961ZM18.0617 15.5302C18.0617 13.7907 16.9692 9.83411 12.0352 9.83411C8.22907 9.83411 5.93833 12.5287 5.93833 15.5302C5.93833 18.1566 7.94714 21.124 12.0705 21.124C15.5595 21.124 18.0617 18.7705 18.0617 15.5302Z' fill='currentColor' stroke='currentColor'/%3E%3C/svg%3E%0A");
  --github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Myna UI Icons by Praveen Juge - https://github.com/praveenjuge/mynaui-icons/blob/main/LICENSE --%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M3.5 15.668q.675.081 1 .618c.326.537 1.537 2.526 2.913 2.526H9.5m5.672-3.513q.823 1.078.823 1.936V21m-5.625-5.609q-.87.954-.869 1.813V21'/%3E%3Cpath d='M15.172 15.299c1.202-.25 2.293-.682 3.14-1.316c1.448-1.084 2.188-2.758 2.188-4.411c0-1.16-.44-2.243-1.204-3.16c-.425-.511.819-3.872-.286-3.359c-1.105.514-2.725 1.198-3.574.947c-.909-.268-1.9-.416-2.936-.416c-.9 0-1.766.111-2.574.317c-1.174.298-2.296-.363-3.426-.848c-1.13-.484-.513 3.008-.849 3.422C4.921 7.38 4.5 8.44 4.5 9.572c0 1.653.895 3.327 2.343 4.41c.965.722 2.174 1.183 3.527 1.41'/%3E%3C/g%3E%3C/svg%3E");
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Myna UI Icons by Praveen Juge - https://github.com/praveenjuge/mynaui-icons/blob/main/LICENSE --%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19 4l-5.93 6.93M5 20l5.93-6.93m0 0l5.795 6.587c.19.216.483.343.794.343h1.474c.836 0 1.307-.85.793-1.435L13.07 10.93m-2.14 2.14L4.214 5.435C3.7 4.85 4.17 4 5.007 4h1.474c.31 0 .604.127.794.343l5.795 6.587'/%3E%3C/svg%3E");
  --sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Simple Icons by Simple Icons Collaborators - https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md --%3E%3Cpath fill='currentColor' d='M7.387 13.656c0 1.423-.933 2.454-2.823 2.675c-1.35.147-3.337-.025-4.294-.148c-.025-.147-.074-.343-.074-.49c0-1.252.663-1.522 1.3-1.522c.664 0 1.694.123 2.455.123c.834 0 1.104-.295 1.104-.565c0-.368-.343-.515-1.006-.638l-1.767-.343C.785 12.453 0 11.423 0 10.343c0-1.325.933-2.454 2.798-2.65c1.398-.148 3.116.024 4.049.122c.024.172.049.32.049.491c0 1.252-.663 1.522-1.276 1.522c-.491 0-1.227-.099-2.086-.099c-.884 0-1.227.246-1.227.54c0 .32.343.442.883.54l1.718.32c1.742.294 2.479 1.3 2.479 2.527m3.092 1.521c0 .761-.295 1.203-1.792 1.203c-.196 0-.368-.025-.54-.05V6.22c0-.76.27-1.57 1.767-1.57c.196 0 .393.024.565.049zm6.085 3.927c.197.098.59.22 1.105.245c.859.025 1.325-.319 1.693-1.08L24 7.913a2.5 2.5 0 0 0-.957-.22c-.589 0-1.399.122-1.914 1.325l-1.497 3.534l-2.945-4.81c-.196-.05-.662-.148-1.006-.148c-1.03 0-1.62.393-2.233 1.031l-2.871 3.141l2.306 3.632c.418.663.982 1.006 1.89 1.006c.589 0 1.104-.147 1.325-.245l-2.773-4.196l1.963-2.086l3.24 5.08Z'/%3E%3C/svg%3E");
  --rolls-royce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Simple Icons by Simple Icons Collaborators - https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md --%3E%3Cpath fill='currentColor' d='M13.363 3.663H9.961v6.865q-.615.295-1.341.511a8 8 0 0 1-.776.182V3.968s.06-1.041-.519-1.393v-.13h5.434c.244.297.463.697.604 1.218m.958 9.391c2.465-1.182 3.652-3.262 3.674-5.646c.015-1.622-.557-2.618-1.197-3.148a2 2 0 0 0-.117-.089a6.5 6.5 0 0 0-.612-1.618q.178.026.324.057c1.788.38 3.225 1.436 3.905 3.474c.554 1.662.285 3.724-.904 5.377c-.281.391-1.03 1.226-1.89 1.842c-.156.112-.25.174-.414.277c1.077 1.726 1.608 2.717 2.295 4.6c.6 1.644 1.055 3.83 1.117 4.344c.15 1.223.515 1.32.599 1.345V24h-4.295v-.13c.132-.07 1.293-.546 1.299-2.367c.006-1.337-.32-2.808-.914-4.46a23 23 0 0 0-1.277-2.829l-.014-.021a8 8 0 0 1-.872.321c-.223-.516-.45-.983-.707-1.459zm-4.36-.144v1.116c.325-.014 1.34-.096 2.254-.274c.207.468.387.912.511 1.257l.017.048a26 26 0 0 1-1.23.166a33 33 0 0 1-1.552.131v7.21c0 .159.037 1.008.59 1.306V24H7.254v-.13c.538-.283.59-1.147.59-1.305v-9.27a19 19 0 0 0 2.118-.385zm.457-11.66l-.462-.007H5.662v10.575c.426-.019 2.013-.152 3.052-.46c3.465-1.025 5.12-3.447 5.146-6.293c.015-1.655-.568-2.672-1.222-3.212c-.407-.337-.946-.496-1.338-.554c-.22-.044-.71-.05-.882-.05zM3.502 20.557V1.554S3.564.492 2.972.133V0h7.346c.613.001 1.415.063 1.907.17c1.824.387 3.291 1.464 3.985 3.544c.565 1.696.291 3.8-.922 5.487c-.287.4-1.05 1.25-1.93 1.88a7 7 0 0 1-.422.281c1.1 1.762 1.641 2.773 2.343 4.695c.612 1.677 1.076 3.909 1.14 4.432c.151 1.248.525 1.374.61 1.4v.132h-4.382l-.001-.133c.136-.072 1.32-.583 1.326-2.442c.007-1.363-.326-2.865-.932-4.55a23 23 0 0 0-1.305-2.887l-.014-.022c-.582.265-1.812.624-2.61.775c-.571.108-1.15.197-1.865.277c-.623.07-1.227.111-1.584.134v7.384c0 .161.038 1.028.603 1.332v.132H2.9v-.132c.549-.29.603-1.17.603-1.332Z'/%3E%3C/svg%3E");
  --rl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='1em' height='1em' viewBox='0 0 34 30'%3E%3Cpath fill='currentColor' d='M13.219 4.632 0 0v30l18.885-3.751V7.546l12.277-3.857v22.81l-9.45-2.354v2.807L34 30V0L16.052 5.624V24L2.828 26.639V3.789l10.39 3.65z'/%3E%3C/svg%3E");
  --steam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Lineicons by Lineicons - https://github.com/LineiconsHQ/Lineicons/blob/main/LICENSE.md --%3E%3Cpath fill='currentColor' d='M11.968 2C6.767 2 2.4 6.045 2.048 11.181l5.329 2.216c.45-.322.995-.45 1.573-.45h.128l2.344-3.5v-.031a3.74 3.74 0 0 1 3.756-3.756c2.087 0 3.788 1.67 3.788 3.756a3.74 3.74 0 0 1-3.756 3.756h-.096l-3.403 2.44v.128a2.863 2.863 0 0 1-2.857 2.857c-1.349 0-2.536-.995-2.761-2.247l-3.724-1.637C3.557 18.886 7.44 22 11.968 22c5.49-.032 9.984-4.494 9.984-10.016S17.457 2 11.968 2'/%3E%3Cpath fill='currentColor' d='m8.276 17.152l-1.22-.481c.225.45.578.867 1.092 1.027c1.027.45 2.311-.032 2.76-1.123a2.07 2.07 0 0 0 0-1.638a2.26 2.26 0 0 0-1.123-1.187c-.514-.225-1.027-.193-1.54-.033l1.251.546c.77.353 1.188 1.252.867 2.023c-.353.802-1.252 1.155-2.087.866m9.502-7.736c0-1.349-1.124-2.536-2.536-2.536c-1.349 0-2.536 1.123-2.536 2.536c0 1.412 1.188 2.536 2.536 2.536s2.536-1.156 2.536-2.536m-4.366 0c0-1.027.867-1.862 1.862-1.862c1.027 0 1.862.867 1.862 1.862c0 1.027-.867 1.862-1.862 1.862c-1.027.032-1.862-.835-1.862-1.862'/%3E%3C/svg%3E");
  --globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols Light by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='M12 20q.45 0 .863-.05t.837-.15L12.5 18H9v-1q0-.825.588-1.412T11 15h2v-3h-2q-.425 0-.712-.288T10 11V9h-.45q-.65 0-1.1-.437T8 7.475q0-.225.063-.45T8.25 6.6L9.8 4.325Q7.275 5.05 5.637 7.15T4 12h1v-1q0-.425.288-.712T6 10h2q.425 0 .713.288T9 11v1q0 .425-.288.713T8 13v1q0 .825-.587 1.413T6 16h-.925q1.05 1.8 2.875 2.9T12 20m7.6-5.55q.2-.575.3-1.187T20 12q0-2.8-1.7-4.937T14 4.25V7q.825 0 1.413.588T16 9v2q.475 0 .85.113t.725.462zM12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709'/%3E%3C/svg%3E");
  --weather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Fluent UI System Icons by Microsoft Corporation - https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE --%3E%3Cpath fill='currentColor' d='M13.002 7.009c3.168 0 4.966 2.097 5.227 4.63h.08a3.687 3.687 0 0 1 3.692 3.683a3.687 3.687 0 0 1-3.692 3.682H7.694a3.687 3.687 0 0 1-3.692-3.682a3.687 3.687 0 0 1 3.692-3.683h.08c.263-2.55 2.06-4.63 5.228-4.63M10 4c1.617 0 3.05.815 3.9 2.062a8 8 0 0 0-.898-.053c-2.994 0-5.171 1.677-5.937 4.213l-.068.24l-.058.238l-.206.039a4.68 4.68 0 0 0-3.449 3.045a3.282 3.282 0 0 1 1.812-5.881l.257-.006A4.72 4.72 0 0 1 10 4'/%3E%3C/svg%3E");
}


/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(14.8% 0.004 228.8);
    --foreground: oklch(96.3% 0.002 197.1);
    --primary: oklch(87.9% 0.169 91.605);
    --primary-foreground: oklch(76.9% 0.188 70.08);
    --muted: oklch(27.4% 0.006 286.033);
    --muted-foreground: oklch(72.3% 0.014 214.4);
    --border: oklch(1 0 0 / 10%);

    --red: oklch(70.4% 0.191 22.216);
    --blue: oklch(70.7% 0.165 254.624);
    --green: oklch(79.2% 0.209 151.711);

    color-scheme: dark light;
  }
}

.light {
  --background: oklch(98.5% 0.003 228.8);
  --foreground: oklch(14.8% 0.004 228.8);
  --primary: oklch(76.9% 0.188 70.08);
  --primary-foreground: oklch(42% 0.18 70.08);
  --muted: oklch(93% 0.006 286.033);
  --muted-foreground: oklch(21.8% 0.008 223.9);
  --border: oklch(0 0 0 / 12%);

  --red: oklch(70.4% 0.191 22.216);
  --blue: oklch(54.6% 0.245 262.881);
  --green: oklch(62.7% 0.194 149.214);

  color-scheme: light dark;
}

.dark {
  --background: oklch(14.8% 0.004 228.8);
  --foreground: oklch(96.3% 0.002 197.1);
  --primary: oklch(87.9% 0.169 91.605);
  --primary-foreground: oklch(76.9% 0.188 70.08);
  --muted: oklch(27.4% 0.006 286.033);
  --muted-foreground: oklch(72.3% 0.014 214.4);
  --border: oklch(1 0 0 / 10%);

  --red: oklch(70.4% 0.191 22.216);
  --blue: oklch(70.7% 0.165 254.624);
  --green: oklch(79.2% 0.209 151.711);

  color-scheme: dark light;
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/s/static/fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('/s/static/fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/s/static/fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('/s/static/fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/s/static/fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('/s/static/fonts/poppins-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/s/static/fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('/s/static/fonts/poppins-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/s/static/fonts/source-code-pro-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  src: url('/s/static/fonts/source-code-pro-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  src: url('/s/static/fonts/source-code-pro-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: url('/s/static/fonts/source-code-pro-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* reset */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  font-family: var(--font-sans);
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* reset end */

html, body {
  color: var(--foreground);
  background-color: var(--background);
}

button.theme-switch {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 100%;
  border: 1px solid var(--muted-foreground);
  background: transparent;
  cursor: pointer;
  outline: 1px solid transparent;
  transition: outline-color 0.15s ease;

  &:hover {
    outline-color: var(--primary);
  }

  &.system {
    background: linear-gradient(to right, oklch(14.8% 0.004 228.8) 0%, oklch(14.8% 0.004 228.8) 50%, oklch(98.5% 0.003 228.8) 50%, oklch(98.5% 0.003 228.8) 100%);
  }
}

/* Page Layout */
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: var(--bp-sm);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-gap {
  gap: 4rem;
}

/* Hero Section */
.hero {
  padding-top: 3rem;
  animation: fadeInUp 0.6s ease-out;
}

.name {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(135deg, var(--foreground) 0%, var(--muted-foreground) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bio {
  margin-top: 4rem;
}

/* Site Header */
.site-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-header--narrow {
  margin-bottom: 2rem;
}

.site-header__brand {
  min-width: 0;
}

.site-header__title-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
}

.site-header__title-link:hover {
  color: var(--foreground);
  text-decoration: none;
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__title {
  font-size: clamp(1.2rem, 4vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.site-header__nav {
  padding-top: 0.75rem;
}

.site-header__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
}

.site-header__nav-link {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  color: var(--muted-foreground);
  padding: 0.25rem 0;
  font-family: var(--font-mono);
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.site-header__nav-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.intro {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  margin: 0;
}

/* Work Section */
.work-section {
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.sysmon-section {
  animation: fadeInUp 0.6s ease-out 0.25s both;
}

.sysmon-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
}

.sysmon-value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sysmon-label {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.sysmon-value {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--foreground);
}

.sysmon-chart {
  display: block;
  position: relative;
  height: 96px;
  border: 1px solid var(--border);
  background: oklch(from var(--muted) l c h / 0.16);

  --memory-line-color: var(--muted-foreground);
  --memory-area-color: oklch(from var(--muted-foreground) l c h / 0.08);
  --memory-line-width: 1.6;
  --cpu-line-color: var(--primary);
  --cpu-area-color: oklch(from var(--primary) l c h / 0.12);
  --cpu-line-width: 2;
}

.sysmon-chart .v-echart__container {
  position: absolute;
  inset: 0;
}

.section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.work-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.work-item:not(:last-child) {
  margin-bottom: 0.4rem;
}

.work-title {
  color: var(--muted-foreground);
}

.work-companies {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.separator {
  color: var(--muted-foreground);
  opacity: 0.5;
}

/* stats section */
.stats-section {
  animation: fadeInUp 0.6s ease-out 0.15s both;
  color: var(--muted-foreground);

  ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
  }
}

/* Links Section */
.links-section {
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.find-me {
  font-size: var(--text-base);
  color: var(--muted-foreground);
}

/* Link Styles */
a {
  color: var(--primary);
  text-decoration: none;
  position: relative;
  transition: text-decoration 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

.work-link {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  position: relative;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--foreground);
  border: 1px dashed var(--muted);
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.work-link:hover {
  color: var(--foreground);
  text-decoration: none;
  border-color: var(--muted-foreground);
}

.social-link {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  padding: 0.25rem 0.5rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.social-link:hover {
  color: var(--primary);
  border-color: oklch(from var(--primary) l c h / 0.3);
  background: oklch(from var(--primary) l c h / 0.05);
  text-decoration: none;
}

.icon {
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  background-color: currentColor;
  flex-shrink: 0;
}

.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

.icon-github {
  mask: var(--github) no-repeat;
  mask-size: 100% 100%;
}

.icon-x {
  mask: var(--x) no-repeat;
  mask-size: 100% 100%;
}

.icon-sky {
  mask: var(--sky) no-repeat;
  mask-size: 100% 100%;
}

.icon-rolls-royce {
  mask: var(--rolls-royce) no-repeat;
  mask-size: 100% 100%;
}

.icon-rl {
  mask: var(--rl) no-repeat;
  mask-size: 100% 100%;
}

/* Match visual padding of links with smaller icons to the larger Sky icon */
.work-link:has(.icon-rl),
.work-link:has(.icon-rolls-royce) {
  padding-block: 0.4375rem;
}

.icon-steam {
  mask: var(--steam) no-repeat;
  mask-size: 100% 100%;
}

.icon-weather {
  mask: var(--weather) no-repeat;
  mask-size: 100% 100%;
}

.icon-globe {
  mask: var(--globe) no-repeat;
  mask-size: 100% 100%;
}

.icon-logo {
  width: 1.5em;
  height: 1.5em;
  mask: var(--logo) no-repeat;
  mask-size: 100% 100%;
  background-color: var(--primary);
}

/* Pixel Grid */
.pixel-grid{
  display: flex;
  gap: 4px;
  animation: fadeInUp 0.6s ease-out 0.15s both;
}

.pixel-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  gap: 4px;
}

.pixel {
  width: 100%;
  aspect-ratio: 1/1;
  cursor: pointer;
}

.red {
  background: var(--red);
}
.blue {
  background: var(--blue);
}
.green {
  background: var(--green);
}

/* Footer */
.footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.page-container > .content-gap + .footer {
  animation: fadeInUp 0.6s ease-out 0.35s both;
}

.footer p {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 640px) {
  .page-container {
    padding: 1.5rem 1rem;
  }

  .content {
    gap: 3rem;
  }

  .hero {
    padding: 2rem 0;
  }

  .name {
    font-size: 2rem;
  }

  .intro {
    font-size: var(--text-base);
  }

  .work-link {
    font-size: var(--text-lg);
  }
}