@font-face {
  font-family: "Sometype Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sometype-mono.woff2") format("woff2");
}

:root {
  --ground: #0f1012;
  --text: #e7e8ea;
  --body: #c9cbcf;
  --sub: #b7bac0;
  --soft: #8c9097;
  --dim: #7d828a;
  --faint: #5e626a;
  --lane: #3a3d44;
  --rule: #26282c;
  --tree: #303339;
  --grid: #1a1c20;
  --well: #16181b;
  --accent: #9dc2ff;
  --red: #e5484d;
  --green: #4cc38a;
  --icon: #b7bac0;
  --mono: "Sometype Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  background: var(--ground);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

h1,
h2 {
  font: inherit;
}

svg.i {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo {
  width: 14px;
  height: 14px;
  flex: none;
  object-fit: contain;
}

.monogram {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 16px;
  font-weight: 500;
}

.monogram .cmd {
  display: none;
  margin-left: 0.6em;
  white-space: pre;
}

.boot .monogram .cmd {
  display: inline;
}

.boot .monogram .path {
  display: none;
}

.monogram .path {
  white-space: pre;
  overflow: hidden;
}

.entering .monogram .path {
  animation: path-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
}

@keyframes path-in {
  from { max-width: 0; opacity: 0; }
  to { max-width: 3ch; opacity: 1; }
}

.hold-links .nav-links {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.cursor {
  width: 7px;
  height: 14px;
  background: var(--accent);
  animation: blink 1.1s linear infinite;
}

.monogram.typing .cursor {
  animation: none;
}

.flow,
.footer,
.nav-links,
.mobile > :not(.m-nav) {
  transition: opacity 0.3s ease;
}

.boot .flow,
.boot .footer,
.boot .nav-links,
.boot .mobile > :not(.m-nav) {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.boot .monogram:not(.typing) .cmd {
  visibility: hidden;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: breathe 2.4s ease-in-out infinite;
}

.key {
  font-size: 11px;
  color: var(--dim);
}

.key.section {
  display: inline;
  font-size: 12px;
  font-weight: 500;
  color: var(--soft);
}

@keyframes blink {
  0%, 54.9% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.js [data-at] {
  opacity: 0;
}

.st * {
  opacity: 0;
}

.st .on,
.st .caret,
.st svg.on * {
  opacity: 1;
}

.st img.on,
.st svg.on {
  transition: opacity 0.25s ease;
}

.caret {
  position: relative;
}

.caret::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.08em;
  width: 0.6em;
  height: 0.95em;
  background: var(--accent);
}

.bar {
  position: absolute;
  height: 6px;
  --p: 1;
  --grow: 0;
}

.js .bar {
  --p: 0;
}

.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) calc(var(--p) * 100% - 10px),
      rgba(255, 255, 255, calc(var(--grow) * 0.85)) calc(var(--p) * 100%)
    ),
    var(--c);
}

.desktop {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px max(24px, calc((min(100vw, 1440px) - 1144px) / 2));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mobile {
  display: none;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: 472px 600px;
  grid-template-rows: 207px 253px 541px;
  column-gap: 72px;
}

.flow .grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grid);
}

.flow .axis {
  position: absolute;
  top: 2px;
  font-size: 10px;
  color: var(--faint);
}

.cell {
  position: relative;
}

.cell > *,
.timeline > * {
  position: absolute;
}

.lbl {
  font-size: 11px;
  color: var(--soft);
  white-space: pre;
}

.dur {
  font-size: 10px;
  color: var(--faint);
  white-space: pre;
}

.cell > .edge {
  right: 33px;
}

.guide {
  width: 1px;
  background: var(--tree);
}

.branch {
  position: absolute;
  width: 6px;
  height: 1px;
  background: var(--tree);
}

.root-guide {
  position: absolute;
  left: 1px;
  top: 62px;
  width: 1px;
  height: 789px;
  background: var(--tree);
}

.c-text { color: var(--text); }
.c-red { color: var(--red); }
.c-green { color: var(--green); }
.c-accent { color: var(--accent); }

.content {
  display: flex;
  flex-direction: column;
}

.intro {
  position: relative;
  gap: 14px;
}

.intro .response {
  position: absolute;
  top: -28px;
  left: 0;
}

.response {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--dim);
}

.intro h1 {
  margin-top: -5px;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.2;
}

.intro p {
  width: 600px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sub);
}

.toolkit {
  padding-top: 14px;
  gap: 12px;
}

.stack {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack-row {
  display: flex;
  align-items: center;
}

.stack-row > .key {
  width: 108px;
  flex: none;
}

.chips {
  display: flex;
  align-items: center;
  gap: 22px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--body);
}

.chip.agent {
  color: var(--text);
}

.lower {
  padding-top: 22px;
  gap: 80px;
}

.work {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline {
  position: relative;
  width: 600px;
  height: 95px;
}

.timeline .org {
  top: 0;
  font-size: 12px;
  color: var(--text);
}

.timeline .role {
  top: 35px;
  font-size: 11px;
  color: var(--dim);
  line-height: 1.3;
  white-space: pre;
}

.timeline .tbar {
  top: 24px;
  height: 3px;
  background: var(--soft);
}

.timeline .now-bar {
  background: var(--accent);
  animation: breathe 2.4s ease-in-out infinite;
}

.timeline .t-axis {
  top: 73px;
  left: 0;
  width: 600px;
  height: 1px;
  background: var(--rule);
}

.timeline .tick {
  top: 73px;
  width: 1px;
  height: 4px;
  background: var(--faint);
}

.timeline .tick.minor {
  height: 3px;
  background: var(--lane);
}

.timeline .year {
  top: 79px;
  font-size: 10px;
  color: var(--dim);
}

.offclock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.interests {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.interest {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--body);
}

.interest svg {
  color: var(--icon);
}

.contact {
  width: 600px;
}

.channels {
  padding-top: 12px;
  border-bottom: 1px solid var(--rule);
}

.channel {
  height: 44px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule);
  color: var(--text);
}

.channel > svg:first-child {
  color: var(--icon);
  margin-right: 14px;
}

.channel .c-label {
  width: 80px;
  flex: none;
  font-size: 11px;
  color: var(--dim);
}

.channel .c-value {
  flex: 1;
  font-size: 13px;
}

.channel .c-meta {
  font-size: 11px;
  color: var(--dim);
  margin-right: 16px;
}

.channel .c-arrow {
  color: var(--soft);
}

.channel.primary > svg,
.channel.primary .c-value,
.channel.primary .c-arrow {
  color: var(--accent);
}

.channel.primary .c-value {
  font-size: 15px;
  font-weight: 500;
}

.channel:hover .c-value,
.channel:focus-visible .c-value {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.contact.pulse > .key.section {
  animation: pulse-key 1.4s ease-out;
}

.contact.pulse .channel {
  animation: pulse-row 1.4s ease-out both;
}

.contact.pulse .channel:nth-child(2) {
  animation-delay: 90ms;
}

.contact.pulse .channel:nth-child(3) {
  animation-delay: 180ms;
}

@keyframes pulse-key {
  0%, 30% { color: var(--accent); }
  100% { color: var(--soft); }
}

@keyframes pulse-row {
  0% {
    background: transparent;
    box-shadow: -12px 0 transparent, 12px 0 transparent;
  }
  12% {
    background: rgb(157 194 255 / 0.1);
    box-shadow: -12px 0 rgb(157 194 255 / 0.1), 12px 0 rgb(157 194 255 / 0.1);
  }
  100% {
    background: transparent;
    box-shadow: -12px 0 transparent, 12px 0 transparent;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--dim);
}

@media (max-width: 1199px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 24px 28px;
  }
}

.m-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-nav .monogram {
  font-size: 15px;
}

.m-nav .cursor {
  height: 13px;
}

.boot .m-nav .monogram {
  font-size: 13px;
}

.boot .m-nav .cursor {
  width: 6px;
  height: 12px;
}

.m-nav .nav-links {
  gap: 16px;
  font-size: 12px;
  color: var(--soft);
}

.m-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.span-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.span-head .row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.span-head .row .dur {
  font-size: 10px;
}

.track {
  position: relative;
  height: 6px;
  background: var(--well);
}

.span-head .note {
  font-size: 10px;
  color: var(--faint);
}

.m-intro-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-intro-text .response {
  gap: 8px;
}

.m-intro-text h1 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.2;
}

.m-intro-text p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sub);
}

.m-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-toolkit {
  gap: 14px;
}

.m-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-group > .key {
  font-size: 10px;
}

.m-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 359px) {
  .m-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

.m-chips .chip {
  font-size: 12px;
}

.m-chips .logo {
  width: 13px;
  height: 13px;
}

.jobs {
  display: flex;
  flex-direction: column;
}

.job {
  display: flex;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.job .years {
  width: 72px;
  flex: none;
  font-size: 11px;
  color: var(--dim);
}

.job .j-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job .company {
  color: var(--body);
}

.job .j-role {
  font-size: 11px;
  color: var(--dim);
}

.job.current .years,
.job.current .company {
  color: var(--accent);
}

.m-offclock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-offclock .interest {
  gap: 10px;
}

.m-channels {
  border-bottom: 1px solid var(--rule);
}

.m-channel {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rule);
}

.m-channel > svg:first-child {
  color: var(--icon);
}

.m-channel .m-c-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-channel .c-value {
  font-size: 13px;
  color: var(--text);
}

.m-channel .c-meta {
  font-size: 10px;
  color: var(--dim);
}

.m-channel .c-arrow {
  color: var(--soft);
}

.m-channel.primary > svg,
.m-channel.primary .c-value,
.m-channel.primary .c-arrow {
  color: var(--accent);
}

.m-channel.primary .c-value {
  font-size: 14px;
  font-weight: 500;
}

.m-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 10px;
  color: var(--dim);
}

.nf {
  max-width: 680px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.nf-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.nf-trace {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr 36px;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
}

.nf-trace .dur {
  text-align: right;
}

.nf-path {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-child {
  position: relative;
  padding-left: 14px;
}

.nf-child::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--tree);
}

.nf-trace .bar::after {
  animation: nf-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both;
}

.nf-trace .c-red {
  animation: nf-in 0.2s ease 0.95s both;
}

@keyframes nf-grow {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes nf-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nf-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nf-body h1 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.2;
}

.nf-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--sub);
}

.nf-body code {
  font: inherit;
  color: var(--text);
  word-break: break-all;
}

.dot.miss {
  background: var(--red);
}

@media (max-width: 599px) {
  .nf {
    padding: 20px 24px 28px;
  }

  .nf .nav-links {
    gap: 16px;
    font-size: 12px;
    color: var(--soft);
  }

  .nf-trace {
    grid-template-columns: minmax(0, 120px) 1fr 30px;
    column-gap: 12px;
  }

  .nf-body h1 {
    font-size: 38px;
    letter-spacing: -1.5px;
  }

  .nf-body p {
    font-size: 14px;
  }

  .nf .channel .c-meta {
    display: none;
  }

  .nf .channel .c-label {
    width: 64px;
  }

  .nf .footer {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .dot,
  .timeline .now-bar,
  .contact.pulse .channel,
  .contact.pulse > .key.section,
  .nf-trace .bar::after,
  .nf-trace .c-red {
    animation: none;
  }
}