:root {
      color-scheme: light;
      --color-navy: #1A1B29;
      --color-navy-raised: #202231;
      --color-navy-card: #272938;
      --color-navy-deep: #141521;
      --color-warm-stone: #F2F0EC;
      --color-canvas: var(--color-warm-stone);
      --color-warm-stone-alt: #EAE9E5;
      --color-canvas-alt: var(--color-warm-stone-alt);
      --color-white: #FFFFFF;
      --color-surface: var(--color-white);
      --color-surface-hover: #F8F7F4;
      --color-text: #1A1B29;
      --color-text-muted: #596273;
      --color-text-inverse: #F7F5F2;
      --color-text-inverse-muted: #CBD0D7;
      --color-border: #D4D1CB;
      --color-border-dark: rgba(203, 208, 215, 0.18);
      --color-accent: #7FA6BC;
      --color-accent-hover: #9ABDD0;
      --color-accent-deep: #426A80;
      --color-icon: #343641;
      --color-social-surface: #1F2130;
      --color-status: #61D6A3;
      --color-sabor-cream: #F5E6C8;
    }
    html { 
      scroll-behavior: smooth; 
    }
    html, body { height: 100%; }
    body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }

    /**
     * Fit-to-Width Text Technique
     * Based on: https://kizu.dev/fit-to-width
     * Uses registered custom properties, container queries, and math functions
     * to make text fit the full width of its container
     */
    
    /* Registered custom properties for the fit-to-width technique */
    @property --captured-length {
      syntax: "<length>";
      initial-value: 0px;
      inherits: true;
    }

    @property --captured-length2 {
      syntax: "<length>";
      initial-value: 0px;
      inherits: true;
    }

    /* Main fit-to-width container */
    .text-fit {
      display: flex;
      width: 100%;
      container-type: inline-size;

      /* Support sentinel: 9999px when custom property is not registered, 0px when it is */
      --captured-length: initial;
      --support-sentinel: var(--captured-length, 9999px);
    }

    /* Hide the duplicated text from screen readers and visually */
    .text-fit > [aria-hidden] {
      visibility: hidden;
    }

    /* The visible text container */
    .text-fit > :not([aria-hidden]) {
      flex-grow: 1;
      container-type: inline-size;

      /* Capture the container's inline size as a custom property */
      --captured-length: 100cqi;
      --available-space: var(--captured-length);
    }

    .text-fit > :not([aria-hidden]) > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      
      /* Calculate the ratio: available space / (available space - captured length)
       * Using tan(atan2()) to calculate the scaling ratio
       */
      --ratio: tan(atan2(
        var(--available-space),
        var(--available-space) - var(--captured-length)
      ));
      
      /* Calculate font size with min and max bounds */
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px) - var(--support-sentinel)
      );
      
      inline-size: var(--available-space);
    }

    /* Apply to non-nested text-fit elements */
    .text-fit > :not([aria-hidden]) > *:not(.text-fit) {
      display: block;
      font-size: var(--font-size);

      /* Prevent text wrapping when container has width */
      @container (inline-size > 0) {
        white-space: nowrap;
      }
    }

    /* Handle nested text-fit for optical sizing support */
    .text-fit > :not([aria-hidden]) > *.text-fit {
      --captured-length2: var(--font-size);
      font-variation-settings:
        'opsz'
        tan(atan2(var(--captured-length2), 1px));
    }

    /* Skills colors are scoped explicitly, independent of surrounding themes. */
    #skills {
      background-color: var(--color-navy-raised);
      color: var(--color-text-inverse);
      border-top: 1px solid rgba(203, 208, 215, 0.12);
    }
    #skills h2 { color: var(--color-text-inverse); }
    #skills .theme-muted { color: var(--color-text-inverse-muted); }
    #skills .skill-icon {
      background-color: var(--color-navy-card);
      border-color: var(--color-border-dark);
      transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }
    #skills .skill-icon span { color: var(--color-text-inverse); }
    #skills .skill-icon img { filter: none; }
    #skills .skill-icon:hover {
      background-color: #292C3B;
      transform: translateY(-3px);
    }
    #skills .skill-icon-react:hover { border-color: #61DAFB66; }
    #skills .skill-icon-react:hover img { content: url("https://cdn.simpleicons.org/react/61DAFB"); }
    #skills .skill-icon-typescript:hover { border-color: #3178C666; }
    #skills .skill-icon-typescript:hover img { content: url("https://cdn.simpleicons.org/typescript/3178C6"); }
    #skills .skill-icon-js:hover { border-color: #F7DF1E66; }
    #skills .skill-icon-js:hover img { content: url("https://cdn.simpleicons.org/javascript/F7DF1E"); }
    #skills .skill-icon-html5:hover { border-color: #E34F2666; }
    #skills .skill-icon-html5:hover img { content: url("https://cdn.simpleicons.org/html5/E34F26"); }
    #skills .skill-icon-css:hover { border-color: #1572B666; }
    #skills .skill-icon-css:hover img { content: url("https://cdn.simpleicons.org/css/1572B6"); }
    #skills .skill-icon-git:hover { border-color: #F0503266; }
    #skills .skill-icon-git:hover img { content: url("https://cdn.simpleicons.org/git/F05032"); }
    #skills .skill-icon-github:hover { border-color: #FFFFFF66; }
    #skills .skill-icon-github:hover img { content: url("https://cdn.simpleicons.org/github/FFFFFF"); }
    #skills .skill-icon-vite:hover { border-color: #646CFF66; }
    #skills .skill-icon-vite:hover img { content: url("https://cdn.simpleicons.org/vite/646CFF"); }

    /* Semantic colors inherit the surrounding light or dark section context. */
    :root {
      --section-text: var(--color-text);
      --section-text-muted: var(--color-text-muted);
      --section-surface: var(--color-surface);
      --section-surface-hover: var(--color-surface-hover);
      --section-border: var(--color-border);
      --section-accent: var(--color-accent-deep);
    }
    html, body, .theme-page {
      background-color: var(--color-canvas);
      color: var(--color-text);
    }
    .theme-section { background-color: var(--color-canvas); }
    .theme-header {
      --section-text: var(--color-text-inverse);
      --section-text-muted: var(--color-text-inverse-muted);
      --section-surface: var(--color-navy-card);
      --section-surface-hover: var(--color-navy-card);
      --section-accent: var(--color-accent-hover);
      --section-border: var(--color-border-dark);
      background-color: var(--color-navy);
      color: var(--color-text-inverse);
      border-bottom: 1px solid rgba(203, 208, 215, 0.14);
    }
    .theme-surface:not(.skill-icon), .theme-muted-surface {
      background-color: var(--section-surface);
    }
    .theme-text { color: var(--section-text); }
    .theme-body, .theme-muted { color: var(--section-text-muted); }
    .theme-border { border-color: var(--section-border); }
    .theme-accent { color: var(--section-accent); }
    .theme-primary {
      background-color: var(--color-accent);
      color: var(--color-navy-deep);
    }
    .theme-primary-hover:hover { background-color: var(--color-accent-hover); }
    .theme-surface-hover:hover { background-color: var(--section-surface-hover); }
    .theme-link-hover:hover, a:not(.theme-primary):hover {
      color: var(--section-accent);
    }
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--section-accent);
      outline-offset: 4px;
    }
    ::selection { background-color: var(--color-accent); color: var(--color-navy-deep); }

    .theme-dark-section {
      --section-text: var(--color-text-inverse);
      --section-text-muted: var(--color-text-inverse-muted);
      --section-surface: var(--color-navy-raised);
      --section-surface-hover: var(--color-navy-raised);
      --section-border: var(--color-border-dark);
      --section-accent: var(--color-accent-hover);
      background-color: var(--color-navy-deep);
      color: var(--section-text);
    }
    .theme-dark-section .skill-icon img { filter: brightness(0) invert(1); }
    .theme-dark-section .skill-icon:hover { border-color: var(--color-accent-hover); }
    .theme-image-text { color: var(--color-text-inverse); }
    .project-sabor-cover { background-color: var(--color-sabor-cream); }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .skill-icon, .skill-icon img { transition: none; }
      .skill-icon:hover { transform: none; }
    }

    /* Homepage header and hero only: dark editorial framing. */
    .editorial-header, .editorial-hero {
      --section-text: var(--color-text-inverse);
      --section-text-muted: var(--color-text-inverse-muted);
      --section-surface: var(--color-navy-raised);
      --section-surface-hover: var(--color-navy-raised);
      --section-border: var(--color-border-dark);
      --section-accent: var(--color-accent-hover);
      background-color: var(--color-navy-deep);
      color: var(--color-text-inverse);
    }
    .editorial-hero {
      display: flow-root;
      padding-bottom: clamp(2rem, 4vw, 4rem);
    }
    .editorial-header .editorial-cta {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-navy-deep);
    }
    .editorial-header .editorial-cta:hover {
      background-color: var(--color-accent-hover);
      border-color: var(--color-accent-hover);
      color: var(--color-navy-deep);
    }
    .editorial-hero .editorial-portrait {
      border-radius: 10px;
      border-color: var(--color-border-dark);
      background-color: var(--color-navy-deep);
      isolation: isolate;
    }
    .editorial-portrait > img {
      filter: brightness(0.95) saturate(0.9);
    }
    .editorial-portrait-shade {
      background:
        linear-gradient(to top, var(--color-navy) 0%, rgba(26, 27, 41, 0.85) 10%, rgba(26, 27, 41, 0.25) 30%, transparent 55%),
        linear-gradient(to right, rgba(26, 27, 41, 0.48), transparent 22%, transparent 78%, rgba(26, 27, 41, 0.48)),
        linear-gradient(rgba(26, 27, 41, 0.035), rgba(26, 27, 41, 0.035));
    }
    .editorial-portrait .theme-image-text { text-shadow: none; filter: none; }
    .editorial-portrait .editorial-availability,
    .editorial-portrait p > span:first-child {
      color: var(--color-text-inverse-muted);
    }
    .editorial-availability::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 0.5rem;
      border-radius: 50%;
      background-color: var(--color-status);
      vertical-align: middle;
    }

    /* Section-specific palette, with existing geometry preserved. */
    #projects {
      --section-accent: var(--color-accent-hover);
      background-color: var(--color-navy-raised);
      color: var(--color-text-inverse);
    }
    #projects > div > div:first-child .theme-body,
    #projects > div > div:first-child .theme-muted {
      color: var(--color-text-inverse-muted);
    }
    #projects article {
      --section-text: var(--color-text-inverse);
      --section-text-muted: var(--color-text-inverse-muted);
      --section-surface: var(--color-navy-card);
      --section-border: var(--color-border-dark);
      --section-accent: var(--color-accent-hover);
      background-color: var(--color-navy-card);
      color: var(--color-text-inverse);
      transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
    }
    #projects article:hover {
      background-color: #292C3B;
      border-color: var(--color-accent);
      transform: translateY(-3px);
    }
    @media (prefers-reduced-motion: reduce) {
      #projects article { transition: none; }
      #projects article:hover { transform: none; }
    }
    #case-studies { background-color: var(--color-canvas); }
    .theme-header nav a:hover,
    .theme-header > div a:not(.editorial-cta):hover,
    .theme-header nav a:focus-visible {
      color: var(--color-accent-hover);
    }
    .theme-header nav a[aria-current] { color: var(--color-text-inverse); }
    .editorial-header { background-color: var(--color-navy); }
    a:not(.theme-primary):not(.editorial-cta):hover {
      text-decoration-color: var(--section-accent);
    }
    footer.theme-dark-section { background-color: var(--color-navy-deep); }
    footer .footer-social {
      background-color: var(--color-social-surface);
      border-color: var(--color-border-dark);
      color: var(--color-text-inverse-muted);
    }
    footer a.footer-social:hover {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-navy-deep);
    }
    .footer-social svg { display: block; }

    /* Local About colors never alter inverse text in other sections. */
    #about { background-color: var(--color-canvas); color: var(--color-text); }
    #about h2 { color: var(--color-text); }
    #about p.theme-body { color: #3F4858; }
    #about .theme-muted { color: var(--color-text-muted); }
    #about .theme-border { border-color: var(--color-border); }
    #about a[href="#projects"], #about a[href^="mailto:"], a.theme-project-button {
      transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
    }
    #about a[href="#projects"], a.theme-project-button {
      background-color: var(--color-navy);
      border-color: var(--color-navy);
      color: var(--color-text-inverse);
    }
    #about a[href="#projects"]:hover, a.theme-project-button:hover {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-navy-deep);
      transform: translateY(-2px);
    }
    #about a[href^="mailto:"] {
      background-color: transparent;
      border-color: #C8C6C1;
      color: var(--color-text);
    }
    #about a[href^="mailto:"]:hover {
      background-color: rgba(127, 166, 188, 0.14);
      border-color: var(--color-accent);
      color: var(--color-text);
    }
    @media (prefers-reduced-motion: reduce) {
      #skills .skill-icon, #about a[href="#projects"], #about a[href^="mailto:"], a.theme-project-button { transition: none; }
      #skills .skill-icon:hover, #about a[href="#projects"]:hover, a.theme-project-button:hover { transform: none; }
    }

    /* Keep an opaque fallback where backdrop filtering is unavailable. */
    @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
      .theme-header.is-scrolled {
        background-color: rgba(26, 27, 41, 0.8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
    }

    .project-screenshot-caption { background-color: var(--color-text-inverse-muted); }

    .screenshot-dialog {
      margin: auto;
      padding: 1rem;
      max-width: calc(100vw - 2rem);
      max-height: calc(100dvh - 2rem);
      overflow: auto;
      border: 1px solid var(--color-border-dark);
      border-radius: 10px;
      background: var(--color-navy-deep);
      color: var(--color-text-inverse);
    }
    .screenshot-dialog::backdrop { background: rgba(20, 21, 33, 0.85); }
    .screenshot-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
    .screenshot-dialog-toolbar h2 { font-size: 1rem; font-weight: 500; }
    .screenshot-dialog-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--color-border-dark); border-radius: 6px; background: var(--color-navy-raised); color: var(--color-text-inverse); font-size: 1.75rem; cursor: pointer; }
    .screenshot-dialog-close:hover { background: var(--color-accent); color: var(--color-navy-deep); }
    .screenshot-dialog-close:focus-visible { outline-color: var(--color-accent-hover); }
    #screenshot-dialog-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 9rem); margin: auto; object-fit: contain; }