:root {
  color-scheme:dark;
  --bg:#111513;
  --text:#e9eeeb;
  --muted:#a0aaa4;
  --mint:#a5cdb8;
  --line:#343e37;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  position:relative;
  min-width:280px
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--mint)
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--mint);
  outline-offset:6px;
  border-radius:2px
}
button {
  font:inherit
}
::selection {
  background:#a5cdb8;
  color:#111513
}
.page-shell {
  width:min(960px,calc(100% - 112px));
  margin:auto;
  padding-bottom:42px
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:43px;
  gap:30px
}
.wordmark {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:16px;
  font-weight:550;
  letter-spacing:-.3px
}
.monogram {
  font-family:var(--mono);
  font-weight:600;
  font-size:22px;
  letter-spacing:-5px;
  margin-right:5px;
  color:var(--mint)
}
.monogram span {
  margin-left:3px
}
nav {
  display:flex;
  gap:28px;
  font-size:14px;
  color:#bec7c1
}
nav a span {
  font-size:13px;
  color:#6f8075;
  margin-left:5px
}
.intro {
  padding:76px 0 53px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  font:11px var(--mono);
  color:var(--muted);
  margin:0 0 23px
}
h1 {
  font-size:clamp(38px,4.2vw,50px);
  font-weight:500;
  letter-spacing:-2.5px;
  line-height:1.12;
  margin:0
}
h1 span {
  color:var(--mint)
}
.intro-copy {
  font-size:17px;
  line-height:1.8;
  max-width:520px;
  color:var(--muted);
  margin:25px 0 0
}
.focus {
  font:12px var(--mono);
  color:#82968a;
  margin:18px 0 0
}
.projects {
  position:relative
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:23px
}
h2 {
  font:11px var(--mono);
  letter-spacing:1.7px;
  text-transform:uppercase;
  margin:0;
  color:#c1ccc5
}
.section-note {
  font:12px var(--mono);
  color:#77877d
}
.platform {
  height:1px;
  background:var(--line)
}
.section-platform {
  width:100%
}
.project {
  display:grid;
  grid-template-columns:50px 1fr;
  position:relative;
  padding:27px 0 56px;
  gap:0 10px
}
.project-number {
  font:11px var(--mono);
  color:#687b6e;
  padding-top:7px
}
.project-content {
  min-width:0
}
.project-heading {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap
}
h3 {
  margin:0;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.3px
}
.sample-label {
  font:10px var(--mono);
  color:#91a297;
  border:1px solid #34473c;
  padding:4px 6px;
  border-radius:3px
}
.project p {
  margin:10px 0 19px;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  max-width:630px
}
.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}
.technologies {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.technologies li {
  font:11px var(--mono);
  color:#aac4b4;
  background:#1f2b24;
  border:1px solid #2a3a30;
  border-radius:4px;
  padding:5px 8px
}
.project-links {
  display:flex;
  gap:22px;
  font-size:13px
}
.project-links a {
  display:flex;
  gap:12px;
  align-items:center
}
.project-links span {
  color:#82a890
}
.project-platform {
  position:absolute;
  bottom:0;
  left:0;
  width:100%
}
.project:nth-of-type(3n+1) .project-platform {
  width:94%
}
.project:nth-of-type(3n+2) .project-platform {
  width:100%
}
.project:nth-of-type(3n) .project-platform {
  width:89%
}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  min-height:128px;
  padding:30px 0
}
.footer-copy {
  font:12px var(--mono);
  color:var(--mint)
}
.prompt-symbol {
  color:#d9e9df;
  margin-right:11px
}
.copyright {
  display:block;
  font:11px var(--mono);
  color:#67796d;
  margin:13px 0 0 20px
}
.pet-control {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #344239;
  background:transparent;
  color:#96a99d;
  font-size:12px;
  padding:9px 12px;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap
}
.pet-control:hover {
  background:#1d2921;
  color:#d7e7dd
}
.pet-control[hidden] {
  display:none
}
.control-icon {
  color:var(--mint);
  font:12px var(--mono);
  width:12px
}
.floor-platform {
  opacity:.55
}
.empty-state {
  font-size:16px;
  color:var(--muted);
  padding:45px 0 70px
}
.skip-link {
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  padding:12px;
  background:#1d2921;
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
/* A decorative layer follows document coordinates, leaving every link clickable. */
#robot-layer {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}
.robot {
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:58px;
  will-change:transform;
  transform-origin:50% 100%;
  --facing:1
}
.robot svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  image-rendering:pixelated
}
.robot-facing {
  transform:scaleX(var(--facing));
  transform-origin:center
}
.robot .body-group {
  transform-origin:24px 42px
}
.robot .robot-head {
  transform-origin:24px 26px
}
.robot .left-leg,.robot .right-leg {
  transform-origin:24px 41px
}
.robot .left-arm {
  transform-origin:12px 32px
}
.robot .right-arm {
  transform-origin:34px 32px
}
.robot .flame,.robot .sleep-z,.robot .dust,.robot .spark {
  opacity:0
}
.robot[data-state="walk"] .body-group {
  animation:bob .32s steps(2,end) infinite
}
.robot[data-state="walk"] .left-leg {
  animation:step .32s steps(2,end) infinite
}
.robot[data-state="walk"] .right-leg {
  animation:step .32s steps(2,end) infinite reverse
}
.robot[data-state="idle"] .eyes {
  animation:blink 4.1s steps(1,end) infinite;
  transform-origin:24px 22px
}
.robot[data-state="look"] .robot-head {
  transform:rotate(12deg) translateY(2px)
}
.robot[data-state="fall"] .body-group {
  animation:tumble .8s linear infinite
}
.robot[data-state="fall"] .right-arm {
  transform:rotate(-105deg)
}
.robot[data-state="fall"] .left-arm {
  transform:rotate(90deg)
}
.robot[data-state="land"] .body-group {
  animation:squash .45s ease-out both
}
.robot[data-state="land"] .dust {
  animation:dust .5s ease-out both
}
.robot[data-state="jetpack"] .flame {
  opacity:1;
  animation:thrust .12s steps(2,end) infinite;
  transform-origin:9px 39px
}
.robot[data-state="jetpack"] .body-group {
  transform:rotate(-6deg)
}
.robot[data-state="jetpack"] .left-leg {
  transform:translateY(2px)
}
.maintenance-hatch {
  opacity:var(--hatch-opacity, 0)
}
.hatch-door {
  transform-origin:67px 36px;
  transform:scaleX(var(--door-scale, 1)) skewY(var(--door-skew, 0deg))
}
.maintenance-tool,.hatch-sparks {
  opacity:0
}
.robot[data-state="repair-open"] .right-arm,
.robot[data-state="repair-close"] .right-arm {
  transform:rotate(-65deg)
}
.robot[data-state^="repair"] .robot-head {
  transform:rotate(9deg) translateX(1px)
}
.robot[data-state="repair"] .right-arm {
  animation:fix .7s steps(3,end) infinite
}
.robot[data-state="repair"] .maintenance-tool {
  opacity:1
}
.robot[data-state="repair"] .body-group {
  animation:work-lean 2.1s ease-in-out infinite
}
.robot[data-state="repair"] .hatch-sparks {
  animation:maintenance-sparks 1.4s steps(1,end) infinite
}
.robot[data-state="repair"] .hatch-gear {
  transform-origin:46px 40px;
  animation:gear-turn 2.1s steps(6,end) infinite
}
.robot[data-state="repair-close"] .hatch-indicator,
.robot[data-state="repair-hide"] .hatch-indicator {
  fill:#a5cdb8
}
.robot[data-state="sleep"] .body-group {
  transform:translateY(6px) scaleY(.86)
}
.robot[data-state="sleep"] .eyes {
  transform:scaleY(.25);
  transform-origin:24px 22px
}
.robot[data-state="sleep"] .sleep-z {
  animation:snooze 2.4s ease-out infinite
}
.robot[data-state="play"] .body-group {
  animation:play-hop .6s ease-in-out infinite
}
.robot[data-state="play"] .left-arm {
  animation:play-wave-left .45s ease-in-out infinite alternate
}
.robot[data-state="play"] .right-arm {
  animation:play-wave-right .45s ease-in-out infinite alternate
}
.robot[data-state="play"] .robot-head {
  animation:play-head .6s ease-in-out infinite alternate
}
.robot[data-state="play"] .spark {
  animation:spark .4s steps(2,end) infinite
}
.robot[data-paused="true"] *, .robot[data-paused="true"] *::after {
  animation-play-state:paused!important
}
@keyframes bob {
  50% {
    transform:translateY(-1px)
  }
}
@keyframes step {
  50% {
    transform:translate(2px,-2px)
  }
}
@keyframes blink {
  0%,94%,100% {
    transform:scaleY(1)
  }
  96% {
    transform:scaleY(.1)
  }
}
@keyframes tumble {
  to {
    transform:rotate(360deg)
  }
}
@keyframes squash {
  0% {
    transform:scale(1.2,.72)
  }
  60% {
    transform:scale(.94,1.05)
  }
  100% {
    transform:scale(1)
  }
}
@keyframes dust {
  0% {
    opacity:.8;
    transform:scaleX(.6)
  }
  100% {
    opacity:0;
    transform:scaleX(1.6)
  }
}
@keyframes thrust {
  50% {
    transform:scaleY(.65)
  }
}
@keyframes fix {
  0%,100% {
    transform:rotate(-68deg)
  }
  50% {
    transform:rotate(-91deg)
  }
}
@keyframes work-lean {
  0%,100% { transform:rotate(2deg) }
  50% { transform:rotate(6deg) }
}
@keyframes maintenance-sparks {
  0%,12%,100% { opacity:0 }
  6% { opacity:.9 }
}
@keyframes gear-turn {
  to { transform:rotate(360deg) }
}
@keyframes spark {
  50% {
    opacity:1
  }
}
@keyframes snooze {
  0% {
    opacity:0;
    transform:translateY(0)
  }
  40% {
    opacity:.8
  }
  100% {
    opacity:0;
    transform:translateY(-8px)
  }
}
@keyframes play-hop {
  0%,100% {
    transform:translateY(0) scale(1,1)
  }
  35% {
    transform:translateY(-6px) scale(.95,1.06)
  }
  70% {
    transform:translateY(0) scale(1.06,.94)
  }
}
@keyframes play-wave-left {
  0% {
    transform:rotate(20deg)
  }
  100% {
    transform:rotate(-70deg)
  }
}
@keyframes play-wave-right {
  0% {
    transform:rotate(-70deg)
  }
  100% {
    transform:rotate(20deg)
  }
}
@keyframes play-head {
  0% {
    transform:rotate(-8deg)
  }
  100% {
    transform:rotate(8deg)
  }
}
@media(min-width:1400px) {
  .page-shell {
    width:960px
  }
  .intro {
    padding-top:86px
  }
}
@media(max-width:640px) {
  .page-shell {
    width:calc(100% - 40px);
    padding-bottom:24px
  }
  .site-header {
    padding-top:25px;
    gap:18px
  }
  .wordmark {
    font-size:14px;
    gap:9px
  }
  nav {
    gap:15px;
    font-size:12px
  }
  nav a span {
    display:none
  }
  .intro {
    padding:76px 0 60px
  }
  h1 {
    font-size:clamp(34px,8.7vw,51px);
    letter-spacing:-1.7px
  }
  .intro-copy {
    font-size:16px;
    max-width:360px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.4px
  }
  .section-note {
    display:none
  }
  .project {
    grid-template-columns:24px 1fr;
    gap:0 8px;
    padding:28px 0 56px
  }
  h3 {
    font-size:18px
  }
  .project-heading {
    gap:8px
  }
  .project p {
    font-size:14px
  }
  .project-number {
    font-size:10px
  }
  .project-meta {
    gap:16px
  }
  .project-links {
    font-size:13px
  }
  .site-footer {
    min-height:130px
  }
  .robot {
    width:40px;
    height:48.333px
  }
  .copyright {
    font-size:10px
  }
  .pet-control {
    font-size:11px;
    padding:8px 10px
  }
  .footer-copy {
    font-size:11px
  }
}
@media(max-width:360px) {
  .site-header {
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  .intro {
    padding-top:50px
  }
  .site-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    padding:25px 0 45px
  }
}