:root {
  color-scheme: light;
  --ink: #302b3b;
  --cream: #faf7f2;
  --pink: #efb0c4;
  --yellow: #f9d96e;
  --purple: #70569b;
  --muted: #77717f;
  --line: #e6e0e9;
  --surface: #ffffffd9;
  --glow: #eee6f566;
  --art-opacity: .22;
  --grain-opacity: .035;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #eee8f5;
    --cream: #15121b;
    --pink: #efa9c3;
    --purple: #c3a5eb;
    --muted: #b5aabd;
    --line: #3b3247;
    --surface: #211d29ed;
    --glow: #32233e66;
    --art-opacity: .18;
    --grain-opacity: .045;
  }
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 0% 0%, var(--glow), transparent 50%), var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::after {
  inset: 0;
  z-index: 2;
  background: url("grain.svg") repeat;
  opacity: var(--grain-opacity);
}

.puppy-art {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 0;
  color: var(--pink);
  font-family: monospace;
  font-size: var(--art-font-size, clamp(10px, 2.5vmin, 40px));
  font-weight: 1000;
  -webkit-text-stroke: .6px currentColor;
  letter-spacing: 0;
  line-height: 1.05;
  opacity: var(--art-opacity);
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%) rotate(var(--art-angle, -45deg));
  translate: var(--parallax-x, 0px) var(--parallax-y, 0px);
  white-space: pre;
  width: var(--art-width, max(160vw, 160svh));
}

.ascii-row {
  display: flex;
  align-items: baseline;
}

.ascii-row span { flex: none; }

/* Continue each row's underscores past both viewport edges. */
.ascii-row::before, .ascii-row::after {
  content: "________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________";
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ascii-row::before { text-align: right; }

a:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
  border-radius: 4px;
}

.layout {
  --hero-size: clamp(7rem, 18vw, 15rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  width: min(900px, 84vw);
  min-height: 100vh;
  margin: 0 0 0 6vw;
  padding: 12vh 0;
  position: relative;
  z-index: 1;
}

h1 {
  margin: 0;
  font-size: var(--hero-size);
  letter-spacing: -.1em;
  line-height: .78;
}

h1 em { color: var(--purple); font-style: normal; }

.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  transform: translateY(-8px);
}

.link-group { display: flex; flex-direction: column; align-items: flex-start; }
.link-group h2 { margin: 0 0 10px; color: var(--purple); font-size: .8rem; letter-spacing: .08em; }
.links a {
  margin-left: 20px;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  letter-spacing: -.05em;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s, transform .2s;
}

.links a:hover { color: var(--purple); transform: translateX(8px); }
.links span { color: var(--pink); font-size: .7em; vertical-align: .2em; }

@media (prefers-reduced-motion: no-preference) {
  .puppy-art {
    transition: transform .65s cubic-bezier(.2, .7, .2, 1), left .65s ease,
      font-size .65s ease, width .65s ease;
  }
  .hero { animation: arrive .8s cubic-bezier(.2, .7, .2, 1) both; }
  .link-group > * { animation: arrive .65s cubic-bezier(.2, .7, .2, 1) backwards; }
  .link-group { --delay: .12s; }
  .link-group:nth-child(2) { --delay: .32s; }
  .link-group > :nth-child(1) { animation-delay: var(--delay); }
  .link-group > :nth-child(2) { animation-delay: calc(var(--delay) + .05s); }
  .link-group > :nth-child(3) { animation-delay: calc(var(--delay) + .1s); }
  .link-group > :nth-child(4) { animation-delay: calc(var(--delay) + .15s); }
  .link-group > :nth-child(5) { animation-delay: calc(var(--delay) + .2s); }
  .link-group > :nth-child(6) { animation-delay: calc(var(--delay) + .25s); }
}

@keyframes arrive {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 650px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 56px;
    width: min(420px, calc(100% - 40px));
    margin: auto;
    min-height: 100svh;
    padding: 64px 0 48px;
  }

  h1 { font-size: clamp(5rem, 23vw, 7rem); }
  .links { gap: 24px; transform: none; }
  .links a {
    margin-left: 12px;
    font-size: clamp(1.35rem, 8vw, 1.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .links a { transition: none; }
  .puppy-art { translate: none; }
}