:root {
  color-scheme: light;
  --paper: #f8f7f4;
  --ink: #1c1c1e;
  --muted: #565654;
  --accent: #285f53;
  --rule: #d9d8d3;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-9: 72px;
  --space-15: 120px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  width: min(56rem, calc(100% - 2 * clamp(24px, 5vw, 72px)));
  margin-inline: auto;
  padding-block: clamp(var(--space-9), 10vw, var(--space-15)) var(--space-6);
  overflow-wrap: anywhere;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h3 {
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 1.06;
}

p {
  max-width: 52ch;
  color: var(--muted);
}

.intro p {
  margin-top: var(--space-2);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

main {
  margin-top: clamp(var(--space-9), 9vw, var(--space-15));
}

h2 {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.project {
  display: grid;
  gap: var(--space-2);
  align-items: baseline;
  justify-items: start;
}

.project,
.education li {
  padding-block: var(--space-4);
  border-block: 1px solid var(--rule);
}

.project + .project,
.education li + li {
  border-block-start: 0;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-weight: 650;
}

.project p,
.education li p {
  margin-top: var(--space-1);
}

.education {
  margin-top: var(--space-6);
}

.education ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.about-page .contact {
  margin-top: auto;
  padding-top: var(--space-4);
}

.about {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.experience {
  width: min(100%, 36rem);
}

.experience-role {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
}

.experience-role span {
  color: var(--muted);
  font-size: 0.875rem;
}

.experience p {
  margin-top: var(--space-1);
}

.page-nav {
  margin-top: var(--space-2);
}

a {
  color: var(--accent);
  font-weight: 550;
  text-underline-offset: 0.25em;
  text-decoration-color: transparent;
  transition: text-decoration-color 140ms ease;
}

a:hover, a:focus-visible {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.875rem;
}

@media (min-width: 42rem) {
  .project {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
  }

  .project > :nth-child(n + 3) {
    grid-column: 1 / -1;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: 140ms ease-in both page-exit;
  }

  ::view-transition-new(root) {
    animation: 220ms ease-out both page-enter;
  }

  @keyframes page-exit {
    to {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @keyframes page-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

.project-example {
  min-width: 0;
  width: 100%;
}

.demo-trigger {
  appearance: none;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.demo-window {
  width: min(52rem, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}

.demo-window::backdrop {
  background: #131b18a6;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-window::backdrop {
    transition: opacity 150ms ease-in;
  }

  .demo-window.is-closing::backdrop {
    opacity: 0;
  }
}

.demo-titlebar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding-inline: var(--space-1);
  text-align: center;
}

.demo-titlebar button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.demo-titlebar button span {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid #df4d47;
  border-radius: 50%;
  background: #ff6059;
  color: transparent;
  font: 700 11px/1 system-ui, sans-serif;
}

.demo-titlebar button:is(:hover, :focus-visible) span {
  color: #561813;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-titlebar button span {
    transition: color 140ms ease-out;
  }
}

.demo-titlebar button:focus-visible {
  outline-offset: -4px;
}

.demo-titlebar strong:focus {
  outline: none;
}

.demo-window img {
  display: block;
  width: 100%;
  height: auto;
}

.terminal-preview {
  max-width: 42rem;
  margin: 0;
}

.terminal-screen {
  overflow: hidden;
  border-radius: 12px;
  background: #202623;
  color: #e0e9e4;
  font: 0.875rem/1.65 ui-monospace, monospace;
}

.terminal-command,
.terminal-screen pre {
  margin: 0;
  padding: var(--space-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.terminal-command {
  border-bottom: 1px solid #45534c;
  background: #2b3530;
}

.terminal-command span,
.terminal-screen strong {
  color: #a7dfbc;
}

.terminal-screen code,
.terminal-screen pre {
  font: inherit;
}

.terminal-line {
  display: block;
}

.terminal-preview figcaption {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 0.875rem;
}

.project-example :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.terminal-screen:is(:hover, :focus-visible) {
  box-shadow: 0 8px 18px #2026234d, 0 3px 6px #20262333;
}

@media (prefers-reduced-motion: no-preference) {
  .terminal-screen {
    transition: transform 220ms ease-out, box-shadow 220ms ease-out;
  }

  .terminal-screen:is(:hover, :focus-visible) {
    transform: translateY(-3px) scale(1.01);
  }

  .terminal-screen:is(:hover, :focus-visible, .is-playing) .terminal-command code {
    display: block;
    animation: terminal-command-reveal 500ms steps(24, end) both;
  }

  .terminal-screen:is(:hover, :focus-visible, .is-playing) strong {
    animation: terminal-match 600ms ease-out 500ms both;
  }

  @keyframes terminal-command-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }

  @keyframes terminal-match {
    25% { background-color: #a7dfbc; color: #202623; }
  }
}

.demo-window img[hidden],
.demo-status:empty {
  display: none;
}

.demo-status {
  padding: var(--space-2);
}

.demo-frame {
  overflow: hidden;
}

.demo-frame img {
  width: 104%;
  max-width: none;
  margin-inline-start: -4%;
}

.contact a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: -2px 2px 0 var(--rule), -3px 4px 6px #20262318;
}

.contact a:is(:hover, :focus-visible) {
  background: var(--accent);
  color: white;
  box-shadow: -3px 3px 0 #204d43, -5px 8px 12px #20262330;
}

.contact svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  .contact a {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out,
      background-color 200ms ease-out, color 200ms ease-out;
  }

  .contact a:is(:hover, :focus-visible) {
    transform: translate(2px, -3px) rotate(-5deg) skewX(4deg);
  }
}