/* ---------------------------------------------------------------------------
   Kartikay Saxena — portfolio
   Minimal, text-first design in the spirit of antfu.me.
--------------------------------------------------------------------------- */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --c-bg: #ffffff;
  --c-scrollbar: #eee;
  --c-scrollbar-hover: #bbb;
  --c-border: #7d7d7d4d;
  --c-faint: #8882;
  --c-accent: #e8734a;

  --fg-light: #888;
  --fg: #555;
  --fg-deep: #222;
  --fg-deeper: #000;

  --prose-max-width: 65ch;
  --nav-padding: 2rem;

  --font-sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  color-scheme: light;
}

html.dark {
  --c-bg: #050505;
  --c-scrollbar: #111;
  --c-scrollbar-hover: #222;

  --fg-light: #888;
  --fg: #bbb;
  --fg-deep: #ddd;
  --fg-deeper: #fff;

  color-scheme: dark;
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  position: relative;
  transition: background-color 0.3s ease;
}

::selection {
  background: #8884;
}

* {
  scrollbar-color: var(--c-scrollbar) var(--c-bg);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--c-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-scrollbar-hover);
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--fg-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Icons (CSS masks, currentColor) ------------------------------------ */

[class^="i-"],
[class*=" i-"] {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: -0.2em;
}

.i-lightbulb {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.973 18H11v-5h2v5h1.027c.132-1.202.745-2.193 1.74-3.277c.113-.122.832-.867.917-.973a6 6 0 1 0-9.37-.002c.086.107.807.853.918.974c.996 1.084 1.609 2.076 1.741 3.278M10 20v1h4v-1zm-4.246-5a8 8 0 1 1 12.49.002C17.624 15.774 16 17 16 18.5V21a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.5C8 17 6.375 15.774 5.754 15"/></svg>');
}
.i-briefcase {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 5V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM4 16v3h16v-3zm0-2h16V7H4zM9 3v2h6V3zm2 8h2v2h-2z"/></svg>');
}
.i-file {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 8v12.993A1 1 0 0 1 20.007 22H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995zm-2 1h-5V4H5v16h14zM8 7h3v2H8zm0 4h8v2H8zm0 4h8v2H8z"/></svg>');
}
.i-sun {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z"/></svg>');
}
.i-moon {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12"/></svg>');
}
.i-arrow-up {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M13 7.828V20h-2V7.828l-5.364 5.364l-1.414-1.414L12 4l7.778 7.778l-1.414 1.414z"/></svg>');
}
.i-github {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>');
}
.i-linkedin {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>');
}
.i-leetcode {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M13.483 0a1.37 1.37 0 0 0-.961.438L7.116 6.226l-3.854 4.126a5.3 5.3 0 0 0-1.209 2.104a5 5 0 0 0-.125.513a5.5 5.5 0 0 0 .062 2.362a6 6 0 0 0 .349 1.017a5.9 5.9 0 0 0 1.271 1.818l4.277 4.193l.039.038c2.248 2.165 5.852 2.133 8.063-.074l2.396-2.392c.54-.54.54-1.414.003-1.955a1.38 1.38 0 0 0-1.951-.003l-2.396 2.392a3.02 3.02 0 0 1-4.205.038l-.02-.019l-4.276-4.193c-.652-.64-.972-1.469-.948-2.263a2.7 2.7 0 0 1 .066-.523a2.55 2.55 0 0 1 .619-1.164L9.13 8.114c1.058-1.134 3.204-1.27 4.43-.278l3.501 2.831c.593.48 1.461.387 1.94-.207a1.384 1.384 0 0 0-.207-1.943l-3.5-2.831c-.8-.647-1.766-1.045-2.774-1.202l2.015-2.158A1.384 1.384 0 0 0 13.483 0m-2.866 12.815a1.38 1.38 0 0 0-1.38 1.382a1.38 1.38 0 0 0 1.38 1.382H20.79a1.38 1.38 0 0 0 1.38-1.382a1.38 1.38 0 0 0-1.38-1.382z"/></svg>');
}
.i-at {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M16 3A12.92 12.92 0 0 0 3 16v1a13 13 0 0 0 13 13h7v-2h-7A11 11 0 0 1 5 17v-1A10.94 10.94 0 0 1 16 5a10.64 10.64 0 0 1 11 11c0 3.59-1.4 5-3.66 5c-1.58 0-2.34-1.29-2.34-3v-8h-2v1.94A3.84 3.84 0 0 0 15.5 10a5.48 5.48 0 0 0-5.5 5.44v2.12A5.48 5.48 0 0 0 15.5 23a4.28 4.28 0 0 0 4-2.46A4.35 4.35 0 0 0 23.41 23c3.07 0 5.59-2 5.59-7A12.72 12.72 0 0 0 16 3m3 14.56a3.5 3.5 0 0 1-7 0v-2.12a3.5 3.5 0 0 1 7 0Z"/></svg>');
}
.i-home {
  --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.223a1 1 0 0 1 1.228 0l8 6.223a1 1 0 0 1 .386.79zm-2-1V9.978l-7-5.444l-7 5.444V19z"/></svg>');
}
[class^="i-"],
[class*=" i-"] {
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
}

/* --- Header / nav ------------------------------------------------------- */

.header {
  position: relative;
  z-index: 40;
}

.logo {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 3rem;
  height: 3rem;
  outline: none;
  user-select: none;
}

@media (min-width: 1280px) {
  .logo {
    position: fixed;
  }
}

.logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo .stroke {
  fill: none;
  stroke: #303030;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 1px;
  stroke-dasharray: 190 0;
  transform-origin: 50%;
  animation: logo-draw 10s infinite forwards;
}

html.dark .logo .stroke {
  stroke: #fdfdfd;
}

@keyframes logo-draw {
  0% {
    stroke-dashoffset: 1px;
    stroke-dasharray: 0 190;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40%,
  85% {
    stroke-dasharray: 190 0;
  }
  95%,
  100% {
    stroke-dasharray: 0 190;
  }
}

.nav {
  display: grid;
  grid-template-columns: auto max-content;
  box-sizing: border-box;
  width: 100%;
  padding: var(--nav-padding);
}

.nav > * {
  margin: auto;
}

.nav .right {
  display: grid;
  grid-auto-flow: column;
  gap: 1.2rem;
  align-items: center;
}

.nav a,
.nav button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
  background: none;
  padding: 0;
  font: inherit;
  opacity: 0.6;
  outline: none;
  text-decoration: none;
  border: none;
  transition: opacity 0.2s ease;
}

.nav a:hover,
.nav button:hover,
.nav a[aria-current="page"] {
  opacity: 1;
}

.nav button .i-moon {
  display: none;
}

html.dark .nav button .i-sun {
  display: none;
}

html.dark .nav button .i-moon {
  display: inline-block;
}

.nav a[aria-current="page"] {
  color: var(--fg-deep);
}

.nav .icon-only {
  display: none;
}

@media (max-width: 767px) {
  .nav {
    --nav-padding: 1.5rem;
  }
  .nav .label {
    display: none;
  }
  .nav .icon-only {
    display: inline-block;
  }
  .nav .right {
    gap: 1rem;
  }
}

/* --- Layout ------------------------------------------------------------- */

main {
  padding: 2.5rem 1.75rem 5rem;
  overflow-x: hidden;
}

.prose {
  max-width: var(--prose-max-width);
  margin-inline: auto;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.25em;
}

/* --- Typography --------------------------------------------------------- */

.prose h1 {
  color: var(--fg-deeper);
  font-size: 2.25em;
  font-weight: 800;
  line-height: 1.11111;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.prose h2 {
  color: var(--fg-deep);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.33333;
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose h3 {
  color: inherit;
  opacity: 0.7;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.6;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.prose h4 {
  color: inherit;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  text-wrap: pretty;
}

.prose strong,
.prose b {
  color: var(--fg-deep);
  font-weight: 600;
}

.prose em {
  color: var(--fg-deep);
  font-family: var(--font-serif);
  font-size: 1.05em;
}

.prose code {
  color: var(--fg-deep);
  background-color: #aaaaaa18;
  border-radius: 0.25rem;
  margin: -0.2em 0;
  padding: 0.2em 0.3em;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin-block: 3em;
}

.prose ul,
.prose ol {
  padding-left: 0;
  list-style: none;
}

.prose li {
  position: relative;
  padding-left: 1.75em;
  margin-top: 0.5em;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.6875em;
  left: 0.25em;
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  background-color: var(--fg-light);
  opacity: 0.6;
}

.prose ol {
  counter-reset: list-item;
}

.prose ol > li {
  counter-increment: list-item;
}

.prose ol > li::before {
  content: counter(list-item) ".";
  position: absolute;
  left: 0;
  color: var(--fg-light);
}

.prose blockquote {
  border-left: 0.25rem solid var(--c-border);
  padding-left: 1em;
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* --- Links -------------------------------------------------------------- */

a {
  color: inherit;
}

.prose a {
  color: var(--fg-deeper);
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
  transition: border 0.3s ease-in-out;
}

.prose a:hover {
  border-bottom: 1px solid var(--fg);
}

a.item {
  opacity: 0.6;
  text-decoration: none;
  border-bottom: none !important;
  transition: opacity 0.2s ease-out;
}

a.item:hover {
  opacity: 1;
}

/* Pill link with a favicon, à la antfu's "magic links". */
.magic-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  background: #8882;
  line-height: 100%;
  transform: translateY(3px);
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--fg-light) !important;
  border-width: 0 !important;
}

.magic-link:hover {
  background: #8883;
  color: var(--fg) !important;
}

.magic-link-image {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.magic-link-image.round {
  border-radius: 50%;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--c-border);
  border-radius: 0.25rem;
  opacity: 0.6;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.btn:hover {
  opacity: 1;
  color: var(--c-accent);
  background-color: #e8734a1a;
  border-color: var(--c-border);
}

/* --- Lists of things ---------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin-inline: -1rem;
}

@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.project-grid .project {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: none !important;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.project-grid .project:hover {
  background: #8881;
}

.project-grid .project .glyph {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.35rem;
  opacity: 0.6;
  font-size: 1.6rem;
  transition: opacity 0.2s ease;
}

.project-grid .project:hover .glyph {
  opacity: 1;
}

.project-grid .project .glyph.img {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
}

.project-grid .project .title {
  display: block;
  color: var(--fg-deep);
  font-weight: 500;
  line-height: 1.4;
}

.project-grid .project .desc {
  display: block;
  font-size: 0.9em;
  opacity: 0.6;
  line-height: 1.5;
  font-weight: 400;
}

/* Experience / timeline entries */
.entry {
  margin-top: 2rem;
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
}

.entry-head .role {
  color: var(--fg-deep);
  font-size: 1.05em;
  font-weight: 600;
}

.entry-head .when {
  margin-left: auto;
  font-size: 0.85em;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry-org {
  font-size: 0.95em;
  opacity: 0.65;
}

.entry ul {
  margin-top: 0.5rem;
}

.entry li {
  margin-top: 0.25em;
}

/* Inline metric callouts */
.metric {
  color: var(--fg-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Skill chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.chips span {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--c-border);
  border-radius: 0.25rem;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Social row */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.socials .i-github,
.socials .i-linkedin,
.socials .i-leetcode,
.socials .i-mail {
  opacity: 0.75;
}

.mono {
  font-family: var(--font-mono);
}

/* --- Scroll-to-top ------------------------------------------------------ */

.to-top {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.to-top.show {
  opacity: 0.6;
  pointer-events: auto;
}

.to-top.show:hover {
  opacity: 1;
  background: #8883;
}

/* --- Generative background ---------------------------------------------- */

.plum-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* --- Enter animations --------------------------------------------------- */

@keyframes slide-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [slide-enter],
  .slide-enter,
  .slide-enter-content > * {
    --enter-stage: 0;
    --enter-step: 90ms;
    --enter-initial: 0ms;
    animation: slide-enter 1s both;
    animation-delay: calc(
      var(--enter-initial) + var(--enter-stage) * var(--enter-step)
    );
  }

  .slide-enter-content > *:nth-child(1) {
    --enter-stage: 1;
  }
  .slide-enter-content > *:nth-child(2) {
    --enter-stage: 2;
  }
  .slide-enter-content > *:nth-child(3) {
    --enter-stage: 3;
  }
  .slide-enter-content > *:nth-child(4) {
    --enter-stage: 4;
  }
  .slide-enter-content > *:nth-child(5) {
    --enter-stage: 5;
  }
  .slide-enter-content > *:nth-child(6) {
    --enter-stage: 6;
  }
  .slide-enter-content > *:nth-child(7) {
    --enter-stage: 7;
  }
  .slide-enter-content > *:nth-child(8) {
    --enter-stage: 8;
  }
  .slide-enter-content > *:nth-child(9) {
    --enter-stage: 9;
  }
  .slide-enter-content > *:nth-child(10) {
    --enter-stage: 10;
  }
  .slide-enter-content > *:nth-child(11) {
    --enter-stage: 11;
  }
  .slide-enter-content > *:nth-child(12) {
    --enter-stage: 12;
  }
  .slide-enter-content > *:nth-child(13) {
    --enter-stage: 13;
  }
  .slide-enter-content > *:nth-child(14) {
    --enter-stage: 14;
  }
  .slide-enter-content > *:nth-child(15) {
    --enter-stage: 15;
  }
  .slide-enter-content > *:nth-child(n + 16) {
    --enter-stage: 16;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .logo .stroke {
    animation: none;
    stroke-dasharray: none;
  }
}

/* --- Dark-mode toggle transition ---------------------------------------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 9999;
}

html.dark::view-transition-old(root) {
  z-index: 9999;
}
html.dark::view-transition-new(root) {
  z-index: 1;
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .nav,
  .to-top,
  .plum-canvas,
  .logo {
    display: none !important;
  }
  main {
    padding: 0;
  }
  .prose {
    max-width: none;
  }
}