:root,
html[data-theme="paper"] {
  --theme-bg: #fcf9f8;
  --theme-dot: #1b1b1c;
  --theme-nav: rgba(252, 249, 248, 0.76);
  --theme-surface-lowest: #ffffff;
  --theme-surface-low: #f6f3f2;
  --theme-surface: #f0eded;
  --theme-surface-high: #eae7e7;
  --theme-surface-highest: #e5e2e1;
  --theme-text: #1b1b1c;
  --theme-text-muted: #4e4634;
  --theme-primary: #765b00;
  --theme-primary-container: #e9b824;
  --theme-on-primary-container: #614a00;
  --theme-secondary: #2852c9;
  --theme-tertiary-fixed: #f5decd;
  --theme-outline: #807661;
  --theme-outline-variant: #d2c5ad;
  --theme-on-surface-inverse: #fcf9f8;
}

html[data-theme="midnight"] {
  --theme-bg: #17151a;
  --theme-dot: #f3eee4;
  --theme-nav: rgba(35, 30, 42, 0.82);
  --theme-surface-lowest: #201d24;
  --theme-surface-low: #27222c;
  --theme-surface: #2b2531;
  --theme-surface-high: #322c39;
  --theme-surface-highest: #3b3443;
  --theme-text: #f3eee4;
  --theme-text-muted: #c5bdb1;
  --theme-primary: #8eb1ff;
  --theme-primary-container: #8eb1ff;
  --theme-on-primary-container: #14213f;
  --theme-secondary: #8eb1ff;
  --theme-tertiary-fixed: #47394a;
  --theme-outline: #8f8478;
  --theme-outline-variant: #5a4f5d;
  --theme-on-surface-inverse: #17151a;
}

html[data-theme="rose"] {
  --theme-bg: #fff7fb;
  --theme-dot: #4d3844;
  --theme-nav: rgba(248, 223, 234, 0.82);
  --theme-surface-lowest: #fffdfd;
  --theme-surface-low: #fff0f6;
  --theme-surface: #fde7f0;
  --theme-surface-high: #f8dce8;
  --theme-surface-highest: #f1d0df;
  --theme-text: #35252f;
  --theme-text-muted: #765766;
  --theme-primary: #8b365f;
  --theme-primary-container: #f4b9d0;
  --theme-on-primary-container: #5d2741;
  --theme-secondary: #6f7de1;
  --theme-tertiary-fixed: #f8dce8;
  --theme-outline: #9b7e8b;
  --theme-outline-variant: #e6c8d5;
  --theme-on-surface-inverse: #fff7fb;
}

html[data-theme="sky"] {
  --theme-bg: #f5fbff;
  --theme-dot: #29465d;
  --theme-nav: rgba(216, 237, 248, 0.82);
  --theme-surface-lowest: #ffffff;
  --theme-surface-low: #edf8ff;
  --theme-surface: #e0f0fa;
  --theme-surface-high: #d2e7f5;
  --theme-surface-highest: #c2ddf0;
  --theme-text: #17364a;
  --theme-text-muted: #4f6d81;
  --theme-primary: #1e658b;
  --theme-primary-container: #a8d7ef;
  --theme-on-primary-container: #144865;
  --theme-secondary: #4e79d9;
  --theme-tertiary-fixed: #dceef8;
  --theme-outline: #7190a4;
  --theme-outline-variant: #c4dbe8;
  --theme-on-surface-inverse: #f5fbff;
}

html,
body {
  background-color: var(--theme-bg) !important;
}

body {
  color: var(--theme-text);
  background-image: radial-gradient(color-mix(in srgb, var(--theme-dot) 33%, transparent) 0.76px, transparent 0.76px) !important;
  background-color: var(--theme-bg) !important;
  background-size: 22.5px 22.5px !important;
}

.scribble-hover {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.scribble-hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 0.48em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M2 10.5c8-7.2 14 6.3 22 0 8-6.2 14 6.1 22 0 8-6.2 14 6.4 22 0 8-6.4 14 6.2 22 0 8-6.2 14 6.1 22 0' fill='none' stroke='%232852c9' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  opacity: 0;
  transform: scaleX(0.2) rotate(-1deg);
  transform-origin: left center;
  transition: opacity 200ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.scribble-hover:hover::after,
.scribble-hover:focus-visible::after {
  opacity: 1;
  transform: scaleX(1) rotate(-1deg);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem) rotate(var(--reveal-rotate, 0deg)) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(var(--reveal-rotate, 0deg)) scale(1);
  filter: blur(0);
}

[data-reveal="soft"] {
  transform: translateY(1.25rem) rotate(var(--reveal-rotate, 0deg)) scale(0.995);
}

[data-reveal="pop"] {
  transform: translateY(2.8rem) rotate(var(--reveal-rotate, 0deg)) scale(0.96);
}

.site-nav {
  background: var(--theme-nav) !important;
}

.mobile-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.24rem;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--theme-text) 12%, transparent);
  background: color-mix(in srgb, var(--theme-surface-lowest) 84%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.mobile-nav-toggle-line {
  width: 1.05rem;
  height: 2px;
  margin: 0 auto;
  background: var(--theme-text);
}

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--theme-surface-lowest) 96%, var(--theme-bg));
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

.mobile-nav-panel[hidden] {
  display: none;
}

.mobile-nav-links {
  display: grid;
  gap: 0.45rem;
}

.mobile-nav-link {
  display: block;
  padding: 0.9rem 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-surface-low) 78%, transparent);
}

.mobile-nav-link-active {
  color: var(--theme-secondary) !important;
  background: color-mix(in srgb, var(--theme-primary-container) 16%, transparent);
}

.mobile-nav-contact {
  margin-top: 0.35rem;
  text-align: center;
}

.site-footer {
  border-color: color-mix(in srgb, var(--theme-text) 12%, transparent) !important;
}

.site-footer-meta {
  color: var(--theme-text) !important;
}

.site-footer-time-note {
  color: color-mix(in srgb, var(--theme-text) 68%, transparent) !important;
  font-family: "Gloria Hallelujah", "Permanent Marker", cursive;
  font-size: 0.86rem;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-2deg);
  max-width: 15rem;
}

.site-footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--theme-text) !important;
}

.site-footer-links [data-hover-note] {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-top: 0.4rem;
  margin-top: -0.4rem;
  padding-bottom: 0.4rem;
  margin-bottom: -0.4rem;
}

.site-footer-link-label {
  display: inline-flex;
  align-items: center;
  transition: transform 180ms ease, color 180ms ease;
  will-change: transform;
}

.site-footer-links [data-hover-note]::before,
.site-footer-links .site-footer-link-disabled::before {
  content: attr(data-hover-note);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  transform: translateX(-50%) rotate(-4deg);
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  font-family: "Gloria Hallelujah", "Permanent Marker", cursive;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-secondary) !important;
  background: color-mix(in srgb, var(--theme-surface-lowest) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}

.site-footer-links [data-hover-note]:hover::before,
.site-footer-links [data-hover-note]:focus-within::before,
.site-footer-links .site-footer-link-disabled:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px) rotate(-4deg);
}

.site-footer-x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer-x-mark {
  width: 1.1rem;
  height: 1.1rem;
  overflow: visible;
}

.site-footer-x-mark path {
  fill: currentColor;
}

.site-footer-links .site-footer-link-active {
  color: var(--theme-secondary) !important;
}

.site-footer-links a:hover {
  color: var(--theme-secondary) !important;
}

.site-footer-links a:hover .site-footer-link-label,
.site-footer-links a:focus-visible .site-footer-link-label {
  transform: translateY(-0.25rem);
}

.site-footer-links .site-footer-link-disabled {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--theme-text) 55%, transparent) !important;
  user-select: none;
  pointer-events: auto;
}

.site-footer-links .site-footer-link-disabled:hover {
  color: color-mix(in srgb, var(--theme-text) 55%, transparent) !important;
  transform: none !important;
}

.site-footer-links .site-footer-link-disabled::before {
  content: "currently in work!";
}

.site-footer-links .site-footer-link-disabled::after {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: rotate(-10deg);
  opacity: 0.95;
}

.theme-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.theme-picker-toggle {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--theme-text) 18%, transparent);
  background: var(--theme-primary-container);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.theme-picker-toggle:hover {
  transform: translateY(-2px);
}

.theme-picker-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  display: flex;
  gap: 0.55rem;
  padding: 0.7rem;
  background: var(--theme-surface-lowest);
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  box-shadow: 0 16px 36px rgba(0,0,0,0.14);
}

.theme-picker-panel[hidden] {
  display: none;
}

.theme-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.theme-swatch[aria-pressed="true"] {
  border-color: var(--theme-text);
}

.theme-swatch-paper { background: #e9b824; }
.theme-swatch-midnight { background: #8eb1ff; }
.theme-swatch-rose { background: #f4b9d0; }
.theme-swatch-sky { background: #a8d7ef; }

html[data-theme="midnight"] .theme-swatch[aria-pressed="true"] {
  border-color: #f3eee4;
}

[class~="bg-background"] { background-color: var(--theme-bg) !important; }
[class~="bg-surface-container-lowest"] { background-color: var(--theme-surface-lowest) !important; }
[class~="bg-surface-container-lowest/50"] { background-color: color-mix(in srgb, var(--theme-surface-lowest) 50%, transparent) !important; }
[class~="bg-surface-container-low"] { background-color: var(--theme-surface-low) !important; }
[class~="bg-surface-container"] { background-color: var(--theme-surface) !important; }
[class~="bg-surface-container-high"] { background-color: var(--theme-surface-high) !important; }
[class~="bg-surface-container-highest"] { background-color: var(--theme-surface-highest) !important; }
[class~="bg-primary-container"] { background-color: var(--theme-primary-container) !important; }
[class~="bg-primary-container/20"] { background-color: color-mix(in srgb, var(--theme-primary-container) 20%, transparent) !important; }
[class~="bg-primary-container/30"] { background-color: color-mix(in srgb, var(--theme-primary-container) 30%, transparent) !important; }
[class~="bg-primary-container/70"] { background-color: color-mix(in srgb, var(--theme-primary-container) 70%, transparent) !important; }
[class~="bg-tertiary-fixed/30"] { background-color: color-mix(in srgb, var(--theme-tertiary-fixed) 30%, transparent) !important; }
[class~="bg-on-surface"] { background-color: var(--theme-text) !important; }

[class~="text-on-surface-variant"] { color: var(--theme-text-muted) !important; }
[class~="text-on-surface"] { color: var(--theme-text) !important; }
[class~="text-on-background"] { color: var(--theme-text) !important; }
[class~="text-primary"] { color: var(--theme-primary) !important; }
[class~="text-secondary"] { color: var(--theme-secondary) !important; }
[class~="text-on-primary-container"] { color: var(--theme-on-primary-container) !important; }
[class~="text-on-primary"] { color: var(--theme-on-surface-inverse) !important; }
[class~="text-surface"] { color: var(--theme-on-surface-inverse) !important; }
[class~="text-on-surface/10"] { color: color-mix(in srgb, var(--theme-text) 10%, transparent) !important; }
[class~="text-on-surface/20"] { color: color-mix(in srgb, var(--theme-text) 20%, transparent) !important; }
[class~="text-on-surface/25"] { color: color-mix(in srgb, var(--theme-text) 25%, transparent) !important; }
[class~="text-on-surface/60"] { color: color-mix(in srgb, var(--theme-text) 60%, transparent) !important; }
[class~="text-on-surface-variant/60"] { color: color-mix(in srgb, var(--theme-text-muted) 60%, transparent) !important; }
[class~="text-on-surface-variant/70"] { color: color-mix(in srgb, var(--theme-text-muted) 70%, transparent) !important; }
[class~="text-on-surface-variant/80"] { color: color-mix(in srgb, var(--theme-text-muted) 80%, transparent) !important; }

[class~="border-outline"] { border-color: var(--theme-outline) !important; }
[class~="border-outline/20"] { border-color: color-mix(in srgb, var(--theme-outline) 20%, transparent) !important; }
[class~="border-outline/30"] { border-color: color-mix(in srgb, var(--theme-outline) 30%, transparent) !important; }
[class~="border-outline-variant"] { border-color: var(--theme-outline-variant) !important; }
[class~="border-outline-variant/20"] { border-color: color-mix(in srgb, var(--theme-outline-variant) 20%, transparent) !important; }
[class~="border-outline-variant/30"] { border-color: color-mix(in srgb, var(--theme-outline-variant) 30%, transparent) !important; }
[class~="border-outline-variant/10"] { border-color: color-mix(in srgb, var(--theme-outline-variant) 10%, transparent) !important; }
[class~="border-primary-container"] { border-color: var(--theme-primary-container) !important; }

[class*="text-[#1b1b1c]"],
[class*="text-\\[\\#1b1b1c\\]"],
[class*="text-[#2e2e2f]"],
[class*="text-\\[\\#2e2e2f\\]"] {
  color: var(--theme-text) !important;
}

[class*="placeholder:text-on-surface/20"]::placeholder,
[class*="placeholder:text-\\[on-surface\\/20\\]"]::placeholder {
  color: color-mix(in srgb, var(--theme-text) 20%, transparent) !important;
}

[class*="placeholder:text-on-surface/25"]::placeholder,
[class*="placeholder:text-\\[on-surface\\/25\\]"]::placeholder {
  color: color-mix(in srgb, var(--theme-text) 25%, transparent) !important;
}

.tape-effect {
  background-color: color-mix(in srgb, var(--theme-tertiary-fixed) 76%, transparent) !important;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(1);
  background: color-mix(in srgb, var(--theme-secondary) 88%, white 12%);
  border: 1.5px solid color-mix(in srgb, var(--theme-bg) 38%, var(--theme-secondary));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-bg) 60%, transparent),
    0 10px 28px color-mix(in srgb, var(--theme-secondary) 22%, transparent);
  transition:
    opacity 160ms ease,
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: multiply;
}

.cursor-dot.is-visible {
  opacity: 0.92;
}

.cursor-dot.is-hovering {
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--theme-primary-container) 72%, transparent);
  border-color: color-mix(in srgb, var(--theme-secondary) 70%, var(--theme-primary));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-bg) 68%, transparent),
    0 14px 34px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.cursor-dot.is-pressed {
  width: 22px;
  height: 22px;
}

html[data-theme="midnight"] .cursor-dot {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(23, 21, 26, 0.35),
    0 10px 28px rgba(255, 255, 255, 0.14);
  mix-blend-mode: screen;
}

html[data-theme="midnight"] .cursor-dot.is-hovering {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px rgba(23, 21, 26, 0.5),
    0 14px 34px rgba(255, 255, 255, 0.18);
}

html.has-dot-cursor,
html.has-dot-cursor body,
html.has-dot-cursor a,
html.has-dot-cursor button,
html.has-dot-cursor summary,
html.has-dot-cursor label[for],
html.has-dot-cursor [role="button"] {
  cursor: none !important;
}

html.has-dot-cursor input,
html.has-dot-cursor textarea,
html.has-dot-cursor select,
html.has-dot-cursor [contenteditable="true"] {
  cursor: text !important;
}

html.has-dot-cursor [data-native-cursor] {
  cursor: auto !important;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot {
    display: none !important;
  }

  html.has-dot-cursor,
  html.has-dot-cursor body,
  html.has-dot-cursor a,
  html.has-dot-cursor button,
  html.has-dot-cursor summary,
  html.has-dot-cursor label[for],
  html.has-dot-cursor [role="button"] {
    cursor: auto !important;
  }
}

@media (max-width: 767px) {
  .site-nav {
    padding: 0.85rem 1rem !important;
  }

  .site-footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .site-footer-time-note {
    max-width: none;
    transform: rotate(-1deg);
  }

  .site-footer-links {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.85rem;
    column-gap: 1rem;
  }

  .site-footer-links a,
  .site-footer-links .site-footer-link-disabled,
  .theme-picker-toggle {
    min-height: 2.25rem;
  }

  .theme-picker-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .site-footer-links [data-hover-note]::before,
  .site-footer-links .site-footer-link-disabled::before {
    display: none !important;
  }
}