:root {
  --theme-light-bg: #f4f4f4;
  --theme-dark-bg: #0d0e10;
  --theme-dark-surface: #17181b;
  --theme-dark-surface-raised: #202125;
  --theme-dark-text: #f2f2ef;
  --theme-dark-muted: rgba(242, 242, 239, 0.58);
  --theme-dark-line: rgba(255, 255, 255, 0.11);
}

.theme-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2000;
  display: grid;
  width: 68px;
  height: 38px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(16, 16, 18, 0.12);
  border-radius: 999px;
  background: rgba(244, 244, 242, 0.9);
  color: #676767;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  cursor: pointer;
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}

.theme-toggle__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  transition: color 260ms ease;
}

.theme-toggle__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1), background-color 260ms ease;
}

.theme-toggle[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(35, 36, 40, 0.9);
  color: #fff;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__thumb {
  background: #6fe4e8;
  transform: translateX(30px);
}

.theme-toggle:focus-visible {
  outline: 2px solid #6fe4e8;
  outline-offset: 3px;
}

@media (pointer: fine) {
  html,
  body,
  body * {
    cursor: none !important;
  }
}

.site-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3001;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(1px) saturate(160%) brightness(1.04);
  backdrop-filter: blur(1px) saturate(160%) brightness(1.04);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cursor-x, 0px) - 15px), calc(var(--cursor-y, 0px) - 15px), 0);
}

.site-cursor-dot.is-visible {
  opacity: 1;
}

html[data-theme="dark"] .site-cursor-dot {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
}

body:has(.cursor-replacement-tooltip.is-visible) .site-cursor-dot {
  opacity: 0;
}

.project-card-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.54rem 1.05rem;
  border-radius: 0.85rem;
  background: #6fe4e8;
  color: #102426;
  font-family: "SFMono-Light", "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translate3d(calc(var(--cursor-x, 0px) + 16px), calc(var(--cursor-y, 0px) + 16px), 0) scale(0.94);
  transform-origin: top left;
  transition: opacity 150ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
}

.project-card-tooltip::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.project-card-tooltip.is-visible {
  opacity: 1;
  transform: translate3d(calc(var(--cursor-x, 0px) + 16px), calc(var(--cursor-y, 0px) + 16px), 0) scale(1);
}

html[data-theme="dark"] body {
  background: var(--theme-dark-bg);
  color: var(--theme-dark-text);
}

/* Homepage */
html[data-theme="dark"] body.home-page {
  --bg: var(--theme-dark-bg);
  --text: var(--theme-dark-text);
  --muted: var(--theme-dark-muted);
  --line: var(--theme-dark-line);
  --dock: rgba(25, 26, 29, 0.88);
}

html[data-theme="dark"] .home-page .top-fade {
  background: linear-gradient(180deg, rgba(13, 14, 16, 0.97), rgba(13, 14, 16, 0));
}

html[data-theme="dark"] .home-page .nav-link span:nth-child(2) {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .home-page .intro-card,
html[data-theme="dark"] .home-page .intro-icon-fall {
  background: var(--theme-dark-surface);
}

html[data-theme="dark"] .home-page .deck-dock {
  border-color: var(--theme-dark-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .home-page .thumb-face {
  border-color: var(--theme-dark-bg);
}

html[data-theme="dark"] .home-page .thumb[data-target="1"] .thumb-face,
html[data-theme="dark"] .home-page .thumb[data-target="2"] .thumb-face,
html[data-theme="dark"] .home-page .thumb[data-target="4"] .thumb-face {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 3px 12px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .home-page .deck-card[data-card="0"],
html[data-theme="dark"] .home-page .deck-card[data-card="2"],
html[data-theme="dark"] .home-page .deck-card[data-card="4"] {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .home-page .deck-card[data-card="3"] {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .home-page .counter {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] .home-page .social-rail a {
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
}

/* Playground */
html[data-theme="dark"] body.playground-page {
  --playground-bg: var(--theme-dark-bg);
  --playground-text: var(--theme-dark-text);
  --playground-muted: var(--theme-dark-muted);
  --playground-line: var(--theme-dark-line);
  --playground-card: var(--theme-dark-surface);
  --playground-card-raised: var(--theme-dark-surface-raised);
  --card-gradient: rgba(23, 24, 27, 0.92);
  --nav-panel: var(--theme-dark-surface);
}

html[data-theme="dark"] .playground-page .top-fade {
  background: linear-gradient(180deg, rgba(13, 14, 16, 0.98), rgba(13, 14, 16, 0));
}

html[data-theme="dark"] .playground-page .nav-current {
  color: var(--theme-dark-muted);
}

html[data-theme="dark"] .playground-page .nav-chevron {
  filter: invert(1);
}

html[data-theme="dark"] .playground-page .project-card {
  box-shadow: inset 0 0 0 1px var(--theme-dark-line);
}

html[data-theme="dark"] .playground-page .project-card__media,
html[data-theme="dark"] .playground-page .preview-window__media {
  background: linear-gradient(145deg, #242529, #17181b);
}

html[data-theme="dark"] .playground-page .project-card[data-preview="fellou"],
html[data-theme="dark"] .playground-page .project-card[data-preview="fellou"] .project-card__media {
  background: #000;
}

html[data-theme="dark"] .playground-page .project-card[data-preview="fellou"] {
  border: 1px solid var(--theme-dark-line);
  box-shadow: inset 0 0 0 1px var(--theme-dark-line);
}

html[data-theme="light"] .playground-page .preview-window {
  border: 0;
}

html[data-theme="dark"] .playground-page .preview-window__control,
html[data-theme="dark"] .playground-page .preview-window__close {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .playground-page .preview-window__speed[aria-pressed="true"] {
  background: rgba(39, 156, 162, 0.94);
  box-shadow: inset 0 0 0 1px rgba(111, 228, 232, 0.92);
}

html[data-theme="dark"] .playground-page .project-preview::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .playground-page .preview-window__heading span {
  background: rgba(255, 255, 255, 0.08);
  color: var(--theme-dark-muted);
}

html[data-theme="dark"] .playground-page .preview-window__heading [data-preview-type] {
  color: #62c9f5;
}

/* About */
html[data-theme="light"] body.about-page,
html[data-theme="light"] body.project-page {
  background: #fff;
}

html[data-theme="light"] body.project-04-page {
  background: #f4f4f2;
}

html[data-theme="dark"] body.about-page {
  --foreground: var(--theme-dark-text);
  --secondary: #a7a4a0;
  --tertiary: #c7c3be;
  --panel: var(--theme-dark-surface);
  --line: var(--theme-dark-line);
}

html[data-theme="dark"] .about-page .nav-current {
  color: var(--theme-dark-muted);
}

html[data-theme="dark"] .about-page .nav-chevron,
html[data-theme="dark"] .project-page .nav-chevron {
  filter: invert(1);
}

html[data-theme="dark"] .about-page .tool-logo,
html[data-theme="dark"] .about-page .company-mark,
html[data-theme="dark"] .about-page .education-logo,
html[data-theme="dark"] .about-page .contact-pill {
  background: var(--theme-dark-surface-raised);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .about-page .toolbox-item[aria-label="GitHub"] .tool-logo,
html[data-theme="dark"] .about-page .toolbox-item[aria-label="Vercel"] .tool-logo,
html[data-theme="dark"] .about-page .toolbox-item[aria-label="Framer"] .tool-logo,
html[data-theme="dark"] .about-page .company-mark-dark-contrast {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 16px rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .about-page .toolbox-item[aria-label="Rive"] .tool-logo {
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 23, 23, 0.08);
}

html[data-theme="dark"] .about-page .award-mark-indigo {
  background: #fff;
}

html[data-theme="dark"] .about-page .contact-row {
  background: var(--theme-dark-surface);
}

html[data-theme="dark"] .about-page .hello-button {
  background: #f2f2ef;
  color: #111214;
}

html[data-theme="dark"] .about-page .hello-button .email-icon,
html[data-theme="dark"] .project-page .hello-button .email-icon {
  filter: brightness(0) saturate(100%);
}

html[data-theme="dark"] .about-page .contact-pill img {
  filter: none;
}

/* Case-study pages */
html[data-theme="dark"] body.project-page {
  --ink: var(--theme-dark-text);
  --muted: #a6a6a3;
  --line: #292b30;
  --stage: #f8f8f8;
}

html[data-theme="dark"] .project-01-page .brand-logo,
html[data-theme="dark"] .project-02-page .brand-logo {
  padding: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 16px rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .project-page .nav-pill,
html[data-theme="dark"] .project-page .cta-card,
html[data-theme="dark"] .project-page .audience,
html[data-theme="dark"] .project-page .callout {
  background: var(--theme-dark-surface);
}

html[data-theme="dark"] .project-page .nav-current,
html[data-theme="dark"] .project-page .intro-main p,
html[data-theme="dark"] .project-page .section-copy p,
html[data-theme="dark"] .project-page .section-copy ol,
html[data-theme="dark"] .project-page .two-up article > p,
html[data-theme="dark"] .project-page .learning p,
html[data-theme="dark"] .project-page .contact p,
html[data-theme="dark"] .project-page .audience figcaption,
html[data-theme="dark"] .project-page .callout p,
html[data-theme="dark"] .project-page .validation-list p {
  color: #c4c4c1;
}

html[data-theme="dark"] .project-page .audience b,
html[data-theme="dark"] .project-page .nav-current:hover,
html[data-theme="dark"] .project-page .section-nav a:hover,
html[data-theme="dark"] .project-page .section-nav a.active {
  color: var(--theme-dark-text);
}

html[data-theme="dark"] .project-02-page .intro-title,
html[data-theme="dark"] .project-02-page .intro-overview h2 {
  color: var(--theme-dark-text);
}

html[data-theme="dark"] .project-01-page .intro-title,
html[data-theme="dark"] .project-01-page .intro-overview h2,
html[data-theme="dark"] .project-03-page .intro-title,
html[data-theme="dark"] .project-03-page .intro-overview h2 {
  color: var(--theme-dark-text);
}

html[data-theme="dark"] .home-page .vibrant-selected-case{
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 34px rgba(255,255,255,.08)
}

html[data-theme="dark"] .project-02-page .intro-facts dd {
  color: var(--theme-dark-text);
}

html[data-theme="dark"] .project-01-page .intro-facts dd,
html[data-theme="dark"] .project-03-page .intro-facts dd {
  color: var(--theme-dark-text);
}

html[data-theme="dark"] .project-02-page .intro-kicker {
  color: var(--theme-dark-muted);
}

html[data-theme="dark"] .project-02-page .eyebrow,
html[data-theme="dark"] .project-02-page .intro-facts dt,
html[data-theme="dark"] .project-02-page .intro-overview-label,
html[data-theme="dark"] .project-02-page .chapter-break {
  color: #a7a7a7;
}

html[data-theme="dark"] .project-01-page .eyebrow,
html[data-theme="dark"] .project-01-page .intro-facts dt,
html[data-theme="dark"] .project-01-page .intro-overview-label,
html[data-theme="dark"] .project-01-page .intro-kicker,
html[data-theme="dark"] .project-01-page .chapter-break,
html[data-theme="dark"] .project-03-page .eyebrow,
html[data-theme="dark"] .project-03-page .intro-facts dt,
html[data-theme="dark"] .project-03-page .intro-overview-label,
html[data-theme="dark"] .project-03-page .intro-kicker,
html[data-theme="dark"] .project-03-page .chapter-break {
  color:#a7a7a7;
}

html[data-theme="dark"] .project-page .section-nav::before {
  background: linear-gradient(90deg, rgba(13, 14, 16, 0.98) 0%, rgba(13, 14, 16, 0.9) 64%, rgba(13, 14, 16, 0) 100%);
}

html[data-theme="dark"] .project-page .contact a,
html[data-theme="dark"] .project-page .hello-button,
html[data-theme="dark"] .project-page .to-top {
  background: #f2f2ef;
  color: #111214;
}

html[data-theme="dark"] .project-page .carousel-progress button {
  background: #41434a;
}

html[data-theme="dark"] .project-page .carousel-indicator {
  background: #f2f2ef;
}

html[data-theme="dark"] .project-02-page .solution-flow-video-placeholder {
  border-color: #555b62;
  background-color: #17191b;
  color: #a7acb2;
}

@media (max-width: 700px) {
  .theme-toggle {
    top: 16px;
    right: 12px;
    width: 52px;
    height: 30px;
    padding: 3px;
  }

  .theme-toggle__thumb {
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle__thumb {
    transform: translateX(24px);
  }

  .theme-toggle__icon {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__thumb,
  .theme-toggle__icon {
    transition: none;
  }
}